/* =====================================================================
   دربني · global — reset, type, the phone shell, utilities
   Used by every screen file (screens/*.html). The review hub adds css/hub.css.
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs-body);font-weight:var(--w-text);line-height:var(--lh);color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
fieldset{min-inline-size:0;min-width:0;border:0;padding:0;margin:0}
legend{padding:0}
button{cursor:pointer;background:none;border:0;padding:0;text-align:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
::selection{background:var(--pri);color:var(--on-pri)}
h1,h2,h3,h4,.display,.h1,.h2,.h3{font-family:var(--font-display);font-weight:var(--w-strong);line-height:var(--lh-tight);letter-spacing:0;text-wrap:balance}
p{text-wrap:pretty}
table{border-collapse:collapse;width:100%}
small{font-size:12.5px}

/* ---------- screen page: how a screen file presents itself ----------
   • inside the review hub iframe (≤ 500px wide): the phone fills the frame
   • opened directly on a desktop browser: a framed 390×844 artboard
   • opened directly on a real phone: full viewport, fake status bar hidden */
body.screen-page{min-height:100vh;min-height:100dvh}
.phone{position:relative;width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);color:var(--fg);isolation:isolate}
.phone.white{background:var(--surface)}
.phone.on-dark{background:var(--navy-3);color:#F2F5FB;--fg:#F2F5FB;--muted:#A8B7D2;--line:rgba(255,255,255,.12)}
@media (min-width:501px){
  body.screen-page{display:grid;place-items:center;padding:56px 24px 32px;background:radial-gradient(60% 50% at 80% 0%,rgba(255,107,43,.12),transparent),var(--tint)}
  body.screen-page .phone{width:var(--phone-w);height:var(--phone-h);border-radius:48px;box-shadow:0 0 0 9px #0A1226,0 0 0 10px #2A3550,var(--sh-3)}
}
.standalone-bar{position:fixed;top:12px;inset-inline:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);z-index:5}
.standalone-bar a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--fg)}
.standalone-bar a svg{width:16px;height:16px}
html.is-embedded .standalone-bar,html.is-device .standalone-bar{display:none}

/* ---------- status bar (injected by navigation.js) ---------- */
.ph-status{height:46px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:6px 28px 0 32px;direction:ltr;font-weight:600;font-size:15px;color:var(--fg);position:relative;z-index:2}
.ph-status .sys{display:flex;gap:6px;align-items:center}
.ph-status svg{width:18px;height:12px}
.ph-status svg.bat{width:26px}
html.is-device .ph-status{display:none}
.phone.on-dark .ph-status,.phone.hero-top .ph-status{color:#fff}

/* ---------- top bars ---------- */
.ph-top{flex:none;display:flex;align-items:center;gap:10px;padding:6px var(--gutter) 12px;min-height:60px}
.ph-top .title{flex:1;min-width:0}
.ph-top h1,.ph-top h2{font-size:var(--fs-h1);font-weight:700;line-height:1.2}
.ph-top .sub{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--muted);margin-bottom:2px}
.ph-top .acts{display:flex;gap:8px;align-items:center}
/* compact app bar: back · title · action */
.appbar{flex:none;display:flex;align-items:center;gap:10px;padding:4px var(--gutter) 10px;min-height:56px}
.appbar h1,.appbar h2{flex:1;min-width:0;font-size:18px;font-weight:600;text-align:center;line-height:1.25}
.appbar .sp{width:44px;flex:none}
.appbar.start h1,.appbar.start h2{text-align:start}
.appbar.bordered{border-bottom:1px solid var(--line);background:var(--surface)}

/* ---------- scrolling body · sticky footer ---------- */
.ph-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:4px var(--gutter) 28px;display:flex;flex-direction:column;gap:16px;scrollbar-width:none;scroll-behavior:smooth}
.ph-body::-webkit-scrollbar{display:none}
.ph-body>*{flex-shrink:0}
.phone[data-tabbar] .ph-body{padding-bottom:calc(var(--dock-h) + 20px)}
.ph-body.tight{gap:10px}
.ph-body.loose{gap:24px}
.ph-body.flush{padding-inline:0}
.ph-body.center{justify-content:center}
.ph-foot{flex:none;padding:12px var(--gutter) 30px;display:grid;gap:10px;background:var(--surface);border-top:1px solid var(--line);position:relative;z-index:3}
.ph-foot.clear{background:transparent;border-top-color:transparent;box-shadow:none}
.ph-foot .row>.btn{flex:1}
html.is-device .ph-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}

/* ---------- tab bar (injected by navigation.js from data-tabbar) ----------
   v2: docked, full width, every tab keeps its label (v1 hid inactive labels, so
   users had to learn icons). Active tab = orange icon + label, and a small
   door-lintel marker (the arch motif) sitting on the bar's top edge. */
