/* KFA Tickets — official Kuwait Football Association identity (matches My KFA / kfa-system theme).
   Tajawal type, Azraq #0B5EA8 / Deep #063A6B / Sky #E8F3FC, Kuwait flag accents. RTL first. */
@font-face{font-family:Tajawal;font-weight:400;font-display:swap;src:url(../fonts/Tajawal-Regular.woff2) format("woff2")}
@font-face{font-family:Tajawal;font-weight:500;font-display:swap;src:url(../fonts/Tajawal-Medium.woff2) format("woff2")}
@font-face{font-family:Tajawal;font-weight:700;font-display:swap;src:url(../fonts/Tajawal-Bold.woff2) format("woff2")}
@font-face{font-family:Tajawal;font-weight:800;font-display:swap;src:url(../fonts/Tajawal-ExtraBold.woff2) format("woff2")}
@font-face{font-family:Tajawal;font-weight:900;font-display:swap;src:url(../fonts/Tajawal-Black.woff2) format("woff2")}

:root{
  /* iBook brand tokens (variable names kept so every screen re-skins from one place) */
  --kfa-black:#1E1414;--kfa-red:#D21E1E;--kfa-green:#288246;--kfa-azraq:#0B5EA8;--kfa-deep:#063A6B;--kfa-sky:#E8F3FC;
  --kfa-red-rgb:210 30 30;--kfa-green-rgb:40 130 70;--kfa-azraq-rgb:11 94 168;--kfa-deep-rgb:6 58 107;
  --kfa-line:#c5d9ec;--kfa-tint:#f8fbfe;--kfa-muted:#61798e;
  /* iBook identity stripe (admin → هوية النظام can recolour it) */
  --flag-black:#E8B021;--flag-green:#0B5EA8;--flag-white:#fff;--flag-red:#0E7A43;--ib-gold:#E8B021;
  --flag-stripe:linear-gradient(90deg,var(--flag-black) 0 12%,var(--flag-green) 12% 41%,var(--flag-white) 41% 70%,var(--flag-red) 70%);
  --flag-stripe-v:linear-gradient(var(--flag-black) 0 33%,var(--flag-green) 33% 66%,var(--flag-red) 66%);
  /* Aliases used across the app */
  --navy:var(--kfa-deep);--navy-2:#08487f;--blue:var(--kfa-azraq);--blue-2:#1673c9;--sky:var(--kfa-sky);
  --ink:var(--kfa-black);--muted:var(--kfa-muted);--line:var(--kfa-line);--bg:var(--kfa-sky);--card:#fff;
  --ok:var(--kfa-green);--ok-bg:#e7f4ec;--warn:#b45309;--warn-bg:#fff6e5;--bad:var(--kfa-red);--bad-bg:#fdecec;
  --gold:#f4c430;--radius:16px;
  --shadow:0 4px 14px rgb(var(--kfa-deep-rgb) / .10);
  --shadow-lg:0 14px 32px rgb(var(--kfa-deep-rgb) / .16);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Tajawal,Tahoma,"Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--navy);text-decoration:underline}
img{max-width:100%}
h1,h2,h3,h4{line-height:1.3;margin:0 0 .5em;color:var(--navy)}
h1{font-size:clamp(24px,3.4vw,36px);font-weight:800}
h2{font-size:21px;font-weight:800}
h3{font-size:17px;font-weight:700}
p{margin:0 0 .8em}
small,.muted{color:var(--muted)}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.mono{font-family:ui-monospace,Consolas,monospace;letter-spacing:.04em}
.container{width:min(1240px,100% - 32px);margin-inline:auto}
.stack>*+*{margin-top:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.hidden{display:none!important}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.flag-bar{height:4px;background:var(--flag-stripe)}
:focus-visible{outline:3px solid rgb(var(--kfa-azraq-rgb) / .35);outline-offset:2px}

/* Crest */
.crest{width:40px;height:44px;display:inline-grid;place-items:center;flex:none}
.crest img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
@media(prefers-reduced-motion:no-preference){.brand:hover .crest img{transform:scale(1.04);transition:transform .45s var(--ease)}}

/* Public header */
.topbar{background:var(--navy);color:#fff;position:sticky;top:0;z-index:40;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.topbar::after{content:"";position:absolute;inset-inline:0;bottom:-3px;height:3px;background:var(--flag-stripe);pointer-events:none}
.topbar .container{display:flex;align-items:center;gap:18px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;white-space:nowrap}
.brand:hover{text-decoration:none;color:#fff}
.brand small{display:block;color:#b9d3ee;font-weight:500;font-size:11px;line-height:1.2;letter-spacing:.02em}
.nav{display:flex;gap:4px;margin-inline-start:auto;flex-wrap:wrap;align-items:center}
.nav a{color:#d4eafb;padding:8px 12px;border-radius:10px;font-weight:700;font-size:14px;display:inline-flex;gap:6px;align-items:center}
.nav a:hover,.nav a.active{background:var(--blue);color:#fff;text-decoration:none}
.nav a.nav-cta{background:#fff;color:var(--navy)}
.nav a.nav-cta:hover{background:var(--sky);color:var(--navy)}
.menu-toggle{display:none;margin-inline-start:auto;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:10px;padding:6px 10px;font:inherit}
@media(max-width:860px){
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;inset-inline:0;top:66px;background:var(--navy-2);flex-direction:column;align-items:stretch;padding:10px 16px 16px}
  .nav.open{display:flex}
}
.ribbon{background:var(--warn-bg);color:#7a4a07;font-size:13px;text-align:center;padding:6px 16px;border-bottom:1px solid #f3dfb5;margin-top:3px}

/* Buttons & forms */
.btn{--b:var(--blue);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--b);background:var(--b);color:#fff;padding:10px 18px;border-radius:12px;font:inherit;font-weight:700;cursor:pointer;line-height:1.2;text-decoration:none!important;transition:filter .15s,transform .05s,box-shadow .2s}
.btn:hover{filter:brightness(1.08);color:#fff;box-shadow:0 6px 16px rgb(var(--kfa-azraq-rgb) / .25)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.ghost{background:transparent;color:var(--b)}
.btn.ghost:hover{box-shadow:none;background:rgb(255 255 255 / .08)}
.btn.light{background:#fff;color:var(--navy);border-color:var(--line)}
.btn.light:hover{background:var(--sky);color:var(--navy);box-shadow:none}
.btn.ok{--b:var(--ok)}.btn.bad{--b:var(--bad)}.btn.warn{--b:var(--warn)}.btn.dark{--b:var(--navy)}
.btn.gold{--b:var(--gold);color:var(--navy)}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:10px}
.btn.lg{padding:14px 24px;font-size:17px}
.btn.block{width:100%}
/* Kuwait-flag focus ring on primary actions (from the My KFA identity) */
.btn.lg::after,.btn.primary::after{content:"";position:absolute;inset:-4px;border-radius:15px;border:2px solid transparent;border-image:linear-gradient(90deg,var(--flag-black),var(--flag-green) 35%,#fff 65%,var(--flag-red)) 1;opacity:0;pointer-events:none;transition:opacity .2s}
.btn.lg:is(:hover,:focus-visible)::after,.btn.primary:is(:hover,:focus-visible)::after{opacity:1}
label{display:block;font-weight:700;font-size:13px;margin:0 0 6px;color:var(--navy)}
.field{margin-bottom:14px}
input,select,textarea{width:100%;font:inherit;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgb(var(--kfa-azraq-rgb) / .18);border-color:var(--blue)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--blue)}
input[type=color]{padding:2px;height:40px}
.check{display:flex;gap:8px;align-items:center;font-weight:600;color:var(--ink)}
.help{font-size:12px;color:var(--muted);margin-top:4px}
.error{color:var(--bad);font-size:13px;margin-top:4px;font-weight:600}

/* Cards, alerts, badges, KPIs */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.card.flat{box-shadow:none;background:var(--kfa-tint)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-head h2,.card-head h3{margin:0}
.card.accent{border-top:3px solid var(--blue)}
a.card{transition:transform .25s var(--ease),box-shadow .25s}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);text-decoration:none}
.alert{padding:12px 16px;border-radius:12px;border:1px solid;margin-bottom:16px;font-weight:600}
.alert.ok{background:var(--ok-bg);border-color:#b5dcc3;color:#1b5e33;display:flex;gap:10px;align-items:center}
.alert.ok::before{content:"✓";display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--flag-green);color:#fff;font-weight:800;font-size:14px}
.alert.bad{background:var(--bad-bg);border-color:#f5c2c2;color:#8a1414}
.alert.warn{background:var(--warn-bg);border-color:#f3dfb5;color:#7a4a07}
.alert.info{background:#fff;border-color:var(--line);border-inline-start:4px solid var(--blue);color:var(--navy)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#eef3f8;color:#334155;white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}.badge.bad{background:var(--bad-bg);color:var(--bad)}.badge.warn{background:var(--warn-bg);color:var(--warn)}.badge.info{background:var(--sky);color:var(--blue)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.stat{position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);color:var(--navy);transition:transform .25s var(--ease),box-shadow .25s}
a.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);text-decoration:none}
.stat b{display:block;font-size:28px;font-weight:800;line-height:1.2}
.stat span{color:var(--muted);font-size:13px;font-weight:600}
.stat .ico{position:absolute;inset-inline-end:14px;top:14px;width:26px;height:26px;opacity:.5}
.stat.azraq{background:linear-gradient(135deg,var(--kfa-azraq),var(--kfa-deep));border:0;color:#fff;box-shadow:0 6px 16px rgb(var(--kfa-azraq-rgb) / .35)}
.stat.deep{background:linear-gradient(135deg,var(--kfa-deep),var(--kfa-azraq));border:0;color:#fff}
.stat.green{background:linear-gradient(135deg,var(--kfa-green),#1e6436);border:0;color:#fff;box-shadow:0 6px 16px rgb(var(--kfa-green-rgb) / .3)}
.stat.red{background:linear-gradient(135deg,var(--kfa-red),#9b1616);border:0;color:#fff;box-shadow:0 6px 16px rgb(var(--kfa-red-rgb) / .3)}
.stat:is(.azraq,.deep,.green,.red) span{color:rgb(255 255 255 / .85)}
.progress{height:8px;background:#e3edf7;border-radius:8px;overflow:hidden}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--kfa-green),var(--kfa-azraq));border-radius:8px}

/* Module hero (same pattern as kfa-system "kfa-mod-hero") */
.kfa-hero{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-inline-start:5px solid var(--blue);border-radius:16px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;margin-bottom:18px}
.kfa-hero::before{content:"";position:absolute;inset-inline-end:-40px;top:-50px;width:190px;height:190px;border-radius:50%;background:var(--sky);pointer-events:none}
.kfa-hero>*{position:relative}
.kfa-hero .eyebrow{color:var(--muted);letter-spacing:.06em;font-size:11px;font-weight:700;margin:0 0 4px}
.kfa-hero h1{font-size:22px;margin:0;color:var(--navy)}
.kfa-hero .sub{font-size:13px;color:var(--muted);margin:4px 0 0}
.kfa-hero .toolbar{justify-content:flex-end}
@media(max-width:700px){.kfa-hero{flex-direction:column;align-items:flex-start}}

/* Tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 14px;border-bottom:1px solid #e8eef5;text-align:start;vertical-align:middle}
th{background:var(--sky);font-size:12.5px;color:var(--navy);font-weight:800;white-space:nowrap;border-bottom:2px solid var(--blue)}
tbody tr:nth-child(even) td,table tr:nth-child(even) td{background:var(--kfa-tint)}
tr:hover td{background:var(--sky)}
tr:last-child td{border-bottom:0}
td .row{flex-wrap:nowrap}

/* Fan hero & events */
.hero{background:linear-gradient(120deg,var(--kfa-deep) 0%,#08487f 55%,var(--kfa-azraq) 100%);color:#fff;border-radius:22px;padding:clamp(22px,4vw,44px);position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.hero::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 20px,transparent 20px 40px);pointer-events:none}
.hero::after{content:"";position:absolute;inset-inline-start:0;inset-block:0;width:6px;background:var(--flag-stripe-v)}
.hero .watermark{position:absolute;inset-inline-end:clamp(-60px,-4vw,-20px);top:50%;transform:translateY(-50%);width:clamp(180px,26vw,320px);opacity:.10;pointer-events:none}
.hero>*{position:relative}
.hero h1{color:#fff}
.hero p{color:#d4eafb;max-width:640px}
.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:800;color:#a9cdf0;text-transform:uppercase}
.match-card{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;text-align:center}
.team{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:800;font-size:18px}
.team i{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:22px;color:#0b1830;box-shadow:inset 0 0 0 4px rgba(255,255,255,.55),0 6px 16px rgba(0,0,0,.25)}
.card .team{color:var(--navy)}
.vs{font-weight:900;color:#a9cdf0;font-size:15px}
.card .vs{color:var(--muted)}
.event-card{display:flex;flex-direction:column;gap:14px;border-top:4px solid var(--blue)}
.event-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:14px}
.event-meta span{display:inline-flex;align-items:center;gap:6px}

/* Booking layout */
.booking{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
@media(max-width:980px){.booking{grid-template-columns:minmax(0,1fr)}}
.sticky{position:sticky;top:86px}
@media(max-width:980px){.sticky{position:static}}

/* Stadium map */
.stadium{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.stadium-toolbar{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--kfa-tint)}
.stadium-toolbar .crumbs{font-weight:800;color:var(--navy)}
.section-view{display:flex;align-items:center;gap:10px;flex:1 1 100%;color:var(--muted);font-size:13px}.section-view img{width:min(100%,520px);max-height:220px;object-fit:cover;border-radius:10px}
.fan-id-card{position:relative;overflow:hidden;min-height:255px;padding:24px 28px;border-radius:24px;color:#fff;background:radial-gradient(circle at 88% 20%,rgba(255,255,255,.16),transparent 28%),linear-gradient(130deg,var(--kfa-deep),#07569a 58%,var(--kfa-deep));box-shadow:0 22px 48px rgba(6,58,107,.25);display:flex;flex-direction:column;justify-content:space-between}.fan-id-top,.fan-id-main,.fan-id-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px}.fan-id-top{font-weight:800;letter-spacing:.04em}.fan-id-chip{border:1px solid rgba(255,255,255,.55);border-radius:8px;padding:4px 9px;letter-spacing:.14em}.fan-id-main>div:first-child{display:grid;gap:6px}.fan-id-main small,.fan-id-bottom{color:#d3e7f8;font-size:12px}.fan-id-main strong{font-size:25px;letter-spacing:.12em}.fan-id-main b{font-size:21px}.fan-id-points{display:grid;text-align:end;gap:4px}.fan-id-points strong{font-size:32px}.fan-id-barcode{background:#fff;border-radius:8px;padding:4px 7px}.fan-id-barcode .barcode{width:180px;height:38px}.points-total{display:grid;justify-items:center;gap:8px;text-align:center;padding:28px}.points-total strong{font-size:50px;color:var(--blue)}.points-total small{color:var(--muted)}.points-earned{color:#16803c;font-size:18px}
.stadium svg.map{display:block;width:100%;height:auto;max-height:78vh;touch-action:none;user-select:none;-webkit-user-select:none;background:radial-gradient(circle at 50% 50%,#fff 55%,#f3f8fd)}
.map .sec{stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;cursor:pointer;transition:filter .15s,opacity .2s}
.map .sec.off{cursor:not-allowed}
.map .sec:hover{filter:brightness(1.08) saturate(1.1)}
.map .sec.dim{opacity:.18}
.map .sec.selected{stroke:var(--navy);stroke-width:3;fill-opacity:.35}
.map.zoomed .sec-label{opacity:.25}
.map.zoomed .seats{filter:drop-shadow(0 0 .6px rgba(0,0,0,.25))}
.map .sec-label{font-size:24px;font-weight:800;fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.45);stroke-width:4px;pointer-events:none;text-anchor:middle;dominant-baseline:central;font-family:Tajawal,sans-serif}
.map .sec-label.small{font-size:18px}
.map .seat{cursor:pointer;stroke:rgba(0,0,0,.35);stroke-width:.4}
.map .seat.sold,.map .seat.held,.map .seat.closed{fill:#cbd2dc;cursor:not-allowed}
.map .seat.blocked{fill:#3f4754;cursor:not-allowed}
.map .seat.killed{fill:none;stroke:#e2e8f0;cursor:not-allowed}
.map .seat.restricted{fill:#fca5a5;cursor:not-allowed}
.map .seat.mine,.map .seat.picked{fill:var(--flag-black)!important;stroke:#fff;stroke-width:1}
.staff .map .seat.held,.staff .map .seat.blocked,.staff .map .seat.restricted,.staff .map .seat.sold{cursor:pointer}
.map .gate circle{fill:var(--navy);stroke:#fff;stroke-width:3}
.map .gate text{fill:#fff;font-size:20px;font-weight:800;text-anchor:middle;dominant-baseline:central;font-family:Tajawal,sans-serif}
.map .pitch-line{fill:none;stroke:rgba(255,255,255,.75);stroke-width:3}
.map .lasso{fill:rgb(var(--kfa-azraq-rgb) / .12);stroke:var(--blue);stroke-width:2;stroke-dasharray:8 6}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 16px;padding:10px 14px;border-top:1px solid var(--line);font-size:13px;color:#334155;background:var(--kfa-tint)}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.tooltip{position:fixed;z-index:80;pointer-events:none;background:var(--navy);color:#fff;font-size:13px;padding:6px 10px;border-radius:8px;box-shadow:0 8px 18px rgba(0,0,0,.25);max-width:240px;line-height:1.5}
.zoom-ctl{position:absolute;inset-inline-end:12px;top:64px;display:flex;flex-direction:column;gap:6px}
.zoom-ctl button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:20px;font-weight:800;cursor:pointer;box-shadow:var(--shadow)}
.loading{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.7);font-weight:800;color:var(--navy)}

/* Rows grid view */
.rows-view{padding:12px;max-height:420px;overflow:auto;direction:ltr;border-top:1px solid var(--line)}
.rows-view .r{display:flex;align-items:center;gap:3px;margin-bottom:3px}
.rows-view .r>b{width:34px;flex:none;text-align:center;font-size:12px;color:var(--muted)}
.rows-view button{width:24px;height:24px;flex:none;border-radius:6px 6px 3px 3px;border:1px solid rgba(0,0,0,.15);font:700 10px/1 Tajawal,sans-serif;cursor:pointer;color:#0f172a;padding:0}
.rows-view button:disabled{cursor:not-allowed;color:#94a3b8}
.rows-view .gap{width:24px;flex:none}

/* Cart */
.cart-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px}
.cart-item:last-child{border-bottom:0}
.cart-total{display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:800;padding-top:12px;margin-top:6px;border-top:2px solid var(--navy);color:var(--navy)}
.timer{font-weight:800;color:var(--warn)}
.x{border:0;background:var(--sky);color:var(--navy);border-radius:8px;width:28px;height:28px;cursor:pointer;font-size:16px;line-height:1}

/* Tickets */
.ticket{display:grid;grid-template-columns:1fr auto;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.ticket .main{padding:18px 20px 18px 26px;background:linear-gradient(160deg,rgb(4 31 61 / .55),rgb(6 58 107 / .93)),var(--bg,linear-gradient(135deg,var(--kfa-deep) 0%,var(--kfa-azraq) 100%));background-size:cover;background-position:center;color:#fff;position:relative;overflow:hidden}
.ticket .main::before{content:"";position:absolute;inset-inline-start:0;inset-block:0;width:6px;background:var(--flag-stripe-v)}
.ticket .main .crest-wm{position:absolute;inset-inline-end:-30px;bottom:-40px;width:170px;opacity:.10;pointer-events:none}
.ticket .main>*{position:relative}
.ticket .main h3{color:#fff}
.ticket .main .eyebrow{color:#a9cdf0}
.ticket .seatinfo{display:grid;grid-template-columns:repeat(4,auto);gap:4px 18px;margin-top:12px}
.ticket .seatinfo span{display:block;font-size:11px;color:#a9cdf0;font-weight:700}
.ticket .seatinfo b{font-size:24px;font-weight:900}
.ticket .stub{padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#fff;border-inline-start:2px dashed var(--line);min-width:260px}
.ticket .stub svg.barcode{width:100%;max-width:300px;height:auto}
.ticket .stub .btn .ico{width:18px;height:18px}
.ticket.void{opacity:.55;filter:grayscale(1)}
@media(max-width:700px){.ticket{grid-template-columns:1fr}.ticket .stub{border-inline-start:0;border-top:2px dashed var(--line);min-width:0}.ticket .seatinfo{grid-template-columns:repeat(2,auto)}}
.route{counter-reset:s;list-style:none;padding:0;margin:8px 0 0}
.route li{counter-increment:s;position:relative;padding:4px 34px 4px 0;font-size:14px}
.route li:before{content:counter(s);position:absolute;right:0;top:4px;width:24px;height:24px;border-radius:50%;background:var(--sky);color:var(--blue);font-weight:800;display:grid;place-items:center;font-size:12px}
.win-badge{margin-top:10px;background:var(--gold);color:var(--navy);border-radius:10px;padding:6px 12px;font-weight:800}

/* Store */
.product{display:flex;flex-direction:column;gap:10px}
.product .img{aspect-ratio:4/3;border-radius:12px;background:linear-gradient(140deg,var(--sky),#cfe3f7);display:grid;place-items:center;overflow:hidden}
.product .img img{width:100%;height:100%;object-fit:cover}
.product .img .placeholder{width:42%;opacity:.35}
.price{font-weight:800;font-size:18px;color:var(--navy)}

/* Chat widget */
.chat-fab{position:fixed;inset-inline-start:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;border:3px solid #fff;background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgb(var(--kfa-azraq-rgb) / .45);cursor:pointer}
.chat-fab .ico{width:26px;height:26px}
.chat-box{position:fixed;inset-inline-start:18px;bottom:88px;z-index:60;width:min(370px,calc(100vw - 36px));height:min(540px,calc(100vh - 120px));background:#fff;border-radius:18px;box-shadow:0 24px 60px rgb(var(--kfa-deep-rgb) / .35);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.chat-head{background:var(--navy);color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;position:relative}
.chat-head::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--flag-stripe)}
.chat-head small{color:#b9d3ee}
.chat-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--kfa-tint)}
.msg{max-width:86%;padding:8px 12px;border-radius:14px;white-space:pre-wrap;font-size:14px;word-break:break-word}
.msg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-start-start-radius:4px}
.msg.me{background:var(--blue);color:#fff;align-self:flex-end;border-start-end-radius:4px}
.msg a{color:inherit;text-decoration:underline}
.quick{display:flex;flex-wrap:wrap;gap:6px}
.quick button{border:1px solid var(--line);background:var(--sky);color:var(--blue);border-radius:999px;padding:4px 10px;font:700 13px Tajawal,sans-serif;cursor:pointer}
.chat-form{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line)}
.chat-form input{border-radius:999px}
.chat-wa{display:block;text-align:center;font-size:13px;padding:6px;background:var(--ok-bg);color:#1b5e33;font-weight:700}

/* Footer */
.footer{margin-top:48px;background:var(--navy);color:#b9d3ee;padding:28px 0;font-size:13px;position:relative}
.footer::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--flag-stripe)}
.footer a{color:#e8f3fc}
.footer .brand{font-size:14px}
main{padding:26px 0 24px}

/* Staff shell — same structure as My KFA: deep top bar with crest, deep sidebar, sky canvas */
.staff-top{position:sticky;top:0;z-index:50;height:64px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:14px;padding:0 18px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.staff-top::after{content:"";position:absolute;inset-inline:0;bottom:-3px;height:3px;background:var(--flag-stripe)}
.staff-top .center{position:absolute;inset-inline:0;display:flex;justify-content:center;pointer-events:none}
.staff-top .center span{display:flex;flex-direction:column;align-items:center;font-weight:900;font-size:13px;letter-spacing:.04em;line-height:1.1}
.staff-top .center img{width:30px;height:30px;object-fit:contain;margin-bottom:2px}
.staff-top .user{margin-inline-start:auto;display:flex;align-items:center;gap:10px;font-size:13px;position:relative;z-index:1}
.staff-top .user b{display:block;line-height:1.2}
.staff-top .user small{color:#b9d3ee}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-weight:800;border:2px solid rgb(255 255 255 / .35)}
.admin{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:calc(100vh - 64px)}
.side{background:var(--navy);color:#d4eafb;padding:14px 12px 24px;position:sticky;top:67px;height:calc(100vh - 67px);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.side h6{margin:18px 12px 6px;font-size:11px;letter-spacing:.08em;color:#8fb3dc;font-weight:800}
.side a{display:flex;gap:10px;align-items:center;color:#d4eafb;padding:9px 12px;border-radius:10px;font-weight:700;font-size:14px;transition:background .15s}
.side a:hover{background:rgb(var(--kfa-azraq-rgb) / .7);color:#fff;text-decoration:none}
.side a.active{background:var(--blue);color:#fff;box-shadow:inset -3px 0 0 var(--flag-green)}
.side a .ico{opacity:.9}
.side .side-foot{margin-top:18px;padding:12px;border-top:1px solid rgb(255 255 255 / .12)}
.admin-main{padding:22px clamp(14px,2.5vw,32px);min-width:0}
.admin-head{display:none}
.side-toggle{display:none;background:none;border:1px solid rgb(255 255 255 / .3);color:#fff;border-radius:10px;padding:6px 10px;font:inherit;position:relative;z-index:1}
@media(max-width:960px){
  .admin{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;top:67px;inset-inline-start:0;width:270px;z-index:70;transform:translateX(105%);transition:transform .25s var(--ease)}
  [dir=rtl] .side{transform:translateX(105%)}
  .side.open{transform:none}
  .side-toggle{display:inline-flex}
  .staff-top .center{display:none}
}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs a{padding:10px 14px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.tabs a.active{color:var(--navy);border-color:var(--flag-green);text-decoration:none}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pagination{display:flex;gap:4px;flex-wrap:wrap;margin-top:12px;list-style:none;padding:0}
.pagination a,.pagination span{display:block;padding:4px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px}
.pagination .active span{background:var(--blue);color:#fff;border-color:var(--blue)}

/* Login screens (same as My KFA guest layout: diagonal deep background, azraq crest panel, flag edge) */
.auth-bg{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background-color:var(--kfa-deep);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 20px,transparent 20px 40px)}
.auth-card{position:relative;width:min(420px,100%);background:#fff;border-radius:18px;overflow:hidden;border:1px solid #ffffff30;box-shadow:0 20px 60px #001b3240}
.auth-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:5px;background:var(--flag-stripe-v);z-index:1}
.auth-card .logo-panel{background:var(--kfa-azraq);display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 16px 18px;border-bottom:3px solid var(--flag-black);color:#fff;text-align:center}
.auth-card .logo-panel img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.auth-card .logo-panel b{font-size:17px}
.auth-card .logo-panel small{color:#d4eafb;font-size:12px}
.auth-card .body{padding:22px 24px 24px}
.auth-card .body>*+*{margin-top:14px}
.page-auth{background:none}
.page-auth .auth-card{margin:10px auto}
.otp{display:flex;gap:10px;justify-content:center;direction:ltr}
.otp input{width:58px;height:64px;text-align:center;font-size:28px;font-weight:800;border-radius:14px;padding:0;color:var(--navy)}

/* Scanner */
.scanner{min-height:100vh;background:#021a33;color:#fff;display:flex;flex-direction:column}
.scanner header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--navy);gap:8px;position:relative}
.scanner header::after{content:"";position:absolute;inset-inline:0;bottom:-3px;height:3px;background:var(--flag-stripe)}
.scanner header .brand img{width:30px;height:34px;object-fit:contain}
.scanner select{background:#08487f;color:#fff;border-color:#2b6aa8}
.scan-view{position:relative;flex:1;display:flex;flex-direction:column}
#reader{width:100%;max-width:640px;margin:0 auto;background:#000;min-height:240px}
#reader:empty{display:none}
#reader video{width:100%!important;height:auto!important}
.scan-result{margin:12px;border-radius:18px;padding:18px;text-align:center;font-weight:800;font-size:22px;transition:background .2s}
.scan-result.ok{background:var(--kfa-green)}.scan-result.bad{background:var(--kfa-red)}.scan-result.warn{background:#d97706}.scan-result.idle{background:#08487f;color:#b9d3ee;font-size:16px}
.scan-result small{color:inherit;display:block;font-size:15px;font-weight:600;opacity:.95;margin-top:6px}
.scan-stats{display:flex;justify-content:space-around;padding:10px 8px 8px;margin-top:3px;background:var(--navy);font-size:13px;color:#b9d3ee;text-align:center}
.scan-stats b{display:block;font-size:22px;color:#fff}
.scan-manual{display:flex;gap:8px;padding:0 12px 12px}
.scan-manual input{background:#08487f;color:#fff;border-color:#2b6aa8;direction:ltr;text-align:center;font-size:18px;letter-spacing:.1em}
.scan-log{padding:0 12px 12px;font-size:13px;color:#b9d3ee;max-height:30vh;overflow:auto}
.scan-log div{display:flex;justify-content:space-between;border-bottom:1px solid #0d3a66;padding:6px 0}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Print */
@media print{
  body{background:#fff}
  .no-print,.topbar,.footer,.chat-fab,.chat-box,.ribbon{display:none!important}
}

/* Small-screen refinements */
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
@media(max-width:600px){
  .staff-top .user>div{display:none}
  .staff-top .brand small{display:none}
  .staff-top .brand{font-size:13px}
  .scanner header{flex-wrap:wrap}
  .scanner header>.row{width:100%}
  .scanner header select{flex:1;min-width:0}
}

/* Fixed header & footer on fan pages */
.fan-shell{--head-h:66px;--foot-h:0px;min-height:100vh;display:flex;flex-direction:column;padding-top:calc(var(--head-h) + 3px)}
.fan-shell>main{flex:1 0 auto}
.fan-shell .topbar{position:fixed;top:0;inset-inline:0}
.fan-shell .footer{margin:48px 0 0;padding:18px 0 calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center}
.fan-shell .footer .container{width:min(1240px,100% - 32px)}
.fan-shell .footer .crest{width:30px;height:33px}
.fan-shell .footer .brand{font-size:13px}
.fan-shell .footer-links{gap:14px;font-size:13px}
.linklike{background:none;border:0;padding:0;font:inherit;color:#e8f3fc;cursor:pointer}
.linklike:hover{text-decoration:underline}
.fan-shell .chat-fab{bottom:calc(var(--foot-h) + 16px + env(safe-area-inset-bottom))}
.fan-shell .chat-box{bottom:calc(var(--foot-h) + 86px + env(safe-area-inset-bottom));height:min(520px,calc(100vh - var(--head-h) - var(--foot-h) - 110px))}
.fan-shell .sticky{top:calc(var(--head-h) + 20px)}
.fan-shell .nav{max-height:calc(100vh - var(--head-h) - var(--foot-h));overflow:auto}
@media(max-width:860px){.fan-shell .nav{top:var(--head-h)}}
@media(max-width:600px){
  .fan-shell .footer .brand small{display:none}
}
.page-auth{min-height:calc(100vh - 66px - 56px - 60px);display:grid;place-items:center}

/* ---- Branding: clubs, competitions, uploads ---- */
.team-logo{display:inline-grid;place-items:center;object-fit:contain;border-radius:50%;flex:none}
img.team-logo{border-radius:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.team-logo.initial{color:#fff;font-style:normal;font-weight:900;box-shadow:0 0 0 3px #fff,0 4px 10px rgba(0,0,0,.15)}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.brand-grid.wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.brand-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;background:#fff;border:1px solid var(--line,#dbe4ef);border-radius:16px;text-align:center;color:inherit;text-decoration:none!important;transition:transform .15s,box-shadow .15s}
.brand-tile:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(6,58,107,.12)}
.brand-tile small{display:flex;align-items:center;gap:6px;color:var(--kfa-muted,#64748b)}
.brand-tile.off{opacity:.55}
.brand-tile.comp{min-height:150px;color:#fff;background:linear-gradient(160deg,rgb(6 58 107 / .85),rgb(4 31 61 / .92)),var(--bg,linear-gradient(135deg,#0B5EA8,var(--kfa-deep)));background-size:cover;background-position:center}
.brand-tile.comp small{color:#d4eafb}
.brand-tile.comp img{height:56px;width:auto;max-width:80%;object-fit:contain}
.upload-box{display:flex;gap:14px;align-items:center;padding:10px;border:1px dashed #b6c6da;border-radius:12px;background:#f8fbff}
.upload-preview{flex:none;width:84px;height:84px;border-radius:10px;background:#fff center/contain no-repeat;border:1px solid #e2e8f0;display:grid;place-items:center;font-size:11px;color:#94a3b8;text-align:center}
.upload-box.wide .upload-preview{width:200px;height:112px;background-size:cover}
.upload-box small{display:block;margin:6px 0}
.match-art{display:flex;align-items:center;gap:10px}
@media(max-width:600px){.upload-box{flex-direction:column;align-items:stretch}.upload-box.wide .upload-preview{width:100%}}

.ticket .comp-logo{height:26px;width:auto;max-width:90px;object-fit:contain}
.ticket-teams{display:flex;align-items:center;gap:12px;margin:12px 0 6px;font-size:20px;font-weight:900;flex-wrap:wrap}
.ticket-teams span{display:inline-flex;align-items:center;gap:8px}
.ticket-teams i{font-style:normal;color:#F4C430}
.ticket-teams .team-logo.initial{box-shadow:0 0 0 2px #fff}
.export-menu{position:relative}
.export-menu>summary{list-style:none;cursor:pointer}
.export-menu>summary::-webkit-details-marker{display:none}
.export-list{position:absolute;z-index:30;inset-inline-end:0;top:calc(100% + 6px);width:290px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(6,58,107,.18);padding:6px;display:grid;gap:2px}
.export-list a{display:block;padding:9px 12px;border-radius:10px;color:var(--ink,#0f172a);text-decoration:none}
.export-list a:hover{background:var(--kfa-sky,#E8F3FC)}
.export-list small{display:block;color:var(--kfa-muted,#64748b);font-size:12px}
.export-note{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:12px;color:var(--kfa-muted,#64748b);border-top:1px solid var(--line)}
.team .team-logo.initial{color:#fff;box-shadow:inset 0 0 0 4px rgba(255,255,255,.55),0 6px 16px rgba(0,0,0,.25)}

/* ---- Fan rivalry tug-of-war ---- */
.rivalry{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow)}
.rivalry-title{display:flex;align-items:center;gap:8px;font-weight:900;color:var(--kfa-deep);margin-bottom:10px}
.rivalry-title small{margin-inline-start:auto;font-weight:600;color:var(--kfa-muted,#64748b);font-size:12px}
.rivalry-sides{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.rivalry .rv-side{display:flex;align-items:center;gap:8px;min-width:0}
.rivalry .rv-side b{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--kfa-deep)}
.rivalry .rv-side em{font-style:normal;font-size:13px;color:var(--kfa-muted,#64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rivalry .rv-side.lead b::after{content:" 🔥";font-size:16px}
.rivalry-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:#e2e8f0;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.rivalry-bar i{position:relative;display:block;height:100%;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.rivalry-bar .h{width:var(--hp);background:linear-gradient(90deg,var(--home),color-mix(in srgb,var(--home) 70%,#fff))}
.rivalry-bar .a{flex:1;background:linear-gradient(90deg,color-mix(in srgb,var(--away) 70%,#fff),var(--away))}
.rivalry-bar span{position:absolute;top:50%;transform:translateY(-50%);font-size:10px;font-weight:900;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);padding:0 8px}
.rivalry-bar .h span{inset-inline-start:0}.rivalry-bar .a span{inset-inline-end:0}
.rivalry-note{margin:8px 0 0;font-size:13px;color:var(--kfa-muted,#475569)}
.rivalry.compact{padding:8px 10px;box-shadow:none;background:#f8fbff}
.rivalry.compact .rivalry-sides{margin-bottom:5px}
.rivalry.compact .rv-side b{font-size:14px}
.rivalry.compact .rivalry-bar{height:8px}
.rivalry.compact .rivalry-bar span{display:none}
@media (prefers-reduced-motion:reduce){.rivalry-bar i{transition:none}}

/* ---- «توقع واربح» ---- */
.predict{position:relative;overflow:hidden;border-radius:20px;padding:16px 18px;color:#fff;background:radial-gradient(120% 90% at 50% 0%,#0f6cc0 0%,var(--kfa-deep) 55%,#041f3d 100%);box-shadow:0 14px 34px rgba(6,58,107,.28)}
.predict::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:120%;background:radial-gradient(50% 50% at 50% 50%,rgb(244 196 48 / .18),transparent 70%);pointer-events:none}
.predict-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;position:relative}
.predict-badge{background:#F4C430;color:var(--kfa-deep);font-weight:900;font-size:12px;padding:4px 10px;border-radius:999px;animation:predict-pulse 2.4s ease-in-out infinite}
.predict-head b{font-size:16px}
.predict-head small{margin-inline-start:auto;color:#a9cdf0;font-size:12px}
.predict-board{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:14px 0 6px}
.predict-team{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:800;text-align:center}
.predict-team .team-logo.initial{box-shadow:0 0 0 3px #fff}
.predict-dash{font-size:36px;font-weight:900;color:#F4C430;align-self:end;padding-bottom:10px}
.stepper{display:flex;align-items:center;gap:6px}
.stepper input{width:64px;height:64px;text-align:center;font-size:32px;font-weight:900;border-radius:14px;border:2px solid rgb(255 255 255 / .35);background:rgb(255 255 255 / .1);color:#fff;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.stepper input:disabled{opacity:1;background:#F4C430;color:var(--kfa-deep);border-color:#F4C430}
.stepper input.bump{animation:predict-bump .25s ease}
.stepper button{width:34px;height:34px;border-radius:50%;border:0;background:#fff;color:var(--kfa-deep);font-size:20px;font-weight:900;cursor:pointer;line-height:1}
.predict-go{grid-column:1/-1;background:#F4C430!important;color:var(--kfa-deep)!important;font-weight:900}
.predict-mine{position:relative;margin:8px 0;font-size:14px;color:#e8f3fc}
.predict-mine.muted{color:#a9cdf0}
.predict-stats{position:relative;margin-top:8px}
.predict-split{display:flex;height:10px;border-radius:999px;overflow:hidden;background:rgb(255 255 255 / .15)}
.predict-split .h{background:var(--home)}.predict-split .d{background:#cbd5e1}.predict-split .a{background:var(--away)}
.predict-legend{font-size:12px;color:#cfe3f7;margin-top:5px}
.predict-top{font-size:12px;color:#cfe3f7;margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.predict-top .badge{background:rgb(255 255 255 / .14);color:#fff}
.predict-rules{position:relative;font-size:11.5px;color:#a9cdf0;margin:10px 0 0}
.predict .badge.ok{background:#22c55e;color:#fff}
@keyframes predict-pulse{0%,100%{box-shadow:0 0 0 0 rgb(244 196 48 / .6)}50%{box-shadow:0 0 0 8px rgb(244 196 48 / 0)}}
@keyframes predict-bump{50%{transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.predict-badge,.stepper input.bump{animation:none}}
.voucher{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:2px dashed #F4C430;background:#fffbea}
.voucher b{font-size:15px;color:var(--kfa-deep)}.voucher .code{font-family:monospace;font-weight:800;letter-spacing:1px}
.voucher.off{opacity:.55;border-color:#cbd5e1;background:#f8fafc}
.supports{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.supports label{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:2px solid var(--line);border-radius:14px;cursor:pointer;font-weight:800;text-align:center;font-size:14px}
.supports input{position:absolute;opacity:0;pointer-events:none}
.supports label:has(input:checked){border-color:var(--kfa-azraq);background:var(--kfa-sky,#E8F3FC)}
.supports label:has(input:focus-visible){outline:3px solid var(--kfa-azraq)}
.engage-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;align-items:start}
@media(max-width:900px){.engage-grid{grid-template-columns:1fr}}
.predict-banner{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;color:#fff;text-decoration:none!important;background:linear-gradient(120deg,var(--kfa-deep),#0B5EA8 60%,#0f6cc0);box-shadow:0 10px 26px rgba(6,58,107,.22)}
.predict-banner b{font-size:17px}.predict-banner small{display:block;color:#cfe3f7}
.predict-banner .go{margin-inline-start:auto;background:#F4C430;color:var(--kfa-deep);font-weight:900;padding:8px 14px;border-radius:999px;white-space:nowrap}
.predict-banner .emoji{font-size:34px}

/* ---- General-admission zone panel ---- */
.stadium{position:relative}
.zone-panel{position:absolute;z-index:6;inset-inline-start:12px;bottom:12px;width:min(300px,calc(100% - 24px));background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 16px 40px rgba(6,58,107,.22);display:grid;gap:8px}
.zone-panel p{margin:0;font-size:14px}
.zone-title{font-size:16px;color:var(--kfa-deep)}.zone-title small{font-size:12px;color:var(--kfa-muted,#64748b);font-weight:600}
.zone-left b{color:var(--ok,#16a34a)}
.zone-qty{display:flex;align-items:center;justify-content:center;gap:10px}
.zone-qty input{width:72px;height:48px;text-align:center;font-size:24px;font-weight:900;border-radius:12px}
.zone-qty button{width:40px;height:40px;border-radius:50%;border:0;background:var(--kfa-azraq);color:#fff;font-size:22px;font-weight:900;cursor:pointer}
.stadium .sec.zone{stroke-dasharray:10 6}

/* ---- Best adjacent seats ---- */
.best-seats{display:grid;gap:10px;border:2px solid var(--kfa-sky,#E8F3FC)}
.best-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.best-grid label{display:grid;gap:4px;font-size:13px;font-weight:700;color:var(--kfa-muted,#475569)}
.mini-stepper{display:flex;align-items:center;gap:4px}
.mini-stepper input{width:52px;text-align:center;font-weight:900;font-size:18px;padding:6px}
.mini-stepper button{width:32px;height:32px;border-radius:50%;border:0;background:var(--kfa-azraq);color:#fff;font-weight:900;cursor:pointer}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg span{display:block;text-align:center;padding:8px 4px;font-size:13px;font-weight:700}
.seg input:checked+span{background:var(--kfa-azraq);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--kfa-deep);outline-offset:-3px}
.best-opt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px dashed var(--line)}
.best-opt small{color:var(--kfa-muted,#64748b)}

.transfer{width:100%;max-width:300px}
.transfer>summary{list-style:none;display:inline-flex}
.transfer>summary::-webkit-details-marker{display:none}
.transfer input{width:100%}

/* ---- Match-day card ---- */
.md-hero{border-radius:22px;padding:20px;color:#fff;text-align:center;background:radial-gradient(120% 90% at 50% 0%,#0f6cc0,var(--kfa-deep) 60%,#041f3d);box-shadow:0 14px 34px rgba(6,58,107,.25)}
.md-teams{display:flex;justify-content:center;align-items:center;gap:22px}
.md-teams span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:17px}
.md-teams i{font-style:normal;color:#F4C430;font-size:28px;font-weight:900}
.md-teams .team-logo.initial{box-shadow:0 0 0 3px #fff}
.md-when{color:#cfe3f7;margin:10px 0}
.md-clock{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px;margin-top:6px}
.md-clock div{background:rgb(255 255 255 / .1);border:1px solid rgb(255 255 255 / .18);border-radius:14px;padding:10px 6px}
.md-clock span{display:block;font-size:12px;color:#a9cdf0}
.md-clock b{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums}
.md-clock .js-count{background:#F4C430;color:var(--kfa-deep);border-color:#F4C430}.md-clock .js-count span{color:var(--kfa-deep)}
.md-note{margin:10px 0 0;color:#e8f3fc}
.md-gate-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.md-gate-head .btn{margin-inline-start:auto}
.md-gate-badge{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#F4C430;color:var(--kfa-deep);font-size:24px;font-weight:900}
.md-tickets{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.md-ticket{flex:0 0 min(360px,88%);scroll-snap-align:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow);display:grid;gap:10px}
.md-seat{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.md-seat div{background:var(--kfa-sky,#E8F3FC);border-radius:10px;padding:6px 2px}
.md-seat div:first-child{background:#F4C430}
.md-seat span{display:block;font-size:11px;font-weight:700;color:var(--kfa-muted,#475569)}
.md-seat b{font-size:22px;font-weight:900;color:var(--kfa-deep)}
.md-code svg{width:100%;height:auto}
.md-used{display:block;text-align:center;padding:24px;color:var(--ok,#16a34a);font-size:20px}
.md-rules{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.md-help{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* ---- Fan header: plain text links (no tabs); «بطاقة المشجع» is the only button ---- */
.fan-shell .topbar .container{flex-wrap:nowrap}
.fan-shell .nav a,.fan-shell .language-switch .btn{white-space:nowrap}
.fan-shell .language-switch .btn{background:none;border:0;box-shadow:none;color:#9fc0e3;font-size:13px;font-weight:700;padding:8px 6px}
.fan-shell .language-switch .btn:hover{color:#fff;text-decoration:underline}
@media(min-width:861px){
  .fan-shell .nav{flex-wrap:nowrap;gap:2px;overflow:visible;max-height:none}
  .fan-shell .nav a:not(.nav-cta){position:relative;background:none!important;border-radius:0;padding:8px 10px;color:#c9def3;transition:color .15s}
  .fan-shell .nav a:not(.nav-cta):hover,.fan-shell .nav a:not(.nav-cta).active{color:#fff}
  /* current page: a short line under the text, in the flag green */
  .fan-shell .nav a:not(.nav-cta)::after{content:"";position:absolute;inset-inline:10px;bottom:0;height:3px;border-radius:3px;background:#2ecc71;transform:scaleX(0);transition:transform .2s}
  .fan-shell .nav a:not(.nav-cta).active::after{transform:scaleX(1)}
  .fan-shell .nav a:not(.nav-cta):hover::after{transform:scaleX(.5)}
  .fan-shell .nav a.nav-cta{margin-inline-start:10px;padding:8px 14px;box-shadow:0 2px 10px rgba(0,0,0,.15)}
}
@media(max-width:1180px) and (min-width:861px){.fan-shell .nav a:not(.nav-cta){padding:8px 8px;font-size:13px}.fan-shell .brand small{display:none}}
/* Phone menu: plain rows, current page marked by a side line */
@media(max-width:860px){
  .fan-shell .nav a:not(.nav-cta){background:none!important;border-radius:0;border-inline-start:3px solid transparent}
  .fan-shell .nav a:not(.nav-cta):hover{color:#fff}
  .fan-shell .nav a:not(.nav-cta).active{color:#fff;border-inline-start-color:#2ecc71;background:rgb(255 255 255 / .06)!important}
  .fan-shell .nav a.nav-cta{margin:6px 0 0;justify-content:center}
  .fan-shell .language-switch{align-self:center}
}

/* ---- «أي فريق ستشجع؟» (crowd segregation) ---- */
.side-gate{max-width:760px;margin-inline:auto;width:100%}
.side-gate h2{margin:0 0 4px;font-size:28px}
.side-pick{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:18px 0}
.side-pick.has-neutral{grid-template-columns:1fr auto 1fr}
.side-pick .vs{font-weight:900;color:var(--muted,#64748b);font-size:20px}
.side-pick label{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 12px;border:2px solid var(--line);border-radius:18px;cursor:pointer;background:#fff;font-size:18px;text-align:center;transition:border-color .15s,box-shadow .15s,transform .15s}
.side-pick label:hover{transform:translateY(-2px)}
.side-pick label.neutral{grid-column:1/-1;flex-direction:row;justify-content:center;padding:12px;font-size:15px}
.side-pick label.neutral small{color:var(--muted,#64748b);font-weight:500}
.side-pick .emoji{font-size:28px;line-height:1}
.side-pick input{position:absolute;opacity:0;pointer-events:none}
.side-pick label:has(input:checked){border-color:var(--kfa-azraq,#0B5EA8);box-shadow:0 0 0 4px rgba(11,94,168,.15);background:var(--kfa-sky,#E8F3FC)}
.side-pick label:has(input:checked)::after{content:"✓";position:absolute;top:10px;inset-inline-start:12px;width:24px;height:24px;border-radius:50%;background:var(--kfa-azraq,#0B5EA8);color:#fff;font-size:14px;display:grid;place-items:center}
.side-pick label:has(input:focus-visible){outline:3px solid var(--kfa-azraq,#0B5EA8)}
.side-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.side-bar .emoji{font-size:22px}
@media (max-width:560px){.side-pick{gap:8px}.side-pick label{padding:16px 6px;font-size:15px}.side-gate h2{font-size:23px}}

/* rival stand on the map */
.map .sec.rival{fill-opacity:.28;cursor:not-allowed;stroke-dasharray:6 5}
.map .sec.rival:hover{filter:none}
.dot.rival-dot{background:repeating-linear-gradient(45deg,#94a3b8 0 3px,#e2e8f0 3px 6px)}

/* price / level chips above the map */
.map-filters{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line);background:#fff}
.map-filters .chips{display:flex;flex-wrap:wrap;gap:6px}
.map-filters .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:13px;font-weight:700;color:var(--navy,#0f2a4a);cursor:pointer}
.map-filters .chip[aria-pressed="true"]{background:var(--navy,#0f2a4a);border-color:var(--navy,#0f2a4a);color:#fff}
.map .sec.filtered{opacity:.1;pointer-events:none}
.map .sec-label.filtered{opacity:.12}

/* checkout hold countdown */
.hold-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:10px 16px;border-radius:12px;background:#0f2a4a;color:#fff;font-size:15px}
.hold-bar b{font-size:19px;color:#2ecc71;font-variant-numeric:tabular-nums}
.hold-bar small{opacity:.75}
.hold-bar.urgent b{color:#ff6b6b}
.stadium.has-filters .zoom-ctl{top:118px}
@media (max-width:640px){.stadium.has-filters .zoom-ctl{top:150px}}
.checkout-consents{display:grid;gap:10px;margin-top:16px}

/* staged release («يفتح لاحقًا») */
.map .sec.soon{fill-opacity:.4;cursor:not-allowed;stroke-dasharray:2 4}
.map .sec.soon:hover{filter:none}
.dot.soon-dot{background:repeating-linear-gradient(-45deg,#60a5fa 0 2px,#dbeafe 2px 5px)}
.release-cell{display:grid;gap:4px;min-width:150px}
.release-cell input{padding:5px 8px;font-size:13px}
.release-plan .bar{height:6px;border-radius:6px;background:#e2e8f0;overflow:hidden;margin-top:4px}
.release-plan .bar i{display:block;height:100%;background:#2ecc71}
.release-cell [hidden]{display:none!important}
.release-cell{grid-template-columns:auto auto;align-items:center}.release-cell small{grid-column:1/-1}
.fan-id-barcode .barcode{width:230px;height:46px}@media (max-width:560px){.fan-id-bottom{flex-direction:column;align-items:flex-start}.fan-id-barcode .barcode{width:min(100%,300px)}}

/* scanner: ticket / Fan ID modes */
.scan-modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 10px 0;background:var(--navy)}
.scan-modes button{border:0;border-radius:12px 12px 0 0;padding:11px 6px;font:inherit;font-weight:800;font-size:14px;color:#b9d3ee;background:#08487f;cursor:pointer}
.scan-modes button[aria-selected="true"]{background:#021a33;color:#fff;box-shadow:inset 0 3px 0 #2ecc71}
.fan-panel{margin:0 12px 12px;border-radius:18px;background:#fff;color:#0f2a4a;padding:14px}
.fan-panel .fan-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.fan-panel .fan-head b{font-size:20px;display:block}.fan-panel .fan-head small{color:#64748b}
.fan-badge-form [hidden]{display:none!important}
.fan-badge-line{display:flex;align-items:center;gap:7px;margin:6px 0 8px}.fan-vip-perks{margin:0 0 10px;padding:9px 28px 9px 10px;border-radius:10px;background:#fff7df;color:#624b12;font-size:13px}.fan-vip-perks li+li{margin-top:3px}
.fan-panel .x{width:36px;height:36px;border-radius:50%;border:1px solid #cbd5e1;background:#fff;font-size:20px;cursor:pointer}
.fan-tickets{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px;max-height:34vh;overflow:auto}
.fan-tickets li{display:flex;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:10px;background:#eef6ee;font-size:14px;font-weight:700}
.fan-tickets li.used{background:#f1f5f9;color:#94a3b8;text-decoration:line-through}
.fan-tickets .gate-warn{color:#b45309;font-style:normal}
.fan-admit{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px;font-weight:800}
.fan-stepper{display:inline-flex;align-items:center;border:2px solid #0f2a4a;border-radius:14px;overflow:hidden}
.fan-stepper button{width:48px;height:48px;border:0;background:#0f2a4a;color:#fff;font-size:26px;cursor:pointer}
.fan-stepper output{min-width:54px;text-align:center;font-size:26px}
.scanner.mode-fan .scan-manual input{letter-spacing:.04em;font-size:16px}

/* ---- Fan ID card, design A «الشعار والعلم» — every size in container units (1cqw = 6px at 600px), so phone = desktop ---- */
.fan-card-wrap{container-type:inline-size;width:100%;max-width:600px}
.fan-card{position:relative;overflow:hidden;aspect-ratio:600/378;border-radius:4.667cqw;background:var(--card-bg,var(--kfa-deep));color:var(--card-ink,#fff);font-family:Tajawal,sans-serif;box-shadow:0 22px 48px rgba(6,58,107,.25)}
.fan-card-mark{position:absolute;left:-11.667cqw;top:-5cqw;width:60cqw;height:60cqw;object-fit:contain;opacity:.09;filter:grayscale(1) brightness(2.2);pointer-events:none}
.fan-card-head{position:absolute;top:4.333cqw;inset-inline:5cqw;display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.fan-card-org{display:flex;align-items:center;gap:2cqw}
.fan-card-org img{width:7.667cqw;height:7.667cqw;object-fit:contain}
.fan-card-org b{display:block;font-family:Cairo,Tajawal,sans-serif;font-weight:800;font-size:2.667cqw;line-height:1.3}
.fan-card-org small{display:block;font-size:max(9px,2cqw);color:#C4DCF2;letter-spacing:.04em}
.fan-card-tag{font-family:Cairo,sans-serif;font-weight:800;font-size:2.167cqw;letter-spacing:.22em;padding:1cqw 2cqw;border:.25cqw solid rgba(255,255,255,.6);border-radius:999px}
.fan-card-who{position:absolute;top:22.5cqw;inset-inline:5cqw;display:flex;flex-direction:column;gap:1cqw}
.fan-card-who small{font-size:max(9px,2.167cqw);color:#C4DCF2}
.fan-card-who strong{font-family:Cairo,Tajawal,sans-serif;font-weight:800;font-size:5.667cqw;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-block:.3cqw}
.fan-card-who span{font-family:Cairo,sans-serif;font-weight:600;font-size:3.333cqw;letter-spacing:.16em;color:#E6F0FA;text-align:right}
.fan-card-code{position:absolute;inset-inline:5cqw;bottom:5cqw;height:14cqw;box-sizing:border-box;background:#fff;border-radius:2.667cqw;padding:1.667cqw 2.667cqw;display:flex;align-items:center;gap:2.667cqw;color:var(--kfa-deep)}
.fan-card-code>div{display:flex;flex-direction:column;gap:.667cqw;min-width:20cqw}
.fan-card-code b{font-family:Cairo,Tajawal,sans-serif;font-weight:800;font-size:2.5cqw}
.fan-card-code small{font-size:max(8px,2cqw);color:#475569}
.fan-card-code svg{display:block;flex:1 1 auto;min-width:0;width:100%;height:9.667cqw}
.fan-card-flag{position:absolute;inset-inline:0;bottom:0;height:2cqw;display:var(--id-stripe-display,flex);direction:ltr}
.fan-card-flag i{flex:1 1 0}.fan-card-flag i:nth-child(1){flex:0 0 12%;background:var(--id-s1,#E8B021)}.fan-card-flag i:nth-child(2){background:var(--id-s2,#0B5EA8)}.fan-card-flag i:nth-child(3){background:var(--id-s3,#fff)}.fan-card-flag i:nth-child(4){background:var(--id-s4,#0E7A43)}
.fan-card-who{inset-inline-end:22cqw}
.fan-card-points{position:absolute;top:24.5cqw;inset-inline-end:5cqw;display:flex;flex-direction:column;align-items:flex-end;gap:.5cqw;color:#fff;text-decoration:none}
.fan-card-points small{font-size:max(9px,2.167cqw);color:#C4DCF2}
.fan-card-points strong{font-family:Cairo,Tajawal,sans-serif;font-weight:800;font-size:6cqw;line-height:1;color:#2ECC71}
.fan-card-code small,.fan-card-code b{white-space:nowrap}.fan-card-code>div{min-width:0;flex:0 0 auto}

/* Fan ID card: centred, flips on tap (front = identity + barcode, back = partners) */
.fan-card-wrap{margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.fan-card-flip{position:relative;width:100%;aspect-ratio:600/378;perspective:1600px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fan-card-flip>.fan-card{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.fan-card-flip>.fan-card-back{transform:rotateY(180deg)}
.fan-card-flip.flipped>.fan-card-front{transform:rotateY(-180deg)}
.fan-card-flip.flipped>.fan-card-back{transform:rotateY(0)}
@media (prefers-reduced-motion:reduce){.fan-card-flip>.fan-card{transition:none}}
.fan-card-turn{border:1px solid var(--line);background:#fff;color:var(--navy,#0f2a4a);border-radius:999px;padding:8px 16px;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.fan-card-sponsors{position:absolute;top:19cqw;bottom:12cqw;inset-inline:5cqw;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.333cqw;align-content:center}
.fan-card-sponsors.n1{grid-template-columns:minmax(0,40cqw);justify-content:center}
.fan-card-sponsors.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fan-card-sponsors.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fan-card-sponsors li{background:#fff;border-radius:2.333cqw;height:16cqw;display:flex;align-items:center;justify-content:center;padding:1.667cqw;box-sizing:border-box}
.fan-card-sponsors.n1 li,.fan-card-sponsors.n2 li{height:22cqw}
.fan-card-sponsors a{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.fan-card-sponsors img{max-width:100%;max-height:100%;object-fit:contain}
.fan-card-crest{position:absolute;top:18cqw;bottom:12cqw;inset-inline:0;display:flex;align-items:center;justify-content:center}
.fan-card-crest img{height:100%;object-fit:contain}
.fan-card-terms{position:absolute;bottom:4.5cqw;inset-inline:5cqw;margin:0;text-align:center;font-size:max(9px,2cqw);color:#C4DCF2}
.sponsor-logo{width:96px;height:64px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;border:1px solid var(--line)}
.sponsor-logo img{max-width:86px;max-height:54px;object-fit:contain}
/* card back v3: same navy as the front, the owner's crest in the centre, sponsors underneath by level */
.fan-card-back{background:var(--kfa-deep);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4cqw;padding:4cqw 5cqw 6cqw;box-sizing:border-box}
.fcb-tag{position:absolute;top:4.333cqw;inset-inline-end:5cqw}
.fcb-crest{display:flex;flex-direction:column;align-items:center;gap:1cqw}
.fcb-crest img{height:20cqw;width:auto;object-fit:contain;filter:drop-shadow(0 0 2cqw rgba(255,255,255,.18))}
.fcb-crest b{font-family:Cairo,Tajawal,sans-serif;font-weight:800;font-size:2.4cqw}
.tiers-0 .fcb-crest img{height:30cqw}.tiers-0 .fcb-crest b{font-size:3.2cqw}
.tiers-2 .fcb-crest img,.tiers-3 .fcb-crest img{height:13cqw}.tiers-3 .fcb-crest b{display:none}
.fcb-tiers{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.6cqw}
.fcb-tier{width:100%;display:flex;flex-direction:column;align-items:center;gap:.8cqw}
.fcb-tier small{font-size:max(8px,1.6cqw);font-weight:800;letter-spacing:.12em;color:#C4DCF2}
.fcb-tier ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:1.8cqw;width:100%}
.fcb-tier li{background:#fff;border-radius:1.8cqw;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1cqw 1.6cqw}
.fcb-tier a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.fcb-tier img{max-width:100%;max-height:100%;object-fit:contain}
.fcb-tier.t-main li{width:30cqw;height:11cqw}
.fcb-tier.t-gold li{width:20cqw;height:7.5cqw}
.fcb-tier.t-official li{width:15cqw;height:5.8cqw}
.tiers-3 .fcb-tier.t-main li{height:9cqw}.tiers-3 .fcb-tier.t-gold li{height:6.4cqw}.tiers-3 .fcb-tier.t-official li{height:5cqw}
.fcb-terms{position:absolute;bottom:3.4cqw;inset-inline:5cqw;margin:0;text-align:center;font-size:max(8px,1.6cqw);color:#9FC2E6}
.tiers-3 .fcb-terms{display:none}

/* ---- «تفاعل مع الاتحاد» — the bond between the fan and the federation ---- */
.bond-hero{position:relative;overflow:hidden;border-radius:28px;padding:30px 30px 24px;background:var(--kfa-deep);color:#fff;display:grid;gap:22px}
.bond-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:6px;background:var(--flag-stripe)}
.bond-head h1{margin:4px 0;color:#fff;font-size:clamp(28px,4vw,40px)}
.bond-head p{margin:0;color:#C4DCF2;max-width:640px}
.bond-head .eyebrow{color:#7FB2E5}
.bond-line{position:relative;display:grid;grid-template-columns:120px 1fr 120px;align-items:center;min-height:170px}
.bond-end{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.bond-end b{font-size:16px}.bond-end small{color:#C4DCF2;font-size:12px}
.bond-avatar{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#fff;color:var(--kfa-deep);font-family:Cairo,Tajawal,sans-serif;font-weight:800;font-size:32px;box-shadow:0 0 0 6px rgba(46,204,113,.35)}
.bond-avatar.sm{width:30px;height:30px;font-size:15px;box-shadow:none;background:var(--kfa-deep);color:#fff}
.bond-end.kfa img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,255,255,.25))}
/* two threads woven between the ends, flowing toward each other */
.bond-thread{position:absolute;inset-inline:96px;top:50%;height:22px;transform:translateY(-50%);z-index:1}
.bond-thread i{position:absolute;inset-inline:0;height:3px;border-radius:3px;background-size:28px 3px;animation:bond-flow 1.6s linear infinite}
.bond-thread i:first-child{top:4px;background-image:linear-gradient(90deg,#2ECC71 0 60%,transparent 60%)}
.bond-thread i:last-child{bottom:4px;background-image:linear-gradient(90deg,#fff 0 60%,transparent 60%);animation-direction:reverse;opacity:.75}
@keyframes bond-flow{to{background-position:28px 0}}
.bond-knots{position:relative;z-index:2;grid-column:2;grid-row:1;list-style:none;margin:0;padding:0 18px;display:flex;justify-content:space-around;gap:10px}
.bond-knots li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 12px;min-width:84px;border-radius:16px;background:#0B4A85;border:1px solid #2A6AA8;text-align:center}
.bond-knots strong{font-family:Cairo,Tajawal,sans-serif;font-size:24px;line-height:1;color:#fff}
.bond-knots span{font-size:12px;color:#C4DCF2}
.bond-line .bond-end.you{grid-column:1;grid-row:1}.bond-line .bond-end.kfa{grid-column:3;grid-row:1}
.bond-meter{display:grid;gap:6px;max-width:520px;width:100%;margin-inline:auto}
.bond-meter small{color:#C4DCF2;text-align:center}
.bond-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.bond-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2ECC71,#9BE7B9)}
@media (max-width:760px){
  .bond-hero{padding:24px 18px 22px}
  .bond-line{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:14px;min-height:0}
  .bond-line .bond-end.you{grid-row:1;grid-column:1}.bond-knots{grid-row:2;grid-column:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0}.bond-line .bond-end.kfa{grid-row:3;grid-column:1}
  .bond-thread{inset-inline:auto;left:50%;top:128px;bottom:128px;width:22px;height:auto;transform:translateX(-50%)}
  .bond-thread i{inset-inline:auto;top:0!important;bottom:0!important;width:3px;height:auto;background-size:3px 28px}
  .bond-thread i:first-child{left:4px;background-image:linear-gradient(180deg,#2ECC71 0 60%,transparent 60%);animation-name:bond-flow-v}
  .bond-thread i:last-child{right:4px;background-image:linear-gradient(180deg,#fff 0 60%,transparent 60%);animation-name:bond-flow-v}
}
@keyframes bond-flow-v{to{background-position:0 28px}}
@media (prefers-reduced-motion:reduce){.bond-thread i{animation:none}}
/* the conversation: federation on one side, the fan on the other */
.bond-talk{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.talk-col{display:grid;gap:12px}
.talk-col h2{display:flex;align-items:center;gap:10px;margin:0 0 2px;font-size:20px}
.talk-col h2 img{width:30px;height:30px;object-fit:contain}
.talk-bubble{position:relative;display:block;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid var(--line);color:inherit;text-decoration:none}
.talk-bubble h3{margin:8px 0 4px;font-size:17px}
.talk-bubble p{margin:0;white-space:pre-line;color:#334155}
.talk-bubble small{color:var(--muted,#64748b)}
.from-kfa .talk-bubble{border-start-start-radius:4px;background:#EAF3FC;border-color:#CFE2F5}
.from-you .talk-bubble{border-start-end-radius:4px}
.talk-bubble.quiet p{color:var(--muted,#64748b)}
.talk-bubble.action{display:flex;gap:12px;align-items:center;transition:border-color .15s,transform .15s}
.talk-bubble.action:hover{border-color:#2ECC71;transform:translateY(-1px)}
.talk-bubble.action b{display:block}
.talk-bubble.action small{display:block;margin-top:2px}
.talk-icon{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#E7F8EE;color:#16803C}
@media (max-width:900px){.bond-talk{grid-template-columns:1fr}}
/* the crowd */
.bond-crowd{border-radius:24px;padding:24px;background:#fff;border:1px solid var(--line);text-align:center;display:grid;gap:16px}
.bond-crowd-lead{margin:0;font-size:18px}
.bond-crowd-lead strong{font-family:Cairo,Tajawal,sans-serif;font-size:28px;color:var(--kfa-deep)}
.bond-crowd-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bond-crowd-stats div{display:grid;gap:2px;padding:12px;border-radius:16px;background:#F1F6FB}
.bond-crowd-stats strong{font-family:Cairo,Tajawal,sans-serif;font-size:26px;color:var(--kfa-deep)}
.bond-crowd-stats span{font-size:13px;color:var(--muted,#64748b)}
@media (max-width:560px){.bond-crowd-stats{grid-template-columns:1fr}}
/* assistant on the left in every language */
.chat-fab,.chat-box{inset-inline-start:auto;inset-inline-end:auto;right:auto;left:18px}
/* admin: system identity */
.identity-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1000px){.identity-layout{grid-template-columns:1fr}}
.id-preview{position:relative;overflow:hidden;border-radius:18px;background:var(--p);color:#fff;padding:18px 18px 26px;display:grid;gap:16px}
.id-preview-top{display:flex;align-items:center;gap:10px}.id-preview-top img{width:44px;height:44px;object-fit:contain}
.id-preview-top b{display:block}.id-preview-top small{display:block;opacity:.8}
.id-preview-btn{justify-self:start;background:var(--s);color:#fff;border-radius:12px;padding:9px 16px;font-weight:800}
.id-preview-stripe{position:absolute;inset-inline:0;bottom:0;height:8px;display:flex;direction:ltr}.id-preview-stripe i{flex:1}.id-preview-stripe i:first-child{flex:0 0 12%}
.id-preview-stripe[hidden]{display:none}
.fan-card-flip:focus-visible{outline:3px solid var(--kfa-azraq);outline-offset:4px;border-radius:5cqw}
/* home: one match = wide card, several = smaller tiles side by side */
.events-grid{display:grid;gap:16px}
.events-grid.one{grid-template-columns:minmax(0,1fr)}
.events-grid.many{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.event-card.compact{gap:10px;padding:16px}
.event-card.compact .match-card{gap:6px}
.event-card.compact .match-card .team{font-size:15px}
.event-card.compact .event-meta{font-size:13px;gap:4px 10px}
.event-card.compact .btn.block{padding-block:10px}

/* ---- Store ---- */
.shop-hero{position:relative;overflow:hidden;border-radius:28px;background:var(--kfa-deep);color:#fff;padding:34px 32px 30px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:end}
.shop-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:6px;background:var(--flag-stripe)}
.shop-hero-mark{position:absolute;inset-inline-start:-60px;top:-50px;width:340px;opacity:.07;filter:grayscale(1) brightness(2.5);pointer-events:none}
.shop-hero-text{position:relative}
.shop-hero .eyebrow{color:#7FB2E5;letter-spacing:.18em}
.shop-hero h1{margin:6px 0;color:#fff;font-size:clamp(30px,4.4vw,46px);line-height:1.1}
.shop-hero p{margin:0;color:#C4DCF2;max-width:520px}
.shop-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:8px}
.shop-steps li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-weight:700}
.shop-steps b{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#2ECC71;color:#06331c;font-family:Cairo,Tajawal,sans-serif}
@media (max-width:820px){.shop-hero{grid-template-columns:1fr;padding:26px 20px 24px}}
.shop-filters{display:flex;gap:8px;flex-wrap:wrap}
.shop-filters .chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font:inherit;font-weight:800;font-size:14px;color:var(--kfa-deep);cursor:pointer}
.shop-filters .chip[aria-pressed="true"]{background:var(--kfa-deep);border-color:var(--kfa-deep);color:#fff}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.shop-item{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.shop-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.shop-item[hidden]{display:none}
.shop-item.featured{grid-column:span 2;flex-direction:row}
.shop-item.featured .shop-img{flex:1 1 55%;aspect-ratio:auto;min-height:100%}
.shop-item.featured .shop-body{flex:1 1 45%;justify-content:center}
.shop-item.featured h3{font-size:24px}
@media (max-width:620px){.shop-item.featured{grid-column:auto;flex-direction:column}.shop-item.featured .shop-img{aspect-ratio:4/3}}
.shop-img{position:relative;aspect-ratio:4/3;background:linear-gradient(150deg,var(--kfa-deep),var(--kfa-azraq));overflow:hidden}
.shop-img>img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.shop-item:hover .shop-img>img{transform:scale(1.04)}
.shop-art{position:absolute;inset:0;display:grid;place-items:center}
.shop-art img{width:46%;max-width:150px;opacity:.9;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.shop-art::after{content:"";position:absolute;inset-inline:0;bottom:0;height:5px;background:var(--flag-stripe)}
.shop-ribbon{position:absolute;top:14px;inset-inline-start:14px;background:#F4C430;color:#3a2a00;font-weight:800;font-size:13px;padding:5px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.shop-sold{position:absolute;inset:0;display:grid;place-items:center;background:rgba(2,26,51,.62);color:#fff;font-weight:800;font-size:20px}
.shop-item.out{opacity:.85}
.shop-body{display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px;flex:1}
.shop-body h3{margin:0;font-size:18px;line-height:1.35}
.shop-body p{margin:0;color:var(--muted);font-size:14px}
.shop-match{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12px;font-weight:800;color:var(--kfa-azraq);background:var(--kfa-sky);border-radius:999px;padding:4px 10px}
.shop-match .ico{width:14px;height:14px}
.shop-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto}
.shop-price{font-family:Cairo,Tajawal,sans-serif;font-weight:800;font-size:24px;color:var(--kfa-deep)}
.shop-low{font-size:12px;font-weight:800;color:#b45309}
.shop-buy{display:flex;gap:8px;align-items:stretch}
.shop-buy .btn{flex:1}
.shop-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.shop-qty button{width:36px;height:42px;border:0;background:var(--kfa-sky);color:var(--kfa-deep);font-size:20px;font-weight:800;cursor:pointer}
.shop-qty input{width:42px;border:0;text-align:center;font-weight:800;font-size:16px;-moz-appearance:textfield;padding:0}
.shop-qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.shop-incart{color:#16803C;font-weight:800}
.shop-cartbar{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;margin:18px auto 0;width:min(720px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px;border-radius:18px;background:var(--kfa-deep);color:#fff;box-shadow:var(--shadow-lg)}
.shop-cartbar .ico{width:18px;height:18px;vertical-align:-3px}
.shop-cartbar .btn{background:#2ECC71;color:#06331c}
.shop-cartbar .btn{white-space:nowrap}
@media (max-width:640px){.shop-cartbar{bottom:calc(88px + env(safe-area-inset-bottom));width:calc(100% - 24px);font-size:14px;padding:8px 8px 8px 12px}.shop-steps li{padding:8px 12px}.shop-hero{gap:16px}}

/* ---- تذاكري ---- */
.tix-hero{position:relative;overflow:hidden;border-radius:28px;background:var(--kfa-deep);color:#fff;padding:28px 30px 30px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.3fr) auto;gap:22px;align-items:center}
.tix-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:6px;background:var(--flag-stripe)}
.tix-hero .eyebrow{color:#7FB2E5}
.tix-hero h1{margin:4px 0;color:#fff;font-size:clamp(26px,3.6vw,38px);line-height:1.15}
.tix-phone{color:#C4DCF2;font-size:14px}
.tix-hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tix-hero-stats div{display:grid;gap:2px;padding:12px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);text-align:center}
.tix-hero-stats strong{font-family:Cairo,Tajawal,sans-serif;font-size:26px;line-height:1.1}
.tix-hero-stats strong.tier{font-size:16px;line-height:1.6;color:#F4C430}
.tix-hero-stats span{font-size:12px;color:#C4DCF2}
.tix-hero-actions{display:grid;gap:8px}
@media (max-width:980px){.tix-hero{grid-template-columns:1fr}.tix-hero-actions{grid-auto-flow:column;justify-content:start}}
/* next match: a big ticket with a tear-off stub */
.tix-next{display:grid;grid-template-columns:minmax(0,1fr) 260px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden}
.tix-next-main{padding:24px 26px;display:grid;gap:16px;background:linear-gradient(160deg,#fff 0,var(--kfa-sky) 100%)}
.tix-label{font-size:13px;font-weight:800;color:var(--kfa-azraq);letter-spacing:.04em}
.tix-teams{display:flex;align-items:center;justify-content:space-around;gap:14px}
.tix-teams span{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.tix-teams b{font-size:19px}
.tix-teams i{font-style:normal;font-weight:900;color:var(--muted)}
.tix-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:14px}
.tix-meta .ico{width:16px;height:16px;vertical-align:-3px}
.tix-next-stub{position:relative;padding:22px 20px;display:grid;gap:10px;align-content:center;background:var(--kfa-deep);color:#fff;border-inline-start:3px dashed rgba(255,255,255,.35)}
.tix-next-stub::before,.tix-next-stub::after{content:"";position:absolute;inset-inline-start:-14px;width:26px;height:26px;border-radius:50%;background:var(--bg)}
.tix-next-stub::before{top:-13px}.tix-next-stub::after{bottom:-13px}
.tix-count{display:grid;text-align:center}
.tix-count strong{font-family:Cairo,Tajawal,sans-serif;font-size:46px;line-height:1;color:#2ECC71}
.tix-count span{font-size:13px;color:#C4DCF2}
.tix-seats{justify-self:center;font-weight:800;font-size:14px}.tix-seats .ico{width:16px;height:16px;vertical-align:-3px}
.tix-next-stub .btn.light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
@media (max-width:720px){.tix-next{grid-template-columns:1fr}.tix-next-stub{border-inline-start:0;border-top:3px dashed rgba(255,255,255,.35)}.tix-next-stub::before,.tix-next-stub::after{inset-inline-start:auto;top:-14px;bottom:auto}.tix-next-stub::before{inset-inline-start:-13px}.tix-next-stub::after{inset-inline-end:-13px}}
/* booking stubs */
.tix-h{margin:0;font-size:20px}
.tix-list{display:grid;gap:10px}
.tix-stub{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:18px;background:#fff;border:1px solid var(--line);color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.tix-stub:hover{border-color:var(--kfa-azraq);transform:translateY(-1px)}
.tix-date{flex:0 0 58px;height:58px;border-radius:14px;background:var(--kfa-deep);color:#fff;display:grid;place-content:center;text-align:center;line-height:1.05}
.tix-date b{font-family:Cairo,Tajawal,sans-serif;font-size:24px}.tix-date small{font-size:11px;color:#C4DCF2}
.tix-info{flex:1;min-width:0;display:grid}
.tix-info b{font-size:16px}.tix-info small{color:var(--muted)}
.tix-go{font-weight:800;color:var(--kfa-azraq);white-space:nowrap}
.tix-stub.past{opacity:.8}.tix-stub.past .tix-date{background:#94a3b8}
.tix-past summary{cursor:pointer;font-weight:800;font-size:16px;color:var(--kfa-deep);padding:6px 0}
.tix-past[open] summary{margin-bottom:10px}
.tix-empty{display:grid;justify-items:center;gap:10px;padding:30px 20px;border-radius:22px;border:2px dashed var(--line);background:#fff;text-align:center}
.tix-empty .ico{width:40px;height:40px;color:var(--kfa-azraq)}
.tix-empty p{margin:0;color:var(--muted)}
.tix-hero-actions .btn{white-space:nowrap}@media (max-width:980px){.tix-hero-actions{grid-auto-flow:row;grid-template-columns:1fr 1fr}.tix-hero-actions form .btn{width:100%}}

/* ---- sponsor slots ---- */
.sp-slot{position:relative;display:grid;gap:12px;padding:14px;border-radius:22px;background:#fff;border:1px solid var(--line);overflow:hidden}
.sp-by{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.sp-by img{height:22px;max-width:80px;object-fit:contain}
.sp-media{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:16px;background:#0f172a}
.sp-video .sp-media{aspect-ratio:16/9;max-height:none}
.sp-text{display:grid;gap:6px}
.sp-text h3{margin:0;font-size:18px}
.sp-text p{margin:0;color:var(--muted)}
.sp-cta{justify-self:start}
.sp-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.sp-items li{display:grid;gap:4px;padding:10px;border-radius:14px;background:var(--kfa-sky);text-align:center}
.sp-items img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:10px;background:#fff}
.sp-items small{color:var(--kfa-deep);font-weight:800}
.sp-code{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border:2px dashed var(--kfa-azraq);border-radius:14px;background:var(--kfa-sky)}
.sp-code b{font-family:Cairo,Tajawal,monospace;font-size:20px;letter-spacing:.12em;color:var(--kfa-deep)}
.sp-code.locked{border-color:var(--line);color:var(--muted);font-weight:700}
@media (min-width:760px){.sp-banner,.sp-video,.sp-offer{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center}.sp-banner .sp-by,.sp-video .sp-by,.sp-offer .sp-by{grid-column:1/-1}.sp-offer:not(:has(.sp-media)){grid-template-columns:1fr}}
.event-presented{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.12);font-size:13px;color:#fff}
.event-presented img{height:22px;max-width:90px;object-fit:contain;background:#fff;border-radius:6px;padding:2px 4px}
.md-presented{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;color:var(--muted);font-size:14px}.md-presented img{height:26px;max-width:110px;object-fit:contain}
.ticket-presented{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.9}.ticket-presented img{height:18px;max-width:70px;object-fit:contain;background:#fff;border-radius:4px;padding:1px 3px}

/* ---- اطلب لمقعدك ---- */
.so-hero{position:relative;overflow:hidden;border-radius:24px;background:var(--kfa-deep);color:#fff;padding:24px 24px 26px;display:grid;gap:4px}
.so-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:5px;background:var(--flag-stripe)}
.so-hero .eyebrow{color:#7FB2E5}
.so-hero h1{margin:0;color:#fff;font-size:clamp(26px,4vw,36px)}
.so-hero small{color:#C4DCF2}
.so-seat{margin:6px 0 0;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:18px;color:#2ECC71}
.so-seat .ico{width:20px;height:20px}
.so-vendor{display:grid;gap:12px}
.so-vendor[hidden]{display:none}
.so-vendor-head{display:flex;align-items:center;gap:12px}
.so-vendor-head img{width:52px;height:52px;object-fit:contain;border-radius:12px;background:#fff;border:1px solid var(--line)}
.so-vendor-head b{display:block;font-size:20px}.so-vendor-head small{color:var(--muted)}
.so-cat{margin:6px 0 0;font-size:15px;color:var(--kfa-azraq)}
.so-items{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.so-items li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.so-items img{width:60px;height:60px;object-fit:cover;border-radius:12px}
.so-item-text{flex:1;min-width:0;display:grid}
.so-item-text small{color:var(--muted)}
.so-price{font-weight:800;color:var(--kfa-deep)}
.so-pay{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 16px;border-radius:18px;background:var(--kfa-deep);color:#fff;box-shadow:var(--shadow-lg)}
.so-pay b{font-family:Cairo,Tajawal,sans-serif;font-size:20px}
.so-pay .btn{background:#2ECC71;color:#06331c;white-space:nowrap}
.so-pay .btn:disabled{opacity:.5}
@media (max-width:640px){.so-pay{bottom:calc(88px + env(safe-area-inset-bottom))}}
.so-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.so-steps li{display:grid;justify-items:center;gap:6px;text-align:center;font-size:13px;font-weight:700;color:var(--muted)}
.so-steps i{width:100%;height:8px;border-radius:999px;background:#dbe5ef}
.so-steps li.done{color:var(--kfa-deep)}.so-steps li.done i{background:#2ECC71}
.order-to-seat{display:inline-flex;align-items:center;gap:6px}
.tix-date .ico{width:26px;height:26px}

/* ---- point-of-sale app ---- */
.vendor-app .brand img{border-radius:8px;background:#fff}
.vq{padding:12px;display:grid;gap:12px}
.vq-bar{display:flex;gap:8px;align-items:center}
.vq-bar select{flex:1;min-width:0}
.vq-open{border:0;border-radius:12px;padding:11px 14px;font:inherit;font-weight:800;font-size:14px;background:#7f1d1d;color:#fff;cursor:pointer;white-space:nowrap}
.vq-open.on{background:#16803C}
.vq-tabs{margin:0 -12px;padding-inline:12px}
.vq-tabs b{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.15);font-size:13px;margin-inline-start:4px}
.vq-list{display:grid;gap:12px}
.vq-card{background:#fff;color:#0f172a;border-radius:18px;padding:14px;display:grid;gap:10px;border-inline-start:8px solid #F4C430}
.vq-card.s-preparing{border-color:#38BDF8}.vq-card.s-on_way{border-color:#2ECC71}.vq-card.s-delivered{border-color:#94a3b8;opacity:.75}.vq-card.s-cancelled{border-color:#ef4444;opacity:.65}
.vq-seat{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;font-family:Cairo,Tajawal,sans-serif}
.vq-seat span{font-size:13px;color:#64748b}.vq-seat b{font-size:30px;line-height:1;color:var(--kfa-deep)}
.vq-meta b{display:block;font-size:16px}.vq-meta small{color:#64748b}
.vq-items{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:16px}
.vq-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vq-actions .btn{flex:1}
.vq-total{font-weight:800;font-size:18px;color:var(--kfa-deep)}
.vq-hint{margin:0;color:#b9d3ee}
.vq-prod{display:flex;gap:12px;background:#fff;color:#0f172a;border-radius:16px;padding:12px}
.vq-prod img{width:70px;height:70px;object-fit:cover;border-radius:12px}
.vq-prod-fields{flex:1;display:grid;gap:6px}
.vq-prod.new{border:2px dashed #7FB2E5}
.vq-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.so-knet{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border-radius:14px;background:#FFF6E5;color:#7a4b00;font-weight:700}.so-knet .ico{width:18px;height:18px}.vq-total small{font-size:12px;color:#64748b}
.predict-sponsor{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.14)}.predict-sponsor img{height:20px;max-width:80px;object-fit:contain;background:#fff;border-radius:4px;padding:1px 3px}.predict-prize{margin:6px 0 0;font-size:13px;font-weight:700}
.coupon-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.coupon{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fff;border:2px dashed rgb(var(--kfa-azraq-rgb) / .35)}
.coupon img{width:52px;height:40px;object-fit:contain;flex-shrink:0}
.coupon-text{flex:1;min-width:0;display:flex;flex-direction:column}.coupon-text small{color:#64748b}
.coupon-code{font-weight:800;letter-spacing:.06em;background:var(--kfa-deep);color:#fff;padding:6px 10px;border-radius:8px;font-size:13px}
.redeem-box{max-width:460px;margin:30px auto}
/* Match page: booking leads, rivalry + prediction beside it */
.event-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
.event-layout .side-gate{max-width:none;margin:0}
.event-aside{display:flex;flex-direction:column;gap:16px}
.engage-grid{align-items:stretch}
.engage-grid > .rivalry{display:flex;flex-direction:column;justify-content:center}
@media(max-width:900px){.event-layout{grid-template-columns:1fr}}
/* Fan ID page «منصة البطاقة»: the card on a navy stage with the fan's numbers, then how-to + membership data */
.fid-page{max-width:1160px}
.fid-stage{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;padding:40px 40px 48px;border-radius:28px;color:#fff;background:radial-gradient(90% 120% at 15% 0%,rgb(var(--kfa-azraq-rgb) / .55) 0%,transparent 60%),var(--kfa-deep);box-shadow:0 20px 50px rgb(var(--kfa-deep-rgb) / .25)}
.fid-stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 22px);pointer-events:none}
.fid-flag{position:absolute;inset:auto 0 0 0;height:8px}
.fid-cardcol{position:relative;display:flex;flex-direction:column;gap:12px}
.fid-cardcol .fan-card-wrap{max-width:none}
.fid-cardcol .fan-card{box-shadow:0 24px 48px rgba(0,0,0,.35)}
.fid-hint{margin:0;text-align:center;color:rgba(255,255,255,.75);font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px}
.fid-hint svg{width:16px;height:16px}
.fid-info{position:relative;display:flex;flex-direction:column;gap:16px}
.fid-eyebrow{font-size:12px;font-weight:700;letter-spacing:.04em;color:#9fd0ff}
.fid-info h1{margin:-6px 0 0;font-size:38px;line-height:1.15;color:#fff}
.fid-info p{margin:-6px 0 0;color:rgba(255,255,255,.78);line-height:1.7}
.fid-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fid-stats > *{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;min-width:0}
.fid-stats a:hover{background:rgba(255,255,255,.14)}
.fid-stats strong{font-size:26px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fid-stats .tier strong{font-size:17px;padding-top:6px}
.fid-stats .t-legend strong{color:#E8C255}.fid-stats .t-regular strong{color:#C9D3DE}.fid-stats .t-supporter strong{color:#E2A36B}
.fid-stats span{font-size:12px;color:rgba(255,255,255,.72)}
.fid-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fid-actions form{margin:0}
.fid-actions .btn{width:100%;justify-content:center;min-height:48px}
.fid-btn{background:#fff;color:var(--kfa-deep);border-color:#fff}
.fid-btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.fid-btn.ghost:hover{background:rgba(255,255,255,.1)}
.fid-actions .fid-wallet{grid-column:1/-1;background:#000;border-color:#000;color:#fff}
.fid-note{color:rgba(255,255,255,.62);font-size:12px;line-height:1.6}
.fid-lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;align-items:stretch}
.fid-lower .card{margin:0;display:flex;flex-direction:column;gap:16px}
.fid-lower h2{margin:0;font-size:19px;display:flex;align-items:center;gap:8px}
.fid-lower h2 svg{width:20px;height:20px;color:var(--kfa-azraq)}
.fid-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;flex:1}
.fid-steps li{display:flex;align-items:flex-start;gap:12px}
.fid-steps b{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgb(var(--kfa-azraq-rgb) / .12);color:var(--kfa-deep);font-weight:900}
.fid-steps span{display:flex;flex-direction:column;font-size:13px;color:var(--kfa-muted,#64748b);line-height:1.6}
.fid-steps strong{font-size:15px;color:var(--kfa-deep)}
.fid-warn{margin:0;padding:10px 12px;border-radius:12px;background:#FFF6E5;color:#7a4a07;font-size:13px;display:flex;gap:8px;align-items:flex-start}
.fid-warn svg{width:16px;height:16px;flex:none;margin-top:2px}
.fid-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;align-items:end}
.fid-fields .field{margin:0}
.fid-save{min-height:46px}
@media(max-width:960px){.fid-stage{grid-template-columns:1fr;gap:24px;padding:24px 18px 32px;border-radius:22px}.fid-info h1{font-size:30px}.fid-lower{grid-template-columns:1fr}}
@media(max-width:560px){.fid-stats{gap:8px}.fid-stats > *{padding:10px}.fid-stats strong{font-size:21px}.fid-stats .tier strong{font-size:14px}.fid-fields{grid-template-columns:1fr}.fid-actions .btn{font-size:14px;padding-inline:8px}}
.fid-cardcol .fan-card{outline:1px solid rgba(255,255,255,.16);outline-offset:-1px}
@media(max-width:560px){.fid-actions{grid-template-columns:1fr}.fid-stage{padding:16px 14px 28px}}
.fid-actions .fid-wallet{display:flex;align-items:center;gap:8px}
.fid-wallet.is-soon{opacity:1;cursor:not-allowed;background:#000;color:rgba(255,255,255,.85)}
.fid-soon{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#E8C255;color:#1A1200}
/* Fan ID stage — option A «أبيض»: the navy card stands out on a light stage */
.fid-stage{background:#fff;color:#0F172A;border:1px solid #D6E2EF;box-shadow:0 20px 50px rgb(var(--kfa-deep-rgb) / .10)}
.fid-stage::before{background:repeating-linear-gradient(135deg,rgb(var(--kfa-deep-rgb) / .035) 0 2px,transparent 2px 22px)}
.fid-eyebrow{color:var(--kfa-azraq)}
.fid-info h1{color:var(--kfa-deep)}
.fid-info p{color:#475569}
.fid-stats > *{background:#F1F6FB;border-color:#DCE7F2;color:var(--kfa-deep)}
.fid-stats a:hover{background:#E6EFF8}
.fid-stats span{color:#475569}
.fid-stats .t-legend strong{color:#9A7410}.fid-stats .t-regular strong{color:#475569}.fid-stats .t-supporter strong{color:#A0602A}
.fid-btn{background:var(--kfa-deep);color:#fff;border-color:var(--kfa-deep)}
.fid-btn.ghost{background:transparent;color:var(--kfa-deep);border:1.5px solid #B8CBE0}
.fid-btn.ghost:hover{background:#F1F6FB}
.fid-note,.fid-hint{color:#64748b}
.fid-cardcol .fan-card{outline:none;box-shadow:0 24px 48px rgb(var(--kfa-deep-rgb) / .28)}
/* Arabic glyphs need room: no clipping on the stat tiles */
.fid-stats > *{padding:12px 14px}
.fid-stats strong{line-height:1.35;overflow:visible;white-space:normal;text-overflow:clip}
.fid-stats .tier strong{font-size:17px;padding-top:4px}
.fid-stats span{line-height:1.5}
@media(max-width:560px){.fid-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.fid-stats .tier{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}.fid-stats .tier strong{padding-top:0;font-size:16px}}
/* «نقاطي» */
.pts-page{max-width:1160px}
.pts-stage{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px;align-items:center;padding:36px 40px 44px;border-radius:28px;background:#fff;border:1px solid #D6E2EF;box-shadow:0 20px 50px rgb(var(--kfa-deep-rgb) / .10)}
.pts-stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgb(var(--kfa-deep-rgb) / .035) 0 2px,transparent 2px 22px);pointer-events:none}
.pts-balance,.pts-breakdown{position:relative;display:flex;flex-direction:column;gap:10px}
.pts-balance h1{margin:0;color:var(--kfa-deep);font-size:30px}
.pts-number{display:flex;align-items:baseline;gap:10px;color:var(--kfa-deep)}
.pts-number strong{font-size:84px;font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums}
.pts-number span{font-size:18px;font-weight:700;color:#475569}
.pts-chips{display:flex;gap:8px;flex-wrap:wrap}
.pts-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:#F1F6FB;border:1px solid #DCE7F2;color:var(--kfa-deep);font-size:13px;font-weight:700;text-decoration:none}
.pts-chip svg{width:16px;height:16px}
.pts-chip.up{background:#E7F6EE;border-color:#BFE6CF;color:#0B6B3A}
.pts-breakdown{padding:22px;border-radius:20px;background:#F7FAFD;border:1px solid #E1EAF4}
.pts-breakdown > b{color:var(--kfa-deep)}
.pts-bar{display:flex;height:16px;border-radius:999px;overflow:hidden;background:#E3EBF4;gap:2px}
.pts-bar i{display:block;height:100%}
.pts-legend{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
.pts-legend li{display:flex;align-items:center;gap:8px;font-size:14px;color:#334155}
.pts-legend li i{width:12px;height:12px;border-radius:4px;flex:none}
.pts-legend li b{margin-inline-start:auto;color:var(--kfa-deep);font-variant-numeric:tabular-nums}
.g-attend{--g:#0E7A43}.g-predict{--g:#D99A0B}.g-feedback{--g:#0B5EA8}.g-store{--g:#C2410C}.g-draw{--g:#6D3FC4}.g-empty{--g:#E3EBF4}
.pts-bar i,.pts-legend li i{background:var(--g)}
.pts-h{margin:0;font-size:20px;color:var(--kfa-deep)}
.pts-earn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pts-earn a{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);color:inherit;text-decoration:none;border-top:4px solid var(--g);transition:transform .15s}
.pts-earn a:hover{transform:translateY(-2px)}
.pts-earn b{font-size:16px;color:var(--kfa-deep);margin-top:6px}
.pts-earn small{font-size:13px;color:#64748b;line-height:1.5}
.pts-earn em{position:absolute;top:16px;inset-inline-end:16px;font-style:normal;font-weight:900;font-size:20px;color:var(--g)}
.pts-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--g) 13%,#fff);color:var(--g)}
.pts-ico svg{width:22px;height:22px}
.pts-ledger{display:flex;flex-direction:column;gap:6px}
.pts-month{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;font-weight:700;color:#64748b}
.pts-month b{color:#0B6B3A}
.pts-list{list-style:none;margin:0;padding:0}
.pts-list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed #E3EBF4}
.pts-list li:last-child{border-bottom:none}
.pts-what{display:flex;flex-direction:column;flex:1;min-width:0}
.pts-what b{color:var(--kfa-deep);font-size:15px}
.pts-what small{color:#64748b;font-size:12px}
.pts-list strong{padding:4px 12px;border-radius:999px;background:#E7F6EE;color:#0B6B3A;font-variant-numeric:tabular-nums}
.pts-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 0;text-align:center;color:#64748b}
.pts-empty svg{width:40px;height:40px;color:var(--kfa-azraq)}
@media(max-width:960px){.pts-stage{grid-template-columns:1fr;gap:20px;padding:22px 18px 30px;border-radius:22px}.pts-earn{grid-template-columns:repeat(2,minmax(0,1fr))}.pts-number strong{font-size:64px}}
@media(max-width:560px){.pts-earn{gap:10px}.pts-earn a{padding:14px}.pts-legend{grid-template-columns:1fr 1fr;gap:6px 14px}}
.pts-value{margin:0;color:#475569;font-size:14px}.pts-value b{color:var(--kfa-deep)}
/* «تفاعل مع الاتحاد» — white stage like بطاقة المشجع / نقاطي */
.eng-page{max-width:1160px}
.eng-stage{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:center;padding:36px 40px 44px;border-radius:28px;background:#fff;border:1px solid #D6E2EF;box-shadow:0 20px 50px rgb(var(--kfa-deep-rgb) / .10)}
.eng-stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgb(var(--kfa-deep-rgb) / .035) 0 2px,transparent 2px 22px);pointer-events:none}
.eng-bond,.eng-stats{position:relative}
.eng-bond{display:flex;flex-direction:column;gap:10px}
.eng-bond h1{margin:0;font-size:34px;line-height:1.25;color:var(--kfa-deep)}
.eng-bond > p{margin:0;color:#475569;line-height:1.7}
.eng-meter{display:flex;align-items:center;gap:18px;margin-top:8px}
.eng-ring{--p:0;flex:none;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--flag-green,#0B5EA8) calc(var(--p)*1%),#E3EBF4 0)}
.eng-ring span{width:92px;height:92px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.eng-ring b{font-size:26px;font-weight:900;color:var(--kfa-deep);line-height:1.2}
.eng-ring small{font-size:11px;color:#64748b}
.eng-meter-text{display:flex;flex-direction:column;gap:4px}
.eng-meter-text small{color:#64748b;font-size:13px;line-height:1.6}
.eng-tier{align-self:flex-start;padding:5px 14px;border-radius:999px;font-weight:800;font-size:14px;background:#F1F6FB;color:var(--kfa-deep);border:1px solid #DCE7F2}
.eng-tier.t-legend{background:#FBF3DA;color:#7A5A06;border-color:#EBD9A0}.eng-tier.t-supporter{background:#FBEEE3;color:#8A4A17;border-color:#EFD3BC}
.eng-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.eng-stats a{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:18px;background:#F7FAFD;border:1px solid #E1EAF4;color:inherit;text-decoration:none;transition:transform .15s}
.eng-stats a:hover{transform:translateY(-2px);background:#fff}
.eng-stats strong{font-size:30px;font-weight:900;line-height:1.3;color:var(--kfa-deep);font-variant-numeric:tabular-nums;margin-top:6px}
.eng-stats small{color:#64748b;font-size:13px}
.eng-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.eng-actions,.eng-feed{display:flex;flex-direction:column;gap:10px}
.eng-act{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);color:inherit;text-decoration:none;border-inline-start:4px solid var(--g);transition:transform .15s}
.eng-act:hover{transform:translateX(-3px)}
.eng-act-text{display:flex;flex-direction:column;flex:1;min-width:0}
.eng-act-text b{color:var(--kfa-deep);font-size:15px;line-height:1.5}
.eng-act-text small{color:#64748b;font-size:12px}
.eng-act em{font-style:normal;font-weight:900;font-size:17px;color:var(--g)}
.eng-done{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#E7F6EE;color:#0B6B3A;font-weight:900}
.pts-h .eng-logo{width:26px;height:26px;object-fit:contain;vertical-align:middle}
.eng-news{padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.eng-news h3{margin:8px 0 4px;font-size:16px;color:var(--kfa-deep)}
.eng-news p{margin:0;color:#475569;font-size:14px;line-height:1.7}
.eng-news small{color:#64748b}
.eng-news.is-draw{background:#FFFBEF;border-color:#F1E2B4}
.eng-news.quiet{display:flex;align-items:center;gap:10px;color:#64748b;box-shadow:none;background:#F7FAFD}
.eng-news.quiet svg{width:22px;height:22px;flex:none}
.eng-crowd{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 28px;border-radius:22px;background:var(--kfa-deep);color:#fff}
.eng-crowd p{margin:0;font-size:18px}.eng-crowd p strong{font-size:28px;font-weight:900;color:#fff}
.eng-crowd > div{display:flex;gap:28px;flex-wrap:wrap}
.eng-crowd span{display:flex;flex-direction:column;font-size:12px;color:rgba(255,255,255,.75)}
.eng-crowd span b{font-size:22px;color:#fff;font-weight:900}
@media(max-width:960px){.eng-stage{grid-template-columns:1fr;gap:22px;padding:22px 18px 30px;border-radius:22px}.eng-bond h1{font-size:28px}.eng-grid{grid-template-columns:1fr}}
@media(max-width:560px){.eng-ring{width:100px;height:100px}.eng-ring span{width:78px;height:78px}.eng-ring b{font-size:22px}.eng-stats{gap:10px}.eng-stats a{padding:12px}.eng-stats strong{font-size:24px}.eng-crowd{padding:18px}.eng-crowd > div{gap:18px}}
/* «تفاعل مع الاتحاد» v2 — explained bond, level ladder, how points work */
.eng-stage{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch}
.eng-bond > p{max-width:60ch}
.eng-meter{align-items:center;gap:22px}
.eng-parts{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.eng-parts > b{color:var(--kfa-deep);font-size:14px}
.eng-part{display:grid;grid-template-columns:110px minmax(0,1fr) 48px;align-items:center;gap:10px;font-size:13px;color:#334155}
.eng-part i{display:block;height:10px;border-radius:999px;background:#E3EBF4;overflow:hidden}
.eng-part em{display:block;height:100%;border-radius:999px;background:var(--g)}
.eng-part small{color:#64748b;font-variant-numeric:tabular-nums;text-align:end}
.eng-tip{display:flex;align-items:center;gap:8px;margin:6px 0 0;padding:10px 14px;border-radius:12px;background:#E7F6EE;color:#0B5D33;font-size:14px;font-weight:600}
.eng-tip svg{width:18px;height:18px;flex:none}
.eng-ladder{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:20px;background:#F7FAFD;border:1px solid #E1EAF4}
.eng-ladder > b{color:var(--kfa-deep);font-size:16px}
.eng-ladder > p{margin:0;color:#64748b;font-size:13px;line-height:1.6}
.eng-ladder ol{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;position:relative}
.eng-ladder li{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px}
.eng-ladder li > span:nth-child(2){display:flex;flex-direction:column;flex:1}
.eng-ladder li strong{color:#64748b;font-size:15px}
.eng-ladder li small{color:#94a3b8;font-size:12px}
.eng-step{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:#fff;border:2px dashed #C9D6E3;color:#94a3b8}
.eng-step svg{width:18px;height:18px}
.eng-ladder li.is-done strong{color:var(--kfa-deep)}
.eng-ladder li.is-done .eng-step{border-style:solid;border-color:#0E7A43;color:#0E7A43}
.eng-ladder li.is-now{background:#fff;box-shadow:0 6px 18px rgb(var(--kfa-deep-rgb) / .10);border:1px solid #DCE7F2}
.eng-ladder li.is-now strong{color:var(--kfa-deep)}
.eng-ladder li.is-now .eng-step{background:var(--kfa-deep);border:none;color:#fff}
.eng-ladder li em{font-style:normal;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;background:#FBF3DA;color:#7A5A06}
.eng-next{margin:0;padding-top:4px;color:var(--kfa-deep)!important;font-weight:700;font-size:14px!important}
.eng-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.eng-stats a{flex-direction:row;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.eng-stats a > span:last-child{display:flex;flex-direction:column}
.eng-stats strong{margin-top:0;font-size:26px}
.eng-sub{margin:2px 0 0;color:#64748b;font-size:14px;line-height:1.6}
.eng-how{display:flex;flex-direction:column;gap:12px;margin:0}
.eng-how ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.eng-how li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:#F7FAFD;border-inline-start:4px solid var(--g);font-size:14px;color:#334155}
.eng-how li b{color:var(--g);font-size:16px}
.eng-how .btn{align-self:flex-start}
@media(max-width:960px){.eng-stage{grid-template-columns:1fr}.eng-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.eng-meter{flex-direction:column;align-items:stretch}.eng-ring{align-self:center}.eng-part{grid-template-columns:96px minmax(0,1fr) 44px}.eng-stats a{padding:12px;gap:10px}.eng-stats strong{font-size:22px}.eng-ladder{padding:16px}}
/* «رحلتك مع الاتحاد» (engagement, option B) */
.jr{max-width:1160px}
.jr-hero{position:relative;background:#fff;border:1px solid #D6E2EF;border-radius:28px;padding:36px 40px 48px;box-shadow:0 20px 50px rgb(var(--kfa-deep-rgb) / .1);overflow:hidden}
.jr-hero h1{margin:4px 0 6px;color:var(--kfa-deep);font-size:34px}.jr-hero > p{margin:0;color:#475569;max-width:70ch;line-height:1.8}
.jr-road{position:relative;margin:44px 10px 8px;height:150px}
.jr-line{position:absolute;top:34px;inset-inline:40px;height:10px;border-radius:999px;background:repeating-linear-gradient(90deg,#E3EBF4 0 18px,#F1F5F9 18px 26px)}
.jr-line i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:999px;background:linear-gradient(90deg,#0E7A43,#16A35A)}
.jr-stops{position:absolute;inset:0;display:flex;justify-content:space-between}
.jr-stop{width:110px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.jr-dot{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px dashed #C9D6E3;color:#94a3b8;font-weight:900;font-size:20px}
.jr-stop.done .jr-dot{border:3px solid #0E7A43;color:#0E7A43}
.jr-stop.now .jr-dot{background:var(--kfa-deep);border:4px solid #E8C255;color:#fff;box-shadow:0 10px 24px rgb(var(--kfa-deep-rgb) / .3)}
.jr-dot svg{width:30px;height:30px}
.jr-stop b{color:var(--kfa-deep);font-size:15px}.jr-stop small{color:#64748b;font-size:12px}
.jr-next{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:10px;padding:16px 20px;border-radius:16px;background:#F7FAFD;border:1px solid #E1EAF4}
.jr-next p{margin:0;color:var(--kfa-deep);font-weight:700}.jr-next small{display:block;font-weight:400;color:#64748b;margin-top:2px}
.jr-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.jr-how article{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;border-top:4px solid var(--g)}
.jr-how h3{margin:4px 0 0;color:var(--kfa-deep);font-size:17px}.jr-how p{margin:0;color:#475569;font-size:14px;line-height:1.7}
.jr-how .jr-count{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;border-top:1px dashed #E3EBF4;font-size:13px;color:#64748b}
.jr-how .jr-count b{font-size:22px;color:var(--kfa-deep)}
.jr-cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:start}
.jr-time{list-style:none;margin:0;padding:0;position:relative}
.jr-time::before{content:"";position:absolute;inset-block:8px;inset-inline-start:21px;border-inline-start:2px dashed #C9D6E3}
.jr-time li{position:relative;display:flex;gap:14px;padding:0 0 16px}
.jr-time .pts-ico{position:relative;z-index:1;background:#fff;border:2px solid var(--g);color:var(--g)}
.jr-card{flex:1;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);display:flex;justify-content:space-between;gap:12px;align-items:center;color:inherit;text-decoration:none}
.jr-card b{color:var(--kfa-deep)}.jr-card small{display:block;color:#64748b;font-size:12px;margin-top:2px;line-height:1.6}
.jr-card em{font-style:normal;font-weight:900;color:var(--g);white-space:nowrap}
@media(max-width:900px){.jr-how,.jr-cols{grid-template-columns:1fr}.jr-hero{padding:22px 18px 34px}.jr-stop{width:70px}.jr-dot{width:54px;height:54px;font-size:16px}.jr-line{top:22px}.jr-hero h1{font-size:27px}}
.jr-crowd{flex-direction:column;align-items:flex-start}
@media(max-width:560px){.jr-how{gap:10px}.jr-how article{padding:16px;gap:6px}.jr-how .jr-count{padding-top:8px}}
.fan-membership-badge{position:absolute;top:14cqw;inset-inline-end:5cqw;display:inline-flex;align-items:center;gap:1.2cqw;border-radius:999px;padding:1cqw 2.2cqw;font:800 2.6cqw Cairo,Tajawal,sans-serif;box-shadow:0 2px 10px #00172d55;white-space:nowrap}.fan-membership-badge svg{width:3.2cqw;height:3.2cqw}.badge-label{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:900;white-space:nowrap}.badge-none{background:#e8edf2;color:#495767;border:1px solid #cbd5df}.badge-bronze{background:linear-gradient(135deg,#f3d3b7,#b87442);color:#432510;border:1px solid #a86636}.badge-silver{background:linear-gradient(135deg,#fff,#aeb8c3);color:#263544;border:1px solid #9aa7b4}.badge-gold{background:linear-gradient(135deg,#fff0ae,#d4a600);color:#503900;border:1px solid #bc9200}.badge-platinum{background:linear-gradient(135deg,#fff,#b6c4d2);color:#1f3447;border:1px solid #93a6ba;box-shadow:0 0 0 1px #eef4fa inset}.fan-badge-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;color:var(--muted,#475569)}.fan-badge-status small{flex-basis:100%}.fan-badge-row{gap:12px}.fan-badge-person{gap:12px}.fan-badge-person>div{display:grid;gap:3px}.fan-badge-person small,.fan-badge-meta small{color:var(--muted,#64748b)}.fan-badge-form{display:grid;grid-template-columns:minmax(150px,1fr) minmax(180px,2fr) auto;align-items:end;gap:10px}.fan-badge-form .field{margin:0}.fan-badge-search input{flex:1;min-width:220px}.fan-badge-thresholds{gap:8px}
@media(max-width:680px){.fan-badge-form{grid-template-columns:1fr}.fan-badge-meta{align-items:flex-start;flex-direction:column}.fan-badge-search{align-items:stretch}.fan-badge-search input{min-width:0}}
.badge-vip{background:linear-gradient(135deg,#fff3cc,#e7bd57);color:#4f3100;border:1px solid #b58316;box-shadow:0 0 0 1px #fff8e3 inset}.fan-membership-badge.badge-vip{background:linear-gradient(135deg,#fff3cc,#e7bd57);color:#4f3100;border:1px solid #b58316}.fan-vip-benefits{margin:10px 0;padding:12px 16px;border:1px solid #ead9a8;border-radius:14px;background:#fffaf0;color:#594719}.fan-vip-benefits h2{margin:0 0 6px;font-size:16px}.fan-vip-benefits ul{margin:0;padding-inline-start:20px}
/* «ضبط الشعار»: every sponsor logo sits centred at equal visual weight; a light logo gets a dark tile */
.fcb-tier li img{object-fit:contain;max-width:100%;max-height:100%}
.fcb-tier li.on-dark{background:#0b1f36;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.sp-preview-grid{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.sp-preview-grid figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.sp-preview-grid figcaption{font-size:12px;color:#64748b}
.sp-raw{width:220px;height:120px;display:grid;place-items:center;border-radius:12px;background:repeating-conic-gradient(#e8edf3 0 25%,#fff 0 50%) 0 0/16px 16px;border:1px solid #dbe4ee}
.sp-raw img{max-width:90%;max-height:90%;object-fit:contain}
.sp-card{container-type:inline-size;width:420px;padding:16px;border-radius:16px;background:var(--kfa-deep)}
.sp-card .fcb-tier small{color:#C4DCF2}
.fcb-tier li{padding:.5cqw .9cqw}
.sp-card figcaption{color:#C4DCF2}
/* راعٍ فضي (حتى 5) between الذهبي and الرسمي */
.fcb-tier.t-silver li{width:16cqw;height:6cqw}
.tiers-3 .fcb-tier.t-silver li{height:5.2cqw}
.tiers-4{gap:1.4cqw;padding-top:3cqw;padding-bottom:4.5cqw}
.tiers-4 .fcb-crest img{height:9cqw}.tiers-4 .fcb-crest b,.tiers-4 .fcb-terms{display:none}
.tiers-4 .fcb-tiers{gap:1.1cqw}.tiers-4 .fcb-tier{gap:.5cqw}
.tiers-4 .fcb-tier small{font-size:max(7px,1.4cqw)}
.tiers-4 .fcb-tier.t-main li{width:28cqw;height:7.6cqw}
.tiers-4 .fcb-tier.t-gold li{width:19cqw;height:5.6cqw}
.tiers-4 .fcb-tier.t-silver li{width:15.5cqw;height:4.8cqw}
.tiers-4 .fcb-tier.t-official li{width:14cqw;height:4.3cqw}
.tiers-4 .fcb-tier ul{gap:1.4cqw}

/* ========== مدرج الرابطة ========== */
.grp-page{--g:var(--kfa-azraq)}
.grp-back{font-weight:700;font-size:14px;color:var(--blue)}
.grp-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;padding:36px 36px 44px;border-radius:28px;background:#fff;border:1px solid #D6E2EF;box-shadow:0 20px 50px rgb(var(--kfa-deep-rgb) / .10)}
.grp-hero h1{margin:6px 0 10px;font-size:clamp(28px,4vw,40px);color:var(--navy)}
.grp-hero p{margin:0;color:#42536B;line-height:1.8}
.grp-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.grp-steps li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--kfa-tint);border:1px solid #E3ECF5;font-weight:600;color:var(--navy)}
.grp-steps b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-size:14px}
.grp-steps li:last-child b{background:var(--gold);color:var(--navy)}
.grp-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.grp-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);border-inline-start:5px solid var(--g);color:inherit;text-decoration:none!important;transition:box-shadow .15s,transform .15s}
.grp-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.grp-card>div{flex:1;min-width:0;display:grid;gap:2px}
.grp-card b{color:var(--navy)}.grp-card small{color:var(--muted)}
.grp-logo{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;object-fit:contain;background:#fff;border:1px solid #E3ECF5;color:#fff;font-weight:800;font-size:22px}
span.grp-logo{border:0;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.grp-num{background:var(--g)!important;font-size:15px}
.grp-grid{display:grid;gap:4px 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));align-items:end}
.grp-submit{display:flex;align-items:end}
.grp-head{position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:22px 24px;border-radius:22px;background:#fff;border:1px solid #D6E2EF;box-shadow:var(--shadow);overflow:hidden}
.grp-head::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:8px;background:var(--g)}
.grp-head .grp-logo{width:64px;height:64px;font-size:28px}
.grp-head>div{flex:1;min-width:220px}
.grp-head h1{margin:2px 0 4px;font-size:clamp(22px,3vw,30px);color:var(--navy)}
.grp-head p{margin:0;color:#42536B;line-height:1.7}
.grp-head-side{flex:0 1 300px!important;display:grid;gap:10px;justify-items:end}
.grp-stats{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.grp-stats li{display:grid;justify-items:center}
.grp-stats b{font-size:24px;color:var(--navy);line-height:1.2}.grp-stats b small{font-size:13px;color:var(--muted)}
.grp-stats span{font-size:12px;color:var(--muted)}
.grp-meter{width:100%;height:8px;border-radius:99px;background:#E3ECF5;overflow:hidden}
.grp-meter i{display:block;height:100%;border-radius:inherit;background:var(--g);min-width:4px}
.grp-release{display:flex;align-items:center;gap:6px;margin:0}
.grp-release .ico{width:16px;height:16px}
.grp-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:20px;align-items:start}
.grp-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.grp-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:#42536B}
.grp-legend span{display:inline-flex;align-items:center;gap:6px}
.grp-legend .seat{width:14px;height:14px;display:inline-block}
.grp-stand{display:grid;gap:8px;padding:14px;border-radius:16px;background:linear-gradient(#F8FBFE,#EEF4FA);border:1px solid #E3ECF5;overflow:auto}
.grp-pitch{text-align:center;font-size:12px;font-weight:700;color:#fff;padding:6px;border-radius:10px;background:repeating-linear-gradient(90deg,#2E8B57 0 24px,#33975F 24px 48px);letter-spacing:.05em}
.grp-seats{display:grid;grid-template-columns:repeat(var(--cols),minmax(6px,1fr));gap:3px;max-width:calc(var(--cols) * 30px);width:100%;margin-inline:auto}
.seat{position:relative;aspect-ratio:1;border-radius:4px 4px 2px 2px;background:#CBD5E1;cursor:default;margin:0}
.seat input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seat.s-free{background:#fff;box-shadow:inset 0 0 0 2px var(--g);cursor:pointer}
.seat.s-free[style*="--tc"]{background:color-mix(in srgb,var(--tc) 30%,#fff)}
.seat.s-free:hover{background:color-mix(in srgb,var(--g) 30%,#fff)}
.seat.s-free.on{background:var(--g);box-shadow:inset 0 0 0 2px var(--navy),0 0 0 2px #fff}
.seat.s-free:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:1px}
.seat.s-sold,.seat.s-held,.seat.s-blocked{background:#94A3B8}
.seat.s-sold[style*="--tc"],.seat.s-held[style*="--tc"],.seat.s-blocked[style*="--tc"]{background:var(--tc)}
.seat.s-mine,.seat.s-cart{background:var(--tc,var(--gold));box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--gold);z-index:1}
.seat.s-pick{background:var(--g)}
.seat.s-other{background:#E2E8F0}
.seat.s-t{background:var(--tc,#CBD5E1);border-radius:2px}
.grp-tifo-mini{flex-basis:100%;display:grid;gap:6px}
.grp-tifo-mini .grp-stand{background:#0F1D30;border:0;padding:10px}
.grp-tifo-mini .grp-seats{gap:2px}
@media (max-width:600px){.grp-seats{gap:2px}.tifo-grid{gap:1px}.grp-stats{gap:12px}.grp-pickbar{flex-wrap:wrap}}
.seat.s-tifo{background:linear-gradient(135deg,#E8B021 0 33%,#F4F7FB 33% 66%,#0B5EA8 66%)}
.grp-pickbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 10px;border-radius:14px;background:var(--navy);color:#fff;box-shadow:var(--shadow-lg)}
.grp-link{display:flex;gap:8px}
.grp-link input{flex:1;min-width:0}
.grp-invite-box{display:grid;gap:10px;border-top:4px solid var(--g)}
.grp-invite-box .pts-h{margin:0}
.grp-cancel{color:var(--bad);font-size:13px;font-weight:700}
.grp-tifo-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,#fff 60%,color-mix(in srgb,var(--g) 12%,#fff))}
.grp-tifo-card .pts-h{margin:0 0 6px}
.grp-tifo-actions{display:flex;gap:8px;flex-wrap:wrap}
.grp-mycolor{display:grid;gap:6px;margin:4px 0}
.grp-mycolor span{display:flex;align-items:center;gap:8px;font-weight:600}
.grp-mycolor i{width:26px;height:26px;border-radius:7px;border:1px solid rgba(0,0,0,.2)}
.grp-chat{position:sticky;top:84px;display:flex;flex-direction:column;gap:10px;height:min(640px,calc(100vh - 110px));padding:16px}
.grp-chat .grp-msgs{flex:1}
.grp-chat-head{display:flex;align-items:baseline;justify-content:space-between}
.grp-chat-head .pts-h{margin:0}
.grp-tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--kfa-tint);border:1px solid #E3ECF5}
.grp-tabs button{flex:1;border:0;background:none;padding:7px 4px;border-radius:9px;font:inherit;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer}
.grp-tabs button.on{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgb(var(--kfa-deep-rgb) / .12)}
.grp-pin{padding:8px 10px;border-radius:10px;background:#FFF8E1;border:1px solid #F3DFB5;font-size:13px;font-weight:600;color:#7A4A07}
.grp-msgs{list-style:none;margin:0;padding:4px;overflow:auto;display:flex;flex-direction:column;gap:8px;min-height:0}
.grp-pin[hidden],.grp-send[hidden],.grp-chat-note[hidden]{display:none}
.grp-msgs .msg{max-width:85%;align-self:flex-start;padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--kfa-tint);border:1px solid #E3ECF5}
.grp-msgs .msg.mine{align-self:flex-end;background:color-mix(in srgb,var(--g) 14%,#fff);border-color:color-mix(in srgb,var(--g) 30%,#fff);border-radius:14px 14px 4px 14px}
.grp-msgs .msg.hidden{opacity:.45}
.grp-msgs .msg.pinned{box-shadow:inset 0 0 0 2px #F2C230}
.grp-msgs .who{display:flex;align-items:center;gap:6px;font-size:12px}
.grp-msgs .who b{color:var(--navy)}
.grp-msgs .who time{color:var(--muted);margin-inline-start:auto}
.grp-msgs .role{padding:0 6px;border-radius:99px;font-size:11px;font-weight:700;background:var(--sky);color:var(--blue)}
.grp-msgs .role.captain{background:var(--gold);color:var(--navy)}
.grp-msgs p{margin:3px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.grp-msgs .tools{display:flex;gap:8px;margin-top:4px}
.grp-msgs .tools button{border:0;background:none;padding:0;font:inherit;font-size:11px;font-weight:700;color:var(--blue);cursor:pointer}
.grp-msgs .empty{margin:auto;color:var(--muted);font-size:14px}
.grp-send{display:flex;gap:8px}
.grp-send input{flex:1;min-width:0}
.grp-chat-note{margin:0;text-align:center}
.grp-invite-wrap{display:grid;place-items:center;padding-block:24px}
.grp-invite{position:relative;width:min(100%,460px);display:grid;justify-items:center;gap:12px;text-align:center;padding:32px 28px;border-radius:28px;background:#fff;border:1px solid #D6E2EF;box-shadow:0 20px 50px rgb(var(--kfa-deep-rgb) / .12);border-top:8px solid var(--g)}
.grp-invite .grp-logo{width:84px;height:84px;font-size:36px;border-radius:22px}
.grp-invite h1{margin:0;color:var(--navy)}
.grp-invite-match{margin:0;font-weight:700;color:var(--navy)}.grp-invite-match small{font-weight:500;color:var(--muted)}
.grp-invite form,.grp-invite .alert{width:100%;margin:0}
.grp-confirm{display:grid;gap:10px;justify-items:start;margin-top:12px}
.grp-confirm p{margin:0;font-weight:600;color:var(--navy)}
.grp-preview{display:grid;gap:10px}
/* Event page panel */
.grp-event{display:grid;gap:10px}
.grp-event .grp-card{padding:10px 12px}
.grp-event .grp-logo{width:40px;height:40px;font-size:18px}
/* Tifo designer */
.tifo-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:20px;align-items:start}
.tifo-board{display:grid;gap:14px}
.tifo-tools{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.tifo-palette{display:flex;gap:6px}
.tifo-palette button{width:34px;height:34px;border-radius:10px;border:2px solid #fff;background:var(--c);box-shadow:0 0 0 1px #CBD5E1;cursor:pointer}
.tifo-palette button.on{box-shadow:0 0 0 3px var(--navy)}
.tifo-palette .eraser{background:repeating-conic-gradient(#E2E8F0 0 25%,#fff 0 50%) 0 0/10px 10px;font-size:14px}
.tifo-modes{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:var(--kfa-tint);border:1px solid #E3ECF5}
.tifo-modes button{border:0;background:none;padding:6px 10px;border-radius:8px;font:inherit;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}
.tifo-modes button.on{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgb(var(--kfa-deep-rgb) / .12)}
.tifo-modes button:hover{color:var(--navy)}
.tifo-stage{display:grid;gap:8px;padding:16px;border-radius:16px;background:#0F1D30;perspective:900px;overflow:hidden}
.tifo-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(6px,1fr));gap:2px;width:100%;max-width:calc(var(--cols) * 28px);margin-inline:auto;touch-action:none;user-select:none;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-origin:50% 100%}
.tifo-grid i{aspect-ratio:1;border-radius:3px;background:#2A3A52;cursor:crosshair}
.tifo-grid i.blank{background:#2A3A52}
.tifo-stage .grp-pitch{transition:transform .6s}
.tifo-stage.view-3d .tifo-grid{transform:rotateX(38deg) scale(.92);gap:1px}
.tifo-stage.view-3d .tifo-grid i{border-radius:0;box-shadow:none}
.tifo-stage.view-3d{background:radial-gradient(120% 80% at 50% 0%,#203556,#0B1424)}
.tifo-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.tifo-switch{display:inline-flex;align-items:center;gap:8px;margin:0;cursor:pointer}
.tifo-counts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tifo-counts li{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;background:var(--kfa-tint);border:1px solid #E3ECF5;font-size:12px}
.tifo-counts i{width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.2)}
.tifo-counts .blank i{background:#2A3A52}
.tifo-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 16px}
.tifo-extra small{display:block;margin-top:4px}
.tifo-save{display:flex;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid #E3ECF5}
.tifo-save input{flex:1;min-width:180px}
.tifo-design{display:grid;grid-template-columns:96px 1fr;gap:6px 12px;padding:12px 0;border-bottom:1px solid #E3ECF5}
.tifo-design:last-child{border-bottom:0}
.tifo-design.chosen{background:linear-gradient(90deg,transparent,#FFF8E1);border-radius:12px;padding-inline:8px}
.tifo-thumb{grid-row:span 2;width:96px;height:auto;image-rendering:pixelated;border-radius:8px;background:#0F1D30;padding:4px}
.tifo-meta{display:grid;gap:2px;align-content:start}
.tifo-meta b{color:var(--navy)}.tifo-meta small{color:var(--muted)}.tifo-meta .badge{justify-self:start}
.tifo-acts{display:flex;flex-wrap:wrap;gap:6px}
.tifo-acts form{margin:0}
/* Matchday: your tifo colour */
.grp-md{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.grp-md i{flex:none;width:52px;height:52px;border-radius:12px;border:1px solid rgba(0,0,0,.2)}
.grp-md b{display:block;color:var(--navy)}
@media (max-width:900px){
  .grp-hero,.grp-layout,.tifo-layout{grid-template-columns:minmax(0,1fr)}
  .grp-hero{padding:24px 20px 36px}
  .grp-chat{position:static;height:520px}
  .grp-head-side{justify-items:start;flex-basis:100%!important}
}
.grp-requests{display:grid;gap:10px;border-top:4px solid var(--gold)}
.grp-requests .muted{margin:0}
.grp-req-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.grp-req-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #E3ECF5}
.grp-req-list li:last-child{border-bottom:0}
.grp-req-list li>div{flex:1;min-width:0;display:grid}
.grp-req-list b{color:var(--navy)}.grp-req-list small{color:var(--muted)}
.grp-req-list form{display:flex;gap:6px;margin:0}
.grp-req-av{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--g) 18%,#fff);color:var(--navy);font-weight:800}
.grp-wait{width:100%;display:grid;gap:4px;padding:14px;border-radius:14px;background:#FFF8E1;border:1px solid #F3DFB5;color:#7A4A07}
.grp-note{display:flex;gap:14px;align-items:flex-start}
.grp-note>.ico{flex:none;width:28px;height:28px;color:var(--blue)}
.grp-note p{margin:4px 0 0}
.grp-window{display:flex;flex-wrap:wrap;gap:10px}
.grp-window span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:14px;color:#42536B}
.grp-window span.on{border-color:var(--ok);background:var(--ok-bg)}
.grp-window b{color:var(--navy)}
.grp-window .ico{width:16px;height:16px}
.grp-invite-when{margin:0;padding:6px 12px;border-radius:99px;background:var(--sky);color:var(--blue);font-weight:700;font-size:13px}
.logo-auto{display:block;margin-top:4px;color:var(--ok);font-weight:600}

/* ========== iBook brand lockup ========== */
.ib-brand{display:inline-flex;align-items:center;gap:10px;color:var(--navy);text-decoration:none;white-space:nowrap}
.ib-brand .ib-mark{width:38px;height:38px;flex:none;object-fit:contain}
.ib-brand .ib-words{display:flex;flex-direction:column;gap:2px;line-height:1}
.ib-brand .ib-wordmark{display:block;height:24px;width:auto}
.ib-brand .ib-name{font-size:19px;font-weight:900;line-height:1.1}
.ib-brand small{display:block;font-size:11px;font-weight:600;color:#42536B;letter-spacing:.01em;line-height:1.25}
.ib-brand.on-dark{color:#fff}
.ib-brand.on-dark small{color:#b9d3ee}
a:hover .ib-brand,.brand:hover .ib-brand{text-decoration:none}
@media(prefers-reduced-motion:no-preference){a:hover>.ib-brand .ib-mark,.brand:hover .ib-mark{transform:rotate(-6deg);transition:transform .35s var(--ease)}}
.ib-brand.lg .ib-mark{width:64px;height:64px}
.ib-brand.lg .ib-wordmark{height:40px}
.ib-brand.lg small{font-size:14px}
.ib-operator{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;color:inherit}
.ib-operator small{font-size:11px;font-weight:600;opacity:.75}
.ib-operator img{width:30px;height:23px;object-fit:contain}
.ib-operator b{font-weight:800}
.footer-org{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.footer-org img{width:26px;height:28px;object-fit:contain}
.footer-org small{display:block;font-size:11px;font-weight:500;opacity:.75}
.footer-brands{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer-brands .sep{width:1px;height:26px;background:rgba(255,255,255,.25)}
@media (max-width:600px){.ib-brand small{display:none}.ib-brand .ib-wordmark{height:22px}.footer-brands .sep{display:none}}
.staff-top .brand .staff-tag{font-size:11px;font-weight:600;color:#b9d3ee;border-inline-start:1px solid rgb(255 255 255 / .25);padding-inline-start:10px}
.staff-top .ib-brand .ib-mark{width:34px;height:34px}
.staff-top .ib-brand .ib-wordmark{height:22px}
@media(max-width:700px){.staff-top .brand .staff-tag{display:none}}
.auth-card .logo-panel .ib-brand img{filter:none}
.auth-card .logo-panel .ib-mark{width:64px;height:64px}
.auth-card .logo-panel .ib-wordmark{width:auto;height:40px}
.auth-card .logo-panel .ib-brand small{color:#d4eafb}
.auth-card .logo-panel .logo-org{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;opacity:.9}
.auth-card .logo-panel .logo-org img{width:20px;height:22px;filter:none}
.id-product-now{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--kfa-tint);border:1px solid #E3ECF5}
/* iBook motion */
.ib-brand .ib-mark{display:inline-flex;cursor:pointer}
.ib-brand .ib-mark svg{width:100%;height:100%;display:block;overflow:visible}
.ib-brand .ib-wordmark{display:block;height:24px}
.ib-brand .ib-wordmark svg{height:100%;width:auto;display:block;overflow:visible}
.ib-brand.lg .ib-wordmark{height:40px}
.staff-top .ib-brand .ib-wordmark{height:22px}
.ib-anim .ib-dot{animation:ib-dot-bounce 1.9s both}
@keyframes ib-dot-bounce{
  0%{transform:translate(227px,-90px);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  10%{transform:translate(227px,-16.4px);opacity:1;animation-timing-function:cubic-bezier(0,.55,.45,1)}
  21%{transform:translate(198px,-48px);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  32%{transform:translate(169.6px,2.6px);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  43%{transform:translate(141px,-30px);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  54%{transform:translate(112.4px,2.6px);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  65%{transform:translate(82.6px,-42px);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  76%{transform:translate(52.8px,-16.4px);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  88%{transform:translate(26px,-46px);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  96%{transform:translate(0,1.5px)}
  100%{transform:translate(0,0)}
}
.ib-flyer{position:fixed;z-index:9999;pointer-events:none;overflow:visible;filter:drop-shadow(0 8px 14px rgb(0 0 0 / .25))}
.ib-flyer-wings{transform-box:fill-box;transform-origin:50% 75%}
.ib-landed svg{animation:ib-land .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes ib-land{0%{transform:scale(1)}40%{transform:scale(1.12) rotate(-4deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.ib-anim .ib-dot,.ib-landed svg{animation:none}}

/* iBook watermark (ticket outline + falcon i) and header/size refinements */
.ib-wm{display:block;color:#fff;aspect-ratio:1;height:auto;filter:none!important;overflow:visible}
.hero .watermark.ib-wm{inset-inline-end:clamp(-40px,-2vw,-10px);width:clamp(200px,30vw,380px);opacity:.13;transform:translateY(-50%) rotate(-8deg)}
.hero .eyebrow{letter-spacing:.08em}
.fan-card-mark.ib-wm{opacity:.08}
.shop-hero-mark.ib-wm{opacity:.09}
.home-feats .stat{display:flex;align-items:flex-start;gap:12px;padding:16px 18px}
.home-feats .stat>.ico{position:static;flex:none;width:30px;height:30px;padding:6px;border-radius:10px;background:var(--sky);color:var(--blue);opacity:1}
.home-feats .stat b{font-size:16px!important;line-height:1.35}
.home-feats .stat span{display:block;font-size:12.5px;line-height:1.5;margin-top:2px}
@media(max-width:600px){
  .hero{border-radius:18px}
  .hero h1{font-size:clamp(24px,7vw,30px);line-height:1.3}
  .hero p{font-size:14px}
  .hero .watermark.ib-wm{width:200px;opacity:.1;inset-inline-end:-50px}
  .home-feats{grid-template-columns:1fr 1fr;gap:10px}
  .home-feats .stat{flex-direction:column;gap:8px;padding:14px}
  .home-feats .stat b{font-size:14.5px!important}
  .kfa-hero{padding:16px}
  .kfa-hero h1{font-size:19px}
}
.eyebrow .nt{text-transform:none;letter-spacing:.03em}
.hero .watermark.ib-wm{opacity:.11}
@media(max-width:600px){.hero .watermark.ib-wm{opacity:.07}.spread>.toolbar{flex-wrap:wrap;justify-content:flex-start}}
.stat:has(>.ico){padding-inline-end:48px}
.home-feats .stat:has(>.ico){padding:16px 18px}
@media(max-width:600px){
  .kfa-hero::before{width:120px;height:120px;inset-inline-end:-56px;top:-64px;opacity:.7}
  .kfa-hero .toolbar{width:100%;justify-content:flex-start}
  .stat b{font-size:24px}
  .home-feats .stat:has(>.ico){padding:14px}
}
/* Every screen width: grid children may shrink, long rows wrap on very small phones */
.engage-grid>*,.grid>*{min-width:0}
@media(max-width:380px){
  .rivalry-title,.rivalry-sides{flex-wrap:wrap}
  .rivalry .rv-side em{white-space:normal}
  .container{width:calc(100% - 24px)}
}
/* Large and very large screens: keep lines readable, scale the hero */
@media(min-width:1600px){
  .hero{padding:52px 56px}
  .hero h1{font-size:44px}
  .hero p{font-size:17px;max-width:720px}
}
@media(min-width:1600px){.container,.fan-shell .footer .container{width:min(1440px,100% - 64px)}}
@media(min-width:2200px){.container,.fan-shell .footer .container{width:min(1680px,100% - 96px)}html{font-size:17px}}
@media(max-width:420px){
  .predict{padding:14px 12px}
  .predict-board{gap:4px}
  .predict-board>*{min-width:0}
  .stepper{gap:3px}
  .stepper input{width:44px;height:48px;font-size:24px;border-radius:12px}
  .stepper button{width:28px;height:28px;font-size:17px}
  .predict-dash{font-size:26px}
}
/* «Powered by Tradition SAS» on the Fan ID card */
.powered-by{display:inline-flex;white-space:nowrap}.powered-by-in{display:inline-flex;align-items:center;gap:6px}
.powered-by small{font:600 11px/1 Cairo,Tajawal,sans-serif;opacity:.7;letter-spacing:.02em}
.powered-by img{height:16px;width:auto}
.powered-by b{font:800 11px/1 Cairo,Tajawal,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.fan-card-powered{position:absolute;z-index:1;bottom:3.6cqw;left:50%;transform:translateX(-50%);color:#fff}
.fan-card-back .fcb-terms{bottom:8cqw}.fan-card-powered .powered-by-in{gap:1.1cqw}
.fan-card-powered small{font-size:max(8px,1.9cqw);color:#C4DCF2;opacity:1}
.fan-card-powered img{height:3.2cqw}
.fan-card-powered b{font-size:max(8px,2cqw);color:#E8B021}
.fan-card-back:has(.fan-card-powered){padding-bottom:11cqw;padding-top:3cqw}
.fan-card-back .fan-card-powered small{font-size:max(7px,1.8cqw)}
.fan-card-back .fan-card-powered b{font-size:max(7px,1.9cqw)}

/* Fan-chosen card colour: every text and line follows the colour's own ink, so any colour reads well */
.fan-card-flip .fan-card{box-shadow:0 24px 48px var(--card-shadow,rgb(0 0 0 / .35)),inset 0 0 0 1px rgb(255 255 255 / .16)}
.fan-card-flip .fan-card::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 85% -10%,rgb(255 255 255 / .22),transparent 55%);pointer-events:none}
.fan-card-flip .fan-card-mark.ib-wm{color:var(--card-ink,#fff);opacity:.1}
.fan-card-flip .fan-card-org small,.fan-card-flip .fan-card-who small,.fan-card-flip .fan-card-points small{color:var(--card-muted,#C4DCF2)}
.fan-card-flip .fan-card-who span{color:var(--card-ink,#E6F0FA);opacity:.92}
.fan-card-flip .fan-card-tag{border-color:var(--card-line,rgba(255,255,255,.6))}
.fan-card-flip .fan-card-points{color:var(--card-ink,#fff)}
.fan-card-flip .fan-card-points strong{color:var(--card-accent,#2ECC71)}
.fan-card-flip .fan-card-code{box-shadow:0 .6cqw 2cqw rgb(0 0 0 / .14)}
.fan-card-flip .fan-card-powered small{color:var(--card-muted,#C4DCF2)}
.fan-card-flip .fan-card-powered b{color:var(--card-accent,#E8B021)}
.fan-card-flip .fcb-terms,.fan-card-flip .fcb-tier small{color:var(--card-muted,#9FC2E6)}
.fan-card-flip .fan-card-back{background:var(--card-bg,var(--kfa-deep));color:var(--card-ink,#fff)}
.fan-card-org img{filter:drop-shadow(0 .4cqw 1cqw rgb(0 0 0 / .18))}
/* Club crest next to the name */
.fan-card-club{position:absolute;top:21.5cqw;inset-inline-start:5cqw;width:13.5cqw;height:13.5cqw;display:grid;place-items:center;border-radius:50%;background:rgb(255 255 255 / .92);box-shadow:0 .8cqw 2.4cqw rgb(0 0 0 / .22),0 0 0 .5cqw rgb(255 255 255 / .28)}
.fan-card-club .team-logo{width:10.5cqw!important;height:10.5cqw!important;object-fit:contain;border-radius:0}
.fan-card-club i.team-logo{border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:900;font-size:5cqw!important}
.fan-card-who.has-club{inset-inline-start:21.5cqw}
/* «خصّص بطاقتك» */
.fid-style{background:#fff;border:1px solid var(--line,#D6E2EF);border-radius:16px;padding:12px 16px;color:var(--kfa-deep,#063A6B);box-shadow:0 6px 18px rgb(6 58 107 / .06)}
.fid-style summary{cursor:pointer;font-weight:800;display:flex;align-items:center;gap:8px;list-style:none}
.fid-style summary::-webkit-details-marker{display:none}
.fid-style summary svg{width:18px;height:18px}
.fid-style-row{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.fid-style-row>b{font-size:13px;color:var(--muted,#475569)}
.fid-clubs,.fid-swatches{display:flex;flex-wrap:wrap;gap:8px}
.fid-club{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:999px;background:#F1F5FA;border:1.5px solid transparent;cursor:pointer;font-size:13px;font-weight:700}
.fid-club input,.fid-swatch input{position:absolute;opacity:0;pointer-events:none}
.fid-club .team-logo{border-radius:50%;background:#fff;object-fit:contain}
.fid-club.none span{padding-inline:6px}
.fid-club:has(input:checked){border-color:#E8B021;background:#FFF6DC}
.fid-club:has(input:focus-visible),.fid-swatch:has(input:focus-visible){outline:2px solid var(--kfa-azraq,#0B5EA8);outline-offset:2px}
.fid-swatch{position:relative;cursor:pointer}
.fid-swatch i{display:block;width:30px;height:30px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgb(6 58 107 / .18)}
.fid-swatch:has(input:checked) i{box-shadow:0 0 0 2px #fff,0 0 0 4px #E8B021}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fid-clubs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.fid-club{flex:none}
/* FAN ID chip: same height and edge as the badge under it, filled with the card's own ink, text optically centred */
.fan-card-flip .fan-card-tag{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:5.6cqw;padding:0 2.4cqw 0 calc(2.4cqw + .3em);font:800 2cqw/1 Cairo,sans-serif;letter-spacing:.3em;direction:ltr;
  color:var(--card-ink,#fff);background:color-mix(in srgb,var(--card-ink,#fff) 12%,transparent);border:.2cqw solid color-mix(in srgb,var(--card-ink,#fff) 34%,transparent);border-radius:1.6cqw;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.fan-card-flip .fan-card-tag::before{content:"";width:1.2cqw;height:1.2cqw;border-radius:50%;background:var(--card-accent,#E8B021);margin-inline-end:1.2cqw;flex:none}
.fan-card-flip .fan-membership-badge{top:13.4cqw;height:5.6cqw;box-sizing:border-box;padding:0 2.2cqw;border-radius:1.6cqw;font-size:2.4cqw}
.fan-card-flip .fan-card-tag,.fan-card-flip .fan-membership-badge{min-width:18cqw;justify-content:center}
/* Fan ID stage: card + customiser on one side, greeting, numbers and actions on the other, both top-aligned */
.fid-stage{align-items:start;gap:44px;padding:36px 40px 44px}
.fid-info{gap:18px;padding-top:6px}
.fid-info>.fid-eyebrow{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:5px 12px;border-radius:999px;background:#EAF3FC;color:var(--kfa-azraq,#0B5EA8);font-size:12px;letter-spacing:.02em}
.fid-info h1{margin:-4px 0 0;font-size:40px;line-height:1.15;color:var(--kfa-deep,#063A6B)}
.fid-info>p{margin:-8px 0 0;color:#475569;font-size:15.5px;line-height:1.7}
.fid-stats{gap:12px}
.fid-stats>*{border-radius:16px;padding:14px 16px;min-height:92px;justify-content:center}
.fid-stats strong{font-size:28px}
.fid-stats .tier strong{font-size:18px}
.fan-badge-status{display:grid!important;grid-template-columns:auto auto 1fr;align-items:center;gap:6px 10px!important;padding:12px 16px;border-radius:16px;background:#FBF8F1;border:1px solid #EFE4C8;color:#3A4658!important;font-weight:600}
.fan-badge-status>svg{width:20px;height:20px;color:#B07A1C}
.fan-badge-status>.badge-label{justify-self:start}
.fan-badge-status>span{grid-column:1/-1;font-size:13px;color:#6B7280;font-weight:500}
.fan-badge-status>small{grid-column:1/-1}
.fid-actions{gap:12px;margin-top:2px}
.fid-actions .btn{min-height:52px;border-radius:14px;font-size:15px;font-weight:800;gap:8px}
.fid-actions .btn svg{width:18px;height:18px}
.fid-actions .fid-wallet{min-height:56px;font-size:16px}
.fid-actions .fid-btn.ghost{background:#fff;border:1.5px solid #D6E2EF;color:var(--kfa-deep,#063A6B)}
.fid-actions .fid-btn.ghost:hover{border-color:var(--kfa-azraq,#0B5EA8)}
.fid-note{display:block;text-align:center;margin-top:-4px}
.fid-cardcol{gap:14px}
@media(max-width:960px){.fid-stage{gap:26px;padding:22px 18px 30px}.fid-info{padding-top:0}.fid-info h1{font-size:30px}}
@media(max-width:560px){.fid-stage{padding:16px 14px 28px}.fid-info h1{font-size:26px}.fid-stats>*{min-height:0}.fid-actions .btn{min-height:48px;font-size:14px}}
.fid-stage>*,.fid-cardcol,.fid-style,.fid-style-row,.fid-info{min-width:0}
@media(min-width:961px){.fid-stage>.fid-cardcol{grid-column:1;grid-row:1}.fid-stage>.fid-info{grid-column:2}}
.fid-stage>.fid-style{align-self:start;position:relative}
.fid-stats .tier strong{white-space:nowrap}
@media(max-width:960px){.fid-stage{grid-template-rows:none}.fid-stage>.fid-cardcol,.fid-stage>.fid-info,.fid-stage>.fid-style{grid-column:1;grid-row:auto}}
/* Buttons along the bottom of the Fan ID box, under both columns */
.fid-stage>.fid-bottom{grid-column:1/-1;display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid #E3EBF4;min-width:0}
.fid-bottom .fid-actions{grid-template-columns:1.25fr 1fr 1fr;margin:0}
.fid-bottom .fid-actions .fid-wallet{grid-column:auto}
.fid-bottom .fid-actions .btn{min-height:54px}
@media(max-width:960px){.fid-stage>.fid-bottom{grid-row:auto;padding-top:18px}.fid-bottom .fid-actions{grid-template-columns:1fr 1fr}.fid-bottom .fid-actions .fid-wallet{grid-column:1/-1}}
@media(max-width:560px){.fid-bottom .fid-actions{grid-template-columns:1fr}}
@media(min-width:961px){.fid-stage{grid-template-rows:auto auto auto}.fid-stage>.fid-info{grid-row:1}.fid-stage>.fid-style{grid-column:1/-1;grid-row:2}}
.fid-style{display:block}
@media(min-width:961px){.fid-style[open]{display:grid;grid-template-columns:minmax(0,1fr);column-gap:28px}.fid-style .fid-style-row{margin-top:10px}}
@media(min-width:961px){.fid-clubs{flex-wrap:wrap;overflow:visible}}
/* Clubs: always two rows; slides sideways when they don't fit */
.fid-clubs,.fid-clubs:is(*){display:grid!important;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;justify-content:start;gap:8px;overflow-x:auto!important;flex-wrap:nowrap!important}
.fid-club{justify-content:flex-start}
@media(min-width:961px){.fid-stage>.fid-bottom{grid-row:3}}

/* NFC Fan ID cards (iBook Scanner app) */
.nfc-chip{display:block;width:calc(100% - 20px);margin:8px 10px 0;border:0;border-radius:12px;padding:10px 12px;font:inherit;font-weight:800;font-size:14px;color:#fff;background:#0E7A43;text-align:center;cursor:pointer}
.nfc-chip[data-state=off]{background:#b45309}.nfc-chip[data-state=none]{background:#475569;cursor:default}
.nfc-issue{margin:6px 12px 10px;border-radius:14px;background:#08487f;color:#e2edf8;padding:4px 12px}
.nfc-issue summary{cursor:pointer;font-weight:800;padding:10px 0}
.nfc-issue form{display:flex;gap:8px;margin-bottom:10px}.nfc-issue input{flex:1;min-width:0}
.nfc-issue .js-out{display:grid;gap:8px;padding-bottom:12px}.nfc-issue .nfc-fan{display:grid;gap:2px}.nfc-issue .err{color:#fca5a5}
.fid-gwallet{background:#fff;color:#1f1f1f;border:1px solid #dadce0}.fid-gwallet:hover{background:#f8f9fa}

/* ============ Design pass (2026-11): unified tokens, booking steps, safe areas, night mode ============ */
/* -- one scale for corners, control heights and numerals -- */
:root{--r-sm:10px;--r-md:12px;--r-lg:16px;--ctl-h:44px;--ctl-h-sm:34px}
.btn,input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),select{min-height:var(--ctl-h);border-radius:var(--r-md)}
.btn.sm{min-height:var(--ctl-h-sm);border-radius:var(--r-sm)}
.btn.lg{min-height:52px;border-radius:14px}
textarea{border-radius:var(--r-md)}
td .btn.sm,.toolbar .btn.sm{white-space:nowrap}
.card,.stat,.kfa-hero,.table-wrap,.stadium,.rivalry,.alert{border-radius:var(--r-lg)}
.alert{border-radius:var(--r-md)}
.stat b,.cart-total,.cart-item b,td,th,.mono,.js-total,.badge,.hold-bar b,.scan-stats b{font-variant-numeric:tabular-nums lining-nums}
.card-head{margin-bottom:12px}
.stack>*+*{margin-top:16px}

/* -- safe areas (status bar / notch / gesture bar) in the apps and on phones -- */
:root{--sat:var(--safe-area-inset-top,env(safe-area-inset-top,0px));--sab:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px))}
.fan-shell{--head-h:calc(66px + var(--sat))}
.fan-shell .topbar{padding-top:var(--sat)}
.staff-top{box-sizing:content-box;padding-top:var(--sat)}
.scanner header{padding-top:calc(10px + var(--sat))}
.hold-bar{top:calc(var(--head-h,66px) + 9px)}

/* -- booking steps -- */
.book-steps{list-style:none;margin:0;padding:8px 10px;display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);position:sticky;top:calc(var(--head-h,66px) + 9px);z-index:21}
.book-steps li{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;color:var(--muted);white-space:nowrap}
.book-steps li+li{flex:1}
.book-steps li+li::before{content:"";flex:1;height:3px;min-width:14px;border-radius:3px;background:var(--line)}
.book-steps li.done+li::before{background:var(--kfa-green)}
.book-steps i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--sky);border:2px solid var(--line);color:var(--muted);font-size:13px}
.book-steps li.on{color:var(--navy)}
.book-steps li.on i{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 4px rgb(var(--kfa-azraq-rgb) / .18)}
.book-steps li.done{color:var(--kfa-green)}
.book-steps li.done i{background:var(--kfa-green);border-color:var(--kfa-green);color:#fff}
.container>.book-steps{margin-bottom:14px}
.book-steps~.hold-bar{position:static}
@media(max-width:520px){.book-steps li:not(.on) span{display:none}.book-steps{padding:6px 8px}}

/* -- sticky order bar on phones (seat page) and sticky pay button (checkout) -- */
.book-bar{display:none}
@media(max-width:980px){
  .book-bar:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;inset-inline:10px;bottom:calc(10px + var(--sab));z-index:55;padding:10px 10px 10px 16px;border-radius:18px;background:var(--kfa-deep);color:#fff;box-shadow:0 14px 34px rgb(0 0 0 / .35)}
  [dir=rtl] .book-bar:not([hidden]){padding:10px 16px 10px 10px}
  .book-bar b{display:block;font-size:16px;line-height:1.3}
  .book-bar small{display:flex;gap:10px;color:#cfe3f7;font-weight:700;font-size:13px}
  .book-bar .btn{--b:var(--ib-gold);color:var(--kfa-deep);white-space:nowrap}
  body.has-bookbar{padding-bottom:calc(84px + var(--sab))}
  body.has-bookbar .chat-fab{bottom:calc(88px + var(--sab))}
  .booking.checkout>aside{order:-1}
  body:has(.booking.checkout) .chat-fab{bottom:calc(76px + var(--sab))}
  body.has-bookbar .toast{bottom:calc(96px + var(--sab))}
  .booking.checkout .js-pay{position:sticky;bottom:calc(10px + var(--sab));z-index:30;box-shadow:0 12px 30px rgb(0 0 0 / .3)}
}

/* -- night mode (staff console) -- */
.theme-toggle{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgb(255 255 255 / .3);background:transparent;color:#fff;cursor:pointer}
.theme-toggle:hover{background:rgb(255 255 255 / .12)}
.theme-toggle .sun{display:none}
html[data-theme=dark] .theme-toggle .sun{display:block}html[data-theme=dark] .theme-toggle .moon{display:none}
html[data-theme=dark]{color-scheme:dark}
html[data-theme=dark] body.staff{--bg:#0a1420;--card:#122134;--ink:#e4edf7;--muted:#9bb1c8;--line:#27405b;--kfa-line:#27405b;--kfa-tint:#15273c;--sky:#193250;--kfa-sky:#193250;--ok-bg:#103420;--warn-bg:#3a2a0b;--bad-bg:#3d1518;--shadow:0 4px 14px rgb(0 0 0 / .35);--shadow-lg:0 14px 32px rgb(0 0 0 / .5);background:var(--bg);color:var(--ink)}
html[data-theme=dark] .staff-top,html[data-theme=dark] .side{background:#071a2e}
html[data-theme=dark] .side{border-inline-end:1px solid #16304b}
html[data-theme=dark] .admin-main{--navy:#dce9f8;--kfa-black:#e4edf7}
html[data-theme=dark] .admin-main a:not(.btn):not(.stat):not(.card){color:#7dbdf6}
html[data-theme=dark] .admin-main :is(input,select,textarea,.btn.light,.alert.info,.stat:not(.azraq,.deep,.green,.red),.kfa-hero,.table-wrap,.stadium,.pagination a,.pagination span,.brand-tile,.upload-box,.export-list,.zone-panel,.map-filters,.chip,.rivalry,.sp-slot,.grp-card,.fid-style,.zoom-ctl button,.voucher,.coupon,.sponsor-logo){background:var(--card);color:var(--ink);border-color:var(--line)}
html[data-theme=dark] .admin-main :is(input,select,textarea){background:#0d1b2b}
html[data-theme=dark] .admin-main :is(input,select,textarea):disabled{opacity:.6}
html[data-theme=dark] .admin-main .btn.light:hover{background:var(--sky);color:#fff}
html[data-theme=dark] .admin-main .btn.ghost{color:#9fcbf5;border-color:#3b6ea3}
html[data-theme=dark] .admin-main .pagination .active span{background:var(--blue);color:#fff}
html[data-theme=dark] .admin-main :is(th,td){border-bottom-color:#1e3550}
html[data-theme=dark] .admin-main th{color:#cfe2f6}
html[data-theme=dark] .admin-main .badge{background:#203851;color:#cfdcea}
html[data-theme=dark] .admin-main .badge.ok{background:#103420;color:#6fd596}
html[data-theme=dark] .admin-main .badge.bad{background:#3d1518;color:#ff8c8c}
html[data-theme=dark] .admin-main .badge.warn{background:#3a2a0b;color:#f6b454}
html[data-theme=dark] .admin-main .badge.info{background:#193250;color:#8ec5f7}
html[data-theme=dark] .admin-main .alert.ok{color:#8fe0ad;border-color:#1f5a37}
html[data-theme=dark] .admin-main .alert.bad{color:#ffa3a3;border-color:#6b2226}
html[data-theme=dark] .admin-main .alert.warn{color:#f6c370;border-color:#5c4312}
html[data-theme=dark] .admin-main .error{color:#ff8c8c}
html[data-theme=dark] .admin-main .progress,html[data-theme=dark] .admin-main .release-plan .bar,html[data-theme=dark] .admin-main .rivalry-bar{background:#1e3550}
html[data-theme=dark] .admin-main .kfa-hero::before{background:#17304c}
html[data-theme=dark] .admin-main .tabs a.active{color:#fff}
html[data-theme=dark] .admin-main [style*="background:#fff"],html[data-theme=dark] .admin-main [style*="background: #fff"],html[data-theme=dark] .admin-main [style*="background:#f8f"],html[data-theme=dark] .admin-main [style*="background:#f1f"],html[data-theme=dark] .admin-main [style*="background:#eef"]{background:var(--card)!important;color:var(--ink)}
html[data-theme=dark] .admin-main :is(img.team-logo,.sponsor-logo img,.upload-preview){background-color:#fff;border-radius:8px}
html[data-theme=dark] .admin-main ::placeholder{color:#6f879f}
.fan-shell .book-steps~.booking .sticky{top:calc(var(--head-h) + 68px)}

/* ============ Stadium maps: night-match look (lit pitch, shaded stands, shell and ground shadow) ============ */
.stadium svg.map{background:radial-gradient(120% 90% at 50% 45%,#0e335c 0%,#082445 45%,#041428 100%)}
.map .st-backdrop{fill:rgb(255 255 255 / .04);stroke:rgb(255 255 255 / .14);stroke-width:3}
.map .st-shadow{fill:#000;opacity:.5;pointer-events:none}
.map .st-shell{fill:#0b2748;stroke:#0b2748;stroke-width:44;stroke-linejoin:round;pointer-events:none}
.map .st-shell-edge{fill:none;stroke:#2f6aa8;stroke-opacity:.55;stroke-width:48;stroke-linejoin:round;pointer-events:none;mix-blend-mode:screen;clip-path:none;stroke-dasharray:none}
.map .st-shell{paint-order:stroke}
.map .st-shell-edge{stroke-width:2;transform-box:fill-box}
.map .st-apron{fill:#27425f}
.map .st-track{fill:#b8453b}
.map .st-lane{fill:none;stroke:rgb(255 255 255 / .5);stroke-width:1.3}
.map .st-infield{fill:#2c7f3a;stroke:#fff;stroke-width:2}
.map .st-turf-edge{fill:#2a7d36}
.map .pitch-line{fill:none;stroke:rgb(255 255 255 / .85);stroke-width:2.6}
.map .pitch-dot{fill:rgb(255 255 255 / .9)}
.map .pitch-goal{fill:rgb(255 255 255 / .18);stroke:#fff;stroke-width:2}
.map .st-note{fill:#a9c3df;font-weight:800;text-anchor:middle;font-family:Tajawal,sans-serif;letter-spacing:.02em;paint-order:stroke;stroke:rgb(4 20 40 / .6);stroke-width:5px;pointer-events:none}
.map .st-light{pointer-events:none;transition:opacity .25s}
.map.zoomed .st-light{opacity:0}
.map .sec{stroke:#0b2748;stroke-width:2.2;stroke-linejoin:round;transition:filter .15s,opacity .2s,stroke .15s}
.stadium .sec.zone{stroke-dasharray:none}
.map .sec:not(.off):hover{filter:brightness(1.14) saturate(1.15);stroke:#fff;stroke-width:3}
.map .sec.off{filter:saturate(.75)}
.map .sec.dim{opacity:.14}
.map .sec.selected{stroke:#fff;stroke-width:2.5;fill-opacity:.16}
.map .sec-label{font-size:23px;font-weight:800;fill:#fff;stroke:rgb(3 18 36 / .6);stroke-width:3.5px;letter-spacing:.01em}
.map .sec-label.small{font-size:17px}
.map .gate{cursor:default}
.map .gate circle{fill:#fff;stroke:var(--ib-gold,#E8B021);stroke-width:3.5}
.map .gate text{fill:var(--kfa-deep,#063A6B);font-size:19px;font-weight:900}
.map .seat{stroke:rgb(0 0 0 / .45)}
.map .seat.sold,.map .seat.held,.map .seat.closed{fill:#55677d}
.map .seat.killed{stroke:#3a4f68}
.map .seat.mine,.map .seat.picked{fill:var(--ib-gold,#E8B021)!important;stroke:#fff;stroke-width:1}
.zoom-ctl button{background:rgb(255 255 255 / .94);backdrop-filter:blur(6px)}
@media (prefers-reduced-motion:no-preference){
  .map .sections.intro{animation:st-in .7s var(--ease) both;transform-origin:center;transform-box:fill-box}
  @keyframes st-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
}
html[data-theme=dark] .admin-main .stadium svg.map{background:radial-gradient(120% 90% at 50% 45%,#0e335c 0%,#082445 45%,#041428 100%)}

/* -- real-stadium features: roof rings, masts -- */
.map .st-roofs{pointer-events:none}
.map .st-roof{fill:#eef2f7;opacity:.96}
.map .st-roof.lattice{opacity:.9}
.map .st-pleat{fill:#b8c5d6;opacity:.55}
.map .st-rib{stroke:#8ea0b8;stroke-width:1.4;fill:none;opacity:.8}
.map .st-roof-edge{fill:none;stroke:#fff;stroke-width:3;opacity:.9}
.map .st-mast-pole{fill:#8fa3bb}
.map .st-mast-head{fill:#22364d;stroke:#b9c7d8;stroke-width:2}
.map .st-mast-lamp{fill:#fff3c4}

/* -- real seat colours, seats drawn as seats, row letters -- */
.map .sec.off{filter:none;opacity:.5}
.map .sec.off:hover{filter:none}
.map .sec-label.on-light{fill:#0b2748;stroke:rgb(255 255 255 / .55)}
.map.zoomed .sec-label{opacity:.1}
.map use.seat{stroke:rgb(0 0 0 / .5);stroke-width:.1;transition:filter .12s}
.map use.seat:hover{filter:brightness(1.25)}
.map use.seat.sold:hover,.map use.seat.held:hover,.map use.seat.closed:hover{filter:none}
.map use.seat.mine,.map use.seat.picked{stroke:#fff;stroke-width:.22}
.map use.seat.killed{fill:none;stroke-width:.12}
.map .row-tag{fill:#c5d6ea;font-weight:800;text-anchor:middle;dominant-baseline:central;font-family:Tajawal,sans-serif;pointer-events:none;opacity:.85}
.map .seats{animation:st-seats .35s ease both}
@keyframes st-seats{from{opacity:0}to{opacity:1}}

/* ============ VIP invitations ============ */
.vip-h{font-size:18px;margin:22px 0 10px}
.vip-events{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.vip-event{display:flex;align-items:center;justify-content:space-between;gap:12px;color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s}
.vip-event:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.vip-event b{display:block;font-size:16px}.vip-event small{color:var(--muted)}
.vip-count{display:grid;place-items:center;min-width:64px;padding:8px;border-radius:14px;background:linear-gradient(135deg,#E8B021,#c48d0b);color:#2a1d00}
.vip-count b{font-size:22px;line-height:1}.vip-count small{font-size:11px;font-weight:700}
.vip-designs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.vip-design{display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none}
.vip-design canvas{width:100%;height:auto;border-radius:10px;box-shadow:0 4px 14px rgb(0 0 0 / .15);background:var(--sky)}
.vip-design small{color:var(--muted)}
.vip-design.add{align-items:center;justify-content:center;text-align:center;border:2px dashed var(--line);box-shadow:none;min-height:180px;color:var(--blue)}
.vip-design.add .ico{width:34px;height:34px}

.vip-editor{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.vip-stage-wrap{position:sticky;top:calc(var(--head-h,66px) + 12px)}
.vip-stage{position:relative;width:100%;background:repeating-conic-gradient(#e8edf3 0 25%,#f7f9fb 0 50%) 0 0/18px 18px;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgb(0 0 0 / .18);user-select:none}
.vip-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.vip-stage .vh{position:absolute;cursor:move;touch-action:none}
.vip-stage .vh.bc{border:2px dashed #E8B021;background:rgb(232 176 33 / .12)}
.vip-stage .vh.bc span{position:absolute;top:-22px;inset-inline-start:0;background:#E8B021;color:#2a1d00;font:800 11px/1 Tajawal;padding:4px 7px;border-radius:6px}
.vip-stage .vh .rs{position:absolute;width:16px;height:16px;inset-inline-end:-8px;bottom:-8px;background:#E8B021;border:2px solid #fff;border-radius:50%;cursor:nwse-resize;box-shadow:0 2px 6px rgb(0 0 0 / .3)}
[dir=rtl] .vip-stage .vh .rs{inset-inline-end:auto;right:-8px;cursor:nwse-resize}
.vip-stage .vh.fd{min-width:30px;min-height:24px;border:1.5px dashed rgb(11 94 168 / .9);border-radius:6px;background:rgb(11 94 168 / .08)}
.vip-stage .vh.fd.center{transform:translate(-50%,-50%)}.vip-stage .vh.fd.right{transform:translate(-100%,-50%)}.vip-stage .vh.fd.left{transform:translate(0,-50%)}
.vip-stage .vh.fd span{display:block;padding:2px 6px;font:700 10px/1.4 Tajawal;color:#fff;background:rgb(11 94 168 / .9);border-radius:4px;white-space:nowrap;transform:translateY(-100%);position:absolute;top:-2px;inset-inline-start:-1px}
.vip-stage .vh:hover{border-style:solid}
.vip-fields{display:grid;gap:10px}
.vip-field{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:8px}
.vip-field .row{flex-wrap:wrap;gap:6px}
.vip-field .row label{display:flex;align-items:center;gap:4px;font-weight:700}
.vip-field input[type=number]{width:72px}.vip-field input[type=color]{width:44px;padding:2px;min-height:var(--ctl-h-sm)}
.vip-field select{width:auto;min-height:var(--ctl-h-sm)}
.vseg{display:inline-flex;background:var(--sky);border-radius:999px;padding:3px;gap:2px}
.vseg label{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-weight:800;font-size:13.5px;cursor:pointer;color:var(--muted)}
.vseg input{position:absolute;opacity:0;pointer-events:none}
.vseg label:has(input:checked){background:var(--card);color:var(--navy);box-shadow:var(--shadow)}

.vip-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
.vip-stats .stat{padding:12px 14px}.vip-stats .stat b{font-size:24px}
.vip-issue{margin-bottom:16px}
.vip-issue h2{margin:0;font-size:19px}
.vip-issue-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;margin-top:12px;align-items:start}
.vip-issue-grid>aside{position:sticky;top:calc(var(--head-h,66px) + 12px)}
.vip-picked{display:flex;align-items:baseline;gap:8px;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,#0b2748,#14457a);color:#fff}
.vip-picked b{font-size:30px;color:#E8B021;line-height:1}
.vip-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:10px}
.vip-toolbar input[type=search]{width:min(340px,60vw)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.vip-toolbar .chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font-weight:800;font-size:13px;cursor:pointer;color:var(--muted)}
.vip-toolbar .chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.vip-bulk[hidden]{display:none}
.vip-bulk{position:sticky;top:calc(var(--head-h,66px) + 8px);z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;margin-bottom:10px;border-radius:14px;background:var(--kfa-deep,#063A6B);color:#fff;box-shadow:var(--shadow-lg)}
.vip-bulk .btn.light{background:rgb(255 255 255 / .12);color:#fff;border-color:rgb(255 255 255 / .3)}
.vip-bulk select{min-height:var(--ctl-h-sm);background:#fff}
.btn.green{--b:#1f9d55;background:#1f9d55;border-color:#1f9d55;color:#fff}
.vip-table td{vertical-align:middle}
.vip-table input,.vip-table select{min-height:36px;padding:6px 8px;font-size:14px}
.vip-table input.saved{box-shadow:0 0 0 2px #22c55e}
.vip-guest{display:grid;gap:6px;min-width:190px}.vip-guest select{width:110px}
.vip-table td:nth-child(5){white-space:nowrap}
.vip-contact{display:grid;gap:6px;min-width:170px}

.vip-thumb{display:block;padding:0;border:0;background:none;cursor:zoom-in;margin-bottom:3px}
.vip-thumb canvas{width:92px;height:auto;border-radius:6px;box-shadow:0 2px 8px rgb(0 0 0 / .2);display:block}
.vip-badges .badge{margin:1px}
.vip-acts{display:grid;grid-template-columns:repeat(2,36px);gap:4px}.vip-acts .btn{padding:0;width:36px;min-width:0}
.vip-guest{min-width:220px}
.vip-table tr.off{opacity:.55}
.vip-modal{border:0;border-radius:18px;padding:18px;width:min(520px,94vw);box-shadow:0 30px 80px rgb(0 0 0 / .4);background:var(--card);color:var(--ink)}
.vip-modal::backdrop{background:rgb(4 16 32 / .55);backdrop-filter:blur(3px)}
.vip-modal h3{margin:0}
.vip-modal.big{width:min(1000px,96vw)}.vip-modal.big canvas{width:100%;height:auto;margin-top:10px;border-radius:10px}
.vip-busy[hidden]{display:none}
.vip-busy{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgb(4 16 32 / .5)}
.vip-busy>div{background:var(--card);padding:20px 24px;border-radius:16px;min-width:280px;display:grid;gap:12px}
.vip-busy .progress{height:8px;border-radius:8px;background:var(--sky);overflow:hidden}.vip-busy .progress i{display:block;height:100%;background:var(--blue);transition:width .2s}
@media(max-width:1100px){.vip-editor,.vip-issue-grid{grid-template-columns:1fr}.vip-stage-wrap,.vip-issue-grid>aside{position:static}.vip-stats{grid-template-columns:repeat(3,1fr)}}

/* guest page */
html:has(.vip-guest-page){background:#071a2e}
.vip-guest-page{background:radial-gradient(120% 900px at 50% 0%,#14457a 0%,#071a2e 70%) no-repeat #071a2e;color:#e9f1fa;min-height:100vh}
.vip-guest{max-width:640px;margin:0 auto;padding:calc(16px + var(--sat,0px)) 16px calc(30px + var(--sab,0px));display:grid;gap:16px}
.vip-guest header{display:flex;align-items:center;justify-content:space-between;color:#E8B021;font-weight:900}
.vip-guest header .brand-logo,.vip-guest header svg{max-height:40px}
.vip-card-box canvas{width:100%;height:auto;border-radius:14px;box-shadow:0 24px 60px rgb(0 0 0 / .5);display:block}
.vip-info h1{margin:0 0 4px;font-size:26px;color:#fff}
.vip-info p{margin:0;color:#b9cde3}
.vip-info dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 0}
.vip-info dl div{background:rgb(255 255 255 / .06);border:1px solid rgb(255 255 255 / .1);border-radius:12px;padding:10px 12px}
.vip-info dt{font-size:12px;color:#9fb6cf;font-weight:700}.vip-info dd{margin:2px 0 0;font-weight:800;color:#fff}
.vip-rsvp{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px;border-radius:16px;background:rgb(232 176 33 / .12);border:1px solid rgb(232 176 33 / .4)}
.vip-rsvp b{color:#f5d27a}
.vip-guest .btn.light{background:rgb(255 255 255 / .1);color:#fff;border-color:rgb(255 255 255 / .25)}
.vip-route{background:rgb(255 255 255 / .05);border-radius:16px;padding:14px 16px}
.vip-route h2{margin:0 0 8px;font-size:17px;color:#fff}
.vip-route ol{margin:0;padding-inline-start:20px;display:grid;gap:6px;color:#d6e4f2}
.vip-guest .help{color:#9fb6cf}