/* ================================================================
   AMELIA BOOKING PLUGIN — CSS Overrides (V2 brand re-skin)
   RE-VERIFY + RE-APPLY AFTER EVERY AMELIA UPDATE — Amelia re-rolls
   its compiled Vue DOM/classes on updates (known landmine plugin);
   walk the FULL logged-out book → Stripe flow after every update
   AND after every edit to this file.

   Brand mapping (Gemini v2 move 2 — "Seamless Checkout Wrapper"):
   - cream  #F4F1E8 surfaces (no stark white panels)
   - navy   #2B3F58 typography + ENABLED primary buttons (white text)
   - gold   #E1B778 STRICTLY for selected date/time states
   - slate  #8F9EAF hairlines
   - electric-blue Element-UI defaults (#265CF2 dates, timezone pill)
     are killed via Amelia's own CSS custom props where possible.

   Selector policy: prefer Amelia's stable .am-* roots (verified live
   2026-06-09: .am-advsc__*, .am-button*, .am-fs__*, .am-select-popper)
   over hashed/[class*=] matching. [class*="selected"] is used ONLY
   tightly scoped to calendar cells/slots — it would otherwise match
   Element's .el-select__selected-item.

   ABSOLUTE: never style/touch the Stripe iframe or its contents,
   never change Amelia settings/PHP; payments stay OFF-SITE.
   ================================================================ */

