/* ==========================================================
   مدرج — Mudarraj  |  Dark luxury ticketing storefront
   ========================================================== */
:root{
    --bg:#05090C;
    --surface:#0D151C;
    --elev:#1A242F;
    --elev-2:#22303d;
    --text:#F8FAFC;
    --text-2:#94A3B8;
    --muted:#64748b;
    --gold:#E5C07B;
    --gold-2:#D4AF37;
    --gold-soft:rgba(229,192,123,.14);
    --green:#00E676;
    --green-soft:rgba(0,230,118,.14);
    --line:rgba(255,255,255,.08);
    --line-2:rgba(255,255,255,.14);
    --error:#EF4444;
    --radius:16px;
    --radius-lg:24px;
    --nav-h:74px;
    --font-h:'Readex Pro',sans-serif;
    --font-b:'IBM Plex Sans Arabic',sans-serif;
    --shadow:0 24px 60px rgba(0,0,0,.45);
    --shadow-sm:0 10px 30px rgba(0,0,0,.35);
    --glow-gold:0 0 0 1px rgba(229,192,123,.35),0 12px 36px rgba(229,192,123,.18);
    --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:var(--font-b);
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
/* The film grain is a page texture, not a layer that outranks the UI. It used to sit
   at 9000 — above the OTP modal — so the gateway card, the thing that must feel like
   a separate app, was the one element on the site the grain did NOT cover, and its
   backdrop blur fought a fixed pseudo-element sitting on top of it. */
body::before{
    content:"";position:fixed;inset:0;z-index:1200;pointer-events:none;opacity:.045;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--gold);color:var(--bg)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit}
h1,h2,h3,h4,.font-h{font-family:var(--font-h);letter-spacing:-.02em;line-height:1.25}
.container{max-width:1280px;margin:0 auto;padding:0 28px}
/* Relative, but deliberately WITHOUT a z-index: giving main one made it a stacking
   context, which trapped every layer inside it — the payment modal's z-index:1400 then
   only ever meant "1400th inside main", so the film grain and the sticky header, both
   of which live in the root context, painted on top of the gateway card. Left auto,
   main's fixed overlays resolve against the root context, where 1400 really is above
   the header (100) and the grain (1200). Nothing else in here needs a layer above the
   nav, and main is still positioned for its absolutely-placed children. */
main{position:relative}

/* ---------- Buttons ---------- */
.btn-primary,.btn-ghost,.btn-ticket{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;border:none;
    font-family:var(--font-h);font-weight:600;font-size:14px;border-radius:99px;padding:12px 24px;
    transition:transform .3s var(--ease),background-color .3s,box-shadow .3s,color .3s;white-space:nowrap;
}
.btn-primary{background:var(--gold);color:var(--bg)}
.btn-primary:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 14px 34px rgba(229,192,123,.28)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:13px}
.btn-block{width:100%;padding:15px;font-size:15px}
.icon-btn{
    width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--text-2);
    border:1px solid transparent;transition:.25s;font-size:16px;position:relative;
}
.icon-btn:hover{color:var(--gold);border-color:var(--line-2);background:rgba(255,255,255,.03)}

/* ---------- Header ---------- */
.site-header{
    position:sticky;top:0;z-index:100;height:var(--nav-h);
    background:rgba(5,9,12,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h)}
.logo{display:flex;align-items:center;gap:11px;color:var(--text)}
.logo svg{width:34px;height:34px;flex-shrink:0;transition:transform .4s var(--ease)}
.logo:hover svg{transform:translateY(-2px) rotate(-4deg)}
.logo-text{display:flex;flex-direction:column;line-height:1}
/* logo-ar carries the vocalised brandmark (مُدَرَّجْ): drop the negative
   letter-spacing (marks would collide) and give the line-box enough height
   that the shadda/sukun don't clip, then pull the latin line back up with a
   negative margin so the two still sit tight together. */
