@font-face{font-family:'Almarai';src:url('/assets/fonts/Almarai-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Almarai';src:url('/assets/fonts/Almarai-Bold.ttf') format('truetype');font-weight:600 700;font-display:swap}
@font-face{font-family:'Almarai';src:url('/assets/fonts/Almarai-ExtraBold.ttf') format('truetype');font-weight:800 900;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('/assets/fonts/Vazirmatn.ttf') format('truetype');font-weight:100 900;font-display:swap}
/* ============================================================
   HARLEM AUTO — design system (dark · RTL-first · GE Hili)
   ============================================================ */
:root{
  /* Harlem Group palette — warm-dark + SILVER metallic accent (matches the group website) */
  --bg:#141210;--bg2:#1a1816;--surface:#1c1a18;--surface2:#242220;--surface3:#2e2b28;
  --line:rgba(255,255,255,.07);--line2:rgba(190,191,195,.20);
  --text:#f4f3f1;--text2:rgba(244,243,241,.72);--text3:rgba(244,243,241,.62);
  --gold:#bebfc3;--gold-hi:#d4d5d8;--gold-dk:#a9aaae;--jetour:#12b6c9;--soueast:#f47a20;--icaur:#c49f70;--ok:#8fb39a;--danger:#c98d86;
  --rs:4px;--r:7px;--rl:11px;--sh:0 24px 60px rgba(0,0,0,.55);--ease:cubic-bezier(.22,1,.36,1);--serif:'Fraunces',Georgia,serif;
  --nav:76px;color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:'Almarai','Segoe UI',Tahoma,system-ui,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
html[lang="ku"] body{font-family:'Vazirmatn','Almarai','Segoe UI',Tahoma,sans-serif}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px}/* 16px prevents iOS Safari auto-zoom on focus */
a{color:inherit;text-decoration:none}
.num{font-variant-numeric:tabular-nums}
.hide{display:none!important}
#app{max-width:480px;margin:0 auto;min-height:100%;position:relative;background:var(--bg)}
.boot{position:fixed;inset:0;display:grid;place-items:center}
.spin{width:30px;height:30px;border:3px solid var(--line2);border-top-color:var(--gold);border-radius:50%;animation:sp .7s linear infinite;margin:36px auto}
.boot .spin{margin:0}
@keyframes sp{to{transform:rotate(360deg)}}
.view{animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.scroll{padding-bottom:calc(var(--nav) + 22px + env(safe-area-inset-bottom))}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:15px 20px;border-radius:var(--rs);background:linear-gradient(180deg,#ececeb,#c2c3c7);color:#171512;font-weight:700;font-size:14.5px;letter-spacing:.4px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 24px rgba(0,0,0,.4);transition:transform .12s,filter .2s}
.btn:active{transform:scale(.98);filter:brightness(.96)}
.btn:disabled,.btn[disabled]{opacity:.45;filter:grayscale(.35);box-shadow:none;cursor:default;transform:none}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line2);box-shadow:none;font-weight:600}
.btn.dark{background:var(--surface2);color:var(--text);border:1px solid var(--line2);box-shadow:none}
.btn.sm{width:auto;padding:10px 16px;font-size:13px;border-radius:var(--rs)}
.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ico-btn{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--text2)}
.ico-btn .ico{width:20px;height:20px}
html[dir=rtl] .ico-btn.back .ico{transform:scaleX(-1)}/* mirror the back chevron in RTL */

/* topbar / sections */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 20px 12px}
.topbar.srch{justify-content:flex-start}
.searchbox{flex:1;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:0 12px}
.searchbox .ico{width:18px;height:18px;color:var(--text3);flex:0 0 auto}
.searchbox .inp{border:0;background:transparent;padding:12px 0;flex:1;font-size:16px}
.searchbox .inp:focus:not(:focus-visible){outline:none;box-shadow:none}
/* keyboard focus visibility (a11y) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
.tb-logo{height:26px;opacity:.95}
.country{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);padding:7px 13px;border-radius:22px;font-size:13px;font-weight:600}
h2.sec{font-size:15px;font-weight:800;margin:26px 20px 14px;display:flex;justify-content:space-between;align-items:baseline}
h2.sec a{color:var(--gold);font-size:12.5px;font-weight:700}

/* brand toggle */
.brandtog{display:flex;gap:8px;margin:6px 20px 4px}
.brandtog button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:6px;background:var(--surface);border:1px solid var(--line);font-weight:700;color:var(--text2);transition:.2s}
.brandtog button img{height:16px;opacity:.85;pointer-events:none}
.brandtog button img.soueast-mark{height:13px;max-width:88%;object-fit:contain}
.brandtog button.on{background:var(--surface2);color:var(--text);border-color:var(--line2)}
.brandtog button.on.JETOUR{box-shadow:inset 0 -3px 0 var(--jetour)}
.brandtog button.on.SOUEAST{box-shadow:inset 0 -3px 0 var(--soueast)}
.brandtog button.on.iCAUR{box-shadow:inset 0 -3px 0 var(--icaur)}
.brandtog button img.icaur-mark{height:15px;max-width:86%;object-fit:contain;filter:brightness(0) invert(1)}
.brandtog button.all.on{box-shadow:inset 0 -3px 0 var(--gold)}

/* hero */
.hero{position:relative;margin:16px 20px 0;border-radius:var(--rl);overflow:hidden;aspect-ratio:4/5;background:var(--surface)}
.hero img{width:100%;height:100%;object-fit:cover}
.hero .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,0) 32%,rgba(20,18,16,.4) 62%,rgba(20,18,16,.97) 100%)}
.hero .cap{position:absolute;inset-inline:0;bottom:0;padding:24px}
.hero .kicker{display:inline-flex;gap:6px;font-size:11px;letter-spacing:2px;color:var(--gold-hi);font-weight:700;text-transform:uppercase}
.hero h1{font-size:32px;font-weight:800;line-height:1.05;margin:8px 0 6px}
.hero .from{color:var(--text2);font-size:14px}
.hero .from b{color:var(--text);font-weight:800;font-size:18px}
.hero .btn{margin-top:16px;max-width:210px}

/* personalized welcome band (home) */
.welcome{margin:14px 20px 4px;background:linear-gradient(150deg,var(--surface2),var(--surface));border:1px solid var(--line);border-radius:var(--rl);padding:16px;animation:fade .4s var(--ease)}
.wc-hi{display:flex;flex-direction:column;line-height:1.2;margin-bottom:13px}
.wc-hi small{font-size:12px;color:var(--text3);font-weight:600}
.wc-hi b{font-size:21px;font-weight:800;letter-spacing:-.01em}
.wc-veh{display:flex;align-items:center;gap:10px;width:100%;text-align:start;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px 13px;margin-bottom:12px;transition:transform .12s}
.wc-veh:active{transform:scale(.99)}
.wc-veh-l{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.wc-veh-l b{font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-veh-s{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.wc-veh-s .ico{width:14px;height:14px;flex:0 0 auto}
.wc-veh .chev-nav{width:16px;height:16px;color:var(--text3);flex:0 0 auto}
.wc-veh.ok .wc-veh-s .ico{color:var(--ok)}
.wc-veh.soon{border-color:rgba(203,176,120,.35)}.wc-veh.soon .wc-veh-s{color:var(--gold-hi)}.wc-veh.soon .wc-veh-s .ico{color:var(--gold-hi)}
.wc-veh.over{border-color:rgba(201,141,134,.45)}.wc-veh.over .wc-veh-s{color:var(--danger)}.wc-veh.over .wc-veh-s .ico{color:var(--danger)}
.wc-alert{display:flex;align-items:center;gap:12px;width:100%;text-align:start;border-radius:10px;padding:12px 13px;margin-bottom:12px;border:1px solid;animation:waIn .45s var(--ease)}
@keyframes waIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.wc-alert .wa-ic{width:34px;height:34px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center}
.wc-alert .wa-ic .ico{width:18px;height:18px}
.wc-alert .wa-t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.wc-alert .wa-t b{font-size:13.5px;font-weight:800;line-height:1.25}
.wc-alert .wa-t small{font-size:11.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-alert .chev-nav{width:16px;height:16px;color:var(--text3);flex:0 0 auto}
.wc-alert:active{transform:scale(.99)}
.wc-alert.ready{background:linear-gradient(120deg,rgba(18,182,201,.16),rgba(18,182,201,.05));border-color:rgba(18,182,201,.45)}
.wc-alert.ready .wa-ic{background:var(--jetour);color:#03272c}.wc-alert.ready .wa-t b{color:#5fd6e4}
.wc-alert.service{background:linear-gradient(120deg,rgba(203,176,120,.14),rgba(203,176,120,.04));border-color:rgba(203,176,120,.4)}
.wc-alert.service .wa-ic{background:var(--gold);color:#171512}.wc-alert.service .wa-t b{color:var(--gold-hi)}
.wc-alert.over{background:linear-gradient(120deg,rgba(201,141,134,.16),rgba(201,141,134,.05));border-color:rgba(201,141,134,.5)}
.wc-alert.over .wa-ic{background:var(--danger);color:#2a1210}.wc-alert.over .wa-t b{color:#e0a49d}
.wc-acts{display:flex;gap:10px}
.wc-acts button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:9px;background:var(--surface3);border:1px solid var(--line2);color:var(--text);font-weight:700;font-size:13px;transition:transform .12s,filter .2s}
.wc-acts button:active{transform:scale(.98);filter:brightness(1.08)}
.wc-acts button .ico{width:17px;height:17px;color:var(--gold-hi)}
/* offer strip */
.offers-strip{display:flex;gap:13px;overflow-x:auto;padding:0 20px 4px;scrollbar-width:none}
.offers-strip::-webkit-scrollbar{display:none}
.ocard{flex:0 0 82%;scroll-snap-align:start;border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:16/8;background:var(--surface)}
.ocard img{width:100%;height:100%;object-fit:cover;opacity:.7}
.ocard .oc{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(to top,rgba(20,18,16,.92),rgba(20,18,16,.15) 65%)}
.ocard .tag{font-size:10px;letter-spacing:1.5px;color:var(--gold);font-weight:800;text-transform:uppercase}
.ocard h3{font-size:17px;font-weight:800;margin:4px 0 2px}
.ocard p{color:var(--text2);font-size:12.5px}

/* model grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:0 20px}
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .12s,border-color .2s}
.mcard:active{transform:scale(.98)}
.mcard .imgw{aspect-ratio:16/11;background:radial-gradient(120% 100% at 50% 30%,#2b2825,#141210 78%);display:grid;place-items:center;overflow:hidden;position:relative}
.mcard .imgw::after{content:"";position:absolute;inset-inline:12%;bottom:9%;height:8px;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 72%);filter:blur(2px)}
.mcard .imgw.photo{aspect-ratio:1/1;background:#0f0e0d}
.mcard .imgw.photo::after{display:none}
.mcard .imgw img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.mcard .imgw img.contain{width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.5))}
.mcard .b{padding:12px 14px 14px}
.mcard .bn{font-size:10px;letter-spacing:1.5px;color:var(--text3);text-transform:uppercase;font-weight:700}
.mcard .mn{font-size:16px;font-weight:800;margin:2px 0 4px}
.mcard .mp{color:var(--gold);font-size:13px;font-weight:700}
.mcard .cmp{position:absolute;top:7px;inset-inline-end:7px;width:36px;height:36px;border-radius:9px;background:rgba(0,0,0,.5);border:1px solid var(--line2);display:grid;place-items:center;color:#fff}
.mcard .cmp.on{background:var(--gold);color:#141210;border-color:transparent}
.mcard{position:relative}

/* model detail */
.md-hero{position:relative;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(115% 85% at 50% 18%,#2c2926,#100e0c 72%)}
.md-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 45% at 72% 22%,rgba(190,191,195,.10),transparent 60%);pointer-events:none}
.md-hero::after{content:"";position:absolute;inset-inline:16%;bottom:12%;height:14px;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 72%);filter:blur(3px)}
.md-hero .car{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .3s}
.md-hero .car img{width:96%;height:96%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.md-hero .car img.cover{width:100%;height:100%;object-fit:cover;filter:none}
.md-hero .bar{position:absolute;top:0;inset-inline:0;display:flex;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 16px) 18px 16px}
.md-hero .grad2{position:absolute;inset-inline:0;bottom:0;height:38%;background:linear-gradient(180deg,transparent,var(--bg))}
.md-body{padding:4px 20px 0;margin-top:-24px;position:relative}
.md-brand{font-size:11px;letter-spacing:2px;font-weight:800;text-transform:uppercase}
.md-name{font-size:29px;font-weight:800;line-height:1.05;margin:5px 0 3px}
.md-trim-l{color:var(--text2);font-size:14px}
.md-price{display:flex;align-items:baseline;gap:8px;margin:18px 0 4px}
.md-price .n{font-size:25px;font-weight:800}.md-price .c{color:var(--text2);font-size:14px}.md-price .was{color:var(--text3);text-decoration:line-through;font-size:14px}
.swatches{display:flex;gap:11px;margin:20px 0 6px;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:50%;border:2px solid var(--line2);position:relative;cursor:pointer;transition:transform .15s}
.sw.on{border-color:var(--gold)}
.sw.on::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--gold)}
.trimsel{display:flex;gap:9px;margin:16px 0 4px;flex-wrap:wrap}
.trimsel button{padding:10px 15px;border-radius:11px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:13.5px;color:var(--text2)}
.trimsel button.on{background:var(--surface2);color:var(--text);border-color:var(--gold)}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:20px 0 4px}
.spec{background:var(--surface);border:1px solid var(--line);border-radius:var(--rs);padding:14px}
.spec .k{color:var(--text3);font-size:11.5px;font-weight:600;text-align:start}
.spec .v{font-size:18px;font-weight:800;margin-top:3px;text-align:start}   /* consistent alignment even when a value's script differs from the UI language */
.feats{margin:18px 0 0}
.feat{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.feat .ico{width:20px;height:20px;color:var(--gold)}
.stickycta{position:fixed;inset-inline:0;bottom:0;max-width:480px;margin:0 auto;display:flex;gap:11px;padding:14px 20px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--bg) 26%)}
.stickycta .btn{flex:1}

/* compare */
.cmp-head{display:flex;gap:10px;padding:0 20px;margin-bottom:6px}
.cmp-col{flex:1;text-align:center}
.cmp-col .imgw{aspect-ratio:16/12;background:var(--surface);border:1px solid var(--line);border-radius:var(--rs);display:grid;place-items:center;overflow:hidden;margin-bottom:8px}
.cmp-col .imgw img{width:100%;height:100%;object-fit:cover}
.cmp-col .x{position:absolute;top:4px;inset-inline-end:4px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.6);display:grid;place-items:center;font-size:15px}
.cmp-col{position:relative}
.cmp-row{display:flex;border-bottom:1px solid var(--line)}
.cmp-row .k{flex:0 0 96px;padding:12px 20px;color:var(--text3);font-size:12px}
.cmp-row .cells{flex:1;display:flex}
.cmp-row .cells>div{flex:1;padding:12px 4px;text-align:center;font-weight:700;font-size:13.5px;border-inline-start:1px solid var(--line)}
.cmp-nm{font-weight:800;font-size:14px}
/* compare: pick-cars button + per-column trim selector */
.cmp-pickwrap{padding:0 20px 8px}
.cmp-pick{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--text);font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;width:100%;justify-content:center}
.cmp-pick .ico{width:17px;height:17px}
.cmp-pick:hover{border-color:var(--gold)}
.cmp-trim{margin-top:6px;width:100%;padding:6px 8px;border-radius:6px;background:var(--surface);border:1px solid var(--line);color:var(--text);font:inherit;font-size:11.5px;font-weight:600;text-align:center;text-align-last:center}
.cmp-trim:focus{outline:0;border-color:var(--gold)}
.cmp-trim1{margin-top:6px;font-size:11.5px;color:var(--text3);font-weight:600}
/* compare picker sheet */
.cmpk-hint{color:var(--text3);font-size:12.5px;margin:-8px 2px 14px}
.cmpk-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.cmpk-grp{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--text2);font-weight:700;margin:8px 2px 2px}
.cmpk-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--text);cursor:pointer;font:inherit}
.cmpk-item img{width:56px;height:40px;object-fit:cover;border-radius:6px;flex:0 0 auto;background:var(--bg2)}
.cmpk-nm{flex:1;text-align:start;font-weight:700;font-size:14px}
.cmpk-ck{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);color:var(--text3);font-weight:800;flex:0 0 auto}
.cmpk-item.on{border-color:var(--gold);background:rgba(233,185,73,.08)}
.cmpk-item.on .cmpk-ck{background:var(--gold);border-color:var(--gold);color:#1a1712}
.cmpk-go{width:100%}
.cmpk-go:disabled{opacity:.45}

/* locator */
.seg{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px;margin:8px 20px 14px}
.seg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--text2);white-space:nowrap}
.seg button.on{background:var(--surface2);color:var(--text)}
.brand-sec{margin-bottom:8px}
.brand-hd{display:flex;align-items:center;gap:9px;margin:18px 20px 10px;font-weight:800;font-size:15px;letter-spacing:.2px}
.brand-hd .bh-dot{width:9px;height:9px;border-radius:50%;background:var(--bc,var(--gold));box-shadow:0 0 0 3px color-mix(in srgb,var(--bc,var(--gold)) 22%,transparent)}
.brand-hd .bh-t{color:var(--text)}
.brand-hd i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--text2);background:var(--surface2);border:1px solid var(--line);border-radius:20px;padding:1px 9px;margin-inline-start:2px}
.brand-sec .loc{border-inline-start:3px solid color-mix(in srgb,var(--bc,var(--gold)) 55%,transparent)}
.loc{margin:0 20px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.loc .lt{font-weight:800;font-size:15.5px}
.loc .ls{color:var(--text2);font-size:12.5px;margin-top:3px;display:flex;align-items:center;gap:6px}
.loc .lbrands{display:flex;gap:6px;margin-top:8px}
.loc .lbrands span{font-size:10px;font-weight:700;color:var(--text3);border:1px solid var(--line);border-radius:20px;padding:3px 9px}
.loc-acts{display:flex;gap:9px;margin-top:13px}
.loc-acts a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border-radius:11px;background:var(--surface2);border:1px solid var(--line);font-weight:600;font-size:12.5px;color:var(--gold);min-height:44px}
.loc-acts a .ico{width:16px;height:16px}

