/* =====================================================================
   LPS Booking System — THEME A (dark / green) override layer
   ---------------------------------------------------------------------
   A faithful dark "Theme A" look for the CUSTOMER-facing pages, taken
   from the website theme-a mockups (black ground, Spotify-green accent,
   lilac→pink→peach headline gradient, dark cards).

   HOW IT WORKS
     * theme-e.css ships the light default and is token-driven (~240 var()
       uses). This file is loaded AFTER it and only takes effect under
       `html[data-site-theme="a"]` (set by brand.js from the admin toggle),
       so Theme E remains the default and the switch is instant + revertible.
     * Most of the page flips just by REDEFINING the Theme E tokens to
       Theme A values (Part 1). The rest is targeted overrides (Part 2)
       for elements Theme E paints with --bg-deep as an ACTION colour —
       in a light theme near-black served as both "dark surface" AND
       "primary action"; in a dark theme those split, so actions become
       green while surfaces stay dark.
     * The ADMIN back-office never loads this file and keeps its Mist skin.

   Source tokens (website/theme-a):
     --bg #000 · surface #0a0a0a/#111 · border #1f1f1f · text #FAF9F6
     green #1ED760 · cta gradient #4DB273→#0A4E0F · pastel B8C0FF→FFE5E5→FFB7AB
   ===================================================================== */

