/* =====================================================================
   ELREWINY MOTORS — Design System v5 (shared by rewiny.com and /app)
   Tokens · scopes (dark / light) · type roles · primitives.
   Page layouts live in style.css (website) and app.css (app).
   ===================================================================== */
[hidden]{display:none!important}
:root{
  /* ---- type families ----
     Arabic UI & body: IBM Plex Sans Arabic · English UI, Latin data & vehicle names: Inter.
     The ELREWINY MOTORS wordmark is artwork (SVG) and keeps its own drawn letters — never set in a UI font.
     Weights: 400 body · 500 navigation / UI labels / buttons (AR) · 600 sub-headings, buttons (EN) · 700 major Arabic headings only. */
  --f-ar:'IBM Plex Sans Arabic','Segoe UI',Tahoma,system-ui,sans-serif;
  --f-en:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-brand:var(--f-en);
  --f-ui:var(--f-ar);
  /* ---- restrained responsive type scale (hierarchy from weight, spacing and colour — not size alone) ---- */
  --t-display:clamp(25px,2.4vw,38px); --t-h1:clamp(23px,2.1vw,32px); --t-h2:clamp(20px,1.75vw,27px); --t-h3:17px;
  --t-lead:16px; --t-body:16px; --t-sm:14px; --t-nav:14px; --t-label:13px; --t-btn:15px; --t-cap:12px;
  /* ---- 4-pt spacing ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px; --s11:96px;
  --gutter:16px; --wrap:1240px; --header:72px;
  /* ---- shape ---- */
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-pill:999px;
  /* ---- elevation (light surfaces) ---- */
  --e-1:0 1px 2px rgba(26,28,32,.05),0 6px 18px rgba(26,28,32,.06); --e-2:0 2px 6px rgba(26,28,32,.06),0 20px 44px rgba(26,28,32,.12);
  /* ---- motion ---- */
  --ease:cubic-bezier(.2,.7,.2,1); --d1:.15s; --d2:.28s; --d3:.5s;
  /* ---- brand palette (roles below map onto these) ----
     PRIMARY  Deep Navy #0F2D5B — trust, primary actions, the brand anchor (header, footer, key buttons)
     SECONDARY Warm Ivory #F6F3EE / Soft Sand #ECE4D6 — page surfaces, section rhythm
     TEXT     Charcoal #1A1C20 / #4A4D54 / #6B6E75
     ACCENT   Muted Champagne #C9A774 (ink #8E6A3A on light) — kickers, fine rules, active marks only
     NIGHT    Midnight #0B1A30 — the dark brand surface (header, footer, app), a navy black, never pure black */
  --navy:#0F2D5B; --navy-2:#1A3F78; --navy-deep:#0D2242; --midnight:#0B1A30; --midnight-2:#11233F;
  --ivory:#F6F3EE; --sand:#ECE4D6; --sand-2:#E2D8C6; --charcoal:#1A1C20;
  --champagne:#C9A774; --champagne-ink:#8E6A3A; --paper:#F6F3EE; --paper-2:#EEE8DE; --graphite:#0B1A30;
  --ok:#2E7D5B; --warn:#B7791F; --err:#B9382F; --info:#2D6CB0;
}
@media (min-width:375px){:root{--gutter:20px}}
@media (min-width:768px){:root{--gutter:32px}}
@media (min-width:1024px){:root{--header:92px}}
@media (min-width:1200px){:root{--gutter:40px}}
@media (min-width:1600px){:root{--wrap:1360px}}
@media (max-width:599px){:root{--t-body:15px;--t-lead:15px;--t-btn:15px}}
html[lang=en]{--f-ui:var(--f-en)}

