/* =====================================================================
   Elite Cabz: the app look (Phase 3, docs/specs/phase-3-website-restyle.md)

   Loaded LAST, after style.css and calm.css; brass.css is switched off.
   calm.css builds every page from a small set of tokens (--c-paper,
   --c-surf, --c-ink, --c-acc ...) and two font variables. This file points
   those at the apps' own palette (packages/core/theme/palettes.ts), then
   restyles the shared components (buttons, cards, header, the fare widget)
   to match the apps and book.elitecabz.co.uk. Layout stays calm.css's.

   Specificity: calm.css sets tokens on :root, :root[data-ecz-theme] and a
   dark-mode media query. The repeated :root below outranks each of those
   without !important, so the display panel's Day/Night still works.

   If a colour here changes, change palettes.ts and booking/src/tokens.css
   too: scripts/test-web-bookings.mjs checks the three agree.
   ===================================================================== */

/* ---- black for everyone (Robin, 11 Oct: "black for everyone like the renders") ----
   The renders (docs/website-renders/2026-10-10-redesign-concept.html) are black.
   Light only when the visitor picks Light in the display panel (Aa button). */
:root:root:root {
  --app-bg: #000000;
  --app-card: #1C1C1E;
  --app-raised: #2C2C2E;
  --app-label: #FFFFFF;
  --app-label2: rgba(235, 235, 245, 0.6);
  --app-line: rgba(84, 84, 88, 0.65);
  --app-gold: #E8C468;
  --app-on-gold: #17130A;
  --app-tint: #E8C468;
  --app-gold-wash: rgba(232, 196, 104, 0.12);
  --app-danger: #FF453A;

  --c-paper: #000000;  --c-paper-rgb: 0, 0, 0;
  --c-surf:  #1C1C1E;  --c-surf2: #111113; --c-surf3: #2C2C2E;
  --c-line:  #38383A;  --c-line2: #48484A;
  --c-ink:   #FFFFFF;  --c-ink2: #E5E5EA;  --c-ink3: #98989F; --c-ph: #6C6C70;
  --c-acc:   #E8C468;  --c-acc-rgb: 232, 196, 104; --c-acc-l: #F0D58A; --c-acc-d: #C9A64A;
  --c-acc-soft: #2A2414; --c-on-acc: #17130A; --c-bad: #FF453A;

  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: var(--font-sans);
  --radius: 14px;
  color-scheme: dark;
}

/* ---- light: only when chosen in the display panel ------------------- */
:root:root:root[data-ecz-theme="day"] {
  --app-bg: #F2F2F7;
  --app-card: #FFFFFF;
  --app-raised: #E5E5EA;
  --app-label: #000000;
  --app-label2: rgba(60, 60, 67, 0.75);
  --app-line: rgba(60, 60, 67, 0.18);
  --app-tint: #8A6A0F;
  --app-gold-wash: #FBF3DC;
  --app-danger: #C4382A;

  --c-paper: #F2F2F7;  --c-paper-rgb: 242, 242, 247;
  --c-surf:  #FFFFFF;  --c-surf2: #E5E5EA; --c-surf3: #E5E5EA;
  --c-line:  #D1D1D6;  --c-line2: #AEAEB2;
  --c-ink:   #000000;  --c-ink2: #3A3A3C;  --c-ink3: #636366; --c-ph: #8E8E93;
  --c-acc:   #8A6A0F;  --c-acc-rgb: 138, 106, 15; --c-acc-l: #A07C14; --c-acc-d: #6F550C;
  --c-acc-soft: #FBF3DC; --c-on-acc: #FFFFFF; --c-bad: #C4382A;
  color-scheme: light;
}
/* High contrast (display panel): secondary text as strong as body text. */
:root:root:root:root[data-ecz-contrast="high"] { --c-ink2: var(--c-ink); --c-ink3: var(--c-ink); --c-line: var(--c-line2); --app-label2: var(--app-label); }
/* Easy-read font (display panel, Robin D2): the font the site used before. */
:root:root:root:root[data-ecz-font="easy"] { --font-sans: 'Atkinson Hyperlegible', system-ui, sans-serif; --font-serif: var(--font-sans); }

