/* =====================================================================
   Kuwait Grand Prix campaign theme — applied to the whole app while the event
   runs (html.campaign-kr). From the KGP logo pack: navy #0E2A59 base, the
   Kuwait flag colours of the "K" as accents (red = primary action, green =
   confirmed), Saira italic for display type; PIQR structure kept.
   Contrast rules: green is never text on white (2.75:1), red is never text on
   navy (2.4:1); both are fills there.
   Loaded after app.css + desktop.css. Also: floor-map + co-brand styles.
   ===================================================================== */
:root{
  --kr-red:#C41C25; --kr-red-2:#DB2630; --kr-red-dark:#8E141B; --kr-green:#06B512; --kr-black:#071733; --kgp-navy:#0E2A59;
  --kgp-flag:linear-gradient(104deg,#000 0 22px,transparent 22.5px),linear-gradient(180deg,#06B512 0 33.34%,#FFFFFF 33.34% 66.67%,#C41C25 66.67% 100%);
  --kgp-flag-line:linear-gradient(90deg,#000 0 8%,#06B512 8% 38%,#FFFFFF 38% 69%,#C41C25 69% 100%);
  --kr-gold:#E0B84C; --kr-silver:#A9BCCF; --kr-bronze:#C98A5E; --kr-platinum:#DDE2EA; --kr-main:#FCDD10;
  --font-kr:"Barlow","Plus Jakarta Sans",system-ui,sans-serif; --display-kr:"Saira","Barlow Condensed","Arial Narrow",sans-serif;
  --kgp-ital:italic; --kgp-wdth:87.5%;
}
html.campaign-kr, html.campaign-kr[data-theme]{
  --font:var(--font-kr);
  --chrome:#071733; --chrome-2:#10254B; --chrome-line:rgba(255,255,255,.08); --chrome-text:#FFFFFF; --chrome-text-2:#A5B1C8;
  --r-s:6px; --r-m:8px; --r-l:10px; --r-xl:12px; --r-2xl:16px;
}
html.campaign-kr, html.campaign-kr[data-theme="dark"]{
  --bg:#071733; --surface:#0C1F42; --surface-2:#122850; --surface-3:#1C3561;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --text:#F4F6FA; --text-2:#C3CCDD; --text-3:#95A2BC; --accent-text:#FF6B72; --accent-soft:rgba(196,28,37,.16);
  --kr-accent:#DB2630; --kr-ok:#06B512; --kr-taken:#3A5288; --kr-held:#8A6D1F;
  --kr-map-bg:#071733; --kr-map-floor:#0D2045; --kr-map-line:rgba(255,255,255,.14); --kr-map-ink:#FFFFFF; --kr-map-label:#C3CCDD;
  --kr-map-building:#142A52; --kr-map-garage:#1A325D; --kr-map-street:rgba(6,181,18,.35); --kr-map-cars:rgba(63,186,236,.35); --kr-map-food:rgba(89,61,152,.55);
  --kr-map-bikes:rgba(224,184,76,.28); --kr-map-seating:rgba(63,186,236,.28); --kr-map-stage:rgba(196,28,37,.45); --kr-map-zone:#222;
  --shadow-1:none; --shadow-2:0 20px 50px -20px rgba(0,0,0,.8); --shadow-3:0 30px 80px -20px rgba(0,0,0,.9);
}
html.campaign-kr[data-theme="light"]{
  --bg:#F2F5FA; --surface:#FFFFFF; --surface-2:#E9EEF6; --surface-3:#DAE1EE; --line:rgba(7,23,51,.1); --line-2:rgba(7,23,51,.2);
  --text:#071733; --text-2:#2A4270; --text-3:#5E6C88; --accent-text:#A8161F; --accent-soft:#FDE8E9;
  --kr-accent:#C41C25; --kr-ok:#0A7A16; --kr-taken:#B4C0D4; --kr-held:#9A6400;
  --kr-map-bg:#FFFFFF; --kr-map-floor:#EEF2F8; --kr-map-line:rgba(7,23,51,.18); --kr-map-ink:#071733; --kr-map-label:#2A4270;
  --kr-map-building:#E1E7F1; --kr-map-garage:#D3DCEA; --kr-map-street:rgba(6,181,18,.3); --kr-map-cars:rgba(63,186,236,.3); --kr-map-food:rgba(89,61,152,.25);
  --kr-map-bikes:rgba(224,184,76,.35); --kr-map-seating:rgba(63,186,236,.25); --kr-map-stage:rgba(196,28,37,.25); --kr-map-zone:#ddd;
}
html.campaign-kr[data-theme] body{background:var(--bg)}
html[lang="ar"]{--kgp-ital:normal; --kgp-wdth:100%}
/* Arabic is never slanted, including Arabic lines inside English pages and print sheets */
html.campaign-kr [lang="ar"], html.campaign-kr [lang="ar"] *{font-style:normal!important; font-stretch:100%!important}

/* type: slanted caps display, like the Kuwait Grand Prix wordmark */
html.campaign-kr[data-theme] h1, html.campaign-kr[data-theme] h2, html.campaign-kr[data-theme] .ev-title, html.campaign-kr[data-theme] .page-head h1, html.campaign-kr[data-theme] .section-head h2, html.campaign-kr[data-theme] .hero-slide__body h2, html.campaign-kr[data-theme] .sheet__head h2{
  font-family:var(--display-kr);font-style:var(--kgp-ital);font-stretch:var(--kgp-wdth); text-transform:uppercase; letter-spacing:.01em; font-weight:700}
html.campaign-kr[data-theme][lang="ar"] h1, html.campaign-kr[data-theme][lang="ar"] h2, html.campaign-kr[data-theme][lang="ar"] .ev-title, html.campaign-kr[data-theme][lang="ar"] .page-head h1, html.campaign-kr[data-theme][lang="ar"] .section-head h2{font-family:var(--font-ar); text-transform:none}

/* primary action = racing red */
html.campaign-kr[data-theme] .btn-primary{background:var(--kr-red); color:#fff; box-shadow:0 3px 0 var(--kr-red-dark)}
html.campaign-kr[data-theme] .btn-primary:hover:not(:disabled){background:var(--kr-red-2)}
html.campaign-kr[data-theme] .btn-primary:active:not(:disabled){box-shadow:0 1px 0 var(--kr-red-dark)}
html.campaign-kr[data-theme] .nav .nav__create, html.campaign-kr[data-theme] .tabbar .fab{background:var(--kr-red); color:#fff; box-shadow:0 4px 0 var(--kr-red-dark)}
html.campaign-kr[data-theme] .nav a[aria-current="page"] .ico, html.campaign-kr[data-theme] .tabbar a[aria-current="page"] .ico{stroke:var(--kr-red-2)}
html.campaign-kr[data-theme] .nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--kr-red)}
html.campaign-kr[data-theme][dir="rtl"] .nav a[aria-current="page"]{box-shadow:inset -3px 0 0 var(--kr-red)}
html.campaign-kr[data-theme] .chip[aria-pressed="true"], html.campaign-kr[data-theme] .seg button[aria-selected="true"]{background:var(--kr-red); color:#fff}
html.campaign-kr[data-theme="light"] .seg button[aria-selected="true"]{background:var(--kgp-navy); color:#fff}
html.campaign-kr[data-theme] .tabs button[aria-selected="true"]::after, html.campaign-kr[data-theme] .tabs a[aria-selected="true"]::after{background:var(--kr-red)}
html.campaign-kr[data-theme] .pill-accent{background:var(--kr-red); color:#fff}
html.campaign-kr[data-theme] .badge{background:var(--kr-red)}
html.campaign-kr[data-theme] .switch[aria-checked="true"]{background:var(--kr-green)}
html.campaign-kr[data-theme] .story .ring{background:conic-gradient(var(--kr-red),var(--kr-green),var(--kr-red))}
html.campaign-kr[data-theme] .buybar{background:#0F2448; box-shadow:0 0 0 1px rgba(196,28,37,.4),var(--shadow-3)}
html.campaign-kr[data-theme] .tonight{background:var(--kr-red); color:#fff}
html.campaign-kr[data-theme] .ticket.today{border-color:var(--kr-red); box-shadow:0 0 0 3px rgba(196,28,37,.25)}
html.campaign-kr[data-theme] .bubble.me{background:var(--kr-red); color:#fff}
html.campaign-kr[data-theme] .toast{background:#10254B; color:#fff}
html.campaign-kr[data-theme] .toast .ico, html.campaign-kr[data-theme] .toast button{color:#FF6B72}
html.campaign-kr[data-theme] .splash{background:#071733}
html.campaign-kr[data-theme] .input:focus, html.campaign-kr[data-theme] .select:focus, html.campaign-kr[data-theme] .textarea:focus{border-color:var(--kr-red); box-shadow:0 0 0 4px rgba(196,28,37,.18)}
html.campaign-kr[data-theme] .radio-card[aria-checked="true"], html.campaign-kr[data-theme] .radio-card.on, html.campaign-kr[data-theme] .tier.on{box-shadow:inset 0 0 0 2px var(--kr-red)}
html.campaign-kr[data-theme] .wizard-progress span.done, html.campaign-kr[data-theme] .bar>span{background:var(--kr-red)}
/* navy chrome, with the flag colours of the "K" as the accent line */
html.campaign-kr[data-theme] .side{background:var(--kgp-navy); border-inline-end:1px solid rgba(255,255,255,.06)}
html.campaign-kr[data-theme] .topbar{background:var(--kgp-navy); border-bottom:3px solid; border-image:var(--kgp-flag-line) 1}

/* co-brand lockups (injected by js/kr-app.js) */
.kr-topbrand{display:flex; align-items:center; gap:8px}
.kr-topbrand .krv-co{color:#fff}
.kr-topbrand small{color:#A5B1C8; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; line-height:1.15}
.kr-poweredby{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3)}
.kr-poweredby img{height:18px; width:auto}
.kr-poweredby svg{height:16px; width:auto; color:var(--text)}

/* ---------------- floor map ---------------- */
.krm-wrap{background:var(--kr-map-bg,#111); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden}
.krm-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.krm{display:block; width:100%; min-width:760px; height:auto; font-family:var(--font)}
.krm-label{font-size:13px; font-weight:700; fill:var(--kr-map-label); letter-spacing:.04em; text-transform:uppercase}
[lang="ar"] .krm-label{text-transform:none; letter-spacing:0; font-size:14px}
.krm-building{font-size:15px; opacity:.7}
.krm-blabel{font-size:12px; font-weight:800; fill:#071733}
.krm-blabel.on-taken{fill:#fff; opacity:.7}
.krm-pts{font-size:10px; font-weight:800; fill:#fff}
.krm-booth.is-live{cursor:pointer}
.krm-booth.is-live:hover rect, .krm-booth.is-live:focus rect{filter:brightness(1.25); stroke:var(--kr-accent); stroke-width:2.5}
.krm-booth:focus{outline:none}
.krm-booth.is-sel rect{animation:krpulse 1.2s ease-in-out infinite}
@keyframes krpulse{50%{opacity:.6}}
.krm-legend{display:flex; flex-wrap:wrap; gap:8px 16px; padding:12px 14px; font-size:13px; font-weight:600; color:var(--text-2); border-top:1px solid var(--line)}
.krm-leg{display:inline-flex; align-items:center; gap:7px}
.krm-leg i{width:14px; height:14px; border-radius:3px; display:inline-block}
.krm-hint{padding:8px 14px 0; font-size:12px; color:var(--text-3)}
@media (prefers-reduced-motion:reduce){.krm-booth.is-sel rect{animation:none}}
html.campaign-kr[data-theme] .on .radio-dot, html.campaign-kr[data-theme] [aria-checked="true"] .radio-dot{box-shadow:inset 0 0 0 2px var(--kr-red)}
html.campaign-kr[data-theme] .on .radio-dot::after, html.campaign-kr[data-theme] [aria-checked="true"] .radio-dot::after{background:var(--kr-red)}
html.campaign-kr[data-theme] .poll button.mine{box-shadow:inset 0 0 0 2px var(--kr-red)}
html.campaign-kr[data-theme] .seat[aria-pressed="true"]{background:var(--kr-red)!important;box-shadow:0 0 0 2px #fff}
/* the campaign adds two items to the sidebar: keep the co-brand whole and the list within one screen */
html.campaign-kr[data-theme] .side{overflow-y:auto; scrollbar-width:none}
html.campaign-kr[data-theme] .side::-webkit-scrollbar{display:none}
@media (min-width:1081px){html.campaign-kr[data-theme] .side .nav a, html.campaign-kr[data-theme] .side .nav button:not(.nav__create){height:44px}}

/* lockup (also defined in kr-views.css for the event pages; the sidebar and top bar need it on every page) */
.krv-co{display:inline-flex;align-items:center;gap:calc(var(--co-h) * .32);max-width:100%;vertical-align:middle}
.krv-co img{height:var(--co-h);width:auto;min-width:0;object-fit:contain;flex:0 1 auto}
/* balance by area, not height: the wide KGP wordmark sits at 77% of the Riders mark's height */
.krv-co img:first-child{height:calc(var(--co-h) * .77)}
.krv-co i{width:1.5px;align-self:stretch;margin-block:calc(var(--co-h) * .1);background:currentColor;opacity:.35;flex:none}