.tabbar{position:absolute;inset-inline:0;bottom:0;height:var(--dock-h);display:flex;align-items:stretch;padding:0 4px 14px;background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-top:1px solid var(--line);z-index:var(--z-dock)}
.tabbar .t{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:11.5px;font-weight:var(--w-strong);line-height:1.2;transition:color var(--dur-2) var(--ease)}
.tabbar .t .pill{position:relative;display:grid;place-items:center;width:44px;height:28px;border-radius:14px;transition:background var(--dur-2) var(--ease)}
.tabbar .t svg{width:23px;height:23px;transition:transform var(--dur-3) var(--spring)}
.tabbar .t .lbl{display:block;max-width:100%;padding-inline:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar .t::before{content:"";position:absolute;top:-1px;width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--pri);transform:scaleX(0);transform-origin:center;transition:transform var(--dur-3) var(--ease)}
.tabbar .t[aria-current="page"]{color:var(--fg)}
.tabbar .t[aria-current="page"] .pill{background:var(--pri-soft);color:var(--pri-ink)}
.tabbar .t[aria-current="page"] svg{transform:translateY(-1px)}
.tabbar .t[aria-current="page"]::before{transform:scaleX(1)}
.tabbar .t:active .pill{transform:scale(.94)}
.tabbar .tab-badge{position:absolute;top:-4px;inset-inline-end:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--pri);color:var(--on-pri);border:2px solid var(--surface);font:600 11px/14px var(--font);text-align:center}
.tabbar .tab-dot{position:absolute;top:0;inset-inline-end:6px;width:9px;height:9px;border-radius:50%;background:var(--pri);border:2px solid var(--surface)}
html.is-device .tabbar{padding-bottom:calc(6px + env(safe-area-inset-bottom));height:calc(var(--dock-h) - 8px + env(safe-area-inset-bottom))}
.home-ind{position:absolute;bottom:7px;left:50%;width:134px;height:5px;border-radius:3px;background:var(--fg);transform:translateX(-50%);z-index:calc(var(--z-toast) + 1);pointer-events:none;opacity:.88}
html.is-device .home-ind{display:none}
.phone.on-dark .home-ind{background:#fff}

/* ---------- net banner (shown while the review hub simulates offline) ---------- */
.net-banner{display:none;flex:none;align-items:center;gap:8px;margin:0 var(--gutter) 6px;padding:9px 14px;border-radius:var(--r-md);background:var(--navy);color:#fff;font-size:var(--fs-xs);font-weight:600}
.net-banner svg{width:16px;height:16px;flex:none}
html.offline .net-banner{display:flex}
html:not(.offline) .offline-only{display:none!important}
html.offline .online-only{display:none!important}

/* ---------- typography helpers ---------- */
.display{font-size:var(--fs-display);font-weight:var(--w-bold);line-height:1.18}
.h1{font-size:var(--fs-h1);font-weight:var(--w-bold);line-height:1.25}
.h2{font-size:var(--fs-h2);font-weight:var(--w-strong);line-height:1.3}
.h3{font-size:var(--fs-h3);font-weight:var(--w-strong);line-height:1.35}
.t1{font-size:15.5px;font-weight:var(--w-strong);line-height:1.4}
.t2{font-size:var(--fs-sm);font-weight:var(--w-text);color:var(--muted);line-height:1.5}
.t3{font-size:var(--fs-xs);font-weight:var(--w-text);color:var(--muted);line-height:1.5}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:var(--w-strong);color:var(--pri-ink)}
.grad-text{color:var(--pri-ink)}   /* v2: no gradient text, solid brand ink */
.accent{color:var(--pri)}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
.en{direction:ltr;unicode-bidi:isolate;display:inline-block}
.mut{color:var(--muted)} .faint{color:var(--faint)}
.ink-ok{color:var(--ok-ink)} .ink-bad{color:var(--bad-ink)} .ink-info{color:var(--info-ink)} .ink-pri{color:var(--pri-ink)} .ink-gold{color:var(--gold-ink)} .ink-cert{color:var(--cert-ink)}

/* ---------- layout utilities ---------- */
.row{display:flex;align-items:center;gap:12px}
.row.top{align-items:flex-start}
.row.between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.row.g4{gap:4px}.row.g6{gap:6px}.row.g8{gap:8px}.row.g16{gap:16px}
.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:12px}
.stack.g4{gap:4px}.stack.g6{gap:6px}.stack.g8{gap:8px}.stack.g16{gap:16px}.stack.g20{gap:20px}.stack.g24{gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.center{text-align:center}
.nowrap{white-space:nowrap}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mt-auto{margin-top:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* horizontal scroller that bleeds to the screen edges */
.hs{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 6px;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.hs::-webkit-scrollbar{display:none}
.hs>*{flex:none;scroll-snap-align:start}
svg.i{width:22px;height:22px;flex:none;display:block;fill:none}
svg.i.sm{width:18px;height:18px} svg.i.xs{width:15px;height:15px} svg.i.lg{width:28px;height:28px} svg.i.xl{width:40px;height:40px}
.divider{height:1px;background:var(--line);border:0;margin:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* i18n: hide the Arabic flash while English strings load */
html.i18n-pending body{visibility:hidden}

/* ---------- bilingual typography ----------
   Arabic needs more line-height and never takes letter-spacing; Latin display
   text gets a hair of negative tracking and slightly tighter leading. The
   engine (i18n.js) flips <html lang dir>; any container can also carry its own
   lang/dir (the design-system benches do), so these use :lang() not html[lang]. */
body:lang(ar),.lang-scope:lang(ar){line-height:1.7}
:lang(ar) :is(h1,h2,h3,.display,.h1,.h2){letter-spacing:0;line-height:1.35}
body:lang(en),.lang-scope:lang(en){line-height:1.55;letter-spacing:0}
:lang(en) :is(h1,h2,.display,.h1){letter-spacing:-.012em;line-height:1.2}
:lang(en) :is(h3,.h3){letter-spacing:-.006em}
:lang(en) :is(.eyebrow,.chip){letter-spacing:.01em}
/* numbers: tabular, so prices and counters never jitter */
.num,.price b,.stat .n,.otp input,time{font-variant-numeric:tabular-nums lining-nums}