/* ---- type: the apps' system font, bold headings --------------------- */
html body { font-family: var(--font-sans); background: var(--c-paper); color: var(--c-ink); }
html h1, html h2, html h3, html .hero-title, html .section-title, html .v2-h1, html .logo {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
html h1, html .v2-h1, html .hero-title { letter-spacing: -0.03em; }
html h1 em, html h2 em, html .hero-title em, html .section-title em { font-style: normal; color: var(--c-acc) !important; }
html h4, html h5, html h6 { font-family: var(--font-sans) !important; font-weight: 600 !important; }
html [class*="ecz-"] .ecz-name, html [class*="ecz-"] .ecz-price, html .bi-row-title, html .bi-stats .big, html .bi-hero-calc .ecz-price {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
}

/* ---- buttons: gold fill, near-black text, like the apps ------------- */
html .btn-gold, html .nav-book, html .btn-primary, html .v2-btn-main, html .ec-cc-b,
html .wp-block-button__link, html .ecz-quote button[type="submit"], html .ecz-quote .ecz-go {
  background: var(--app-gold) !important;
  border-color: var(--app-gold) !important;
  color: var(--app-on-gold) !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
}
html .btn-gold:hover, html .nav-book:hover, html .btn-primary:hover, html .v2-btn-main:hover,
html .wp-block-button__link:hover { background: #F0D27E !important; border-color: #F0D27E !important; }
html .btn-dark, html .v2-btn:not(.v2-btn-main) {
  background: var(--c-surf3) !important;
  border-color: var(--c-surf3) !important;
  color: var(--c-ink) !important;
  border-radius: 14px !important;
}

/* ---- cards and surfaces: rounded, flat, grouped --------------------- */
html .v2-card, html .ecz-ft, html .ec-card, html .ecz-review, html .faq-item, html .bi-card {
  background: var(--c-surf) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

/* ---- header: translucent like the apps' bars ------------------------ */
html #header, html #header.scrolled {
  background: var(--c-paper) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--c-line) !important;
}
html .logo { letter-spacing: 0.14em !important; font-weight: 800 !important; color: var(--c-ink) !important; text-transform: uppercase; }
html .logo span, html .logo em { color: var(--app-gold) !important; font-style: normal; margin-left: 0.35em; }
/* Light page: the darker gold stays readable (4.5:1). */
:root:root:root[data-ecz-theme="day"] .logo span { color: var(--app-tint) !important; }

/* ---- links and focus ------------------------------------------------ */
html a { color: var(--c-acc); }
html :focus-visible { outline: 3px solid var(--app-gold) !important; outline-offset: 2px; }

/* ---- forms: the apps' filled inputs --------------------------------- */
html input[type="text"], html input[type="email"], html input[type="tel"], html input[type="date"],
html input[type="time"], html input[type="search"], html select, html textarea {
  border-radius: 12px !important;
}

/* ---- the preview bar (preview only; never shown once live) ---------- */
.ecz-look-bar {
  position: fixed; left: 12px; bottom: 16px; z-index: 99999; white-space: nowrap;
  display: flex; gap: 8px; align-items: center;
  padding: 5px 6px 5px 10px; border-radius: 999px; font-size: 12px !important;
  background: var(--app-gold); color: var(--app-on-gold);
  font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.ecz-look-bar a { color: var(--app-on-gold); background: rgba(0, 0, 0, 0.12); padding: 6px 10px; border-radius: 999px; text-decoration: none; }

/* ---- the booking panel on the homepage (Phase 3) -------------------- */
/* Space kept for it while it loads, so the page doesn't jump. */
/* The site header is fixed (81px): start the panel below it, as the old hero did. */
html[data-look="app"] #ecz-booking-home { display: block; min-height: 640px; padding-top: 96px; }
/* The booking panel follows the display panel (black, or light when Light is chosen; booking/src/embed.tsx),
   so the band around it uses the page colour and the whole page reads as one (Robin, 12 Oct). */
html[data-look="app"] #ecz-booking-home { background: var(--c-paper); }
/* The panel replaces the old hero, but only once it has actually loaded. */
html[data-booking-ready] .v2-hero { display: none !important; }

/* ---- "Fixed prices from {area}" on area pages (Phase 3) ------------- */
/* Hidden in the current look (the template marks it hidden); shown in the app look. */
html[data-look="app"] .ecz-ap[hidden] { display: block; }
.ecz-ap { max-width: 1100px; margin: 8px auto 28px; padding: 22px 20px 18px; background: var(--c-surf); border: 1px solid var(--c-line); border-radius: 22px; }
.ecz-ap-eyebrow { margin: 0 0 4px; color: var(--c-ink3); font-size: 13px; font-weight: 600; }
.ecz-ap-h { margin: 0 0 6px !important; font-size: clamp(26px, 4vw, 34px) !important; }
.ecz-ap-sub { margin: 0 0 14px; color: var(--c-ink3); font-size: 15px; }
.ecz-ap-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ecz-ap-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ecz-ap-table th, .ecz-ap-table td { padding: 12px 10px; border-bottom: 1px solid var(--c-line); text-align: right; white-space: nowrap; }
.ecz-ap-table thead th { color: var(--c-ink3); font-size: 13px; font-weight: 600; }
.ecz-ap-table th:first-child, .ecz-ap-table td:first-child { text-align: left; }
.ecz-ap-table tbody th { font-weight: 700; color: var(--c-ink); }
.ecz-ap-table tbody td { font-size: 17px; font-weight: 700; color: var(--c-ink); }
.ecz-ap-table tbody tr:last-child th, .ecz-ap-table tbody tr:last-child td { border-bottom: 0; }
.ecz-ap-book { display: inline-block; padding: 8px 14px; border-radius: 12px; background: var(--app-gold); color: var(--app-on-gold) !important; font-weight: 700; font-size: 14px; text-decoration: none; }
.ecz-ap-note { margin: 12px 0 0; color: var(--c-ink3); font-size: 13px; }
.ecz-ap-fail { padding: 14px; border-radius: 14px; background: var(--c-surf3); }
/* Phones: each destination becomes a small card: name and Book on top, the four prices below. */
@media (max-width: 600px) {
  .ecz-ap { margin: 8px 12px 24px; padding: 18px 14px 14px; }
  .ecz-ap-scroll { overflow: visible; }
  .ecz-ap-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ecz-ap-table, .ecz-ap-table tbody { display: block; }
  .ecz-ap-table tbody tr {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "name name name book";
    gap: 6px 8px; padding: 12px 0; border-bottom: 1px solid var(--c-line);
  }
  .ecz-ap-table tbody tr:last-child { border-bottom: 0; }
  .ecz-ap-table tbody th, .ecz-ap-table tbody td { border: 0; padding: 0; text-align: left; }
  .ecz-ap-table tbody th { grid-area: name; align-self: center; font-size: 17px; }
  .ecz-ap-table tbody td:last-child { grid-area: book; justify-self: end; }
  .ecz-ap-table tbody td[data-car] { font-size: 18px; }
  .ecz-ap-table tbody td[data-car]::before { content: attr(data-car); display: block; font-size: 12px; font-weight: 600; color: var(--c-ink3); }
}
/* The spaced wordmark plus three header buttons is wider than a small phone. */
@media (max-width: 420px) {
  html .logo { letter-spacing: 0.06em !important; font-size: 19px !important; }
  /* Keep the wordmark clear of the round phone button beside it (Cowork review, 12 Oct). */
  html #header .logo { margin-right: 10px !important; flex-shrink: 0; }
  html #header .container { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ---- the renders' menu (Phase 3): swap in the app look -------------- */
html[data-look="app"] .nav-links:not(.nav-links-app) { display: none !important; }
html[data-look="app"] .nav-links-app[hidden] { display: flex; }
html[data-look="app"] .mn-old { display: none !important; }
html[data-look="app"] .mn-app[hidden] { display: contents; }
/* On phones the desktop list is hidden by the theme; keep it that way. */
@media (max-width: 900px) { html[data-look="app"] .nav-links-app[hidden] { display: none; } }
html[data-look="app"] .mn-app .btn { justify-content: center; text-align: center; display: flex; align-items: center; }

/* ---- old-look / app-look swaps on the homepage (Phase 3, Cowork review 12 Oct) ---- */
html[data-look="app"] .ecz-old { display: none !important; }
html[data-look="app"] .ecz-app[hidden] { display: block; }

/* The "Prefer WhatsApp?" form (theme.js builds it with inline light colours). */
html[data-look="app"] #ecwa-block { background: var(--c-paper) !important; }
html[data-look="app"] #ecwa-block .ecwa-box { background: var(--c-surf) !important; border-color: var(--c-line) !important; box-shadow: none !important; }
html[data-look="app"] #ecwa-block .ecwa-h { color: var(--c-ink) !important; }
html[data-look="app"] #ecwa-block .ecwa-lead, html[data-look="app"] #ecwa-block .ecwa-alt { color: var(--c-ink3) !important; }
html[data-look="app"] #ecwa-block .ecwa-tel { color: var(--c-acc) !important; }

/* WhatsApp bubble: smaller on phones, and out of the way while the booking panel is on screen (theme.js). */
@media (max-width: 600px) {
  html[data-look="app"] .wa-float { width: 48px !important; height: 48px !important; right: 12px !important; bottom: 16px !important; }
}
html[data-look="app"] .wa-float.ecz-wa-away { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* ---- Cowork Task 8 fixes (12 Oct) ------------------------------------ */
/* Light: the quiet buttons were pale grey on a pale grey page and read as plain text. */
html[data-look="app"][data-ecz-theme="day"] .v2-btn-quiet,
html[data-look="app"][data-ecz-theme="day"] .btn-whatsapp,
html[data-look="app"][data-ecz-theme="day"] .btn-outline,
html[data-look="app"][data-ecz-theme="day"] .btn-secondary {
  background: #ffffff !important; border: 1.5px solid var(--c-line2) !important; color: var(--c-ink) !important;
}
/* The price table's visually hidden header row hung 45 px past a phone's edge (clipped,
   but measurable): keep it inside its card. */
html[data-look="app"] .ecz-ap { position: relative; overflow: hidden; }
@media (max-width: 600px) { html[data-look="app"] .ecz-ap-table thead { left: 0; top: 0; } }