/* Speed In Motion PRO — website module (the MAIN customer site).
   Evolved from the approved sitev2 design (your-centre.be rebuild). The brand colour is a
   variable set at runtime from Admin → Website; --orange stays as an alias so nothing breaks. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0a0a0c; --panel: #131316; --panel2: #1a1a1f;
  --border: rgba(255, 255, 255, 0.09);
  --text: #f2f0ec; --muted: #9a958c;
  --brand: #ff6b1a; --orange: var(--brand); --brand-soft: rgba(255, 107, 26, 0.14);
  --green: #38b24a; --red: #e5352b;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 16px; min-height: 100vh; display: flex; flex-direction: column; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
a { color: var(--brand); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* nav */
.nav {
  display: flex; align-items: center; gap: 26px; padding: 14px 28px;
  background: rgba(10, 10, 12, 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30;
}
.nav .logo img { height: 40px; display: block; }
.nav nav { display: flex; gap: 20px; flex: 1; flex-wrap: wrap; }
.nav nav a { color: var(--muted); font-size: 14.5px; font-weight: 600; }
.nav nav a:hover, .nav nav a.active { color: var(--text); }
.nav .lang { display: flex; gap: 8px; font-size: 12.5px; color: var(--muted); }
.nav .lang a { color: var(--muted); text-transform: uppercase; }
.nav .lang a.on { color: var(--text); font-weight: 800; }
.me-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: 1px; }
/* Phones: logo + Book now on the first row, the links on their own row underneath. Without this
   the menu and the CTA fight for one line and push the whole page sideways (2026-08-07). */
@media (max-width: 760px) {
  .nav { flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; }
  .nav nav { order: 3; width: 100%; flex: none; gap: 8px 16px; font-size: 14px; }
  .nav .cta { margin-left: auto; padding: 10px 18px; font-size: 14px; }
  .nav .logo img { height: 34px; }
}
.cta {
  display: inline-block; background: var(--brand); color: #1a0d02; border: 0; border-radius: 10px;
  padding: 12px 24px; font-size: 15px; font-weight: 800; letter-spacing: 0.01em; text-align: center;
}
.cta.big { padding: 16px 34px; font-size: 17px; }
.cta.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); font-weight: 600; }
.cta:disabled { opacity: 0.5; cursor: default; }

/* hero */
.hero { position: relative; min-height: 74vh; display: flex; align-items: center; overflow: hidden; }
.hero .bgimg, .band .bgimg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero .veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,10,12,0.93) 30%, rgba(10,10,12,0.55) 65%, rgba(10,10,12,0.35)); }
.hero .inner { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 60px 24px; width: 100%; }
.kicker { color: var(--brand); font-weight: 800; letter-spacing: 0.28em; font-size: 12px; text-transform: uppercase; }
.hero h1 { font-size: clamp(34px, 5.6vw, 62px); line-height: 1.06; margin: 14px 0 18px; font-weight: 800; }
.hero h1 em, .section h2 em { font-style: italic; color: var(--brand); }
.hero p { color: var(--muted); font-size: clamp(15px, 2vw, 19px); max-width: 520px; margin-bottom: 28px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* sections */
.section { max-width: 1140px; margin: 0 auto; padding: 64px 24px; width: 100%; }
.section h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; margin: 8px 0 10px; }
.section .lead { color: var(--muted); max-width: 620px; margin-bottom: 30px; }

