/* ==========================================================================
   Feonix design system "fx" — SHARED OVERLAY THEME (non-render-blocking)
   --------------------------------------------------------------------------
   Split from css/fx-site.css in the Phase 1 finishing pass: these rules style
   surfaces that only appear after an interaction (booking modal, offers popup,
   basket drawer), so they are loaded without blocking first paint:
     <link rel="preload" as="style" onload="this.rel='stylesheet'"> + <noscript>.
   If an overlay is opened before this file has arrived it renders in its own
   legacy styling and still works; nothing here changes behaviour.
   Every rule is scoped to body.fx — see css/fx-site.css for the tokens.
   ========================================================================== */

/* ==========================================================================
   SHARED OVERLAYS ON fx PAGES (Phase 1 finishing pass)
   --------------------------------------------------------------------------
   The booking modal (booking.js + booking.css), the offers popup
   (static/offers-popup.js) and the LHR basket drawer (static/lhr-cart.js +
   lhr-cart.css) are shared site-wide. Each is appended to <body>, so
   `body.fx …` reaches them on fx pages and NOWHERE else. Their markup, copy,
   ids, API calls and state logic are untouched.

   Method, in order of preference:
     1. Redefine the custom properties each component already reads
        (--dark, --mid, --rg-mid, --ink, --fg-1, --ember …) on its root.
     2. Override component classes at higher specificity.
     3. `!important` ONLY against inline style="" attributes written by the
        shared scripts (listed individually below) — nothing else can win.
   ========================================================================== */

/* ── 1 · Booking modal ─────────────────────────────────────────────────── */
body.fx .bmodal-overlay {
  --cream: #FFFFFF; --white: #FFFFFF; --light: #F4F1F7; --border: #E4DEEA;
  --dark: #2E1A47; --mid: #645677; --muted: #645677;
  --rg-mid: #2E1A47; --rg-dark: #2E1A47; --rg-light: #2E1A47;
  background: rgba(46, 26, 71, .55); backdrop-filter: none; -webkit-backdrop-filter: none;
  font-family: var(--fx-font-body); color: var(--fx-purple);
}
body.fx .bmodal-container { background: var(--fx-white); border-radius: var(--fx-r-card); max-width: 580px;
  box-shadow: 0 24px 60px -24px rgba(46, 26, 71, .45); }
body.fx .bmodal-header { position: relative; gap: 12px; min-height: 64px; padding: 10px 12px 10px 24px;
  background: var(--fx-white); border-bottom: 1px solid var(--fx-border); }
/* The modal's <img> points at the rose-gold mark; swap it visually for the
   brand-purple mark without touching booking.js. */
body.fx .bmodal-logo { display: none; }
body.fx .bmodal-header::before { content: ""; flex: none; width: 24px; height: 28px;
  background: url("/brand_assets/feonix-mark-purple.svg") center / contain no-repeat; }
body.fx .bmodal-title { flex: 1; min-width: 0; font-family: var(--fx-font-body); font-style: normal; font-weight: 600;
  font-size: 1rem; letter-spacing: 0; line-height: 1.35; color: var(--fx-purple); }
body.fx .bmodal-title span[style] { color: var(--fx-text-muted) !important; font-size: .875rem !important;
  font-weight: 500; letter-spacing: 0 !important; white-space: nowrap; }
body.fx .bmodal-close { width: 44px; height: 44px; flex: none; border-radius: 12px; color: var(--fx-purple); }
body.fx .bmodal-close:hover { background: var(--fx-ground); }
body.fx .bmodal-close:focus-visible { outline: 2px solid var(--fx-purple); outline-offset: 2px; }
body.fx .bmodal-body { padding: 28px 32px 32px; }

/* Step heading and labels: sentence case, Manrope — no tracked capitals */
body.fx .bstep-label { font-family: var(--fx-font-body); font-size: .875rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--fx-text-muted); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--fx-hairline); }
body.fx .blabel { font-family: var(--fx-font-body); font-size: .875rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--fx-purple); }
body.fx .blabel span[style] { color: var(--fx-text-muted) !important; }          /* "(optional)" */
body.fx .bfield { gap: 8px; margin-bottom: 20px; }

/* Inputs, selects, textarea */
body.fx .binput, body.fx .bconsult-textarea { font-family: var(--fx-font-body); font-size: 1rem; font-weight: 400;
  color: var(--fx-purple); background: var(--fx-white); border: 1px solid var(--fx-input-border); border-radius: var(--fx-r-control); }