/* country selector (first launch) */
.country-pick{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:40px 26px;text-align:center}
.country-pick img{height:38px;margin:0 auto 30px;opacity:.95}
.country-pick h1{font-size:26px;font-weight:800;margin-bottom:8px}
.country-pick p{color:var(--text2);margin-bottom:30px}
.cbtn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 20px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-bottom:12px;font-size:17px;font-weight:800;transition:.2s}
.cbtn:active{transform:scale(.98);border-color:var(--gold)}
.cbtn .cbtn-lead{display:flex;align-items:center;gap:11px;min-width:0}
.cbtn .cbtn-name{line-height:1}
.cbtn .cur{margin-inline-start:auto;color:var(--text3);font-size:12.5px;font-weight:700;letter-spacing:.4px;background:var(--surface2);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
.langrow{display:flex;justify-content:center;gap:6px;margin-top:26px}
.langrow button{padding:7px 15px;border-radius:20px;font-size:13px;font-weight:700;color:var(--text2);border:1px solid var(--line)}
.langrow button.on{background:var(--gold);color:#141210;border-color:transparent}

/* states */
.empty,.err{text-align:center;color:var(--text2);padding:50px 24px}
.empty .ico,.err .ico{width:42px;height:42px;margin:0 auto 14px;color:var(--line2)}
.empty p,.err p{font-weight:600;color:var(--text);margin-bottom:4px}
.sk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:shim 1.3s infinite}
@keyframes shim{100%{transform:translateX(100%)}}
.sk-card{aspect-ratio:16/13}
.sample{margin:22px 20px;text-align:center;color:var(--text3);font-size:11px}

/* bottom nav */
.bnav{position:fixed;inset-inline:0;bottom:0;max-width:480px;margin:0 auto;display:flex;background:rgba(15,15,20,.9);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:9px 6px calc(9px + env(safe-area-inset-bottom));z-index:40}
.bnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text3);font-size:11px;font-weight:600;position:relative;padding:5px 0}
.bnav button.on{color:var(--gold)}
.bnav button.on::before{content:"";position:absolute;top:-9px;width:22px;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
.bnav .ico{width:23px;height:23px}
.cmp-fab{position:fixed;bottom:calc(var(--nav) + 16px + env(safe-area-inset-bottom));inset-inline:0;margin:0 auto;max-width:480px;display:flex;justify-content:flex-end;padding-inline-end:20px;z-index:45;pointer-events:none}
.cmp-fab button{pointer-events:auto}
.cmp-fab button{display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:26px;background:var(--gold);color:#141210;font-weight:800;font-size:13.5px;box-shadow:0 12px 28px rgba(190,191,195,.35)}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(var(--nav) + 20px);transform:translateX(-50%) translateY(20px);max-width:88%;background:var(--surface3);border:1px solid var(--line2);padding:12px 16px;border-radius:6px;font-size:13.5px;font-weight:500;box-shadow:var(--sh);opacity:0;transition:.3s;z-index:200;pointer-events:none;text-align:center}
#toast.in{opacity:1;transform:translateX(-50%) translateY(0)}
/* sheet */
.sheet-bg{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.55);opacity:0;transition:.25s;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg.in{opacity:1}
.sheet{width:100%;max-width:480px;background:var(--bg2);border-radius:22px 22px 0 0;border:1px solid var(--line);border-bottom:0;padding:8px 20px calc(24px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .3s var(--ease);max-height:92vh;overflow:auto}
.sheet-bg.in .sheet{transform:none}
.grab{width:40px;height:4px;border-radius:3px;background:var(--line2);margin:8px auto 16px}
.cf-box{padding:4px 2px 2px}
.cf-msg{font-size:16px;font-weight:600;line-height:1.55;margin:0 0 22px;color:var(--text)}
.cf-btns{display:flex;gap:10px}
.cf-btns .btn{flex:1}
.cf-danger{background:#c0392b;color:#fff;border-color:#c0392b}
.cf-danger:hover{background:#a5281b;border-color:#a5281b}
/* admin-controlled announcement strip */
.announce{display:flex;align-items:center;gap:9px;margin:12px 20px 0;padding:11px 14px;border-radius:12px;background:linear-gradient(120deg,rgba(233,185,73,.16),var(--surface));border:1px solid rgba(233,185,73,.32);color:var(--text);font-size:13.5px;font-weight:600;text-decoration:none;position:relative}
.announce .ico{width:17px;height:17px;color:var(--gold,#e9b949);flex:0 0 auto}
.announce span{flex:1;line-height:1.45}
.announce .chev-nav{opacity:.55;width:16px;height:16px}
.ann-x{background:transparent;border:0;color:var(--text3);font-size:19px;line-height:1;cursor:pointer;padding:7px 9px;margin:-7px -5px;flex:0 0 auto;min-width:34px;min-height:34px}   /* larger tap target without shifting layout */
.sheet h3{margin:0 0 16px;font-size:19px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--text2);margin:0 2px 7px;font-weight:600}
.inp{width:100%;padding:14px 15px;border-radius:6px;background:var(--surface);border:1px solid var(--line);color:var(--text)}
.inp:focus{outline:0;border-color:var(--gold)}
.offline{position:fixed;top:0;inset-inline:0;background:#8f3b34;color:#fff;text-align:center;font-size:12.5px;padding:calc(6px + env(safe-area-inset-top)) 6px 6px;z-index:300;transform:translateY(-100%);transition:.3s}
.offline.in{transform:none}

/* ---------- Phase 3: account · garage · service booking ---------- */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.empty.sm{padding:30px 20px}.empty.sm .ico{width:34px;height:34px;margin-bottom:10px}
.ico-btn.sm{width:40px;height:40px}.ico-btn.sm .ico{width:18px;height:18px}
/* sign in */
.signin{padding:26px 22px;text-align:center;max-width:420px;margin:0 auto}
.signin .si-ic{width:64px;height:64px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;margin:10px auto 16px}
.signin .si-ic .ico{width:30px;height:30px;color:var(--gold)}
.signin .signin-logo{width:min(230px,66vw);height:auto;display:block;margin:18px auto 18px;object-fit:contain}
.signin h2{font-size:20px;margin-bottom:8px}.signin p{color:var(--text2);font-size:14px;margin-bottom:22px;line-height:1.6}
.signin .field{text-align:start}
/* profile */
.prof{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:16px;margin-bottom:16px}
.prof .av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--gold-hi,#d4d5d8),var(--gold));color:#141210;display:grid;place-items:center;font-weight:800;font-size:22px;flex:0 0 auto}
.prof .pn{font-weight:800;font-size:16px}.prof .pp{color:var(--text2);font-size:13px}
.prof .pts{margin-inline-start:auto;text-align:center;color:var(--gold)}.prof .pts b{display:block;font-size:18px}
/* reminders */
.reminders{margin-bottom:18px;display:grid;gap:10px}
.reminder{display:flex;align-items:center;gap:12px;background:rgba(190,191,195,.1);border:1px solid rgba(190,191,195,.3);border-radius:6px;padding:12px 14px}
.reminder.over{background:rgba(224,104,95,.12);border-color:rgba(224,104,95,.35)}
.reminder .ico{width:22px;height:22px;color:var(--gold);flex:0 0 auto}.reminder.over .ico{color:var(--danger)}
.reminder .rt{flex:1;min-width:0}.reminder .rt b{display:block;font-size:14px}.reminder .rt span{font-size:12.5px;color:var(--text2)}
.reminder .btn.sm{flex:0 0 auto}
/* section head */
.sechead{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px}
.sechead h2{font-size:17px;font-weight:800}
/* garage */
.garage{display:grid;gap:12px}
.vcard{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.vcard .vimg{width:104px;flex:0 0 auto;background:var(--surface2);display:grid;place-items:center}
.vcard .vimg img{width:100%;height:100%;object-fit:cover}
.vcard .vb{flex:1;min-width:0;padding-block:12px;padding-inline-start:0;padding-inline-end:14px;display:flex;flex-direction:column;gap:7px}
.vcard .vt{font-weight:800;font-size:15px}
.vcard .vmeta{display:flex;flex-wrap:wrap;gap:6px}
.vcard .vmeta span{font-size:11.5px;color:var(--text2);background:var(--surface2);border-radius:7px;padding:3px 8px}
.vcard .vacts{display:flex;gap:8px;align-items:center;margin-top:auto}
.vcard .vacts .btn.sm{flex:1}.vcard .vacts .ico-btn.sm .ico{color:var(--text3)}
/* bookings */
.bk{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:13px 15px;margin-bottom:10px}
.bk .bkt{font-weight:700;font-size:14px;margin-bottom:6px}
.bk .bks{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text2);margin-top:3px}
.bk .bks .ico{width:14px;height:14px;flex:0 0 auto}
.bk .ref{color:var(--gold);font-weight:600}
.bk .bkr{text-align:end;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.bstat{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px}
.bstat.confirmed{background:rgba(89,192,138,.16);color:#59c08a}
.bstat.cancelled{background:rgba(255,255,255,.08);color:var(--text3)}
.bstat.done{background:rgba(143,179,154,.16);color:var(--ok,#8fb39a)}
.bstat.in_service{background:rgba(203,176,120,.18);color:var(--gold-hi)}
.bstat.ready{background:rgba(18,182,201,.16);color:var(--jetour)}
.linkbtn{color:var(--danger);font-size:12px;font-weight:600;background:none;border:0;cursor:pointer;padding:8px 4px;margin:-4px}
.linkbtn.alt{color:var(--gold-hi)}
.bk-acts{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.rsx-cur{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-bottom:16px;font-size:13px;color:var(--text2)}
.rsx-cur .ico{width:16px;height:16px;color:var(--gold-hi);flex:0 0 auto}
.rsx-cur b{color:var(--text)}
/* pickup & delivery toggle (booking sheet) */
.pd-toggle{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line2);border-radius:11px;padding:13px 14px;margin-bottom:12px;cursor:pointer}
.pd-toggle .pd-txt{flex:1;display:flex;align-items:center;gap:11px}
.pd-toggle .pd-txt>.ico{width:22px;height:22px;color:var(--gold-hi);flex:0 0 auto}
.pd-toggle .pd-txt b{display:block;font-size:14px;font-weight:700}
.pd-toggle .pd-txt small{display:block;font-size:11.5px;color:var(--text3);margin-top:1px}
.pd-toggle input{position:absolute;opacity:0;width:0;height:0}
.pd-sw{position:relative;width:46px;height:28px;flex:0 0 auto;background:var(--surface3);border:1px solid var(--line2);border-radius:20px;transition:.25s}
.pd-sw::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:22px;height:22px;border-radius:50%;background:var(--text2);transition:.25s var(--ease)}
.pd-toggle input:checked~.pd-sw{background:var(--gold);border-color:var(--gold)}
.pd-toggle input:checked~.pd-sw::after{inset-inline-start:calc(100% - 24px);background:#171512}
.pd-toggle input:focus-visible~.pd-sw{outline:2px solid var(--gold);outline-offset:2px}
.pd-addr{animation:fade .25s var(--ease)}
.pd-tag{color:var(--gold-hi)!important}
.pd-tag .ico{color:var(--gold-hi)!important}
/* live service-status tracker */
.track{flex:1 1 100%;display:flex;align-items:flex-start;margin-top:4px;padding-top:14px;border-top:1px solid var(--line)}
.track-step{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto;width:64px;text-align:center}
.track-step .td{width:22px;height:22px;border-radius:50%;background:var(--surface3);border:2px solid var(--line2);display:grid;place-items:center;transition:.25s}
.track-step .td .ico{width:13px;height:13px;color:#171512;stroke-width:2.6}
.track-step small{font-size:10.5px;line-height:1.25;color:var(--text3);font-weight:600}
.track-step.done .td{background:var(--ok);border-color:var(--ok)}
.track-step.done small{color:var(--text2)}
.track-step.on .td{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 4px rgba(190,191,195,.15)}
.track-step.on small{color:var(--text);font-weight:800}
.track-bar{flex:1;height:2px;background:var(--line2);margin-top:10px;border-radius:2px;transition:.25s}
.track-bar.done{background:var(--ok)}
/* slot chips */
.slotchips{display:flex;flex-wrap:wrap;gap:8px;min-height:44px;align-items:center}
.slotchips .hint{color:var(--text3);font-size:13px}
.slot{padding:9px 15px;border-radius:11px;background:var(--surface);border:1px solid var(--line2);color:var(--text);font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums}
.slot.on{background:linear-gradient(180deg,var(--gold-hi,#d4d5d8),var(--gold));color:#141210;border-color:transparent}

/* ---------- Phase 4: OTP · notifications · news · feedback ---------- */
.linkedit{color:var(--gold);font-weight:600;cursor:pointer}
.devcode{background:rgba(190,191,195,.1);border:1px dashed rgba(190,191,195,.4);border-radius:10px;padding:9px 12px;margin-bottom:14px;font-size:13px;color:var(--text2);text-align:center}
.devcode b{color:var(--gold);font-size:16px;letter-spacing:2px}
.otpinp{text-align:center;font-size:26px;letter-spacing:12px;font-weight:800;padding:16px}
/* bell + badge */
.bellbtn{position:relative;width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--text2)}
.bellbtn .ico{width:20px;height:20px}
.bellbtn .badge{position:absolute;top:-3px;inset-inline-end:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#bf443b;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
/* notifications */
.nhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ntf-grp{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text3);margin:14px 2px 8px}
.ntf-grp:first-child{margin-top:2px}
.ntf{display:flex;align-items:flex-start;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:13px 14px;margin-bottom:9px;position:relative;transition:transform .12s,filter .2s}
.ntf[data-url]:not([data-url=""]){cursor:pointer}
.ntf[data-url]:not([data-url=""]):active{transform:scale(.99);filter:brightness(1.05)}
.ntf.unread{border-color:rgba(190,191,195,.4);background:linear-gradient(120deg,rgba(190,191,195,.05),var(--surface))}
.ntf-ic{width:38px;height:38px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;background:var(--surface2);color:var(--text2)}
.ntf-ic .ico{width:19px;height:19px}
.ntf-ic.service{background:rgba(203,176,120,.16);color:var(--gold-hi)}
.ntf-ic.offer{background:rgba(244,122,32,.16);color:var(--soueast)}
.ntf-ic.loyalty{background:rgba(190,191,195,.16);color:var(--gold-hi)}
.ntf-ic.event{background:rgba(18,182,201,.16);color:var(--jetour)}
.ntf-ic.news{background:rgba(143,179,154,.16);color:var(--ok)}
.ntf-b{flex:1;min-width:0}
.ntf .nt{font-weight:700;font-size:14px;margin-bottom:3px}
.ntf .nb{font-size:13px;color:var(--text2);line-height:1.5}
.ntf .ntime{font-size:11px;color:var(--text3);margin-top:6px}
.ntf-dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--gold);margin-top:5px;box-shadow:0 0 0 3px rgba(190,191,195,.14)}
/* quick rows */
.qrows{margin-top:20px;display:grid;gap:10px}
.qrow{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px;cursor:pointer}
.qrow .ico{width:20px;height:20px;color:var(--gold)}
.qrow span{font-weight:700;flex:1}
.qrow .ico:last-child{color:var(--text3);width:18px;height:18px}
/* news strip on discover */
.news-strip{display:flex;gap:12px;overflow-x:auto;padding:2px 20px 4px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.news-strip::-webkit-scrollbar{display:none}
.nscard{flex:0 0 220px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;cursor:pointer}
.nscard img{width:100%;height:120px;object-fit:cover;display:block}
.nscard .nsc{padding:11px 13px}
.nscard h4{font-size:13.5px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* news list */
.ncard{background:var(--surface);border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-bottom:14px;cursor:pointer}
.ncard .nimg img{width:100%;height:170px;object-fit:cover;display:block}
.ncard .ncb{padding:15px 16px}
.ncard .pin-tag{display:inline-block;font-size:11px;font-weight:800;color:var(--gold);margin-bottom:8px}
.ncard h3{font-size:16px;font-weight:800;margin-bottom:6px}
.ncard p{color:var(--text2);font-size:13.5px;line-height:1.6;margin-bottom:10px}
.ncard .rm{color:var(--gold);font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.ncard .rm .ico{width:16px;height:16px}
html[dir=rtl] .ncard .rm .ico,html[dir=rtl] .qrow .ico:last-child{transform:scaleX(-1)}
/* article */
.md-hero.art{height:230px}.md-hero.art img{width:100%;height:100%;object-fit:cover}
/* article photo gallery (multi-image news) */
.md-hero.art-gal{height:250px;overflow:hidden}
.md-hero.art-gal .art-slider{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.md-hero.art-gal .art-slider::-webkit-scrollbar{display:none}
.md-hero.art-gal .art-slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center}
.md-hero.art-gal .art-slide img{width:100%;height:100%;object-fit:cover;display:block}
.md-hero.art-gal .art-dots{position:absolute;bottom:12px;inset-inline:0;display:flex;justify-content:center;gap:6px;z-index:3;pointer-events:none}
.md-hero.art-gal .art-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:.2s}
.md-hero.art-gal .art-dot.on{background:#fff;width:18px;border-radius:3px}
.md-hero.art-gal .art-count{position:absolute;top:calc(env(safe-area-inset-top) + 18px);inset-inline-end:16px;z-index:3;background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;font-variant-numeric:tabular-nums}
.md-hero.art-gal .bar{z-index:3}.md-hero.art-gal .grad2{z-index:2;pointer-events:none}
.art-body{padding:20px 20px 40px}
.art-body h1{font-size:23px;font-weight:800;line-height:1.35;margin:10px 0 12px}
.art-body .lead{font-size:15px;color:var(--text2);font-weight:600;margin-bottom:16px;line-height:1.7}
.art-body .art-txt{font-size:15px;line-height:1.85;color:var(--text)}
.art-body .ntime{font-size:12px;color:var(--gold);font-weight:600}
/* feedback stars */
.stars{display:flex;gap:8px;justify-content:center;margin:8px 0}
.star{color:var(--line2);padding:4px}.star .ico{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.6}
.star.on{color:var(--gold)}.star.on .ico{fill:var(--gold);stroke:var(--gold)}

/* ---------- Phase 5: loyalty · referral ---------- */
.tierbadge{margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;background:rgba(190,191,195,.16);color:var(--gold);font-weight:800;font-size:12px;padding:6px 11px;border-radius:20px}
.tierbadge .ico{width:15px;height:15px}
/* loyalty mini card in account */
/* premium members-club loyalty card */
.loycard{position:relative;overflow:hidden;cursor:pointer;margin-bottom:18px;border-radius:14px;padding:18px 20px 16px;aspect-ratio:1.586/1;max-height:210px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(145deg,#3a3d42 0%,#22242700 40%),linear-gradient(315deg,#4a4d52 0%,#1a1917 55%),radial-gradient(120% 140% at 85% 12%,rgba(212,213,216,.28),transparent 45%),#1c1b19;
  border:1px solid rgba(212,213,216,.30);box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.10)}
.loycard::after{content:"";position:absolute;inset:0;background-image:url('/assets/brand/hero-pattern.png');background-size:cover;background-position:center;opacity:.10;mix-blend-mode:screen;pointer-events:none}
.loycard .lc-sheen{position:absolute;top:-60%;inset-inline-start:-20%;width:55%;height:220%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);pointer-events:none}
.loycard .lc-head{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.loycard .lc-logo{height:24px;width:auto;opacity:.96}
.loycard .lc-emv{width:34px;height:26px;border-radius:5px;background:linear-gradient(135deg,#d9c48a,#a98b45);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);position:relative}
.loycard .lc-emv::before{content:"";position:absolute;inset:6px 4px;border:1px solid rgba(0,0,0,.28);border-radius:2px}
.loycard .lc-mid{display:flex;align-items:flex-end;justify-content:space-between;position:relative;z-index:1}
.loycard .lc-pts{display:flex;align-items:baseline;gap:6px;color:var(--gold-hi)}
.loycard .lc-pts b{font-size:34px;font-weight:800;letter-spacing:-.5px;line-height:1}
.loycard .lc-pts span{font-size:12px;color:var(--text2);font-weight:600}
.loycard .lc-tier{display:inline-flex;align-items:center;gap:5px;color:#0f0e0d;font-weight:800;font-size:12px;padding:5px 11px;border-radius:20px;background:linear-gradient(135deg,#e9eaec,#b6b7bb);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.loycard .lc-tier .ico{width:14px;height:14px}
.loycard .lc-foot{display:flex;align-items:flex-end;justify-content:space-between;position:relative;z-index:1}
.loycard .lc-name{font-weight:700;font-size:14.5px;letter-spacing:.3px;color:var(--text)}
.loycard .lc-club{font-family:var(--serif);font-size:11px;letter-spacing:2.5px;color:var(--gold);text-transform:uppercase;opacity:.85}
html[dir=rtl] .loycard .lc-tier .ico{transform:none}

/* scan registration card (OCR) */
.scan-btn{margin-bottom:6px}
.scan-btn .ico{width:19px;height:19px}
.scan-hint{color:var(--text3);font-size:12px;line-height:1.5;margin:0 2px 14px;text-align:center}

/* ---------- my-car hub ---------- */
/* premium vehicle hero header */
.hub-hero{position:relative;border-radius:14px;overflow:hidden;margin:14px 0 16px;aspect-ratio:16/10;background:radial-gradient(120% 100% at 50% 22%,#2b2825,#141210 82%);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.hub-hero-img{position:absolute;inset:0}
.hub-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.hub-hero-img img.contain{object-fit:contain;padding:26px 22px 34px}
.hub-hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,0) 38%,rgba(20,18,16,.45) 66%,rgba(20,18,16,.95) 100%)}
.hub-hero-cap{position:absolute;inset-inline:0;bottom:0;padding:16px 18px 17px}
.hub-brand{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:800}
.hub-name{font-size:23px;font-weight:800;line-height:1.1;margin:3px 0 9px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.hub-meta{display:flex;flex-wrap:wrap;gap:7px}
.hub-meta span{font-size:11.5px;font-weight:600;color:#f4f3f1;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:4px 11px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hub-tabs{display:flex;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.hub-tabs::-webkit-scrollbar{display:none}
.hub-tabs button{flex:1 0 auto;white-space:nowrap;padding:9px 14px;border-radius:7px;font-weight:700;font-size:13px;color:var(--text2)}
.hub-tabs button.on{background:var(--surface2);color:var(--text)}
.hub-body{min-height:120px;animation:fade .25s var(--ease)}
/* parts & accessories */
.parts-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.part-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.part-img{aspect-ratio:4/3;background:var(--surface2);overflow:hidden}
.part-img img{width:100%;height:100%;object-fit:cover}
.part-img.noimg{display:grid;place-items:center;color:var(--line2)}
.part-img.noimg .ico{width:34px;height:34px}
.part-b{padding:11px 12px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.part-cat{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--gold-hi);background:var(--surface3);border-radius:20px;padding:3px 9px}
.part-n{font-size:14px;font-weight:800;line-height:1.25}
.part-d{font-size:12px;color:var(--text2);line-height:1.45}
.part-price{font-size:13.5px;font-weight:800;color:var(--gold);margin-top:2px}
.part-card .parts-ask{margin-top:auto}
.part-card .parts-ask .ico{width:15px;height:15px}
@media(max-width:360px){.parts-grid{grid-template-columns:1fr}}
/* videos */
.hub-vids{display:grid;gap:12px}
.hub-vid{position:relative;display:block;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:var(--surface2);border:1px solid var(--line)}
.hub-vid img{width:100%;height:100%;object-fit:cover}
.hub-vid .novid{position:absolute;inset:0;display:grid;place-items:center;color:var(--text3)}
.hub-vid .pl{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center}
.hub-vid .pl .ico{color:#fff;width:24px;height:24px}
.hub-vid .vt{position:absolute;inset-inline:0;bottom:0;padding:22px 12px 10px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));color:#fff;font-weight:700;font-size:13.5px}
.hub-vid.file{aspect-ratio:auto;display:block;padding:0}
.hub-vid.file video{width:100%;display:block;aspect-ratio:16/9;background:#000;border-radius:10px}
.hub-vid.file .vt-top{position:static;display:block;padding:0 2px 8px;color:var(--text);background:none;font-weight:700;font-size:14px}
/* schedule */
.sch-note{display:flex;gap:10px;align-items:flex-start;background:rgba(190,191,195,.1);border:1px solid rgba(190,191,195,.25);border-radius:10px;padding:12px 14px;font-size:13.5px;color:var(--text);margin-bottom:10px}
.sch-note .ico{width:20px;height:20px;color:var(--gold);flex:0 0 auto}
.sch-mnote{display:flex;gap:10px;align-items:flex-start;background:rgba(18,182,201,.08);border:1px solid rgba(18,182,201,.22);border-radius:10px;padding:11px 14px;font-size:13px;color:var(--text2);margin-bottom:14px}
.sch-mnote .ico{width:18px;height:18px;color:var(--jetour);flex:0 0 auto}
.sch-list{display:grid;gap:10px}
.sch-row{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:13px 14px}
.sch-km{flex:0 0 64px;text-align:center;border-inline-end:1px solid var(--line);padding-inline-end:10px}
.sch-km b{display:block;font-size:18px;color:var(--gold);line-height:1.1}
.sch-km span{font-size:10.5px;color:var(--text3);text-transform:uppercase}
.sch-inc{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.sch-inc span{font-size:12px;color:var(--text2);background:var(--surface2);border:1px solid var(--line);border-radius:6px;padding:4px 9px}
.sch-disc{color:var(--text3);font-size:12px;line-height:1.6;margin:14px 2px 4px}
/* next-service status chip (hub header) */
.svc-chip{display:flex;align-items:center;gap:11px;width:100%;margin:-4px 0 16px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line2);text-align:start;transition:filter .2s,transform .12s}
.svc-chip:active{transform:scale(.99)}
.svc-chip .ico{width:20px;height:20px;flex:0 0 auto}
.svc-chip span{flex:1;display:flex;flex-direction:column;line-height:1.3}
.svc-chip span small{font-size:11px;color:var(--text3);font-weight:600}
.svc-chip span b{font-size:14px;font-weight:800}
.svc-chip .chev-nav{width:16px;height:16px;color:var(--text3)}
.svc-chip.ok{border-color:rgba(143,179,154,.35)}.svc-chip.ok .ico{color:var(--ok)}
.svc-chip.soon{border-color:rgba(203,176,120,.4);background:linear-gradient(120deg,rgba(203,176,120,.08),var(--surface))}.svc-chip.soon .ico{color:var(--gold-hi)}
.svc-chip.over{border-color:rgba(201,141,134,.5);background:linear-gradient(120deg,rgba(201,141,134,.12),var(--surface))}.svc-chip.over .ico{color:var(--danger)}
/* service history timeline */
.hub-hist{display:grid;gap:0;position:relative}
.hist-row{display:flex;gap:13px;padding:2px 0 18px;position:relative}
.hist-row:last-child{padding-bottom:0}
.hist-dot{flex:0 0 12px;width:12px;height:12px;margin-top:4px;border-radius:50%;background:var(--surface3);border:2px solid var(--line2);position:relative;z-index:1}
.hist-dot.done{background:var(--ok);border-color:var(--ok)}
.hist-dot.confirmed{background:var(--gold);border-color:var(--gold)}
.hist-row:not(:last-child)::before{content:"";position:absolute;inset-inline-start:5px;top:16px;bottom:0;width:2px;background:var(--line)}
.hist-main{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.hist-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px}
.hist-top b{font-size:14px;font-weight:800}
.hist-meta{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text2);margin-top:3px}
.hist-meta .ico{width:14px;height:14px;color:var(--text3);flex:0 0 auto}
.hist-ref{font-size:11px;color:var(--text3);margin-top:6px;letter-spacing:.3px}
/* vehicle ownership / identity card */
.vdetails{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:6px 15px 10px;margin-bottom:4px}
.vd-h{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text2);padding:12px 0 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.vd-h .ico{width:17px;height:17px;color:var(--gold-hi)}
.vd-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.vd-row:last-child{border-bottom:0}
.vd-k{font-size:13px;color:var(--text3);font-weight:600;flex:0 0 auto}
.vd-v{font-size:14px;font-weight:700;text-align:end;display:flex;align-items:center;gap:7px;min-width:0;word-break:break-word}
.vd-v .num{font-weight:800}
.vd-edit{width:30px;height:30px;flex:0 0 auto;border-radius:8px;background:var(--surface2);border:1px solid var(--line2);display:grid;place-items:center;color:var(--gold-hi)}
.vd-edit .ico{width:15px;height:15px}
.vd-edit:active{transform:scale(.94)}
.vd-input{width:110px;background:var(--bg2);border:1px solid var(--gold);border-radius:8px;padding:7px 10px;color:var(--text);font-weight:800;text-align:end}
.vd-save{padding:8px 14px;border-radius:8px;background:linear-gradient(180deg,#ececeb,#c2c3c7);color:#171512;font-weight:800;font-size:12.5px}
.vd-save:active{transform:scale(.97)}
/* doc rows (warranty / magazine) */
.hub-doc,.hub-mag{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin-top:4px}
.hub-mag{margin-top:16px;background:linear-gradient(120deg,rgba(203,176,120,.1),var(--surface));border-color:rgba(203,176,120,.28)}
.hub-doc .hd-ic,.hub-mag .hd-ic{width:42px;height:42px;flex:0 0 auto;border-radius:10px;background:var(--surface2);display:grid;place-items:center;color:var(--gold)}
.hub-doc .hd-ic .ico,.hub-mag .hd-ic .ico{width:22px;height:22px}
.hub-doc .hd-t,.hub-mag .hd-t{flex:1;min-width:0}
.hub-doc .hd-t b,.hub-mag .hd-t b{display:block;font-size:14.5px}
.hub-doc .hd-t span,.hub-mag .hd-t span{font-size:12px;color:var(--text2)}
.hub-doc>.ico,.hub-mag>.ico{color:var(--text3);flex:0 0 auto}
html[dir=rtl] .ico.chev-nav{transform:scaleX(-1)}   /* RTL: every drill-in/forward chevron points left (cards, list rows, service chips, announcement, careers) */

/* service wizard — country + brand step */
.seg.wseg{margin:2px 0 0}
.brand-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.bpick{position:relative;text-align:start;padding:16px 14px;border-radius:var(--rl);border:1px solid var(--line2);background:var(--surface);color:var(--text);cursor:pointer;transition:.18s var(--ease);overflow:hidden}
.bpick::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--bc,var(--gold))}
.bpick .bp-t{font-weight:800;font-size:17px}
.bpick .bp-s{color:var(--text2);font-size:12px;margin-top:3px}
.bpick .wtick{position:absolute;inset-inline-end:12px;top:12px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;opacity:0;transition:.18s}
.bpick .wtick .ico{width:13px;height:13px}
.bpick.on{border-color:var(--bc,var(--gold));background:color-mix(in srgb,var(--bc,var(--gold)) 12%,var(--surface))}
.bpick.on .wtick{opacity:1;background:var(--bc,var(--gold));border-color:var(--bc,var(--gold));color:#12100e}

/* upcoming events */
.events-sub{color:var(--text2);font-size:13px;margin:2px 0 14px}
.evcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;margin-bottom:14px}
.ev-img{position:relative;aspect-ratio:16/9;background:#0f0e0d}
.ev-img img{width:100%;height:100%;object-fit:cover}
.ev-date{position:absolute;inset-inline-start:12px;top:12px;background:rgba(20,18,16,.82);backdrop-filter:blur(6px);border:1px solid var(--line2);border-radius:9px;padding:5px 10px;text-align:center;line-height:1.05}
.ev-date b{display:block;font-size:19px;font-weight:800;color:var(--gold-hi)}
.ev-date i{font-style:normal;font-size:10.5px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
.ev-body{padding:13px 15px 15px}
.ev-t{font-weight:800;font-size:16.5px}
.ev-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;color:var(--text2);font-size:12px;margin:7px 0}
.ev-meta .ico{width:14px;height:14px;opacity:.8}
.ev-meta span{margin-inline-end:8px}
.ev-x{color:var(--text2);font-size:13px;line-height:1.5;margin:6px 0 12px}
/* loyalty page */
.bigcard{background:linear-gradient(145deg,#3a3d42 0%,#22242700 40%),linear-gradient(315deg,#4a4d52 0%,#1a1917 55%),radial-gradient(120% 140% at 85% 12%,rgba(212,213,216,.24),transparent 45%),#1c1b19;border:1px solid rgba(212,213,216,.3);border-radius:22px;padding:24px;text-align:center;margin-bottom:8px}
.bigcard .bc-tier{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-weight:800;background:rgba(190,191,195,.14);padding:6px 14px;border-radius:20px;font-size:13px}
.bigcard .bc-tier .ico{width:17px;height:17px}
.bigcard .bc-pts{margin:14px 0 4px}.bigcard .bc-pts b{font-size:44px;font-weight:800;color:var(--gold-hi,#d4d5d8)}.bigcard .bc-pts span{color:var(--text2);margin-inline-start:6px}
.bigcard .bc-prog{margin-top:14px}.bigcard .bc-prog .bar{height:8px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.bigcard .bc-prog .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi,#d4d5d8));border-radius:5px}
.bigcard .bc-next{color:var(--text2);font-size:13px;margin-top:9px;font-weight:600}
.earnlist,.ledger{display:grid;gap:9px}
.earnrow{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:13px 15px;font-weight:600}
.earnrow b{color:var(--gold)}
.ledrow{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px 15px}
.ledrow .lr-r{font-weight:700;font-size:14px}.ledrow .lr-t{color:var(--text3);font-size:12px;margin-top:2px}
.ledrow b.pos{color:var(--ok,#59c08a)}.ledrow b.neg{color:var(--danger)}
/* referral */
.refhero{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px 20px;text-align:center;margin-bottom:16px}
.refhero .rh-ic{width:60px;height:60px;border-radius:50%;background:rgba(190,191,195,.14);display:grid;place-items:center;margin:0 auto 14px}
.refhero .rh-ic .ico{width:30px;height:30px;color:var(--gold)}
.refhero p{color:var(--text2);font-size:14px;line-height:1.6;margin-bottom:18px}
.codebox{background:var(--bg);border:2px dashed rgba(190,191,195,.5);border-radius:6px;padding:16px;margin-bottom:14px}
.codebox span{font-size:26px;font-weight:800;letter-spacing:4px;color:var(--gold-hi,#d4d5d8)}
.refacts{display:flex;gap:10px}.refacts .btn{flex:1}
.refstats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.refstats .rs{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px;text-align:center}
.refstats .rs b{display:block;font-size:26px;font-weight:800;color:var(--gold)}
.refstats .rs span{color:var(--text2);font-size:12.5px}
.redeem{display:flex;gap:10px}.redeem .inp{flex:1}

/* ---------- real country flags ---------- */
.cflag{width:24px;height:16px;border-radius:3px;object-fit:cover;overflow:hidden;vertical-align:-3px;box-shadow:0 0 0 1px rgba(255,255,255,.15);display:inline-block;flex:0 0 auto}
.country .cflag{margin-inline-end:5px}
.country-pick .cbtn .cflag{width:30px;height:20px;border-radius:4px}

/* ---------- rich specs · warranty · PHEV ---------- */
.phev-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;color:#59c08a;background:rgba(89,192,138,.14);padding:3px 9px;border-radius:20px;vertical-align:middle;margin-inline-start:6px}
.warr{display:grid;gap:10px}
.wrow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:13px 15px}
.wrow .ico{width:22px;height:22px;color:var(--gold);flex:0 0 auto}
.wrow .wk{font-size:12px;color:var(--text2);font-weight:600}
.wrow .wv{font-size:14px;font-weight:700;margin-top:1px}

/* ---------- book a service (guest) ---------- */
.svc-hint{display:flex;align-items:center;gap:11px;margin:6px 20px 16px;padding:12px 14px;background:rgba(190,191,195,.1);border:1px solid rgba(190,191,195,.28);border-radius:6px}
.svc-hint .ico{width:22px;height:22px;color:var(--gold);flex:0 0 auto}
.svc-hint span{font-size:13px;color:var(--text2);line-height:1.5}

/* ---------- premium finish (silver, matte, refined) ---------- */
#app::before{content:"";position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:0;
  background-image:linear-gradient(180deg,rgba(20,18,16,.74),rgba(20,18,16,.86)),radial-gradient(ellipse 60% 40% at 80% 6%,rgba(190,191,195,.10),transparent 55%),url('/assets/brand/hero-pattern.png');
  background-size:cover,cover,cover;background-position:center,center,center;background-repeat:no-repeat;background-attachment:scroll}
#app>*:not(.bnav){position:relative;z-index:1}
#app>.bnav{position:fixed;z-index:40}   /* keep the bottom nav pinned — the rule above must not downgrade it to relative */
/* hairline silver dividers under section titles */
h2.sec{letter-spacing:.2px}
h2.sec::after{content:"";order:1;flex:1;height:1px;margin-inline:14px;align-self:center;background:linear-gradient(90deg,var(--line2),transparent)}
h2.sec a{order:2;flex:0 0 auto}   /* hairline sits BETWEEN the title and the "All →" link, so the link goes to the far edge */
/* refined kicker — metallic silver, wide tracking */
.hero .kicker{color:var(--gold-hi);letter-spacing:3px;font-weight:600;font-size:10.5px;opacity:.95}
.hero h1{font-weight:700;letter-spacing:.2px}
/* car studio floor for detail hero handled via ::after; keep car crisp */
.md-hero .car img{filter:drop-shadow(0 22px 26px rgba(0,0,0,.55))}
/* inputs: sharper, matte */
.inp,input,select,textarea{border-radius:var(--rs)}
/* cards get a hairline top sheen */
.mcard,.loc,.vcard,.bk,.ncard,.card{position:relative}
/* nav: matte glass */
.bnav{backdrop-filter:blur(14px)}

/* ---------- service booking wizard ---------- */
.wiz-steps{display:flex;align-items:center;margin:8px 0 18px}
.wdot{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line2);color:var(--text3);font-weight:800;font-size:12.5px;transition:.25s}
.wdot.on{background:linear-gradient(180deg,#ececeb,#c2c3c7);color:#171512;border-color:transparent}
.wdot.done{background:var(--gold-dk);color:#141210;border-color:transparent}
.wbar{flex:1;height:2px;background:var(--line2);margin:0 4px}
.wbar.done{background:var(--gold-dk)}
.wiz-head{margin-bottom:14px}
.wiz-head .ws{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-dk);font-weight:700}
.wiz-head h2{font-size:21px;font-weight:800;margin-top:3px}
.wiz-list{display:grid;gap:10px}
.wcard{display:flex;align-items:center;gap:12px;width:100%;text-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;transition:.18s}
.wcard .wc-t{font-weight:700;font-size:15px}
.wcard .wc-s{display:flex;align-items:center;gap:6px;color:var(--text2);font-size:12.5px;margin-top:4px}
.wcard .wc-s .ico{width:14px;height:14px;flex:0 0 auto}
.wcard .wc-main{flex:1;min-width:0}
.wcard .wtick{width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;flex:0 0 auto;opacity:0;transition:.18s}
.wcard .wtick .ico{width:15px;height:15px;color:#171512}
.wcard.on{border-color:var(--gold);background:var(--surface2)}
.wcard.on .wtick{opacity:1;background:var(--gold);border-color:transparent}
.wiz-nav{display:flex;gap:10px;margin:22px 0 6px}
.wiz-nav .btn{flex:1}
.wiz-nav .btn.ghost{flex:0 0 40%}
html[dir=rtl] .wiz-nav .btn.ghost .ico{transform:scaleX(-1)}
.wiz-sum{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;gap:11px}
.wsum-row{display:flex;align-items:center;gap:11px;font-weight:600;font-size:14px}
.wsum-row .ico{width:19px;height:19px;color:var(--gold);flex:0 0 auto}
/* booking success celebration overlay */
.cel-bg{position:fixed;inset:0;z-index:200;background:radial-gradient(120% 90% at 50% 20%,rgba(28,26,24,.86),rgba(10,9,8,.94));opacity:0;transition:opacity .3s var(--ease);display:flex;align-items:center;justify-content:center;padding:32px 24px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cel-bg.in{opacity:1}
.cel{width:100%;max-width:400px;text-align:center;transform:scale(.9);opacity:0;transition:transform .4s var(--ease),opacity .35s;position:relative}
.cel-bg.in .cel{transform:none;opacity:1}
.cel-check{width:96px;height:96px;margin:0 auto 22px;position:relative}
.cel-check svg{width:100%;height:100%;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none;filter:drop-shadow(0 6px 20px rgba(143,179,154,.35))}
.cc-c{stroke:var(--ok);stroke-dasharray:151;stroke-dashoffset:151;animation:ccC .5s var(--ease) .15s forwards}
.cc-k{stroke:var(--ok);stroke-dasharray:36;stroke-dashoffset:36;animation:ccK .35s var(--ease) .6s forwards}
@keyframes ccC{to{stroke-dashoffset:0}}
@keyframes ccK{to{stroke-dashoffset:0}}
.cel h2{font-size:24px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.cel-sub{color:var(--text2);font-size:14px;line-height:1.55;margin:0 auto 20px;max-width:32ch}
.cel-ref{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line2);border-radius:22px;padding:9px 16px;font-size:13px;color:var(--text2)}
.cel-ref b{color:var(--gold);font-size:15px;letter-spacing:1.5px}
.cel-sum{margin:18px auto 0;max-width:300px;text-align:start;display:grid;gap:9px}
.cel-row{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text2);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:11px 13px}
.cel-row .ico{width:16px;height:16px;color:var(--gold-hi);flex:0 0 auto}
.cel-cta{margin-top:26px}
.cel-burst{position:absolute;top:34px;left:50%;width:0;height:0;pointer-events:none}
.cf{position:absolute;top:0;left:0;width:9px;height:9px;border-radius:2px;opacity:0;transform-origin:center;animation:cfB 1s var(--ease) .55s forwards}
.cf0{background:var(--gold-hi)}.cf1{background:var(--jetour)}.cf2{background:var(--soueast)}.cf3{background:var(--ok)}.cf4{background:#e6c98a}
.cf{--ang:calc(var(--i) * 25.7deg);--dist:86px}
@keyframes cfB{0%{opacity:0;transform:rotate(var(--ang)) translateY(0) rotate(0)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--ang)) translateY(calc(var(--dist) * -1)) rotate(320deg)}}
@media (prefers-reduced-motion:reduce){.cc-c,.cc-k{animation:none;stroke-dashoffset:0}.cf{display:none}.cel,.cel-bg{transition:opacity .2s}}
.book-done{text-align:center;padding:34px 24px}
.book-done .bd-ic{width:70px;height:70px;border-radius:50%;background:rgba(143,179,154,.15);display:grid;place-items:center;margin:0 auto 18px}
.book-done .bd-ic .ico{width:34px;height:34px;color:var(--ok)}
.book-done h2{font-size:22px;font-weight:800;margin-bottom:8px}
.book-done .bd-ref{color:var(--text2)}.book-done .bd-ref b{color:var(--gold);font-size:17px;letter-spacing:1px}
.book-done .btn{max-width:220px;margin:6px auto 0}

/* ---------- home: latest-news hero ---------- */
.news-hero{aspect-ratio:16/9;margin:14px 20px 0}
.news-hero .grad{background:linear-gradient(180deg,rgba(20,18,16,0) 30%,rgba(20,18,16,.55) 60%,rgba(20,18,16,.95) 100%)}
.news-hero .cap{padding:16px 18px}
.news-hero .kicker{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:1.5px}
.news-hero .kicker .ico{width:13px;height:13px}
.news-hero h1{font-size:17px;line-height:1.35;margin:6px 0 0;font-weight:800;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-hero .hero-ex{display:none}
.news-hero .btn{display:none}

/* ---------- entry gate ---------- */
.gate .cbtn.gate-member{background:linear-gradient(180deg,#ececeb,#c2c3c7);color:#171512;border:none;justify-content:center;gap:10px;font-weight:800;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.gate .cbtn.gate-member .ico{width:20px;height:20px;color:#171512}
.gate .cbtn.gate-guest{justify-content:center;background:transparent;border:1px solid var(--line2);color:var(--text);font-weight:700}
.gate .cbtn.gate-member span,.gate .cbtn.gate-guest span{flex:0 0 auto}
/* ---------- AI Assistant widget ---------- */
.ai-fab{position:fixed;bottom:calc(var(--nav) + 14px + env(safe-area-inset-bottom));inset-inline-end:max(14px,calc((100vw - 480px)/2 + 14px));width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,var(--surface3),var(--surface2));border:1px solid var(--line2);color:var(--gold-hi);display:grid;place-items:center;z-index:60;box-shadow:0 12px 30px rgba(0,0,0,.5);cursor:pointer;transition:transform .18s,filter .2s}
.ai-fab:active{transform:scale(.94)}.ai-fab:hover{filter:brightness(1.08)}
.ai-fab .ico{width:25px;height:25px}
body:has(.country-pick) .ai-fab,body:has(.country-pick) .ai-panel{display:none}   /* hide the AI chat on the entry gate / country picker (pre-entry) */
.ai-fab.ai-on{background:var(--surface2)}
.ai-fab .ai-dot{position:absolute;top:-2px;inset-inline-end:-2px;width:14px;height:14px;border-radius:50%;background:var(--ok);border:2px solid var(--bg);animation:aiPulse 2s infinite}
@keyframes aiPulse{0%,100%{box-shadow:0 0 0 0 rgba(143,179,154,.5)}50%{box-shadow:0 0 0 5px rgba(143,179,154,0)}}
.ai-panel{position:fixed;bottom:calc(var(--nav) + 80px + env(safe-area-inset-bottom));inset-inline-end:max(14px,calc((100vw - 480px)/2 + 14px));width:min(360px,calc(100vw - 28px));height:min(520px,calc(100vh - var(--nav) - 120px));background:var(--bg2);border:1px solid var(--line2);border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.6);z-index:61;display:none;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(12px);transition:opacity .22s,transform .22s}
.ai-panel.ai-show{display:flex;opacity:1;transform:none}
.ai-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.ai-hid{display:flex;align-items:center;gap:10px;min-width:0}
.ai-onl{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(143,179,154,.2);flex:0 0 auto}
.ai-tt{min-width:0;line-height:1.25}.ai-tt b{display:block;font-size:14.5px;font-weight:800;color:var(--text)}.ai-tt small{font-size:11px;color:var(--ok);font-weight:600}
.ai-x{width:32px;height:32px;flex:0 0 auto;border-radius:8px;background:none;border:0;color:var(--text2);font-size:24px;line-height:1;cursor:pointer}.ai-x:hover{color:var(--text);background:var(--surface2)}
.ai-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.ai-msg{display:flex;max-width:86%}.ai-msg.user{align-self:flex-end}.ai-msg.ai{align-self:flex-start}
.ai-bub{padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.ai-msg.user .ai-bub{background:linear-gradient(180deg,#ececeb,#c2c3c7);color:#171512;font-weight:600;border-end-end-radius:4px}
.ai-msg.ai .ai-bub{background:var(--surface2);color:var(--text);border:1px solid var(--line);border-end-start-radius:4px}
.ai-bub a{color:inherit;font-weight:700;text-decoration:underline}
.ai-att{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.ai-att a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--gold-hi);background:var(--surface);border:1px solid var(--line2);border-radius:9px;padding:8px 11px;text-decoration:none}.ai-att a:hover{border-color:var(--gold)}
.ai-dots{display:flex;gap:4px;padding:3px 0}.ai-dots span{width:7px;height:7px;border-radius:50%;background:var(--text3,rgba(244,243,241,.5));animation:aiBlink 1.2s infinite}.ai-dots span:nth-child(2){animation-delay:.2s}.ai-dots span:nth-child(3){animation-delay:.4s}
@keyframes aiBlink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.ai-foot{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--surface)}
.ai-inp{flex:1;background:var(--bg2);border:1px solid var(--line2);border-radius:22px;padding:10px 15px;font-size:16px;color:var(--text);outline:none}.ai-inp:focus{border-color:var(--gold)}
.ai-send{width:40px;height:40px;flex:0 0 auto;border:0;border-radius:50%;background:linear-gradient(180deg,#ececeb,#c2c3c7);color:#171512;display:grid;place-items:center;cursor:pointer}.ai-send:disabled{opacity:.5}.ai-send svg{width:19px;height:19px}
/* ---------- Documents Wallet ---------- */
.doc-list{display:flex;flex-direction:column;gap:10px}
.doc-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:12px 13px}
.doc-ic{width:40px;height:40px;flex:0 0 auto;border-radius:10px;background:var(--surface2);display:grid;place-items:center;color:var(--gold-hi)}
.doc-ic .ico{width:20px;height:20px}
.doc-b{flex:1;min-width:0}
.doc-n{font-size:14px;font-weight:800;line-height:1.3;word-break:break-word}
.doc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11.5px;color:var(--text3);margin-top:3px}
.doc-exp{display:inline-flex;align-items:center;gap:4px;color:var(--gold-hi)}
.doc-exp .ico{width:12px;height:12px}
.doc-exp.over{color:var(--danger)}
.doc-open{flex:0 0 auto;padding:8px 13px}
.doc-del{flex:0 0 auto}
.doc-del .ico{width:16px;height:16px;color:var(--danger)}
/* ---------- Locator (dropdown + clean list) ---------- */
.loc-dd{position:relative;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line2);border-radius:11px;padding:0 14px;margin:4px 0 14px}
.loc-dd>.ico{width:18px;height:18px;color:var(--gold-hi);flex:0 0 auto}
.loc-dd .loc-city{flex:1;background:transparent;border:0;outline:none;color:var(--text);font-size:15px;font-weight:600;padding:13px 0;appearance:none;-webkit-appearance:none;cursor:pointer}
.loc-dd .loc-city option{background:var(--surface2);color:var(--text)}
.loc-dd .loc-chev{width:18px;height:18px;color:var(--text3);flex:0 0 auto;pointer-events:none}
.loc-count{font-size:12px;color:var(--text3);font-weight:700;margin:0 2px 10px}
.loc-flat{display:flex;flex-direction:column;gap:10px}
.loc-citygrp{margin-bottom:22px}
.loc-cityh{display:flex;align-items:center;gap:7px;margin:0 2px 11px;font-size:15px;font-weight:800;color:var(--text)}
.loc-cityh .ico{width:16px;height:16px;color:var(--gold);flex:0 0 auto}
.loc-cityh>span:first-of-type{margin-inline-end:auto}
.loc-cityn{font-size:12px;font-weight:700;color:var(--text3);background:var(--surface2);border:1px solid var(--line);border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px}
.loc{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:14px}
.loc-b{flex:1;min-width:0}
.loc .lt{font-size:14.5px;font-weight:800;line-height:1.3}
.loc .ls{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text2);margin-top:4px}
.loc .ls .ico{width:14px;height:14px;color:var(--text3);flex:0 0 auto}
.loc .lbrands{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.loc .lbrands span{font-size:10.5px;font-weight:700;color:var(--text2);background:var(--surface2);border:1px solid var(--line);border-radius:6px;padding:2px 8px}
.loc-dir{flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--gold-hi);text-decoration:none;padding:8px 10px;border:1px solid var(--line2);border-radius:9px}
.loc-dir .ico{width:18px;height:18px}
.loc-dir:active{transform:scale(.96)}
/* ---------- Loyalty rewards + vouchers ---------- */
.rewards{display:flex;flex-direction:column;gap:10px}
.reward{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.reward.locked{opacity:.55}
.rw-ic{width:42px;height:42px;flex:0 0 auto;border-radius:11px;background:linear-gradient(135deg,rgba(203,176,120,.18),var(--surface2));display:grid;place-items:center;color:var(--gold-hi)}
.rw-ic .ico{width:21px;height:21px}
.rw-b{flex:1;min-width:0}
.rw-n{font-size:14px;font-weight:800;line-height:1.3}
.rw-c{font-size:12.5px;color:var(--text2);margin-top:2px}.rw-c b{color:var(--gold);font-weight:800}
.rw-redeem{flex:0 0 auto;padding:9px 15px}
.reward.locked .rw-redeem{background:var(--surface3);color:var(--text3)}
.vouchers{display:flex;flex-direction:column;gap:10px}
.voucher{display:flex;align-items:center;gap:12px;background:linear-gradient(120deg,rgba(143,179,154,.12),var(--surface));border:1px dashed rgba(143,179,154,.5);border-radius:12px;padding:13px 14px;flex-wrap:wrap}
.vc-ic{width:38px;height:38px;flex:0 0 auto;border-radius:10px;background:var(--surface2);display:grid;place-items:center;color:var(--ok)}
.vc-b{flex:1;min-width:0}
.vc-n{font-size:13.5px;font-weight:800}
.vc-code{font-size:16px;font-weight:800;letter-spacing:2px;color:var(--ok);font-variant-numeric:tabular-nums;margin-top:2px}
.vc-badge{flex:1 1 100%;font-size:11px;color:var(--text3);border-top:1px dashed var(--line2);padding-top:8px;margin-top:2px}
/* locator: brand colors + dual filter */
#locfilter{display:flex;gap:10px;flex-wrap:wrap}
#locfilter .loc-dd{flex:1 1 44%;margin:4px 0 14px;min-width:140px}
.loc-bdot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:var(--text3)}
.loc{border-inline-start:4px solid var(--bc,var(--line2))}

/* inline car-info hubs in the account garage */
.garage-hubs{display:flex;flex-direction:column;gap:18px}
.acc-veh{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.acc-carhub{padding:0}
.acc-carhub .hub-hero{border-radius:0}
.acc-carhub .hub-body{padding:0 16px}
.acc-carhub .hub-tabs{padding:0 10px}
.acc-carhub .hub-mag{margin:0 16px 4px}
.acc-veh-acts{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.acc-veh-acts .btn{flex:1}

/* ---------- dashboard warning-light identifier ---------- */
.dash-sub{color:var(--text3);font-size:14px;line-height:1.5;margin:6px 0 16px}
.dash-scan{display:flex;align-items:center;gap:14px;width:100%;text-align:start;padding:16px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(245,166,35,.10),var(--card));cursor:pointer;color:var(--text)}
.dash-scan:active{transform:scale(.99)}
.dash-scan-ic{position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:14px;background:var(--gold-hi,#e9b949);display:grid;place-items:center;color:#231f16}
.dash-scan-ic .ico{width:26px;height:26px}
.dash-cam-badge{position:absolute;inset-inline-end:-3px;inset-block-end:-3px;width:18px;height:18px;border-radius:50%;background:#e5484d;border:2px solid var(--card);animation:dashpulse 1.6s infinite}
@keyframes dashpulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}50%{box-shadow:0 0 0 6px rgba(229,72,77,0)}}
.dash-scan-tx b{display:block;font-size:16px;font-weight:800}
.dash-scan-tx small{display:block;color:var(--text3);font-size:12.5px;margin-top:2px}
.dash-or{display:flex;align-items:center;gap:12px;color:var(--text3);font-size:13px;margin:18px 0 6px}
.dash-or::before,.dash-or::after{content:"";flex:1;height:1px;background:var(--line)}
.dash-allh{font-size:15px;font-weight:800;margin:14px 0 10px}
.dash-search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 12px;margin-bottom:12px}
.dash-search .ico{width:18px;height:18px;color:var(--text3);flex:0 0 auto}
.dash-search input{flex:1;background:none;border:0;outline:none;color:var(--text);font:inherit;padding:11px 0}
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dash-cell{--sv:var(--text3);display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px 10px;border-radius:16px;background:var(--card);border:1px solid var(--line);cursor:pointer;color:var(--text);text-align:center;position:relative;overflow:hidden}
.dash-cell::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;inset-inline-end:0;height:3px;background:var(--sv)}
.dash-cell:active{transform:scale(.97)}
.dash-cell.stop{--sv:#e5484d}.dash-cell.warn{--sv:#f5a623}.dash-cell.info{--sv:#35b37e}
.dash-cell-ic{width:46px;height:46px;color:var(--sv);display:grid;place-items:center}
.dash-cell-ic svg{width:46px;height:46px}
.dash-cell-nm{font-size:12px;font-weight:700;line-height:1.25;min-height:30px;display:flex;align-items:center}
.dash-pill{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;color:#fff;background:var(--sv)}
.dash-pill.info{color:#08281c}
.dash-note{padding:11px 14px;border-radius:12px;font-size:13.5px;font-weight:600;margin-bottom:14px;background:rgba(245,166,35,.14);color:var(--text);border:1px solid rgba(245,166,35,.4)}
.dash-yourphoto{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin-bottom:14px}
.dash-yourphoto img{width:56px;height:56px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.dash-yourphoto span{flex:1;font-size:13px;color:var(--text3);font-weight:600}
.dash-analyzing{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 0}
.dash-analyzing p{color:var(--text3);font-size:14px}
.dash-scanimg{position:relative;width:180px;height:135px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.dash-scanimg img{width:100%;height:100%;object-fit:cover}
.dash-scanbar{position:absolute;inset-inline:0;height:36px;top:-36px;background:linear-gradient(180deg,rgba(233,185,73,0),rgba(233,185,73,.55));animation:dashscan 1.5s ease-in-out infinite}
@keyframes dashscan{0%{top:-36px}100%{top:135px}}
.dash-matched{display:flex;align-items:center;justify-content:center;gap:6px;color:#35b37e;font-weight:800;font-size:13.5px;margin-bottom:12px}
.dash-matched .ico{width:18px;height:18px}
.dash-detail{--sv:var(--text3);display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:18px 0 6px}
.dash-detail.stop{--sv:#e5484d}.dash-detail.warn{--sv:#f5a623}.dash-detail.info{--sv:#35b37e}
.dash-det-ic{width:84px;height:84px;color:var(--sv);display:grid;place-items:center;border-radius:20px;background:color-mix(in srgb,var(--sv) 14%,transparent)}
.dash-det-ic svg{width:56px;height:56px}
.dash-sevbadge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;padding:5px 14px;border-radius:999px;color:#fff;background:var(--sv)}
.dash-sevbadge.info{color:#08281c}
.dash-sevbadge .ico{width:15px;height:15px}
.dash-det-nm{font-size:20px;font-weight:800;margin:0}
.dash-block{margin-top:16px;padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.dash-block.drive{background:color-mix(in srgb,var(--gold-hi,#e9b949) 8%,var(--card))}
.dash-block-h{display:block;font-size:12px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.dash-block p{margin:0;font-size:14.5px;line-height:1.55}
.dash-book{margin-top:18px}
.dash-disc{font-size:11.5px;color:var(--text3);line-height:1.5;text-align:center;margin-top:12px}
.dash-qrow .ico:first-child{color:var(--gold-hi,#e9b949)}

/* ---------- AR: "see it in your space" button + viewer ---------- */
.ar-open{display:flex;align-items:center;gap:12px;width:100%;text-align:start;margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(120deg,rgba(233,185,73,.14),rgba(233,185,73,.03) 60%,var(--card));color:var(--text);cursor:pointer;position:relative;overflow:hidden}
.ar-open::after{content:"AR";position:absolute;inset-block-start:8px;inset-inline-end:12px;font-size:10px;font-weight:900;letter-spacing:1px;color:var(--gold-hi,#e9b949);opacity:.8}
.ar-open:active{transform:scale(.99)}
.ar-open-ic{flex:0 0 auto;width:46px;height:46px;border-radius:13px;background:var(--gold-hi,#e9b949);color:#231f16;display:grid;place-items:center}
.ar-open-ic .ico{width:26px;height:26px}
.ar-open-tx{flex:1;display:flex;flex-direction:column;line-height:1.25}
.ar-open-tx b{font-size:15.5px;font-weight:800}
.ar-open-tx small{font-size:12px;color:var(--text3)}
.ar-open-arr .ico{width:18px;height:18px;color:var(--text3)}
html[dir="rtl"] .ar-open-arr .ico{transform:scaleX(-1)}
/* overlay */
body.ar-lock{overflow:hidden}
.ar-overlay{position:fixed;inset:0;z-index:99997;background:#0d0c0b;display:flex;flex-direction:column;animation:arIn .25s ease}
@keyframes arIn{from{opacity:0}to{opacity:1}}
.ar-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;padding-top:calc(16px + env(safe-area-inset-top));color:#fff}
.ar-ttl{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800}
.ar-ttl .ico{width:20px;height:20px;color:var(--gold-hi,#e9b949)}
.ar-x{width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.ar-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center}
.ar-mv{width:100%;height:100%;--poster-color:transparent;background:radial-gradient(ellipse 70% 60% at 50% 45%,#26241f 0%,#0d0c0b 75%)}
.ar-spin{display:flex;flex-direction:column;align-items:center;gap:14px;color:#9a948a}
.ar-spin p{font-size:13.5px}
.ar-launch{position:absolute;inset-block-end:26px;inset-inline-start:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border:0;border-radius:999px;background:var(--gold-hi,#e9b949);color:#231f16;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.5);white-space:nowrap}
html[dir="rtl"] .ar-launch{transform:translateX(50%)}
.ar-launch .ico{width:20px;height:20px}
.ar-tip{display:flex;align-items:center;gap:10px;padding:14px 20px;padding-bottom:calc(14px + env(safe-area-inset-bottom));color:#b9b3a8;font-size:12.5px;line-height:1.45;background:rgba(255,255,255,.03);border-top:1px solid rgba(255,255,255,.06)}
.ar-tip .ico{width:20px;height:20px;flex:0 0 auto;color:var(--gold-hi,#e9b949)}
.ar-fallback{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:30px;color:#cfc9bf}
.ar-fallback img{width:180px;max-width:70%;border-radius:14px}
.ar-fallback p{font-size:14px;line-height:1.5;max-width:280px}
.ar-fallback .btn{min-width:220px}

/* ---------- 360° spin viewer ---------- */
.ar-open.s360::after{content:"360°"}
.spin-overlay{position:fixed;inset:0;z-index:99997;background:#0d0c0b;display:flex;flex-direction:column;animation:arIn .25s ease}
.spin-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;background:radial-gradient(ellipse 78% 55% at 50% 60%,#26241f 0%,#0d0c0b 72%)}
.spin-img{max-width:100%;max-height:100%;width:auto;height:auto;user-select:none;-webkit-user-drag:none;cursor:grab;touch-action:none}
.spin-img:active{cursor:grabbing}
.spin-load{display:flex;flex-direction:column;align-items:center;gap:16px;color:#b9b3a8}
.spin-load p{font-size:13.5px}
.spin-ring{position:relative;width:64px;height:64px}
.spin-ring svg{width:64px;height:64px;transform:rotate(-90deg)}
.spin-ring circle{fill:none;stroke-width:3}
.sr-bg{stroke:rgba(255,255,255,.12)}
.sr-fg{stroke:var(--gold-hi,#e9b949);stroke-linecap:round;stroke-dasharray:119.38;stroke-dashoffset:119.38;transition:stroke-dashoffset .15s linear}
.spin-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff}
.spin-tip{display:flex;align-items:center;gap:10px;justify-content:center;padding:14px 20px;padding-bottom:calc(14px + env(safe-area-inset-bottom));color:#b9b3a8;font-size:12.5px;background:rgba(255,255,255,.03);border-top:1px solid rgba(255,255,255,.06)}
.spin-tip .ico{width:20px;height:20px;color:var(--gold-hi,#e9b949);flex:0 0 auto}
/* exterior / interior segmented toggle */
.spin-seg{display:flex;gap:4px;align-self:center;margin:6px auto 2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px)}
.spin-sg{appearance:none;border:0;cursor:pointer;padding:8px 18px;border-radius:999px;background:transparent;color:#cfc9bd;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.2px;transition:background .2s,color .2s}
.spin-sg.on{background:linear-gradient(180deg,#ececeb,#c2c3c7);color:#171512;box-shadow:0 3px 12px rgba(190,191,195,.26)}   /* silver to match the app accent, not amber */
/* interior equirectangular cabin panorama — seamless horizontal 360 pan (GPU transform) */
.pano{position:absolute;inset:0;overflow:hidden;background:#0d0c0b;cursor:grab;touch-action:none}
.pano:active{cursor:grabbing}
.pano-track{position:absolute;left:0;top:-30%;height:160%;display:flex;flex-wrap:nowrap;will-change:transform;backface-visibility:hidden}
.pano-img{height:100%;width:auto;max-width:none;display:block;flex:0 0 auto;user-select:none;-webkit-user-drag:none;pointer-events:none}
.spin-ind{stroke-dasharray:70 200;transform-origin:22px 22px;animation:spinInd .9s linear infinite}
@keyframes spinInd{to{transform:rotate(360deg)}}

/* ---------- video inspection report ---------- */
.rep-open{display:inline-flex;align-items:center;gap:6px;position:relative;margin-top:8px;background:linear-gradient(120deg,rgba(233,185,73,.16),var(--card));border:1px solid rgba(233,185,73,.35);color:var(--text)}
.rep-open .ico{width:16px;height:16px;color:var(--gold-hi,#e9b949)}
.rep-open-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5484d;color:#fff;font-size:11px;font-weight:800;display:inline-grid;place-items:center;margin-inline-start:4px}
.rep-overlay{position:fixed;inset:0;z-index:99997;background:var(--bg,#141210);display:flex;flex-direction:column;animation:arIn .25s ease}
.rep-overlay .ar-top{color:var(--text);border-bottom:1px solid var(--line)}
.rep-overlay .ar-ttl .ico{color:var(--gold-hi,#e9b949)}
.rep-overlay .ar-x{background:var(--card);color:var(--text)}
.rep-scroll{flex:1;overflow-y:auto;padding:16px 18px 40px;-webkit-overflow-scrolling:touch}
.rep-video{border-radius:16px;overflow:hidden;background:#000;margin-bottom:14px}
.rep-video video{width:100%;display:block;max-height:44vh;background:#000}
.rep-metaline{display:flex;flex-wrap:wrap;gap:14px;color:var(--text3);font-size:13px;margin-bottom:14px}
.rep-metaline span{display:inline-flex;align-items:center;gap:6px}
.rep-metaline .ico{width:15px;height:15px}
.rep-sum{display:flex;gap:8px;margin-bottom:14px}
.rep-chip{flex:1;text-align:center;padding:9px 6px;border-radius:12px;font-size:12.5px;font-weight:800;border:1px solid}
.rep-chip.red{color:#e5484d;background:rgba(229,72,77,.12);border-color:rgba(229,72,77,.3)}
.rep-chip.amber{color:#f5a623;background:rgba(245,166,35,.12);border-color:rgba(245,166,35,.3)}
.rep-chip.green{color:#35b37e;background:rgba(53,179,126,.12);border-color:rgba(53,179,126,.3)}
.rep-intro{color:var(--text3);font-size:13px;line-height:1.5;margin:0 0 14px}
.rep-list{display:flex;flex-direction:column;gap:10px}
.rep-item{--sv:#35b37e;display:flex;gap:12px;padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}
.rep-item::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--sv)}
.rep-item.red{--sv:#e5484d}.rep-item.amber{--sv:#f5a623}.rep-item.green{--sv:#35b37e}
.rep-dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--sv);margin-top:4px}
.rep-b{flex:1;min-width:0}
.rep-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rep-top b{font-size:14.5px;font-weight:800}
.rep-sev{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;color:#fff;background:var(--sv);flex:0 0 auto}
.rep-sev.green{color:#08281c}
.rep-note{color:var(--text3);font-size:13px;line-height:1.45;margin-top:4px}
.rep-acts{display:flex;gap:8px;margin-top:10px}
.rep-acts .btn{flex:1}
.rep-st{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800}
.rep-st .ico{width:16px;height:16px}
.rep-st.ok{color:#35b37e}
.rep-st.no{color:var(--text3)}
.rep-total{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:16px;border-radius:14px;background:color-mix(in srgb,var(--gold-hi,#e9b949) 10%,var(--card));border:1px solid rgba(233,185,73,.35)}
.rep-total span{font-size:13.5px;color:var(--text3);font-weight:600}
.rep-total b{font-size:18px;font-weight:800;color:var(--gold-hi,#e9b949)}

/* ---------- real OEM maintenance schedule ---------- */
.sch-real{padding-top:4px}
.sch-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sch-h .ico{width:26px;height:26px;color:var(--gold-hi,#e9b949);flex:0 0 auto}
.sch-h-t b{display:block;font-size:16px;font-weight:800}
.sch-h-t small{display:block;color:var(--text3);font-size:12px;margin-top:2px}
.sch-legend{display:flex;gap:8px;margin-bottom:14px}
.sch-lg{flex:1;text-align:center;font-size:11.5px;font-weight:800;padding:6px 4px;border-radius:9px;border:1px solid;position:relative;padding-inline-start:22px}
.sch-lg::before{content:"";position:absolute;inset-inline-start:8px;inset-block:0;margin:auto;width:9px;height:9px;border-radius:50%}
.sch-lg.r{color:#e5484d;background:rgba(229,72,77,.1);border-color:rgba(229,72,77,.3)}.sch-lg.r::before{background:#e5484d}
.sch-lg.i{color:#2e90fa;background:rgba(46,144,250,.1);border-color:rgba(46,144,250,.3)}.sch-lg.i::before{background:#2e90fa}
.sch-lg.c{color:#f5a623;background:rgba(245,166,35,.1);border-color:rgba(245,166,35,.3)}.sch-lg.c::before{background:#f5a623}
.sch-acc{display:flex;flex-direction:column;gap:8px}
.sch-ac{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.sch-ac-h{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:14px;background:none;border:0;color:var(--text);cursor:pointer;text-align:start}
.sch-ac-h.open{background:color-mix(in srgb,var(--gold-hi,#e9b949) 7%,transparent)}
.sch-ac-km{display:flex;align-items:center;gap:8px;font-size:14px}
.sch-ac-km b{font-size:16px;font-weight:800}
.sch-ac-km small{color:var(--text3);font-size:11px;border:1px solid var(--line2);border-radius:6px;padding:1px 5px}
.sch-next-tag{background:var(--gold-hi,#e9b949);color:#231f16;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px}
.sch-ac-meta{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.sch-rc{font-size:11px;font-weight:800;color:#e5484d;background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.28);padding:2px 8px;border-radius:999px;white-space:nowrap}
.sch-chev .ico{width:18px;height:18px;color:var(--text3);transition:transform .2s}
.sch-ac-h.open .sch-chev .ico{transform:rotate(180deg)}
.sch-ac-b{padding:0 14px 12px;display:flex;flex-direction:column;gap:2px}
.sch-it{--sv:#2e90fa;display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.sch-it.r{--sv:#e5484d}.sch-it.i{--sv:#2e90fa}.sch-it.c{--sv:#f5a623}
.sch-it-a{flex:0 0 auto;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--sv)}
.sch-it-n{flex:1;font-size:13px;line-height:1.35}
.sch-it-c{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--text3)}

/* ---------- GE Hili font (for branded hashtag) ---------- */
@font-face{font-family:'GE Hili';src:url('/assets/fonts/GE_Hili_Book.otf') format('opentype');font-weight:400 800;font-display:swap}

/* ---------- Harlem AR Vehicle Camera ---------- */
.hub-cam{display:flex;align-items:center;gap:12px;width:100%;text-align:start;margin:14px 0 4px;padding:14px 16px;border:1px solid rgba(18,182,201,.35);border-radius:16px;background:linear-gradient(120deg,rgba(18,182,201,.14),var(--card));color:var(--text);cursor:pointer;position:relative;overflow:hidden}
.hub-cam::after{content:"AR";position:absolute;inset-block-start:8px;inset-inline-end:12px;font-size:10px;font-weight:900;letter-spacing:1px;color:#12b6c9;opacity:.8}
.hub-cam:active{transform:scale(.99)}
.hub-cam-ic{flex:0 0 auto;width:46px;height:46px;border-radius:13px;background:#12b6c9;color:#04222a;display:grid;place-items:center}
.hub-cam-ic .ico{width:26px;height:26px}
.hub-cam-tx{flex:1;display:flex;flex-direction:column;line-height:1.25}
.hub-cam-tx b{font-size:15.5px;font-weight:800}
.hub-cam-tx small{font-size:12px;color:var(--text3)}
.hub-cam-arr .ico{width:18px;height:18px;color:var(--text3)}
html[dir="rtl"] .hub-cam-arr .ico{transform:scaleX(-1)}
.cam-qrow .ico:first-child{color:#12b6c9}

.cam-host{position:fixed;inset:0;z-index:99998;background:#000;overflow:hidden;animation:arIn .25s ease}
.cam-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.cam-video[hidden]{display:none}
/* native-capture backdrop (shown when using the OS camera instead of a live stream) */
.cam-poster{position:absolute;inset:0;background:radial-gradient(ellipse 90% 60% at 50% 38%,#2a2721 0%,#141210 70%)}
.cam-modes[hidden],.cam-ico[hidden],.cam-dev[hidden]{display:none!important}
.cam-dev{position:absolute;left:22px;bottom:34px;bottom:calc(34px + env(safe-area-inset-bottom));width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px)}
.cam-dev .ico{width:22px;height:22px}
/* native OS-camera file input: parked off-screen until native mode, then a transparent tap-target ON the shutter
   (a real user tap on the input itself — the only reliable way to open the camera inside an iOS Home-Screen app) */
#camFile{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0}
.cam-host.native #camFile{left:50%;top:auto;bottom:26px;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);width:82px;height:82px;opacity:0;z-index:8;cursor:pointer;font-size:0;color:transparent}
.cam-host.native #camFile::-webkit-file-upload-button{width:100%;height:100%;opacity:0;border:0}
.cam-safari{position:absolute;left:50%;bottom:132px;bottom:calc(132px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9;background:#fff;color:#141210;border:0;border-radius:999px;padding:12px 24px;font:inherit;font-weight:800;box-shadow:0 6px 20px rgba(0,0,0,.4);cursor:pointer}
.cam-safari[hidden]{display:none}
.cam-overlay{position:absolute;inset:0;pointer-events:none}
.cam-grad{position:absolute;inset-inline:0;pointer-events:none}
.cam-grad.bot{bottom:0;height:40%;background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.45) 45%,transparent)}
.cam-cnr{position:absolute;width:9%;height:5.5%;border:4px solid var(--ac,#12b6c9);border-radius:5px;pointer-events:none}
.cam-cnr.tl{top:4.5%;inset-inline-start:4.5%;border-inline-end:0;border-block-end:0}
.cam-cnr.tr{top:4.5%;inset-inline-end:4.5%;border-inline-start:0;border-block-end:0}
.cam-cnr.bl{bottom:4.5%;inset-inline-start:4.5%;border-inline-end:0;border-block-start:0}
.cam-cnr.br{bottom:4.5%;inset-inline-end:4.5%;border-inline-start:0;border-block-start:0}
.cam-hd{position:absolute;inset-block-start:calc(env(safe-area-inset-top) + 58px);inset-inline:7%;display:flex;align-items:center;justify-content:space-between}
.cam-hg{height:30px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.cam-brandlogo{height:17px;filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.cam-footer{position:absolute;inset-inline:5%;inset-block-end:calc(env(safe-area-inset-bottom) + 128px);display:flex;align-items:flex-end;gap:10px}
.cam-car{flex:0 0 52%}
.cam-car img{width:100%;filter:drop-shadow(0 12px 24px rgba(0,0,0,.6))}
.cam-info{flex:1;min-width:0;text-align:end;padding-bottom:8px;color:#fff}
.cam-vname{font-size:14px;font-weight:800;color:rgba(255,255,255,.95);margin-bottom:5px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.cam-hash{font-family:'GE Hili','Almarai',sans-serif;font-size:24px;font-weight:800;line-height:1.1;text-shadow:0 0 16px var(--ac,#12b6c9)}
.cam-topbar{position:absolute;inset-block-start:calc(env(safe-area-inset-top) + 10px);inset-inline:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cam-ico{width:42px;height:42px;border:0;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:24px;line-height:1;cursor:pointer;backdrop-filter:blur(6px)}
.cam-modes{display:flex;gap:4px;background:rgba(0,0,0,.4);border-radius:999px;padding:4px;backdrop-filter:blur(6px)}
.cam-modes button{border:0;background:none;color:rgba(255,255,255,.65);font:inherit;font-size:13px;font-weight:700;padding:6px 16px;border-radius:999px;cursor:pointer}
.cam-modes button.on{background:#fff;color:#111}
.cam-rec{position:absolute;inset-block-start:calc(env(safe-area-inset-top) + 62px);inset-inline-start:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;background:rgba(0,0,0,.5);color:#fff;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px}
.cam-rec span{width:9px;height:9px;border-radius:50%;background:#e5484d;animation:camblink 1s infinite}
@keyframes camblink{50%{opacity:.3}}
.cam-btmbar{position:absolute;inset-block-end:calc(env(safe-area-inset-bottom) + 24px);inset-inline:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.cam-hint{color:rgba(255,255,255,.8);font-size:12px;background:rgba(0,0,0,.35);padding:4px 12px;border-radius:999px;backdrop-filter:blur(4px)}
.cam-shutter{width:74px;height:74px;border-radius:50%;border:4px solid rgba(255,255,255,.85);background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.cam-shutter-in{width:58px;height:58px;border-radius:50%;background:#fff;transition:.15s}
.cam-shutter.rec .cam-shutter-in{width:30px;height:30px;border-radius:8px;background:#e5484d}
.cam-perm{position:absolute;inset:0;background:rgba(0,0,0,.9);display:grid;place-items:center;padding:24px}
.cam-perm-box{text-align:center;color:#fff;max-width:300px}
.cam-perm-box .ico{width:48px;height:48px;color:#12b6c9;margin-bottom:12px}
.cam-perm-box h3{font-size:19px;margin-bottom:8px}
.cam-perm-box p{color:#b9b3a8;font-size:14px;line-height:1.5;margin-bottom:18px}
.cam-preview{position:absolute;inset:0;background:#0b0b0b;display:flex;flex-direction:column;z-index:5}
.cam-preview[hidden]{display:none}   /* the hidden attr alone was overridden by display:flex → the panel covered the whole camera (black screen / dead taps) */
.cam-pv-media{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:16px}
.cam-pv-media img,.cam-pv-media video{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.cam-pv-acts{display:flex;gap:10px;padding:16px 20px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.cam-pv-acts .btn{flex:1}


/* ===== Careers (revamp) ===== */
.careers-sub{color:var(--text2);font-size:14px;margin:16px 0 2px;line-height:1.6}
.joblist{display:flex;flex-direction:column;gap:9px;margin-bottom:10px}
.jobcard{display:flex;align-items:center;gap:12px;width:100%;text-align:start;padding:15px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--rl);color:var(--text);transition:background .16s,border-color .16s;cursor:pointer}
.jobcard:hover{border-color:var(--line2);background:var(--surface2)}
.jc-l{flex:1;min-width:0}
.jc-t{font-weight:700;font-size:15px;line-height:1.3}
.jc-m{display:flex;flex-wrap:wrap;gap:7px 12px;margin-top:7px;font-size:12.5px;color:var(--text3)}
.jc-loc{display:inline-flex;align-items:center;gap:5px}
.jc-loc .ico{width:14px;height:14px;opacity:.8}
.jc-type{background:var(--surface2);border:1px solid var(--line);border-radius:20px;padding:2px 10px;color:var(--text2);font-weight:600}
.apply-box{padding:2px 2px 6px}
.apply-h{font-size:19px;font-weight:800;margin-bottom:4px}
.apply-meta{color:var(--gold);font-size:12.5px;font-weight:600;margin-bottom:12px}
.apply-desc{color:var(--text2);font-size:13.5px;line-height:1.7;margin-bottom:10px}
.apply-reqs{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:14px;font-size:13px;color:var(--text2);line-height:1.6}
.apply-reqs b{color:var(--text);display:block;margin-bottom:6px}
.apply-reqs ul{margin:0;padding-inline-start:18px;list-style:none}
.apply-reqs li{position:relative;padding-inline-start:16px;margin-bottom:5px}
.apply-reqs li::before{content:"";position:absolute;inset-inline-start:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
/* styled CV uploader (hides the native file control) */
.cvpick{display:flex;align-items:center;gap:9px;width:100%;padding:13px 14px;border:1px dashed var(--line2);border-radius:12px;background:var(--surface);color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s}
.cvpick:hover{border-color:var(--gold);color:var(--text)}
.cvpick.has{border-style:solid;border-color:var(--gold);color:var(--text)}
.cvpick .ico{width:18px;height:18px;color:var(--gold);flex:0 0 auto}
.cvpick-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}