/* RentPilot admin UI. Colours come from CSS variables generated from Settings → Appearance (see ThemeCss.cs). */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.5}
a{color:var(--primary-ink)}
img{max-width:100%}
[hidden]{display:none!important}
.grow{flex:1;min-width:0}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:12.5px}
.sub{color:var(--mute);font-size:12px}
.note{font-size:12px;color:var(--mute)}
.up{color:var(--ok);font-weight:700}.dn{color:var(--bad);font-weight:700}
.tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-ink)}
h1,h2,h3,h4{font-family:"Sora",var(--f-body);letter-spacing:-.01em}

/* shell */
.app{display:grid;grid-template-columns:252px 1fr;min-height:100%}
.rail{background:var(--sidebar);color:var(--sidebar-fg);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;padding:18px 12px}
.brand{padding:4px 8px 18px;display:block;text-decoration:none}
.brand img{max-width:180px;max-height:44px;display:block}
.brand-text{font-family:"Sora",sans-serif;font-weight:800;font-size:22px;color:#fff}
.navgrp{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sidebar-mute);padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--sidebar-fg);text-decoration:none;font-weight:500}
.nav a svg{width:17px;height:17px;flex:none;opacity:.85}
.nav a:hover{background:var(--sidebar-2)}
.nav a.on{background:var(--primary);color:var(--on-primary)}
.rail-foot{margin-top:auto;padding:14px 6px 0;border-top:1px solid var(--sidebar-3);font-size:12px;color:var(--sidebar-mute);display:flex;gap:10px;align-items:center}
.rail-name{color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-out{background:none;border:1px solid var(--sidebar-3);color:var(--sidebar-fg);border-radius:8px;padding:4px 8px;cursor:pointer}
.ava{width:32px;height:32px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:12px 24px}
.top h1{font-size:19px;margin:0;font-weight:700}
.crumb{font-size:12px;color:var(--mute)}
.crumb a{color:var(--mute);text-decoration:none}
.search{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;width:260px}
.search input{border:0;background:transparent;outline:none;padding:0}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}
.burger{display:none;background:none;border:0;color:var(--fg);padding:6px;cursor:pointer;border-radius:8px;line-height:0}
.icon-btn{background:none;border:1px solid transparent;color:var(--fg);padding:6px;border-radius:8px;cursor:pointer;line-height:0;display:inline-grid;place-items:center}
.icon-btn:hover{border-color:var(--line)}
.search-toggle{display:none}
.rail-close{display:none;margin-inline-start:auto;background:none;border:1px solid var(--sidebar-3);color:var(--sidebar-fg);border-radius:8px;padding:6px;cursor:pointer;line-height:0}
.rail-head{display:flex;align-items:flex-start;gap:8px}
.rail-backdrop{position:fixed;inset:0;background:rgba(4,10,20,.5);z-index:65;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.app.open .rail-backdrop{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.theme-toggle .ico-dark{display:none}
:root[data-theme=dark] .theme-toggle .ico-light{display:none}
:root[data-theme=dark] .theme-toggle .ico-dark{display:inline}
.content{padding:22px 24px 48px;display:flex;flex-direction:column;gap:18px;min-width:0}
.lead{color:var(--mute);margin:-6px 0 0;max-width:80ch}

/* layout bits */
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.g12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-h h1,.card-h h2,.card-h h3{margin:0;font-size:14.5px;font-weight:700}
.card-b{padding:16px}
.kpi{padding:16px;display:flex;flex-direction:column;gap:4px}
.kpi .l{font-size:12px;color:var(--mute);font-weight:600}
.kpi .v{font-family:"Sora",sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;color:var(--mute)}

/* tables */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);text-align:left;font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
.num{text-align:right;white-space:nowrap}
.nowrap{white-space:nowrap}
.empty{padding:28px;text-align:center;color:var(--mute)}

/* pills & plates */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-ok{background:var(--ok-soft);color:var(--ok)}.p-warn{background:var(--warn-soft);color:var(--warn)}.p-bad{background:var(--bad-soft);color:var(--bad)}.p-info{background:var(--primary-soft);color:var(--primary-ink)}.p-mute{background:var(--info-soft);color:var(--mute)}
.plate{display:inline-flex;border:1.5px solid var(--fg);border-radius:4px;font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:600;overflow:hidden;line-height:1.6;white-space:nowrap}
.plate b{background:var(--fg);color:var(--surface);padding:0 5px;font-weight:600}
.plate span{padding:0 6px}
.bar{height:8px;border-radius:5px;background:var(--info-soft);overflow:hidden;min-width:50px}
.bar i{display:block;height:100%;background:var(--primary);border-radius:5px}
.dot{width:9px;height:9px;border-radius:50%;flex:none}

/* buttons & forms */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:7px 12px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--primary)}
.btn.pri{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.pri:hover{filter:brightness(.94)}
.btn.danger{color:var(--bad);border-color:var(--bad-soft)}
.btn.sm{padding:4px 9px;font-size:12.5px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--primary-ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible,.nav a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.tab:focus-visible,
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.chip:focus-visible,.snav a:focus-visible{outline:2px solid var(--focus,var(--primary));outline-offset:2px}
.chip:has(input:focus-visible),label:has(>input[type=checkbox]:focus-visible),label:has(>input[type=radio]:focus-visible){outline:2px solid var(--focus,var(--primary));outline-offset:2px}
.chip input[type=checkbox],.chip input[type=radio]{accent-color:var(--primary)}
.rail a:focus-visible,.rail button:focus-visible{outline-color:var(--sidebar-fg)}
.nav a.on:focus-visible{outline:2px solid var(--sidebar-fg);outline-offset:2px}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--mute);min-width:0}
input,select,textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%;min-width:0}
input[type=checkbox],input[type=radio]{width:auto}
input[type=color]{padding:2px;height:38px;width:56px;flex:none;cursor:pointer}
textarea{min-height:80px;resize:vertical}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form .full{grid-column:1/-1}
.check{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:500;color:var(--fg)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:20px;padding:4px 11px;font:inherit;font-size:12.5px;cursor:pointer;text-decoration:none}
.chip.on{background:var(--primary-soft);border-color:var(--focus,var(--primary));color:var(--primary-ink);font-weight:600}
.field-error,.validation-summary-errors{color:var(--bad);font-size:12px;font-weight:600}
.validation-summary-errors ul{margin:0;padding-left:18px}
.alert{padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface-2)}
.alert.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.alert.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.alert.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:9px 12px;font:inherit;font-weight:600;color:var(--mute);cursor:pointer;white-space:nowrap;text-decoration:none}
.tab.on{color:var(--primary-ink);border-bottom-color:var(--focus,var(--primary))}
.list{display:flex;flex-direction:column}
.li{display:flex;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li .t{font-weight:600}
.sum{display:flex;flex-direction:column;gap:7px;font-variant-numeric:tabular-nums}
.sum>div{display:flex;justify-content:space-between;gap:10px}
.sum .tot{border-top:1px solid var(--line);padding-top:8px;font-weight:700;font-size:16px}
.toast{position:fixed;inset-inline-end:20px;bottom:calc(20px + var(--dock-h,0px));max-width:min(440px,calc(100vw - 32px));background:var(--sidebar);color:#fff;padding:10px 8px 10px 16px;border-radius:10px;z-index:90;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;align-items:flex-start;gap:10px;transition:opacity .3s}
html[dir=rtl] .toast{padding:10px 16px 10px 8px}
.toast.err{background:var(--toast-bad,var(--bad))}
.toast .toast-msg{flex:1;min-width:0;padding-top:2px}
.toast .toast-x{background:none;border:0;color:inherit;font:inherit;font-size:20px;line-height:1;padding:2px 8px;border-radius:6px;cursor:pointer;opacity:.85}
.toast .toast-x:hover{opacity:1;background:rgba(255,255,255,.15)}
.toast .toast-x:focus-visible{outline:2px solid #fff;outline-offset:1px}
.toast.hide{opacity:0}
.pager{display:flex;gap:6px;justify-content:flex-end;padding:12px 16px}

/* settings */
.settings{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}
.snav{display:flex;flex-direction:column;gap:2px;position:sticky;top:80px}
.snav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--fg);font-weight:500}
.snav a.on{background:var(--primary-soft);color:var(--primary-ink);font-weight:700}
.swatch-row{display:flex;gap:10px;align-items:center}
.swatch-row input[type=text]{font-family:"JetBrains Mono",monospace;text-transform:uppercase}
.logo-box{border:1px dashed var(--line);border-radius:var(--r);padding:16px;display:flex;align-items:center;justify-content:center;min-height:90px}
.logo-box.dark{background:var(--sidebar)}
.logo-box img{max-height:56px}
.preview{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:120px 1fr;min-height:180px}
.preview .pv-rail{padding:12px;display:flex;flex-direction:column;gap:6px}
.preview .pv-item{height:10px;border-radius:4px;opacity:.5}
.preview .pv-main{padding:14px;display:flex;flex-direction:column;gap:10px}
.secret{display:flex;gap:6px}

/* calendar */
.cal{overflow-x:auto}
.cal table td,.cal table th{padding:0;border:1px solid var(--line)}
.cal th{font-size:11px;padding:6px 4px;text-align:center;min-width:44px}
.cal td.car{padding:6px 10px;font-weight:600;font-size:12.5px;background:var(--surface);position:sticky;left:0;z-index:1;min-width:180px}
.cal td.c{height:36px;position:relative}
.cal .blk{position:absolute;top:5px;bottom:5px;left:2px;border-radius:5px;background:var(--primary);color:var(--on-primary);font-size:11px;padding:2px 6px;overflow:hidden;white-space:nowrap;z-index:1;text-decoration:none}
.cal .blk.r{background:var(--sidebar-3);color:#fff}
.cal th.today{background:var(--primary-soft);color:var(--primary-ink)}

/* inspection */
.carsvg{width:100%;max-width:300px;display:block;margin:auto;cursor:crosshair;touch-action:manipulation}
.carsvg .body{fill:var(--surface-2);stroke:var(--mute);stroke-width:2}
.carsvg .glass{fill:var(--info-soft);stroke:var(--mute);stroke-width:1.5}
.carsvg .dmg{fill:var(--bad);stroke:var(--surface);stroke-width:2}
.carsvg .dmg.old{fill:var(--mute)}
.carsvg text{fill:var(--mute);font-size:11px}
.sigpad{border:1px dashed var(--line);border-radius:8px;width:100%;max-width:460px;height:130px;background:#fff;color-scheme:light;touch-action:none;display:block}
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--mute);font-size:11px}
.chart .gl{stroke:var(--line)}

/* auth & portal */
.auth{min-height:100%;display:grid;place-items:center;padding:24px;background:var(--sidebar)}
.auth .card{width:min(420px,100%);padding:28px}
.auth .brand img{max-height:48px;margin:0 auto 6px}
.portal-top{background:var(--sidebar);padding:14px 24px;display:flex;align-items:center;gap:16px}
.portal-top img{max-height:38px}
.portal-top a{color:var(--sidebar-fg);text-decoration:none;font-weight:600}
.portal-wrap{max-width:1080px;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:18px}
.portal-hero{background:var(--sidebar);color:#fff;border-radius:var(--r);padding:28px}
.portal-hero h2{margin:0 0 6px;font-size:26px}
.car-card{display:flex;flex-direction:column;gap:8px;padding:16px}
.car-card .price{font-family:"Sora",sans-serif;font-size:22px;font-weight:700}

/* printable invoice */
.invoice-doc{background:#fff;color:#0f1c2e;max-width:820px;padding:32px;border-radius:var(--r);border:1px solid var(--line);
  /* A printable document is always white: it uses the light palette inside, also in dark mode. */
  --fg:#0f1c2e;--mute:var(--l-mute,#56657A);--surface:#fff;--surface-2:#f3f6fa;--bg:#f3f6fa;--line:#dfe5ee;--info-soft:#eef2f7;
  --primary-ink:var(--l-primary-ink);--primary-soft:var(--l-primary-soft);--ok:var(--l-ok);--ok-soft:var(--l-ok-soft);--warn:var(--l-warn);--warn-soft:var(--l-warn-soft);
  --bad:var(--l-bad);--bad-soft:var(--l-bad-soft);color-scheme:light}
.invoice-doc a{color:var(--primary-ink)}
.invoice-doc tbody tr:hover td{background:#f3f6fa}
@media (max-width:600px){.invoice-doc{padding:18px 14px}}
@media print{.rail,.top,.no-print,.toast,.rail-backdrop,.skip-link{display:none!important}.app{display:block}.content{padding:0}.invoice-doc{border:0;max-width:none;padding:0}
  .tbl,.cal{overflow:visible!important}table{width:100%!important}th,td{white-space:normal}body{background:#fff}}

@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g21,.g12{grid-template-columns:1fr}.settings{grid-template-columns:1fr}.snav{position:static;flex-direction:row;overflow-x:auto}}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;inset-inline-start:0;top:0;bottom:0;width:min(280px,86vw);z-index:70;transform:translateX(-100%);transition:transform .2s,visibility .2s;height:auto;visibility:hidden;overscroll-behavior:contain}
  html[dir=rtl] .rail{transform:translateX(100%)}
  .app.open .rail,html[dir=rtl] .app.open .rail{transform:none;visibility:visible}
  .rail-close{display:inline-grid}
  .burger{display:block}
  .search{display:none;order:10;flex-basis:100%;width:auto}
  .top.search-open .search{display:flex}
  .search-toggle{display:inline-grid}
  .top{flex-wrap:wrap;gap:8px}
  .top .lang-switch .btn{padding-inline:6px}
  .top>.grow{min-width:min(160px,40vw)}
  .top h1{font-size:17px;overflow-wrap:anywhere}
  .top,.content{padding-left:16px;padding-right:16px}
  .g2,.g3,.form,.form.three{grid-template-columns:1fr}
}
@media (max-width:480px){.g4{grid-template-columns:1fr 1fr}.kpi .v{font-size:21px}.content{padding-top:16px}.card-h,.card-b{padding-inline:12px}.top-actions{width:100%}.top-actions .btn{flex:1 1 auto;justify-content:center}}
/* Wide tables never push the page sideways on phones: they scroll inside their card. */
.tbl{max-width:100%;-webkit-overflow-scrolling:touch}
@media (max-width:600px){.form,.form.three{grid-template-columns:1fr}.settings .snav{gap:4px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ==========================================================================
   Public website (customer site at the root: _PortalLayout, Views/Site/*).
   Added for the website module; scoped to body.site and .site-* / .wa-* / .cc-* classes.
   Uses logical properties (inline-start/end) so Arabic (dir=rtl) mirrors without extra rules.
   ========================================================================== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;background:var(--primary);color:var(--on-primary);padding:8px 14px;border-radius:8px;font-weight:700;text-decoration:none}
.skip-link:focus{top:12px}
body.site{display:flex;flex-direction:column;min-height:100%}
body.site>main{flex:1;outline:none}
body.site h1,body.site h2,body.site h3{line-height:1.25}
body.site a:focus-visible,body.site summary:focus-visible,body.site button:focus-visible{outline:2px solid var(--focus,var(--primary));outline-offset:2px}

/* header & navigation */
.site-top{position:sticky;top:0;z-index:40;flex-wrap:wrap}
.site-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.site-nav a[aria-current=page]{color:#fff;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.site-burger{display:none;background:none;border:1px solid var(--sidebar-3);color:var(--sidebar-fg);border-radius:8px;padding:6px;cursor:pointer;line-height:0}
@media (max-width:900px){
  .site-burger{display:block}
  .site-nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;padding-top:10px}
  .site-nav.open{display:flex}
  .site-nav>a,.site-nav>form{padding:10px 4px;border-top:1px solid var(--sidebar-3)}
  .site-nav>a.btn{justify-content:center;margin-top:8px;border-top:0}
  .site-nav form .btn{width:100%;justify-content:center}
}

/* layout */
body.site .portal-wrap{width:100%;max-width:1160px;gap:28px;padding-bottom:48px}
@media (max-width:600px){body.site .portal-wrap{padding:16px 16px 40px}.portal-top{padding:12px 16px}}
.site-page-h h1{margin:0 0 4px;font-size:clamp(24px,4vw,32px)}
.site-page-h p{margin:0;font-size:14px}
.site-crumb{font-size:12.5px;color:var(--mute);display:flex;gap:6px;flex-wrap:wrap;margin-bottom:-16px}
.site-crumb a{color:var(--mute)}
.site-sec{display:flex;flex-direction:column;gap:14px}
.site-sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.site-sec-h h2{margin:0;font-size:clamp(20px,3vw,24px)}
.site-sec-h p{margin:2px 0 0}
.site-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.site-split{display:grid;gap:20px;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);align-items:start}
@media (max-width:820px){.site-split{grid-template-columns:1fr}}
.site-mini-h{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:0 0 4px}
html[dir=rtl] .site-mini-h{letter-spacing:0;text-transform:none}

/* hero */
.site-hero{position:relative;border-radius:calc(var(--r) + 6px);overflow:hidden;color:#fff;background:var(--sidebar);
  background-image:linear-gradient(135deg,var(--sidebar) 0%,var(--sidebar-2) 55%,var(--primary) 160%)}
.site-hero.has-img{background-image:linear-gradient(180deg,rgba(4,10,20,.55),rgba(4,10,20,.78)),var(--hero-img);background-size:cover;background-position:center}
.site-hero-in{padding:clamp(28px,6vw,64px) clamp(18px,4vw,40px) clamp(22px,4vw,36px);display:flex;flex-direction:column;gap:12px;max-width:980px}
.site-hero h1{margin:0;font-size:clamp(28px,5vw,46px);letter-spacing:-.02em;max-width:22ch;color:#fff}
html[dir=rtl] .site-hero h1{letter-spacing:0}
.site-hero-sub{margin:0 0 10px;font-size:clamp(15px,2vw,17px);opacity:.9;max-width:60ch}
.site-search{box-shadow:0 18px 40px rgba(0,0,0,.25)}

/* fleet cards */
.site-car{display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;transition:border-color .15s,transform .15s}
.site-car:hover{border-color:var(--primary);transform:translateY(-2px)}
.site-car-img{aspect-ratio:16/9;background:var(--surface-2);display:grid;place-items:center;color:var(--mute);overflow:hidden}
.site-car-img img{width:100%;height:100%;object-fit:cover}
.site-car-img svg{width:45%;opacity:.5}
.site-car-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.site-car-b h3{margin:2px 0;font-size:16px}
.site-from{margin-top:auto;padding-top:8px;display:flex;align-items:baseline;gap:4px}
.site-from b{font-family:"Sora",var(--f-body);font-size:20px}
.site-car-cta{color:var(--primary-ink);font-weight:700;font-size:13px;margin-top:6px}
html[dir=rtl] .site-arrow{display:inline-block;transform:scaleX(-1)}

/* offers */
.site-offer{display:flex;flex-direction:column;gap:8px;border-style:dashed;border-color:var(--primary)}
.site-code{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:15px;background:var(--primary-soft);color:var(--primary-ink);padding:3px 10px;border-radius:6px;letter-spacing:.06em}
.site-offer-amt{font-family:"Sora",var(--f-body);font-size:18px}

/* why us */
.site-why{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.site-why h3{margin:6px 0 4px;font-size:16px}
.site-why p{margin:0;font-size:13.5px}
.site-why-n{font-family:"Sora",var(--f-body);font-weight:700;color:var(--primary-ink);font-size:13px}

/* reviews */
.site-rating{display:flex;align-items:center;gap:8px;margin:4px 0 0;flex-wrap:wrap}
.site-rating b{font-size:18px}
.site-stars{color:var(--star,#B7791F);letter-spacing:2px;font-size:16px;direction:ltr;unicode-bidi:isolate}
.site-review{display:flex;flex-direction:column;gap:8px}
.site-review-text{margin:0;white-space:pre-line}
.site-reply{border-inline-start:3px solid var(--primary);padding-inline-start:10px;margin-top:4px}
.site-reply p{margin:2px 0 0;font-size:13.5px;white-space:pre-line}

/* branches */
.site-strip{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.site-strip-i{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit}
.site-strip-i:hover{border-color:var(--primary)}
.site-branch{overflow:hidden;display:flex;flex-direction:column}
.site-branch-img{width:100%;aspect-ratio:16/9;object-fit:cover}
.site-branch-name{margin:0;font-size:18px}
.site-branch-name a{color:inherit;text-decoration:none}
.site-branch-name a:hover{text-decoration:underline}
.site-branch-hero{width:100%;border-radius:var(--r);aspect-ratio:21/9;object-fit:cover}
.site-map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:var(--surface-2)}
.site-map iframe{width:100%;height:100%;border:0;display:block}
.site-contact-br{display:flex;justify-content:space-between;gap:10px;padding:4px 0}

/* FAQ */
.site-faq details{border-bottom:1px solid var(--line)}
.site-faq details:last-child{border-bottom:0}
.site-faq summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:600;display:flex;justify-content:space-between;gap:12px}
.site-faq summary::-webkit-details-marker{display:none}
.site-faq summary::after{content:"+";font-size:20px;line-height:1;color:var(--primary-ink);flex:none}
.site-faq details[open] summary::after{content:"−"}
.site-faq-a{padding:0 16px 14px;color:var(--mute)}
.site-faq-a p{margin:0 0 8px}
.site-faq-cat{margin:6px 0 0;font-size:18px}

/* call to action */
.site-cta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--primary-soft);border-radius:var(--r);padding:22px 24px}
.site-cta h2{margin:0;font-size:20px}
.site-cta p{margin:4px 0 0;color:var(--mute)}

/* content pages (safe Markdown) */
.site-prose{max-width:820px;font-size:15px;line-height:1.7;padding:clamp(18px,4vw,36px)}
.site-prose h1{font-size:clamp(24px,4vw,32px);margin:0 0 14px}
.site-prose h2{font-size:20px;margin:28px 0 8px}
.site-prose h3{font-size:17px;margin:22px 0 6px}
.site-prose p{margin:0 0 12px}
.site-prose ul,.site-prose ol{margin:0 0 12px;padding-inline-start:22px}
.site-prose li{margin:3px 0}
.site-prose hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.site-updated{margin-top:24px!important}

/* contact form */
.hp-field{position:absolute!important;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--bad)}

/* footer */
.site-footer{background:var(--sidebar);color:var(--sidebar-fg);margin-top:auto;font-size:13.5px}
.site-footer a,.site-linkbtn{color:var(--sidebar-fg);text-decoration:none}
.site-footer a:hover,.site-linkbtn:hover{color:#fff;text-decoration:underline}
.site-footer-in{max-width:1160px;margin:0 auto;padding:32px 24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.site-foot-col{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.site-foot-h{color:#fff;font-size:14px;margin-bottom:6px}
.site-social{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.site-linkbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:start}
.site-nav .site-linkbtn{font-weight:600;border:1px solid var(--sidebar-3);border-radius:8px;padding:5px 10px;line-height:1.3}
.site-nav .site-linkbtn:hover{background:var(--sidebar-2);text-decoration:none;color:#fff}
.site-nav .site-linkbtn:focus-visible,.site-footer .site-linkbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.site-nav .theme-toggle{color:var(--sidebar-fg);border-color:var(--sidebar-3)}
@media (max-width:900px){.site-nav .site-linkbtn{width:100%;text-align:center;padding:9px 10px}}
.site-copy{display:block;padding-top:14px;padding-bottom:calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--sidebar-3);color:var(--sidebar-mute);font-size:12.5px}
@media (max-width:600px){.site-footer-in{padding:24px 16px}}

/* floating WhatsApp button (bottom-end corner; moves to the left in Arabic) */
.wa-float{position:fixed;inset-inline-end:18px;bottom:calc(18px + env(safe-area-inset-bottom) + var(--dock-h,0px));z-index:60;display:inline-flex;align-items:center;gap:8px;background:#0B7A3D;color:#fff;
  padding:11px 16px;border-radius:999px;font-weight:700;text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.wa-float:hover{background:#086331}
.wa-float:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #0B7A3D}
@media (max-width:600px){.wa-float{padding:12px}.wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}}
body.site .toast{bottom:calc(84px + var(--dock-h,0px))}

/* cookie banner & dialog */
.cc-banner{position:fixed;inset-inline:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:80;max-width:760px;margin-inline:auto;background:var(--surface);color:var(--fg);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 50px rgba(0,0,0,.25);padding:16px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cc-text{flex:1 1 320px}
.cc-text p{margin:4px 0 0;font-size:13px;color:var(--mute)}
.cc-actions{display:flex;gap:8px;flex-wrap:wrap}
.cc-dialog{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--fg);padding:22px;width:min(460px,calc(100% - 32px))}
.cc-dialog::backdrop{background:rgba(4,10,20,.55)}
.cc-opt{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.cc-opt input{margin-top:4px}
.cc-opt>span{display:flex;flex-direction:column;gap:2px}
@media (max-width:600px){.cc-actions{width:100%}.cc-actions .btn{flex:1;justify-content:center}}

@media (prefers-reduced-motion:reduce){.site-car:hover{transform:none}}
@media print{.site-top,.site-footer,.wa-float,.cc-banner{display:none!important}}
/* ---------- end of public website ---------- */

/* ---------- shared UI helpers (accessibility fixes) ---------- */
/* Bottom dock: the cookie banner and the install banner stack instead of overlapping (site.js sets the offsets). */
.pwa-install{transition:bottom .15s}
/* Arabic labels never get letter-spacing or forced upper case. */
html[dir=rtl] th,html[dir=rtl] .navgrp,html[dir=rtl] .tag{letter-spacing:0;text-transform:none}
/* Photo pickers: chosen files listed under the input. */
.file-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;font-size:12px;color:var(--mute)}
.file-list figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px;width:84px}
.file-list img{width:84px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.file-list figcaption{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Damage mark keyboard form */
.dmg-add{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:10px}
.dmg-add label.f{flex:1 1 140px}
/* Typed signature fallback */
.sig-typed{font-family:"Segoe Script","Brush Script MT",cursive;font-size:26px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .theme-toggle .ico-light{display:none}:root:not([data-theme=light]) .theme-toggle .ico-dark{display:inline}}
.site-nav .theme-toggle{border:1px solid var(--sidebar-3);color:var(--sidebar-fg)}
.site-nav .theme-toggle:hover{background:var(--sidebar-2)}
@media (max-width:900px){.site-nav .theme-toggle{justify-self:start;width:auto;margin:6px 0}}