.logo-ar{font-family:var(--font-h);font-weight:700;font-size:22px;letter-spacing:normal;line-height:1.5}
.logo-en{font-size:10px;color:var(--gold);letter-spacing:.28em;text-transform:uppercase;margin-top:-4px;font-weight:500}
.nav-links{list-style:none;display:flex;align-items:center;gap:6px}
.nav-links>li>a{
    color:var(--text-2);font-family:var(--font-h);font-weight:500;font-size:14.5px;
    padding:9px 14px;border-radius:99px;display:flex;align-items:center;gap:7px;transition:color .25s,background-color .25s;
}
.nav-links>li>a:hover,.nav-links>li>a.active{color:var(--text);background:rgba(255,255,255,.05)}
.nav-links .fa-chevron-down{font-size:9px;opacity:.6}
.has-dropdown{position:relative}
.dropdown{
    list-style:none;position:absolute;top:calc(100% + 10px);right:0;min-width:260px;
    background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;
    opacity:0;visibility:hidden;transform:translateY(10px);transition:.28s var(--ease);z-index:50;
}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown li a{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:9px;color:var(--text-2);font-size:14px;transition:.2s}
.dropdown li a::after{content:"←";font-size:12px;opacity:0;transform:translateX(6px);transition:.25s}
.dropdown li a:hover{background:var(--elev);color:var(--gold)}
.dropdown li a:hover::after{opacity:1;transform:translateX(0)}
.nav-actions{display:flex;align-items:center;gap:8px}
.cart-badge{
    position:absolute;top:2px;left:2px;background:var(--gold);color:var(--bg);font-size:10.5px;font-weight:700;
    min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px;font-family:var(--font-h);
}
.mobile-toggle{display:none;background:none;border:none;color:var(--text);font-size:22px;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;margin-top:calc(var(--nav-h) * -1);min-height:min(88vh,820px);display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0;transform:scale(1.04);animation:heroZoom 14s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,var(--bg) 0%,rgba(5,9,12,.82) 32%,rgba(5,9,12,.35) 70%,rgba(5,9,12,.55) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to left,rgba(5,9,12,.55),transparent 55%)}
.hero-inner{position:relative;z-index:2;width:100%;padding:150px 0 70px}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-family:var(--font-h);font-size:13px;font-weight:500;letter-spacing:.04em;margin-bottom:22px;animation:rise .9s var(--ease) both}
.hero-kicker::before{content:"";width:34px;height:1px;background:var(--gold)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(0,230,118,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(0,230,118,0)}100%{box-shadow:0 0 0 0 rgba(0,230,118,0)}}
.hero h1{font-size:clamp(42px,6.4vw,84px);font-weight:700;line-height:1.08;max-width:820px;margin-bottom:22px;animation:rise .9s .1s var(--ease) both}
.hero h1 .accent{color:var(--gold)}
.hero p{font-size:clamp(16px,1.4vw,20px);color:var(--text-2);max-width:560px;margin-bottom:38px;animation:rise .9s .2s var(--ease) both}
.hero-search{
    display:flex;align-items:center;gap:6px;background:rgba(13,21,28,.85);border:1px solid var(--line-2);
    border-radius:99px;padding:7px 7px 7px 20px;max-width:640px;backdrop-filter:blur(10px);
    transition:border-color .3s,box-shadow .3s;animation:rise .9s .3s var(--ease) both;
}
.hero-search:focus-within{border-color:var(--gold);box-shadow:var(--glow-gold)}
.hero-search i{color:var(--muted)}
.hero-search input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:inherit;font-size:16px;padding:12px 14px;min-width:0}
.hero-search input::placeholder{color:var(--muted)}
.hero-search button{padding:13px 30px}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;animation:rise .9s .4s var(--ease) both}
.hero-chips a{font-size:13px;color:var(--text-2);border:1px solid var(--line);border-radius:99px;padding:6px 14px;transition:.25s}
.hero-chips a:hover{color:var(--gold);border-color:var(--gold)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- Stats strip ---------- */
.stats{border-block:1px solid var(--line);background:var(--surface)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:28px 20px;display:flex;flex-direction:column;gap:4px;border-inline-start:1px solid var(--line)}
.stat:first-child{border-inline-start:none}
.stat .n{font-family:var(--font-h);font-size:34px;font-weight:700;color:var(--gold);line-height:1}
.stat .l{font-size:13.5px;color:var(--text-2)}

/* ---------- Sections ---------- */
.section{padding:84px 0}
.section-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-family:var(--font-h);font-size:12.5px;font-weight:500;letter-spacing:.06em}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}
.section-title{font-size:clamp(28px,3vw,42px);font-weight:700;color:var(--text)}
.section-sub{color:var(--text-2);font-size:15.5px;max-width:620px}
.section-title-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:38px;flex-wrap:wrap}
.link-more{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--font-h);font-size:14px;font-weight:500;transition:.25s;padding-bottom:4px;border-bottom:1px solid transparent}
.link-more:hover{color:var(--gold);border-color:var(--gold)}
.link-more i{transition:transform .3s var(--ease)}
.link-more:hover i{transform:translateX(-5px)}
.row-actions{display:flex;align-items:center;gap:14px}
.arrows{display:flex;gap:8px}
.arrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--text);cursor:pointer;font-size:13px;transition:.25s}
.arrows button:hover{background:var(--gold);border-color:var(--gold);color:var(--bg)}

/* ---------- Bento categories ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px}
.bento-tile{
    position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);display:flex;align-items:flex-end;
    border:1px solid var(--line);isolation:isolate;animation:rise .8s var(--ease) both;
}
.bento-tile:nth-child(1){grid-column:span 2;grid-row:span 2}
.bento-tile:nth-child(2){grid-column:span 2}
.bento-tile:nth-child(n+2){animation-delay:calc(.06s * var(--i,1))}
.bento-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s;filter:saturate(.85)}
.bento-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,9,12,.96) 0%,rgba(5,9,12,.45) 50%,rgba(5,9,12,.1) 100%);transition:.4s}
.bento-tile:hover img{transform:scale(1.07);filter:saturate(1.05)}
.bento-tile:hover::after{background:linear-gradient(to top,rgba(5,9,12,.98) 0%,rgba(5,9,12,.5) 55%,rgba(5,9,12,.15) 100%)}
.bento-inner{position:relative;z-index:2;padding:22px;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.bento-name{font-family:var(--font-h);font-size:18px;font-weight:600;line-height:1.3}
.bento-tile:nth-child(1) .bento-name{font-size:30px}
.bento-count{font-size:12.5px;color:var(--text-2);margin-top:4px;display:block}
.bento-go{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--text);flex-shrink:0;transition:.3s var(--ease)}
.bento-tile:hover .bento-go{background:var(--gold);border-color:var(--gold);color:var(--bg);transform:rotate(-45deg)}

/* ---------- Event cards ---------- */
.events-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:10px;scrollbar-width:none;margin:0 -28px;padding-inline:28px}
.rail::-webkit-scrollbar{display:none}
.rail>.event-card{flex:0 0 296px;scroll-snap-align:start}
.event-card{
    background:var(--surface);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
    border:1px solid var(--line);transition:transform .45s var(--ease),border-color .3s,box-shadow .45s;position:relative;
    animation:rise .8s var(--ease) both;
}
.events-row .event-card:nth-child(n){animation-delay:calc(.05s * (var(--i,1)))}
.event-card:hover{transform:translateY(-8px);border-color:rgba(229,192,123,.35);box-shadow:var(--shadow)}
.event-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--elev)}
.event-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.event-card:hover .event-media img{transform:scale(1.08)}
.event-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,21,28,.9) 0%,transparent 45%)}
.date-badge{
    position:absolute;top:12px;inset-inline-start:12px;z-index:2;background:rgba(5,9,12,.72);backdrop-filter:blur(8px);
    border:1px solid var(--line-2);color:var(--text);border-radius:12px;padding:8px 11px;text-align:center;line-height:1;min-width:52px;
}
.date-badge .d{font-family:var(--font-h);font-size:20px;font-weight:700;display:block;color:var(--gold)}
.date-badge .m{font-size:11px;display:block;margin-top:4px;color:var(--text-2)}
.card-cat{position:absolute;top:12px;inset-inline-end:12px;z-index:2;font-size:11px;color:var(--text-2);background:rgba(5,9,12,.6);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:99px;padding:4px 10px}
.event-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.event-title{font-family:var(--font-h);font-size:15.5px;font-weight:600;color:var(--text);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:46px}
.event-meta{display:flex;flex-direction:column;gap:5px;color:var(--text-2);font-size:12.5px}
.event-meta span{display:flex;align-items:center;gap:7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.event-meta i{color:var(--gold);font-size:11px;width:12px}
.event-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.event-price{display:flex;flex-direction:column;line-height:1.15}
.event-price .from{font-size:11px;color:var(--muted)}
.event-price .val{font-family:var(--font-h);font-size:17px;font-weight:700;color:var(--gold)}
.btn-ticket{background:var(--elev);color:var(--text);padding:9px 16px;font-size:13px;border:1px solid var(--line-2)}
.event-card:hover .btn-ticket{background:var(--gold);color:var(--bg);border-color:var(--gold)}

/* ---------- Why us ---------- */
.why{position:relative;overflow:hidden}
.why::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(229,192,123,.13),transparent 65%);top:-200px;left:-200px;pointer-events:none}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.why-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 26px;transition:.35s var(--ease);position:relative;overflow:hidden}
.why-card::after{content:"";position:absolute;inset:auto -30px -30px auto;width:120px;height:120px;border-radius:50%;background:var(--gold-soft);opacity:0;transition:.4s}
.why-card:hover{transform:translateY(-6px);border-color:rgba(229,192,123,.3)}
.why-card:hover::after{opacity:1}
.why-num{font-family:var(--font-h);font-size:13px;color:var(--muted);letter-spacing:.1em;margin-bottom:24px}
.why-icon{width:52px;height:52px;border-radius:14px;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;font-size:20px;margin-bottom:20px;border:1px solid rgba(229,192,123,.25)}
.why-card h3{font-size:18px;margin-bottom:8px;font-weight:600}
.why-card p{color:var(--text-2);font-size:14px}

