/* ==========================================================================
   Alshaheed Adventures — brand foundation
   Source of truth: ALSHAHEED-STRICT-BRAND-GUIDELINES.md (binding) +
   docs/design/v5-prototype-target.md (pixel spec, quotes the prototype CSS).
   Flat colour only: the six brand colours + white/paper. Effects are banned.
   The ONE allowed shadow is the neutral directional navy elevation below.
   Muted text = navy at reduced opacity — no neutral tones off the palette.
   ========================================================================== */

:root {
  /* legacy production token names (kept — existing views reference these) */
  --ink: #150047;      /* deep navy — base / text */
  --karting: #F4580E;  /* orange */
  --ice: #A3D5F6;      /* ice blue */
  --snow: #35C8B5;     /* teal */
  --sky: #FFC83D;      /* yellow */
  --outdoor: #70D100;  /* green */
  --paper: #FAFAFA;
  --shadow: 0 8px 24px rgba(21,0,71,.12);

  /* prototype token aliases (v5 names — used by the new header/footer/type) */
  --c-ink: #150047;              /* brand navy — primary ink, dark backgrounds */
  --c-paper: #FAFAFA;            /* off-white paper */
  --c-mute: rgba(21,0,71,.5);    /* muted ink text (50%) */
  --c-line: #150047;             /* strong hairline (navy) */
  --c-line-l: rgba(21,0,71,.1);  /* light hairline (10% ink) */
  --c-karting: #F4580E;
  --c-ice:     #A3D5F6;
  --c-snow:    #35C8B5;
  --c-sky:     #FFC83D;
  --c-outdoor: #70D100;
  --c-pink:    #F4580E;          /* accent alias == karting orange */

  --r-md: 12px;
  --r-lg: 22px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- reset + base ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

::selection { background: var(--ink); color: #fff; }

.wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding-block: 48px; }

.muted { color: rgba(21,0,71,.6); }

/* screen-reader-only: copy that must surface for a11y/SEO but not the layout
   (e.g. the world description + explicit "From N KD", which the v5 card design
   folds into the art/meta rather than showing as prose). */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   TYPE SCALE — ported from the v5 prototype (docs/design/v5-prototype-target.md
   §2). Manrope for Latin (300–900), IBM Plex Sans Arabic for RTL (swap below).
   Each role carries the prototype's exact size / weight / line-height /
   tracking / transform. The one-accent-word treatment is `.ac`.
   ========================================================================== */

/* Hero H1 — clamp(54,8.5vw,130) / 900 / lh .9 / -0.045em, white over the KV */
.t-hero, .hero-h1 {
  font-size: clamp(54px, 8.5vw, 130px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.045em;
}

/* Section H2 — "Pick your adventure." clamp(44,6vw,88) / 900 / lh .95 / -0.04em */
.t-h2, .headline {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--ink);
}

/* Section eyebrow — "01 — Adventures" 11px / 700 / 3px / uppercase, muted */
.t-eyebrow, .sec-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-mute);
}

/* Section intro / lede — 15px / lh 1.55 / muted, max 340px */
.t-intro, .sec-intro {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-mute);
  max-width: 340px;
}

/* Body / lede on light pages — clamp(16,1.6vw,19) / 600 / lh 1.55 / muted */
.t-lede {
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-mute);
}

/* Card title / meta — 13px / 600 (bolded value 800) */
.t-cardmeta {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-ink);
}
.t-cardmeta b { font-weight: 800; }

/* Form label / eyebrow — 10px / 800 / .14em / uppercase / muted */
.t-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-mute);
}

/* Big price — 52px / 900 / lh 1 / -0.04em, with a 16px muted unit */
.t-price {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}
.t-price .unit { font-size: 16px; font-weight: 800; color: var(--c-mute); }

/* Cart line total / grand total — 15px / 22px / 900 / -0.02em */
.t-total    { font-size: 15px; font-weight: 900; letter-spacing: -.02em; }
.t-total-lg { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }

/* Accent word — coloured last word of a headline (orange default) */
.headline .ac, .ac { color: var(--karting); }
.ac.karting { color: var(--karting); }
.ac.ice { color: var(--ice); }
.ac.snow { color: var(--snow); }
.ac.sky { color: var(--sky); }
.ac.outdoor { color: var(--outdoor); }
.ac.ink { color: var(--ink); }

/* ---- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:hover, .btn:active {
  background: var(--karting);
  border-color: var(--karting);
  color: #fff;
}

.btn:focus-visible { outline: 3px solid var(--karting); outline-offset: 2px; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-lg { padding: 16px 32px; font-size: 16px; }

.btn-line { background: transparent; color: var(--ink); }

/* ---- card / chip -------------------------------------------------------- */

.card {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 20px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(21,0,71,.08);
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}

/* ---- sacred shapes -------------------------------------------------------
   Square containers clipped by the EXACT activity vectors in shapes.ejs.
   The 8% interior margin is baked into the paths, so the silhouette never
   touches an edge. Each world uses ITS colour only. Never put these inside
   an element that trims them. */