/* ---- surface scopes: every component reads these role variables ---- */
:root,.dark{ /* midnight navy (night surfaces: header, footer, mobile bar, app) */
  --bg:#0B1A30; --bg-2:#0F2039; --surface:#132642; --surface-2:#1A2F4F; --surface-3:#223A5D;
  --line:rgba(226,232,244,.10); --line-2:rgba(226,232,244,.16); --line-3:rgba(226,232,244,.28);
  --tx:#F6F3EE; --tx-2:#C8CFDB; --tx-3:#9AA6BA; --on-tx:#0B1A30;
  --cta:#F6F3EE; --cta-tx:#0B1A30; --cta-hover:#FFFFFF;
  --accent:#D9BE90; --accent-2:#E6D1AC; --accent-bg:rgba(201,167,116,.14); --warm:#D9BE90;
  --focus:#E6D1AC;
  --sh-1:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(3,10,24,.30); --sh-2:0 24px 60px rgba(3,10,24,.45);
  --media-bg:#D2D2D2;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F6F3EE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:dark; color:var(--tx);
}
.navy{ /* deep navy: finance & trust moments */
  --bg:#0D2242; --bg-2:#11294D; --surface:#132D55; --surface-2:#1A3863; --surface-3:#234574;
  --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.18); --line-3:rgba(255,255,255,.3);
  --tx:#F5F6FA; --tx-2:#C9D2E1; --tx-3:#9BAAC2; --on-tx:#0D2242;
  --cta:#F5F3EF; --cta-tx:#0D2242; --cta-hover:#FFFFFF;
  --accent:#DCC395; --accent-2:#E9D6B3; --accent-bg:rgba(201,167,116,.16); --warm:#DCC395; --focus:#E9D6B3;
  --sh-1:0 10px 30px rgba(3,10,24,.28); --sh-2:0 24px 60px rgba(3,10,24,.45);
  color-scheme:dark; color:var(--tx);
}
.light{ /* warm ivory */
  --bg:#F6F3EE; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#FAF8F4; --surface-3:#EFE9DF;
  --line:rgba(46,36,22,.10); --line-2:rgba(46,36,22,.16); --line-3:rgba(46,36,22,.28);
  --tx:#1A1C20; --tx-2:#4A4D54; --tx-3:#6B6E75; --on-tx:#FFFFFF;
  --cta:#0F2D5B; --cta-tx:#FFFFFF; --cta-hover:#1A3F78;
  --accent:#0F2D5B; --accent-2:#2A5A9E; --accent-bg:rgba(15,45,91,.07); --warm:#8E6A3A;
  --focus:#2A5A9E;
  --sh-1:var(--e-1); --sh-2:var(--e-2);
  --media-bg:#D2D2D2;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2316181C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:light; color:var(--tx);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--f-ui);font-size:var(--t-body);line-height:1.75;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
html[lang=en] body{line-height:1.6}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button,a,label,select,summary{touch-action:manipulation}
a{color:var(--accent)}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.3;text-wrap:balance}
p{text-wrap:pretty}
bdi{unicode-bidi:isolate}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.latin{font-family:var(--f-en);direction:ltr;unicode-bidi:isolate}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- type roles ---------- */
.t-display{font-size:var(--t-display);line-height:1.35;font-weight:700;letter-spacing:0}
html[lang=en] .t-display{font-weight:600;letter-spacing:-.022em;line-height:1.15}
.t-h1{font-size:var(--t-h1);line-height:1.4;font-weight:700}
.t-h2{font-size:var(--t-h2);line-height:1.4;font-weight:600}
html[lang=en] .t-h1,html[lang=en] .t-h2{font-weight:600;letter-spacing:-.016em;line-height:1.22}
.t-h3{font-size:var(--t-h3);line-height:1.45;font-weight:600}
.t-lead{font-size:var(--t-lead);line-height:1.8;font-weight:400;color:var(--tx-2);max-width:60ch}
html[lang=en] .t-lead{line-height:1.6}
.t-kicker{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:var(--t-label);font-weight:500;color:var(--warm)}
.t-kicker::before{content:"";width:18px;height:1px;background:currentColor;opacity:.8}
html[lang=en] .t-kicker{font:600 11px/1.5 var(--f-en);letter-spacing:.14em;text-transform:uppercase}
.t-label{font-size:var(--t-label);font-weight:500;color:var(--tx-2)}
.t-cap{font-size:var(--t-cap);line-height:1.5;color:var(--tx-3)}
.t-model{font:600 16px/1.2 var(--f-brand);letter-spacing:.035em;text-transform:uppercase;direction:ltr;unicode-bidi:isolate}
.t-trim{font:500 12px/1.2 var(--f-brand);letter-spacing:.01em;direction:ltr;unicode-bidi:isolate}
.t-price{font-size:15px;font-weight:500;line-height:1.3}
.t-spec-v{font-size:14px;font-weight:500;line-height:1.35;color:var(--tx)}
.t-spec-l{font-size:12px;color:var(--tx-3)}
.t-muted{color:var(--tx-2)}