/* ---- V2 Root container (structural, keep) ---- */
[id^="amelia-v2-booking"] {
  font-family: var(--font-sans) !important;
  color: var(--charcoal, #2C2A29) !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ---- V2 Wrapper & main panel (structural, keep) ---- */
[id^="amelia-v2-booking"] .am-fs__wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  /* MOBILE-VOID FIX (skeptic S2): Amelia ships .am-fs__wrapper with
     margin:100px 0 — 200px of dead space inside the navy booking embed.
     Verified live 2026-06-09 (computed margin "100px 0px" at 390px vp). */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

[id^="amelia-v2-booking"] .am-fs__main {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

[id^="amelia-v2-booking"] .am-fs__main-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ---- Brand color custom props ----
   Amelia + Element Plus both read CSS custom props; overriding the vars
   is the most update-resilient styling lever we have.
   --am-c-btn-prim is the source of the electric-blue #265CF2 (verified
   live: computed --am-c-btn-prim: #265CF2 before this override). */
[id^="amelia-v2-booking"],
[id^="amelia-v2-booking"] #amelia-container {
  --am-c-primary: var(--gold, #E1B778) !important;        /* selected/accent states */
  --am-c-main-heading-text: var(--navy, #2B3F58) !important;
  --am-c-main-text: var(--charcoal, #2C2A29) !important;
  --am-c-main-bgr: var(--cream, #F4F1E8) !important;      /* cream surface, not white */
  --am-c-btn-prim: var(--navy, #2B3F58) !important;       /* kills electric blue */
  --am-c-btn-prim-text: #FFFFFF !important;
  --el-color-primary: var(--navy, #2B3F58) !important;    /* Element-UI accents (timezone select etc.) */
}

/* ---- Surfaces: cream instead of stark white ---- */
[id^="amelia-v2-booking"] .am-fs__main,
[id^="amelia-v2-booking"] .am-fs__main-mobile,
[id^="amelia-v2-booking"] .am-fs__main-content,
[id^="amelia-v2-booking"] .am-slide-popup__block,
[id^="amelia-v2-booking"] .am-fs__ps-popup {
  background-color: var(--cream, #F4F1E8) !important;
}

/* ---- Headings & body type: navy/charcoal ---- */
[id^="amelia-v2-booking"] h2,
[id^="amelia-v2-booking"] h3,
[id^="amelia-v2-booking"] .am-heading,
[id^="amelia-v2-booking"] .am-fs__main-heading,
[id^="amelia-v2-booking"] .am-fs__main-heading-inner-title {
  font-family: var(--font-sans) !important;
  font-weight: var(--font-weight-medium, 600) !important;
  color: var(--navy, #2B3F58) !important;
}

/* ================================================================
   PRIMARY BUTTON ("Continue") — enabled must be unmistakable.
   Live bug (skeptic S1): enabled AND disabled both rendered gold
   with charcoal text; Amelia's .is-disabled opacity made the gold
   button permanently read as disabled at the point of payment.
   Fix: ENABLED = white-on-navy (9.0:1, AA/AAA). DISABLED = muted
   cream-2 with slate hairline — visibly inert, opacity reset.
   ================================================================ */
[id^="amelia-v2-booking"] .am-button--filled.am-button--primary:not(.is-disabled),
[id^="amelia-v2-booking"] button[type="submit"]:not(.is-disabled):not([disabled]) {
  background-color: var(--navy, #2B3F58) !important;
  border-color: var(--navy, #2B3F58) !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md, 8px) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
[id^="amelia-v2-booking"] .am-button--filled.am-button--primary:not(.is-disabled) .am-button__inner,
[id^="amelia-v2-booking"] button[type="submit"]:not(.is-disabled):not([disabled]) .am-button__inner {
  color: #FFFFFF !important;
}
[id^="amelia-v2-booking"] .am-button--filled.am-button--primary:not(.is-disabled):hover,
[id^="amelia-v2-booking"] button[type="submit"]:not(.is-disabled):not([disabled]):hover {
  background-color: var(--navy-deep, #1F2E41) !important;
  border-color: var(--navy-deep, #1F2E41) !important;
}
[id^="amelia-v2-booking"] .am-button--filled.am-button--primary:not(.is-disabled):focus-visible {
  outline: 2px solid var(--gold, #E1B778) !important;
  outline-offset: 2px !important;
}

/* Disabled: visibly inert (decorative state — AA does not apply, but
   ink-60 on cream-2 still reads at ~4.6:1) */
[id^="amelia-v2-booking"] .am-button--primary.is-disabled,
[id^="amelia-v2-booking"] .am-button--primary[disabled] {
  background-color: var(--cream-2, #EAE5D8) !important;
  border: 1px solid rgba(143, 158, 175, 0.6) !important;
  color: var(--ink-60, #5B5750) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
[id^="amelia-v2-booking"] .am-button--primary.is-disabled .am-button__inner,
[id^="amelia-v2-booking"] .am-button--primary[disabled] .am-button__inner {
  color: var(--ink-60, #5B5750) !important;
}

/* Secondary / text / icon buttons (calendar arrows, "No" etc.): navy */
[id^="amelia-v2-booking"] .am-button--secondary,
[id^="amelia-v2-booking"] .am-button--text,
[id^="amelia-v2-booking"] .am-button--plain {
  color: var(--navy, #2B3F58) !important;
}

/* ================================================================
   CALENDAR (date & time step) — .am-advsc__* roots, verified live.
   Default cells navy; disabled slate; selected = THE gold moment.
   ================================================================ */
[id^="amelia-v2-booking"] .am-advsc__dayGridMonth-header-cell {
  color: var(--navy, #2B3F58) !important;
  font-weight: 600 !important;
}
[id^="amelia-v2-booking"] .am-advsc__dayGridMonth-cell {
  color: var(--navy, #2B3F58) !important;
  border-color: rgba(143, 158, 175, 0.45) !important; /* slate hairline */
  background-color: transparent !important;
}
[id^="amelia-v2-booking"] .am-advsc__dayGridMonth-disabled {
  color: rgba(143, 158, 175, 0.75) !important; /* slate, visibly unavailable */
  border-color: transparent !important;
}
/* Selected date — gold is reserved for exactly this (and slot) state.
   FRAGILITY: Amelia marks selection with a suffixed/hashed class; the
   tight [class*="selected"] on the CELL root is the stable hook. */
[id^="amelia-v2-booking"] .am-advsc__dayGridMonth-cell[class*="selected"],
[id^="amelia-v2-booking"] .am-advsc__dayGridMonth-cell[aria-selected="true"] {
  background-color: var(--gold, #E1B778) !important;
  border-color: var(--gold, #E1B778) !important;
  color: var(--charcoal, #2C2A29) !important; /* 7.4:1 on gold */
  font-weight: 700 !important;
}

/* Time slots: navy text, slate hairline; selected slot = gold */
[id^="amelia-v2-booking"] .am-advsc__slot-wrapper {
  color: var(--navy, #2B3F58) !important;
}
[id^="amelia-v2-booking"] .am-advsc__slot-wrapper [class*="selected"],
[id^="amelia-v2-booking"] .am-advsc__slot-wrapper [aria-selected="true"] {
  background-color: var(--gold, #E1B778) !important;
  border-color: var(--gold, #E1B778) !important;
  color: var(--charcoal, #2C2A29) !important;
  font-weight: 700 !important;
}

/* Timezone row ("America/Toronto" — was an electric-blue Element pill):
   quiet navy text on transparent with a slate hairline. */
[id^="amelia-v2-booking"] .am-advsc__time-zone,
[id^="amelia-v2-booking"] .am-advsc__time-zone .el-select__wrapper,
[id^="amelia-v2-booking"] .am-advsc__time-zone .el-select__selected-item,
[id^="amelia-v2-booking"] .am-advsc__time-zone .el-select__placeholder {
  background-color: transparent !important;
  color: var(--navy, #2B3F58) !important;
  box-shadow: none !important;
}
[id^="amelia-v2-booking"] .am-advsc__time-zone .el-select__wrapper {
  border: 1px solid rgba(143, 158, 175, 0.45) !important;
  border-radius: var(--radius-md, 8px) !important;
}
[id^="amelia-v2-booking"] .am-advsc__time-zone .el-select__caret {
  color: var(--navy, #2B3F58) !important;
}
[id^="amelia-v2-booking"] .am-advsc__duration,
[id^="amelia-v2-booking"] .am-advsc__occupancy,
[id^="amelia-v2-booking"] .am-advsc__header {
  color: var(--navy, #2B3F58) !important;
}

/* ---- Element select dropdown — PORTALED TO <body> ----
   The timezone dropdown teleports out of the widget as
   body > .el-popper.el-select__popper.am-select-popper (verified live).
   .am-select-popper is Amelia's own marker class, so this stays scoped
   to Amelia even at body level. FRAGILE across Amelia updates: re-check
   the portal class after every update. */
.el-select__popper.am-select-popper {
  background-color: var(--cream, #F4F1E8) !important;
  border: 1px solid rgba(143, 158, 175, 0.45) !important;
  --el-color-primary: var(--navy, #2B3F58) !important; /* selected option text */
}
.el-select__popper.am-select-popper .el-select-dropdown__item {
  color: var(--charcoal, #2C2A29) !important;
}
.el-select__popper.am-select-popper .el-select-dropdown__item.is-hovering,
.el-select__popper.am-select-popper .el-select-dropdown__item:hover {
  background-color: var(--cream-2, #EAE5D8) !important;
}
.el-select__popper.am-select-popper .el-select-dropdown__item.is-selected {
  color: var(--navy, #2B3F58) !important;
  font-weight: 700 !important;
}

/* ---- Form inputs: cream-friendly, slate hairlines, navy focus ---- */
[id^="amelia-v2-booking"] input[type="text"],
[id^="amelia-v2-booking"] input[type="email"],
[id^="amelia-v2-booking"] input[type="tel"],
[id^="amelia-v2-booking"] textarea {
  background-color: #FFFFFF !important; /* inputs keep a white well for affordance */
  border: 1px solid rgba(143, 158, 175, 0.55) !important;
  border-radius: var(--radius-md, 8px) !important;
  font-family: var(--font-sans) !important;
  color: var(--charcoal, #2C2A29) !important;
}
[id^="amelia-v2-booking"] input:focus,
[id^="amelia-v2-booking"] textarea:focus {
  border-color: var(--navy, #2B3F58) !important;
  box-shadow: 0 0 0 3px rgba(43, 63, 88, 0.12) !important;
}

/* ---- Package list (visible ONLY in ?pkg= mode on /first-lesson/) ----
   Brand-quiet styling so pack buyers see a native-feeling chooser. */
[id^="amelia-v2-booking"] .am-fs__ps-item {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(143, 158, 175, 0.45) !important;
  border-radius: var(--radius-md, 8px) !important;
}
[id^="amelia-v2-booking"] .am-fs__ps-name {
  color: var(--navy, #2B3F58) !important;
  font-weight: 700 !important;
}
[id^="amelia-v2-booking"] .am-fs__ps-price,
[id^="amelia-v2-booking"] .am-fs__ps-price__wrapper {
  background-color: transparent !important;
  color: var(--charcoal, #2C2A29) !important;
  font-weight: 600 !important;
}
[id^="amelia-v2-booking"] .am-fs__ps-discount {
  background-color: rgba(225, 183, 120, 0.18) !important;
  color: #7a5b1e !important; /* dark gold-brown, AA on the pale tint */
  font-weight: 500 !important;
}

/* ---- Progress bar / steps: navy track ---- */
[id^="amelia-v2-booking"] .am-progress-bar {
  color: var(--navy, #2B3F58) !important;
}

/* ---- Hide Amelia branding ---- */
[id^="amelia-v2-booking"] .am-powered-by {
  display: none !important;
}

/* ---- V1 fallback selectors (keep) ---- */
#amelia-app-booking,
.amelia-app-booking {
  font-family: var(--font-sans) !important;
  color: var(--charcoal, #2C2A29) !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* NOTE: no selector in this file may ever target iframe elements —
   the Stripe payment iframe and its contents are strictly off-limits. */