/* ---------- CTA banner ---------- */
.cta-banner{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:340px;display:flex;align-items:center;border:1px solid var(--line)}
.cta-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(5,9,12,.95) 0%,rgba(5,9,12,.75) 45%,rgba(5,9,12,.25) 100%)}
.cta-inner{position:relative;z-index:2;padding:56px;max-width:600px}
.cta-inner h2{font-size:clamp(26px,3vw,40px);margin:10px 0 12px}
.cta-inner p{color:var(--text-2);margin-bottom:28px;font-size:15.5px}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--surface);color:var(--text-2);margin-top:60px;position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.3fr;gap:40px;padding:64px 0 44px}
.logo-footer{margin-bottom:18px}
.footer-brand p{font-size:14px;line-height:1.9;margin-bottom:22px;max-width:380px}
.socials{display:flex;gap:10px}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--text);transition:.3s var(--ease)}
.socials a:hover{background:var(--gold);border-color:var(--gold);color:var(--bg);transform:translateY(-3px)}
.footer-col h4{color:var(--text);font-size:15px;margin-bottom:20px;font-weight:600}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-col ul a{font-size:14px;transition:.25s;display:inline-flex;align-items:center;gap:8px}
.footer-col ul a::before{content:"";width:0;height:1px;background:var(--gold);transition:width .3s var(--ease)}
.footer-col ul a:hover{color:var(--gold)}
.footer-col ul a:hover::before{width:12px}
.contact-list li{font-size:14px;display:flex;align-items:center;gap:12px;margin-bottom:14px}
.contact-list i{color:var(--gold);width:16px}
.footer-bottom{border-top:1px solid var(--line);padding:22px 0;font-size:13px}
.footer-bottom .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.footer-bottom .made{display:flex;align-items:center;gap:8px}
.footer-bottom .made i{color:var(--green)}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{position:relative;padding:64px 0 54px;border-bottom:1px solid var(--line);overflow:hidden;background:var(--surface)}
.page-hero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(229,192,123,.16),transparent 65%);top:-260px;right:-120px;pointer-events:none}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-size:clamp(32px,4vw,52px);font-weight:700;margin-bottom:12px}
.page-hero p{color:var(--text-2);max-width:640px;font-size:15.5px}
.breadcrumb{color:var(--muted);font-size:13px;margin-bottom:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.breadcrumb a{transition:.2s}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{color:var(--text-2)}

/* ---------- Category filter bar ---------- */
.filter-bar{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:10px 12px 10px 20px;margin-bottom:30px;flex-wrap:wrap}
.filter-label{font-family:var(--font-h);font-weight:500;font-size:14px;display:flex;align-items:center;gap:10px;color:var(--text-2)}
.filter-label i{color:var(--gold)}
.filter-select{position:relative;flex:1;min-width:200px;max-width:300px}
.filter-select select{width:100%;appearance:none;border:1px solid var(--line-2);border-radius:99px;padding:11px 42px 11px 18px;font-family:var(--font-h);font-weight:500;font-size:14px;background:var(--elev);color:var(--text);cursor:pointer;outline:none;transition:.25s}
.filter-select select:focus{border-color:var(--gold);box-shadow:var(--glow-gold)}
.filter-select select option{background:var(--surface);color:var(--text)}
.filter-select::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:11px;pointer-events:none}
.filter-reset{color:var(--error);font-weight:500;font-size:13.5px;display:flex;align-items:center;gap:6px;transition:.2s}
.filter-reset:hover{opacity:.8}
.count-pill{font-size:13px;color:var(--text-2);background:var(--elev);border:1px solid var(--line);border-radius:99px;padding:6px 14px}