/* feature trio */
.trio { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 860px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.feat { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.feat .n { color: var(--brand); font-weight: 900; font-style: italic; font-size: 26px; }
.feat b { display: block; font-size: 18px; margin: 8px 0 8px; }
.feat p { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* packages (formulas, live from the NUC) */
.paks { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .paks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .paks { grid-template-columns: repeat(3, 1fr); } }
.pak { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.pak.featured, .pak.sel { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand-soft), 0 18px 44px rgba(0,0,0,0.25); }
.pak .top { display: flex; align-items: baseline; gap: 10px; }
.pak .top b { font-size: 20px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.02em; }
.pak .dur { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.pak .price { font-size: 34px; font-weight: 900; }
.pak .price small { font-size: 13px; color: var(--muted); font-weight: 600; }
.pak .desc { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.pak ul { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.pak ul li::before { content: '— '; color: var(--brand); font-weight: 800; }
.pak .cta { margin-top: auto; }
.pak .tag { position: absolute; top: -11px; left: 22px; background: var(--brand); color: #1a0d02; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; border-radius: 99px; padding: 3px 12px; }

/* events + generic list rows */
.evlist { display: flex; flex-direction: column; gap: 10px; }
.evrow { display: flex; align-items: center; gap: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 15px 18px; }
.evrow .date { text-align: center; min-width: 58px; }
.evrow .date b { display: block; font-size: 20px; font-weight: 900; }
.evrow .date small { color: var(--brand); font-weight: 700; text-transform: uppercase; font-size: 11px; }
.evrow .grow { flex: 1; min-width: 0; }
.evrow .grow b { display: block; font-size: 15.5px; }
.evrow .grow small { color: var(--muted); }
.evrow .open { font-size: 11.5px; font-weight: 800; color: var(--green); border: 1px solid rgba(56,178,74,0.5); border-radius: 99px; padding: 4px 12px; white-space: nowrap; }
.evrow .tagx { font-size: 11.5px; font-weight: 800; border: 1px solid var(--border); border-radius: 99px; padding: 4px 12px; color: var(--muted); white-space: nowrap; }

/* photo band */
.band { position: relative; min-height: 320px; overflow: hidden; border-radius: 20px; display: flex; align-items: flex-end; }
.band .veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10,10,12,0.9)); }
.band .inner { position: relative; z-index: 2; padding: 26px; }

/* forms / booking flow */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 26px; }
.split { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .split { grid-template-columns: 1.4fr 1fr; } }
label { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 15px; font-family: inherit; }
.bk-step { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; margin: 22px 0 12px; }
.bk-step:first-of-type { margin-top: 0; }
.bk-step .n { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #1a0d02; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot { background: var(--panel2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 10px 14px; font-size: 14px; font-variant-numeric: tabular-nums; }
.slot.sel { background: var(--brand); border-color: var(--brand); color: #1a0d02; font-weight: 800; }
.slot.busy { opacity: 0.3; text-decoration: line-through; pointer-events: none; }
.err { color: var(--red); font-size: 13.5px; margin-top: 10px; }
.okmsg { color: var(--green); font-size: 13.5px; margin-top: 10px; }

/* price breakdown */
.sumrow { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.sumrow.total { border-bottom: 0; font-size: 17px; font-weight: 800; padding-top: 12px; }
.sumrow .neg { color: var(--green); }

/* account page */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0; }
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px; text-align: center; }
.stat b { display: block; font-size: 24px; font-weight: 900; font-style: italic; }
.stat small { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; }
.stat.tier b { color: var(--brand); }
.subbar { height: 10px; border-radius: 99px; background: var(--panel2); overflow: hidden; margin: 8px 0; }
.subbar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.bk-chip { font-size: 11px; font-weight: 800; border-radius: 99px; padding: 3px 10px; border: 1px solid rgba(56,178,74,0.5); color: var(--green); }

/* tier badges (M17) — same palette as the showroom/TV boards */
.tierchip { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; font-size: 10.5px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.tierchip.platinum { background: rgba(108,229,232,.14); color: #6ce5e8; border: 1px solid rgba(108,229,232,.55); }
.tierchip.gold { background: rgba(234,164,45,.15); color: #eaa42d; border: 1px solid rgba(234,164,45,.6); }
.tierchip.silver { background: rgba(192,199,209,.12); color: #c0c7d1; border: 1px solid rgba(192,199,209,.5); }
.tierchip.bronze { background: rgba(205,127,50,.13); color: #cd7f32; border: 1px solid rgba(205,127,50,.55); }
/* race-day teams rank between drivers with a TEAM tag instead of a tier */
.tierchip.team { background: rgba(63,196,90,.14); color: #3fc45a; border: 1px solid rgba(63,196,90,.55); }

/* leaderboard */
table.lb { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.lb th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 10px; border-bottom: 1px solid var(--border); }
table.lb td { padding: 10px; border-bottom: 1px solid var(--border); }
table.lb td.num, table.lb th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.lb tr:first-child td { color: var(--brand); font-weight: 800; }

/* ── Cars & tracks (owner spec 2026-08-07) — the kiosk showroom's library in the site theme.
   Everything is fl- prefixed: site.css already owns .hero/.card/.view-style names and a
   collision there silently reshapes the page. */
.fl-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.fl-tab { background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 700; }
.fl-tab.on { background: var(--brand); border-color: var(--brand); color: #1a0d02; }
.fl-tab small { font-weight: 600; opacity: 0.7; margin-left: 6px; }
.fl-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.fl-bar input { margin: 0; width: 240px; }
.fl-count { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.fl-chip { background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 600; }
.fl-chip.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

.fl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 760px) { .fl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1060px) { .fl-grid { grid-template-columns: repeat(4, 1fr); } }
/* the cards are <button>s (keyboard + screen readers), so their inner spans have to be told to
   be blocks — an inline box ignores aspect-ratio, and the artwork then pushes the name and the
   lap time out of the card */
.fl-card { display: flex; flex-direction: column; align-items: stretch; width: 100%;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; text-align: left; padding: 0; color: var(--text);
  transition: transform 0.15s, border-color 0.15s; }
.fl-card:hover { transform: translateY(-3px); border-color: var(--brand); }
.fl-art { display: block; flex: none; aspect-ratio: 1.5; background: var(--panel2); position: relative; overflow: hidden; }
.fl-art > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* track outline drawn as a mask so it takes --brand from the theme, cleaned first by
   /shared/outline-clean.js (mod tracks bake solid blocks into outline.png) */
.fl-ol { position: absolute; top: 8%; left: 6%; width: 60%; height: 64%; background: var(--brand);
  -webkit-mask: left top / contain no-repeat; mask: left top / contain no-repeat;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.9)); }
.fl-body { display: block; padding: 12px 14px 14px; }
.fl-body b { display: block; font-size: 14.5px; line-height: 1.25; }
.fl-body small { color: var(--muted); font-size: 12px; }
.fl-badge { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  border: 1px solid var(--border); border-radius: 99px; padding: 2px 9px; color: var(--muted); margin-top: 7px; }
.fl-badge.cls { border-color: var(--brand); color: var(--brand); }
.fl-rec { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.fl-rec b { display: inline; color: var(--text); font-variant-numeric: tabular-nums; }
.fl-empty { color: var(--muted); padding: 30px 0; }

.fl-sheet { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: flex;
  align-items: center; justify-content: center; padding: 24px; z-index: 60; }
.fl-sheet-card { background: var(--panel); border: 1px solid var(--border); border-radius: 20px;
  max-width: 820px; width: 100%; max-height: calc(100vh - 48px); overflow: auto; }
.fl-sheet-art { aspect-ratio: 2.6; background: var(--panel2) center / cover no-repeat; position: relative; }
.fl-sheet-in { padding: 22px 26px 26px; }
.fl-sheet-in h3 { font-size: 28px; font-weight: 800; margin: 6px 0 2px; }
.fl-close { position: absolute; top: 12px; right: 14px; background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--border); color: var(--text); border-radius: 50%; width: 34px; height: 34px; font-size: 15px; }
/* the circuit's other layouts, at the bottom of the main layout's card */
.fl-layouts { margin: 4px 0 18px; }
.fl-layouts h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); margin-bottom: 9px; font-weight: 800; }
.lrow { display: flex; align-items: center; gap: 14px; background: var(--panel2);
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 15px; margin-bottom: 8px; }
.lrow .ol2 { width: 46px; height: 34px; background: var(--brand); flex: none; opacity: 0.9;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.lrow .grow { flex: 1; min-width: 0; }
.lrow .grow b { display: block; font-size: 14px; }
.lrow .grow small { color: var(--muted); font-size: 12px; }
.lrow .rec { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; white-space: nowrap; }
.lrow .rec small { display: block; font-weight: 600; color: var(--muted); font-size: 11px; text-align: right; }
.lrow .none { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

.fl-liveries { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; }
.fl-liveries img { height: 54px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel2); flex: none; }

/* voucher preview (design photo + positioned serial code) */
.vprev { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.vprev img { display: block; width: 100%; }
.vprev .vcode { position: absolute; transform: translate(-50%, -50%); font-family: Consolas, monospace; font-weight: 700; letter-spacing: 0.18em; text-shadow: 0 2px 8px rgba(0,0,0,0.7); white-space: nowrap; }

/* footer */
.foot { border-top: 1px solid var(--border); margin-top: auto; }
.foot .inner { max-width: 1140px; margin: 0 auto; padding: 36px 24px; display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .foot .inner { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 10px; }
.foot a, .foot p { display: block; color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.foot .cr { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 16px; font-size: 12.5px; color: var(--muted); }

/* ── edit mode (Elementor-lite) ── */
.editbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; align-items: center; gap: 14px;
  background: #1c1206; border-top: 2px solid var(--brand); padding: 10px 20px; font-size: 13.5px; }
.editbar b { color: var(--brand); }
.editbar .sp { flex: 1; }
.editbar button { border-radius: 8px; padding: 8px 16px; font-weight: 700; font-size: 13px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }
.editbar button.save { background: var(--green); border-color: var(--green); color: #06210b; }
body.editing [data-sk] { outline: 1.5px dashed rgba(255,107,26,0.55); outline-offset: 3px; min-height: 1em; }
body.editing [data-sk]:hover, body.editing [data-sk]:focus { outline-style: solid; background: var(--brand-soft); }
body.editing [data-ski], body.editing [data-skbg] { outline: 2px dashed rgba(56,178,74,0.7); outline-offset: -2px; cursor: pointer; }

/* event pages (owner spec 2026-08-07) — one layout for challenge / race day / league */
.ehero { position: relative; min-height: 340px; display: flex; align-items: flex-end; overflow: hidden;
  border-radius: 0 0 22px 22px; }
.ehero .bgimg { position: absolute; inset: 0; background: center / cover no-repeat; }
.ehero .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,0.35) 20%, rgba(10,10,12,0.95)); }
.ehero .inner { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 30px 24px; width: 100%; }
.ehero h1 { font-size: clamp(30px, 5vw, 52px); font-weight: 800; line-height: 1.05; margin: 8px 0 10px; }
.ehero h1 em { font-style: italic; color: var(--brand); }
.efacts { display: flex; flex-wrap: wrap; gap: 10px; }
.efact { background: rgba(0,0,0,0.5); border: 1px solid var(--border); border-radius: 99px;
  padding: 7px 16px; font-size: 13.5px; font-weight: 600; backdrop-filter: blur(6px); }
.efact.open { border-color: rgba(56,178,74,0.55); color: var(--green); }
/* the entry panel's price (the .pak .price rule is scoped to package cards) */
.panel > .price { font-size: 34px; font-weight: 900; margin: 4px 0 6px; }
.panel > .price small { font-size: 13px; color: var(--muted); font-weight: 600; }

/* section editor rails (edit mode only — approved mockup 2026-08-07) */
body.editing [data-section] { position: relative; outline: 1.5px dashed rgba(255,107,26,0.35); outline-offset: -1px; }
body.editing [data-section]:hover { outline-color: rgba(255,107,26,0.8); }
.edrail { position: absolute; top: 10px; right: 12px; z-index: 40; display: flex; align-items: center; gap: 6px;
  background: rgba(12,12,14,0.92); border: 1px solid var(--border); border-radius: 10px; padding: 6px 9px;
  font-size: 12px; backdrop-filter: blur(8px); }
.edrail b { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.edrail button { background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; min-width: 26px; height: 24px; font-size: 12px; }
.edrail .edtog { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 11px; color: var(--muted); }
.edrail .edtog input { display: inline-block; width: auto; margin: 0; accent-color: var(--green); }
.edblocks { display: flex; gap: 8px; align-items: center; margin-top: 16px; padding-top: 10px;
  border-top: 1.5px dashed rgba(255,107,26,0.4); font-size: 12px; color: var(--muted); }
.edblocks button { background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 99px; padding: 5px 13px; font-size: 12px; }
.editbar button { white-space: nowrap; }

/* TEST MODE ribbon (no Stripe keys yet) */
.testpay { display: inline-block; background: rgba(217,165,59,0.15); border: 1px dashed rgba(217,165,59,0.6);
  color: #d9a53b; font-size: 12px; border-radius: 8px; padding: 6px 10px; margin-top: 10px; }

/* Multi-centre: centre tag before a name on an All-centres board, + the slot-row divider */
.ctag { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; background: rgba(225,58,63,0.14); color: var(--red, #e13a3f); border: 1px solid rgba(225,58,63,0.45); }
.slot-sep { display: inline-block; width: 1px; height: 26px; background: var(--border-strong, #333); margin: 0 8px; vertical-align: middle; }