/* ---------- icons (one family: 24 grid · 1.6 stroke · round caps/joins) ---------- */
.i{width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.i-sm{width:18px;height:18px} .i-lg{width:28px;height:28px}
[dir=rtl] .i-flip{transform:scaleX(-1)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s6);border-radius:var(--r-sm);border:1px solid transparent;
  font:600 var(--t-btn)/1 var(--f-ui);letter-spacing:0;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--d2),border-color var(--d2),color var(--d2),transform var(--d1) var(--ease),box-shadow var(--d2)}
.btn:active{transform:scale(.97)}
html[lang=ar] .btn{font-weight:500}
html[lang=en] .btn{letter-spacing:-.005em}
.btn .i{width:20px;height:20px}
.btn-p{background:var(--cta);color:var(--cta-tx)} .btn-p:hover{background:var(--cta-hover);box-shadow:0 8px 22px rgba(15,45,91,.20)}
.btn-a{background:var(--navy);color:#fff} .btn-a:hover{background:var(--navy-2)}
.btn-w{background:#1F8F5F;color:#fff} .btn-w:hover{background:#18784F}
.btn-s{background:transparent;color:var(--tx);border-color:var(--line-3)} .btn-s:hover{border-color:var(--tx)}
.btn-q{background:var(--surface-2);color:var(--tx);border-color:var(--line)} .btn-q:hover{background:var(--surface-3)}
.btn-l{background:transparent;color:var(--accent);min-height:44px;padding:0 var(--s1)}
.btn-l:hover{text-decoration:underline;text-underline-offset:4px}
.btn-sm{min-height:42px;padding:0 var(--s4);font-size:14px;border-radius:var(--r-xs)}
.btn-lg{min-height:56px;padding:0 var(--s7);font-size:16px}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none}
.btn .spin{display:none} .btn.busy .spin{display:inline-block} .btn.busy .lbl{opacity:.7}
.icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill);border:1px solid var(--line-2);background:transparent;color:var(--tx);cursor:pointer;text-decoration:none;flex-shrink:0;transition:background var(--d2),border-color var(--d2),transform var(--d1)}
.icon-btn:hover{background:var(--surface-2)} .icon-btn:active{transform:scale(.93)}
.icon-btn .i{width:22px;height:22px}

/* ---------- chips, filters, segmented ---------- */
.chip{display:inline-flex;align-items:center;gap:var(--s2);flex-shrink:0;min-height:40px;padding:0 var(--s4);border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);color:var(--tx-2);
  font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all var(--d2) var(--ease)}
.chip:hover{color:var(--tx);border-color:var(--line-3)}
.chip[aria-pressed=true],.chip.on{background:var(--cta);border-color:var(--cta);color:var(--cta-tx)}
.chip.on2{background:var(--accent-bg);border-color:var(--accent-2);color:var(--tx)}
.chip small{font:500 11px var(--f-en);opacity:.75}
.chip.g{font:500 13px var(--f-brand);letter-spacing:.01em}
.rail{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s2)}
.seg label,.seg button{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s3);border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);font-size:14px;font-weight:500;color:var(--tx-2);cursor:pointer;transition:all var(--d2)}
.seg label:has(input:checked),.seg .on{background:var(--cta);border-color:var(--cta);color:var(--cta-tx)}
.seg label:has(input:focus-visible){outline:2px solid var(--accent-2);outline-offset:2px}
.seg .i{width:20px;height:20px}

/* ---------- badges & status ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:500;line-height:1;background:var(--surface-2);color:var(--tx-2);border:1px solid var(--line)}
.badge .i{width:14px;height:14px}
.badge-accent{background:var(--accent-bg);color:var(--accent);border-color:transparent}
.badge-solid{background:var(--cta);color:var(--cta-tx);border-color:transparent}
.badge-warm{background:rgba(201,167,116,.16);color:var(--warm);border-color:transparent}
.badge-ok{background:rgba(46,139,87,.12);color:#2E8B57;border-color:transparent}
.dark .badge-ok,:root .badge-ok{color:#8FD0AA}
.light .badge-ok{color:#1F6E43}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.card-lift{transition:transform var(--d2) var(--ease),box-shadow var(--d2),border-color var(--d2)}
@media (hover:hover){.card-lift:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}}

/* ---------- vehicle media: real photography (studio-framed 16:9, same scale + baseline for every model) ----------
   /assets/cars/<id>.webp (1600w) + <id>-800.webp. Missing file → quiet name placeholder, never a drawing. */