/* ---------- Event detail ---------- */
.evt-detail{padding:34px 0 70px}
.evt-hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:420px;display:flex;align-items:flex-end;border:1px solid var(--line)}
.evt-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.evt-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,9,12,.97) 0%,rgba(5,9,12,.6) 45%,rgba(5,9,12,.15) 100%)}
.evt-hero-inner{position:relative;z-index:2;padding:40px 40px 36px;width:100%}
.evt-cat{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gold);border:1px solid rgba(229,192,123,.4);border-radius:99px;padding:5px 14px;margin-bottom:16px;background:var(--gold-soft)}
.evt-hero-inner h1{font-size:clamp(26px,3.2vw,44px);font-weight:700;margin-bottom:18px;max-width:900px}
.evt-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--text)}
.evt-meta span{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:99px;padding:8px 16px;backdrop-filter:blur(6px)}
.evt-meta i{color:var(--gold)}
.countdown{display:flex;gap:10px;margin-top:26px}
.cd-box{background:rgba(13,21,28,.85);border:1px solid var(--line-2);border-radius:14px;padding:12px 8px;min-width:76px;text-align:center;backdrop-filter:blur(8px)}
.cd-box .num{font-family:var(--font-h);font-size:26px;font-weight:700;color:var(--gold);line-height:1}
.cd-box .lbl{font-size:11.5px;color:var(--text-2);margin-top:6px}
/* An ended event replaces the four live boxes with one statement. It reuses
   .countdown so it inherits the flex/margin and the mobile wrap rules. */
.countdown.ended{align-items:center;gap:14px;flex-wrap:wrap}
.ended-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(100,116,139,.16);color:var(--text);border:1px solid var(--line-2);font-size:14px;font-weight:600;border-radius:99px;padding:10px 20px}
.ended-badge i{color:var(--muted)}
.ended-note{font-size:13px;color:var(--text-2)}
.ended-panel h3{display:flex;align-items:center;gap:10px;font-size:19px}
.ended-links{display:flex;gap:12px;flex-wrap:wrap}
.evt-layout{display:grid;grid-template-columns:1fr 380px;gap:28px;margin-top:30px;align-items:start}
/* The bar is a component, so its width and centring live here, not in an inline style
   on each of the four pages — three of them disagreed on both, which is how the same
   step row ended up 820px, 680px and full-width on different screens. */
.steps{display:flex;gap:6px;max-width:820px;margin:0 auto 22px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:6px}
.steps .step{flex:1 1 0;min-width:0;text-align:center;padding:11px 12px;border-radius:99px;color:var(--muted);font-family:var(--font-h);font-weight:500;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:9px;transition:.3s;overflow-wrap:break-word}
.steps .step.active{background:var(--elev);color:var(--text);border:1px solid var(--line-2)}
.steps .step .n{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--elev);color:var(--muted);display:grid;place-items:center;font-size:11px;border:1px solid var(--line-2)}
/* A done step's tick lives here rather than in an inline style on every <i>: four
   pages repeat this markup and an inline font-size also beat the smaller mobile size
   below, so the phone rule never applied to completed steps. */
.steps .step .n i{font-size:10px}
.steps .step.active .n{background:var(--gold);color:var(--bg);border-color:var(--gold)}
/* the bar on a phone: four cells at 13.5px inside a 282px pill asks ~100px per cell and
   gets 63px, so the labels pile up two deep AND the row overflows the panel it sits in —
   bulky and half off screen at once. There it stops being a pill: a plain stepper, badge
   over label, the label taking the whole cell width and shrinking with it. flex-basis 0
   with min-width 0 is what makes that possible — without it a flex item refuses to drop
   below its content width, which is exactly the spill. */
@media(max-width:640px){
    .steps{max-width:none;background:transparent;border:none;border-radius:0;padding:0;gap:4px;margin-bottom:18px}
    .steps .step{flex-direction:column;align-items:center;gap:6px;padding:2px 1px;
        border:none;background:transparent;font-size:11px;font-weight:500;line-height:1.3}
    .steps .step.active{background:transparent;border:none;color:var(--gold);font-weight:700}
    .steps .step .n{width:20px;height:20px;font-size:10px}
    .steps .step .n i{font-size:8px}
    .steps .step.active .n{width:26px;height:26px;font-size:12px}
}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;margin-bottom:22px}
.panel h3,.tiers-panel h3{font-size:20px;font-weight:600}
.hint{color:var(--text-2);font-size:14px}