/* ---- Part 1: redefine the Theme E tokens to Theme A values ---------- */
html[data-site-theme="a"]{
  /* Black surfaces (NOT grey). Depth comes from subtle hairline borders, not
     from lightening the card backgrounds. */
  --bg:#000000;              /* page */
  --bg-soft:#0a0a0a;         /* large section panels */
  --bg-card:#0c0c0d;         /* cards — still essentially black */
  --bg-deep-cream:#050505;
  --bg-deep:#121214;         /* image wells / dark surfaces */
  --bg-deep-soft:#191919;

  --text:#FAF9F6;
  --text-muted:rgba(250,249,246,.70);
  --text-dim:rgba(250,249,246,.52);
  --on-dark:#FAF9F6;
  --on-dark-muted:rgba(250,249,246,.60);

  --border:#272727;          /* subtle but visible hairline for separation */
  --border-soft:#1c1c1c;
  --border-dark:rgba(255,255,255,.14);

  --accent-amber:#1ED760;     /* green replaces the warm accent */
  --accent-amber-deep:#16B34D;

  /* NB: radius / sizing / type scale are NOT redefined here — a theme is a pure
     skin (DESIGN_PRINCIPLES #14): colour + font tokens only, so the layout is
     byte-identical to Theme E and you can flick between themes safely. */
  --a-green:#1ED760;
  --a-cta:linear-gradient(94.77deg,#4DB273 2.38%,#0A4E0F 93.35%);
  --a-pastel:linear-gradient(135deg,#B8C0FF 0%,#FFE5E5 50%,#FFB7AB 100%);

  background:#000;
  color-scheme:dark;
}

/* ---- Part 2: action elements — green instead of near-black --------- */

/* Primary buttons → Theme A green CTA gradient (booking nav + auth + modals) */
html[data-site-theme="a"] .btn,
html[data-site-theme="a"] .auth-primary-btn,
html[data-site-theme="a"] .info-cta-primary{ background:var(--a-cta); color:#fff; border:0; }
html[data-site-theme="a"] .btn:hover,
html[data-site-theme="a"] .auth-primary-btn:hover,
html[data-site-theme="a"] .info-cta-primary:hover{ background:var(--a-cta); filter:brightness(1.08); }

/* Progress bar fill (green gradient, per Theme A) + step slider thumb */
html[data-site-theme="a"] .progress-fill{ background:var(--a-cta); }
html[data-site-theme="a"] .duration-slider::-webkit-slider-thumb{ background:var(--a-green); border-color:#000; }
html[data-site-theme="a"] .duration-slider::-moz-range-thumb{ background:var(--a-green); border-color:#000; }

/* Format-choice tick + billing switch */
html[data-site-theme="a"] .choice.selected{ border-color:var(--a-green); background:linear-gradient(180deg,rgba(30,215,96,.06) 0%,var(--bg-card) 100%); box-shadow:0 0 0 1px var(--a-green) inset; }
html[data-site-theme="a"] .choice.selected .choice-check{ background:var(--a-green); border-color:var(--a-green); color:#000; }
html[data-site-theme="a"] .choice-icon{ background:rgba(30,215,96,.10); border:1px solid rgba(30,215,96,.30); color:var(--a-green); }
html[data-site-theme="a"] .billing-switch.monthly .billing-switch-track{ background:var(--a-green); }

/* Group toggle (Podcast / YouTube / Social) — in dark mode the original opaque
   soft-grey fill read as an unwanted dark rectangle on the page's dark ground. But
   no container at all leaves the buttons floating unanchored on the website's band.
   So: a SUBTLE translucent "frosted" container — a faint light fill + hairline edge
   that gently lifts the toggle off whatever dark band it sits on (black or green)
   without being a heavy box. The active pill (--text, near-white) and muted inactive
   labels stay clearly legible against it. */
html[data-site-theme="a"] .fmt-toggle{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); }

/* Calendar + time slots */
html[data-site-theme="a"] .cal-nav button:hover{ background:var(--a-green); color:#000; border-color:var(--a-green); }
html[data-site-theme="a"] .cal-day.selected{ background:var(--a-green) !important; color:#000 !important; border-color:var(--a-green) !important; }
html[data-site-theme="a"] .slot.selected{ background:var(--a-green); color:#000; border-color:var(--a-green); }

/* Setup picker actions */
html[data-site-theme="a"] .setup-pick-action:hover,
html[data-site-theme="a"] .setup-pick.selected .setup-pick-action,
html[data-site-theme="a"] .setup-pick-action.check:hover,
html[data-site-theme="a"] .setup-modal-pick{ background:var(--a-green); color:#000; border-color:var(--a-green); }
/* "See availability" stays a MUTED secondary button (not green) — it's a fallback for a
   setup that's full at the chosen time, not a primary action. */
html[data-site-theme="a"] .setup-pick-action.see-avail{ background:transparent; color:var(--text-muted); }
html[data-site-theme="a"] .setup-pick-action.see-avail:hover{ background:rgba(255,255,255,.06); color:var(--text); }

/* ---- Tiers (service cards) — Theme A treatment --------------------- */
html[data-site-theme="a"] .tier{ background:var(--bg-card); border:1px solid var(--border); }
html[data-site-theme="a"] .tier:hover{ border-color:rgba(255,255,255,.18); }
/* Featured = dark look + POPULAR badge only; the green now means SELECTED (the
   Popular card is auto-selected, so it gets the green via .selected, not here). */
html[data-site-theme="a"] .tier.featured{ background:#0c0f0c; border-color:var(--border); color:var(--text); box-shadow:0 16px 44px rgba(0,0,0,.30); }
html[data-site-theme="a"] .tier.selected{ border-color:var(--a-green); box-shadow:0 0 0 1px var(--a-green) inset; }

/* Calendar: make BOOKABLE days clearly stand out on the dark theme — the default
   #0c0c0d chip was almost invisible against the black page. Bookable = a lighter
   tile with a visible border; booked-out (.full, dashed) + closed/past stay faint. */
html[data-site-theme="a"] .cal-day:not(.unavailable):not(.muted){ background:#17171c; border-color:#3a3a42; }
html[data-site-theme="a"] .cal-day:not(.unavailable):hover:not(:disabled){ background:#212129; border-color:var(--text); }

/* Tier CTA: outline by default, green when selected */
html[data-site-theme="a"] .tier-cta{ border-color:rgba(255,255,255,.45); color:var(--text); }
html[data-site-theme="a"] .tier-cta:hover{ background:var(--text); color:#000; border-color:var(--text); }
html[data-site-theme="a"] .tier.featured .tier-cta{ background:var(--a-cta); color:#fff; border:0; }
html[data-site-theme="a"] .tier.featured .tier-cta:hover{ filter:brightness(1.08); background:var(--a-cta); }
html[data-site-theme="a"] .tier.selected .tier-cta{ background:var(--a-green); color:#000; border-color:var(--a-green); }
html[data-site-theme="a"] .tier.featured.selected .tier-cta{ background:var(--a-green); color:#000; }

/* "Save 10%" badge + popular pill (popular pink already matches Theme A) */
html[data-site-theme="a"] .tier-save-badge,
html[data-site-theme="a"] .tier.featured .tier-save-badge{ background:rgba(30,215,96,.14); color:var(--a-green); border-color:rgba(30,215,96,.32); }

/* ---- Headline flourish: the lilac→pink→peach gradient on the accent word */
html[data-site-theme="a"] .step-title .accent,
html[data-site-theme="a"] .hero-e h1 em,
html[data-site-theme="a"] .portal-h1 .accent{
  background:var(--a-pastel); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; font-style:normal;
}

/* "From" / price labels in green (per Theme A) */
html[data-site-theme="a"] .tier-from{ color:var(--a-green); }
html[data-site-theme="a"] .tier.featured .tier-from{ color:var(--a-green); }

/* ---- Inputs / fields on dark -------------------------------------- */
html[data-site-theme="a"] input,
html[data-site-theme="a"] select,
html[data-site-theme="a"] textarea{
  background:#0a0a0a; color:var(--text); border-color:var(--border);
}
html[data-site-theme="a"] input::placeholder,
html[data-site-theme="a"] textarea::placeholder{ color:rgba(250,249,246,.35); }

/* ---- Auth messages — readable on dark ----------------------------- */
html[data-site-theme="a"] .auth-msg.err{ background:rgba(226,75,74,.14); color:#ff9f9d; }
html[data-site-theme="a"] .auth-msg.ok{ background:rgba(30,215,96,.12); color:#7ff0a8; }

/* ---- Part 3: reference-feedback refinements (20 June 2026) --------- */

/* "SAVE 10%" badge on the billing toggle → green, per the real Theme A */
html[data-site-theme="a"] .billing-switch-discount{ color:var(--a-green); background:rgba(30,215,96,.12); border-color:rgba(30,215,96,.30); }

/* Duration / time section — green accents + a clearly-visible slider */
html[data-site-theme="a"] .slider-popular-label{ color:var(--a-green); background:rgba(30,215,96,.10); border-color:rgba(30,215,96,.35); }
html[data-site-theme="a"] .duration-slider{ background:rgba(30,215,96,.18); }
html[data-site-theme="a"] .duration-slider::-webkit-slider-thumb{ background:var(--a-cta); }
html[data-site-theme="a"] .duration-slider::-moz-range-thumb{ background:var(--a-green); }
html[data-site-theme="a"] .duration-mark.popular{ color:var(--a-green); }
html[data-site-theme="a"] .duration-mark.popular::before{ background:var(--a-green); opacity:1; }
html[data-site-theme="a"] .duration-info-btn{ color:var(--a-green); }
html[data-site-theme="a"] .duration-info-btn:hover{ color:#3FE17C; }

/* The featured service title keeps the lilac→pink→peach gradient highlight — a
   COLOUR treatment only; its size/weight/case inherit Theme E (principle #14). */
html[data-site-theme="a"] .tier.featured .tier-name{
  background:var(--a-pastel); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Inclusion ticks → green (the text stays white). */
html[data-site-theme="a"] .tier-features li.included .feature-icon{ color:var(--a-green); }

/* "What's this?" add-on info button — was white-on-white; dark glass + light text */
html[data-site-theme="a"] .addon-info-btn{ background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.20); color:var(--text); }
html[data-site-theme="a"] .addon-info-btn:hover{ background:rgba(0,0,0,.80); }

/* Add-on "popular" pill → green to match the accent language */
/* Popular add-on badge matches the service-card "Popular" badge (cream, set in the base). */
/* A selected add-on's "Add" button takes the green accent (matches other primary actions). */
html[data-site-theme="a"] .addon.selected .addon-add-btn{ background:var(--a-green); color:#000; border-color:var(--a-green); }
html[data-site-theme="a"] .addon.selected .addon-add-btn:hover{ background:var(--a-green); color:#000; filter:brightness(1.06); }

/* Setups page: green selected action + green availability note accents */
html[data-site-theme="a"] .setup-availability-note strong{ color:var(--a-green); }
html[data-site-theme="a"] .setup-pick.selected{ border-color:var(--a-green); box-shadow:0 0 0 1px var(--a-green) inset; }

/* ---- Site header / surfaces tidy ---------------------------------- */
html[data-site-theme="a"] .site-header{ background:color-mix(in srgb, #000 80%, transparent); border-bottom:1px solid var(--border); }
/* Default LPS logo is dark; flip it white on the black ground. (A studio
   that uploads its own on-dark logo via the brand kit would supersede this.) */
html[data-site-theme="a"] .nav-logo img{ filter:brightness(0) invert(1); }

/* ---- Part 4: customer portal (portal.html) ------------------------- */
/* theme-e paints the portal's primary buttons + header CTA with --bg-deep,
   which in a light theme doubles as BOTH "dark surface" and "primary action".
   On the dark Theme A those split: actions become the green CTA, like .btn. */
html[data-site-theme="a"] .portal-btn-primary,
html[data-site-theme="a"] .nav-cta{ background:var(--a-cta); color:#fff; }
html[data-site-theme="a"] .portal-btn-primary:hover,
html[data-site-theme="a"] .nav-cta:hover{ background:var(--a-cta); filter:brightness(1.08); }

/* Active subnav tab + "Upcoming" status pill use --bg-deep too — on black
   that reads as dark-on-dark, so make them green to stand out. */
html[data-site-theme="a"] .portal-nav-item.active{ background:var(--a-green); color:#000; }
html[data-site-theme="a"] .portal-status-pill.upcoming,
html[data-site-theme="a"] .sess-badge.is-upcoming{ background:var(--a-green); color:#000; border-color:var(--a-green); }

/* Ghost-button hover + account-field focus → green accent on dark. */
html[data-site-theme="a"] .portal-btn-ghost:hover{ background:var(--a-green); color:#000; border-color:var(--a-green); }
html[data-site-theme="a"] .portal-field-input:focus{ border-color:var(--a-green); background:#0a0a0a; }