/* CrownDrive V2 — full visual language ported from the original CrownDrive monolith.
   Heebo · steel-blue #3F6B8E · dark #1B222B · layered atmospheric background. */
:root{color-scheme:light;
  --bg:#EFF2F6; --bg2:#E6EAEF; --bg3:#DAE0E7; --bg-soft:#F6F8FB; --card:#FFFFFF;
  --dark:#1B222B; --dark-2:#232C37;
  --brand:#3F6B8E; --brand-l:#557FA1; --brand-d:#31567A;
  --gold:#3F6B8E; --gold-l:#557FA1; --gold-d:#31567A;
  --text:#1D1D1F; --muted:#5E5F66; --muted-2:#A1A1A6;
  --line:rgba(0,0,0,.12); --line-2:rgba(0,0,0,.2); --hair:rgba(0,0,0,.08);
  --ok:#1C7C4F; --ok-bg:rgba(28,124,79,.08);
  --danger:#D70015; --danger-bg:rgba(215,0,21,.06);
  --warn:#A05A00; --warn-bg:rgba(160,90,0,.08);
  --navy:#1B222B;
  --radius:16px;
  --shadow:0 24px 60px rgba(0,0,0,.1);
  --accent:#E9A93D; --accent-soft:#FBF3E1;
  /* --accent is a BACKGROUND colour: badges and gradients put dark #2A1F08 on it, which reads fine.
     As a FOREGROUND on a light surface it measures 2.06:1 — below the 3:1 that WCAG 1.4.11 requires of
     graphical objects like ★/☆. --star is the same hue darkened to 4.12:1 on white / 3.41:1 on the soft
     panel, for the three rules that paint stars as text. */
  --star:#A97210;
  --surface:#FFFFFF;
  --ease:cubic-bezier(.22,.9,.26,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;min-height:100%;max-width:100%;color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Heebo','Noto Sans Hebrew',Arial,sans-serif;font-weight:400;line-height:1.7}
body{direction:rtl;overflow-x:hidden;background:var(--bg)}
/* ---------- App-like polish: tap feedback, momentum scroll, route transition ---------- */
html{-webkit-text-size-adjust:100%}
.car,.role-card,.chat-item,.btn,.dark-pill,.gold-pill,.tab-item,.rental-row{-webkit-tap-highlight-color:transparent}
.role-card,.chat-item,.rental-row{transition:transform .18s var(--ease),background .15s,box-shadow .2s}
.car:active,.role-card:active,.chat-item:active,.rental-row:active{transform:scale(.985)}
.chat-msgs,.filter-bar,.table-wrap,.gallery-thumbs{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@keyframes routeEnter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
#app.app-enter{animation:routeEnter .26s var(--ease)}
@media(prefers-reduced-motion:reduce){#app.app-enter{animation:none}}
/* Fixed atmospheric backdrop as a layer (background-attachment:fixed is broken on iOS Safari). */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(900px 520px at 50% 65%, rgba(255,255,255,.78), transparent 68%),
  radial-gradient(700px 380px at 18% 90%, rgba(63,107,142,.08), transparent 70%),
  radial-gradient(820px 460px at 86% 20%, rgba(159,182,201,.12), transparent 68%),
  linear-gradient(115deg, transparent 0 45%, rgba(63,107,142,.045) 45.4%, transparent 46.2% 100%)}
button,input,select,textarea{font:inherit}
/* iOS Safari zooms the whole page when a focused field is smaller than 16px — force 16px on phones/tablets. */
@media (max-width:820px){ input,select,textarea{font-size:16px} }
button{touch-action:manipulation;cursor:pointer}
h1,h2,h3{font-weight:800;letter-spacing:-.022em;line-height:1.12}
:focus-visible{outline:1.5px solid var(--brand);outline-offset:3px}
/* #app is focused programmatically after each route change — never draw a frame around the page. */
main:focus,main:focus-visible{outline:none}
::selection{background:var(--brand);color:#fff}
.kicker,.eyebrow{display:block;font-size:.85rem;font-weight:500;letter-spacing:.14em;color:#8CA3B8;text-transform:uppercase;margin:0}
.mut{color:var(--muted)}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:max(14px,env(safe-area-inset-top)) 5vw 14px;background:rgba(23,30,39,.78);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 10px 30px rgba(10,14,19,.3);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:800;letter-spacing:.06em;text-decoration:none}
.brand img{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:3px}
.brand span{font-size:1.18rem}
.topbar nav{display:flex;gap:6px;flex-wrap:wrap}
.nav-btn{border:0;border-radius:10px;padding:10px 16px;background:transparent;color:#c9c9c9;font-weight:500;letter-spacing:.03em;
  transition:color .2s,background .2s,transform .18s var(--ease)}
.nav-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-btn.active{color:#fff;background:rgba(255,255,255,.12)}
.nav-btn.primary{background:var(--brand);color:#fff}
.nav-btn.primary:hover{background:var(--brand-l)}

/* ---------- buttons ---------- */
.btn{border:1px solid transparent;border-radius:10px;padding:12px 24px;font-weight:600;font-size:.92rem;
  transition:transform .18s var(--ease),background .2s,box-shadow .25s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.965)}
.btn.primary,.btn.gold{background:linear-gradient(180deg,#5A86AA,#3F6B8E);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 4px 12px rgba(63,107,142,.25)}
.btn.primary:hover,.btn.gold:hover{background:var(--brand-l);box-shadow:0 10px 26px rgba(63,107,142,.35)}
.btn.outline{background:var(--surface);border-color:var(--line-2);color:var(--text)}
.btn.outline:hover{border-color:var(--text)}
.btn.dark-out{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn.dark-out:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn.danger{background:var(--danger-bg);color:var(--danger);border-color:rgba(215,0,21,.28)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn.block{width:100%;margin-top:6px}
.soft-disabled{opacity:.5}

main{width:min(1200px,94vw);margin:0 auto 80px;outline:none}

/* ================= HERO (full-bleed dark, road scene, aurora) ================= */
.hero{position:relative;background:var(--dark);overflow:hidden;isolation:isolate;
  /* full-bleed of the main container (no 100vw — it overflows/zooms on iOS Safari) */
  margin-inline:-3vw;width:calc(100% + 6vw)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(1000px 500px at 80% -20%, rgba(120,155,185,.12), transparent 60%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px);
  background-size:28px 28px;
  mask-image:radial-gradient(720px 420px at 50% 30%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(720px 420px at 50% 30%,#000 30%,transparent 75%)}
.aur{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;opacity:.55}
.aur-1{width:560px;height:560px;background:radial-gradient(circle,rgba(96,138,172,.4),transparent 70%);top:-220px;inset-inline-start:-140px;animation:aurA 18s ease-in-out infinite alternate}
.aur-2{width:640px;height:640px;background:radial-gradient(circle,rgba(63,107,142,.32),transparent 70%);bottom:-320px;inset-inline-end:-180px;animation:aurB 22s ease-in-out infinite alternate}
.aur-3{width:420px;height:420px;background:radial-gradient(circle,rgba(159,182,201,.22),transparent 70%);top:30%;inset-inline-start:38%;animation:aurC 26s ease-in-out infinite alternate}
@keyframes aurA{to{transform:translate(90px,70px) scale(1.18)}}
@keyframes aurB{to{transform:translate(-80px,-60px) scale(1.12)}}
@keyframes aurC{to{transform:translate(-60px,50px) scale(1.25)}}
.blueprint{position:absolute;top:64px;inset-inline-start:50%;transform:translateX(50%);width:min(620px,86vw);z-index:0;color:#AFC4D6;opacity:.1;pointer-events:none}
.hero-in{position:relative;z-index:2;max-width:1120px;margin:auto;padding:84px 28px 200px;text-align:center}
.hero-in>*{animation:heroUp .8s var(--ease) both}
.hero-in>*:nth-child(2){animation-delay:.08s}
.hero-in>*:nth-child(3){animation-delay:.16s}
.hero-in>*:nth-child(4){animation-delay:.24s}
.hero-in>*:nth-child(5){animation-delay:.34s}
@keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero .kicker{margin-bottom:22px}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem);color:#fff;max-width:22ch;margin:0 auto}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,#9FB6C9 20%,#EFC66F 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy{max-width:680px;margin:14px auto 24px;color:rgba(255,255,255,.78);font-size:1.02rem}
.quick-search{position:relative;z-index:6;display:grid;grid-template-columns:1.6fr .75fr 1.6fr .75fr auto;gap:10px;align-items:end;
  background:rgba(10,20,30,.82);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:14px;
  max-width:980px;margin:0 auto;backdrop-filter:blur(14px)}
.quick-search label{display:grid;gap:6px;text-align:right;margin:0}
.quick-search label span{font-size:.74rem;font-weight:800;color:rgba(255,255,255,.78);letter-spacing:.04em}
.quick-search input,.quick-search select,.quick-search .date-btn{width:100%;height:56px;border:1px solid rgba(255,255,255,.16);border-radius:13px;padding:0 14px;background:var(--surface);color:#182631;font-size:1.05rem;font-weight:600}
.quick-search select{line-height:normal;text-align:center;text-align-last:center;font-size:1rem;padding:0 8px}
.quick-search .df-label{font-size:.74rem;font-weight:800;color:rgba(255,255,255,.78);letter-spacing:.04em;display:block;margin-bottom:6px;text-align:right}
.quick-search .btn{height:56px;white-space:nowrap;font-size:1.05rem;padding-block:0}
.hero-stats{display:flex;justify-content:center;gap:0;margin:44px auto 0;background:var(--surface);border-radius:18px;overflow:hidden;max-width:640px;box-shadow:0 22px 54px rgba(0,0,0,.26);position:relative;z-index:2}
.hstat{flex:1;padding:20px 10px;border-inline-start:1px solid var(--hair)}
.hstat:first-child{border:none}
.hstat b{font-weight:800;font-size:1.7rem;color:var(--text);display:block;font-variant-numeric:tabular-nums;line-height:1.2}
.hstat span{font-size:.76rem;color:var(--muted);letter-spacing:.02em;font-weight:500}
/* road scene */
.road{position:absolute;inset-inline:0;bottom:0;height:150px;z-index:1;pointer-events:none}
.asphalt{position:absolute;inset-inline:0;bottom:0;height:74px;background:linear-gradient(#232B35,#151B22);box-shadow:0 -1px 0 rgba(255,255,255,.06)}
.sil{position:absolute;fill:#0A0E13}
/* The near car was #4E86B4 — a saturated mid-blue that exists nowhere else in the palette, so it read
   as a flat sticker pasted on the hero rather than a car in a dark scene. Deepened into the same family
   as the far silhouette (#2B3542) but lighter, so the near/far depth still reads. */
.cars-near .sil{bottom:8px;width:168px;height:59px;fill:#3A5675;filter:drop-shadow(0 10px 8px rgba(0,0,0,.45))}
.cars-near .sil circle{fill:#0E1620}
.cars-far .sil{bottom:66px;width:96px;height:34px;fill:#2B3542;opacity:.55;filter:blur(.7px)}
.s1{animation:drive 24s linear infinite}
.s3{animation:drive 15s linear 3s infinite}
@keyframes drive{from{inset-inline-start:-220px}to{inset-inline-start:calc(100% + 60px)}}

/* ---------- status strip ---------- */
.strip{margin-inline:-3vw;width:calc(100% + 6vw);border-block:1px solid var(--hair);background:var(--bg2)}
.strip-in{max-width:1200px;margin:auto;padding:15px 28px;display:flex;justify-content:center;gap:44px;flex-wrap:wrap;font-size:.82rem;letter-spacing:.05em}
.strip .it{display:flex;gap:9px;align-items:center;color:var(--muted)}
.strip .it b{font-weight:800;font-size:1.05rem;color:var(--text);font-variant-numeric:tabular-nums}
.strip .dot{width:7px;height:7px;border-radius:50%}
.dot.ok{background:var(--ok)}.dot.no{background:var(--danger)}.dot.soon{background:var(--warn)}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.reveal>.steps-grid>*,.reveal>.trust-grid>*{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in>.steps-grid>*,.reveal.in>.trust-grid>*{opacity:1;transform:none}
.reveal.in>.steps-grid>*:nth-child(2),.reveal.in>.trust-grid>*:nth-child(2){transition-delay:.12s}
.reveal.in>.steps-grid>*:nth-child(3),.reveal.in>.trust-grid>*:nth-child(3){transition-delay:.22s}
.reveal.in>.trust-grid>*:nth-child(4){transition-delay:.32s}

/* ---------- cards (global) ---------- */
.card{background:var(--card);border:1px solid var(--hair);border-radius:18px;box-shadow:var(--shadow);position:relative}
.search-box{padding:26px;display:grid;gap:15px;margin-top:26px}
.search-box h2{margin:0 0 4px}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.field{display:grid;gap:7px;margin:0 0 4px}
.field label{font-weight:500;font-size:.8rem;letter-spacing:.06em;color:var(--text)}
.req{color:#D70015;font-weight:700;font-size:.95em;margin-inline-start:1px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:var(--surface);color:var(--text);
  transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 4px rgba(63,107,142,.13)}
.field input::placeholder{color:var(--muted-2)}
.field textarea{min-height:104px;resize:vertical}
.field small,.row small,.verification-row small{display:block;color:var(--muted);margin-top:4px;font-size:.78rem}
.check{display:flex;align-items:center;gap:11px;margin:14px 0;font-size:.9rem}
.check input{width:17px;height:17px;accent-color:var(--brand)}

/* ---------- sections & fleet ---------- */
.section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:44px 0 18px}
.section-head h1,.section-head h2{margin:0}
.sec-head{text-align:center;margin-bottom:30px}
.sec-head .eyebrow,.sec-head .kicker{color:var(--brand);margin-bottom:12px}
.sec-head h2{margin:6px 0 0;font-size:clamp(1.6rem,3.2vw,2.2rem);position:relative;display:inline-block;padding-bottom:14px}
.sec-head h2::after{content:"";position:absolute;bottom:0;inset-inline-start:50%;transform:translateX(50%);height:4px;width:0;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--accent));opacity:.75;transition:width .8s var(--ease) .2s}
.reveal.in .sec-head h2::after,.sec-head.in h2::after{width:64px}
.sec-head .sec-sub{color:var(--muted);margin:10px 0 0;font-weight:300}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;position:relative;z-index:1}
.see-all{display:flex;justify-content:center;margin-top:28px;position:relative;z-index:1}

/* premium fleet backdrop: watermark + framed gradient panel */
.fleet-zone{position:relative;isolation:isolate;padding:10px 0 6px}
.fleet-zone::after{content:"CROWN DRIVE";position:absolute;z-index:0;inset-inline:0;top:70px;text-align:center;
  font-weight:800;font-size:clamp(3rem,10vw,8.6rem);letter-spacing:.08em;color:#182432;opacity:.035;pointer-events:none;line-height:1;white-space:nowrap}
.fleet-zone::before{content:"";position:absolute;z-index:0;inset:26px -14px -6px;border-radius:34px;pointer-events:none;background:
  radial-gradient(circle at 18% 24%, rgba(63,107,142,.13), transparent 22%),
  radial-gradient(circle at 82% 72%, rgba(159,182,201,.16), transparent 26%),
  linear-gradient(135deg, transparent 0 46%, rgba(63,107,142,.07) 46.4%, transparent 47.2% 100%),
  repeating-linear-gradient(90deg, transparent 0 38px, rgba(49,86,122,.035) 39px, transparent 40px)}
.fleet-zone>*{position:relative;z-index:1}

/* ---------- car cards ---------- */
.car{overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s}
.car:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(0,0,0,.12)}
.car::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 62%);
  transform:translateX(-140%);transition:transform .9s var(--ease)}
.car:hover::after{transform:translateX(0)}
.car-photo{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath fill='%23B4BECB' d='M37 22l-2.6-6.5A3 3 0 0 0 31.6 14H16.4a3 3 0 0 0-2.8 1.9L11 22a3 3 0 0 0-2 2.8V32a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2h22v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-7.2A3 3 0 0 0 37 22zm-21.2-4.7a1 1 0 0 1 .9-.6h14.6a1 1 0 0 1 .9.6L34 22H14l1.8-4.7zM15 28a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm18 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E") center/56px no-repeat}
.car-photo img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.car-photo img.loaded{opacity:1}
.car:hover .car-photo img{transform:scale(1.04)}
.avail-badge{position:absolute;top:12px;inset-inline-start:12px;font-weight:700;font-size:.76rem;letter-spacing:.02em;padding:6px 15px;border-radius:99px;border:1px solid;backdrop-filter:blur(6px)}
.avail-badge.free{color:#fff;background:rgba(28,150,90,.85);border-color:rgba(150,220,180,.6)}
.avail-badge.busy{color:#fff;background:rgba(183,28,28,.88);border-color:rgba(255,160,150,.6)}
/* Availability pill + the auto-expiring "new" badge stack in the top corner. */
.car-badges{position:absolute;top:12px;inset-inline-start:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:2}
.car-badges .avail-badge{position:static}
.new-badge{background:linear-gradient(135deg,#E9C46A,#C99A2E);color:#2A1F08;font-weight:800;font-size:.76rem;padding:5px 13px;border-radius:99px;letter-spacing:.02em;box-shadow:0 4px 12px rgba(180,140,30,.35)}
.car-detail-head .new-badge{font-size:.78rem;padding:6px 14px}
.has-video{position:absolute;bottom:12px;inset-inline-end:12px;background:rgba(0,0,0,.55);color:#fff;font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:99px;letter-spacing:.02em}
.feat-badge{position:absolute;top:12px;inset-inline-end:12px;background:linear-gradient(135deg,#E9A93D,#B8862B);color:#2A1F08;font-weight:800;font-size:.72rem;padding:6px 13px;border-radius:99px;letter-spacing:.02em;box-shadow:0 6px 16px rgba(150,110,20,.4)}
.car.is-featured{box-shadow:0 0 0 2px #E9A93D,0 18px 40px rgba(20,26,33,.16)}
/* Loading skeleton for the cars grid (shown while the first snapshot arrives; hero is already visible). */
.car-sk{pointer-events:none}
.car-sk .car-photo.sk,.car-sk .sk-line,.car-sk .sk-btn{background:linear-gradient(100deg,#e8ecf1 28%,#f3f6f9 50%,#e8ecf1 72%);background-size:220% 100%;animation:sk-shimmer 1.4s ease-in-out infinite}
.car-sk .car-body{display:flex;flex-direction:column;gap:11px;padding:17px 18px}
.car-sk .sk-line{height:12px;border-radius:6px;display:block}
.car-sk .sk-lg{width:68%;height:17px}
.car-sk .sk-sm{width:44%}
.car-sk .sk-md{width:86%}
.car-sk .sk-btn{height:42px;border-radius:12px;margin-top:6px;display:block}
@keyframes sk-shimmer{from{background-position:220% 0}to{background-position:-220% 0}}
@media(prefers-reduced-motion:reduce){.car-sk .car-photo.sk,.car-sk .sk-line,.car-sk .sk-btn{animation:none}}
.car-manage{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.car-manage .btn{margin-top:0;flex:1 1 0;min-width:130px;background:none}
.car-manage .btn.gold{background:linear-gradient(135deg,#E9A93D,#C6902E);color:#2A1F08;border:none}
.car-manage .btn.gold:hover{filter:brightness(1.06)}
.car-manage .btn.outline{background:var(--surface);color:var(--brand-d);border:1px solid var(--line)}
.car-manage .btn.outline:hover{background:rgba(63,107,142,.06);border-color:var(--brand)}
/* `.car-manage .btn{background:none}` above strips every variant's fill, which is why .outline restores
   its own. Delete needs the same, or it renders as bare red text with no button surface. Sized narrower
   than its siblings: it is the destructive one, so it should not read as an equal-weight primary action. */
.car-manage .btn.danger{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(215,0,21,.28);flex:0 1 auto;min-width:0;padding-inline:14px}
.car-manage .btn.danger:hover{background:rgba(215,0,21,.12);border-color:rgba(215,0,21,.45)}
.car-body{padding:15px 18px 17px;display:flex;flex-direction:column;gap:8px;flex:1}
/* Clean/premium card: name + compact rating on one row */
.car-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.car-body h3{margin:0;font-size:1.12rem;line-height:1.28;letter-spacing:-.01em}
.car-rate{flex:0 0 auto;font-size:.9rem;color:var(--star);white-space:nowrap;display:inline-flex;align-items:baseline;gap:3px;margin-top:2px}
.car-rate b{color:var(--brand-d);font-weight:700}
.car-rate small{color:var(--muted);font-weight:600;font-size:.82em}
.car-specs{display:flex;flex-wrap:wrap;gap:6px;color:var(--muted);font-size:.8rem;font-weight:300;letter-spacing:.03em}
.car-specs span{white-space:nowrap}
/* Separator belongs to the item that follows it, so it wraps together with that item and can never be
   left stranded at the end of a line. */
.car-specs span + span::before{content:"· ";opacity:.75}
.rating{color:var(--star);letter-spacing:1px;font-size:.95rem}
.rating small{color:var(--muted);letter-spacing:0}
.car-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:12px;margin-top:auto}
/* Subtle "פרטים ←" affordance — the whole card is the link, so this replaces the heavy button */
.car-go{flex:0 0 auto;font-size:.82rem;font-weight:700;color:var(--brand);white-space:nowrap;transition:opacity .2s var(--ease)}
.car:hover .car-go{opacity:.68}
.car-clean:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.price{font-size:1.2rem;font-weight:800;color:var(--brand-d)}
.price-request{font-size:1rem;font-weight:700;color:var(--muted)}
.price-stack{display:grid;gap:2px}
.price-alt{color:var(--muted);font-weight:600;font-size:.74rem;letter-spacing:.02em}
.price small{font-size:.55em;font-weight:500;color:var(--muted);letter-spacing:.06em}
/* The price is what a renter decides on — it had exactly the same weight as the rating row below it.
   Now it leads: the figure is large and brand-coloured, the label stays quiet. */
.summary.price-row{padding-block:12px}
.summary.price-row > span{font-size:.82rem;color:var(--muted)}
.summary.price-row > b{font-size:1.5rem;font-weight:800;color:var(--brand-d);letter-spacing:-.01em}
@media(max-width:600px){ .summary.price-row > b{font-size:1.35rem} }
.rate-new{font-size:.8rem;font-weight:600;color:var(--muted)}
.owner-tag{font-size:.72rem;color:var(--muted);background:var(--bg2);border-radius:99px;padding:4px 12px;font-weight:500}
.car .btn{margin-top:auto;background:#232A33;color:#fff;border:none;border-radius:10px;padding:13px}
.car .btn:hover{background:#33404E;box-shadow:0 10px 24px rgba(20,26,33,.28)}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{background:var(--bg2);border-radius:99px;padding:4px 12px;font-size:.72rem;font-weight:500;color:var(--muted)}
.role-pill{background:rgba(255,255,255,.14);color:#fff;font-weight:600;border-radius:99px;padding:6px 14px;font-size:.8rem}
.empty{padding:44px 30px;text-align:center;color:var(--muted);background:var(--bg2);border-radius:18px}
.empty-state{text-align:center;padding:46px 26px;background:var(--bg2);border-radius:18px;display:flex;flex-direction:column;align-items:center;gap:5px}
.empty-state .empty-ic{width:56px;height:56px;display:grid;place-items:center;border-radius:16px;background:var(--surface);box-shadow:0 6px 18px rgba(20,28,40,.08);margin-bottom:8px}
.empty-state .empty-ic svg{width:27px;height:27px;stroke:var(--brand);fill:none}
.empty-state b{font-size:1.08rem;color:var(--text)}
.empty-state p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5;max-width:290px}
.empty-state .btn{margin-top:14px}
.grid > .empty-state{grid-column:1 / -1}

/* ---------- owner CTA — slim horizontal GOLD banner (sits at the top, under the hero) ---------- */
.owner-cta-rich{margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:14px 26px;flex-wrap:wrap;direction:rtl;text-align:right;
  background:linear-gradient(135deg,#2D2414,#735A22);color:#fff;border-radius:18px;padding:17px 26px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.owner-cta-copy{flex:0 1 auto}
.owner-cta-copy .eyebrow{color:#BFD4E6;margin-bottom:2px}
.owner-cta-copy h2{margin:0;color:#fff;font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.15}
.owner-cta-glow{position:absolute;inset:0;background:
  radial-gradient(620px 320px at 100% 0%, rgba(255,255,255,.1), transparent 62%),
  radial-gradient(420px 260px at 0% 120%, rgba(16,24,32,.35), transparent 60%)}
.owner-cta-rich>*{position:relative}
.owner-cta-features{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;justify-content:center;min-width:0}
.owner-cta-rich .btn.gold{flex:0 0 auto;white-space:nowrap}
.feature-chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:99px;
  padding:7px 15px;font-weight:600;font-size:.82rem;color:#fff;white-space:nowrap;text-align:center;transition:background .2s,border-color .2s,transform .18s var(--ease)}
.feature-chip:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.34);transform:translateY(-2px)}

/* ---------- how-it-works / trust ---------- */
.info-section{margin-top:56px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step-card{position:relative;overflow:hidden;background:var(--bg2);border-radius:18px;padding:28px 24px;text-align:right;
  transition:transform .18s var(--ease),box-shadow .22s;cursor:default}
.step-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(27,34,43,.1)}
.step-card::after{content:"";position:absolute;inset-inline-end:-34px;top:-34px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle,rgba(63,107,142,.09),transparent 70%)}
.step-num{position:absolute;top:14px;inset-inline-end:20px;font-size:2.3rem;font-weight:800;color:rgba(31,41,53,.08);line-height:1;margin:0;background:none;width:auto;height:auto}
.step-icon,.hicon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px;color:var(--brand-d);
  background:linear-gradient(150deg,#EDF2F7,#E1E9F1);box-shadow:inset 0 0 0 1px rgba(63,107,142,.14);font-size:1.35rem}
.step-icon svg{width:24px;height:24px}
.step-card:nth-child(1) .step-icon{background:linear-gradient(150deg,#EDF2F7,#DCE9F4);color:var(--brand-d)}
.step-card:nth-child(2) .step-icon{background:linear-gradient(150deg,#EAF3EE,#D8EBE0);color:#1C7C4F}
.step-card:nth-child(3) .step-icon{background:linear-gradient(150deg,#FBF3E1,#F6E7C6);color:#A05A00}
.step-card h3{margin:0 0 7px;font-size:1rem;letter-spacing:.02em}
.step-card p{margin:0;font-size:.86rem;color:var(--muted);font-weight:300}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.trust-card{background:var(--surface);border:1px solid var(--hair);border-radius:18px;padding:20px;text-align:right;transition:transform .18s var(--ease),box-shadow .22s}
.trust-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(27,34,43,.09)}
.trust-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#EEF6F3;font-size:1.25rem;margin-bottom:12px}
.trust-card:nth-child(1) .trust-icon{background:#EAF3EE}
.trust-card:nth-child(2) .trust-icon{background:#EAF1F8}
.trust-card:nth-child(3) .trust-icon{background:var(--accent-soft)}
.trust-card:nth-child(4) .trust-icon{background:#F1EFFA}
.trust-card{border-top:3px solid transparent}
.trust-card:nth-child(1){border-top-color:#7FBF9E}
.trust-card:nth-child(2){border-top-color:#7FA6C9}
.trust-card:nth-child(3){border-top-color:var(--accent)}
.trust-card:nth-child(4){border-top-color:#A99BE0}
.trust-card h3{margin:0 0 5px;font-size:1rem}
.trust-card p{margin:0;color:var(--muted);line-height:1.6;font-size:.85rem;font-weight:300}

/* ---------- contact / support CTA (dark banner like the reference) ---------- */
.foot-cta{background:#101010;border-radius:18px;padding:44px 32px;text-align:center;color:#fff;position:relative;overflow:hidden}
.foot-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 340px at 85% -30%, rgba(120,155,185,.16), transparent 60%);pointer-events:none}
.foot-cta>*{position:relative;z-index:1}
.foot-cta .kicker{margin-bottom:12px}
.foot-cta h2{font-size:1.7rem;margin:0 0 8px;color:#fff}
.foot-cta p{color:#b9b9b9;font-weight:300;margin:0 auto 26px;max-width:52ch}
@media(max-width:820px){ .foot-cta{padding:36px 20px} }
.site-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:28px;padding:20px 4px 8px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}
.admin-entry{background:none;border:none;color:var(--muted);font-size:.78rem;cursor:pointer;opacity:.55;
  text-decoration:underline;text-underline-offset:3px;padding:6px 4px;transition:opacity .15s,color .15s}
.admin-entry:hover{opacity:1;color:var(--brand-d)}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-size:.78rem;text-decoration:none;opacity:.75;transition:opacity .15s,color .15s}
.foot-links a:hover{opacity:1;color:var(--brand-d);text-decoration:underline;text-underline-offset:3px}

/* ---------- cars page + filter bar ---------- */
.cars-page{margin-top:26px}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  background:rgba(255,255,255,.62);backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:14px;
  box-shadow:0 14px 36px rgba(25,35,45,.1);position:sticky;top:78px;z-index:5}
.filter-bar select,.filter-bar input{border:1px solid rgba(31,41,53,.14);border-radius:12px;padding:10px 12px;background:var(--surface);min-height:43px;
  box-shadow:0 3px 10px rgba(10,14,19,.03);transition:border-color .2s,box-shadow .2s}
.filter-bar select:focus,.filter-bar input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(63,107,142,.12)}
.filter-bar .f-search{flex:1 1 200px;min-width:140px}

/* ---------- auth ---------- */
.auth-shell{width:min(540px,96vw);margin:44px auto;padding:32px;border-radius:18px}
.auth-head{margin-bottom:18px}
.auth-head h2{margin:0}
.auth-head p{margin:6px 0 0;color:var(--muted);font-weight:300}
.auth-head .role-pill{background:rgba(63,107,142,.12);color:var(--brand-d)}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.role-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 20px;
  background:var(--bg2);border:1.5px solid transparent;border-radius:18px;transition:all .2s}
.role-card:hover{border-color:var(--brand);background:var(--surface);box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-2px)}
.role-card b{font-size:1rem;font-weight:600}
.role-card small{color:var(--muted);line-height:1.5;font-weight:300}
.role-emoji{font-size:2.1rem;line-height:1;margin-bottom:6px}
.link-back{border:0;background:transparent;color:var(--muted);font-size:.8rem;letter-spacing:.05em;padding:0 0 14px;cursor:pointer}
.link-back:hover{color:var(--brand-d)}
.tabs{display:flex;background:var(--bg2);border-radius:99px;padding:4px;margin-bottom:22px;border:none;gap:2px}
.tabs .tab{flex:1;border:none;background:transparent;color:var(--muted);font-weight:500;font-size:.88rem;padding:10px;border-radius:99px;transition:all .2s}
.tabs .tab.active{background:#232A33;color:#fff;font-weight:600}

/* ---------- dashboard ---------- */
.dashboard-shell{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:26px}
.dashboard-head{display:flex;flex-direction:column;gap:18px;
  background:var(--dark);color:#fff;border-radius:18px;padding:24px 30px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.dashboard-head::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 340px at 85% -30%, rgba(120,155,185,.14), transparent 60%);pointer-events:none}
.dashboard-head>*{position:relative;z-index:1}
.dashboard-head h1{margin:0;color:#fff;font-size:clamp(24px,3.6vw,38px);line-height:1.15}
.dashboard-head .eyebrow{color:#9DB2C6;margin-bottom:6px}
.dash-head-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dash-head-titles{min-width:0}
.dash-head-controls{display:flex;align-items:center;gap:10px;flex-shrink:0}
.dash-head-actions{display:flex;gap:10px;flex-wrap:wrap}
.dash-head-actions .btn{flex:1;min-width:150px;white-space:nowrap}
.dashboard-tabs{display:flex;gap:6px;background:rgba(255,255,255,.6);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);padding:10px 14px;border:1px solid rgba(255,255,255,.65);border-radius:18px;overflow-x:auto;box-shadow:0 8px 24px rgba(12,20,32,.07)}
.dashboard-tabs .tab{border:none;background:transparent;color:var(--muted);font-weight:500;font-size:.88rem;padding:12px 18px;border-radius:12px;white-space:nowrap;transition:all .2s}
.dashboard-tabs .tab.active{background:var(--dark);color:#fff;font-weight:600}
.nav-footer{display:none}
.dashboard-panel{padding:26px;min-height:470px;animation:tabIn .35s var(--ease)}
@keyframes tabIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel{padding:26px}
.inset{padding:20px;box-shadow:none;margin-bottom:18px;border:1px solid var(--line)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:26px}
.kpis.two{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.kpi{padding:20px;background:var(--surface);border:1px solid var(--hair);border-radius:18px;box-shadow:0 10px 26px rgba(20,28,40,.05);transition:transform .18s var(--ease),box-shadow .22s}
.kpi:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(27,34,43,.1)}
.kpi-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.kpi-head .kpi-label{color:var(--muted);font-weight:500;font-size:.78rem;letter-spacing:.06em}
.kpi-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(63,107,142,.1);color:var(--brand);flex:none;box-shadow:inset 0 0 0 1px rgba(63,107,142,.12)}
.kpi:nth-child(2) .kpi-icon{background:rgba(28,124,79,.1);color:var(--ok);box-shadow:inset 0 0 0 1px rgba(28,124,79,.15)}
.kpi:nth-child(3) .kpi-icon{background:var(--accent-soft);color:#B17F00;box-shadow:inset 0 0 0 1px rgba(233,169,61,.25)}
.kpi:nth-child(4) .kpi-icon{background:#F1EFFA;color:#7A66C9;box-shadow:inset 0 0 0 1px rgba(122,102,201,.2)}
.kpi-icon svg{width:18px;height:18px}
.kpi b{display:block;font-size:1.7rem;font-weight:800;color:var(--brand-d);line-height:1.1;font-variant-numeric:tabular-nums}
.kpi span{color:var(--muted);font-size:.76rem;letter-spacing:.05em}

/* ---------- data tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:18px;background:var(--surface)}
table.data{width:100%;border-collapse:collapse;font-size:.86rem;min-width:560px}
table.data th{text-align:right;color:var(--brand-d);font-weight:600;font-size:.72rem;letter-spacing:.12em;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:#F2F5F8;position:sticky;top:0;z-index:1}
table.data td{padding:13px 14px;border-bottom:1px solid var(--hair);vertical-align:middle;font-weight:300}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:rgba(63,107,142,.03)}
table.data .t-main{font-weight:600}
table.data .t-actions{display:flex;gap:8px;justify-content:flex-start;flex-wrap:wrap}
.icon-btn{border:1px solid var(--line);background:var(--surface);border-radius:99px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:all .18s}
.icon-btn:hover{border-color:var(--text);color:var(--text)}
.icon-btn.danger{color:var(--danger);border-color:rgba(215,0,21,.3)}
.icon-btn.danger:hover{background:var(--danger-bg)}
.icon-btn svg{width:16px;height:16px}
.pill{display:inline-flex;align-items:center;border-radius:99px;padding:5px 13px;font-weight:600;font-size:.73rem;letter-spacing:.02em;background:var(--bg2);color:var(--text);border:1px solid transparent}
.pill.ok{background:var(--ok-bg);color:var(--ok);border-color:rgba(127,191,158,.4)}
.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:rgba(217,190,128,.4)}
.pill.mut{background:var(--bg2);color:var(--muted)}
.pill-btn{border:none;background:none;padding:0;margin:0;cursor:pointer;font:inherit}
.pill-btn:hover{filter:brightness(.95)}
.pill-btn:hover .pill{box-shadow:0 0 0 2px rgba(63,107,142,.25)}
.feat-btn{font-size:1.05rem;line-height:1;font-weight:700}
.feat-btn.feat-on{background:linear-gradient(135deg,#E9A93D,#C6902E);color:#fff;border-color:#C6902E}
.feat-btn.feat-on:hover{color:#fff;border-color:#B8862B}

/* ---------- overview two-panel ---------- */
.overview-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:6px}
.mini-panel{border:1px solid var(--hair);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:0 14px 36px rgba(20,28,40,.06)}
/* ---- Rental summary: a period switcher, and one comparable bar per group. The bar is proportional
   to the biggest earner, so "which car actually carries the business" is readable at a glance. ---- */
/* A Latin car name inside an RTL header got its ellipsis at the START ("…dai Elantra") — the useful
   half was the part being cut. plaintext takes the direction from the text itself, so Latin names
   truncate at the end and Hebrew ones still behave. */
.chat-head-main h3{unicode-bidi:plaintext}
/* Back and close were two identical 44px dark squares — same weight for two different destinations.
   Back is the frequent one and stays solid; close steps down to a quiet outline. */
.chat-head .chat-x{background:transparent;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.72);font-weight:400}
.chat-head .chat-x:hover{background:rgba(255,255,255,.1);color:#fff}
/* ---- Reservation page: one record, laid out the way a rental confirmation should read ---- */
.res-head{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(135deg,rgba(63,107,142,.08),var(--surface) 60%);box-shadow:0 10px 30px rgba(20,28,40,.05)}
.res-head-top{display:flex;align-items:baseline;gap:8px}
.res-conf-lab{font-size:.76rem;color:var(--muted)}
.res-conf{font-size:1.32rem;font-weight:800;letter-spacing:.06em;color:var(--brand-d);font-variant-numeric:tabular-nums}
.res-head-car{display:flex;flex-direction:column;gap:1px}
.res-head-car b{font-size:1.05rem;color:var(--text)}
.res-head-car span{font-size:.8rem;color:var(--muted)}
.res-head .status-badge{justify-self:start}
/* progress: four fixed stops, so "where is this booking" is answerable at a glance */
.res-track{display:flex;list-style:none;margin:14px 0;padding:0;gap:4px}
.res-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative}
.res-step > span{width:11px;height:11px;border-radius:50%;background:var(--line-2);transition:background .2s}
.res-step::before{content:"";position:absolute;top:5px;inset-inline-end:50%;width:100%;height:2px;background:var(--line-2)}
.res-step:first-child::before{display:none}
.res-step.done > span{background:var(--brand)}
.res-step.done::before{background:var(--brand)}
.res-step.now > span{box-shadow:0 0 0 4px rgba(63,107,142,.18)}
.res-step small{font-size:.68rem;color:var(--muted);text-align:center}
.res-step.done small{color:var(--text);font-weight:600}
/* the two ends of the rental, side by side — the shape people expect from a car reservation */
.res-when-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.res-when{padding:13px 14px;border:1px solid var(--hair);border-radius:14px;background:var(--surface);display:grid;gap:2px}
.res-when-lab{font-size:.72rem;color:var(--muted);font-weight:600}
.res-when-day{font-size:1.02rem;color:var(--text)}
.res-when-meta{font-size:.78rem;color:var(--muted)}
.res-when-note{font-size:.72rem;color:var(--brand-d);margin-top:3px}
.res-price{border:1px solid var(--hair);border-radius:16px;background:var(--surface);padding:14px;margin-bottom:12px}
.res-price-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.res-price-head b{font-size:.95rem}
.res-price-head span{font-size:.76rem;color:var(--muted)}
.res-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;font-size:.88rem;color:var(--muted)}
.res-line b{color:var(--text);font-weight:600}
.res-total{border-top:1px solid var(--hair);margin-top:4px;padding-top:11px}
.res-total span{font-weight:700;color:var(--text)}
.res-total b{font-size:1.3rem;font-weight:800;color:var(--brand-d)}
.res-pay-note{display:block;margin-top:9px;font-size:.76rem;color:var(--muted);line-height:1.45}
.res-actions{margin-top:4px}
@media(max-width:400px){.res-when-row{grid-template-columns:1fr}}
/* Refresh in the chat list head — same quiet weight as the back control beside it. */
.chat-refresh{margin-inline-start:auto;background:none;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);
  width:34px;height:34px;min-width:34px;min-height:34px;border-radius:50%;font-size:1.05rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s}
.chat-refresh:hover{background:rgba(255,255,255,.12);color:#fff}
.chat-refresh.spinning{animation:cdSpin .42s linear}
@keyframes cdSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.chat-refresh.spinning{animation:none}}
/* Who you are actually talking to — the header used to name only the car. */
.chat-who{display:block;font-size:.78rem;color:var(--muted-2);margin-top:1px}
/* Contact strip — the other side of the booking, reachable in one tap. */
.contact-block{margin:10px 0 4px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg2)}
.cb-id{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.cb-id b{font-size:.98rem;color:var(--text)}
.cb-id span{font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}
.contact-block .chips{gap:8px}
.contact-block .btn{flex:1 1 40%;margin:0;text-align:center;text-decoration:none}
/* A stat that is also a shortcut — must read as part of the strip, not as a stray button. */
.stat-link{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;
  align-items:baseline;gap:5px;border-bottom:1px dashed currentColor;min-width:0;min-height:0}
.stat-link:hover{opacity:.75}
/* ---- Admin: split user lists + a single user's control page ---- */
.user-search{width:100%;padding:12px 14px;margin:0 0 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--text);font-size:.92rem;font-family:inherit}
.user-search:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(63,107,142,.14)}
.user-group{margin-bottom:14px;border:1px solid var(--hair);border-radius:16px;background:var(--surface);overflow:hidden}
.user-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:14px 16px;font-size:.98rem;color:var(--text)}
.user-group>summary::-webkit-details-marker{display:none}
.user-group>summary::after{content:"⌄";font-size:1.1rem;transition:transform .2s;color:var(--muted)}
.user-group[open]>summary::after{transform:rotate(180deg)}
.user-group>summary:hover{background:var(--bg2)}
.ug-count{background:var(--bg2);color:var(--muted);border-radius:99px;padding:2px 10px;font-size:.8rem;font-weight:700}
.user-group .admin-cards{padding:0 12px 12px}
/* the whole card is a shortcut into that user's area — its own buttons still win (handled in JS) */
.auc-click{cursor:pointer;transition:transform .12s,box-shadow .12s}
.auc-click:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(20,28,40,.1)}
/* Back is navigation, not an action — a quiet link, so it stops outweighing the person's name. */
.up-back{background:none;border:none;padding:6px 2px;margin:0 0 10px;font:inherit;font-size:.84rem;
  font-weight:600;color:var(--muted);cursor:pointer;min-height:0}
.up-back:hover{color:var(--brand-d)}
/* The identity card IS the page header: give it presence instead of repeating the name above it. */
.up-head{display:flex;align-items:center;gap:13px;padding:16px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(135deg,rgba(63,107,142,.07),var(--surface) 60%);margin-bottom:16px;
  box-shadow:0 10px 30px rgba(20,28,40,.05)}
.up-ava{width:52px;height:52px;min-width:52px;font-size:1.25rem}
.up-name{display:block;margin:0 0 2px;font-size:1.18rem;font-weight:800;color:var(--text);line-height:1.25}
.up-id{flex:1;min-width:0}

.up-id small{color:var(--muted);font-size:.82rem}
.up-pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.up-sec{margin-top:12px;border:1px solid var(--hair);border-radius:16px;background:var(--surface);overflow:hidden}
.up-sec>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:15px 16px}
.up-sec>summary::-webkit-details-marker{display:none}
.up-sec>summary b{font-size:.96rem;color:var(--text)}
.up-sec>summary small{color:var(--muted);font-size:.8rem}
.up-sec>summary:hover{background:var(--bg2)}
.up-sec>*:not(summary){padding:0 14px 14px}
.up-sec .chips{padding-top:4px}
@media(max-width:520px){.up-head{flex-wrap:wrap}.up-pills{justify-content:flex-start;width:100%}}
.period-chips{gap:6px;margin:0}
.period-chips .type-chip{padding:7px 14px;font-size:.82rem}
.sum-row{padding:12px 15px;border-top:1px solid var(--hair)}
.sum-row:first-of-type{border-top:none}
.sum-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px}
.sum-row-top b:first-child{font-size:.92rem;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sum-row-top b:last-child{font-size:.95rem;color:var(--brand-d);white-space:nowrap}
.sum-row small{color:var(--muted);font-size:.76rem}
.sum-bar{height:7px;border-radius:99px;background:var(--bg2);overflow:hidden;margin-bottom:6px}
.sum-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-d));min-width:3px}
.sum-open .sum-row-top b:last-child{color:var(--warn)}
.sum-list-head{margin:22px 0 10px;padding:0 2px}
@media(max-width:520px){.period-chips .type-chip{padding:6px 11px;font-size:.78rem}}
.mini-panel-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid var(--hair)}
.mini-panel-head h3{margin:0;font-size:1rem}
.mini-panel-head span{color:var(--muted);font-size:.78rem}
.mini-row{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--hair)}
.mini-row:last-child{border-bottom:0}
.mini-row b{font-weight:600}
.mini-row .mut{color:var(--muted);font-size:.82rem}
.panel-head-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.panel-head-actions h2{margin:0}
.admin-tools{margin-top:22px;border:1px solid var(--hair);border-radius:14px;background:var(--surface)}
.admin-tools summary{cursor:pointer;padding:13px 16px;font-weight:600;font-size:.88rem;color:var(--muted);list-style:none;display:flex;align-items:center;gap:8px;user-select:none}
.admin-tools summary::-webkit-details-marker{display:none}
.admin-tools summary::before{content:"⚙";font-size:1.05rem}
.admin-tools summary::after{content:"▾";margin-inline-start:auto;transition:transform .2s;font-size:.8rem}
.admin-tools[open] summary{border-bottom:1px solid var(--hair)}
.admin-tools[open] summary::after{transform:rotate(180deg)}
.admin-tools-grid{display:flex;flex-wrap:wrap;gap:10px;padding:14px 16px}
.admin-tools-grid .btn{flex:1;min-width:150px}

/* ---------- lists / rows / bookings ---------- */
.list{display:grid;gap:12px}
.row,.verification-row{display:grid;grid-template-columns:1.4fr 1fr auto;gap:12px;align-items:center;padding:14px 16px;background:var(--bg2);border:none;border-radius:14px}
.verification-list{margin-top:18px}
.status{font-size:.8rem;font-weight:800}
.status.ok{color:var(--ok)} .status.warn{color:var(--warn)} .status.bad{color:var(--danger)}
.status-badge{display:inline-flex;align-items:center;border-radius:99px;padding:5px 13px;background:var(--bg2);font-weight:600;font-size:.73rem;letter-spacing:.02em;border:1px solid transparent}
.status-badge.approved,.status-badge.active{background:var(--ok-bg);color:var(--ok);border-color:rgba(127,191,158,.4)}
.status-badge.pending{background:var(--warn-bg);color:var(--warn);border-color:rgba(217,190,128,.4)}
.status-badge.rejected,.status-badge.cancelled{background:var(--danger-bg);color:var(--danger);border-color:rgba(217,138,128,.4)}
.status-badge.expired{background:var(--bg2);color:var(--muted);border-color:var(--line)}
.booking-card{border:1px solid var(--hair);border-radius:18px;padding:18px;background:var(--surface);box-shadow:0 10px 26px rgba(20,28,40,.04);transition:transform .18s var(--ease),box-shadow .22s}
.booking-card:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(27,34,43,.08)}
.booking-main{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px}
.booking-main h3{margin:5px 0}
.booking-main p{margin:0;color:var(--muted);font-size:.88rem}
.booking-main small{color:var(--muted-2);font-size:.72rem;letter-spacing:.06em}
.ev-note{margin:10px 0 0;font-size:.76rem;color:var(--warn);background:var(--warn-bg);border:1px solid rgba(217,190,128,.35);padding:9px 12px;border-radius:10px}
/* Delivery is logistics, not a warning — same shape as .ev-note, calmer colour, and it must be easy
   to spot on the card because it's the address the owner has to drive to. */
.deliv-note{color:var(--brand-d);background:rgba(63,107,142,.09);border-color:rgba(63,107,142,.25);font-weight:600}

/* ---------- modal ---------- */
/* While a modal is open, lock the page behind it so it can't scroll (esp. on mobile). */
html.modal-open, html.modal-open body{overflow:hidden}
.modal-backdrop{position:fixed;inset:0;background:rgba(5,5,7,.82);backdrop-filter:blur(6px);z-index:100;display:grid;place-items:center;padding:18px;animation:fadeIn .2s ease both;overscroll-behavior:contain}
.modal{width:min(820px,96vw);max-height:92vh;max-height:92dvh;overflow:auto;overflow-x:hidden;background:var(--surface);border-radius:18px;padding:0 26px 26px;box-shadow:0 30px 80px rgba(0,0,0,.25);animation:up .45s var(--ease)}
@keyframes up{0%{transform:translateY(26px) scale(.97);opacity:0}60%{transform:translateY(-4px) scale(1.004);opacity:1}100%{transform:none;opacity:1}}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 -26px 16px;padding:18px 26px;
  border-bottom:1px solid var(--hair);position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);z-index:3}
.modal-head h2{margin:0;font-size:1.15rem;letter-spacing:.02em}
.close{border:0;background:var(--bg2);border-radius:50%;color:var(--text);width:42px;height:42px;min-width:42px;font-size:1.6rem;line-height:1;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:background .18s,color .18s,transform .12s}
.close:hover{background:rgba(0,0,0,.09);color:var(--brand-d)}
.close:active{transform:scale(.92)}
.modal-car-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:var(--bg2);margin:8px 0}
.camera-modal video{width:100%;max-height:65vh;background:#000;border-radius:16px}

/* ---------- misc ---------- */
#toast{position:fixed;bottom:22px;inset-inline-start:50%;transform:translateX(50%) translateY(80px);z-index:300;
  background:rgba(24,26,30,.82);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);color:#fff;padding:12px 26px;border-radius:99px;font-weight:500;font-size:.88rem;border:1px solid rgba(255,255,255,.12);
  opacity:0;transition:transform .45s cubic-bezier(.34,1.4,.4,1),opacity .3s;pointer-events:none;max-width:min(480px,92vw);text-align:center}
#toast.show{transform:translateX(50%) translateY(0);opacity:1}
.notice{padding:12px 15px;border-radius:12px;background:var(--warn-bg);border:1px solid rgba(160,90,0,.3)}
.error{color:var(--danger);font-size:.85rem}
.media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.media-grid img,.media-grid video{width:100%;border-radius:12px;background:var(--bg2)}
.summary{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:.9rem}
.summary b{font-weight:600}
.image-preview{width:100%;max-height:300px;object-fit:cover;border-radius:14px;border:1px solid var(--hair);background:var(--bg2)}
.app-loader{display:grid;place-items:center;gap:14px;min-height:56vh;color:var(--muted);animation:fadeIn .3s ease both}
.spinner{width:44px;height:44px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
.app-loader p{margin:0;font-weight:600;letter-spacing:.02em}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
main>*:not(.reveal){animation:fadeUp .45s var(--ease) both}
.kpi{animation:fadeUp .5s var(--ease) both}
.kpi:nth-child(2){animation-delay:.06s}
.kpi:nth-child(3){animation-delay:.12s}
.kpi:nth-child(4){animation-delay:.18s}
.car,.booking-card,.mini-panel{animation:cardIn .55s var(--ease) both}
.car:nth-child(2){animation-delay:.07s}
.car:nth-child(3){animation-delay:.14s}
.car:nth-child(4){animation-delay:.21s}

.type-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:4px}
.type-chip{border:1px solid rgba(63,107,142,.18);background:var(--surface);color:#263342;border-radius:14px;padding:12px 6px;font-weight:800;font-size:.85rem;box-shadow:0 5px 14px rgba(25,35,45,.05);transition:transform .18s var(--ease),background .2s,border-color .2s,color .2s}
.type-chip:hover{transform:translateY(-2px);border-color:var(--brand)}
.type-chip.on{background:#1B222B;color:#fff;border-color:#1B222B;box-shadow:0 10px 24px rgba(27,34,43,.18)}

/* ---------- car detail modal: gallery + reviews ---------- */
.gallery{margin-bottom:14px}
.gallery-main{width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--bg3)}
.gallery-main img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .22s ease}
.gallery-thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:4px}
.thumb{flex:0 0 78px;height:58px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:var(--bg3);cursor:pointer;transition:border-color .2s,transform .18s var(--ease)}
.thumb:hover{transform:translateY(-2px)}
.thumb.active{border-color:var(--brand)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb-video{display:grid;place-items:center;color:#fff;background:var(--dark);font-size:1.2rem}
.car-detail-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
/* One shared height so the row reads as a single strip of facts, not stacked scraps. */
.car-detail-head > *{min-height:28px;display:inline-flex;align-items:center}
.car-detail-head .avail-badge{position:static}
.detail-summaries{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;margin-bottom:14px}
.reviews{border-top:1px solid var(--hair);padding-top:14px;margin-bottom:14px}
.reviews h3{margin:0 0 10px;font-size:1.05rem}
.review{background:var(--bg2);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.review-head{display:flex;justify-content:space-between;align-items:center}
/* #E9A93D measured 2.06:1 on white and 1.70:1 on the soft panel. The ★/☆ shape carries the score, so
   this is a graphical object under WCAG 1.4.11 (3:1), not body text (4.5:1) — 4.5 would force a dark
   olive that no longer reads as gold. #A97210 gives 4.12:1 on white and 3.41:1 on soft. */
.review-stars{color:var(--star);letter-spacing:1px}
.review-head small{color:var(--muted);font-size:.72rem}
.review p{margin:6px 0 0;line-height:1.55;font-size:.88rem;color:var(--text)}
#booking-form h3,.form-section-title{margin:18px 0 12px;font-weight:800;font-size:1rem}
.form-section-title{display:flex;align-items:center;gap:14px;color:var(--brand-d);font-size:.76rem;letter-spacing:.28em}
.form-section-title::after{content:"";flex:1;height:1px;background:var(--hair)}

/* ---------- license verification card + wizard ---------- */
.ver-card{display:flex;align-items:center;gap:16px;width:100%;text-align:right;margin-top:16px;padding:18px;cursor:pointer;
  background:linear-gradient(180deg,#fff,#F4F8FC);border:1.5px solid rgba(63,107,142,.25);border-radius:18px;
  box-shadow:0 12px 30px rgba(25,35,45,.07);transition:transform .18s var(--ease),border-color .2s,box-shadow .22s}
.ver-card:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 18px 42px rgba(25,35,45,.12)}
.ver-card.ver-ok{border-color:rgba(28,124,79,.35);background:linear-gradient(180deg,#fff,#F2FAF6)}
.ver-illustration{flex:none;width:82px}
.ver-illustration svg{width:100%;height:auto;display:block}
.ver-main{flex:1;display:grid;gap:3px}
.ver-main b{font-size:1.05rem}
.ver-main small{color:var(--muted);line-height:1.5}
.ver-arrow{flex:none;font-size:1.3rem;font-weight:800;color:var(--brand)}
.ver-card.ver-ok .ver-arrow{color:var(--ok)}
.steps-bar{display:flex;gap:5px;margin:4px 0 20px}
.sb{flex:1;height:3px;border-radius:99px;background:var(--hair);transition:background .3s}
.sb.on{background:var(--brand)}
.wizard-step{text-align:center;padding:8px 4px 4px}
.wizard-emoji{font-size:2.6rem;display:block;margin-bottom:8px}
.wizard-step h3{margin:0 0 6px}
.wizard-step p{margin:0 0 20px;color:var(--muted)}
.wizard-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wizard-btn{display:grid;gap:6px;place-items:center;padding:22px 12px;font-size:1.6rem;cursor:pointer;
  background:var(--bg2);border:1.5px solid transparent;border-radius:16px;transition:all .2s}
.wizard-btn b{font-size:.9rem}
.wizard-btn:hover{border-color:var(--brand);background:var(--surface);transform:translateY(-2px)}
.wizard-note{min-height:1.2em;margin:12px 0 0;font-size:.82rem}
.wizard-done{text-align:center;padding:16px 6px}
.wizard-done span{font-size:3rem;display:block;margin-bottom:10px}
.wizard-done p{color:var(--muted);margin:6px 0 20px}
.chat-x{background:rgba(255,255,255,.1);border:none;color:#fff;font-size:1.1rem;cursor:pointer;width:32px;height:32px;border-radius:8px;flex:none;display:grid;place-items:center}
.chat-x:hover{background:rgba(255,255,255,.2)}
.forgot-pw{display:block;margin:10px auto 0;padding:4px}

/* ---------- dashboard header actions + add-car FAB ---------- */
.fab{position:fixed;bottom:22px;inset-inline-start:22px;width:58px;height:58px;border-radius:50%;border:none;
  background:linear-gradient(180deg,#5A86AA,#31567A);color:#fff;font-size:2rem;line-height:1;display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 34px rgba(10,14,19,.4);z-index:95;transition:transform .2s var(--ease),background .2s}
.fab:hover{transform:translateY(-3px);background:var(--brand-l)}
.fab:active{transform:scale(.95)}
@media(max-width:820px){
  .dash-head-actions{width:100%}
}

/* ---------- maintenance / admin extras ---------- */
.blocked-screen{max-width:540px;margin:11vh auto;padding:46px 30px;text-align:center}
.blocked-screen .blocked-ic{font-size:4.6rem;line-height:1;margin-bottom:12px}
.blocked-screen h1{font-size:clamp(1.9rem,5.4vw,2.7rem);color:#b71c1c;margin:0 0 12px}
.blocked-screen p{color:var(--muted);font-size:1.05rem;margin:0}
.boot-failure{max-width:520px;margin:12vh auto;padding:40px 28px;text-align:center;background:var(--surface);border:1px solid var(--hair);border-radius:20px;box-shadow:0 20px 60px rgba(10,14,19,.12)}
.boot-failure h1{margin:0 0 12px;font-size:1.45rem;color:var(--dark)}
.boot-failure p{margin:0 0 22px;color:var(--muted);line-height:1.6}
.boot-failure button{background:var(--brand);color:#fff;border:none;border-radius:99px;padding:12px 32px;font-size:1rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .18s}
.boot-failure button:hover{background:var(--brand-d)}
.maintenance{max-width:520px;margin:70px auto;padding:44px 30px;text-align:center;display:grid;gap:12px;justify-items:center}
.maint-gears{position:relative;width:128px;height:104px;margin-bottom:6px}
.maint-gears .g1,.maint-gears .g2{position:absolute;display:block}
.maint-gears .gear{width:100%;height:100%;display:block;fill:var(--brand)}
.maint-gears .g1{width:80px;height:80px;top:0;inset-inline-start:2px;animation:gearspin 6s linear infinite}
.maint-gears .g2{width:58px;height:58px;bottom:0;inset-inline-end:2px;animation:gearspin 4.5s linear infinite reverse}
.maint-gears .g2 .gear{fill:#E9C46A}
@keyframes gearspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.maint-gears .g1,.maint-gears .g2{animation-duration:18s}}
.notif-row{display:flex;gap:13px;align-items:center;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:13px 16px}
.notif-row.unread{border-inline-start:4px solid var(--brand);background:rgba(63,107,142,.05)}
.notif-icon{font-size:1.3rem;width:40px;height:40px;display:grid;place-items:center;background:var(--bg2);border-radius:50%;flex:none}
.notif-main{display:grid;gap:2px;flex:1;min-width:0}
.notif-main small{color:var(--muted);font-size:.74rem}
.notif-row.clickable{cursor:pointer;transition:background .15s,border-color .15s}
.notif-row.clickable:hover,.notif-row.clickable:focus-visible{background:rgba(63,107,142,.09);border-color:var(--brand);outline:none}
.notif-go{flex:none;font-size:.75rem;font-weight:600;color:var(--brand-d);white-space:nowrap;background:rgba(63,107,142,.1);padding:5px 11px;border-radius:99px}
.admin-search-wrap{margin-bottom:14px}
/* Admin "needs attention" — pending items the admin must act on (amber), or an all-clear (green). */
.admin-attention{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.attn-card{display:flex;align-items:center;gap:11px;background:var(--warn-bg);border:1px solid rgba(160,90,0,.28);border-radius:14px;padding:11px 16px;cursor:pointer;color:var(--warn);font-weight:600;font-size:.9rem;transition:transform .18s var(--ease),box-shadow .2s,border-color .2s}
.attn-card b{font-size:1.5rem;font-weight:800;line-height:1}
.attn-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(160,90,0,.16);border-color:rgba(160,90,0,.5)}
.attn-clear{background:var(--ok-bg);border:1px solid rgba(28,124,79,.24);border-radius:14px;padding:12px 16px;color:var(--ok);font-weight:600;font-size:.9rem}
#admin-search{font-size:1rem}
.search-group{margin:12px 0 6px;font-weight:800;font-size:.74rem;letter-spacing:.18em;color:var(--brand-d)}
.search-hit{display:block;width:100%;text-align:right;background:var(--bg2);border:none;border-radius:11px;padding:11px 14px;margin-bottom:6px;cursor:pointer;font-size:.88rem;transition:background .15s}
.search-hit:hover{background:rgba(63,107,142,.12)}
.admin-status-select{border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--surface);font-size:.85rem}
.row-blocked{opacity:.55}
/* Neutral footnote, not a warning: it explains who may rate, nothing is wrong. The --warn palette made
   it the loudest thing between two quiet reference rows. */
.rate-note{font-size:.78rem;color:var(--muted);padding:2px 2px 0;margin:0 0 12px;line-height:1.5}

/* ---------- admin: user rentals modal ---------- */
.rental-row{display:flex;gap:14px;align-items:flex-start;background:var(--bg2);border-radius:14px;padding:13px 15px;margin-bottom:10px;flex-wrap:wrap}
.rental-car-img{width:96px;height:64px;object-fit:cover;border-radius:9px;flex:none;background:var(--bg3)}
.rental-info{flex:1;min-width:220px;display:grid;gap:4px}
.rental-info b{font-weight:600}
.rental-info small{color:var(--muted);font-size:.8rem}
.rental-info .chips{margin-top:6px}
.rental-row .status-badge{margin-inline-start:auto}
@media(max-width:560px){ .rental-row .status-badge{margin-inline-start:0} }

/* ---------- car form: photo manager ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.photo-item{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--bg3);border:2px solid transparent}
.photo-item.is-main{border-color:var(--brand)}
.photo-item img{width:100%;height:100%;object-fit:cover;display:block}
.photo-remove{position:absolute;top:5px;inset-inline-end:5px;width:23px;height:23px;border-radius:50%;border:none;background:rgba(11,11,13,.8);color:#fff;cursor:pointer;font-size:.8rem;line-height:1}
.photo-main-btn{position:absolute;inset-inline:0;bottom:0;border:none;background:rgba(11,11,13,.8);color:#9FB6C9;font-size:.64rem;font-weight:700;letter-spacing:.08em;padding:4px;cursor:pointer}
.photo-item.is-main .photo-main-btn{background:var(--brand);color:#fff}
.photo-empty{grid-column:1/-1;padding:28px 18px;text-align:center;color:var(--muted);border:1.5px dashed var(--line-2);border-radius:14px;background:var(--bg2);font-size:.88rem}
.photo-actions{margin-bottom:6px}

/* ---------- chats page (messaging app) ---------- */
.chat-shell{display:grid;grid-template-columns:330px 1fr;gap:0;height:calc(100vh - 160px);height:calc(100dvh - 160px);
  /* Cap the minimum so a SHORT / non-maximized desktop window can never push the composer below the fold
     (min-height:470 used to force the shell taller than the viewport → the reply box went off-screen). */
  min-height:340px;min-height:min(470px, calc(100dvh - 120px));margin-top:26px;
  background:var(--surface);border:1px solid var(--hair);border-radius:18px;overflow:hidden;box-shadow:0 34px 90px rgba(10,14,19,.14)}
/* min-height:0 is CRITICAL: as a grid item the list defaults to min-height:auto, so it grew past the
   shell (overflow:hidden) and .chat-items' own scroll never engaged — the list could not be scrolled. */
.chat-list{border-inline-start:1px solid var(--hair);display:flex;flex-direction:column;background:var(--surface);min-width:0;min-height:0}
.chat-list-head{padding:16px;border-bottom:1px solid var(--hair);background:var(--dark);color:#fff}
.chat-list-head h2{margin:0 0 8px;font-size:1.05rem;color:#fff;letter-spacing:.02em}
#chat-search{width:100%;border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:9px 14px;background:rgba(255,255,255,.1);color:#fff}
#chat-search::placeholder{color:rgba(255,255,255,.55)}
#chat-search:focus{outline:none;border-color:rgba(255,255,255,.45)}
.chat-items{overflow-y:auto;flex:1;padding:10px}
.chat-item{display:flex;align-items:center;gap:12px;width:100%;text-align:right;padding:12px;border:none;border-radius:12px;background:none;cursor:pointer;transition:background .15s}
.chat-item:hover{background:var(--bg2)}
.chat-item.active{background:rgba(63,107,142,.12)}
.chat-item.ended{opacity:.6}
.chat-unread-dot{width:11px;height:11px;border-radius:50%;background:#1db954;flex:0 0 auto;align-self:center;margin-inline-start:4px;animation:unreadPulse 2s ease-in-out infinite}
@keyframes unreadPulse{0%,100%{box-shadow:0 0 0 0 rgba(29,185,84,.45)}50%{box-shadow:0 0 0 5px rgba(29,185,84,0)}}
.chat-item-emoji{font-size:1.15rem;width:42px;height:42px;display:grid;place-items:center;background:#232A33;color:#fff;border-radius:50%;flex:0 0 auto}
.chat-item-main{min-width:0;flex:1;display:grid}
.chat-item-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.88rem;font-weight:600}
.chat-item-main small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.76rem}
.chat-pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface)}
.chat-empty{margin:auto;text-align:center;color:var(--muted)}
.chat-empty span{font-size:2.4rem;display:block;margin-bottom:8px}
.chat-head{display:flex;align-items:center;gap:10px;padding:13px 16px;background:var(--dark);color:#fff}
.chat-head-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.chat-head-main h3{margin:0;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.chat-back{display:none;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:1.1rem;cursor:pointer;width:32px;height:32px;border-radius:8px;flex:none}
.ev-checklist{display:flex;gap:10px;flex-wrap:wrap;padding:10px 16px;background:#FFF8E8;border-bottom:1px solid rgba(160,90,0,.18)}
.ev-status{font-size:.74rem;font-weight:700;color:var(--warn);letter-spacing:.02em}
.ev-status.ok{color:var(--ok)}
.chat-msgs{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px;background:var(--bg)}
.chat-msgs .message,.messages .message{max-width:78%;padding:9px 13px;border-radius:15px;font-size:.86rem;line-height:1.5;word-wrap:break-word;animation:fadeUp .25s var(--ease);border:none;box-shadow:none}
.chat-msgs .message{align-self:flex-end;background:var(--surface);border:1px solid var(--hair);border-end-end-radius:5px}
.chat-msgs .message.mine{align-self:flex-start;margin:0;background:var(--dark);color:#fff;border:none;border-end-end-radius:15px;border-end-start-radius:5px}
.chat-msgs .message p{margin:0}
.chat-msgs .message small{display:block;margin-top:4px;font-size:.62rem;opacity:.55;color:inherit;text-align:left}
.msg-att{display:inline-block;margin-top:7px;background:rgba(63,107,142,.12);color:var(--brand-d);border:1px solid rgba(63,107,142,.25);border-radius:10px;padding:7px 12px;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .2s}
.message.mine .msg-att{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.25)}
.msg-att:hover{background:rgba(63,107,142,.2)}
.evidence-row{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--hair);background:var(--surface)}
.ev-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(63,107,142,.18);background:var(--surface);border-radius:14px;padding:9px 14px;font-size:.8rem;font-weight:700;color:#263342;cursor:pointer;box-shadow:0 5px 14px rgba(25,35,45,.05);transition:transform .18s var(--ease),background .2s,border-color .2s}
.ev-chip:hover{transform:translateY(-2px);border-color:var(--brand)}
.ev-chip.ok{background:var(--ok-bg);color:var(--ok);border-color:rgba(127,191,158,.4)}
/* The chat's attach button, while its photo is in flight — same reasoning as the evidence chips. */
.chat-attach.busy{opacity:.5;pointer-events:none;cursor:progress}
/* Uploading — the chip must LOOK occupied for as long as the transfer runs, not for a 3s toast. */
.ev-chip.busy{opacity:.75;cursor:progress;pointer-events:none;border-color:var(--brand);
  background:linear-gradient(90deg,var(--bg2) 25%,var(--surface) 50%,var(--bg2) 75%) 0 0/280% 100%;
  animation:evPulse 1.1s linear infinite}
@keyframes evPulse{to{background-position:-280% 0}}
@media (prefers-reduced-motion: reduce){.ev-chip.busy{animation:none}}
.chat-composer{display:flex;gap:9px;padding:11px 14px;flex-shrink:0;border-top:1px solid var(--hair);background:var(--surface);box-shadow:0 -6px 16px rgba(20,26,33,.06)}
.chat-composer input{flex:1;border:1px solid var(--line);border-radius:99px;padding:10px 16px;background:var(--surface)}
.chat-composer input:focus{outline:none;border-color:var(--brand)}
.chat-composer .btn{border-radius:99px;padding:10px 22px}
.chat-attach{display:grid;place-items:center;width:42px;min-width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--brand-d);transition:all .18s}
.chat-attach svg{width:20px;height:20px}
.chat-attach:hover{border-color:var(--brand);background:var(--bg2)}
.msg-img{display:block;margin-top:7px;max-width:230px;width:100%;border-radius:12px;cursor:pointer}
.chat-closed{padding:14px;text-align:center;color:var(--muted);font-size:.85rem;background:var(--bg2);border-top:1px solid var(--hair)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero-in{padding:64px 20px 160px}
  .quick-search{grid-template-columns:1.3fr .7fr}
  .quick-search .btn{grid-column:1/-1}
  .road{height:110px}
  .asphalt{height:56px}
  .cars-near .sil{width:120px;height:42px}
  .cars-far .sil{bottom:50px;width:76px;height:27px}
  .blueprint{top:44px;opacity:.08}
  .overview-grid{grid-template-columns:1fr}
}
/* App-style fixed bottom tab bar — mobile only (the top nav serves desktop). */
.bottom-nav{display:none}
@media(max-width:820px){
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);border-top:1px solid var(--hair);box-shadow:0 -6px 22px rgba(20,26,33,.09);padding-bottom:env(safe-area-inset-bottom)}
  .bottom-nav.hide{display:none}
  .tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px 7px;border:none;background:none;cursor:pointer;color:var(--muted);font-family:inherit;font-size:.66rem;font-weight:600;letter-spacing:.01em;position:relative;transition:color .18s,transform .12s;-webkit-tap-highlight-color:transparent}
  .tab-item svg{width:23px;height:23px;stroke-width:2}
  .tab-item.active{color:var(--brand-d)}
  .tab-item.active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:32px;height:3px;border-radius:0 0 4px 4px;background:var(--brand)}
  .tab-item:active{transform:scale(.93)}
  /* The אזור אישי / התחבר access moved to the bottom bar — drop the duplicate top pill on phones. */
  .nav-actions .dark-pill{display:none}
}
@media(max-width:820px){
  main{width:100%;margin:0 auto 64px;padding:0 12px}
  body:not([data-page="chats"]):not([data-page="auth"]) main{padding-bottom:env(safe-area-inset-bottom)}
  .hero,.strip{margin-inline:-12px;width:calc(100% + 24px)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Home preview shows 4 cars on phones (2×2); the full list on /#cars is unaffected. */
  body[data-page="home"] .fleet-zone .grid > .car:nth-child(n+5){display:none}
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .steps-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr 1fr}
  .owner-cta-rich{flex-direction:column;align-items:center;text-align:center;gap:12px;padding:18px 20px}
  .owner-cta-features{flex:0 0 auto;width:100%;justify-content:center}
  .info-section{margin-top:38px}
  .panel-head-actions{flex-direction:column;align-items:stretch;gap:12px}
  .panel-head-actions .chips{width:100%}
  .panel-head-actions .chips .btn{flex:1;text-align:center}
  .row,.verification-row{grid-template-columns:1fr}
  .verification-row .chips{width:100%}
  .verification-row .chips .btn,.verification-row .chips label{flex:1;text-align:center;justify-content:center}
  .form-grid{grid-template-columns:1fr}
  .topbar{padding-inline:14px}
  .dashboard-shell{gap:12px;margin-top:14px}
  .dashboard-head{flex-direction:column;align-items:flex-start;padding:20px}
  .dashboard-panel{padding:16px;min-height:70vh}
  .booking-card .chips{gap:8px}
  .booking-card .chips .btn{flex:1 1 44%;text-align:center}
  .booking-main{flex-direction:column}
  /* Design spec §16: desktop dialogs become BOTTOM SHEETS on phones — full width, anchored to the
     bottom, 24px top radius, drag-handle, sticky header. Long flows (chat/camera) stay full-screen. */
  .modal{width:100%;max-height:94vh;max-height:94dvh;padding:0 16px calc(16px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;align-self:end;animation:sheetUp .32s var(--ease)}
  .modal::before{content:"";display:block;width:36px;height:4px;border-radius:99px;background:var(--line-2);margin:8px auto 0}
  .modal-head{margin:0 -16px 14px;padding:12px 16px;min-height:56px}
  .modal-backdrop{place-items:end center;padding:0}
  .media-grid{grid-template-columns:1fr}
  .table-wrap{max-width:100%}
  table.data{min-width:480px}
  .filter-bar{position:static;overflow-x:auto;flex-wrap:nowrap;padding:12px;scrollbar-width:none}
  .filter-bar::-webkit-scrollbar{display:none}
  .filter-bar select,.filter-bar .f-search{flex:0 0 auto}
  .filter-bar .f-search{flex:1 0 60%}
  .chat-shell{grid-template-columns:1fr;height:calc(100vh - 140px);height:calc(100dvh - 140px);position:relative;margin-top:14px}
  .chat-pane{position:absolute;inset:0;transform:translateX(-100%);transition:transform .25s var(--ease);z-index:2;background:var(--surface)}
  .chat-shell.show-pane .chat-pane{transform:translateX(0)}
  .chat-back{display:grid;place-items:center}
  .fleet-zone::after{top:130px;font-size:2.8rem;letter-spacing:.04em}
  .fleet-zone::before{inset:14px -6px}
  .see-all .btn{width:100%}
}
@media(max-width:480px){
  .brand span{display:none}
  .kpis,.kpis.two{grid-template-columns:1fr 1fr}
  .kpi{padding:16px}
  .kpi b{font-size:1.4rem}
  .nav-btn,.btn{padding:10px 13px;font-size:.85rem}
  .dashboard-head{padding:18px}
  .dashboard-head h1{font-size:23px}
  .dashboard-tabs .tab{padding:11px 12px;font-size:.85rem}
  .modal{border-radius:14px}
  .role-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .owner-cta-features{grid-template-columns:1fr 1fr}
  .photo-grid{grid-template-columns:1fr 1fr}
  .detail-summaries{grid-template-columns:1fr}
  .quick-search{grid-template-columns:1.3fr .7fr;border-radius:17px;padding:10px}
  .quick-search .btn{grid-column:1/-1}
  .hero h1{font-size:clamp(2rem,10vw,3rem)}
  .hero-stats{margin-top:30px}
  .hstat b{font-size:1.35rem}
  .strip-in{gap:20px;padding:13px 16px}
}

/* Mobile scale (Option A — balanced): the whole phone layout shrinks together (root-relative) so it
   adapts to the device; desktop (>600px) is unchanged. Chosen with the user from side-by-side previews. */
@media(max-width:600px){
  :root{font-size:15px}
  .hero-in{padding:46px 18px 128px}
  .hero .kicker{margin-bottom:14px}
  .hero h1{font-size:clamp(1.55rem,7vw,2.05rem);max-width:20ch}
  .hero-copy{font-size:.95rem;margin:10px auto 18px}
  .hero-stats{margin-top:26px}
}

/* iOS safe areas */
@supports(padding:max(0px)){
  .topbar{padding-inline:max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-left))}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;filter:none}
  .reveal>.steps-grid>*,.reveal>.trust-grid>*{opacity:1;transform:none}
}

/* ---------- custom big calendar picker ---------- */
.date-field{position:relative;display:grid;gap:0;text-align:right}
.date-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted-2);padding:11px 14px;font-weight:600;min-height:48px;transition:border-color .2s,box-shadow .2s}
.date-btn.has-val{color:var(--text)}
.date-btn:hover{border-color:var(--brand)}
.field .date-btn,.modal .date-btn{width:100%}
.modal .df-label,.field .df-label{font-weight:500;font-size:.8rem;letter-spacing:.06em;display:block;margin-bottom:7px}
.cal-pop{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:120;width:min(340px,92vw);background:var(--surface);border:1px solid var(--hair);border-radius:18px;box-shadow:0 30px 80px rgba(10,14,19,.3);padding:16px;animation:pop .18s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-head b{font-size:1.05rem}
.cal-nav{width:38px;height:38px;border:none;border-radius:10px;background:var(--bg2);color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer;transition:background .15s}
.cal-nav:hover{background:rgba(63,107,142,.15)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{text-align:center;font-size:.72rem;font-weight:800;color:var(--brand-d);padding-bottom:4px}
.cal-day{height:42px;border:none;border-radius:10px;background:transparent;font-size:1rem;font-weight:600;color:var(--text);cursor:pointer;transition:background .12s,color .12s}
.cal-day:hover:not(:disabled){background:var(--bg2)}
.cal-day.today{box-shadow:inset 0 0 0 1.5px var(--brand)}
.cal-day.sel{background:var(--brand);color:#fff}
.cal-day:disabled{color:var(--muted-2);opacity:.45;cursor:default}
/* Already booked — struck through so it reads as "taken", not merely "in the past". */
.cal-day.taken{color:var(--danger);opacity:.55;text-decoration:line-through}
.quick-search .date-field{text-align:right}
@media(max-width:900px){ .cal-pop{inset-inline-end:auto;inset-inline-start:0} }

/* ---------- round profile avatars (Instagram-style) ---------- */
.avatar{border-radius:50%;object-fit:cover;display:inline-block;flex:none;vertical-align:middle;background:var(--bg3)}
.avatar-fallback{display:inline-grid;place-items:center;background:#232A33;color:#fff;font-weight:800}
.avatar-row{display:flex;align-items:center;gap:18px;margin:0 0 18px;background:var(--bg2);border-radius:18px;padding:16px 18px}
.avatar-row .avatar,.avatar-row .avatar-fallback{border:3px solid #fff;box-shadow:0 0 0 3px transparent,0 6px 18px rgba(27,34,43,.18);background-clip:padding-box;position:relative}
.avatar-row{position:relative}
.avatar-row .avatar,.avatar-row .avatar-fallback{outline:3px solid transparent;box-shadow:0 0 0 2.5px #fff,0 0 0 6px #E9A93D,0 6px 18px rgba(27,34,43,.2)}
.avatar-actions{display:grid;gap:8px;justify-items:start}
.avatar-actions b{font-size:.95rem}
.dash-head-controls .avatar,.dash-head-controls .avatar-fallback{border:2px solid rgba(255,255,255,.35)}
.with-avatar{display:flex;align-items:center;gap:10px}
.chat-item>.avatar,.chat-item>.avatar-fallback{flex:none}

/* ---------- chat-style photo suggestion in the car form ---------- */
.suggest-bubble{display:flex;gap:14px;align-items:center;margin:12px 0;padding:13px 15px;max-width:520px;
  background:rgba(63,107,142,.08);border:1px solid rgba(63,107,142,.2);border-radius:18px 18px 18px 5px;animation:fadeUp .3s var(--ease)}
.suggest-img{width:110px;height:74px;object-fit:cover;border-radius:12px;flex:none;box-shadow:0 6px 16px rgba(27,34,43,.18)}
.suggest-text{display:grid;gap:4px}
.suggest-text b{font-size:.92rem}
.suggest-text small{color:var(--muted)}
.suggest-text .chips{margin-top:6px}
.suggest-bubble.typing{width:90px;justify-content:center;padding:16px}
.suggest-bubble .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);opacity:.4;animation:blink 1.2s infinite}
.suggest-bubble .dot:nth-child(2){animation-delay:.2s}
.suggest-bubble .dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media(max-width:560px){ .suggest-bubble{flex-direction:column;align-items:flex-start} .suggest-img{width:100%;height:120px} }

/* ---------- single nav bubble ---------- */
.nav-btn.pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:10px 20px;color:#fff;font-weight:600;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 14px rgba(10,14,19,.25)}
.nav-btn.pill:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}

/* ---------- clickable avatar + round cropper ---------- */
.avatar-click{position:relative;cursor:pointer;display:inline-block;flex:none;border:none;background:none;padding:0}
.avatar-click .avatar-cam{position:absolute;bottom:0;left:4px;width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#5A86AA,#3F6B8E);color:#fff;display:grid;place-items:center;font-size:.95rem;border:2.5px solid #fff;box-shadow:0 4px 12px rgba(27,34,43,.35)}
.avatar-click:hover .avatar,.avatar-click:hover .avatar-fallback{filter:brightness(.9)}
.crop-stage{display:flex;justify-content:center;margin:8px 0 16px}
.crop-viewport{border-radius:50%;overflow:hidden;position:relative;touch-action:none;background:#0F141B;cursor:grab;
  box-shadow:0 0 0 3px #fff,0 0 0 7px var(--accent),0 18px 44px rgba(10,14,19,.3)}
.crop-viewport:active{cursor:grabbing}
.crop-viewport img{position:absolute;top:0;left:0;max-width:none;user-select:none;-webkit-user-select:none;pointer-events:none}
.crop-zoom-row{display:flex;align-items:center;gap:12px;max-width:320px;margin:0 auto}
.crop-zoom-row input{flex:1;accent-color:var(--brand);height:30px}
.crop-zoom-row span{font-size:1.4rem;font-weight:800;color:var(--muted)}
.crop-hint{text-align:center;margin:8px 0 14px;font-size:.82rem}

/* ================= APPLE DESIGN LAYER ================= */
/* personal areas get their own grouped-settings background (iOS style) */
body[data-page="dashboard"],body[data-page="chats"]{background:#EDF0F6}
body[data-page="dashboard"]::before,body[data-page="chats"]::before{background:
  radial-gradient(800px 420px at 88% -5%, rgba(63,107,142,.12), transparent 60%),
  radial-gradient(700px 420px at 8% 105%, rgba(233,169,61,.08), transparent 65%),
  linear-gradient(180deg,#F4F6FB,#E7EBF3)}
/* iOS segmented control for tabs */
.dashboard-tabs{background:rgba(118,118,128,.14);border:none;padding:5px;border-radius:14px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.dashboard-tabs .tab{color:#4A4A52;font-weight:600;border-radius:10px;padding:10px 16px;letter-spacing:-.01em}
.dashboard-tabs .tab.active{background:var(--surface);color:var(--text);box-shadow:0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.05)}
.tabs{background:rgba(118,118,128,.14)}
.tabs .tab.active{background:var(--surface);color:var(--text);box-shadow:0 3px 8px rgba(0,0,0,.12)}
/* hairline separators + generous radii */
.card{border-radius:18px}
table.data td{border-bottom:.5px solid rgba(60,60,67,.18)}
.summary{border-bottom:.5px solid rgba(60,60,67,.18)}
.mini-row{border-bottom:.5px solid rgba(60,60,67,.14)}
h1,h2{letter-spacing:-.03em}
.dashboard-head{border-radius:18px}
.dashboard-panel{border-radius:18px}
.btn{border-radius:12px}
.field input,.field select,.field textarea{border-radius:12px;background:rgba(118,118,128,.07);border-color:transparent}
.field input:focus,.field select:focus,.field textarea:focus{background:var(--surface)}
/* phone: country + dial code picker */
.phone-row{display:flex;gap:8px}
.phone-row select{flex:0 0 168px;max-width:46%;direction:ltr;text-align:left}
.phone-row input{flex:1;direction:ltr;text-align:left}
/* On phones the dial-code select + number don't both fit side by side — the country name clips and each half
   is cramped. Stack them so each takes the full width: the full country label is readable and the number
   field is roomy. */
@media(max-width:560px){
  .phone-row{flex-direction:column;gap:8px}
  .phone-row select{flex:none;width:100%;max-width:none}
  .phone-row input{flex:none;width:100%}
}

.ver-locked{cursor:default;opacity:.92}
.ver-locked:hover{transform:none;border-color:rgba(63,107,142,.25);box-shadow:0 12px 30px rgba(25,35,45,.07)}
#profile-form input:disabled,#profile-form select:disabled{opacity:.75;color:var(--muted);cursor:not-allowed}

/* ================= SERIOUS PERSONAL-AREA THEME ================= */
body[data-page="dashboard"],body[data-page="chats"]{background:#1A212B}
body[data-page="dashboard"]::before,body[data-page="chats"]::before{background:
  radial-gradient(900px 460px at 85% -10%, rgba(85,127,161,.14), transparent 60%),
  linear-gradient(180deg,#222B37 0%,#171D26 100%)}
body[data-page="dashboard"] .dashboard-head,body[data-page="chats"] .dashboard-head{border:1px solid rgba(255,255,255,.08)}
/* Inside the personal area the top-bar actions are redundant (its own header + tabs handle it). */
body[data-page="dashboard"] .nav-actions{display:none}
body[data-page="dashboard"] .dashboard-tabs{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
body[data-page="dashboard"] .dashboard-tabs .tab{color:#AEB6C0}
body[data-page="dashboard"] .dashboard-tabs .tab.active{background:var(--surface);color:var(--text)}
body[data-page="dashboard"] .fab{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 34px rgba(0,0,0,.5)}
/* Fixed in the top-right corner so it never scrolls away on long dashboards. */
.dash-close{position:fixed;top:74px;inset-inline-start:14px;z-index:61;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(20,26,34,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:1rem;display:grid;place-items:center;cursor:pointer;transition:background .15s;box-shadow:0 6px 20px rgba(0,0,0,.32)}
.dash-close:hover{background:rgba(40,48,60,.95)}
@media(max-width:820px){ .dash-close{top:66px} }
.avatar-btn{border:none;background:none;padding:0;cursor:pointer;border-radius:50%}
.avatar-btn:hover .avatar,.avatar-btn:hover .avatar-fallback{filter:brightness(.9)}
/* In-flow (not floating) so it never overlaps the page title; sits cleanly above it. */
/* Back is navigation, not a call to action. A white pill with a shadow gave a secondary control
   more weight than the page title it sits above — and it read as detached, floating in whitespace.
   Same treatment as .up-back so the two back controls in the app finally match. */
.page-back{display:inline-flex;align-items:center;gap:7px;margin:14px 0 2px;
  background:none;border:none;border-radius:8px;padding:6px 2px;
  font-weight:600;font-size:.86rem;color:var(--muted);cursor:pointer;min-height:0;
  transition:color .15s}
.page-back:hover{color:var(--brand-d)}
.page-back:active{transform:translateX(2px)}
/* professional svg icon sizing (replaces emojis) */
.role-emoji svg{width:34px;height:34px;stroke:var(--brand)}
.trust-icon svg{width:22px;height:22px;stroke:var(--brand-d)}
.trust-card:nth-child(1) .trust-icon svg{stroke:#1C7C4F}
.trust-card:nth-child(3) .trust-icon svg{stroke:#A05A00}
.trust-card:nth-child(4) .trust-icon svg{stroke:#7A66C9}
.chat-item-emoji svg{width:20px;height:20px;stroke:#fff}
.notif-icon svg{width:20px;height:20px;stroke:var(--brand-d)}
.wizard-emoji svg,.wiz-ic svg{width:52px;height:52px;stroke:var(--brand-d)}
.wiz-ic{display:block;margin:0 auto 10px;width:52px}
.wiz-ic.ok-ic svg{stroke:var(--ok)}
.avatar-cam svg{width:16px;height:16px;stroke:#fff}
.date-ic svg{width:18px;height:18px;stroke:var(--muted)}
.date-btn{justify-content:space-between}
.chat-empty-ic svg{width:44px;height:44px;stroke:var(--muted-2)}
.chat-empty-ic{display:block;margin-bottom:10px}
.icon-btn svg{width:16px;height:16px}

/* ================= BIG TOP BAR + LOGO ================= */
.topbar{padding:14px 5vw}
.brand{gap:10px;cursor:pointer}
.brand img{width:38px;height:38px;border-radius:10px;padding:3px}
.brand span{font-size:1.05rem;white-space:nowrap;letter-spacing:.07em;background:linear-gradient(90deg,#FFFFFF 55%,#E9C46A);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-btn.pill{padding:14px 30px;font-size:1.08rem;font-weight:700}
@media(max-width:480px){ .brand span{display:inline;font-size:.92rem} .topbar{padding:12px 14px} .nav-btn.pill{padding:12px 22px;font-size:1rem} }

/* ================= CONTROL-PANEL DASHBOARD ================= */
.dashboard-head{padding:34px 36px}
.dashboard-head h1{font-size:clamp(30px,4.4vw,46px)}
.dashboard-tabs .tab{display:flex;align-items:center;gap:9px}
.tab-ic{display:grid;place-items:center}
.dashboard-tabs .tab svg{width:18px;height:18px}
/* desktop: vertical control panel pinned to the LEFT half */
@media(min-width:1000px){
  .dashboard-shell{display:grid;grid-template-columns:minmax(0,1fr) 270px;grid-template-rows:auto 1fr;gap:20px;align-items:start}
  .dashboard-head{grid-column:1;grid-row:1}
  .dashboard-tabs{grid-column:2;grid-row:1 / span 2;position:sticky;top:104px;flex-direction:column;align-items:stretch;gap:6px;padding:12px;border-radius:20px}
  .dashboard-tabs .tab{justify-content:flex-start;padding:14px 16px;border-radius:13px;font-size:.95rem}
  .dashboard-tabs .tab svg{width:20px;height:20px}
  .dashboard-panel{grid-column:1;grid-row:2}
  .nav-footer{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16)}
}
/* mobile: frosted iOS bottom tab bar */
@media(max-width:820px){
  /* SOLID (not frosted) + fixed. backdrop-filter made it see-through AND made iOS Safari jitter it during
     momentum scroll ("זזה כל הזמן") — a solid background fixes both. */
  .dashboard-tabs{position:fixed;bottom:0;inset-inline:0;z-index:80;border-radius:18px 18px 0 0;margin:0;
    background:#181D26;
    border:none;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-around;gap:0;box-shadow:0 -6px 22px rgba(0,0,0,.28);
    padding:10px 8px max(10px,env(safe-area-inset-bottom))}
  .dashboard-tabs .tab{flex-direction:column;gap:4px;padding:6px 3px;font-size:.7rem;letter-spacing:-.01em;color:#8E97A3;border-radius:12px;flex:1;min-width:0}
  .dashboard-tabs .tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dashboard-tabs .tab svg{width:22px;height:22px}
  .dashboard-tabs .tab{position:relative}
  .dashboard-tabs .tab.active{background:transparent;box-shadow:none;color:#fff}
  .dashboard-tabs .tab.active svg{stroke:#E9C46A}
  .dashboard-tabs .tab.active::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 3px 3px;background:#E9C46A}
  .dashboard-shell{padding-bottom:92px}
  body[data-page="dashboard"] .fab{bottom:96px}
  /* Slim the admin/owner header on phones so the title + avatar breathe (the avatar is inline-sized to 60). */
  .dash-head-controls .avatar,.dash-head-controls .avatar-fallback{width:46px!important;height:46px!important;font-size:19px!important}
  .dashboard-head h1{font-size:25px}
  .dashboard-head{padding:20px 18px}
  /* Renter/owner personal area uses the DYNAMIC site bottom bar (#bottom-nav) instead of the built-in tab bar;
     the admin keeps its own fixed .dashboard-tabs bar. */
  body[data-dash-role="renter"] .dashboard-tabs,body[data-dash-role="owner"] .dashboard-tabs,body[data-dash-role="admin"] .dashboard-tabs{display:none}
}
.wizard-btn svg{width:30px;height:30px;stroke:var(--brand-d)}

.role-selected{border-color:var(--brand)!important;background:var(--surface)!important;box-shadow:0 10px 30px rgba(63,107,142,.18)!important}
#cp-form{margin-top:16px}

.forgot-pw{display:block;margin:12px auto 0;padding:4px;border:none;background:none;color:var(--brand);font-size:.84rem;font-weight:600;cursor:pointer}
.forgot-pw:hover{text-decoration:underline}

/* ================= REFERENCE TOP BAR ================= */
#main-nav{display:flex;flex:1;align-items:center;justify-content:space-between;gap:16px;margin-inline-start:34px}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-link{background:none;border:none;color:#C9CFD6;font-weight:500;font-size:.93rem;padding:6px 2px;cursor:pointer;position:relative;letter-spacing:.01em;transition:color .18s}
.nav-link:hover{color:#fff}
.nav-link.active{color:#E9C46A;font-weight:700}
.nav-link.active::after{content:"";position:absolute;bottom:-4px;inset-inline:2px;height:2px;border-radius:2px;background:#E9C46A}
.nav-actions{display:flex;gap:10px;align-items:center}
.dark-pill{background:#11151B;border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:99px;padding:12px 26px;font-weight:700;font-size:.92rem;cursor:pointer;transition:all .2s}
.dark-pill:hover{border-color:rgba(255,255,255,.4);transform:translateY(-1px)}
.gold-pill{background:#E9C46A;border:none;color:#241C05;border-radius:99px;padding:12px 22px;font-weight:800;font-size:.92rem;cursor:pointer;box-shadow:0 6px 18px rgba(233,196,106,.3);transition:all .2s}
.gold-pill:hover{background:#F0D084;transform:translateY(-1px)}
@media(max-width:900px){
  .nav-links{display:none}
  #main-nav{margin-inline-start:0;justify-content:flex-end}
  .dark-pill,.gold-pill{padding:11px 16px;font-size:.85rem}
}

/* gold indicator on ALL top links (hover + active) */
.nav-link::after{content:"";position:absolute;bottom:-4px;inset-inline:2px;height:2px;border-radius:2px;background:#E9C46A;transform:scaleX(0);transform-origin:center;transition:transform .22s var(--ease)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link:hover{color:#E9C46A}
.brand img{background:none;border:none;padding:0;width:42px;height:42px;border-radius:11px;box-shadow:0 4px 14px rgba(0,0,0,.3)}

/* ================= FINAL MOBILE OVERRIDES (must be last — wins the cascade) ================= */
@media(max-width:820px){
  /* top bar: one tight row, never wrap a pill into a circle */
  .topbar{padding:10px 12px;gap:8px}
  .brand{gap:8px}
  .brand img{width:34px;height:34px}
  .brand span{font-size:.9rem}
  #main-nav{gap:6px;margin-inline-start:0;flex:1;justify-content:flex-end}
  .nav-links{display:none}
  .nav-actions{gap:7px}
  .nav-btn.pill,.dark-pill,.gold-pill{white-space:nowrap;padding:9px 14px;font-size:.8rem;font-weight:700;border-radius:99px;min-height:0}

  /* owner CTA: force a real single column (reset the explicit grid-column placement) */
  .owner-cta-rich{grid-template-columns:1fr!important;text-align:center;padding:24px}
  .owner-cta-main,.owner-cta-features{grid-column:auto!important}
  .owner-cta-features{grid-template-columns:1fr 1fr}
  .owner-cta-main .kicker,.owner-cta-main .eyebrow,.owner-cta-main h2,.owner-cta-main p{text-align:center}
  .owner-cta-main p{margin-inline:auto}

  /* dashboard header controls: compact, wrap neatly */
  .dashboard-head{padding:18px 16px;gap:14px}
  .dash-head-actions .btn{padding:11px 13px;font-size:.82rem}
  .dash-close{width:34px;height:34px}
  .avatar-btn .avatar,.avatar-btn .avatar-fallback{width:46px!important;height:46px!important}

  /* data tables: horizontal scroll instead of clipping columns */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
  table.data{min-width:680px}
  .panel-head-actions .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .panel-head-actions .chips .btn{width:100%}
}
@media(max-width:400px){
  .brand span{font-size:.82rem}
  .nav-btn.pill,.dark-pill,.gold-pill{padding:8px 11px;font-size:.74rem}
  .owner-cta-features{grid-template-columns:1fr}
}

/* dashboard/chat containers must NOT carry a transform (fadeUp) — it breaks the
   position:fixed mobile bottom tab bar. Use an opacity-only entrance instead. */
.dashboard-shell,.chat-shell{animation:fadeIn .4s var(--ease) both!important}

/* ---------- device/capability adaptation (kept last so it wins over the responsive overrides) ---------- */
/* iPhone notch: the sticky header must never sit under the status bar / notch, at any breakpoint. */
.topbar{padding-top:max(14px,env(safe-area-inset-top))}
/* Weaker devices / users who prefer less motion: drop the heavy blur + shimmer + entrance animations. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .car::after{display:none}
}
@media (update: slow), (max-width:380px){
  .topbar,.dashboard-tabs,.chat-composer,.chat-list{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* ---------- data tables become CARDS on mobile (no cramped horizontal table) ---------- */
@media (max-width:760px){
  .table-wrap{overflow:visible;-webkit-overflow-scrolling:auto;border:0;background:transparent}
  table.data,table.data tbody,table.data tr,table.data td{display:block;width:auto;min-width:0;max-width:100%}
  table.data thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}  /* hide header row */
  table.data tr{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px 16px;margin-bottom:14px;box-shadow:0 6px 16px rgba(12,20,32,.06)}
  table.data tr.row-blocked{border-color:rgba(217,120,40,.5)}
  table.data td{display:flex;justify-content:space-between;align-items:center;gap:14px;border:0;border-bottom:1px solid var(--hair);padding:11px 0;min-height:44px;text-align:start;white-space:normal;word-break:break-word}
  table.data tr td:last-child{border-bottom:0}
  table.data td::before{content:attr(data-label);font-weight:700;color:var(--brand-d);font-size:.76rem;letter-spacing:.02em;flex:0 0 auto}
  table.data td.t-main{font-size:1.08rem;font-weight:700}
  table.data td .btn.outline{width:auto;padding:9px 16px;white-space:nowrap}
  table.data .t-actions{justify-content:flex-end;flex-wrap:wrap;gap:8px}
}

/* Admin USERS list as compact cards in a responsive grid — no wide table, no horizontal scroll at any
   width (1 card/row on a phone, 2–3 across on the dashboard). Same info as the desktop table. */
.admin-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.auc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 15px;box-shadow:0 6px 16px rgba(12,20,32,.06)}
.auc.auc-blocked{border-color:rgba(217,120,40,.55)}
.auc-head{display:flex;align-items:center;gap:11px}
.auc-ava{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#3F6B8E,#28455c);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1rem;text-transform:uppercase}
.auc-id{flex:1;min-width:0}
.auc-name{display:block;font-weight:700;font-size:1.02rem;color:var(--text);line-height:1.2}
.auc-role{font-size:.8rem;color:var(--muted)}
.auc-contact{margin:11px 0 12px;display:flex;flex-direction:column;gap:5px}
.auc-contact span{font-size:.88rem;color:var(--text);word-break:break-all}
.auc-contact .lab{color:var(--muted);font-weight:600;margin-inline-end:6px}
.auc-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:12px}
.auc-actions .btn.outline{padding:8px 13px;font-size:.82rem}
.auc-icons{display:flex;gap:6px;margin-inline-start:auto}
/* Phone: TWO cards per row. The card restacks so it stays readable at ~half-screen width. */
@media(max-width:600px){
  .admin-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}   /* minmax(0,…) lets columns shrink so long emails wrap instead of overflowing */
  .auc{padding:11px 11px 12px;min-width:0}
  .auc *{min-width:0}
  .auc-head{flex-wrap:wrap;gap:7px}
  .auc-ava{width:36px;height:36px;flex:0 0 36px;font-size:.88rem}
  .auc-head .pill{font-size:.58rem;padding:3px 7px;margin-inline-start:auto}
  .auc-id{flex-basis:100%;order:2}                 /* name+role drop to their own row, full width */
  .auc-name{font-size:.9rem;line-height:1.16}
  .auc-role{font-size:.7rem}
  .auc-contact{margin:8px 0 9px;gap:3px}
  .auc-contact span{font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .auc-contact .lab{display:none}   /* redundant at half-width — the @ / +1 make email vs phone obvious */
  .auc-actions{gap:6px;padding-top:9px}
  .auc-actions .btn.outline{padding:7px 6px;font-size:.68rem;flex:1 1 42%}
  .auc-icons{width:100%;justify-content:space-between;margin:2px 0 0;flex-wrap:wrap}
  /* min-width/height must be repeated: the global 44px touch-target minimum beats width alone,
     and 4×44px cannot fit a half-width card — the delete button was clipped off the edge. */
  .auc-icons .icon-btn{width:34px;height:34px;min-width:34px;min-height:34px}
}

/* ---------- Rental modes + date-search pricing ---------- */
.mode-badge{position:absolute;bottom:12px;inset-inline-start:12px;background:rgba(27,34,43,.82);color:#fff;font-weight:700;font-size:.7rem;padding:5px 11px;border-radius:99px;letter-spacing:.02em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mode-badge.lg{position:static;display:inline-block;background:transparent;color:var(--brand-d);
  border:1px solid var(--line-2);font-size:.76rem;font-weight:600;padding:5px 13px}
.mode-line{font-size:.82rem;font-weight:700;color:var(--brand-d);margin:2px 0 4px}
.period-est{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;background:rgba(63,107,142,.08);border:1px solid rgba(63,107,142,.2);border-radius:12px;padding:9px 13px;margin:8px 0}
.period-est span{font-size:.76rem;color:var(--muted);font-weight:600}
.period-est b{font-size:1.2rem;color:var(--brand-d);font-weight:800}
.period-est small{font-size:.74rem;color:var(--muted);margin-inline-start:auto}
.period-note{background:rgba(200,110,30,.1);border:1px solid rgba(200,110,30,.32);color:#8f5410;border-radius:12px;padding:9px 13px;margin:8px 0;font-size:.82rem;font-weight:600;line-height:1.4}
.car-nofit{opacity:.74}
.car-nofit .car-photo img{filter:grayscale(.35)}
.period-search{display:grid;grid-template-columns:1.6fr .8fr 1.6fr .8fr auto;gap:10px;align-items:end;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:14px;box-shadow:0 6px 16px rgba(12,20,32,.05)}
.period-search .hour-field{display:grid;gap:6px;text-align:right;margin:0}
.period-search .hour-field span{font-size:.74rem;font-weight:800;color:var(--muted);letter-spacing:.02em}
.period-search select,.period-search .date-btn{width:100%;height:50px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:var(--surface);color:var(--text);font-size:1rem;font-weight:600}
.period-search .df-label{font-size:.74rem;font-weight:800;color:var(--muted);display:block;margin-bottom:6px;text-align:right}
.period-search .date-field{margin:0}
.period-search .btn{height:50px;white-space:nowrap}
.period-active{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:rgba(63,107,142,.08);border:1px solid rgba(63,107,142,.2);border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:.86rem;color:var(--brand-d);line-height:1.4}
.period-active b{font-weight:800}
.link-btn{background:none;border:0;color:var(--brand);font-weight:800;cursor:pointer;text-decoration:underline;font-size:.86rem;padding:0;margin-inline-start:auto;white-space:nowrap}
.mode-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.mode-opt{position:relative;cursor:pointer}
.mode-opt input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.mode-opt-in{display:flex;flex-direction:column;gap:4px;height:100%;border:1.5px solid var(--line);border-radius:14px;padding:14px 12px;background:var(--surface);transition:border-color .16s,box-shadow .16s,background .16s}
.mode-opt-in b{font-size:.9rem;font-weight:700;color:var(--text)}
.mode-opt-in small{font-size:.76rem;color:var(--muted);line-height:1.35}
.mode-opt input:checked + .mode-opt-in{border-color:var(--brand);background:rgba(63,107,142,.06);box-shadow:0 0 0 3px rgba(63,107,142,.12)}
.mode-opt input:focus-visible + .mode-opt-in{border-color:var(--brand)}
.booking-est{margin:4px 0 8px}
.booking-est:empty{display:none}
@media (max-width:720px){
  .period-search{grid-template-columns:1fr 1fr;gap:9px}
  .period-search .btn{grid-column:1 / -1}
  .mode-picker{grid-template-columns:1fr}
}

/* whole car card is clickable (a click anywhere but an inner control opens the detail) */
.card.car{cursor:pointer}
/* "מחיר לפי פנייה" — form toggle + detail contact CTA */
.price-request-toggle{display:flex;gap:10px;align-items:flex-start;background:rgba(63,107,142,.06);border:1px solid rgba(63,107,142,.18);border-radius:12px;padding:12px 14px;margin-bottom:12px;cursor:pointer;font-size:.86rem;line-height:1.45;color:var(--text)}
.price-request-toggle input{margin-top:2px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--brand)}
.price-request-toggle b{color:var(--brand-d)}
.price-contact-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;background:rgba(63,107,142,.08);border:1px solid rgba(63,107,142,.22);border-radius:14px;padding:14px 16px;margin:12px 0}
.price-contact-cta b{display:block;color:var(--brand-d);font-size:1rem;margin-bottom:2px}
.price-contact-cta small{color:var(--muted);font-size:.82rem}
.price-contact-cta .btn{white-space:nowrap}
.period-note.contact{background:rgba(63,107,142,.08);border-color:rgba(63,107,142,.24);color:var(--brand-d)}

/* prominent "כל הרכבים באתר" button on the home page */
.see-all-btn{font-size:1.12rem;font-weight:800;padding:16px 42px;border-radius:16px;letter-spacing:.01em;box-shadow:0 14px 32px rgba(63,107,142,.42)}
.see-all-btn:hover{transform:translateY(-2px)}
/* empty-results message spans the whole grid so it sits centered (not stuck in the first column) */
.grid > .empty{grid-column:1 / -1;padding:64px 30px;font-size:1.05rem;display:flex;align-items:center;justify-content:center;min-height:200px}
/* chats page: back-to-personal-area button + header row */
.chat-list-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.chat-list-head h2{margin:0;flex:1;min-width:0}
.chat-list-head #chat-search{flex-basis:100%;margin-top:2px}
.chat-page-back{background:rgba(255,255,255,.12);border:none;color:#fff;font-size:1.25rem;cursor:pointer;width:36px;height:36px;border-radius:9px;flex:none;display:grid;place-items:center;transition:background .18s}
.chat-page-back:hover{background:rgba(255,255,255,.22)}

/* TWO cars per row on phones — compact but complete (the whole site is mobile-first). Every card
   internal is scaled down so two ~160px cards sit side by side without crowding or overflow. */
@media (max-width:600px){
  .grid{gap:10px}
  .car{min-width:0}
  .car-photo{aspect-ratio:4/3}
  .car-body{padding:10px 11px;gap:6px}
  .car-body h3{font-size:.9rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* These were shrunk to make the 2-per-row grid fit and overshot: the spec line rendered at 9.9px,
     the per-day suffix at 8.25px and the badges at 8.7–9px. The root font here is 15px, so a .6rem
     rule is 9px on screen — below anything readable at arm's length. Raised to ~10.2–11.4px, which
     still fits a 171px card. The grid itself is unchanged. */
  .car-specs{font-size:.76rem;gap:4px;font-weight:400}
  .rating{font-size:.74rem;letter-spacing:.5px}
  .car-title-row{gap:7px}
  .car-rate{font-size:.72rem;margin-top:1px}
  .car-go{display:none}          /* card is fully tappable on touch — the extra CTA text just crowds the price */
  .car-foot{padding-top:9px;gap:4px}
  .price{font-size:.98rem}
  .price small{font-size:.58em}
  .price-alt{font-size:.72rem}
  .car .btn{margin-top:2px;padding:9px 6px;font-size:.78rem;border-radius:9px}
  .car-badges{top:8px;inset-inline-start:8px;gap:4px}
  .avail-badge{font-size:.68rem;padding:4px 10px}
  .new-badge{font-size:.68rem;padding:4px 9px}
  .mode-badge{font-size:.66rem;padding:4px 9px;bottom:8px;inset-inline-start:8px}
  .has-video{font-size:.66rem;padding:3px 9px;bottom:8px}
}
/* Tablets fell into the phone rule: the 2-column grid is gated on max-width:820px, so a 768px
   tablet showed the same two cars per screen as a phone — with 367px-wide cards and huge photos.
   The 2×2 layout is meant for PHONES; from 601px up there is room for three. */
@media (min-width:601px) and (max-width:820px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Keep TWO columns on phones (user wants 4 cars per view = 2×2). Only fall back to a single
   column below ~320px — narrower than any current phone — so it never triggers in practice. */
@media (max-width:319px){
  .grid{grid-template-columns:1fr}
  .car-photo{aspect-ratio:16/9}
}

/* ================= REV101 MOBILE READINESS ================= */
.skip-link{position:fixed;top:max(8px,env(safe-area-inset-top));inset-inline-start:12px;z-index:500;background:var(--surface);color:var(--dark);padding:10px 16px;border-radius:10px;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.25);transform:translateY(-180%);transition:transform .18s}
.skip-link:focus{transform:translateY(0)}
.network-status{position:fixed;z-index:95;top:calc(max(14px,env(safe-area-inset-top)) + 58px);left:50%;transform:translateX(-50%);width:min(92vw,680px);padding:9px 14px;border-radius:12px;background:#7A3100;color:#fff;text-align:center;font-size:.82rem;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.24)}
.network-status[hidden]{display:none}
.password-field{display:flex;align-items:stretch;border-radius:12px;background:rgba(118,118,128,.07);overflow:hidden;border:1px solid transparent}
.password-field:focus-within{background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 4px rgba(63,107,142,.13)}
.password-field input{flex:1;min-width:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.password-field button{border:0;border-inline-start:1px solid var(--hair);background:transparent;color:var(--brand-d);font-weight:800;padding:0 14px;min-width:68px}
/* rev218: was an eyebrow + title + note stacked to 98px. The eyebrow repeated what the submit button
   already says, so the header is now title + note on one baseline. */
.booking-form-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:20px 0 12px}
.booking-form-head h3{margin:0}
.booking-form-head small{color:var(--muted);font-size:.78rem}
.booking-consent{display:flex;align-items:flex-start;gap:10px;margin:14px 0;padding:12px 13px;border:1px solid var(--hair);border-radius:12px;background:var(--bg-soft);font-size:.83rem;line-height:1.45;cursor:pointer}
.booking-consent input{width:20px;height:20px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--brand)}
.booking-consent a{color:var(--brand-d);font-weight:700;margin-inline:3px}
.upload-state{min-height:24px;margin:10px 0;color:var(--brand-d);font-size:.82rem;font-weight:700}
.mobile-booking-bar{display:none}
.camera-stage{position:relative;background:#0A0E13;border-radius:16px;overflow:hidden;min-height:280px;display:grid;place-items:center}
.camera-stage video{display:block;width:100%;max-height:62dvh;object-fit:cover;background:#0A0E13}
.camera-guide{position:absolute;inset:10%;border:2px solid rgba(255,255,255,.85);border-radius:14px;box-shadow:0 0 0 999px rgba(0,0,0,.12);pointer-events:none}
.camera-hint{text-align:center;color:var(--muted);font-size:.82rem;margin:10px 0}
.camera-actions{display:grid;grid-template-columns:1fr 78px 1fr;align-items:center;gap:12px;margin-top:12px}
.camera-shot{width:72px;height:72px;border-radius:50%;border:4px solid #fff;background:transparent;padding:5px;box-shadow:0 0 0 2px var(--dark);justify-self:center}
.camera-shot span{display:block;width:100%;height:100%;border-radius:50%;background:var(--surface);transition:transform .12s,background .12s}
.camera-shot:active span{transform:scale(.88);background:#E9C46A}

@media(max-width:820px){
  :root{--mobile-nav-height:68px}
  main{margin-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 18px)}
  .btn,.dark-pill,.gold-pill,.nav-btn,.close,.cal-nav,.chat-back,.chat-x,.chat-page-back,.icon-btn{min-height:44px}
  .close,.chat-back,.chat-x,.chat-page-back,.icon-btn{min-width:44px}
  .bottom-nav{min-height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));padding-inline:max(6px,env(safe-area-inset-left)) max(6px,env(safe-area-inset-right))}
  .tab-item{min-height:60px;font-size:.7rem}
  #toast{bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 12px);width:min(92vw,520px);text-align:center}
  body[data-page="auth"] #toast,body[data-page="chats"] #toast{bottom:calc(14px + env(safe-area-inset-bottom))}

  /* Bottom-sheet detail and forms: full width, stable under the mobile keyboard, with a sticky title. */
  .modal-backdrop{place-items:end center;padding:0;padding-top:max(12px,env(safe-area-inset-top))}
  .modal{width:100%;max-width:none;max-height:calc(100dvh - max(12px,env(safe-area-inset-top)));border-radius:24px 24px 0 0;padding:0 16px calc(18px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  .modal-head{position:sticky;top:0;z-index:4;margin:0 -16px 14px;padding:14px 16px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .modal-head .close{font-size:1.5rem;border-radius:12px}
  .gallery-main img,.modal-car-image{max-height:42dvh;object-fit:cover}
  .gallery-thumbs{scroll-snap-type:x proximity;padding-bottom:5px}
  .gallery-thumbs .thumb{scroll-snap-align:start;min-width:68px;min-height:58px}

  #booking-form{padding-bottom:4px}
  .booking-submit-main{display:none}
  .mobile-booking-bar{display:flex;position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));z-index:5;align-items:center;justify-content:space-between;gap:12px;margin:18px -16px -18px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--hair);box-shadow:0 -8px 24px rgba(20,26,33,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .mobile-booking-bar>div{min-width:0;display:grid;line-height:1.25}
  .mobile-booking-bar small{font-size:.68rem;color:var(--muted)}
  .mobile-booking-bar b{font-size:1rem;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-booking-bar .btn{flex:0 0 auto;padding-inline:18px}

  /* Calendar becomes a reachable bottom sheet; day cells remain large enough for touch. */
  .cal-pop{position:fixed;inset:auto 0 0 0;width:100%;max-height:min(82dvh,620px);overflow:auto;border-radius:24px 24px 0 0;padding:18px max(16px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));z-index:260;box-shadow:0 -24px 70px rgba(10,14,19,.32)}
  .cal-day{height:46px;min-width:40px}
  .cal-nav{width:44px;height:44px}

  /* Camera uses the full phone viewport and keeps the shutter in thumb reach. */
  .camera-modal{height:calc(100dvh - env(safe-area-inset-top));max-height:none;border-radius:0;padding-bottom:calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
  .camera-modal .modal-head{flex:0 0 auto}
  .camera-stage{flex:1;min-height:0;border-radius:14px}
  .camera-stage video{height:100%;max-height:none}
  .camera-actions{flex:0 0 auto;grid-template-columns:1fr 74px 1fr}
  .camera-actions .btn{padding:9px 8px;font-size:.76rem}

  .filter-bar{scroll-snap-type:x proximity;overscroll-behavior-inline:contain}
  .filter-bar>*{scroll-snap-align:start;min-height:44px}
  .period-search select,.period-search .date-btn{min-height:50px}
  .chat-composer{padding-bottom:max(11px,env(safe-area-inset-bottom))}
  .chat-composer input{min-height:44px}
}

/* A narrow phone needs one readable card per row. Larger phones/tablets retain the compact 2-column view. */
@media(max-width:430px){
  /* NOTE: the cars GRID stays 2 columns on phones (user requirement: 4 cars per view, 2×2 — see the
     ≤820px rule and the ≤319px single-column fallback). Codex's 1fr override was removed here. */
  .quick-search{grid-template-columns:minmax(0,1fr) 104px;gap:8px;padding:10px}
  .quick-search input,.quick-search select,.quick-search .date-btn{height:50px;font-size:.92rem}
  .quick-search .btn{height:50px}
  .period-search{grid-template-columns:minmax(0,1fr) 104px}
  .hero-stats{border-radius:14px}
  .hstat{padding:14px 8px}
}

/* Mobile filter sheet (audit #16): compact "סינון ומיון" button opens the filters in a bottom-sheet modal;
   the inline filter bar stays desktop-only. */
.filter-mobile{display:none}
@media(max-width:820px){
  .filter-bar{display:none}
  .filter-mobile{display:block;margin-bottom:14px}
  .filter-mobile .btn{min-height:48px;font-size:1rem}
}
.filter-sheet{display:flex;flex-direction:column;gap:12px;padding-bottom:4px}
.filter-sheet select{width:100%}
.sheet-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:6px}
.sheet-actions .btn{min-height:48px}

/* Inline field errors (audit #36) */
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.date-field.has-error .date-btn{border-color:var(--danger)}
.field-error{color:var(--danger);font-size:.84rem;font-weight:600;margin:6px 2px 0;line-height:1.4}

/* Deferred install tip (audit #55) — floats above the bottom tab bar, dismissible. */
.install-tip{position:fixed;inset-inline:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:10px 12px;box-shadow:0 14px 40px rgba(15,22,30,.18);font-size:.9rem;font-weight:600}
.install-tip span{flex:1;min-width:0}
.install-tip .btn{padding:9px 16px;min-height:44px}
.install-tip .install-x{border:0;background:var(--bg2);border-radius:10px;width:34px;height:34px;font-size:1.1rem;color:var(--muted);cursor:pointer}

/* Booking card: price + pending-expiry lines, and touch-friendly action chips on phones. */
.bk-total{margin:4px 0 0;font-size:1.15rem;font-weight:800;color:var(--brand-d)}
.bk-expiry{margin:2px 0 0;font-size:.78rem;font-weight:600;color:var(--warn)}
@media(max-width:430px){
  .booking-card .chips .btn{min-height:44px}
  .booking-card .chips .btn.gold{flex:1 1 100%}
}

/* Owner "my cars" performance strip (bookings / earnings / rating per car). */
.car-stats{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;padding:9px 12px;background:var(--bg2);border-radius:12px;font-size:.82rem;font-weight:600;color:var(--brand-d)}

/* ================= MOBILE DESIGN SPEC (rev121) =================
   From the design-only spec (2026-07-16): app-like feel on 320–820px without changing the design
   language. Sizes follow the spec tables — buttons 50/46/44, fields 50-52, radii 12/14/18/24,
   bottom-nav text 11px, chat text 15px, toast ≥52px. Desktop (>820px) is untouched. */
@keyframes sheetUp{from{transform:translateY(38%);opacity:.55}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.modal{animation:none}}
@media(max-width:820px){
  /* §5 buttons: primary 50px, secondary 46px, small/chips 44px; radius 14px; full feedback kept */
  .btn{border-radius:14px;min-height:46px}
  .btn.block{min-height:50px}
  .chips .btn,.car .btn,.pill-btn{min-height:44px}
  .close{width:44px;height:44px;min-width:44px}
  /* §11 forms: fields 50px, textarea ≥110px, 22px checks inside a 44px target, 16px gaps */
  .field input,.field select{min-height:50px;padding-block:12px}
  .field textarea{min-height:110px}
  .form-grid{gap:16px}
  .check input,.booking-consent input{width:22px;height:22px;flex:0 0 22px}
  .check,.booking-consent{min-height:44px;align-items:center}
  /* §7 home: main search 52px */
  .quick-search input,.quick-search select,.quick-search .date-btn{height:52px}
  /* §6 shell: compact 56px top bar; 11px bottom-nav labels (icons/indicator already per spec) */
  .topbar{min-height:56px;padding-block:8px}
  .tab-item{font-size:11px}
  /* §9 car card: 12px inner padding, 15-16px name, 16-18px price, tight consistent gaps */
  .car-body{padding:12px}
  .car h3{font-size:1.02rem}
  .car .price,.car-price{font-size:1.1rem}
  .grid{gap:12px 10px}
  /* §10 car page: gallery 4:3 (≈281px on a 375px phone, inside the 240–300px window) + counter chip */
  .modal .gallery-main{aspect-ratio:4/3}
  /* §13 booking bar: ≥76px total, 52px action */
  .mobile-booking-bar{min-height:calc(76px + env(safe-area-inset-bottom))}
  .mobile-booking-bar .btn{min-height:52px}
  /* §14 chat: 15px messages, 11px time, ≥44px composer field */
  .chat-msgs .message,.messages .message{font-size:15px;max-width:80%}
  .chat-msgs .message small,.messages .message small{font-size:11px}
  .chat-composer{min-height:64px}
  .chat-composer input{min-height:44px}
  /* §20-22 admin: KPI cards ≥112px in 2 columns (already 2-col); the cars table becomes record
     cards — no horizontal table scrolling as the main pattern */
  .kpi{min-height:112px}
  .table-wrap{overflow:visible;border:none;background:none;border-radius:0}
  table.data{min-width:0;display:block;border:none}
  table.data thead{display:none}
  table.data tbody{display:grid;gap:10px}
  table.data tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;background:var(--surface);border:1px solid var(--hair);border-radius:18px;padding:12px;min-height:96px;box-shadow:0 10px 26px rgba(20,28,40,.05)}
  table.data tr:hover{background:var(--surface)}
  table.data td{display:block;border:none;padding:2px 0;font-weight:400}
  table.data td.t-main{grid-column:1 / -1;font-size:1.02rem;font-weight:700}
  table.data td:last-child{grid-column:1 / -1}
  table.data .t-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}
}
/* §10 gallery counter chip — all widths (harmless on desktop, required on mobile) */
.gallery-main{position:relative}
.gallery-count{position:absolute;bottom:10px;inset-inline-start:10px;z-index:2;background:rgba(20,26,33,.72);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* §17 toast: ≥52px, 14px text, 12-14px radius (position/width already handled per-page above) */
#toast{min-height:52px;display:flex;align-items:center;justify-content:center;border-radius:14px;font-size:14px;padding:12px 16px}

/* ---- design spec rev122: car-form step wizard (§11), calendar bottom-sheet (§12), admin "עוד" (§20) ---- */
/* Wizard header: step counter + progress bar. Chrome is phone-only; the steps themselves always render
   (desktop just shows all four at once), so drafts and formData() are untouched. */
.wiz-head{display:none}
.wiz-nav{display:none}
@media(max-width:820px){
  .wiz-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 14px;font-size:.92rem;font-weight:600;color:var(--brand-d)}
  .wiz-bar{flex:0 0 96px;height:6px;border-radius:99px;background:var(--bg2);overflow:hidden}
  .wiz-bar i{display:block;height:100%;width:25%;border-radius:99px;background:var(--brand);transition:width .25s var(--ease)}
  #car-form .wiz-step{display:none}
  #car-form .wiz-step.active{display:block;animation:fadeUp .22s var(--ease)}
  /* Sticky continue/back row above the sheet's bottom edge (spec: "כפתור ההמשך יהיה דביק") */
  .wiz-nav{display:flex;gap:10px;position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom));z-index:4;margin:14px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--hair);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .wiz-nav #wiz-next{flex:1;min-height:52px}
  .wiz-nav #wiz-prev{flex:0 0 auto}
  .wiz-nav #wiz-prev:disabled{opacity:.4}
  #car-form #car-submit{margin-top:12px}
  #car-form #car-submit.wiz-hidden{display:none}
  /* §12: the date picker opens as a bottom sheet with ≥44px day cells */
  .cal-pop{position:fixed;top:auto;inset-inline:0;bottom:0;width:100%;max-width:100%;border-radius:24px 24px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -24px 70px rgba(10,14,19,.38);z-index:140;animation:sheetUp .28s var(--ease)}
  .cal-pop::before{content:"";display:block;width:36px;height:4px;border-radius:99px;background:var(--line-2);margin:0 auto 10px}
  .cal-day{height:44px;border-radius:12px}
}
/* Admin "עוד" sheet items — large, thumb-friendly rows in the existing card language */
.more-sheet{display:grid;gap:10px;padding-bottom:4px}
.more-item{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;font:inherit;font-weight:600;font-size:1rem;color:var(--text);cursor:pointer;transition:background .15s,transform .12s}
.more-item:hover{background:var(--bg-soft)}
.more-item:active{transform:scale(.98)}
.more-item svg{width:22px;height:22px;color:var(--brand-d);flex:0 0 22px}
/* "הצגת עוד" under long lists (audit #30) */
.list-more{margin-top:14px}

/* ================= APP-FEEL HOME (rev127) =================
   "עדיין לא מרגיש אפליקציה": on phones the home read like a 4,000px marketing landing page — the cars
   were buried below ~1,000px of copy. An app puts CONTENT first. Mobile-only; desktop untouched. */
@media(max-width:820px){
  /* 1. Content-first order: search → cars → numbers → owner CTA → the marketing extras → footer. */
  body[data-page="home"] main{display:flex;flex-direction:column}
  body[data-page="home"] main>*{order:4;min-width:0}
  body[data-page="home"] main>.hero{order:0}
  body[data-page="home"] main>.fleet-zone{order:1}
  body[data-page="home"] main>.strip{order:2}
  body[data-page="home"] main>.owner-cta-rich{order:3}
  body[data-page="home"] main>.site-foot{order:9}

  /* 2. Compact hero: one short value line + the search card — not a billboard. */
  .hero-in{padding:26px 16px 30px}
  .hero .kicker{margin-bottom:10px;font-size:.74rem}
  .hero h1{font-size:1.62rem}
  .hero-copy{font-size:.95rem;margin:8px auto 14px;max-width:32ch}

  /* 3. Long marketing blocks become SWIPEABLE card rows (app pattern) instead of vertical walls. */
  .steps-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:4px 16px 10px;scrollbar-width:none}
  .steps-grid::-webkit-scrollbar{display:none}
  .steps-grid>*{flex:0 0 76%;scroll-snap-align:center}
  .trust-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:4px 16px 10px;scrollbar-width:none}
  .trust-grid::-webkit-scrollbar{display:none}
  .trust-grid>*{flex:0 0 62%;scroll-snap-align:center}
  .info-section{margin-top:26px}
  .info-section h2{font-size:1.3rem}

  /* 4. Kill the "webpage" tells: no rubber-band bounce behind the shell, no long-press text
     selection / iOS callout on chrome and cards (real content — chat, terms — stays selectable). */
  html{overscroll-behavior-y:none}
  .topbar,.bottom-nav,.dashboard-tabs,.btn,.tab-item,.chips,.quick-search,.kpi,.car,.pill,.status-badge{-webkit-user-select:none;user-select:none}
  .car img,.gallery-main img,.topbar img{-webkit-touch-callout:none}
}

/* ---- app-feel rev127b: directional tab transitions + floating search pill ---- */
/* Entering content slides in from the side you moved toward in the (RTL) tab bar — 220ms, subtle. */
@keyframes routeFwd{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes routeBack{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
#app.app-enter-fwd{animation:routeFwd .22s var(--ease)}
#app.app-enter-back{animation:routeBack .22s var(--ease)}
@media(prefers-reduced-motion:reduce){#app.app-enter-fwd,#app.app-enter-back{animation:none}}
/* Once the hero search scrolls away, a floating pill above the bottom nav brings it back. Phones only. */
.search-pill{display:none}
@media(max-width:820px){
  /* Centered with insets + auto margins (NOT transform — the fadeUp keyframes own the transform). */
  .search-pill{position:fixed;bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 14px);inset-inline:0;margin-inline:auto;width:fit-content;z-index:55;display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px;border:none;border-radius:99px;background:var(--dark);color:#fff;font:inherit;font-weight:700;font-size:.92rem;box-shadow:0 14px 34px rgba(20,26,33,.38);cursor:pointer;animation:fadeUp .22s var(--ease)}
  .search-pill[hidden]{display:none}
  .search-pill svg{width:18px;height:18px}
  .search-pill:active{transform:scale(.95)}
  body:not([data-page="home"]) .search-pill{display:none}
}
/* Wikimedia photo attribution under the car gallery (audit #37) */
.photo-credit{display:block;font-size:11px;color:var(--muted);margin:6px 2px 0;line-height:1.5}

/* ================= DEPTH & SHINE (rev132) =================
   User request: "צלליות וברק ועומק שירגיש חי". Two-layer elevation shadows (tight contact + soft
   ambient), hairline top-lights on raised surfaces, glass gradients on photos, a passing gleam on
   the main CTAs, and glow on the active tab. Transform/opacity only — nothing that hurts scrolling. */
:root{
  --elev-1:0 1px 2px rgba(16,24,40,.05), 0 10px 28px rgba(16,24,40,.09);
  --elev-2:0 3px 8px rgba(16,24,40,.09), 0 22px 52px rgba(16,24,40,.17);
}
/* Raised surfaces: layered shadow + a hairline top-light, like real material catching the light */
.card{box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--elev-1)}
.car:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--elev-2)}
.car:active{transform:translateY(-1px) scale(.985)}
.car:active::after{transform:translateX(0)}  /* the sheen sweep fires on TAP too — phones feel it */
/* Car photos: light falls from above, the body grounds into shade below */
.car-photo{position:relative}
.car-photo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.10), transparent 26%, transparent 68%, rgba(12,19,28,.22))}
.car-photo img{transition:transform .5s var(--ease)}
.car:hover .car-photo img{transform:scale(1.045)}
/* KPI tiles */
.kpi{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--elev-1)}
/* Primary buttons: pressed-metal base + a passing gleam on hover/tap */
.btn.primary,.btn.gold{position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.12), 0 6px 16px rgba(63,107,142,.3), 0 1px 3px rgba(63,107,142,.35)}
.btn.primary::after,.btn.gold::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%);
  transform:translateX(-160%)}
.btn.primary:hover::after,.btn.gold:hover::after,.btn.primary:active::after,.btn.gold:active::after{transform:translateX(160%);transition:transform .7s var(--ease)}
/* Ambient life: the two main CTAs get a slow gleam that passes every few seconds */
@keyframes ambientSheen{0%,72%{transform:translateX(-160%)}88%,100%{transform:translateX(160%)}}
#home-search::after,.booking-submit-main::after{animation:ambientSheen 5.5s var(--ease) infinite}
/* Hero: headline pops off the dark backdrop; the search panel reads as floating glass */
.hero h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}
.quick-search{box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 24px 60px rgba(4,10,18,.45)}
/* Shell: the top bar and bottom dock separate from the page with soft depth */
.topbar{box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(10,16,24,.22)}
.bottom-nav{box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 -10px 30px rgba(20,26,33,.12)}
.tab-item.active svg{filter:drop-shadow(0 3px 8px rgba(63,107,142,.55))}
/* Pills, badges, toast: a touch of inner light */
.pill,.status-badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(16,24,40,.08)}
#toast{box-shadow:0 12px 34px rgba(10,14,19,.4), inset 0 1px 0 rgba(255,255,255,.15)}
/* Gallery photo sits IN the page: inner ring + bottom grounding, drawn above the image */
.gallery-main::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.1), inset 0 -30px 44px -34px rgba(12,19,28,.45)}
/* Bottom sheets / dialogs: heavier, softer elevation */
.modal{box-shadow:0 -8px 24px rgba(0,0,0,.08), 0 40px 90px rgba(0,0,0,.35)}
@media(prefers-reduced-motion:reduce){
  #home-search::after,.booking-submit-main::after{animation:none}
  .car:hover .car-photo img,.car:active{transform:none}
}
/* "מתפנה בערך" on rented cars — the pre-reserve feature's expected free-up date */
.frees-note{font-size:12px;font-weight:600;color:var(--warn);margin-top:4px}

/* ---- Availability calendar on the car page (design doc §10, rev135) ---- */
.avail-section{margin:16px 0 8px}
.avail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.avail-head h3{margin:0;font-size:1.02rem}
.avail-nav{display:flex;align-items:center;gap:8px}
.avail-nav b{min-width:112px;text-align:center;font-size:.9rem}
.avail-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.avail-day{height:38px;border:none;border-radius:10px;background:var(--ok-bg);color:var(--ok);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:box-shadow .12s}
.avail-day:hover:not(:disabled){box-shadow:inset 0 0 0 2px var(--ok)}
.avail-day.busy{background:var(--danger-bg);color:var(--danger);cursor:default}
.avail-day.past{background:var(--bg2);color:var(--muted-2);cursor:default}
.avail-legend{display:flex;gap:16px;margin-top:8px;font-size:12px;color:var(--muted)}
.avail-legend .lg{display:flex;align-items:center;gap:6px}
.avail-legend .lg::before{content:"";width:12px;height:12px;border-radius:4px;flex:0 0 12px}
.avail-legend .free::before{background:var(--ok-bg);box-shadow:inset 0 0 0 1.5px var(--ok)}
.avail-legend .busy::before{background:var(--danger-bg);box-shadow:inset 0 0 0 1.5px var(--danger)}
@media(max-width:820px){ .avail-day{height:44px;border-radius:12px} }

/* ================= PREMIUM 2 (rev136) =================
   Continuing the design-upgrade request: real SWITCHES instead of checkboxes on form options, a
   colored status spine on booking cards, gradient KPI numbers, an active-tab pill in the bottom
   nav, deeper chat bubbles, avatar rings, and a floating empty-state icon. CSS only. */
/* Form options become iOS-style switches (the legal consent checkbox stays a checkbox on purpose) */
.price-request-toggle input{appearance:none;-webkit-appearance:none;width:44px;height:26px;flex:0 0 44px;margin-top:1px;border-radius:99px;background:var(--bg3);position:relative;cursor:pointer;transition:background .2s;border:none}
.price-request-toggle input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 2px 6px rgba(16,24,40,.28);transition:transform .22s var(--ease)}
.price-request-toggle input:checked{background:var(--brand)}
.price-request-toggle input:checked::after{transform:translateX(-18px)}
.price-request-toggle{align-items:center}
/* Booking cards: a colored spine tells the status at a glance (graceful without :has support) */
.booking-card{border-inline-start:4px solid var(--hair)}
.booking-card:has(.status-badge.pending){border-inline-start-color:#E9A93D}
.booking-card:has(.status-badge.approved){border-inline-start-color:var(--brand)}
.booking-card:has(.status-badge.active){border-inline-start-color:var(--ok)}
.booking-card:has(.status-badge.done){border-inline-start-color:var(--muted-2)}
.booking-card:has(.status-badge.rejected),.booking-card:has(.status-badge.cancelled),.booking-card:has(.status-badge.expired){border-inline-start-color:var(--danger)}
/* KPI numbers get a living gradient, echoing the hero headline */
.kpi b{background:linear-gradient(135deg,var(--brand-d) 20%,#557FA1 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Bottom nav: the active tab sits on a soft pill, not just a color change */
.tab-item.active::after{content:"";position:absolute;inset:7px 10px;background:rgba(63,107,142,.1);border-radius:14px;z-index:-1;animation:fadeUp .18s var(--ease)}
/* Chat: bubbles get depth; own messages get a rich dark gradient */
.chat-msgs .message{box-shadow:0 2px 8px rgba(16,24,40,.07)}
.chat-msgs .message.mine{background:linear-gradient(160deg,#26303C,#1B222B);box-shadow:0 4px 14px rgba(16,24,40,.2)}
/* Avatars: a fine double ring lifts them off the card */
.avatar{box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(63,107,142,.35)}
/* Empty states breathe */
@keyframes gentleFloat{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.empty-state .empty-ic{display:inline-block;animation:gentleFloat 2.6s ease-in-out infinite alternate}
/* Dialog titles per spec §16 (20–22px) on phones */
@media(max-width:820px){ .modal-head h2{font-size:1.28rem} }
@media(prefers-reduced-motion:reduce){ .empty-state .empty-ic,.tab-item.active::after{animation:none} }

/* ================= PREMIUM 3 (rev137) =================
   Auth screen, success screens, admin cards — the third design-upgrade pass. CSS + one markup line. */
/* Auth shell: a soft brand glow crowns the card; screen title sized per spec §4 */
.auth-shell{position:relative;overflow:hidden}
.auth-shell::before{content:"";position:absolute;inset:-40% -20% auto;height:220px;background:radial-gradient(closest-side,rgba(63,107,142,.14),transparent 70%);pointer-events:none}
.auth-head h2{font-size:1.5rem;font-weight:800}
/* Role/mode cards: icon on a tinted disc, ring on hover, press feedback */
.role-emoji{width:56px;height:56px;display:grid;place-items:center;background:var(--surface);border-radius:18px;margin-bottom:8px;box-shadow:inset 0 0 0 1.5px rgba(63,107,142,.22), 0 6px 16px rgba(16,24,40,.1);transition:background .18s,box-shadow .18s}
.role-emoji svg{width:26px;height:26px;color:var(--brand-d)}
.role-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.role-card:hover .role-emoji{background:var(--brand);}
.role-card:hover .role-emoji svg{color:#fff}
.role-card:active{transform:scale(.97)}
/* Login/register pill tabs: the active pill floats */
.tabs .tab.active{box-shadow:0 4px 12px rgba(20,26,33,.28)}
/* Success screens: an animated draw-on check crowns the summary */
.success-check{display:grid;place-items:center;margin:4px 0 14px}
.success-check svg{width:76px;height:76px;fill:none;stroke:var(--ok);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 10px 22px rgba(28,124,79,.3))}
.success-check circle{stroke-dasharray:151;stroke-dashoffset:151;animation:drawRing .55s var(--ease) forwards}
.success-check path{stroke-dasharray:40;stroke-dashoffset:40;animation:drawTick .35s .5s var(--ease) forwards}
@keyframes drawRing{to{stroke-dashoffset:0}}
@keyframes drawTick{to{stroke-dashoffset:0}}
/* Admin record cards join the elevation system */
.auc{box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--elev-1);transition:transform .18s var(--ease),box-shadow .2s}
.auc:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--elev-2)}
@media(prefers-reduced-motion:reduce){.success-check circle,.success-check path{animation:none;stroke-dashoffset:0}}

/* ================= PREMIUM 4 (rev138) =================
   Chats list rows + the payment moment. */
/* Chat rows: icon discs, tinted active row, pulsing unread dot */
.chat-item{border:1px solid transparent}
.chat-item:hover{background:var(--bg-soft)}
.chat-item.active{background:rgba(63,107,142,.08);border-color:rgba(63,107,142,.25)}
.chat-item-emoji{width:42px;height:42px;display:grid;place-items:center;background:rgba(63,107,142,.1);border-radius:14px;flex:0 0 42px}
.chat-item-emoji svg{width:20px;height:20px;color:var(--brand-d)}
/* The car's own photo in place of the generic glyph — same 42px footprint and radius, so the list keeps
   its rhythm whether a thread has a photo (booking) or an icon (support). */
.chat-item-photo{width:42px;height:42px;border-radius:14px;flex:0 0 42px;overflow:hidden;background:var(--bg-soft);display:block}
.chat-item-photo img{width:100%;height:100%;object-fit:cover;display:block}
.chat-item small{color:var(--muted)}
/* Time and unread dot on one line. The dot used to be its own row in the meta column, stranded between
   the timestamp and the status badge with no visible relationship to either — it reads as "something
   new, at this time" only when it sits beside the time. */
.chat-item-when{display:inline-flex;align-items:center;gap:6px}
.chat-unread-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);flex:0 0 10px;box-shadow:0 0 0 3px var(--danger-bg);animation:pulseDot 1.6s ease-in-out infinite}
@keyframes pulseDot{50%{box-shadow:0 0 0 6px var(--danger-bg)}}
/* The payment moment: the amount is the hero, the proof upload is an inviting tile */
.pay-amount-field input{font-size:1.55rem;font-weight:800;text-align:center;color:var(--brand-d);letter-spacing:.01em}
.upload-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;margin-bottom:12px;border:2px dashed rgba(63,107,142,.35);border-radius:16px;background:rgba(63,107,142,.04);cursor:pointer;text-align:center;transition:border-color .18s,background .18s,transform .12s}
.upload-tile:active{transform:scale(.99)}
.upload-tile b{color:var(--brand-d)}
.upload-tile small{color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-tile .tile-ic{width:46px;height:46px;display:grid;place-items:center;background:var(--surface);border-radius:14px;box-shadow:inset 0 0 0 1.5px rgba(63,107,142,.22), 0 6px 14px rgba(16,24,40,.08)}
.upload-tile .tile-ic svg{width:22px;height:22px;color:var(--brand-d)}
.upload-tile.has-file{border-style:solid;border-color:var(--ok);background:var(--ok-bg)}
.upload-tile.has-file b,.upload-tile.has-file small{color:var(--ok)}
/* keep the input focusable for native "required" validation, but invisible */
.upload-tile input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
@media(prefers-reduced-motion:reduce){.chat-unread-dot{animation:none}}

/* ---- Favorites (design doc §9, rev140): the 40×40 heart on every card + a favorites filter chip ---- */
.fav-btn{position:absolute;top:8px;inset-inline-end:8px;width:34px;height:34px;border:none;border-radius:50%;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .12s}
/* The circle stays 34px so the card art is unchanged, but the tap target is extended to 44px with a
   transparent pseudo-element — WCAG 2.5.5 / HIG minimum. Enlarging the circle itself would have made
   it crowd the status pill in the image corner. */
.fav-btn::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%}
.fav-btn:active{transform:scale(.9)}
.fav-btn svg{width:18px;height:18px;color:var(--muted);fill:none;transition:fill .15s,color .15s}
.fav-btn:hover{background:rgba(255,255,255,.9)}
.fav-btn:hover svg{color:var(--danger)}
/* Saved is the state worth shouting about — full red, full white chip behind it. */
.fav-btn.on{background:rgba(255,255,255,.94)}
.fav-btn.on svg{color:var(--danger)}
.fav-btn.on svg{fill:var(--danger)}
@keyframes favPop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
.fav-btn.pop svg{animation:favPop .35s var(--ease)}
.type-chip.fav-chip{color:var(--danger)}
.type-chip.fav-chip.on{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}
@media(prefers-reduced-motion:reduce){.fav-btn.pop svg{animation:none}}
/* Share button on the car page (rev141) */

/* In-app inbox badges (rev142): red counter on the nav tabs */
.tab-badge{position:absolute;top:4px;inset-inline-end:calc(50% - 22px);min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1;box-shadow:0 2px 6px rgba(215,0,21,.4)}
/* Notifications bell in the personal-area header (rev142) */
.dash-bell{position:relative;width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1.15rem;display:grid;place-items:center;cursor:pointer;transition:background .15s}
.dash-bell:hover{background:rgba(255,255,255,.18)}
.dash-bell .tab-badge{top:-2px;inset-inline-end:-2px}

/* ---- Booking progress timeline (design doc §13, rev143) ---- */
.bk-timeline{display:flex;margin:12px 0 4px}
.bk-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;min-width:0}
.bk-step::before{content:"";position:absolute;top:5px;inset-inline-start:-50%;width:100%;height:2px;background:var(--bg3)}
.bk-step:first-child::before{display:none}
.bk-step.done::before{background:var(--brand)}
.bk-dot{width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--bg3);z-index:1;transition:background .2s,border-color .2s}
.bk-step.done .bk-dot{background:var(--brand);border-color:var(--brand)}
.bk-step.now .bk-dot{border-color:var(--brand);animation:pulseStep 1.8s ease-in-out infinite}
@keyframes pulseStep{0%,100%{box-shadow:0 0 0 3px rgba(63,107,142,.14)}50%{box-shadow:0 0 0 6px rgba(63,107,142,.2)}}
.bk-step small{font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap}
.bk-step.done small{color:var(--brand-d)}
.bk-step.now small{color:var(--text);font-weight:800}
@media(prefers-reduced-motion:reduce){.bk-step.now .bk-dot{animation:none}}

/* ================= PREMIUM 6 (rev144) =================
   Category shortcut tiles on the home hero (design doc §7 — min 88×88), a BRANDED boot splash
   instead of the generic spinner, and a living shimmer on the hero headline. */
/* Shortcut tiles: glass chips on the dark hero, one tap → pre-filtered catalog */
.cat-row{display:flex;gap:10px;justify-content:center;margin-top:18px}
.cat-tile{flex:1;max-width:96px;min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 6px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.07);color:#D9E3EC;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .18s,transform .12s,border-color .18s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cat-tile:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.cat-tile:active{transform:scale(.95)}
.cat-ic{display:grid;place-items:center}
.cat-ic svg{width:44px;height:24px;color:#EFC66F}
/* Branded boot splash: the first thing anyone sees is the crown, not a naked spinner */
.boot-splash{min-height:72vh;gap:16px}
.splash-logo{width:76px;height:76px;border-radius:22px;box-shadow:0 18px 44px rgba(0,0,0,.35);animation:splashPulse 1.6s ease-in-out infinite}
.splash-name{letter-spacing:.32em;font-weight:800;font-size:.85rem;color:var(--brand-d)}
.boot-splash .spinner{width:26px;height:26px;border-width:2.5px}
@keyframes splashPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
/* The headline's gold lives: a slow shimmer sweeps the gradient */
.hero h1 em{background:linear-gradient(100deg,#9FB6C9 15%,#EFC66F 40%,#FFE9B8 50%,#EFC66F 60%,#9FB6C9 85%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:heroShimmer 7s linear infinite}
@keyframes heroShimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){.hero h1 em,.splash-logo{animation:none}}

/* ================= HOME COMPACT (rev145) =================
   User: "גודל ווידגטים — כמה שפחות גלילה במסך הבית". Every home widget shrinks on phones so the
   first screens carry more: tighter hero, chip-sized stats, smaller tiles, no decorations, slimmer
   cards and banners. Desktop untouched. */
@media(max-width:820px){
  /* Hero: title + search, nothing chatty */
  .hero-in{padding:12px 14px 14px}
  .hero .kicker{margin-bottom:3px;font-size:.64rem}
  .hero h1{font-size:1.4rem}
  .hero-copy{display:none}          /* the search form speaks for itself */
  .road{display:none}               /* pure decoration — costs a whole screen-strip */
  .quick-search{padding:9px;gap:6px;border-radius:16px}
  .quick-search input,.quick-search select,.quick-search .date-btn{height:42px;font-size:.92rem;border-radius:10px}
  .quick-search label span,.df-label{font-size:.64rem;margin-bottom:2px}
  #home-search{min-height:42px}
  /* Stats: two big white cards → one slim chip row.
     The chips were rgba(255,255,255,.94) — near-solid white slabs sitting directly above the frosted
     .cat-tile row (rgba(255,255,255,.07)). Two different materials, touching, inside one dark hero.
     Same frosted glass as the tiles now, so the hero reads as a single surface; the numbers keep their
     prominence through weight and the gold accent rather than through a white background. */
  .hero-stats{display:flex;gap:8px;margin-top:10px;background:none;border:none;box-shadow:none;padding:0}
  .hstat{display:flex;align-items:baseline;justify-content:center;gap:6px;padding:10px 8px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:13px}
  .hstat b{font-size:1.05rem;display:inline;color:#fff}
  .hstat span{font-size:.7rem;color:rgba(255,255,255,.72)}
  /* Category tiles: still tappable, half the height */
  .cat-row{margin-top:10px;gap:8px}
  .cat-tile{min-height:64px;border-radius:13px;font-size:.7rem;gap:4px;max-width:none}
  .cat-ic svg{width:32px;height:18px}
  /* Section headers: title only */
  body[data-page="home"] .sec-head .sec-sub{display:none}
  body[data-page="home"] .sec-head{margin-bottom:10px}
  body[data-page="home"] .sec-head h2{font-size:1.22rem}
  body[data-page="home"] .sec-head .eyebrow{font-size:.68rem}
  body[data-page="home"] .info-section{margin-top:16px}
  /* Home preview cards: shorter photos, tighter body (the full catalog page keeps 4:3) */
  body[data-page="home"] .car-photo{aspect-ratio:16/10}
  body[data-page="home"] .car-body{padding:10px}
  body[data-page="home"] .grid{gap:10px 8px}
  body[data-page="home"] .see-all{margin-top:8px}
  /* Numbers strip: one slim line */
  .strip-in{padding:8px 12px;gap:16px;font-size:.72rem}
  /* Owner banner: one line + button, no feature chips */
  .owner-cta-rich{padding:12px 16px;gap:10px;flex-direction:row;align-items:center;text-align:right}
  .owner-cta-features{display:none}
  .owner-cta-copy h2{font-size:1.05rem;margin:0}
  .owner-cta-copy .eyebrow{font-size:.64rem;margin:0}
  .owner-cta-rich .btn{flex:0 0 auto;min-height:44px;padding-inline:16px}
  /* Help block */
  .foot-cta{padding:16px}
  .foot-cta h2{font-size:1.15rem}
}

/* ================= DASH COMPACT (rev146) =================
   The same "less scrolling" treatment for the PERSONAL AREA + ADMIN on phones: slimmer dark header,
   half-height KPI tiles, tighter booking cards / notifications / chat rows. Desktop untouched. */
@media(max-width:820px){
  /* Dark header: one compact band instead of a hero-sized panel */
  .dashboard-head{padding:14px 16px;gap:10px;border-radius:16px}
  .dashboard-head h1{font-size:1.25rem}
  .dashboard-head .eyebrow{font-size:.66rem;margin-bottom:2px}
  .dash-head-controls .avatar-btn .avatar{width:44px!important;height:44px!important}
  .dash-bell{width:40px;height:40px;font-size:1rem}
  .dash-head-actions .btn{min-height:44px;padding-block:8px}
  /* KPI tiles: 2×2 stays, half the height, numbers still lead */
  .kpis{gap:8px;margin-bottom:16px}
  .kpi{padding:12px 14px;min-height:76px;border-radius:14px}
  .kpi b{font-size:1.22rem}
  .kpi-head{margin-bottom:4px}
  .kpi-head .kpi-label{font-size:.68rem}
  /* Booking cards: tighter frame, timeline and chips closer */
  .booking-card{padding:12px 14px;border-radius:16px}
  .booking-main{margin-bottom:8px;gap:10px}
  .booking-card h3{font-size:1.02rem;margin:2px 0}
  .bk-timeline{margin:8px 0 2px}
  .list{gap:10px}
  /* Panel + section headers */
  .dashboard-panel{padding:14px}
  .dashboard-panel h2{font-size:1.15rem;margin-bottom:10px}
  .mini-panel{padding:12px}
  /* Feeds + chat rows */
  .notif-row{padding:10px 12px;border-radius:12px}
  .chat-item{padding:10px}
  .auc-head{gap:8px}
}

/* DARK MODE REMOVED (rev173, user request): the app now always renders in the light palette.
   :root pins color-scheme:light so native controls/scrollbars never auto-darken either.
   NOTE: the personal area's dark canvas (below) is a deliberate DESIGN choice, not dark mode. */

/* ================= PERSONAL AREA PRO (rev148) =================
   User: "האזור האישי נראה עדיין חובבני". The document look (one huge white panel + bare text
   headings) becomes an APP look on phones: content cards float directly on the page background,
   the KPI tiles overlap the dark header like a banking app, section titles turn into refined
   small labels, and each booking card gets a clear action hierarchy. Desktop keeps the panel. */
@media(max-width:820px){
  /* 1. Kill the mega-panel on CARD-BASED tabs: content floats on the dark canvas. Form-based tabs
     (profile) keep their solid panel so labels/text stay on a proper surface. */
  .dashboard-panel[data-tab="overview"],.dashboard-panel[data-tab="bookings"],.dashboard-panel[data-tab="cars"],.dashboard-panel[data-tab="myCars"],.dashboard-panel[data-tab="external"],.dashboard-panel[data-tab="notifications"],.dashboard-panel[data-tab="users"]{background:none;border:none;box-shadow:none;border-radius:0;padding:2px;min-height:60vh;animation:none}
  .dashboard-panel[data-tab="external"] .ext-sub{color:#8FA3B8}
  /* Bare text that now sits ON the dark canvas gets a canvas-friendly tone (works in BOTH schemes) */
  .dashboard-panel[data-tab] > h2,.dashboard-panel .panel-head-actions h2,.dashboard-panel .section-head h2{color:#8FA3B8}
  .dashboard-shell{gap:10px;margin-top:10px}
  /* 2. The header hands off to floating KPI tiles (overview tabs start with .kpis) */
  .dashboard-head{padding-bottom:40px;border-radius:18px}
  .dashboard-panel > .kpis:first-child{margin-top:-44px;position:relative;z-index:2;padding:0 4px}
  .dashboard-panel > .kpis:first-child .kpi{box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.28)}
  /* 3. Section titles: small refined labels instead of naked h2 headlines */
  .dashboard-panel h2{font-size:.78rem;font-weight:800;letter-spacing:.08em;color:var(--muted);margin:18px 4px 10px}
  .panel-head-actions{margin-bottom:12px}
  .section-head{margin:18px 0 10px}
  /* 4. Booking cards: the money action gets its own full row; the rest are quiet ghosts */
  .booking-card .chips .btn.primary,.booking-card .chips .btn.gold{flex:1 1 100%}
  .booking-card .chips .btn.outline,.booking-card .chips .btn.dark-out{background:var(--bg-soft);border-color:transparent;color:var(--text);font-size:.82rem}
  .booking-card .chips .btn.danger{font-size:.82rem}
  .booking-card small{color:var(--muted)}
  /* 5. Notices ride as cards of their own on the open background */
  .dashboard-panel .notice{border-radius:14px}
  /* 6. Empty states breathe on the open background */
  .dashboard-panel .empty,.dashboard-panel .empty-state{background:var(--surface);border:1px dashed var(--line);border-radius:16px;padding:22px 16px}
}
/* Dark mode: the floating KPI seam needs a touch more separation */

/* ================= PROFILE PRO (rev149) =================
   The profile tab joins the pro look: centered identity header, soft inset form, quiet logout. */
@media(max-width:820px){
  .avatar-row{flex-direction:row;align-items:center;text-align:start;gap:14px;margin:4px 0 14px;padding:12px 14px}
  .avatar-click .avatar,.avatar-click .avatar-fallback{box-shadow:0 0 0 3px var(--surface), 0 0 0 5px rgba(63,107,142,.35), 0 10px 24px rgba(16,24,40,.22)}
  .avatar-click .avatar-cam{width:28px;height:28px}
  .avatar-cam svg{width:14px;height:14px}
  .avatar-actions{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
  .avatar-actions b{font-size:.84rem;color:var(--muted);font-weight:600}
  .avatar-actions .btn{min-height:40px;font-size:.82rem;padding:8px 14px;background:var(--bg-soft);border-color:transparent}
  #profile-form.card.inset{background:var(--bg-soft);border:1px solid var(--hair);box-shadow:none;border-radius:16px;padding:14px}
  .ver-card{border-radius:16px}
  #logout-profile{margin-top:16px;background:none;border-color:transparent;color:var(--danger);font-weight:700}
}

/* ================= MOBILE RICHNESS (rev150) =================
   User: "שהאתר בנייד יראה טוב כמו במחשב". The compact pass (rev145) over-stripped the glamour —
   this restores the desktop's richness at phone scale WITHOUT re-inflating the page: the copy line
   returns small, the road with the car silhouettes returns short, section subtitles return tight,
   and the headline grows a step. Net cost ≈ +160px on a page that was cut by ~670px. */
@media(max-width:820px){
  .hero h1{font-size:1.34rem;line-height:1.2}
  .hero-copy{display:block;font-size:.8rem;line-height:1.4;margin:4px auto 9px;max-width:34ch;color:#B7C4D1}
  .road{display:block;height:44px}  /* the silhouettes collapse below ~100px */
  .hero-in{padding-bottom:42px}
  .cat-row{position:relative;z-index:3}
  body[data-page="home"] .sec-head .sec-sub{display:block;font-size:.82rem;color:var(--muted);max-width:42ch;margin:4px auto 0}
  body[data-page="home"] .sec-head h2{font-size:1.32rem}
  .cat-tile{min-height:72px}
  .cat-ic svg{width:38px;height:21px}
}

/* ===== EXTERNAL RENTALS (rev153): off-site rental log — summary + list rows ===== */
.ext-sub{margin:-6px 0 14px;font-size:.9rem}
.ext-bycar{margin-bottom:14px}
.ext-row{display:flex;flex-direction:column;gap:8px;padding:14px 16px}
.ext-row-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ext-row-head .ext-amount{color:var(--brand-d);font-size:1.05rem}
.ext-row-sub{display:flex;flex-direction:column;gap:2px;color:var(--muted);font-size:.86rem}
.ext-notes{margin:0;font-size:.85rem}
.ext-row .chips{margin-top:2px}
@media (min-width:700px){.ext-row-sub{flex-direction:row;justify-content:space-between;gap:14px}}

/* ===== ADMIN AREA REORG (rev154): two labeled zones — site management / personal owner area ===== */
/* Desktop tab bar: small separator labels between the zones */
.dashboard-tabs .tab-group-label{align-self:center;font-size:.66rem;font-weight:800;letter-spacing:.09em;color:var(--muted);white-space:nowrap;padding:0 12px 0 6px;border-right:1px solid rgba(0,0,0,.1)}
.dashboard-tabs .tab-group-label:first-child{border-right:none;padding-right:4px}
body[data-page="dashboard"] .dashboard-tabs .tab-group-label{color:#8FA3B8;border-right-color:rgba(255,255,255,.14)}
body[data-page="dashboard"] .dashboard-tabs .tab-group-label:first-child{border-right:none}
/* "עוד" sheet: zone headers */
.more-sheet .sheet-label{font-size:.68rem;font-weight:800;letter-spacing:.09em;color:var(--muted);margin:6px 4px -2px}
.more-sheet .sheet-label:first-child{margin-top:0}
/* Overview "האזור שלי" strip: two calm quick-cards (unlike the orange attention cards) */
.my-zone{margin:14px 0}
.my-zone-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px}
.zone-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;font:inherit;color:var(--text);transition:transform .18s var(--ease),box-shadow .2s,border-color .2s}
.zone-card b{font-size:1.35rem;font-weight:800;line-height:1.1;color:var(--brand-d)}
.zone-card span{font-size:.82rem;font-weight:600;color:var(--muted)}
.zone-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(12,20,32,.1);border-color:var(--brand-l)}
/* Vertical sidebar (desktop ≥1000px): zone labels become full-width section headers with a top rule */
@media(min-width:1000px){
  .dashboard-tabs .tab-group-label{align-self:stretch;border-right:none;border-top:1px solid rgba(0,0,0,.1);margin-top:8px;padding:12px 6px 2px;text-align:right}
  .dashboard-tabs .tab-group-label:first-child{border-top:none;margin-top:0;padding-top:2px}
  body[data-page="dashboard"] .dashboard-tabs .tab-group-label{border-right:none;border-top-color:rgba(255,255,255,.14)}
  body[data-page="dashboard"] .dashboard-tabs .tab-group-label:first-child{border-top:none}
}

/* ===== OWNER WHATSAPP SHARE (rev155): direct wa.me share on the owner's car cards ===== */
.btn.wa-share{background:#25D366;border:1px solid #1eb457;color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:700}
.btn.wa-share:hover{background:#1eb457}
.btn.wa-share svg{width:18px;height:18px;flex:0 0 18px}
.car-manage{flex-wrap:wrap}
.car-manage .wa-share{flex:1 1 100%}
/* On the 2-up mobile grid the manage row is only ~143px wide, so every button already takes its own
   line and a compact delete just leaves dead space beside it. Let it fill there. On wider cards it stays
   narrow and shares a line with "עריכת פרטים", which is where the smaller size reads as intended. */
@media(max-width:600px){ .car-manage .btn.danger{flex:1 1 auto} }

/* ===== ADMIN MAINTENANCE (rev155) ===== */
/* The fixed ✕ (dash-close) sits at inline-start (RTL: right) and overlapped the greeting line —
   give the eyebrow room so "שלום, <שם>" is never hidden under the button. */
@media(max-width:820px){
  .dashboard-head .eyebrow{padding-inline-start:40px}
}
/* Quick-approve on a pending user card: full-width primary row above the secondary actions */
.auc-actions .auc-approve{flex:1 1 100%}

/* ===== ADMIN DOC GALLERY (rev157): review license/selfie/payment as real image tiles ===== */
.doc-h{margin:16px 0 8px;font-size:.95rem;font-weight:800}
.doc-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:6px}
.doc-tile{position:relative;display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-soft);cursor:pointer;font:inherit;text-align:center;transition:transform .15s,box-shadow .2s,border-color .2s}
.doc-tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(12,20,32,.14);border-color:var(--brand-l)}
.doc-tile img{width:100%;aspect-ratio:1.4/1;object-fit:cover;display:block;background:#0c1118}
.doc-tile span{padding:8px 6px;font-size:.76rem;font-weight:600;color:var(--text)}
.doc-tile.doc-missing{cursor:default;min-height:96px;display:grid;place-items:center;background:repeating-linear-gradient(45deg,var(--bg-soft),var(--bg-soft) 8px,transparent 8px,transparent 16px);color:var(--muted)}
.doc-tile.doc-missing:hover{transform:none;box-shadow:none;border-color:var(--line)}
.doc-full{margin:6px 0 12px;border-radius:12px;overflow:hidden;background:#0c1118}
.doc-full img{width:100%;max-height:70vh;object-fit:contain;display:block}

/* ===== CONTROL HUB (rev158, polished rev160): task-first, premium personal-area overview ===== */
.admin-sec-h{font-size:.72rem;font-weight:800;letter-spacing:.07em;color:#8FA3B8;margin:20px 4px 11px;display:flex;align-items:center;gap:8px}
.admin-sec-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(143,163,184,.28),transparent)}
.admin-todo{display:flex;flex-direction:column;gap:9px}
.admin-todo .admin-sec-h{margin-top:2px}
/* "דורש טיפול" rows — a warm amber action card; the whole row jumps to what needs handling */
.todo-row{display:flex;align-items:center;gap:13px;width:100%;background:linear-gradient(180deg,var(--surface),var(--surface));border:1px solid var(--line);border-inline-start:4px solid var(--warn);border-radius:15px;padding:13px 15px;cursor:pointer;font:inherit;text-align:right;box-shadow:var(--elev-1);transition:transform .16s var(--ease),box-shadow .22s}
.todo-row:hover{transform:translateY(-2px);box-shadow:var(--elev-2)}
.todo-row:active{transform:translateY(0)}
.todo-count{min-width:30px;height:30px;padding:0 9px;border-radius:99px;background:linear-gradient(145deg,#E9A93D,#C6902E);color:#2A1F08;font-weight:800;font-size:.94rem;display:grid;place-items:center;flex:none;box-shadow:0 2px 6px rgba(198,144,46,.28)}
.todo-label{flex:1;font-weight:600;color:var(--text);font-size:.95rem}
.todo-go{color:var(--warn);font-size:1.5rem;font-weight:700;opacity:.8}
/* all-clear — solid surface (readable on the always-dark admin canvas), gentle green glow */
.admin-allclear{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--ok);border-radius:15px;padding:16px;box-shadow:var(--elev-1)}
.admin-allclear .ac-ic{width:40px;height:40px;border-radius:50%;background:linear-gradient(145deg,var(--ok),var(--ok));color:#fff;display:grid;place-items:center;font-size:1.2rem;font-weight:800;flex:0 0 auto;box-shadow:0 4px 12px rgba(28,124,79,.35)}
.admin-allclear b{display:block;font-size:1rem;color:var(--text)}
.admin-allclear small{color:var(--muted)}
/* quick-nav tiles — colored icon disc + label; every area one tap from the overview */
.admin-hub{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.hub-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;cursor:pointer;font:inherit;color:var(--text);box-shadow:var(--elev-1);transition:transform .16s var(--ease),box-shadow .22s,border-color .2s}
.hub-tile:hover{transform:translateY(-3px);box-shadow:var(--elev-2);border-color:var(--brand-l)}
.hub-tile:active{transform:translateY(-1px)}
.hub-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.5)}
.hub-ic svg{width:22px;height:22px;stroke-width:2}
.hub-tile b{font-size:1rem;font-weight:700}
.hub-ic.tint-blue{background:rgba(63,107,142,.12);color:var(--brand)}
.hub-ic.tint-green{background:rgba(28,124,79,.12);color:var(--ok)}
.hub-ic.tint-gold{background:rgba(233,169,61,.16);color:#B17F00}
.hub-ic.tint-purple{background:#F1EFFA;color:#7A66C9}
.hub-ic.tint-slate{background:rgba(94,110,130,.14);color:#5E6E82}
.hub-badge{position:absolute;top:13px;inset-inline-start:13px;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:linear-gradient(145deg,#E9A93D,#C6902E);color:#2A1F08;font-weight:800;font-size:.76rem;display:grid;place-items:center;box-shadow:0 2px 6px rgba(198,144,46,.3)}
/* compact stats — a quiet, refined strip instead of four big KPI cards */
.admin-stats-mini{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 6px}
/* The card styling was scoped to `span`, but one of these stats is a <button class="stat-link"> (it
   navigates to the payouts tab). .stat-link deliberately strips background/border/padding — built for
   an inline dashed link inside a sentence — so that one tile rendered with NO card at all: dark text
   directly on the dark page shell, measured at 1.04:1. It reads as a card here, so it is styled as one. */
.admin-stats-mini span,
.admin-stats-mini > .stat-link{flex:1 1 40%;background:var(--bg-soft);border:1px solid var(--line);border-radius:13px;padding:11px 14px;font-size:.8rem;color:var(--muted)}
.admin-stats-mini > .stat-link{display:block;text-align:start;border-bottom:1px solid var(--line);min-height:0}
.admin-stats-mini > .stat-link:hover{opacity:1;border-color:var(--brand);background:var(--surface)}
.admin-stats-mini b{display:block;font-size:1.2rem;font-weight:800;color:var(--brand-d);margin-bottom:1px;font-variant-numeric:tabular-nums}

/* Control-hub icon discs on the DARK scheme (tiles become dark surfaces) — brighten so they pop */

/* ===== CHAT PRO (rev161): WhatsApp-grade list + conversation ===== */
/* Filter head: הכל / לא נקראו + סמן הכל כנקרא */
.chat-filter{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 4px;flex-wrap:wrap}
.chat-filter-chips{display:flex;gap:6px}
.chat-fchip{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:99px;padding:6px 14px;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s}
.chat-fchip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chat-markall{background:none;border:none;color:var(--brand-d);font-size:.78rem;font-weight:700;cursor:pointer;padding:4px 6px}
.chat-markall:hover{text-decoration:underline}
/* List rows: time + unread dot on one side; unread rows read bolder (like a messaging app) */
.chat-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto;margin-inline-start:2px}
.chat-item-meta time{font-size:.68rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.chat-item.is-unread .chat-item-main b{font-weight:800}
.chat-item.is-unread .chat-item-main small{color:var(--text);font-weight:600}
.chat-item.is-unread .chat-item-meta time{color:var(--ok);font-weight:700}
/* Day divider inside the conversation */
.chat-day{align-self:center;margin:6px 0 2px}
.chat-day span{background:rgba(20,26,33,.06);color:var(--muted);font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:99px}
/* Grouped consecutive bubbles hug closer; sender changes get the normal gap */
.chat-msgs .message.grouped{margin-top:-5px}
.chat-msgs .message.grouped.mine{border-end-start-radius:5px;border-start-start-radius:15px}
/* System auto-reply bubble (support auto-ack) */
.chat-msgs .message.sys{align-self:center;background:rgba(63,107,142,.1);color:var(--brand-d);border:1px dashed rgba(63,107,142,.3);font-size:.8rem;text-align:center;max-width:88%}
/* Sent tick on my messages */
.msg-tick{margin-inline-start:4px;font-size:.72rem;opacity:.8;letter-spacing:-2px}
/* Friendlier "mine" bubble — a brand-blue gradient instead of near-black */
.chat-msgs .message.mine{background:linear-gradient(160deg,#4A75A0,var(--brand));color:#fff}
/* "↓ הודעות חדשות" pill floating above the composer */
.chat-newpill{position:absolute;bottom:78px;inset-inline-start:50%;transform:translateX(50%);background:var(--brand);color:#fff;border:none;border-radius:99px;padding:9px 18px;font-size:.82rem;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(27,34,43,.28);z-index:4;animation:fadeUp .25s var(--ease)}
.chat-newpill:hover{filter:brightness(1.07)}
/* Give the pill a positioned ancestor WITHOUT breaking the mobile slide-over (there .chat-pane is
   already position:absolute, which is itself a containing block). Only desktop's static pane needs this. */
@media(min-width:821px){ .chat-pane{position:relative} }

/* ===== OWNER REQUEST POPUP (rev162) — prominent incoming-rental-request modal ===== */
.req-pop{display:flex;flex-direction:column;gap:14px}
.req-pop-top{display:flex;align-items:center;gap:12px}
.req-pop-bell{width:46px;height:46px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;background:var(--warn-bg);box-shadow:inset 0 0 0 1px rgba(229,169,79,.3);animation:reqBell 1.4s ease-in-out infinite}
@keyframes reqBell{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.req-pop-bell{animation:none}}
.req-pop-title{flex:1;min-width:0}
.req-pop-title b{display:block;font-size:1.12rem;font-weight:800}
.req-pop-title small{color:var(--muted)}
.req-car{font-size:1.15rem;font-weight:800;color:var(--brand-d);padding:2px 2px 0}
.req-rows{display:flex;flex-direction:column;gap:2px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:6px 4px}
.req-row{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;font-size:.9rem}
.req-row+.req-row{border-top:1px solid var(--hair)}
.req-row span{color:var(--muted)}
.req-row b{font-weight:700;text-align:left}
.req-row a{color:var(--brand-d)}
.req-actions{display:flex;flex-direction:column;gap:9px}
.req-links{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.req-links .btn{margin:0}
/* Delete-message button — subtle, on the bubble corner (appears on hover on desktop; tappable on mobile) */
.chat-msgs .message{position:relative}
.msg-del{position:absolute;top:3px;inset-inline-start:3px;width:26px;height:26px;border:none;border-radius:8px;background:rgba(0,0,0,.12);color:inherit;font-size:.72rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,background .15s;display:grid;place-items:center;padding:0}
.message:hover .msg-del,.message:focus-within .msg-del{opacity:.85}
.msg-del:hover{background:rgba(215,0,21,.85);color:#fff;opacity:1}
.message.mine .msg-del{background:rgba(255,255,255,.2)}
@media(hover:none){.msg-del{opacity:.5}}

/* ===== RENTER STATUS POPUP (rev163) — approval/rejection outcome ===== */
.req-pop-bell.ok{background:var(--ok-bg);box-shadow:inset 0 0 0 1px rgba(63,191,135,.3);animation:none}
.req-pop-bell.danger{background:var(--danger-bg);box-shadow:inset 0 0 0 1px rgba(255,107,114,.3);animation:none}
.status-note{margin:0;font-size:.9rem;color:var(--muted);line-height:1.55;padding:0 2px}

/* ===== RENTER NEXT-STEPS CHECKLIST (rev164) — what's left after approval ===== */
.next-steps{margin:12px 0 4px;padding:13px 15px;border:1px solid var(--warn);border-radius:14px;background:var(--warn-bg)}
.next-steps.complete{border-color:var(--ok);background:var(--ok-bg)}
.next-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.next-head b{font-size:.92rem;font-weight:800;color:var(--text)}
.next-count{flex:0 0 auto;background:var(--warn);color:#fff;font-size:.78rem;font-weight:800;padding:2px 10px;border-radius:99px}
.next-items{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.next-item{font-size:.8rem;font-weight:700;padding:5px 11px;border-radius:99px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.next-item.ok{color:var(--ok);border-color:rgba(63,191,135,.4);background:var(--ok-bg)}
.next-steps.complete .next-items{margin-bottom:0}
.next-steps .btn.gold{margin:0}

/* ===== RENTER PICKUP GUIDE (rev165) — numbered order: location+key → documentation → payment ===== */
.next-flow{list-style:none;margin:6px 0 12px;padding:0;display:flex;flex-direction:column;gap:12px}
.nf-step{display:flex;gap:11px;align-items:flex-start}
.nf-num{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:.86rem;display:grid;place-items:center;margin-top:1px}
.nf-body{flex:1;min-width:0}
.nf-body>b{display:block;font-size:.92rem;font-weight:800;color:var(--text)}
.nf-body>small{display:block;color:var(--muted);font-size:.8rem;margin:2px 0 7px;line-height:1.45}
.nf-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.nf-actions .btn{margin:0;padding:7px 13px;font-size:.8rem}
.next-steps.owner-hint{border-color:var(--brand-l);background:rgba(63,107,142,.08)}
.oh-note{display:block;color:var(--muted);font-size:.82rem;line-height:1.5;margin-bottom:10px}

/* ===== OWNER SEES RENTER PROGRESS (rev166) ===== */
.oh-progress{margin:10px 0 4px;padding:11px 13px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.oh-progress-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.oh-progress-head b{font-size:.86rem;font-weight:800}
.next-count.ok{background:var(--ok)}
.oh-ready{margin:8px 0 2px;color:var(--ok);font-weight:800;font-size:.9rem}
.next-steps.owner-hint.complete{border-color:var(--ok);background:var(--ok-bg)}

/* ===== WEB PUSH ENABLE BANNER (rev166) ===== */
.push-banner{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(63,107,142,.12),rgba(63,107,142,.05));border:1px solid var(--brand-l);border-radius:16px;padding:13px 15px;margin-bottom:14px}
.push-banner .pb-ic{font-size:1.5rem;flex:0 0 auto}
.push-banner .pb-body{flex:1;min-width:0}
.push-banner .pb-body b{display:block;font-size:.92rem;font-weight:800;color:var(--text)}
.push-banner .pb-body small{color:var(--muted);font-size:.8rem}
.push-banner .pb-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.push-banner .btn.primary{margin:0;padding:9px 16px;font-size:.85rem}
/* Blocked state: informational, not an offer — the brand-blue invitation styling would imply there is
   something to tap here, and there isn't (only OS settings can undo a denial). */
.push-banner.push-blocked{background:var(--bg-soft);border-color:var(--line)}
.push-banner.push-blocked .pb-body small{line-height:1.55}
.pb-close{background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;width:30px;height:30px;border-radius:8px;flex:0 0 auto}
.pb-close:hover{background:rgba(0,0,0,.06)}
@media(max-width:520px){.push-banner{flex-wrap:wrap}.push-banner .pb-actions{width:100%;justify-content:flex-end}}

/* ===== MOBILE DECLUTTER (rev167) ===== */
/* 1. Booking cards: decisive actions stay out; the rest live in an "עוד פעולות" menu */
.bk-more{margin-top:8px;border-top:1px solid var(--hair);padding-top:8px}
.bk-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:.84rem;font-weight:700;color:var(--brand-d);padding:8px 12px;border-radius:10px;background:var(--bg-soft);transition:background .15s}
.bk-more>summary::-webkit-details-marker{display:none}
.bk-more>summary::after{content:"⌄";font-size:1rem;line-height:1;transition:transform .2s}
.bk-more[open]>summary::after{transform:rotate(180deg)}
.bk-more>summary:hover{background:rgba(63,107,142,.12)}
.bk-more .chips{margin-top:9px}
.chips.pill-row{margin-bottom:2px}
/* 2. Home hero search — noticeably smaller/quieter on phones (it opened the page far too tall) */
@media(max-width:820px){
  .quick-search{gap:6px;padding:8px;border-radius:14px}
  .quick-search input,.quick-search select,.quick-search .date-btn{height:42px!important;min-height:42px;font-size:.88rem;border-radius:10px;padding:0 10px}
  .quick-search select{font-size:.84rem}
  .quick-search label{gap:0}
  .quick-search label span,.quick-search .df-label{font-size:.63rem;margin-bottom:2px}
  .quick-search .btn{height:42px!important;min-height:42px;font-size:.9rem;margin-top:1px}
  .quick-search .date-ic{transform:scale(.8)}
  .hero-copy{margin-bottom:12px}
}

/* ===== CAR MODAL DECLUTTER (rev168) — spec sheet + availability fold away ===== */
/* Three tiers of weight. TIER 1 is the photo, the price and the booking form — the reason the modal
   was opened. TIER 2 is reference material (spec sheet, reviews, availability): one shared, deliberately
   quiet row style, flat and hairline-separated so it recedes behind the form instead of reading as three
   more cards. TIER 3 is the side actions. Before rev218 all of these were soft grey 14px-radius cards of
   equal weight, which is why the screen read as "everything looks the same". */
.spec-more,.avail-more,.reviews-more{margin:0;border:0;border-top:1px solid var(--hair);border-radius:0;background:none;overflow:hidden}
.spec-more:first-of-type{margin-top:6px}
.spec-more>summary,.avail-more>summary,.reviews-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:13px 2px;font-size:.88rem;font-weight:600;color:var(--dark)}
.spec-more>summary::-webkit-details-marker,.avail-more>summary::-webkit-details-marker,.reviews-more>summary::-webkit-details-marker{display:none}
.spec-more>summary::after,.avail-more>summary::after,.reviews-more>summary::after{content:"⌄";font-size:1.05rem;line-height:1;color:var(--muted);transition:transform .2s}
.spec-more[open]>summary::after,.avail-more[open]>summary::after,.reviews-more[open]>summary::after{transform:rotate(180deg)}
.spec-more>summary:hover,.avail-more>summary:hover,.reviews-more>summary:hover{color:var(--brand-d)}
.spec-more .detail-summaries,.avail-more .avail-section{margin:0;padding:2px 0 12px;background:none;border:none}
.detail-summaries.key-specs{margin-bottom:2px}

/* The summary carries only the count ("3 ביקורות"). The average already sits in the דירוג row directly
   above, and showing "★★★★★ 4.7" beside a bare "3" rendered as the ambiguous string "4.73". */
.reviews-more .reviews{border-top:0;padding-top:0;margin-bottom:12px}

/* The global mobile rule collapses every .form-grid to one column, which is right for text fields but
   wrong here: it stacked תאריך/שעה × 2 into four full-width rows (365px). A date and its hour are one
   decision, so they pair on a single row — both controls stay comfortably tappable at 375px. */
@media(max-width:820px){
  #booking-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
}

/* Generic .hide utility. syncDelivery() has always toggled this class on the delivery-address field,
   but the only .hide rule in the sheet was scoped to .bottom-nav — so the class was applied and did
   nothing, and every renter saw "כתובת מסירה" even with self-pickup selected. */
.hide{display:none !important}

/* TIER 3 — side actions: two compact buttons sharing one row, never full-width, so the booking
   submit stays the only block-level button in the modal. */
.car-side-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 2px}
.car-side-actions .btn{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding-inline:14px;font-size:.86rem;white-space:nowrap}
.car-side-actions .btn svg{width:16px;height:16px;flex:none}
/* Only share the row on phones. On the 820px desktop modal, growing turned "שיתוף" into a 346px button. */
@media(max-width:820px){ .car-side-actions .btn{flex:1 1 auto} }

/* ===== CARS-PAGE SEARCH COMPACTED (rev169) — same treatment the home hero search got in rev167.
   (Its own class .period-search wasn't covered by that rule, so it stayed oversized on phones.) ===== */
@media(max-width:820px){
  .period-search{gap:6px;padding:9px;border-radius:14px;margin-bottom:10px}
  .period-search select,.period-search .date-btn{height:42px!important;min-height:42px!important;font-size:.88rem;border-radius:10px;padding:0 10px}
  .period-search .hour-field{gap:0}
  .period-search .hour-field span,.period-search .df-label{font-size:.63rem;margin-bottom:2px}
  .period-search .btn{height:42px!important;min-height:42px!important;font-size:.9rem;margin-top:1px}
  .period-search .date-ic{transform:scale(.8)}
  .filter-mobile .btn{min-height:42px;height:42px;font-size:.88rem}
}
/* Trim the stacked top margins above the catalog on phones (they added ~80px of pure whitespace
   before a single car was visible): back button + page + section heading. */
@media(max-width:820px){
  #page-back{margin-top:10px;margin-bottom:4px}
  .cars-page{margin-top:10px;padding-top:6px}
  .cars-page .section-head{margin-top:8px;margin-bottom:8px}
}

/* ===== OPTIONAL FIELD GROUPS (rev170) — fold defaults away in the car wizard ===== */
.field-more{margin-top:4px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);overflow:hidden}
.field-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 14px;font-size:.86rem;font-weight:700;color:var(--brand-d)}
.field-more>summary::-webkit-details-marker{display:none}
.field-more>summary::after{content:"⌄";font-size:1rem;line-height:1;transition:transform .2s}
.field-more[open]>summary::after{transform:rotate(180deg)}
.field-more>summary:hover{background:rgba(63,107,142,.08)}
.field-more .form-grid{padding:4px 12px 12px;margin:0}

/* ===== DARK-MODE CONTRAST FIX (rev171) =====
   .next-count / .next-count.ok hardcode white text, but --warn/--ok flip to LIGHT tints in dark mode,
   so white-on-light dropped to ~2.1 contrast (unreadable). Use dark ink on those light chips instead. */

/* ===== BOOKING GATE (rev172) — tell the visitor what's still needed BEFORE they fill the form ===== */
/* A rating already submitted — the button is replaced by a quiet confirmation, not a dead control. */
.rated-done{display:inline-flex;align-items:center;gap:5px;padding:9px 14px;border-radius:11px;
  background:var(--ok-bg,rgba(45,138,86,.1));color:var(--ok,#2D8A56);font-size:.83rem;font-weight:700;white-space:nowrap}
.book-gate{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:10px 0 12px;padding:14px 15px;
  border:1px solid var(--brand-l);border-radius:16px;background:linear-gradient(135deg,rgba(63,107,142,.12),rgba(63,107,142,.05))}
.book-gate .bg-ic{font-size:1.7rem;flex:0 0 auto;line-height:1}
.book-gate .bg-body{flex:1;min-width:0}
.book-gate .bg-body b{display:block;font-size:1rem;font-weight:800;color:var(--text);margin-bottom:2px}
.book-gate .bg-body small{color:var(--muted);font-size:.84rem;line-height:1.45}
.book-gate .btn{flex:1 1 100%;margin:0}