/* seat map */
.seatmap-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:center}
.stadium-svg{width:100%;height:auto;max-height:460px;display:block;background:radial-gradient(ellipse at 50% 45%,#141d26 0%,var(--bg) 100%);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.stadium-zone{cursor:pointer;outline:none}
.stadium-zone rect{transition:fill-opacity .2s,stroke .2s,filter .2s}
.stadium-zone:hover rect,.stadium-zone:focus-visible rect{fill-opacity:1;filter:brightness(1.15)}
.stadium-zone.dim{opacity:.18}
.stadium-zone.selected rect{fill-opacity:1;stroke:#fff;stroke-width:2.6}
.seatmap-legend{display:flex;flex-direction:column;gap:8px}
.legend-item{display:flex;align-items:center;gap:12px;width:100%;background:var(--elev);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;font-family:var(--font-h);font-size:13.5px;font-weight:500;color:var(--text);transition:.25s;text-align:right}
.legend-item:hover{border-color:var(--line-2);transform:translateX(-3px)}
.legend-item.active{border-color:var(--gold);box-shadow:var(--glow-gold)}
.legend-dot{width:14px;height:14px;border-radius:4px;flex-shrink:0}
.legend-dot.all{background:linear-gradient(135deg,var(--gold),var(--green))}
.legend-name{flex:1}
.legend-price{color:var(--gold);font-weight:700;white-space:nowrap}
.tier-row.hide{display:none}

/* tiers */
.tiers-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px}
.tiers-panel .hint{margin:6px 0 20px}
.tier-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;transition:.3s var(--ease);flex-wrap:wrap;background:var(--elev)}
.tier-row:hover{border-color:rgba(229,192,123,.4);transform:translateX(-3px)}
.tier-info{display:flex;flex-direction:column;gap:6px}
.tier-label{font-family:var(--font-h);font-weight:600;font-size:16px;display:flex;align-items:center;gap:10px}
.tier-tag{background:var(--green-soft);color:var(--green);font-size:11.5px;padding:3px 10px;border-radius:99px;font-weight:500;font-family:var(--font-b)}
/* (the old .tier-remaining rules went with the «X تذكرة متبقية» line —
   inventory is unlimited, tickets sell until the event date passes) */
.tier-price{text-align:center}
.tier-price .p{font-family:var(--font-h);font-size:24px;font-weight:700;color:var(--gold)}
.tier-price .u{font-size:12px;color:var(--muted)}
.tier-actions{display:flex;align-items:center;gap:12px}
.qty-ctrl{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:99px;overflow:hidden;background:var(--surface)}
.qty-ctrl button{width:36px;height:36px;border:none;background:transparent;cursor:pointer;font-size:16px;color:var(--text);transition:.2s}
.qty-ctrl button:hover{background:var(--gold);color:var(--bg)}
.qty-ctrl input{width:42px;border:none;text-align:center;font-family:var(--font-h);font-weight:600;font-size:15px;outline:none;background:transparent;color:var(--text)}
.evt-sidebar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;position:sticky;top:calc(var(--nav-h) + 20px)}
.evt-sidebar h3{font-size:17px;margin-bottom:16px;font-weight:600}
.evt-sidebar .card-img{border-radius:var(--radius);overflow:hidden;margin-bottom:18px;aspect-ratio:16/10;border:1px solid var(--line)}
.evt-sidebar .card-img img{width:100%;height:100%;object-fit:cover}
.side-meta{font-size:14px;color:var(--text-2);display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.side-meta span{display:flex;align-items:flex-start;gap:10px}
.side-meta i{color:var(--gold);width:18px;margin-top:4px}
.side-price{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}
.side-price .l{color:var(--text-2);font-size:13.5px}
.side-price .v{font-family:var(--font-h);font-size:26px;font-weight:700;color:var(--gold)}
.side-price .v small{font-size:13px;color:var(--text-2);font-weight:500}
.evt-about{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;margin-top:22px}
.evt-about h2{font-size:24px;margin:8px 0 16px;font-weight:600}
.evt-about p{margin-bottom:14px;color:var(--text-2);font-size:15px}
.related{margin-top:60px}

/* ---------- Cart / checkout ---------- */
.cart-line{display:flex;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.cart-line:last-child{border-bottom:none;padding-bottom:0}
.cart-line .thumb{width:104px;height:74px;border-radius:12px;overflow:hidden;flex-shrink:0;border:1px solid var(--line)}
.cart-line .thumb img{width:100%;height:100%;object-fit:cover}
.cart-line .info{flex:1;min-width:0}
.cart-line .info h4{font-size:15px;margin-bottom:4px;font-weight:600}
.cart-line .info .sub{color:var(--text-2);font-size:13px}
.cart-line .price{font-family:var(--font-h);font-weight:700;font-size:18px;white-space:nowrap;color:var(--gold)}
.cart-tools{margin-top:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.link-remove{color:var(--error);background:none;border:none;cursor:pointer;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:.2s}
.link-remove:hover{opacity:.75}
.link-update{color:var(--gold)}
.summary{position:sticky;top:calc(var(--nav-h) + 20px)}
.summary-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:14.5px;color:var(--text-2)}
.summary-row small{color:var(--muted)}
.summary-total{display:flex;justify-content:space-between;padding:18px 0 4px;border-top:1px solid var(--line-2);margin-top:8px;font-family:var(--font-h);font-size:20px;font-weight:700}
.summary-total span:last-child{color:var(--gold)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* min-width:0 on the field: a bare <input> contributes its default `size` width
   (~20 chars ≈ 300px+) to the track as its automatic minimum size, so the field
   could not shrink under its label and the whole card form spilled past the panel
   it sits in on a phone — the reason the payment page scrolled sideways at 320px. */
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px;color:var(--text-2);font-weight:500}
.field input,.field textarea,.field select{
    /* width:100% + min-width:0 for the same reason one level down: an input left
       inline-block sizes itself to `size` (that is .card-number-wrap input's rule
       made general), and stretching it to the field is also what lines the box up
       under its label. No checkbox/radio input lives in a .field on this site. */
    display:block;width:100%;min-width:0;
    border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-family:inherit;font-size:15px;outline:none;
    transition:border-color .25s,box-shadow .25s;background:var(--elev);color:var(--text);
}
.field select{appearance:none}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold);box-shadow:var(--glow-gold)}
/* Payment card: every value sits on the centre axis of its box (the card number
   gets there through .card-number-wrap above, which also reserves the logo's slot
   in its padding). dir="ltr" on the inputs only sets direction — an explicit
   text-align still wins, so no !important is needed. */
.field input.txt-center{text-align:center}
.empty-state{text-align:center;padding:80px 20px;color:var(--text-2)}
/* Direct child only: the 52px glyph is the empty-state's own icon. As a descendant
   selector it also captured <i> icons inside a button placed here, stretching a
   46px pill to 96px. */