body.fx .binput { min-height: 48px; padding: 12px 14px; }
body.fx .bconsult-textarea { padding: 12px 14px 28px; }
body.fx .binput::placeholder, body.fx .bconsult-textarea::placeholder { color: var(--fx-text-subtle); opacity: 1; }
body.fx .binput:focus, body.fx .bconsult-textarea:focus { border-color: var(--fx-purple); outline: 2px solid var(--fx-purple); outline-offset: 1px; }
body.fx .binput:disabled { background: var(--fx-ground); color: var(--fx-purple); opacity: 1; }
body.fx .bconsult-counter { font-family: var(--fx-font-body); font-size: .8125rem; color: var(--fx-text-muted); opacity: 1;
  background: transparent; bottom: 8px; right: 12px; }

/* Calendar */
body.fx .bcal-month-label { font-family: var(--fx-font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; color: var(--fx-purple); }
body.fx .bcal-arrow { border-radius: 12px; border-color: var(--fx-field-border); color: var(--fx-purple); }
body.fx .bcal-arrow:hover { border-color: var(--fx-purple); color: var(--fx-purple); background: var(--fx-ground); }
body.fx .bcal-arrow:focus-visible, body.fx .bcal-day:focus-visible, body.fx .btime-btn:focus-visible,
body.fx .bbtn:focus-visible { outline: 2px solid var(--fx-purple); outline-offset: 2px; }
body.fx .bcal-weekdays span { font-family: var(--fx-font-body); font-size: .8125rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--fx-text-muted); }
body.fx .bcal-grid { gap: 6px; }
body.fx .bcal-day { font-family: var(--fx-font-body); font-weight: 500; font-size: 1rem; border-radius: 12px;
  color: var(--fx-purple); background: var(--fx-white); border: 1px solid var(--fx-border); }
body.fx .bcal-day:hover:not(.bcal-disabled):not(.bcal-empty) { border-color: var(--fx-purple); color: var(--fx-purple); background: var(--fx-ground); }
body.fx .bcal-day.bcal-selected { background: var(--fx-purple); border-color: var(--fx-purple); color: var(--fx-white); }
/* Unavailable days: muted text at 6.7:1 (not a faint tint), struck through and
   without the box that marks a bookable day — so the difference is not colour alone. */
body.fx .bcal-day.bcal-disabled { color: var(--fx-text-muted); font-weight: 400; background: transparent; border-color: transparent;
  text-decoration: line-through; text-decoration-color: rgba(46, 26, 71, .45); }
body.fx .bcal-day.bcal-empty { border-color: transparent; }
/* "Loading calendar…" / "Checking availability…" / "No availability…" are
   inline-styled by booking.js at 11–12px in #9A94A2 (2.6:1) — lift them. */
body.fx #bcal-grid > div[style], body.fx #btime-grid > p[style] { font-family: var(--fx-font-body) !important;
  font-size: .9375rem !important; color: var(--fx-text-muted) !important; padding: 10px 0 !important; }
body.fx #btime-grid > div[style] { font-family: var(--fx-font-body) !important; font-size: .9375rem !important;
  color: var(--fx-error) !important; background: var(--fx-error-wash); border-radius: 12px; padding: 12px 14px !important; }
body.fx #btime-grid > div[style] a { color: var(--fx-error) !important; font-weight: 600; }