.media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:inherit;background:#D2D2D2}
.media::before{content:attr(data-name);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 clamp(13px,2vw,18px)/1 var(--f-brand);letter-spacing:.18em;text-transform:uppercase;color:#6B6E75;opacity:.45;transition:opacity var(--d3)}
.media.has-photo::before{opacity:0}
.media .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:2;transition:opacity var(--d3) var(--ease),transform .7s var(--ease);transform:scale(.985)}
.media.has-photo .photo{opacity:1;transform:none}
.media .tagl,.media .tagr{position:absolute;top:12px;z-index:3}
.media .tagl{inset-inline-start:12px}
/* .tagr is dir=ltr (latin) so logical insets would flip — anchor physically per page direction */
[dir=rtl] .media .tagr{left:12px} [dir=ltr] .media .tagr{right:12px}
@media (hover:hover){.card-lift:hover .media.has-photo .photo{transform:scale(1.035)}}

/* ---------- forms ---------- */
.fld{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.fld>span,.fld>legend,.fld-l{font-size:var(--t-label);font-weight:500;color:var(--tx-2)}
.fld .opt{font-weight:400;color:var(--tx-3)}
.inp{width:100%;min-height:52px;padding:0 var(--s4);border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--tx);font-size:16px;transition:border-color var(--d2),box-shadow var(--d2)}
.inp::placeholder{color:var(--tx-3);opacity:.85}
textarea.inp{padding:var(--s3) var(--s4);line-height:1.6;resize:vertical;min-height:96px}
.inp:hover{border-color:var(--line-3)}
.inp:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 4px var(--accent-bg)}
.inp[aria-invalid=true]{border-color:var(--err);box-shadow:0 0 0 4px rgba(185,56,47,.12)}
.fld-err{display:none;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--err)}
.fld-err .i{width:16px;height:16px}
.fld.invalid .fld-err{display:flex}
.dark .fld-err,.navy .fld-err,:root .fld-err{color:#F19A95}
.light .fld-err{color:var(--err)}
select.inp{appearance:none;-webkit-appearance:none;padding-inline-end:44px;background-image:var(--select-arrow);background-repeat:no-repeat}
[dir=rtl] select.inp{background-position:left 16px center} [dir=ltr] select.inp{background-position:right 16px center}
select.inp:disabled{opacity:.55}
.light select.inp option{background:#fff;color:#141416}
.dark select.inp option,:root select.inp option{background:#132642;color:#F6F3EE}
.light select.inp option{background:#fff;color:#141416}

/* ---------- notices, empty, error, loading ---------- */
.notice{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);font-size:14px;color:var(--tx-2)}
.notice .i{color:var(--accent);margin-top:2px}
.notice-err{background:rgba(194,65,59,.08);border-color:rgba(194,65,59,.28)}
.notice-err .i{color:var(--err)}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s9) var(--s5);text-align:center;color:var(--tx-2)}
.empty-state .i{width:40px;height:40px;color:var(--tx-3)}
.skel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--r-xs)}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(127,127,127,.12),transparent);animation:skel 1.4s infinite}
@keyframes skel{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- modal / sheet ---------- */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.modal-bg{position:absolute;inset:0;background:rgba(6,14,27,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade var(--d2) both}
.modal-p{position:relative;width:min(640px,100%);max-height:92dvh;overflow:auto;overscroll-behavior:contain;background:var(--bg-2);color:var(--tx);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-2);animation:rise var(--d2) var(--ease) both}
.modal-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s5);background:var(--bg-2);border-bottom:1px solid var(--line)}
.modal-b{padding:var(--s5)}
@media (min-width:768px){.modal{align-items:center;padding:var(--s6)}.modal-p{border-radius:var(--r-lg)}}

/* ---------- toast ---------- */
.toast{position:fixed;inset-inline:0;margin-inline:auto;width:max-content;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:95;max-width:min(92vw,440px);padding:12px 18px;border-radius:var(--r-pill);background:#0B1A30;color:#F6F3EE;font-size:14px;font-weight:500;box-shadow:0 12px 40px rgba(0,0,0,.35);animation:rise var(--d2) var(--ease) both;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1024px){.toast{bottom:32px}}