.empty-state > i{font-size:52px;color:var(--gold);margin-bottom:20px;opacity:.7}
.empty-state h3{color:var(--text);margin-bottom:8px;font-size:22px}
.confirm-box{text-align:center;padding:56px 30px;max-width:720px;margin:0 auto;position:relative;overflow:hidden}
.confirm-box::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(0,230,118,.14),transparent 65%);top:-220px;left:50%;transform:translateX(-50%);pointer-events:none}
.confirm-icon{width:88px;height:88px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:38px;margin:0 auto 24px;border:1px solid rgba(0,230,118,.4);position:relative}
.confirm-box h1{font-size:32px;margin-bottom:10px}
.confirm-box>p{color:var(--text-2)}
.confirm-box .ref{display:inline-flex;align-items:center;gap:10px;background:var(--elev);border:1px dashed rgba(229,192,123,.5);border-radius:12px;padding:12px 24px;font-family:var(--font-h);font-weight:600;color:var(--gold);margin:20px 0 6px;letter-spacing:.05em}
.info-note{background:var(--elev);border:1px solid var(--line);color:var(--text-2);border-radius:14px;padding:14px 18px;font-size:13.5px;margin-bottom:20px;display:flex;gap:12px;align-items:flex-start;text-align:right}
.info-note i{color:var(--gold);margin-top:3px}
.info-note.ok i{color:var(--green)}
/* The cart's add/update refusals: an error is red, a silent adjustment amber. */
.info-note.err{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.08);color:var(--text)}
.info-note.err i{color:var(--error)}
.info-note.warn i{color:var(--gold-2)}
.alert{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:#fca5a5;padding:12px 16px;border-radius:12px;margin-bottom:18px;font-size:14px}
.badge-live{display:inline-flex;align-items:center;gap:7px;background:var(--green-soft);color:var(--green);font-size:12px;border-radius:99px;padding:5px 12px;font-weight:500}
.badge-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
/* Same pill shape, opposite meaning — an ended event must not wear the green
   "available" dot, which would be a lie sitting next to the date. */
.badge-ended{display:inline-flex;align-items:center;gap:7px;background:rgba(100,116,139,.18);color:var(--text-2);font-size:12px;border-radius:99px;padding:5px 12px;font-weight:500}

/* auth / prose */
.auth-wrap{max-width:460px;margin:60px auto}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px 34px;position:relative;overflow:hidden}
.auth-card::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(229,192,123,.16),transparent 65%);top:-160px;right:-100px;pointer-events:none}
.auth-card .logo{justify-content:center;margin-bottom:22px}
.auth-card h1{font-size:26px;margin-bottom:6px;text-align:center}
.auth-card .sub{color:var(--text-2);margin-bottom:28px;text-align:center;font-size:14.5px}
.auth-card form{display:flex;flex-direction:column;gap:16px}
.auth-foot{text-align:center;margin-top:20px;color:var(--text-2);font-size:14px}
.auth-foot a{color:var(--gold);font-weight:600}
.prose{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:44px;max-width:900px}
.prose h2{font-size:22px;margin:30px 0 12px;font-weight:600;color:var(--gold)}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--text-2);margin-bottom:14px;font-size:15.5px}
.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
.about-img{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;position:relative}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,9,12,.85),transparent 60%)}
.about-img .q{position:absolute;bottom:26px;right:26px;left:26px;z-index:2;font-family:var(--font-h);font-size:22px;font-weight:600;line-height:1.4}
.about-img .q em{color:var(--gold);font-style:normal}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.value{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.value i{color:var(--gold);font-size:20px;margin-bottom:14px}
.value h3{font-size:16px;margin-bottom:6px;font-weight:600}
.value p{font-size:13.5px;color:var(--text-2)}
.how-steps{display:flex;flex-direction:column;gap:14px}
.how-step{display:flex;gap:14px;align-items:flex-start}
.how-step .n{width:34px;height:34px;border-radius:50%;background:var(--gold-soft);color:var(--gold);border:1px solid rgba(229,192,123,.35);display:grid;place-items:center;font-family:var(--font-h);font-weight:700;font-size:14px;flex-shrink:0}
.how-step h4{font-size:15px;font-weight:600;margin-bottom:2px}
.how-step p{font-size:13.5px;color:var(--text-2)}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
    .events-row{grid-template-columns:repeat(3,1fr)}
    .why-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}
    .stat:nth-child(3){border-inline-start:none}
    .evt-layout{grid-template-columns:1fr}
    .evt-sidebar,.summary{position:static}
    .footer-grid{grid-template-columns:1fr 1fr}
    .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
    .bento-tile:nth-child(1){grid-column:span 2;grid-row:span 1}
    .about-grid{grid-template-columns:1fr}
    .values{grid-template-columns:1fr}
    .seatmap-wrap{grid-template-columns:1fr}
    /* A 343px tier row inside a 282px column spilled the event page 42px sideways on a
       phone. The grid column itself has room (the track measured 282), so the culprit was
       the default min-width:auto on the grid item: its automatic minimum size is its
       min-content width, and the buy row cannot go below its "130 + 45 + 251px of buttons"
       sum, so the item refused to shrink and the whole column — the seat map, the panels,
       the stepper sitting in it — got dragged to 343px. Same one-line rule I gave .field
       for the card form: let the box shrink and let its own wrapping rules do the rest. */
    .evt-layout > *{min-width:0}
}
@media(max-width:820px){
    .nav-links{display:none}
    .mobile-toggle{display:block}
    .nav-links.open{display:flex;position:absolute;top:calc(var(--nav-h) + 8px);right:16px;left:16px;flex-direction:column;align-items:stretch;background:var(--surface);border:1px solid var(--line);padding:14px;border-radius:18px;gap:4px;box-shadow:var(--shadow)}
    .nav-links.open .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:transparent;padding:0 12px}
    .hero-inner{padding:130px 0 54px}
    .events-row{grid-template-columns:repeat(2,1fr)}
    .form-grid{grid-template-columns:1fr}
    .evt-hero-inner{padding:26px 22px}
    .cta-inner{padding:36px 26px}
    .tier-row{flex-direction:column;align-items:stretch}
    .tier-actions{justify-content:space-between}
}
@media(max-width:520px){
    .container{padding:0 18px}
    .rail{margin:0 -18px;padding-inline:18px}
    .events-row,.bento{grid-template-columns:1fr}
    .bento-tile:nth-child(1),.bento-tile:nth-child(2){grid-column:span 1}
    .why-grid,.stats-grid,.footer-grid{grid-template-columns:1fr}
    .stat{border-inline-start:none;border-top:1px solid var(--line)}
    .hero-search{border-radius:20px;flex-wrap:wrap;padding:10px}
    .hero-search button{width:100%}
    .countdown{flex-wrap:wrap}
    .cd-box{min-width:calc(50% - 5px)}
    /* «أضف للسلة» spilled the tier card. Side-by-side, .tier-actions can't shrink
       below qty-ctrl (116px) + gap (12) + the nowrap button (~123px) = ~251px, but a
       320px phone leaves only ~228px of card interior, so the gold button poked past
       the rounded edge. Below this width the two stack: the button takes the full
       width (text no longer a fixed min-content), the qty pill stays its own width. */
    .tier-actions{flex-direction:column;align-items:stretch;gap:10px}
    .tier-actions .qty-ctrl{align-self:center}
    .tier-actions .btn-primary{width:100%}
}