.wshape { display: block; aspect-ratio: 1; }
.wshape.karting { clip-path: url(#shp-karting); background: var(--karting); }
.wshape.ice     { clip-path: url(#shp-ice);     background: var(--ice); }
.wshape.snow    { clip-path: url(#shp-snow);    background: var(--snow); }
.wshape.sky     { clip-path: url(#shp-sky);     background: var(--sky); }
.wshape.outdoor { clip-path: url(#shp-outdoor); background: var(--outdoor); }

/* briTri teardrop — functional dots / bullets / avatars only */
.dot { display: inline-block; width: 10px; height: 10px; clip-path: url(#briTri); background: var(--ink); }
.dot.karting { background: var(--karting); }
.dot.ice { background: var(--ice); }
.dot.snow { background: var(--snow); }
.dot.sky { background: var(--sky); }
.dot.outdoor { background: var(--outdoor); }

/* ==========================================================================
   BOOKING PAGE (/book/:key) — v5 prototype "attraction" layout.
   A world-colour hero + a two-column body: gallery/lede/feats on the left, the
   LIVE booking card on the right. The functional element ids/classes that
   public/app.js queries are UNCHANGED (#dates, #slots, #slots-empty,
   .ticket-row[data-variant], .qty, [data-step], #total, #continue, #book-added,
   #book-keep). The .slot / .slot.day buttons app.js generates are restyled here
   to the prototype's .book-slot / .book-date look. Palette-only.
   Ref: docs/design/v5-prototype-target.md (attraction section, quoted verbatim).
   ========================================================================== */

.attr { --act-color: var(--karting); }

/* ---- hero: world-colour block + the world's card render ------------------- */
.attr-hero {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--act-color);
}
/* each world paints the hero its own flat colour */
.attr-hero.karting { background: var(--karting); }
.attr-hero.ice     { background: var(--ice); }
.attr-hero.snow    { background: var(--snow); }
.attr-hero.sky     { background: var(--sky); }
.attr-hero.outdoor { background: var(--outdoor); }

/* full-bleed per-world hero KV (the same branded still the home hero uses),
   behind the title — colour block shows under it while it loads.
   object-position 60% matches the home crop (subject in the safe zone). */
.attr-hero-vid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 60% center;
  pointer-events: none;
}
/* Every site video is decorative autoplay (banners, film tiles) — NEVER show
   the native ▶ overlay iOS/Safari paints when the OS refuses autoplay (Low
   Power Mode, auto-play settings). The poster shows instead and hero-video.js
   starts playback on the first touch/scroll. (client 2026-07-14) */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls-overlay-play-button { display: none !important; }
/* legibility veil over the KV — same flat navy wash as the home hero, so the
   white title stays readable on the light worlds (sky/ice/outdoor). */
.attr-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(21,0,71,.22);
}
@media (max-width: 860px) {
  .attr-hero::before { background: rgba(21,0,71,.5); }
}
/* Snow & Sky show a LOOPING mascot banner recoloured to the EXACT brand world
   colour (var(--snow)/--sky). The veil is REMOVED (display:none, not just
   transparent): a transparent pane still fully covers the <video>, and Chrome
   treats a covered muted video as "background media" and pauses it to save
   power — so the banner would freeze instead of looping. Dropping the pane keeps
   the clip visible (it autoplays + loops) and lets the exact colour through. The
   title + meta go navy to stay legible on the bright brand colour. More specific
   than the base + mobile veil rules, so this wins. */
.attr-hero.snow::before, .attr-hero.sky::before { display: none; }
.attr-hero.snow .attr-h1, .attr-hero.sky .attr-h1,
.attr-hero.snow .attr-h1 .ac, .attr-hero.sky .attr-h1 .ac,
.attr-hero.snow .attr-meta, .attr-hero.sky .attr-meta { color: var(--ink); }
/* Snow & Sky banner heroes: lift the title + meta up into the open brand-colour
   space above the mascots (they sit centre-lower in the clip) instead of
   overlapping them at the bottom. */
.attr-hero.snow, .attr-hero.sky { justify-content: flex-start; }
.attr-hero.snow .attr-hero-content,
.attr-hero.sky .attr-hero-content { padding-block: 104px 40px; }
/* Arabic: the mascots sit on the RIGHT of the banner, so pull the title + meta
   to the LEFT and cap the title width so it wraps into that clear left column
   instead of landing on the mascots. Kept RTL (not LTR) so the accent full-stop
   stays at the natural end of the Arabic phrase — on the left. */
[dir="rtl"] .attr-hero.snow .attr-h1,
[dir="rtl"] .attr-hero.sky .attr-h1 { max-width: 44%; margin-inline-start: auto; margin-inline-end: 0; text-align: left; }
[dir="rtl"] .attr-hero.snow .attr-meta,
[dir="rtl"] .attr-hero.sky .attr-meta { justify-content: flex-end; }

/* the world's card render, anchored bottom-right, cropped by the hero (no video
   asset ships — the render + colour carry the world identity per the brief).
   Height-capped + top-cropped so it never rides up into the overlaid nav. */
.attr-hero-art {
  position: absolute;
  inset-block: 96px 0;          /* clears the ~80px overlaid header */
  inset-inline-end: clamp(12px, 5vw, 72px);
  width: clamp(200px, 26vw, 340px);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 24px 60px -24px rgba(21,0,71,.5);
}
.attr-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: inherit; }

.attr-hero-content { position: relative; z-index: 2; padding-block: 40px 56px; }

.attr-meta {
  display: flex; flex-wrap: wrap; gap: 12px 22px;
  margin-block-end: 22px;
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  /* white over the photo KV + navy veil (was navy for the flat colour hero) */
  color: #fff;
}
.attr-meta__i { display: inline-flex; align-items: center; gap: 8px; }
.attr-meta__i .dot { width: 8px; height: 8px; }

.attr-h1 {
  font-size: clamp(52px, 8.5vw, 116px);
  font-weight: 900; letter-spacing: -.05em; line-height: .9;
  /* white over the photo KV + navy veil (was navy for the flat colour hero) */
  color: #fff;
  max-width: 12ch;
}
.attr-h1 .ac { color: var(--act-color); display: inline-block; transform: rotate(-4deg) translateY(-.06em); margin-inline-start: .06em; }

/* ---- body: two-column (main + sticky book card) --------------------------- */
.attr-body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: start;
  padding-block: 56px 84px;
}

/* gallery — 3 tiles: two "hl" caption tiles + the world render */
.attr-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  aspect-ratio: 1.3;
  margin-block-end: 40px;
}
.attr-gal { border-radius: 14px; position: relative; overflow: hidden; }
.attr-gal:first-child { grid-row: 1 / 3; }
.attr-gal.hl { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 26px; }
.attr-gal.hl.b { background: var(--ink); color: #fff; }
.attr-gal.hl.a { background: var(--paper); color: var(--ink); border: 1px solid var(--c-line-l); }
.attr-gal.render { padding: 0; background: var(--ink); }
/* Anchor the card art to its TOP: the world-name lockup is baked into the top
   of the artwork and a centre crop was cutting it off (client 2026-07-14). */
.attr-gal.render img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.attr-gal .cap-k { position: relative; z-index: 2; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; opacity: .7; margin-block-end: auto; }
/* Brand tile: JUST the actual white lockup artwork, centered (client 2026-07-14) */
.attr-gal.hl.logo-only { justify-content: center; align-items: center; }
.attr-gal .attr-brand-logo { position: relative; z-index: 2; height: clamp(40px, 4vw, 56px); width: auto; max-width: 78%; object-fit: contain; }
.attr-gal .cap-h { position: relative; z-index: 2; font-size: clamp(20px, 2.1vw, 28px); font-weight: 900; letter-spacing: -.03em; line-height: 1.04; }
/* Per-world about copy replaces the old short label — paragraph sizing so the
   full sentence fits the navy tile (client 2026-07-14). */
.attr-gal .cap-h--about { font-size: clamp(14px, 1.3vw, 17px); font-weight: 700; letter-spacing: -.01em; line-height: 1.5; }
.attr-gal .cap-s { position: relative; z-index: 2; font-size: 13px; font-weight: 700; margin-block-start: 8px; opacity: .85; line-height: 1.4; }
.attr-gal .gal-shape { position: absolute; inset-block-start: 11%; inset-inline-end: 8%; width: 44%; aspect-ratio: 1; z-index: 1; }
.attr-gal .gal-shape.karting { clip-path: url(#shp-karting); background: var(--karting); }
.attr-gal .gal-shape.ice     { clip-path: url(#shp-ice);     background: var(--ice); }
.attr-gal .gal-shape.snow    { clip-path: url(#shp-snow);    background: var(--snow); }
.attr-gal .gal-shape.sky     { clip-path: url(#shp-sky);     background: var(--sky); }
.attr-gal .gal-shape.outdoor { clip-path: url(#shp-outdoor); background: var(--outdoor); }

.attr-h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 900; letter-spacing: -.04em; line-height: 1; margin-block-end: 18px; color: var(--ink); }
.attr-h2 .ac { color: var(--act-color); }
.attr-desc { font-size: 15px; color: rgba(21,0,71,.62); line-height: 1.55; margin-block-end: 32px; }

.attr-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.attr-feat { background: #fff; border: 1px solid var(--c-line-l); border-radius: 14px; padding: 18px 20px; }
.attr-feat .l { font-size: 9px; color: rgba(21,0,71,.45); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-block-end: 4px; }
.attr-feat .v { font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); }

/* ---- the booking card (sticky on desktop) --------------------------------- */
.book-card {
  position: sticky; top: 20px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--c-line-l); border-radius: 22px; overflow: hidden;
  box-shadow: 0 14px 36px -20px rgba(21,0,71,.20);
}
.book-card-top { padding: 26px 24px 20px; border-block-end: 1px solid var(--c-line-l); }
.book-card .from-row { display: flex; justify-content: space-between; align-items: baseline; margin-block-end: 6px; }
.book-card .from { font-size: 10px; color: var(--c-mute); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }
.book-card .price { font-size: 52px; font-weight: 900; letter-spacing: -.04em; line-height: 1; margin-block-start: 4px; }
.book-card .price .unit { font-size: 16px; color: var(--c-mute); font-weight: 700; margin-inline-start: 4px; }
.book-card .price-sub { font-size: 11px; color: var(--c-mute); margin-block-start: 4px; font-weight: 600; }
.book-card-body { padding: 20px 24px 24px; }

.book-lbl {
  display: flex; align-items: center; gap: 8px;
  font-size: 9px; color: var(--c-mute); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
  margin: 0 0 8px;
}
.book-lbl:not(:first-child) { margin-block-start: 18px; }
.book-lbl .dot { width: 7px; height: 7px; }

/* date strip — horizontal scroll of .slot.day buttons (app.js-generated) */
.date-strip { display: flex; gap: 5px; overflow-x: auto; padding-block-end: 2px; scrollbar-width: none; }
.date-strip::-webkit-scrollbar { display: none; }

/* slot grid — 3-col of .slot buttons (app.js-generated) */
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }

/* base pickable tile (used by both date + slot buttons) */
.slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: #fff; border: 1.5px solid var(--c-line-l); border-radius: 9px;
  padding: 9px 4px; text-align: center; color: var(--ink);
  font-size: 11px; font-weight: 800; line-height: 1.15; cursor: pointer;
  transition: transform .2s var(--ease-spring), background-color .2s ease, border-color .2s ease, color .2s ease;
}
.slot small { font-size: 8px; opacity: .7; margin-block-start: 1px; font-weight: 600; color: inherit; }
.slot:hover:not(:disabled):not(.sold) { border-color: var(--ink); }
.slot:focus-visible { outline: 3px solid var(--act-color); outline-offset: 2px; }

/* date button (weekday over day-number) */
.date-strip .slot.day { flex: 0 0 auto; min-width: 58px; border-color: transparent; background: var(--paper); }
.date-strip .slot.day small { font-size: 9px; opacity: .7; text-transform: uppercase; letter-spacing: .5px; }
.date-strip .slot.day span { font-size: 15px; font-weight: 900; }
/* selected date → navy (prototype .book-date.active) */
.date-strip .slot.day.picked { background: var(--ink); border-color: var(--ink); color: #fff; transform: scale(1.06); }

/* selected slot → world colour (prototype .book-slot.active) */
.slot.picked { background: var(--act-color); border-color: var(--act-color); color: var(--ink); transform: scale(1.04); }
/* the ice/sky/outdoor colours are light — keep ink text; snow/karting too read ink well */

/* sold-out slot */
.slot.sold, .slot:disabled { opacity: .32; cursor: not-allowed; }
.slot.sold:hover { border-color: var(--c-line-l); }

.book-empty { font-size: 11px; font-weight: 700; color: var(--c-mute); padding-block: 8px 0; margin-block-start: 8px; }

/* Flyer-type selector (tiered worlds — sky). Matches the card's input look;
   attribute-selector [hidden] rules below beat the display rules (the UA
   hidden style loses to author display:flex/grid otherwise). */
.book-tier {
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(21,0,71,.16);
  border-radius: 12px;
  padding: 13px 14px;
  margin-block-end: 18px;
  cursor: pointer;
}
.book-tier:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.book-soon {
  background: var(--paper);
  border: 1px solid rgba(21,0,71,.1);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(21,0,71,.65);
  line-height: 1.55;
  margin: 0;
}
.book-soon[hidden] { display: none; }
[data-book-body][hidden] { display: none; }

/* ticket rows: label + price, with a briTri qty stepper (prototype .qty-ctl) */
.tickets { display: grid; gap: 12px; margin-block-start: 4px; }
.ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ticket-row[hidden] { display: none; }
.ticket-info { display: flex; flex-direction: column; }
.ticket-info .ticket-label { font-weight: 800; font-size: 13px; color: var(--ink); }
.ticket-info .ticket-price { font-size: 11px; font-weight: 700; color: var(--c-mute); margin-block-start: 1px; }

.qty-ctl { display: flex; align-items: center; gap: 12px; }
.qty-ctl button {
  width: 28px; height: 28px; clip-path: url(#briTri);
  border: none; background: var(--c-line-l); color: var(--ink);
  font-weight: 900; font-size: 14px; line-height: 1; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}
.qty-ctl button:hover:not(:disabled) { background: var(--ink); color: #fff; }
.qty-ctl button:disabled { opacity: .4; cursor: not-allowed; }
.qty-ctl .qty { font-size: 16px; font-weight: 900; min-width: 20px; text-align: center; }

/* running total + the ADD TO CART cta */
.book-total-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-block: 20px 12px; padding-block-start: 16px; border-block-start: 1px solid var(--c-line-l);
}
.book-total-lbl { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-mute); }
.book-total-val { font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); }

.book-cta {
  width: 100%; background: var(--ink); color: #fff; border: none;
  padding: 15px; border-radius: 12px; font-family: inherit; font-size: 12px; font-weight: 800;
  cursor: pointer; text-transform: uppercase; letter-spacing: .5px;
  transition: transform .3s var(--ease-spring), background-color .3s var(--ease-spring), opacity .2s;
}
.book-cta:hover:not(:disabled) { transform: translateY(-2px); background: var(--karting); }
.book-cta:disabled { opacity: .35; cursor: not-allowed; }

/* ---- checkout fields ----------------------------------------------------- */

.field { display: block; margin-block-end: 16px; }

.field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-block-end: 6px;
}

.field input, .field select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid rgba(21,0,71,.15);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}

.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--ink);
}

/* ---- checkout page: order summary + pay ---------------------------------- */

.checkout-grid { margin-block-start: 24px; align-items: start; }

.checkout-empty { margin-block-start: 24px; }
.checkout-empty .btn { margin-block-start: 8px; }

.summary-head { font-weight: 800; font-size: 18px; }
.summary-when { font-size: 14px; margin-block-end: 8px; }

.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 8px;
}

.summary-row + .summary-row { border-block-start: 1px solid rgba(21,0,71,.08); }

.summary-row.summary-total { font-size: 18px; }
.summary-row.summary-total strong { font-weight: 800; }

.checkout-note { font-size: 14px; margin-block: 12px; }

.pay-error { color: var(--karting); font-weight: 700; margin-block: 12px; }

.checkout-paybtn { width: 100%; }

/* ---- mock gateway page (mock mode only) ----------------------------------- */

.mockpay .headline { margin-block-start: 16px; }
.mockpay-card { max-width: 420px; margin-block: 20px; }
.mockpay-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.payfail-body { margin-block: 12px 20px; max-width: 560px; }

/* ---- ticket page ----------------------------------------------------------
   Status chip: flat palette colours only. PAID = solid navy pill with white
   text (max contrast; white on the green fails contrast, so green marks
   CHECKED IN with navy text instead). Pending/expired keep the base chip. */

.ticket .headline { margin-block-start: 12px; }

.ticket-grid { margin-block-start: 24px; align-items: start; }

.chip.st-paid { background: var(--ink); color: #fff; }
.chip.st-checkedin { background: var(--outdoor); color: var(--ink); }

.ticket-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

/* height:auto keeps the code square when max-width:100% bites on small screens */
.ticket-qr img { width: 240px; height: auto; }

/* Manrope only (no monospace off-brand) — wide tracking does the "code" job */
.ticket-ref {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .14em;
}

.ticket-hint { font-size: 14px; max-width: 280px; }

.ticket-receipt { margin-block-start: 20px; }

.ticket-cal { margin-block-start: 16px; }

/* ==========================================================================
   HEADER — .site-head, ported from the prototype .nav-bar (v5 §3).
   Two skins: default solid (content pages) + .site-head--hero (transparent,
   white text) for later use over the dark home hero. Sticky per the task.
   ========================================================================== */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-block-end: 1px solid var(--c-line-l);
}

.site-head .site-head__bar {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* the lockup sits left; nav + actions push to the far right */
.site-head .brand-logo-lockup { margin-inline-end: auto; }

/* nav links — 12px, v5 override weight 700, muted ink; white over hero */
.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-nav a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(21,0,71,.7);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s;
}

.site-nav a:hover { color: var(--c-ink); }
.site-nav a:focus-visible { outline: 2px solid var(--karting); outline-offset: 4px; border-radius: 4px; }

.site-head__actions { display: flex; align-items: center; gap: 10px; }

/* primary BOOK NOW pill — white pill, ink text, hover → orange (v5 .book-pill) */
.book-pill {
  background: var(--c-ink);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  border: none;
  font-family: inherit;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background-color .25s var(--ease-spring), color .25s var(--ease-spring), transform .25s var(--ease-spring);
}

.book-pill:hover { background: var(--c-pink); color: #fff; transform: scale(1.05); }
.book-pill:focus-visible { outline: 2px solid var(--karting); outline-offset: 3px; }
.book-pill svg { width: 12px; height: 12px; }

/* cart pill — hidden until the cart has items (JS toggles [hidden]) */
.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1.5px solid var(--c-line-l);
  border-radius: 999px;
  padding: 8px 13px;
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  color: var(--c-ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s var(--ease-spring), transform .2s var(--ease-spring);
}

.cart-pill[hidden] { display: none; }
.cart-pill:hover { border-color: var(--c-ink); transform: translateY(-1px); }
.cart-pill:focus-visible { outline: 2px solid var(--karting); outline-offset: 3px; }
.cart-pill svg { width: 16px; height: 16px; stroke: var(--c-ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.cart-pill .cart-n {
  background: var(--c-karting);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  min-width: 18px;
  height: 18px;
  clip-path: url(#briTri);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* language toggle — styled to belong in the header (production-only control) */
.lang-toggle {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--c-ink);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--c-line-l);
  transition: border-color .2s, background-color .2s, color .2s;
}

.lang-toggle:hover { border-color: var(--c-ink); }
.lang-toggle:focus-visible { outline: 2px solid var(--karting); outline-offset: 3px; }

/* account affordance — quiet outlined pill with a person glyph + first name */
.account-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1.5px solid var(--c-line-l);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .3px;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
  max-width: 160px;
  transition: border-color .2s var(--ease-spring), transform .2s var(--ease-spring);
}
.account-pill:hover { border-color: var(--c-ink); transform: translateY(-1px); }
.account-pill:focus-visible { outline: 2px solid var(--karting); outline-offset: 3px; }
.account-pill svg { width: 15px; height: 15px; stroke: var(--c-ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.account-pill span { overflow: hidden; text-overflow: ellipsis; }

/* LOG IN affordance (signed out) — a clearly-labelled outlined pill with a
   person glyph. Reads as a real button (navy ink, strong border) unlike the
   old faint outlined pill, and sits beside BOOK NOW without competing with it. */
.login-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1.5px solid var(--c-ink);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s var(--ease-spring), color .2s var(--ease-spring), transform .2s var(--ease-spring);
}
.login-pill:hover { background: var(--c-ink); color: #fff; transform: translateY(-1px); }
.login-pill:hover svg { stroke: #fff; }
.login-pill:focus-visible { outline: 2px solid var(--karting); outline-offset: 3px; }
.login-pill svg { width: 15px; height: 15px; stroke: var(--c-ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* hamburger — hidden on desktop, shown on mobile (prototype had none; added) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1.5px solid var(--c-line-l);
  border-radius: 12px;
  background: #fff;
  color: var(--c-ink);
  cursor: pointer;
}

.nav-toggle:focus-visible { outline: 2px solid var(--karting); outline-offset: 3px; }
.nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nav-toggle .nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* mobile nav panel — collapsed by default, toggled open by the hamburger */
.site-nav-panel { display: none; }

/* --- HERO skin: transparent header, white lockup + nav, over the dark KV --- */
.site-head--hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-block-end: none;
}

/* white-at-opacity is expressed as #fff + element opacity — the brand
   guardrail permits only the navy translucency form, so translucent white
   uses the `opacity` property instead of a white colour function. */
.site-head--hero .brand-logo-lockup { color: #fff; }
.site-head--hero .site-nav a { color: #fff; opacity: .82; }
.site-head--hero .site-nav a:hover { opacity: 1; }
.site-head--hero .lang-toggle { color: #fff; border-color: #fff; border-style: solid; opacity: .78; }
.site-head--hero .lang-toggle:hover { opacity: 1; }
.site-head--hero .book-pill { background: #fff; color: var(--c-ink); opacity: 1; }
.site-head--hero .book-pill:hover { background: var(--c-pink); color: #fff; }
.site-head--hero .cart-pill { background: transparent; border-color: #fff; color: #fff; opacity: .85; }
.site-head--hero .cart-pill svg { stroke: #fff; }
.site-head--hero .cart-pill .cart-n { opacity: 1; }
.site-head--hero .account-pill { background: transparent; border-color: #fff; color: #fff; opacity: .85; }
.site-head--hero .account-pill svg { stroke: #fff; }
.site-head--hero .account-pill:hover { opacity: 1; }
/* Log in over the dark hero: solid white pill, navy text — legible, high
   contrast (matches BOOK NOW's inversion on the hero) so it's never lost on KV */
.site-head--hero .login-pill { background: #fff; border-color: #fff; color: var(--c-ink); opacity: 1; }
.site-head--hero .login-pill svg { stroke: var(--c-ink); }
.site-head--hero .login-pill:hover { background: var(--c-pink); border-color: var(--c-pink); color: #fff; }
.site-head--hero .login-pill:hover svg { stroke: #fff; }
.site-head--hero .nav-toggle { background: transparent; border-color: #fff; color: #fff; opacity: .85; }

/* ==========================================================================
   FOOTER — .site-foot, ported from the prototype (v5 §4). Navy bg, negative
   (all-white) lockup, three link columns, social icons, legal line.
   ========================================================================== */

.site-foot {
  background: var(--c-ink);
  color: #fff;
  margin-block-start: auto; /* pins the footer to the bottom of short pages */
  border-block-start: 1px solid var(--c-line);
  padding: 60px 40px 32px;
}

.site-foot .foot-inner {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-block-end: 32px;
  border-block-end: 1px solid var(--c-line);
}

/* white-on-navy at opacity: #fff colour + element `opacity` (the guardrail
   permits only the navy translucency form, so every translucent white here
   uses the `opacity` property rather than a white colour function). */
.foot-grid h4, .foot-grid .foot-col-h {
  font-size: 10px;
  color: #fff;
  opacity: .4;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-block-end: 14px;
  font-weight: 700;
}

.foot-grid ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.foot-grid li { line-height: 1; font-size: 13px; color: #fff; opacity: .7; font-weight: 500; }

.foot-grid a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s;
}

/* the <li> already carries opacity .7; links lift to full white on hover */
.foot-grid li:has(a):hover, .foot-grid a:hover { opacity: 1; }
.foot-grid a:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 3px; }

.foot-brand p {
  font-size: 14px;
  color: #fff;
  opacity: .55;
  line-height: 1.55;
  margin-block: 12px 20px;
  max-width: 320px;
}

.foot-socials { display: flex; gap: 8px; }

.foot-social {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: .5;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s;
}

.foot-social:hover { opacity: 1; }
.foot-social:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; opacity: 1; }
.foot-social svg { width: 14px; height: 14px; }

.foot-bottom {
  margin-block-start: 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 500;
}

.foot-bottom .foot-line { font-size: 11px; color: #fff; opacity: .4; font-weight: 500; }

/* ---- responsive: header + footer + generic single column ----------------- */

.grid { display: grid; gap: 20px; }

@media (min-width: 720px) {
  .wrap { padding-inline: 32px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  /* header collapses to lockup + (cart) + hamburger; the inline nav, BOOK NOW
     pill and language toggle all move into the mobile panel to avoid overflow. */
  .site-head__bar { padding: 16px 20px; gap: 10px; }
  .site-head .site-nav { display: none; }
  .site-head__bar > .book-pill,
  .site-head__actions > .book-pill,
  .site-head__actions > .account-pill,
  .site-head__actions > .login-pill,
  .site-head__actions > .lang-toggle { display: none; }
  .nav-toggle { display: inline-flex; }

  /* mobile nav panel opens below the bar when the hamburger is expanded */
  .site-nav-panel {
    display: block;
    max-height: 0;
    overflow: hidden;
    border-block-start: 1px solid var(--c-line-l);
    background: #fff;
    transition: max-height .28s var(--ease-out);
  }

  /* Taller cap + scroll so the foot row (Book / Log in / language) is never
     clipped on short viewports (in-app browsers eat vertical space). */
  .site-nav-panel[data-open="true"] { max-height: 85vh; overflow-y: auto; }

  .site-nav-panel ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 8px 20px 20px;
    gap: 2px;
  }

  .site-nav-panel a {
    display: block;
    padding: 14px 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--c-ink);
    text-decoration: none;
    border-block-end: 1px solid var(--c-line-l);
  }

  .site-nav-panel a:focus-visible { outline: 2px solid var(--karting); outline-offset: 2px; }

  /* the panel foot carries the BOOK NOW pill + language toggle on mobile.
     The generic .site-nav-panel a rule (navy, 16px, bordered) would swallow the
     pill/toggle styling, so restore each control's own look explicitly. */
  .site-nav-panel__foot { display: flex; align-items: center; gap: 10px; padding: 4px 20px 20px; border-block-end: 0; flex-wrap: wrap; }
  .site-nav-panel__foot .book-pill {
    display: inline-flex;
    padding: 11px 20px;
    font-size: 11px;
    color: #fff;
    border-block-end: 0;
  }
  .site-nav-panel__foot .account-pill {
    display: inline-flex;
    padding: 11px 16px;
    font-size: 11px;
    color: var(--c-ink);
    border: 1.5px solid var(--c-line-l);
    border-radius: 999px;
    border-block-end: 0;
  }
  /* Log in reads as a clear filled/bordered button inside the mobile sheet too,
     never swallowed by the generic panel-link style (navy 16px bordered row) */
  .site-nav-panel__foot .login-pill {
    display: inline-flex;
    padding: 11px 18px;
    font-size: 11px;
    color: var(--c-ink);
    border: 1.5px solid var(--c-ink);
    border-radius: 999px;
    border-block-end: 0;
  }
  .site-head--hero .site-nav-panel .account-pill { color: var(--c-ink); border-color: var(--c-line-l); opacity: 1; }
  .site-head--hero .site-nav-panel .account-pill svg { stroke: var(--c-ink); }
  .site-head--hero .site-nav-panel .login-pill { background: #fff; color: var(--c-ink); border-color: var(--c-ink); opacity: 1; }
  .site-head--hero .site-nav-panel .login-pill svg { stroke: var(--c-ink); }
  .site-nav-panel__foot .lang-toggle {
    display: inline-flex;
    align-items: center;
    padding: 11px 16px;
    font-size: 11px;
    color: var(--c-ink);
    border: 1.5px solid var(--c-line-l);
    border-radius: 999px;
  }

  /* on the hero skin the collapsed panel stays a solid white sheet for reading;
     its links + toggle must read as navy-on-white, not the hero's white-on-navy */
  .site-head--hero .site-nav-panel { position: absolute; left: 0; right: 0; top: 100%; }
  .site-head--hero .site-nav-panel a { color: var(--c-ink); opacity: 1; }
  .site-head--hero .site-nav-panel .book-pill { background: var(--c-ink); color: #fff; opacity: 1; }
  .site-head--hero .site-nav-panel .lang-toggle { color: var(--c-ink); border-color: var(--c-line-l); opacity: 1; }

  /* footer: 2-up columns, brand spans, legal stacks (prototype mobile) */
  .site-foot { padding: 50px 22px 24px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-bottom { flex-direction: column; gap: 6px; }
}

/* ---- RTL: dir=rtl + logical properties mirror the layout automatically.
   Only the type system swaps; the logo lockup NEVER mirrors or changes font. */

[dir=rtl] body, [dir=rtl] * { font-family: 'IBM Plex Sans Arabic', 'Manrope', sans-serif; }

/* Arabic script is cursive: ANY tracking breaks the letter joining — POSITIVE
   tracking opens gaps between joined letters (the reported bug), NEGATIVE
   tracking crowds them. The Latin type system tracks eyebrows, labels, buttons
   and display numbers for style; on RTL pages every bit of that must go. Reset
   it globally — Arabic is never tracked — with !important so it beats the many
   per-element letter-spacing rules regardless of source order. */
[dir=rtl] * { letter-spacing: normal !important; }

/* IBM Plex Sans Arabic ships up to 700 (no 800/900), so Arabic reads a touch
   lighter than the Manrope English site. Hold the display type at the heaviest
   real weight (the browser synthesises bold above it), and lift the small muted
   sub-700 UI labels to 700 so they carry the same visual weight as their
   English counterparts. Only ever raises weight — never reduces a heavier one. */
[dir=rtl] .headline, [dir=rtl] .t-h2, [dir=rtl] .t-hero { font-weight: 700; }
[dir=rtl] .date-strip .slot.day small { font-weight: 700; }

/* RTL: mirror DIRECTIONAL glyphs only. In Arabic, "forward/next/go" points LEFT
   and "back" points RIGHT, so the → CTA arrows, ↗ card/bundle "go" arrows, the
   nav pill arrow, and the ‹ back-chevron must flip. Symmetric icons are safe:
   the .btf-ico ✕ is unchanged by a horizontal flip, and the calendar/home/eye
   icons aren't targeted. */
[dir=rtl] .btf-cta svg,
[dir=rtl] .btf-ico svg,
[dir=rtl] .ad-arr svg,
[dir=rtl] .bundle-go svg,
[dir=rtl] .book-pill svg { transform: scaleX(-1); }

/* Arabic carries diacritics above the cap line and taller letterforms; the
   display type's sub-1.0 leading (tuned for tight Latin display) cramps
   multi-line Arabic headings and can clip marks. Give RTL display headings a
   little more line-height. Scoped to RTL, so the English type is untouched. */
[dir=rtl] .home .hero-h1, [dir=rtl] .hero-h1, [dir=rtl] .t-h2, [dir=rtl] .btf-h1,
[dir=rtl] .conf-title, [dir=rtl] .attr-h1, [dir=rtl] .big-cta h2,
[dir=rtl] .headline, [dir=rtl] .t-hero { line-height: 1.15; }

/* ==========================================================================
   HOME PAGE BODY — ported from the v5 prototype (docs/design/v5-prototype-target
   §5–6 + the shipped home markup). Hero KV, marquee, world cards, bundles,
   film posters, how-it-works, big closing CTA. Flat palette only; every
   translucent white is #fff + `opacity` (guardrail permits only navy rgba).
   ========================================================================== */

/* ---- HERO (full-bleed photographic key visual) -------------------------- */

.home .hero {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  background: var(--c-ink);
  display: flex;
  flex-direction: column;
  /* the absolute hero header sits over this; pad its height back in */
  padding-block-start: 84px;
}

.hero-kv-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Rotating hero: five world KVs stacked; the active one fades in over the rest.
   object-position:60% keeps each subject (parked in the safe zone) on-crop. */
.hero-kv-bg img, .hero-slide { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero-slide.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }
/* legibility veil — a light, uniform navy wash over the KV so the white headline
   stays readable on the lighter worlds (sky/ice/outdoor). Solid navy rgba only
   (a flat fill, no colour ramps); the headline width is capped separately so
   the text still sits clear of the centre-right mascot. */
.hero-kv::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: rgba(21,0,71,.22);
}

.hero-content {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 40px 72px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #fff;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-block-end: 24px;
  /* translucent white pill over the KV: base is #fff, dropped to a glassy
     level via opacity (the guardrail forbids a white colour function) */
  opacity: .96;
  background-color: transparent;
}

/* the pill fill itself must read as a faint white wash — layer it via a
   pseudo so the text stays fully opaque */
.hero-tag { position: relative; isolation: isolate; }
.hero-tag::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  opacity: .14;
  z-index: -1;
}

.hero-tag .dot {
  width: 7px; height: 7px;
  clip-path: none;
  border-radius: 50%;
  background: var(--outdoor);
  flex-shrink: 0;
}

.home .hero-h1 {
  color: #fff;
  /* Smaller than the shared display clamp — the rich rotating KVs are busy, so a
     tighter headline keeps the hero from feeling cluttered. Width is capped so
     the wrapped lines stay in the left column, clear of the centre-right mascot. */
  font-size: clamp(36px, 5vw, 82px);
  margin-block-end: 26px;
  max-width: 620px;
}
/* Tagline line 2 (AR carries two sentences): its own line, brand blue (ice) —
   client 2026-07-14. */
.hero-h1 .hero-l2 { display: block; color: var(--ice); }

/* over the KV the accent word is white, not the default orange */
.hero-kv .hero-h1 .ac { color: #fff; }

.hero-sub {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #fff;
  opacity: .88;
  max-width: 520px;
  margin-block-end: 34px;
}

.hero-ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* hero primary + ghost buttons (white pill / outlined) over the KV */
.btn-big {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  background: #fff;
  color: var(--c-ink);
  border: none;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--ease-spring), background-color .25s ease, color .25s ease;
}
.btn-big:hover { transform: translateY(-3px); }
.btn-big:focus-visible { outline: 3px solid var(--karting); outline-offset: 3px; }
.btn-big svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .25s ease;
  opacity: .92;
}
.btn-ghost:hover { opacity: 1; }
.btn-ghost:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

.hero-bottom {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block-end: 22px;
  color: #fff;
  opacity: .7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ---- MARQUEE ------------------------------------------------------------- */

.marquee {
  background: var(--c-ink);
  border-block: 1px solid var(--c-line);
  overflow: hidden;
  padding-block: 22px;
}
.marquee-row { display: flex; white-space: nowrap; }
.marquee-track {
  display: flex;
  /* NO track gap: the separator's symmetric margins are the ONLY spacing, so
     the dot sits exactly halfway between titles (client note 2026-07-11 —
     gap+margin made it hug the preceding word). */
  gap: 0;
  padding-inline-end: 0;
  animation: marqueeScroll 30s linear infinite;
  flex-shrink: 0;
}
@keyframes marqueeScroll { to { transform: translateX(-100%); } }
.marquee-item {
  display: flex;
  align-items: center;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--c-paper);
  flex-shrink: 0;
}
/* fade the WORD only — item-level opacity also faded the child separator, so
   dots after outline words rendered ~12% vs 34% (marketing note 2026-07-23) */
.marquee-item.outline .mq-txt { color: #fff; opacity: .35; }
/* Separator: a true circle (the "·" glyph sat low against the big caps),
   nudged up to centre on the capital band, with EQUAL margins either side. */
.marquee-item .mq-sep { margin: 0 44px; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .34; font-size: 0; align-self: center; flex-shrink: 0; transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---- SECTION scaffold (light sections) ---------------------------------- */

.home .sec { padding: 90px 0; position: relative; }
.home .sec .sec-row,
.home .sec .ad-cards,
.home .sec .bundles,
.home .sec .films-grid,
.home .sec .steps {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 40px;
}

.lightsec { background: var(--paper); color: var(--c-ink); }

.sec-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-block-end: 50px;
}
.sec-row .t-h2 { margin-block-start: 10px; }
.home .sec .sec-num { color: rgba(21,0,71,.45); margin-block-end: 12px; }
.home .sec .sec-intro { color: rgba(21,0,71,.6); max-width: 340px; }

/* ---- 01 — WORLD CARDS ("Pick your adventure") --------------------------- */

.ad-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.ad-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid rgba(21,0,71,.07);
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: var(--c-ink);
  box-shadow: 0 10px 30px -16px rgba(21,0,71,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ad-card.is-live { cursor: pointer; }
.ad-card.is-live:hover { transform: translateY(-6px); box-shadow: 0 16px 36px -16px rgba(21,0,71,.26); }
.ad-card.is-live:focus-visible { outline: 3px solid var(--karting); outline-offset: 3px; }

.ad-art { position: relative; display: block; }
/* show the full 520×820 art (title + mascot baked in) — height:auto lets the
   intrinsic ratio drive it (the width/height attrs must not force 820px tall) */
.ad-art img { width: 100%; height: auto; display: block; }

/* coming-soon chip — lives in the meta row on the trailing edge (where the
   arrow sits on live cards), so it never overlaps the baked title */
.ad-soon {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--c-ink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.ad-card.is-soon { }
.ad-card.is-soon .ad-art img { opacity: .92; }

.ad-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* wrap on narrow cards: the COMING SOON chip drops to its own line instead
     of overflowing past the card edge (mobile clipping bug, 2026-07-14) */
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 16px 16px;
  line-height: 1.1;
}
.ad-dur { font-size: 13px; font-weight: 600; color: var(--c-ink); white-space: nowrap; display: inline-flex; align-items: baseline; gap: 10px; }
@media (max-width: 640px) {
  /* Snow & Sky mobile heroes: STACK title above the mascot banner instead of
     overlaying it — at phone widths the cover-crop centres the mascots right
     under the headline (marketing screenshot 2026-07-23). The hero is already
     a flex column, so the video flows below the text on the same flat brand
     colour; aspect-ratio keeps the clip's own framing. */
  .attr-hero.snow, .attr-hero.sky { min-height: 0; }
  .attr-hero.snow .attr-hero-vid, .attr-hero.sky .attr-hero-vid {
    position: static; inset: auto; order: 2;
    width: 100%; height: auto; aspect-ratio: 1728 / 720;
  }
  .attr-hero.snow .attr-hero-content, .attr-hero.sky .attr-hero-content {
    order: 1; padding-block: 96px 10px;
  }
  .attr-hero.snow .attr-h1, .attr-hero.sky .attr-h1,
  [dir="rtl"] .attr-hero.snow .attr-h1, [dir="rtl"] .attr-hero.sky .attr-h1 { max-width: none; }
}

@media (max-width: 640px) {
  .ad-meta { padding: 11px 13px 14px; gap: 6px; }
  .ad-dur { font-size: 12px; gap: 7px; }
  .ad-soon { font-size: 9px; padding: 4px 9px; letter-spacing: .04em; }
}
.ad-dur b { font-weight: 800; }
.ad-arr { width: 21px; height: 21px; flex-shrink: 0; }
.ad-arr svg { width: 100%; height: 100%; display: block; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ad-arr.karting { color: var(--karting); }
.ad-arr.ice { color: var(--ice); }
.ad-arr.snow { color: var(--snow); }
.ad-arr.sky { color: var(--sky); }
.ad-arr.outdoor { color: var(--outdoor); }

/* ---- 02 — BUNDLES ("Better together") ----------------------------------- */

.bundles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.bundle-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid rgba(21,0,71,.08);
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px -16px rgba(21,0,71,.18);
  transition: transform .35s var(--ease-out);
}
.bundle-card:hover { transform: translateY(-6px); }

/* the bundle image carries the mascots + name + world dots (baked-in). We crop
   its baked-in bottom price band (last ~24%) and render the REAL DB price in
   our own foot — object-position:top keeps the title/mascots, drops the band */
/* Footer-trimmed bundle art is a balanced 1:1 composition — show it whole so
   the mascots fill the card (no landscape crop that stranded empty top space). */
.bundle-art { display: block; overflow: hidden; aspect-ratio: 1 / 1; }
.bundle-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; }

/* 4th package with no matching art — a tasteful navy-dot tile */
.bundle-card--plain .bundle-plain-top {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px 20px;
  aspect-ratio: 760 / 720;
  justify-content: flex-start;
}
.bundle-plain-title {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.02;
  color: var(--c-ink);
  max-width: 12ch;
}

/* Price band — continues the artwork's own bottom band (which we cropped off):
   thin navy hairline, a big navy price on the start side, orange SAVE beneath,
   and on the end side a karting-orange "go" arrow (live) or a coming-soon chip.
   Sits on white like the artwork, so image + band read as one tile. */
.bundle-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px 22px;
  border-block-start: 1px solid rgba(21,0,71,.12);
}
.bundle-price { display: flex; flex-direction: column; gap: 3px; }
.bundle-price-n { font-size: 34px; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--c-ink); }
.bundle-save { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--outdoor); }
.bundle-go {
  flex: none; color: var(--c-karting);
  display: inline-flex; align-items: center; justify-content: center;
}
.bundle-go svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bundle-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(21,0,71,.08);
  color: var(--c-ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- SEE THE WORLDS (film poster tiles) --------------------------------- */

.films-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.film-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: var(--c-ink);
  box-shadow: 0 10px 30px -16px rgba(21,0,71,.18);
  transition: box-shadow .3s ease;
}
.film-wrap:hover { box-shadow: 0 22px 46px -20px rgba(21,0,71,.32); }
.film-tile { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film-tag {
  position: absolute;
  inset-inline-start: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(21,0,71,.55);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.film-wrap:hover .film-tag { opacity: 1; }

/* ---- BOOK IN 38 SECONDS (how it works) ---------------------------------- */

.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.step-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 300px;
  min-width: 280px;
  max-width: 360px;
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(21,0,71,.08);
  border-radius: 20px;
  box-shadow: 0 10px 30px -16px rgba(21,0,71,.18);
}
.step-num { font-size: 12px; font-weight: 800; color: rgba(21,0,71,.45); letter-spacing: 1.5px; text-transform: uppercase; }
.step-visual {
  height: 150px;
  margin-block: 18px;
  background: var(--c-ink);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-name { font-size: 22px; font-weight: 900; letter-spacing: -.03em; line-height: 1; margin-block-end: 10px; color: var(--c-ink); }
.step-desc { font-size: 14px; color: rgba(21,0,71,.6); line-height: 1.5; }

/* step 01 — the slot-grid mock (on navy) */
.step-mock-slot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; max-width: 240px; }
.step-mock-slot div {
  border-radius: 6px;
  padding: 9px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #fff;
  /* faint white tiles on navy: base #fff dropped via opacity */
  position: relative;
  isolation: isolate;
  background-color: transparent;
}
.step-mock-slot div::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: #fff; opacity: .07; z-index: -1;
}
.step-mock-slot div.lit { color: #fff; background: var(--karting); }
.step-mock-slot div.lit::before { opacity: 0; }

/* step 02 — the KNET pay chip */
.step-mock-pay {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  position: relative;
  isolation: isolate;
}
.step-mock-pay::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: #fff; opacity: .07; z-index: -1;
}
.step-mock-pay .check {
  width: 22px; height: 22px;
  flex-shrink: 0;
  clip-path: url(#briTri);
  background: var(--outdoor);
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-mock-pay .check svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* step 03 — the QR mini */
.step-mock-qr { width: 96px; height: 96px; }
.step-mock-qr svg { width: 100%; height: 100%; display: block; border-radius: 6px; }

/* ---- BIG CLOSING CTA ---------------------------------------------------- */

.big-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 120px 40px 90px;
  background: var(--c-ink);
}
.big-cta-inner { position: relative; z-index: 2; }
.big-cta .pre {
  font-size: 12px;
  color: #fff;
  opacity: .5;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  margin-block-end: 22px;
}
.big-cta h2 {
  font-size: clamp(56px, 9vw, 118px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .92;
  color: #fff;
  margin-block-end: 30px;
}
.big-cta h2 .ac { color: var(--sky); display: inline-block; transform: rotate(-6deg); }
.big-cta .btn-big { margin-block-start: 8px; }

.cta-watch { position: absolute; bottom: -16px; z-index: 1; pointer-events: none; line-height: 0; }
.cta-watch img { width: 100%; height: auto; display: block; }
.cta-watch.sg { inset-inline-start: 13%; width: 175px; transform: rotate(-2deg); }
.cta-watch.sm { inset-inline-end: 13%; width: 152px; transform: rotate(2deg); }

/* RTL: Arabic headings drop the tight tracking; the rotated accent stays */
[dir=rtl] .home .hero-h1, [dir=rtl] .big-cta h2, [dir=rtl] .marquee-item,
[dir=rtl] .step-name, [dir=rtl] .bundle-plain-title { letter-spacing: 0; }
[dir=rtl] .home .hero-h1, [dir=rtl] .big-cta h2 { font-weight: 700; }

/* ---- HOME responsive ---------------------------------------------------- */

@media (max-width: 860px) {
  .home .hero { min-height: 560px; padding-block-start: 68px; }
  /* Mobile hero reads busy — the copy sits right over the detailed mascot.
     A deeper flat navy veil calms the KV so the white headline/subhead pop. */
  .hero-kv::before { background: rgba(21,0,71,.5); }
  .home .hero-h1 { font-size: 33px; line-height: 1.14; letter-spacing: -.03em; margin-block-end: 18px; }
  .hero-content { padding-block: 24px 48px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-ctas .btn-big, .hero-ctas .btn-ghost { justify-content: center; }
  .hero-bottom { display: none; }

  .marquee-item { font-size: 24px; }
  .marquee-item .mq-sep { margin: 0 24px; width: 6px; height: 6px; transform: translateY(-2px); }

  .home .sec { padding: 60px 0; }
  .home .sec .sec-row,
  .home .sec .ad-cards,
  .home .sec .bundles,
  .home .sec .films-grid,
  .home .sec .steps { padding-inline: 22px; }
  .sec-row { flex-direction: column; align-items: flex-start; gap: 16px; margin-block-end: 30px; }
  .home .sec .t-h2 { font-size: 36px; }

  /* world cards: 2-up, 5th card left-half-width (prototype mobile) */
  .ad-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ad-card:nth-child(5) { grid-column: 1 / -1; justify-self: start; width: calc(50% - 6px); }

  .bundles { grid-template-columns: 1fr; gap: 16px; }
  .films-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .film-tag { opacity: 1; }

  .steps { flex-direction: column; align-items: stretch; }
  .step-card { max-width: none; }

  .big-cta { padding: 80px 22px 60px; }
  .big-cta h2 { font-size: 48px; }
  .cta-watch.sg { inset-inline-start: 1%; width: 96px; }
  .cta-watch.sm { inset-inline-end: 1%; width: 84px; }

  /* --- booking / attraction page (mobile) --- */
  .attr-hero { min-height: 400px; padding-block-start: 60px; }
  .attr-hero-content { padding-block: 30px 40px; }
  .attr-hero-art { width: clamp(160px, 44vw, 230px); inset-inline-end: -8px; }
  .attr-h1 { font-size: clamp(46px, 15vw, 72px); }
  .attr-body { grid-template-columns: 1fr; gap: 30px; padding-block: 30px 60px; }
  .attr-gallery { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: auto; gap: 10px; }
  .attr-gal { aspect-ratio: 16 / 9; }
  .attr-gal:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
  /* the card render is a tall portrait — a 16/9 crop clipped its title.
     Give it a portrait cell + top anchor so the world name stays visible. */
  .attr-gal.render { aspect-ratio: 3 / 4; }
  .attr-gal.render img { object-position: top center; }
  .attr-gal.hl { padding: 20px; }
  .attr-gal.hl .cap-h { font-size: 22px; }
  .attr-h2 { font-size: 30px; }
  /* book card goes static + full-width in the flow (prototype mobile) */
  .book-card { position: static; }
}

/* ==========================================================================
   CART · CHECKOUT · CONFIRMATION — the .btf shell (v5 §7/§10/§11).
   Ported verbatim from docs/design/v5-prototype-target.md (which quotes the
   approved prototype CSS). Palette-only: navy ink, the world colours, paper.
   The shared shell = a top bar (.btf-top), a centred stage (.btf-stage) and a
   sticky action bar (.btf-bar).
   ========================================================================== */

.page-btf { background: var(--c-paper); min-height: 100dvh; display: flex; flex-direction: column; }

/* --- top bar: circular icon (X / back) + right-aligned indicator --------- */
.btf-top {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 6vw;
  background: #fff;
  border-block-end: 1px solid var(--c-line-l);
}
.btf-ico {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--c-line-l); border-radius: 999px;
  background: #fff; color: var(--c-ink); cursor: pointer;
  text-decoration: none; transition: border-color .2s, transform .2s var(--ease-spring);
}
.btf-ico:hover { border-color: var(--c-ink); transform: translateY(-1px); }
.btf-ico svg { width: 16px; height: 16px; stroke: var(--c-ink); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.btf-prog { flex: 1; }
.btf-brand { font-size: 11px; font-weight: 900; letter-spacing: .02em; color: var(--c-ink); white-space: nowrap; text-transform: none; }
.btf-brand span { color: var(--c-karting); }

/* --- checkout wizard (Cart · Sign in · Pay · Confirmed) ------------------- */
/* Lives inside .btf-prog (cart / sign-in / checkout) and atop confirmation.
   Palette-only: navy for done/current track + dots, karting-orange for the
   current dot, navy-alpha for upcoming. */
.wiz { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; }
.wiz-step { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wiz-dot {
  width: 26px; height: 26px; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  /* line-height 1 + zero tracking: the inherited 1.5 line box and letter-
     spacing pushed digits below/right of true centre (marketing 2026-07-23) */
  line-height: 1; letter-spacing: 0; text-align: center;
  background: #fff; border: 1.5px solid rgba(21,0,71,.2); color: rgba(21,0,71,.5);
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.wiz-dot svg { display: block; width: 13px; height: 13px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wiz-lbl { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: rgba(21,0,71,.45); }
/* connector between steps */
.wiz-step:not(:last-child)::after { content: ""; width: 26px; height: 2px; flex: none; border-radius: 2px; background: rgba(21,0,71,.14); margin: 0 10px; }
/* completed steps: solid navy dot with a check, navy connector + label */
.wiz-step.is-done .wiz-dot { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.wiz-step.is-done .wiz-lbl { color: var(--c-ink); }
.wiz-step.is-done::after { background: var(--c-ink); }
/* current step: karting-orange dot, navy label */
.wiz-step.is-current .wiz-dot { background: var(--c-karting); border-color: var(--c-karting); color: #fff; }
.wiz-step.is-current .wiz-lbl { color: var(--c-ink); }
/* confirmation strip: sits above the celebration, centred */
.conf-wiz { position: relative; z-index: 4; display: flex; justify-content: center; padding: 26px 20px 0; }
/* compact on small screens: dots + connectors only (labels drop out) */
@media (max-width: 620px) {
  .wiz-lbl { display: none; }
  .wiz-step:not(:last-child)::after { width: 18px; margin: 0 6px; }
  .wiz-dot { width: 24px; height: 24px; }
}

/* --- centred stage ------------------------------------------------------- */
.btf-stage { flex: 1; max-width: 820px; width: 100%; margin: 0 auto; padding: 40px 6vw 150px; }
.btf-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--c-karting); margin-block-end: 12px; }
.btf-h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 900; letter-spacing: -.03em; line-height: 1; margin: 0 0 12px; color: var(--c-ink); }
.btf-h1 .ac { color: var(--c-karting); }
.btf-sub { font-size: 15px; font-weight: 600; color: var(--c-mute); line-height: 1.5; max-width: 600px; margin-block-end: 30px; }
.btf-cardlbl { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-mute); margin: 28px 0 12px; }

/* --- line items (cart + read-only order rows) ---------------------------- */
.cart-line {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--c-line-l); border-radius: 16px;
  padding: 14px 18px; margin-block-end: 10px;
}
.cart-line .cm { flex: 1; min-width: 0; }
.cart-line .cn { font-size: 15px; font-weight: 900; letter-spacing: -.01em; color: var(--c-ink); }
.cart-line .cn .cv { color: var(--c-mute); font-weight: 700; }
.cart-line .cw { font-size: 12px; font-weight: 600; color: var(--c-mute); margin-block-start: 2px; }
.cart-line .ca { font-size: 15px; font-weight: 900; min-width: 70px; text-align: end; color: var(--c-ink); }
/* Mobile: five items in one row squeezed the details ("Snow Fun · Per person"
   wrapped a word per line). Keep the name + price + remove on row one and drop
   the quantity stepper to its own row so the details get full width. */
@media (max-width: 620px) {
  .cart-line { flex-wrap: wrap; gap: 10px 12px; padding: 14px 16px; }
  .cart-line .btf-shape { order: 1; }
  .cart-line .cm { order: 2; flex: 1 1 auto; }
  .cart-line .ca { order: 3; min-width: 0; }
  .cart-line .btf-premove { order: 4; }
  .cart-line .qty-ctl { order: 5; flex-basis: 100%; justify-content: flex-start; }
}

/* world blob thumbnail — activity clip in the world colour */
.btf-shape { width: 56px; height: 56px; display: inline-block; }
.btf-shape.sm { width: 30px; height: 30px; margin: 0; flex: none; }
.btf-shape.snow    { background: var(--c-snow); }
.btf-shape.sky     { background: var(--c-sky); }
.btf-shape.karting { background: var(--c-karting); }
.btf-shape.ice     { background: var(--c-ice); }
.btf-shape.outdoor { background: var(--c-outdoor); }

/* qty stepper — brand-shape (#briTri) +/- squares */
.qty-ctl { display: flex; align-items: center; gap: 12px; }
.qty-ctl button {
  width: 28px; height: 28px; clip-path: url(#briTri); border: none;
  background: var(--c-line-l); color: var(--c-ink);
  font-weight: 900; font-size: 14px; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.qty-ctl button:disabled { opacity: .4; cursor: not-allowed; }
.qty-ctl b { font-size: 16px; font-weight: 900; min-width: 20px; text-align: center; color: var(--c-ink); }
.btf-premove {
  width: 22px; height: 22px; clip-path: url(#briTri); border: none;
  background: var(--c-line-l); color: var(--c-ink); cursor: pointer;
  font-weight: 900; font-size: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.btf-premove:hover { background: var(--c-karting); color: #fff; }

/* --- "add another world" pill chips -------------------------------------- */
.btf-achips { display: flex; flex-wrap: wrap; gap: 8px; }
.btf-pchip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-paper); border: 1.5px solid var(--c-line-l); border-radius: 999px;
  padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 800;
  color: var(--c-ink); cursor: pointer; text-decoration: none;
  transition: border-color .2s var(--ease-spring), transform .2s var(--ease-spring);
}
.btf-pchip:hover { border-color: var(--c-ink); transform: translateY(-1px); }
.btf-pchip .btf-shape.sm { width: 18px; height: 18px; }

/* --- totals block -------------------------------------------------------- */
.btf-totals { background: #fff; border: 1px solid var(--c-line-l); border-radius: 18px; padding: 20px 22px; margin-block-start: 18px; }
.btf-trow { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 700; color: var(--c-ink); padding: 6px 0; }
.btf-trow.save { color: var(--c-outdoor); font-weight: 800; }
.btf-trow.big { font-size: 22px; font-weight: 900; letter-spacing: -.02em; border-block-start: 1px solid var(--c-line-l); margin-block-start: 8px; padding-block-start: 16px; }

/* --- promo affordance (visual only — not wired) -------------------------- */
.btf-promo {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px dashed rgba(21,0,71,.24); border-radius: 12px;
  padding: 13px 16px; font-size: 13px; font-weight: 700; color: var(--c-mute);
  margin-block-start: 12px; cursor: pointer;
}
.btf-promo svg { width: 16px; height: 16px; stroke: var(--c-mute); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* the [hidden] attribute must win over display:flex (UA rule is only display:none on plain elements) */
.btf-promo[hidden], .book-added[hidden] { display: none; }

/* quiet heads-up: checkout now requires an account (FIX 1) */
.cart-authhint { margin-block-start: 12px; font-size: 12px; font-weight: 600; color: var(--c-mute); text-align: center; }
.cart-authhint[hidden] { display: none; }

/* --- empty-cart note ----------------------------------------------------- */
.btf-note-empty { font-size: 15px; font-weight: 600; color: var(--c-mute); line-height: 1.5; padding: 8px 0 4px; }
.btf-emptycta { margin-block-start: 18px; }

/* --- sticky action bar (shared) ------------------------------------------ */
.btf-bar {
  position: sticky; bottom: 0; z-index: 20;
  background: #fff; border-block-start: 1px solid var(--c-line-l);
  padding: 16px 6vw; display: flex; align-items: center; gap: 18px; margin-block-start: auto;
}
.btf-bar-info { flex: 1; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--c-ink); }
.btf-bar-info .mut { color: var(--c-mute); font-weight: 600; }
.btf-bar-info .sv { color: var(--c-outdoor); font-weight: 800; }
.btf-cta {
  background: var(--c-ink); color: #fff; border: none;
  padding: 15px 26px; border-radius: 12px; font-family: inherit;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease-spring), background-color .25s var(--ease-spring), opacity .2s;
}
.btf-cta:hover:not(:disabled) { transform: translateY(-2px); background: var(--c-karting); }
.btf-cta:disabled { opacity: .35; cursor: not-allowed; }
.btf-cta svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- checkout: customer form + payment radios ---------------------------- */
.btf-field { margin-block-end: 4px; }
.btf-lbl { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-mute); margin: 16px 0 7px; }
.btf-lbl .opt { opacity: .6; font-weight: 600; text-transform: none; letter-spacing: 0; }
.btf-in {
  width: 100%; box-sizing: border-box; padding: 13px 14px;
  border: 1.5px solid var(--c-line-l); border-radius: 12px; font-family: inherit;
  font-size: 15px; font-weight: 700; color: var(--c-ink); background: #fff;
}
.btf-in:focus { outline: none; border-color: var(--c-ink); }
.btf-in::placeholder { color: var(--c-mute); font-weight: 600; }

.pay-opt2 {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1.5px solid var(--c-line-l); border-radius: 14px;
  padding: 15px 18px; margin-block-end: 8px; cursor: pointer; transition: border-color .2s;
}
.pay-opt2.on { border-color: var(--c-ink); }
.pay-opt2 .pn2 { font-size: 14px; font-weight: 900; color: var(--c-ink); }
.pay-opt2 .ps2 { font-size: 11px; font-weight: 600; color: var(--c-mute); margin-block-start: 1px; }
.pay-opt2 .pay-r { width: 22px; height: 22px; clip-path: url(#briTri); background: var(--c-line-l); flex: none; }
.pay-opt2.on .pay-r { background: var(--c-ink); }

.btf-note {
  background: #fff; border: 1px solid var(--c-line-l); border-inline-start: 4px solid var(--c-sky);
  border-radius: 0 14px 14px 0; padding: 16px 20px;
  font-size: 13.5px; font-weight: 600; color: var(--c-ink); line-height: 1.5; margin-block-start: 26px;
}
.btf-note b { font-weight: 900; }
[dir=rtl] .btf-note { border-radius: 14px 0 0 14px; }

.btf-error { color: var(--c-karting); font-weight: 800; font-size: 13px; margin-block-start: 14px; }

/* checkout: signed-in convenience — "sign in" link + saved-people picker */
.checkout-signin { margin-block-start: -18px; margin-block-end: 24px; }
.checkout-signin a { color: var(--c-karting); font-weight: 800; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.checkout-signin a:hover { color: var(--c-ink); }
.checkout-people { display: flex; flex-wrap: wrap; gap: 8px; }
.checkout-people-hint { font-size: 12px; font-weight: 600; color: var(--c-mute); margin-block-start: 8px; }

/* --- inline "added to cart" confirmation (inside the booking card) --------
   Prototype .book-added: a green-tint bar under the CTA with a "View cart" link
   + a navy "Keep exploring" pill. Revealed by public/app.js (toggles [hidden]). */
.book-added {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-block-start: 10px; padding: 12px 14px;
  /* success tint = the outdoor green at low strength over paper — palette-only
     (guardrail allows only navy colour-functions; color-mix keeps this clean) */
  background: color-mix(in srgb, var(--outdoor) 20%, #fff); border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--outdoor) 45%, #fff);
  font-size: 13px; font-weight: 800; color: var(--c-ink);
  animation: book-added-in .32s var(--ease-spring);
}
@keyframes book-added-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.book-added__msg { font-size: 13px; font-weight: 900; color: var(--c-ink); display: inline-flex; align-items: center; gap: 7px; }
/* green check badge before the message */
.book-added__msg::before {
  content: "✓"; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--outdoor); color: #fff; font-size: 12px; font-weight: 900;
}
/* the CTA itself flashes green "✓ Added to cart" for ~1.7s (app.js .is-added) */
.book-cta.is-added, .book-cta.is-added:hover { background: var(--outdoor); color: #fff; transform: none; }
/* header cart pill bumps when the count goes up */
.cart-pill.is-bumped { animation: cart-bump .45s var(--ease-spring); }
@keyframes cart-bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .book-added, .cart-pill.is-bumped { animation: none; }
}
.book-added__acts { display: flex; align-items: center; gap: 10px; }
.book-added .vc { color: var(--karting); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.book-added .go {
  background: var(--ink); color: #fff; border: none; border-radius: 999px;
  padding: 5px 12px; font-family: inherit; font-size: 12px; font-weight: 800;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.book-added .go:hover { background: var(--karting); }

/* ==========================================================================
   AUTH · ACCOUNT · FORGOT · RESET (v5 §8) — the .ath-* card + saved-crew
   controls, ported verbatim from docs/design/v5-prototype-target.md (which
   quotes the approved prototype). These pages reuse the .btf shell (top bar,
   centred stage) from above. Palette-only: navy ink, world colours, paper.
   ========================================================================== */

/* narrower stage for the single-column auth card (prototype max-width 560px) */
.btf-stage--auth { max-width: 620px; }
.btf-stage--account { max-width: 680px; }

/* the white auth card */
.ath-card {
  background: #fff; border: 1px solid var(--c-line-l); border-radius: 22px;
  padding: 32px 30px; box-shadow: 0 10px 30px -16px rgba(21,0,71,.18);
}
.ath-card--tight { padding: 22px 22px; border-radius: 18px; box-shadow: none; margin-block-end: 4px; }

/* SIGN IN / CREATE ACCOUNT segmented toggle */
.ath-tabs { display: flex; gap: 6px; background: var(--c-paper); border-radius: 999px; padding: 4px; margin-block-end: 22px; }
.ath-tab {
  flex: 1; text-align: center; padding: 10px; border-radius: 999px; border: none;
  background: none; font-family: inherit; font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; color: var(--c-mute);
  transition: background-color .2s, color .2s;
}
.ath-tab.on { background: var(--c-ink); color: #fff; }
.ath-tab:focus-visible { outline: 2px solid var(--c-karting); outline-offset: 2px; }

/* field label + input (identical to the prototype .ath-lbl / .ath-in) */
.ath-lbl { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-mute); margin: 16px 0 7px; }
.ath-lbl .opt { opacity: .6; font-weight: 600; text-transform: none; letter-spacing: 0; }
.ath-in {
  width: 100%; box-sizing: border-box; padding: 13px 14px;
  border: 1.5px solid var(--c-line-l); border-radius: 12px; font-family: inherit;
  font-size: 15px; font-weight: 700; color: var(--c-ink); background: #fff;
}
.ath-in:focus { outline: none; border-color: var(--c-ink); }
.ath-in::placeholder { color: var(--c-mute); font-weight: 600; }
.ath-in[readonly] { color: var(--c-mute); background: var(--c-paper); cursor: default; }

/* phone control: country-code <select> + national <input>, matching .btf-in /
   .ath-in. The select sits at the inline-start; in RTL it flips to the right
   automatically (inline-* + flex order). The national input is always LTR so
   digits read left-to-right regardless of page direction. Palette-only. */
.phone-field { display: flex; width: 100%; gap: 8px; align-items: stretch; }
.phone-field .phone-cc-select {
  /* compact, fixed-basis selector: the flag + dial code always fit; a long
     country name truncates cleanly (ellipsis) instead of clipping/overflowing. */
  flex: 0 0 148px; min-width: 0; max-width: 148px; box-sizing: border-box;
  padding: 13px 10px; border: 1.5px solid var(--c-line-l); border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--c-ink);
  background: #fff; cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.phone-field .phone-cc-select:focus { outline: none; border-color: var(--c-ink); }
.phone-field .phone-national { flex: 1 1 auto; min-width: 0; margin: 0; text-align: start; }

/* password field + eye toggle */
.ath-pw { position: relative; }
.ath-pw .ath-in { padding-inline-end: 46px; }
.ath-eye {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ath-eye svg { width: 18px; height: 18px; stroke: var(--c-mute); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ath-eye.on svg { stroke: var(--c-ink); }
.ath-eye:focus-visible { outline: 2px solid var(--c-karting); outline-offset: 2px; border-radius: 8px; }

/* "Forgot password?" link row (right-aligned) */
.ath-forgotrow { text-align: end; margin-block-start: 10px; }
.ath-forgotrow[hidden] { display: none; }

/* orange underlined link — also used as a button inside the note copy */
.ath-link {
  color: var(--c-karting); font-weight: 800; font-size: 12px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  background: none; border: none; padding: 0; font-family: inherit;
}
.ath-link:hover { color: var(--c-ink); }
.ath-link:focus-visible { outline: 2px solid var(--c-karting); outline-offset: 2px; border-radius: 3px; }

.ath-note { font-size: 12px; font-weight: 600; color: var(--c-mute); margin-block-start: 12px; line-height: 1.5; }
.ath-note[hidden] { display: none; }
.ath-ok { color: var(--c-outdoor); font-weight: 800; }

/* forgot/reset success state (green tick) */
.fg-sent { text-align: center; }
.fg-sent[hidden] { display: none; }
/* success tick — solid outdoor swatch + white check (the brand guardrail
   permits only navy translucency, so the prototype's faint-green tint is
   replaced by the same solid-green treatment the confirmation mark uses) */
.fg-ok {
  width: 58px; height: 58px; border-radius: 16px; background: var(--c-outdoor);
  display: flex; align-items: center; justify-content: center; margin: 6px auto 0;
}
.fg-ok svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fg-sent-msg { font-size: 14px; font-weight: 600; color: var(--c-mute); line-height: 1.5; margin-block-start: 14px; }
.fg-done-title { font-size: 19px; font-weight: 900; color: var(--c-ink); margin-block-start: 14px; }

/* ---- account page: profile card + saved crew ---------------------------- */
.btf-page-acct-user {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--c-line-l); border-radius: 16px;
  padding: 16px 18px; margin-block-end: 24px;
}
.btf-page-acct-user .acct-id { flex: 1; min-width: 0; }
.acct-name { font-weight: 900; font-size: 16px; color: var(--c-ink); }
.acct-email, .acct-phone { font-size: 12px; font-weight: 600; color: var(--c-mute); margin-block-start: 1px; }

/* avatar swatch (brand-shape #briTri, world-coloured) */
.btf-pav {
  width: 30px; height: 30px; clip-path: url(#briTri);
  background: var(--c-ink); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; flex: none;
}
.btf-pav.c1 { background: var(--c-karting); color: #fff; }
.btf-pav.c2 { background: var(--c-snow); color: var(--c-ink); }
.btf-pav.c3 { background: var(--c-sky); color: var(--c-ink); }
.btf-pav.c4 { background: var(--c-outdoor); color: var(--c-ink); }
.btf-pav.c5 { background: var(--c-ice); color: var(--c-ink); }

/* saved-crew rows */
.crew-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--c-line-l); border-radius: 14px;
  padding: 12px 14px; margin-block-end: 8px; flex-wrap: wrap;
}
.crew-name { flex: 1; min-width: 80px; font-weight: 900; font-size: 15px; color: var(--c-ink); }
.crew-age { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--c-mute); text-transform: uppercase; }
.crew-acts { display: flex; align-items: center; gap: 8px; }
.crew-btn {
  border: none; background: none; font-family: inherit; cursor: pointer;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-mute); padding: 4px 6px; border-radius: 8px;
}
.crew-btn:hover { color: var(--c-ink); }
.crew-btn--danger:hover { color: var(--c-karting); }
.crew-btn--save { color: var(--c-outdoor); }
.crew-btn:focus-visible { outline: 2px solid var(--c-karting); outline-offset: 2px; }
.crew-row.editing .crew-name,
.crew-row.editing .crew-age,
.crew-row.editing .crew-acts { display: none; }
.crew-editform { display: flex; flex: 1; align-items: center; gap: 8px; flex-wrap: wrap; }
.crew-editform .ath-in { margin: 0; }
.crew-editform .age { max-width: 90px; }
.crew-empty { font-size: 13px; font-weight: 600; color: var(--c-mute); padding: 4px 2px 10px; }

/* add-crew form */
.crew-addform { display: flex; gap: 8px; margin-block-start: 12px; }
.crew-addform .ath-in { margin: 0; }
.crew-addform .age { max-width: 90px; }

/* ==========================================================================
   CONFIRMATION / INVOICE (v5 §11) — ships LIGHT (paper bg, navy title,
   orange accent), the light override the prototype forces over its dark base.
   ========================================================================== */

/* the celebration page is the positioning context for the confetti layer */
.conf-page { position: relative; overflow: hidden; }
/* Confetti canvas — an animated particle burst (public/confetti.js), a verbatim
   port of the v5 prototype: rectangular brand-colour pieces burst UP off the
   tick and rain down under gravity. Fixed over the viewport so it plays over the
   visible celebration; decorative + click-through. Under reduce-motion the
   script paints one settled frame (no animation) so it's still present. */
.conf-confetti { position: fixed; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; z-index: 40; }

.conf-inner { position: relative; z-index: 4; max-width: 980px; margin: 0 auto; padding: 70px 40px 60px; text-align: center; }
.conf-mark {
  width: 84px; height: 84px; margin: 0 auto 20px; clip-path: url(#briTri);
  background: var(--c-outdoor); display: flex; align-items: center; justify-content: center;
  /* subtle pop-in as the celebration lands (suppressed under reduced motion) */
  animation: confMarkPop .5s cubic-bezier(.2,1.3,.45,1) both;
}
@keyframes confMarkPop {
  0%   { opacity: 0; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .conf-mark { animation: none; }
}
.conf-mark svg { width: 42px; height: 42px; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.conf-pre { font-size: 11px; color: var(--c-mute); letter-spacing: 3px; text-transform: uppercase; font-weight: 700; margin-block-end: 18px; }
.conf-title { font-size: clamp(44px, 8vw, 110px); font-weight: 900; letter-spacing: -.05em; line-height: .88; margin-block-end: 28px; color: var(--c-ink); }
.conf-title .ac { color: var(--c-karting); display: inline-block; transform: rotate(-4deg); }

/* "IT BEGINS IN" anticipation countdown (light-mode, per the prototype) */
.anti-countdown { margin: 24px auto 0; max-width: 480px; background: #fff; border: 1px solid var(--c-line-l); border-radius: 18px; padding: 18px 22px; text-align: center; }
.anti-lbl { font-size: 10px; color: var(--c-mute); letter-spacing: 2.5px; text-transform: uppercase; font-weight: 800; margin-block-end: 12px; }
.anti-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* the display:grid above beats the [hidden] attribute's UA display:none, so the
   empty "--" grid lingered next to "Enjoy your adventure!" once a booking had
   started — restore hiding when the countdown finishes. */
.anti-grid[hidden] { display: none; }
.anti-cell { background: var(--c-paper); border-radius: 10px; padding: 10px 4px; text-align: center; }
.anti-num { font-size: 26px; font-weight: 900; letter-spacing: -.03em; color: var(--c-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.anti-cell .lbl-sm { font-size: 9px; color: var(--c-mute); letter-spacing: 1px; text-transform: uppercase; font-weight: 700; margin-block-start: 4px; }
.anti-done { font-size: 18px; font-weight: 900; letter-spacing: -.02em; color: var(--c-outdoor); padding: 4px 0; }

.conf-grid { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; max-width: 700px; margin: 50px auto 0; text-align: start; }
/* Fixed QR square — top-aligned so it no longer stretches to the (taller)
   invoice's height. Crisp pixel edges for reliable scanning. */
.conf-qr { width: 256px; height: 256px; background: #fff; border: 1px solid var(--c-line-l); border-radius: 20px; padding: 18px; flex-shrink: 0; display: flex; }
.conf-qr img { width: 100%; height: 100%; display: block; object-fit: contain; }
.conf-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.conf-qr-count { margin: 4px 0 0; font-weight: 800; font-size: 15px; color: var(--ink); }
.conf-qr-hint { margin: 0; font-size: 13px; font-weight: 600; color: rgba(21,0,71,.65); max-width: 260px; text-align: center; }
.conf-qr--note { height: auto; min-height: 140px; align-items: center; justify-content: center; }
.conf-pdfnote { margin: 0; font-weight: 600; font-size: 14px; line-height: 1.65; color: rgba(21,0,71,.78); text-align: center; }
.conf-details { background: #fff; border: 1px solid var(--c-line-l); border-radius: 20px; padding: 24px 24px 28px; min-height: 240px; display: flex; flex-direction: column; color: var(--c-ink); }
.conf-ref { font-size: 10px; color: var(--c-mute); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-block-end: 4px; }
.conf-ref-v { font-size: 18px; font-weight: 900; letter-spacing: -.02em; margin-block-end: 16px; color: var(--c-ink); }

.inv-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; font-weight: 700; color: rgba(21,0,71,.55); margin: -6px 0 12px; flex-wrap: wrap; }
.inv-th, .inv-tr { display: grid; grid-template-columns: 1fr 34px 52px 66px; gap: 10px; align-items: baseline; }
.inv-th { font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(21,0,71,.45); padding: 6px 0; border-block-end: 1px solid rgba(21,0,71,.14); }
.inv-tr { font-size: 12px; font-weight: 700; color: var(--c-ink); padding: 8px 0; border-block-end: 1px solid rgba(21,0,71,.08); }
.inv-th span:nth-child(n+2), .inv-tr span:nth-child(n+2) { text-align: end; }
.inv-tr .sub { display: block; font-size: 9.5px; font-weight: 600; color: rgba(21,0,71,.5); margin-block-start: 1px; }
.inv-tots { margin-block-start: 12px; }
.inv-trow { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: rgba(21,0,71,.75); padding: 4px 0; }
.inv-trow.sv { color: var(--c-outdoor); font-weight: 800; }
.conf-total { margin-block-start: auto; padding-block-start: 16px; border-block-start: 1px solid var(--c-line-l); display: flex; justify-content: space-between; align-items: baseline; }
.conf-total .l { font-size: 13px; font-weight: 700; color: var(--c-mute); }
.conf-total .v { font-size: 34px; font-weight: 900; letter-spacing: -.03em; color: var(--c-ink); }
.inv-foot { font-size: 9px; font-weight: 600; color: rgba(21,0,71,.45); line-height: 1.5; margin-block-start: 14px; padding-block-start: 10px; border-block-start: 1px solid var(--c-line-l); }

.conf-actions { display: flex; gap: 10px; justify-content: center; margin-block-start: 36px; flex-wrap: wrap; }
.conf-btn { padding: 14px 22px; border-radius: 999px; font-family: inherit; font-size: 12px; font-weight: 800; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: .5px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: transform .3s var(--ease-spring); }
.conf-btn:hover { transform: translateY(-2px); }
.conf-btn.primary { background: var(--c-ink); color: #fff; }
.conf-btn.ghost { background: transparent; color: var(--c-ink); border: 1px solid rgba(21,0,71,.22); }
.conf-btn-ico { width: 16px; height: 16px; flex: none; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
  .btf-stage { padding: 26px 20px 150px; }
  .btf-h1 { font-size: 30px; }
  .btf-brand { display: none; }
  .btf-bar { flex-wrap: wrap; }
  .btf-bar .btf-cta { width: 100%; }
  .conf-inner { padding: 48px 20px 40px; }
  .anti-countdown { padding: 14px 16px; }
  .anti-num { font-size: 22px; }
  .conf-grid { grid-template-columns: 1fr; }
  .conf-qr { max-width: 260px; margin: 0 auto; }
  .conf-actions { flex-direction: column; }
  .conf-actions .conf-btn { width: 100%; justify-content: center; }
  .book-added__inner { flex-direction: column; align-items: stretch; }
  .book-added__acts { justify-content: space-between; }

  /* auth: the brand indicator on the top-right stays visible on mobile (the
     auth top bar carries nothing else); re-show it after the shared rule hid
     it — scoped to .btf-top--auth so cart/checkout mobile is unaffected */
  .btf-top--auth .btf-brand { display: block; }
  .ath-card { padding: 24px 20px; }
  .crew-addform { flex-wrap: wrap; }
  .crew-addform .ath-in { flex: 1; min-width: 120px; }
}

/* ==========================================================================
   PRIVATE BOOKINGS — ported verbatim from the v5 prototype's PRIVATE page
   (tas-design-web-v5.html §PRIVATE). Flat brand colour only. The page reuses
   the shared solid header/footer, so the prototype's per-page nav-bar
   overrides are dropped — only the content sections live here. The one white
   translucency in the band copy is reproduced as solid white at reduced
   opacity to stay palette-clean.
   ========================================================================== */

.page-private { background: var(--c-paper); }

/* small floating brand-shape decorations behind the hero copy */
.priv-hero .fx-deco { position: absolute; z-index: 0; pointer-events: none; }
.priv-hero > * { position: relative; z-index: 1; }

.priv-hero {
  position: relative;
  padding: 62px 6vw 36px;
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
}
.priv-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin-bottom: 18px;
}
.priv-kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--c-karting);
  border-radius: 3px 3px 3px 7px;
  transform: rotate(45deg);
  display: block;
}
.priv-hero h1 {
  font-size: clamp(34px, 5.2vw, 60px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.02;
  color: var(--c-ink);
  margin: 0 0 18px;
}
.priv-hero h1 .accent { color: var(--c-karting); }
.priv-hero .lede {
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 600;
  color: var(--c-mute);
  max-width: 600px;
  line-height: 1.55;
  margin: 0 0 26px;
}

.wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--c-outdoor);
  color: var(--c-ink);
  font-weight: 800;
  font-size: 16px;
  padding: 15px 24px;
  border-radius: 14px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.wa-btn svg { width: 22px; height: 22px; fill: currentColor; display: block; }
/* Coming-soon state: private bookings aren't open yet (WhatsApp number pending),
   so the CTA is a non-interactive pill in the site's coming-soon language
   (soft navy tint) rather than the live green action button. */
.wa-btn.is-soon { background: rgba(21,0,71,.08); color: var(--c-ink); cursor: default; }
.wa-btn.is-soon:hover { transform: none; }
.wa-note { font-size: 13px; font-weight: 600; color: var(--c-mute); margin-top: 12px; }

.priv-sec {
  padding: 24px 6vw 28px;
  max-width: 1180px;
  margin: 0 auto;
}
.priv-sec > h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 900;
  letter-spacing: -.025em;
  color: var(--c-ink);
  margin: 0 0 6px;
}
.priv-sec > h2 .accent { color: var(--c-karting); }
.priv-sec > .sub {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-mute);
  margin: 0 0 22px;
  max-width: 560px;
  line-height: 1.5;
}

.priv-for {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.priv-card {
  background: #fff;
  border: 1px solid var(--c-line-l);
  border-radius: 18px;
  padding: 24px;
}
.priv-card .tag { width: 46px; height: 46px; display: block; margin-bottom: 16px; }
.priv-card h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--c-ink);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.priv-card p {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--c-mute);
  line-height: 1.5;
  margin: 0;
  overflow-wrap: break-word;
}

.priv-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.priv-step {
  background: #fff;
  border: 1px solid var(--c-line-l);
  border-radius: 18px;
  padding: 24px;
}
.priv-step .n {
  font-size: 13px;
  font-weight: 800;
  color: var(--c-karting);
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.priv-step h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--c-ink);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.priv-step p { font-size: 14px; color: var(--c-mute); line-height: 1.5; margin: 0; }

.priv-worlds { display: flex; flex-wrap: wrap; gap: 26px; }
.pw { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 118px; }
.pw-shape { width: 74px; height: 74px; display: block; }
.pw span:last-child {
  font-size: 14px;
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -.01em;
}

.priv-band {
  background: var(--c-ink);
  color: #fff;
  border-radius: 26px;
  margin: 14px 6vw 54px;
  padding: 52px 7%;
  text-align: center;
}
.priv-band h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0 0 14px;
}
.priv-band h2 span { color: var(--c-sky); }
/* the prototype's band copy uses translucent white; reproduced palette-clean
   as solid white at reduced opacity (guardrail permits #fff, forbids non-navy
   colour functions). */
.priv-band p {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  opacity: .72;
  max-width: 480px;
  margin: 0 auto 26px;
  line-height: 1.5;
}
.priv-band .wa-btn { opacity: 1; }

@media (max-width: 640px) {
  .priv-hero { padding: 40px 22px 30px; }
  .priv-hero h1 { font-size: 32px; }
  .priv-band { margin: 14px 18px 40px; padding: 38px 24px; }
}

/* ---- announcement popup (admin-managed, home only) ---------------------- */
.ann {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: rgba(21,0,71,.55);
}
.ann[hidden] { display: none; }
.ann-card {
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: 42px 34px 36px;
  max-width: 480px; width: 100%;
  text-align: center;
  box-shadow: 0 30px 80px -30px rgba(21,0,71,.6);
}
.ann-logo { width: 62px; height: 62px; margin: 0 auto 16px; display: block; color: var(--ink); }
.ann-title { font-size: 26px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); margin: 0 0 10px; }
.ann-body { font-size: 13.5px; line-height: 1.7; color: var(--ink); margin: 0; white-space: pre-line; }
/* soft-opening notice on checkout (client 2026-07-14) — the letterhead card:
   brand logo top-centre, numbered points, full-width agree CTA, and the five
   world shapes cropped along the bottom edge. Mobile: the card caps at 88vh
   and the points scroll inside it, so the button is always reachable. */
.conot-card {
  max-width: 560px; max-height: 88vh;
  padding: 30px 32px 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.conot-logo { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 14px; flex: none; }
.conot-logo img { height: 46px; width: auto; }
.conot-badge { width: 40px; height: 40px; color: var(--ink); flex: none; }
/* the EN wordmark mirrors the LOGO LOCK construction (Manrope 800, tight) */
.conot-word { font-family: Manrope, sans-serif; font-weight: 800; font-size: 15px; line-height: .92; letter-spacing: .02em; color: var(--ink); text-align: start; }
.conot-card .ann-title { font-size: clamp(20px, 4vw, 24px); flex: none; }
.conot-scroll { overflow-y: auto; min-height: 0; }
.conot-list { text-align: start; margin: 14px 0 4px; padding-inline-start: 22px; display: grid; gap: 12px; font-size: 13.5px; line-height: 1.75; font-weight: 600; color: var(--ink); }
.conot-list li::marker { font-weight: 900; color: var(--karting); }
.conot-cta { width: 100%; justify-content: center; margin-block-start: 18px; flex: none; }
/* the five world shapes peeking up from the card's bottom edge, per artwork:
   teal · orange · green · ice · yellow, bottoms cropped by overflow:hidden */
.conot-blobs { flex: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 3%; margin: 14px -10px 0; }
.conot-blobs span { width: 17.5%; aspect-ratio: 1; transform: translateY(38%); }
.conot-blobs .snow    { clip-path: url(#shp-snow);    background: var(--snow); }
.conot-blobs .karting { clip-path: url(#shp-karting); background: var(--karting); }
.conot-blobs .outdoor { clip-path: url(#shp-outdoor); background: var(--outdoor); }
.conot-blobs .ice     { clip-path: url(#shp-ice);     background: var(--ice); }
.conot-blobs .sky     { clip-path: url(#shp-sky);     background: var(--sky); }
@media (max-width: 540px) {
  .conot-card { padding: 24px 20px 0; }
  .conot-logo img { height: 38px; }
  .conot-list { font-size: 12.5px; line-height: 1.7; gap: 10px; }
}

/* v2 popup — wider landscape card, two-line headline + two mascot groups */
.ann-card--v2 { max-width: 720px; padding: 38px 40px 32px; }
.ann-card--v2 .ann-title { font-size: clamp(21px, 4.4vw, 28px); line-height: 1.16; margin-bottom: 4px; }
.ann-title .ann-t-a, .ann-title .ann-t-b { display: block; }
.ann-t-a { color: var(--karting); }
.ann-t-b { color: var(--ink); }
.ann-groups { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(16px, 4vw, 40px); margin-top: 24px; }
.ann-group { text-align: center; }
.ann-mascots { display: block; height: clamp(94px, 15vw, 116px); width: auto; max-width: 100%; margin: 0 auto 12px; }
.ann-g-worlds { font-size: 12.5px; line-height: 1.45; font-weight: 600; color: rgba(21,0,71,.72); max-width: 235px; margin: 0 auto; }
.ann-g-status { font-size: 15px; font-weight: 800; color: var(--ink); margin-top: 5px; }
.ann-x {
  position: absolute; top: 14px; inset-inline-end: 14px;
  width: 36px; height: 36px;
  border: 1px solid rgba(21,0,71,.14); border-radius: 50%;
  background: #fff; color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.ann-x:hover { background: var(--paper); }

/* ---- waiver page (participants & consent) -------------------------------- */
.wv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 22px; }
.wv-act { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(21,0,71,.12); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--ink); }
.wv-act.sm { padding: 5px 11px; font-size: 12px; }
.wv-none { color: rgba(21,0,71,.5); font-size: 14px; margin: 0 0 8px; }
.wv-card { background: #fff; border: 1px solid rgba(21,0,71,.1); border-radius: 16px; padding: 18px 20px; margin-block-end: 14px; }
.wv-card.ok { border-color: var(--outdoor); }
.wv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wv-name { font-weight: 900; font-size: 17px; color: var(--ink); }
.wv-badge { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgba(21,0,71,.5); border: 1px solid rgba(21,0,71,.14); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.wv-badge.ok { color: #fff; background: var(--outdoor); border-color: var(--outdoor); }
.wv-card-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 10px 4px; }
.wv-text { font-size: 13px; line-height: 1.65; color: rgba(21,0,71,.7); background: var(--paper); border: 1px solid rgba(21,0,71,.08); border-radius: 12px; padding: 14px 16px; margin: 10px 0 12px; }
.wv-signed { font-size: 13px; font-weight: 700; color: var(--ink); margin: 8px 0 0; }
.wv-lbl { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(21,0,71,.5); margin: 12px 0 6px; }
.wv-accept { margin-block-start: 12px; }
.wv-remove { background: none; border: none; font: inherit; font-size: 12.5px; font-weight: 700; color: rgba(21,0,71,.45); cursor: pointer; padding: 8px 0 0; text-decoration: underline; }
.wv-add { background: #fff; border: 1px solid rgba(21,0,71,.1); border-radius: 16px; padding: 18px 20px 20px; margin-block-end: 40px; }
.wv-choices { display: grid; gap: 8px; margin-block-end: 14px; }
.wv-choice { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.wv-choice input { width: 18px; height: 18px; accent-color: var(--ink); }
.wv-choice .dot { width: 10px; height: 10px; flex-shrink: 0; }

/* ---- checkout pre-payment waiver (Who's coming? + accept per guest) ------ */
.wv2-lblrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wv2-count { font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: none; color: var(--karting); }
.wv2-count.ok { color: var(--outdoor); }
.wv2-sub { font-size: 13px; font-weight: 600; color: rgba(21,0,71,.6); margin: -4px 0 14px; }
.wv2-arnote { font-size: 12px; font-weight: 700; color: rgba(21,0,71,.5); margin: -8px 0 14px; }
.wv2-nudge { margin: 0 0 12px; }
.wv2-adult { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid rgba(21,0,71,.12); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.55; cursor: pointer; }
.wv2-adult input { width: 18px; height: 18px; margin-block-start: 2px; flex-shrink: 0; accent-color: var(--ink); }
.wv-adult { margin-block: 12px 2px; align-items: flex-start; font-size: 13px; line-height: 1.55; }
.wv-adult input { margin-block-start: 2px; }
.wv2-sessions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 12px; }
.wv2-sess { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid rgba(21,0,71,.12); border-radius: 999px; padding: 7px 12px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.wv2-sess.ok { border-color: var(--outdoor); }
.wv2-sess.need { border-color: var(--karting); border-width: 2px; padding: 6px 11px; }
.wv2-sess .dot { width: 10px; height: 10px; flex-shrink: 0; }
.wv2-sess-n { font-weight: 900; color: var(--karting); }
.wv2-sess.ok .wv2-sess-n { color: var(--outdoor); }
.wv2-crew { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 10px; }
.wv2-crew-l { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(21,0,71,.45); }
.wv2-add { display: flex; gap: 8px; margin-block-end: 12px; }
.wv2-add-in { flex: 1; margin: 0; }
.wv2-add-btn { border: none; cursor: pointer; background: var(--ink); color: #fff; font: inherit; font-size: 13px; font-weight: 800; border-radius: 12px; padding: 0 18px; white-space: nowrap; }
.wv2-full { font-size: 13px; font-weight: 800; color: var(--outdoor); margin-block-end: 12px; }
.wv2-guest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #fff; border: 1px solid rgba(21,0,71,.1); border-radius: 12px; padding: 10px 14px; margin-block-end: 8px; }
.wv2-guest-n { font-weight: 800; font-size: 14px; color: var(--ink); }
.wv2-guest-tg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wv2-tgl { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(21,0,71,.16); background: #fff; color: rgba(21,0,71,.45); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.wv2-tgl.on { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.wv2-tgl .dot { width: 8px; height: 8px; flex-shrink: 0; }
.wv2-x { margin-inline-start: auto; border: none; background: none; color: rgba(21,0,71,.4); font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; padding: 2px 6px; }
.wv2-x:hover { color: var(--karting); }
.wv2-card { background: #fff; border: 1px solid rgba(21,0,71,.1); border-radius: 16px; padding: 14px 16px; margin-block-end: 10px; }
.wv2-card.ok { border-color: var(--outdoor); }
.wv2-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wv2-card-t { font-weight: 900; font-size: 14.5px; color: var(--ink); }
.wv2-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--outdoor); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.wv2-reread { margin-inline-start: auto; background: none; border: none; font: inherit; font-size: 12px; font-weight: 700; color: rgba(21,0,71,.5); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.wv2-reader { max-height: 250px; overflow-y: auto; background: var(--paper); border: 1px solid rgba(21,0,71,.1); border-radius: 12px; padding: 14px 16px; margin-block-start: 10px; text-align: left; }
.wv2-doctitle { font-size: 12px; font-weight: 900; letter-spacing: .04em; color: var(--ink); margin: 0 0 8px; }
.wv2-bt { font-size: 11.5px; font-weight: 900; letter-spacing: .08em; color: var(--karting); margin: 14px 0 1px; }
.wv2-bs { font-size: 10.5px; font-weight: 700; color: rgba(21,0,71,.5); margin: 0 0 6px; }
.wv2-h { font-size: 11px; font-weight: 800; color: var(--ink); margin: 10px 0 3px; }
.wv2-p { font-size: 11.5px; line-height: 1.6; color: rgba(21,0,71,.72); margin: 0 0 5px; }
.wv2-li { font-size: 11.5px; line-height: 1.55; color: rgba(21,0,71,.72); margin: 0 0 3px; padding-inline-start: 12px; }
.wv2-accept { display: block; width: 100%; margin-block-start: 12px; border: none; cursor: pointer; background: var(--ink); color: #fff; font: inherit; font-size: 13.5px; font-weight: 800; border-radius: 999px; padding: 13px 20px; }
.wv2-accept:hover { background: var(--karting); }


/* ---- staff-only bar on scanned tickets ---------------------------------- */
.staff-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--ink); color: #fff; padding: 12px 20px; }
.staff-bar-tag { font-size: 10px; font-weight: 900; letter-spacing: .16em; background: #F4580E; border-radius: 6px; padding: 4px 8px; }
.staff-bar-link { color: #fff; font-size: 13.5px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }


/* ==========================================================================
   LOGO LOCK — never change (guidelines §2 + LOGO LOCK addendum 2026-06-29).
   Wordmark: Manrope ExtraBold 800, SOLID navy (or solid white on dark),
   line-height .87, tight tracking. The lockup never mirrors in RTL and the
   wordmark never leaves Manrope — .brand-logo-lockup .bll-en outweighs the
   [dir=rtl] font swap above by specificity.
   ========================================================================== */

.brand-logo-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  direction: ltr;
}

.bll-badge { width: 34px; height: 34px; flex-shrink: 0; display: block; }

.bll-text { display: flex; flex-direction: column; justify-content: center; gap: 1px; }

.brand-logo-lockup .bll-en {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: .87;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: inherit;
  opacity: 1;
  margin: 0;
}

/* Arabic lockup — the APPROVED official Arabic logo artwork (two-line kashida
   wordmark الشهيد / أدفنتشرز + symbol, brand guidelines p.4-5), served as an
   image so it matches the artwork exactly (it cannot be reproduced with live
   text). Positive (navy) on light headers, negative (white) over the hero KV
   and in the footer — the correct variant is chosen server-side per context. */
.brand-logo-lockup .bll-logo-ar { height: 40px; width: auto; display: block; }

/* Issue: the base .brand-logo-lockup forces direction:ltr (so the EN two-line
   wordmark reads L→R). On an RTL page that makes `margin-inline-end:auto`
   resolve as margin-RIGHT, floating the logo off the start edge and cramping
   the nav. The AR lockup is a single image, so let it inherit the page's RTL
   direction — the auto margin then correctly pins it to the right edge. */
.brand-logo-lockup--ar { direction: rtl; }

/* --- account: header brand mark + booking / order history (palette-safe) --- */
.btf-brand--acct { display: inline-flex; align-items: center; gap: 8px; }
.btf-brand--acct .btf-mark { width: 20px; height: 20px; color: var(--c-ink); flex-shrink: 0; }
.btf-brand--acct span { color: var(--c-ink); }

.acct-hist, .acct-orders { display: flex; flex-direction: column; gap: 8px; }
.acct-hist-h { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-mute); margin: 8px 2px 2px; }

.acct-bk, .acct-order { border: 1px solid rgba(21,0,71,.09); background: #fff; text-decoration: none; color: var(--c-ink); border-radius: 14px; transition: border-color .15s ease, transform .15s ease; }
.acct-bk:hover, .acct-order:hover { border-color: rgba(21,0,71,.24); transform: translateY(-1px); }
.acct-bk { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.acct-bk.is-past { opacity: .7; }
.acct-bk-dot { flex-shrink: 0; }
.acct-bk-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.acct-bk-world { font-size: 14.5px; font-weight: 800; }
.acct-bk-when { font-size: 12px; color: var(--c-mute); }
.acct-bk-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; text-align: end; }
.acct-bk-badge { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.acct-bk-badge.s-paid { background: var(--c-outdoor); color: var(--c-ink); }
.acct-bk-badge.s-checked_in { background: var(--c-ink); color: #fff; }
.acct-bk-badge.s-pending { background: var(--c-sky); color: var(--c-ink); }
.acct-bk-view { font-size: 11.5px; font-weight: 700; color: var(--c-karting); }

.acct-order { display: flex; flex-direction: column; gap: 8px; padding: 15px 16px; }
.acct-order-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.acct-order-ref { font-size: 12.5px; font-weight: 800; font-family: ui-monospace, Menlo, monospace; }
.acct-order-total { font-size: 20px; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; }
.acct-order-total .u { font-size: 12px; font-weight: 700; color: var(--c-mute); }
.acct-order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; }
.acct-order-pay { font-weight: 800; }
.acct-order-pay.wait { color: var(--c-karting); }
.acct-order-on, .acct-order-save { color: var(--c-mute); }
.acct-order-view { margin-inline-start: auto; font-weight: 700; color: var(--c-karting); }


/* RTL: the marquee keyframe translates toward -X (leftwards); in RTL the
   track row is laid out from the right, so the same direction empties the
   strip for most of each loop with a visible snap-back. Reverse it. */
[dir=rtl] .marquee-track { animation-direction: reverse; }

/* ---- not-completed (unpaid) ticket page + account badge ------------------ */
.chip.st-unpaid { background: var(--karting); color: #fff; }
.unpaid-note { max-width: 640px; color: rgba(21,0,71,.78); margin: 10px 0 0; }
.unpaid-facts { max-width: 480px; margin-top: 26px; }
.unpaid-cta { margin-top: 20px; }
.acct-order-pay.no { color: rgba(21,0,71,.55); }

.pass-staff { margin-top: 10px; font-size: 12.5px; }
.pass-staff-link { color: rgba(21,0,71,.55); font-weight: 700; text-decoration: underline; }

/* ---- accepted payment marks (one-button checkout, 2026-07-21) ----------- */
.pay-icons { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.pay-icons img { height: 30px; width: auto; background: #fff; border: 1px solid rgba(21,0,71,.12); border-radius: 10px; padding: 5px 10px; box-sizing: content-box; }

/* LOGO LOCK — negative lockup on navy: WHITE symbol body (currentColor; the
   five teardrops keep their fixed colours) + SOLID white wordmark.
   ⚠ These rules must stay LAST in this file. The prototype footer lockup was
   silently re-tinted navy-on-navy TWICE by later, more specific rules. If the
   footer ever shows only floating teardrops, this cascade broke again. */

.site-foot .brand-logo-lockup { color: #fff; gap: 14px; }
.site-foot .bll-badge { width: 46px; height: 46px; }

/* Arabic logo in the negative (navy) footer — the white (negative) artwork,
   scaled up to match the larger footer badge. Kept ABOVE the .bll-en override
   so that rule remains the last in the file (see the LOGO LOCK warning above). */
.site-foot .brand-logo-lockup .bll-logo-ar { height: 52px; }

.site-foot .brand-logo-lockup .bll-en {
  color: #fff;
  opacity: 1;
  line-height: .87;
  margin: 0;
  font-size: 24px;
}