/* Time slots */
body.fx .btime-grid { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
body.fx .btime-btn { font-family: var(--fx-font-body); font-weight: 500; font-size: 1rem; border-radius: 12px;
  color: var(--fx-purple); border-color: var(--fx-field-border); }
body.fx .btime-btn:hover { border-color: var(--fx-purple); color: var(--fx-purple); background: var(--fx-ground); }
body.fx .btime-btn.selected { background: var(--fx-purple); border-color: var(--fx-purple); color: var(--fx-white); }
body.fx .btime-btn.unavailable { color: var(--fx-text-muted); border-color: transparent; background: var(--fx-ground);
  text-decoration: line-through; text-decoration-color: rgba(46, 26, 71, .45); }

/* Buttons */
body.fx .bbtn { min-height: 52px; padding: 14px 24px; border-radius: var(--fx-r-button); background: var(--fx-purple); color: var(--fx-white);
  font-family: var(--fx-font-body); font-size: 1rem; font-weight: 600; letter-spacing: .005em; text-transform: none; margin-top: 16px;
  transition: background-color var(--fx-fast) var(--fx-ease); }
body.fx .bbtn:hover { background: var(--fx-purple-raised); }
body.fx .bbtn:active { background: var(--fx-purple-pressed); }
body.fx .bbtn:disabled { opacity: 1; background: var(--fx-ground-muted); color: var(--fx-text-subtle); cursor: not-allowed; }
body.fx .bbtn-ghost { background: var(--fx-white); color: var(--fx-purple); border: 1px solid var(--fx-field-border); }
body.fx .bbtn-ghost:hover { background: var(--fx-ground); color: var(--fx-purple); border-color: var(--fx-purple); }
body.fx .bbtn-row { gap: 12px; margin-top: 16px; }

/* Validation / errors — booking.js shows and hides these; colour + text, never colour alone */
body.fx .berror { font-family: var(--fx-font-body); font-size: .9375rem; line-height: 1.5; font-weight: 500;
  color: var(--fx-error); background: var(--fx-error-wash); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }

/* Consultation terms panel (every £50 consultation opens here) */
body.fx .bconsult-info-title { font-family: var(--fx-font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; color: var(--fx-purple); }
body.fx .bconsult-info-intro { font-family: var(--fx-font-body); font-size: 1rem; color: var(--fx-text-muted); }
body.fx .bconsult-info-list { gap: 12px; }
body.fx .bconsult-info-list li { font-family: var(--fx-font-body); font-size: .9375rem; font-weight: 400; color: var(--fx-purple);
  line-height: 1.6; padding-left: 24px; }
body.fx .bconsult-info-list li::before { top: 8px; width: 8px; height: 8px; border: 0; background: var(--fx-purple); }
body.fx #bconsult-fee-terms { background: var(--fx-ground); border-radius: 12px; padding: 12px 14px 12px 34px; }
body.fx #bconsult-fee-terms::before { left: 14px; top: 20px; }
body.fx .bmodal-overlay a[style] { color: var(--fx-purple) !important; font-weight: 600; text-underline-offset: 3px; }
/* Required consent row — inline-styled in booking.js */
body.fx .bconsent { font-family: var(--fx-font-body) !important; font-size: .9375rem !important; color: var(--fx-purple) !important;
  align-items: center !important; min-height: 44px; margin: 8px 0 4px !important; }
body.fx #bcancel-consent { accent-color: var(--fx-purple) !important; width: 20px !important; height: 20px !important; margin-top: 0 !important; }
body.fx #bcancel-policy { font-family: var(--fx-font-body) !important; font-size: .875rem !important; letter-spacing: 0 !important;
  color: var(--fx-text-muted) !important; }

/* Success view (kept for completeness — the live flow hands off to Stripe) */
body.fx .bsuccess svg circle, body.fx .bsuccess svg path { stroke: var(--fx-purple); }
body.fx .bsuccess-title { font-family: var(--fx-font-display); font-weight: 600; font-size: 1.625rem; letter-spacing: -.01em; color: var(--fx-purple); }
body.fx .bsuccess-text { font-family: var(--fx-font-body); font-size: 1rem; color: var(--fx-text-muted); }

@media (max-width: 768px) {
  /* bottom sheet: rounded top corners, keeps booking.css's full-width layout */
  body.fx .bmodal-container { border-radius: var(--fx-r-card) var(--fx-r-card) 0 0; max-height: calc(100% - 24px); }
  body.fx .bmodal-body { padding: 22px 20px 28px; }
  body.fx .bmodal-header { padding-left: 20px; }
}

/* ── 2 · Offers popup ──────────────────────────────────────────────────── */
body.fx .feonix-offers-popup {
  --ink: #FFFFFF; --fg-1: #2E1A47; --fg-2: #645677; --stroke-dark: #E4DEEA;
  --ember: #2E1A47; --ember-deep: #3F2C56; --ember-soft: #2E1A47;
  --font-sans: var(--fx-font-body); --font-display: var(--fx-font-display);
  background: rgba(46, 26, 71, .55); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.fx .feonix-offers-popup__card { border-radius: var(--fx-r-card); border-color: var(--fx-border);
  box-shadow: 0 24px 60px -24px rgba(46, 26, 71, .45); }
body.fx .feonix-op-panel { padding: 40px 32px 32px; }
body.fx .feonix-op-panel--ai { background: var(--fx-ground); border-left-color: var(--fx-border); }
body.fx .feonix-op-eyebrow { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fx-text-muted); }
body.fx .feonix-op-title { font-weight: 600; font-size: 1.625rem; line-height: 1.15; letter-spacing: -.015em; color: var(--fx-purple); }
body.fx .feonix-op-title em { font-style: normal; color: inherit; }
body.fx .feonix-op-body { font-size: 1rem; line-height: 1.6; color: var(--fx-text-muted); }
body.fx .feonix-op-cta { min-height: 48px; padding: 12px 22px; border-radius: var(--fx-r-button); font-size: 1rem; font-weight: 600;
  letter-spacing: .005em; text-transform: none; color: var(--fx-white); }
body.fx .feonix-op-panel--ai .feonix-op-cta { background: var(--fx-white); color: var(--fx-purple); border-color: var(--fx-field-border); }
body.fx .feonix-op-panel--ai .feonix-op-cta:hover { border-color: var(--fx-purple); background: var(--fx-white); }
body.fx .feonix-op-cta:focus-visible, body.fx .feonix-offers-popup__close:focus-visible { outline: 2px solid var(--fx-purple); outline-offset: 3px; }
body.fx .feonix-offers-popup__close { width: 44px; height: 44px; border-radius: 12px; background: var(--fx-white);
  border-color: var(--fx-border); color: var(--fx-purple); font-size: 24px; }
body.fx .feonix-offers-popup__close:hover { color: var(--fx-purple); border-color: var(--fx-purple); background: var(--fx-ground); }
@media (max-width: 640px) {
  body.fx .feonix-op-panel { padding: 32px 22px 24px; }
  body.fx .feonix-op-panel--ai { border-top-color: var(--fx-border); }
  body.fx .feonix-op-title { font-size: 1.4rem; }
}

/* ── 3 · LHR basket drawer (header basket icon) ────────────────────────── */
body.fx .lhrc-drawer {
  --white: #FFFFFF; --cream: #F4F1F7; --border: #E4DEEA; --dark: #2E1A47; --mid: #645677; --muted: #645677;
  --rg-mid: #2E1A47; --rg-dark: #2E1A47; --font-sans: var(--fx-font-body); --font-display: var(--fx-font-display);
  font-family: var(--fx-font-body);
}
body.fx .lhrc-scrim { background: rgba(46, 26, 71, .55); }
body.fx .lhrc-panel { box-shadow: -18px 0 44px -18px rgba(46, 26, 71, .35); }
body.fx .lhrc-head { padding: 16px 12px 16px 24px; }
body.fx .lhrc-title { font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; }
body.fx .lhrc-close { width: 44px; height: 44px; border-radius: 12px; color: var(--fx-purple); padding: 0; }
body.fx .lhrc-close:hover { background: var(--fx-ground); }
body.fx .lhrc-close:focus-visible { outline: 2px solid var(--fx-purple); outline-offset: 2px; }
body.fx .lhrc-empty { font-size: 1rem; padding: 32px 24px; }
body.fx .lhrc-line { padding: 18px 24px; }
body.fx .lhrc-line-name { font-size: 1rem; font-weight: 600; }
body.fx .lhrc-line-meta { font-size: .875rem; }
body.fx .lhrc-line-price, body.fx .lhrc-total .v { font-weight: 500; color: var(--fx-purple); }
body.fx .lhrc-remove, body.fx .lhrc-reset { font-size: .875rem; letter-spacing: 0; text-transform: none; min-height: 44px; }
body.fx .lhrc-reset { color: var(--fx-error); border-bottom-color: var(--fx-error); }
body.fx .lhrc-total .k { font-size: .875rem; letter-spacing: 0; text-transform: none; }
body.fx .lhrc-checkout { min-height: 52px; border-radius: var(--fx-r-button); background: var(--fx-purple); font-size: 1rem;
  letter-spacing: .005em; text-transform: none; }
body.fx .lhrc-checkout:hover { opacity: 1; background: var(--fx-purple-raised); }
body.fx .lhrc-checkout:disabled { background: var(--fx-ground-muted); color: var(--fx-text-subtle); }
body.fx .lhrc-note { font-size: .875rem; font-style: normal; line-height: 1.6; }
body.fx .lhrc-err { color: var(--fx-error); background: var(--fx-error-wash); border-left: 0; border-radius: 12px; font-size: .9375rem; line-height: 1.6; }
body.fx .lhrc-age-label { font-size: .875rem; letter-spacing: 0; text-transform: none; color: var(--fx-purple); }
body.fx .lhrc-age-dob { min-height: 48px; border-radius: var(--fx-r-control); border-color: var(--fx-input-border); font-size: 1rem; color: var(--fx-purple); }
body.fx .lhrc-age-confirm { font-size: .9375rem; color: var(--fx-purple); }
body.fx .lhrc-age-confirm input { accent-color: var(--fx-purple); width: 20px; height: 20px; }
body.fx .lhrc-age-note { border-left: 0; border-radius: 12px; background: var(--fx-ground); color: var(--fx-purple); font-size: .9375rem; }

/* Dialog containers receive focus programmatically (tabindex="-1") so screen
   readers start inside them; that is not a keyboard target, so no ring. */
body.fx .bmodal-container:focus, body.fx .lhr-offer-modal:focus { outline: none; }

/* Floating WhatsApp / booking buttons never sit over an open overlay. The
   shared head script hides them on a class change; this makes it unconditional
   on fx pages (CSS only — the script is untouched). */
body.fx:has(#bmodal-overlay.open, #feonix-offers-popup, .lhrc-drawer.open, .lhr-offer-overlay.open) .feonix-fab {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
body.fx .lhrc-close { font-size: 28px; line-height: 1; }