/* ==========================================================
   الدفع + OTP  |  Payment, card gateway & OTP modal
   ========================================================== */
body.no-scroll{overflow:hidden}

/* invalid field state (set by the payment JS and the server) */
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{border-color:var(--error);box-shadow:0 0 0 1px rgba(239,68,68,.35)}
.field.is-invalid label{color:#fca5a5}

/* error banner on the payment page */
.pay-alert{display:flex;align-items:flex-start;gap:10px;line-height:1.7}
.pay-alert i{margin-top:4px}
.pay-alert ul{margin:0;padding-inline-start:18px}

/* card form + sticky order summary */
.pay-layout{margin-top:0}
.pay-layout h3{display:flex;align-items:center;gap:9px;font-size:18px}
.billing-edit{margin-inline-start:auto;font-size:12.5px;font-weight:400;color:var(--gold);text-decoration:none;border-bottom:1px dashed rgba(229,192,123,.45)}
.billing-edit:hover{color:var(--gold-2)}

/* read-only billing recap */
.billing-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.billing-list > div{font-size:14.5px;font-weight:500;padding-bottom:9px;border-bottom:1px dashed var(--line-2);word-break:break-word}
.billing-list > div > span{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-bottom:3px}

/* accepted brands row */
.card-accepted-row{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:12.5px;color:var(--text-2)}
.pay-badge{border:1px solid var(--line-2);border-radius:7px;padding:4px 9px;background:#fff;display:inline-flex;align-items:center;height:26px}
.pay-badge svg{display:block;height:16px;width:auto}
.pay-badge--visa svg{height:13px}

/* card line — the number with the detected brand logo inside it, then expiry and
   CVV beside it, like the face of a real card. */
.card-trio{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr);gap:14px}
.card-trio .field{min-width:0}
@media(max-width:820px){
    /* the same breakpoint the form-grid already stacks at: number keeps a full
       row, exp and CVV share the next one */
    .card-trio{grid-template-columns:1fr 1fr}
    .card-trio .tr-number{grid-column:1/-1}
}
/* The number field is a bare <input>, i.e. an inline-block sized by its `size`
   attribute, so left alone it stops short of the label's width. Forcing it to fill
   the wrap is what lines the box up under «رقم البطاقة *». The digits are centred
   (the field reads like the face of a card), and --cbi-slot reserves the logo's
   width on BOTH sides so the centred text can never slide under it. */
.card-number-wrap{--cbi-slot:58px;position:relative}
.card-number-wrap input{display:block;width:100%;padding-inline:var(--cbi-slot);text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.card-brand-icons{position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;pointer-events:none}
.cbi{display:none;width:40px;height:26px}
.cbi.is-active{display:block;animation:cbi-in .2s var(--ease)}
.cbi svg{display:block;width:100%;height:100%}
@keyframes cbi-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.secure-note{font-size:12.5px;color:var(--text-2);margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.secure-note i{color:var(--green)}

.summary-note{margin-top:14px;font-size:12px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:7px;text-align:center}
.summary-note i{color:var(--green)}

/* success card reuses .panel.confirm-box */
.pay-success{animation:rise .5s var(--ease) both}

/* ---------- processing / awaiting-approval screen ---------- */
.gw-await{max-width:560px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:52px 30px;animation:rise .4s var(--ease) both}
.gw-await .gw-progress{width:100%;max-width:320px;margin:6px 0 10px}
.gw-await h3{font-size:22px;margin:0}
.gw-await .otp-sub{font-size:14.5px}
.gw-await.is-approved .otp-spinner{animation:none;border-color:rgba(0,230,118,.25);border-top-color:var(--green)}

/* gateway progress bar + spinner + dots */
.gw-progress{height:4px;background:var(--elev);border-radius:99px;overflow:hidden}
.gw-progress span{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--gold),var(--green));border-radius:99px;animation:gwload 1.4s var(--ease) infinite}
@keyframes gwload{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}
.otp-spinner{width:44px;height:44px;margin:4px auto 2px;border-radius:50%;border:4px solid var(--elev-2);border-top-color:var(--gold);animation:spinq .8s linear infinite}
@keyframes spinq{to{transform:rotate(360deg)}}
.otp-dots{display:inline-flex;gap:4px;margin-inline-start:5px}
.otp-dots i{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.3;animation:dotq 1.2s infinite}
.otp-dots i:nth-child(2){animation-delay:.2s}
.otp-dots i:nth-child(3){animation-delay:.4s}
@keyframes dotq{0%,60%,100%{opacity:.3}30%{opacity:1}}
.gw-cardrow{display:inline-flex;align-items:center;gap:9px;margin:14px auto 0;padding:9px 16px;background:var(--elev);border:1px solid var(--line-2);border-radius:12px;font-size:13.5px;color:var(--text-2)}
.gw-cardrow i{color:var(--gold)}
.gw-cardrow b{color:var(--text);letter-spacing:.08em}

/* ---------- Modal (OTP gateway) ---------- */
.modal-overlay{position:fixed;inset:0;z-index:1400;background:rgba(2,5,8,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:12px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;overflow-y:auto}
.modal-overlay.show{opacity:1;visibility:visible}
.modal{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);width:100%;max-width:420px;box-shadow:var(--shadow);overflow:hidden auto;margin:auto;transform:translateY(14px) scale(.98);transition:transform .35s var(--ease)}
.modal-overlay.show .modal{transform:translateY(0) scale(1)}
/* The OTP card is sized so the whole thing — header, boxes, resend row, footer —
   fits without an inner scrollbar down to a ~560px-tall window. The overflow above
   stays only as a safety net for extreme viewports. */
.otp-modal{width:min(100%,360px);max-width:360px;border-radius:20px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}

.gw-head{display:flex;align-items:center;gap:10px;padding:10px 15px;background:linear-gradient(135deg,rgba(229,192,123,.16),rgba(0,230,118,.1));border-bottom:1px solid var(--line)}
.gw-logo-mark{width:31px;height:31px;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.gw-brand-txt{display:flex;flex-direction:column;line-height:1.3}
.gw-brand-txt b{font-family:var(--font-h);font-size:14.5px;color:var(--text)}
.gw-brand-txt small{color:var(--text-2);font-size:11px;display:flex;align-items:center;gap:5px}
.gw-brand-txt small i{color:var(--green)}

.gw-step{padding:15px 18px 12px;text-align:center}
.gw-step h3{font-size:18px;margin:8px 0 3px}
.gw-step h3:first-child{margin-top:2px}
.gw-txn{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:start;margin-bottom:11px;background:var(--elev);border:1px solid var(--line);border-radius:13px;padding:8px 11px}
.gw-txn > div{display:flex;flex-direction:column;gap:1px;min-width:0}
.gw-txn span{font-size:10px;color:var(--muted)}
.gw-txn b{font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw-txn b{font-family:var(--font-h)}
/* Guard: dir="ltr" on a stretched block flips its used text-align to left, which detaches the
   value from the label's edge. The LTR run belongs inside a <bdi>; if one ever lands on the
   block itself, keep it right-aligned (RTL "end") so the cell still reads as one column. */
.gw-txn b[dir="ltr"]{text-align:end}
.otp-icon{width:40px;height:40px;margin:0 auto 7px;border-radius:50%;background:var(--gold-soft);border:1px solid rgba(229,192,123,.35);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:17px}
.otp-sub{color:var(--text-2);font-size:13.5px;line-height:1.5;margin:2px 0 0}
.otp-sub b{color:var(--text);font-weight:600}

/* OTP digit boxes */
.otp-boxes{display:flex;gap:7px;justify-content:center;margin:13px 0 6px;direction:ltr}
.otp-boxes.is-error .otp-box{border-color:var(--error)}
.otp-boxes.shake{animation:shakex .4s}
@keyframes shakex{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.otp-box{width:min(44px,calc((100% - 35px)/ 6));aspect-ratio:42 / 50;flex:0 1 44px;min-width:0;text-align:center;font-family:var(--font-h);font-size:19px;font-weight:600;border:1.5px solid var(--line-2);border-radius:11px;background:var(--elev);color:var(--text);transition:border-color .15s,box-shadow .15s,transform .15s}
.otp-box:focus{outline:none;border-color:var(--gold);box-shadow:var(--glow-gold)}
.otp-box.filled{border-color:var(--gold);transform:translateY(-2px)}
.otp-hint{font-size:11.5px;color:var(--muted);margin:4px 0 0}
.otp-err{font-size:12.5px;color:#fca5a5;margin:8px 0 0}
/* the error line repeats the hint ("رمز من 4 أو 6 أرقام"), so when it appears it
   takes the hint's row instead of adding one — keeps the card from growing taller
   exactly when it's most likely to overflow a short viewport */
.otp-step:has(.otp-err:not([hidden])) .otp-hint{display:none}
.otp-submit{margin-top:12px;padding:13px;font-size:14.5px}
.otp-submit:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.otp-resend{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:290px;margin:11px auto 0;font-size:12.5px;color:var(--text-2)}
.otp-resend-btn{background:none;border:0;color:var(--gold);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:8px;transition:.2s}
.otp-resend-btn:hover:not(:disabled){background:var(--gold-soft)}
.otp-resend-btn:disabled{color:var(--muted);cursor:not-allowed}
.otp-back{display:inline-flex;align-items:center;gap:6px;margin:9px auto 0;background:none;border:0;color:var(--text-2);font-family:inherit;font-size:12.5px;cursor:pointer;padding:5px 10px;border-radius:8px;transition:.2s}
.otp-back:hover{color:var(--gold);background:var(--elev)}
.gw-foot{padding:9px 16px;background:var(--elev);border-top:1px solid var(--line);font-size:10.5px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;text-align:center}
.gw-foot i{color:var(--green)}
.gw-foot b{color:var(--text-2);font-weight:600}

/* Very short windows (landscape phones, small laptops): tighten the modal one
   extra notch so the boxes, button and footer are all visible without scrolling
   inside the card. */
@media(max-height:600px){
    .gw-head{padding:7px 14px}
    .gw-logo-mark{width:27px;height:27px;font-size:12.5px;border-radius:9px}
    .gw-brand-txt b{font-size:13.5px}
    .gw-step{padding:11px 16px 9px}
    .gw-step h3{font-size:16.5px}
    .gw-txn{margin-bottom:8px;padding:6px 10px;border-radius:11px}
    .otp-icon{width:34px;height:34px;font-size:15px;margin-bottom:5px}
    .otp-boxes{margin:9px 0 5px}
    .otp-submit{margin-top:9px;padding:11px}
    .otp-resend{margin-top:8px}
    .otp-back{margin-top:7px}
    .gw-foot{padding:7px 14px}
}
/* Short-landscape phones (≈320x480): drop the purely decorative bits so the
   digit boxes, the pay button and the back link are all on screen at once. */
@media(max-height:520px){
    .otp-icon,.otp-hint,.gw-foot{display:none}
    .gw-txn{margin-bottom:6px}
    .otp-boxes{margin:7px 0 4px}
    .otp-submit{margin-top:8px;padding:10px}
    .otp-resend{margin-top:7px}
    .otp-back{margin-top:5px}
}

/* toast (client-side card validation feedback) */
.pay-toast{position:fixed;inset-block-end:26px;inset-inline:0;margin:auto;width:max-content;max-width:92vw;z-index:1600;background:var(--elev);border:1px solid rgba(239,68,68,.45);color:#fca5a5;font-size:13.5px;padding:13px 20px;border-radius:14px;box-shadow:var(--shadow);opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease);text-align:center}
.pay-toast.show{opacity:1;transform:none}

@media(max-width:560px){
    .billing-list{grid-template-columns:1fr}
    .gw-txn{grid-template-columns:1fr}
    /* digit boxes shrink themselves (.otp-box uses a fluid width + aspect-ratio),
       so only the type size needs stepping down here */
    .otp-box{font-size:17px}
    .otp-boxes{gap:6px}
    /* tighter field, so the centred digits get more room: the logo still clears
       the padding (10px in + 40px wide = 50px) */
    .card-number-wrap{--cbi-slot:52px}
}