/* RêgaGo — brand gold, slate surfaces, RTL-aware via logical properties. */
:root {
  --brand-50:#fdf8ec; --brand-100:#f9ecc7; --brand-400:#f5b93b; --brand-500:#d9971a;
  --brand-600:#a66a0b; --brand-700:#855309; --ink:#0f172a; --muted:#64748b;
  --red:#da2e21; --red-700:#a51f16; --red-50:#fdecea; /* deals / urgency accent — matches app Theme.red */
  --line:#e2e8f0; --page:#f8fafc; --card:#ffffff;
  --radius:16px; --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -12px rgba(15,23,42,.12);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
html { overflow-x:hidden; } /* safety net: never allow sideways scroll */
body { font-family:"Segoe UI",system-ui,-apple-system,"Noto Naskh Arabic",sans-serif;
  color:var(--ink); background:var(--page); line-height:1.5; }
[dir="rtl"] body { font-family:"Noto Naskh Arabic","Segoe UI",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
/* Fluid, centered container: uses more of large screens, keeps side gutters on
   small ones. Scales from extra-small phones to extra-large / ultrawide displays. */
.container { width:min(1240px, 100% - 48px); margin-inline:auto; }
@media (min-width:1800px){ .container { width:min(1440px, 100% - 96px); } }

/* Header */
.hdr { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.hdr .row { display:flex; align-items:center; gap:14px; height:64px; }
.logo { display:flex; align-items:center; gap:8px; font-weight:900; font-size:19px; }
.logo .badge { width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); color:#fff; font-weight:900; }
.logo .brand-logo { height:34px; width:auto; max-width:150px; object-fit:contain; border-radius:8px; }
.navlinks { display:flex; gap:4px; }
.navlinks a { padding:8px 14px; border-radius:999px; font-size:14px; font-weight:500; color:var(--muted); }
.navlinks a:hover { background:#f1f5f9; color:var(--ink); }
.spacer { margin-inline-start:auto; }
.hdr .right { display:flex; align-items:center; gap:10px; }
/* Mobile nav: hamburger with the same links the desktop .navlinks carry.
   Hidden on wide screens; replaces .navlinks under 640px. */
.mnav { position:relative; display:none; }
.mnav > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background:#fff; }
.mnav > summary::-webkit-details-marker { display:none; }
.mnav > summary:hover { background:#f8fafc; }
.mnav-bars { display:inline-flex; flex-direction:column; gap:4px; }
.mnav-bars span { width:16px; height:2px; border-radius:2px; background:var(--ink); }
.mnav-menu { position:absolute; inset-block-start:calc(100% + 8px); inset-inline-start:0; z-index:1000;
  width:220px; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.16); }
.mnav-menu a { display:flex; align-items:center; gap:10px; padding:12px 16px; font-size:14px;
  color:var(--ink); text-decoration:none; }
.mnav-menu a:hover { background:#f1f5f9; }
/* Small screens: drop the secondary text links so the header fits (logo,
   language, and account stay). Prevents horizontal overflow on phones. */
@media (max-width:640px){
  .navlinks { display:none; }
  .mnav { display:block; }
  .hdr .row { gap:8px; }
  .hdr .right { gap:6px; }
  .hdr .right .pill { max-width:92px; padding:8px 10px; font-size:13px; }
  /* Compact one-line auth buttons — no more two-line "Log in"/"Sign up" pills. */
  .logo { font-size:16px; gap:6px; }
  .logo .badge { width:30px; height:30px; border-radius:9px; }
  .logo .brand-logo { height:30px; }
  .hdr .right .btn { padding:8px 13px; font-size:13px; white-space:nowrap; }
}
/* Narrow phones: the full header (logo text + language + auth buttons + menu)
   doesn't fit — keep the brand badge but drop the wordmark, and tighten up. */
@media (max-width:430px){
  .hdr .container { padding-inline:14px; }
  .logo { font-size:0; gap:0; }
  .logo .badge { font-size:15px; }
  .hdr .row { gap:6px; }
  .hdr .right { gap:4px; }
  .hdr .right .pill { max-width:72px; padding:7px 7px; }
  .hdr .right .btn { padding:7px 8px; font-size:12.5px; }
  .mnav > summary { width:34px; height:34px; }
}
.pill { border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 12px; font-size:14px; }
.btn { display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
  border-radius:999px; padding:10px 18px; font-weight:600; font-size:14px; }
.btn-primary { background:var(--brand-600); color:#fff; }
.btn-primary:hover { background:var(--brand-700); }
.btn-dark { background:var(--ink); color:#fff; }
.btn-ghost { background:#f1f5f9; color:var(--ink); }
.btn-block { width:100%; justify-content:center; }

/* Hero */
.hero { background:#0f172a; color:#fff; overflow:hidden; }
.hero .inner { padding:64px 0 40px; }
.hero .tag { display:inline-block; border:1px solid rgba(245,185,59,.35); color:var(--brand-400);
  border-radius:999px; padding:6px 14px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.hero h1 { font-size:clamp(32px,6vw,60px); font-weight:900; margin:18px 0 22px; line-height:1.05; }
.hero h1 em { color:var(--brand-400); font-style:normal; }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; }

/* Hero with slider background: heading text sits OVER the car slides. */
.hero-main { position:relative; }
.hero-slides .hero-main { min-height:clamp(380px, 44vw, 540px); display:flex; align-items:center; }
.hero-slides .hero-bg { position:absolute; inset:0; aspect-ratio:auto; border-radius:0; box-shadow:none; z-index:0; }
.hero-slides .hero-bg::after { content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(rgba(15,23,42,.42), rgba(15,23,42,.82)); }
.hero-slides .hero-bg .slider-nav, .hero-slides .hero-bg .slider-dots { z-index:4; }
.hero-slides .hero-content { position:relative; z-index:3; pointer-events:none; padding:40px 0; }
.hero-slides .hero-content .tag, .hero-slides .hero-content .cta a { pointer-events:auto; }
.marquee { background:var(--brand-400); color:#0f172a; overflow:hidden; white-space:nowrap; border-block:1px solid rgba(245,185,59,.2); }
.marquee .track { display:inline-block; padding:12px 0; animation:scroll 24s linear infinite; }
.marquee span, .marquee a { padding:0 24px; font-weight:900; text-transform:uppercase; letter-spacing:.03em; }
.marquee a { color:inherit; text-decoration:none; }
.marquee .star { opacity:.5; }
/* Hover: stop the ribbon and gently zoom the hovered item. */
.marquee:hover .track { animation-play-state:paused; }
.marquee span:not(.star), .marquee a { display:inline-block; transition:transform .2s ease; }
.marquee span:not(.star):hover, .marquee a:hover { transform:scale(1.14); }
.marquee a:hover { text-decoration:underline; text-underline-offset:4px; }
@keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
[dir="rtl"] @keyframes scroll { from{transform:translateX(0)} to{transform:translateX(50%)} }

/* Cards / grids */
.section { padding:48px 0; }
.section h2 { font-size:26px; font-weight:900; }
.grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.card .body { padding:14px; }
.carimg { aspect-ratio:16/10; background:linear-gradient(135deg,#f1f5f9,#e2e8f0); display:grid; place-items:center; color:#94a3b8; font-weight:700; }
.badges { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.chip { font-size:11px; font-weight:700; border-radius:999px; padding:3px 8px; }
.chip-gold { background:var(--brand-100); color:var(--brand-700); }
.chip-ink { background:#e2e8f0; color:#334155; }
.chip-green { background:#dcfce7; color:#166534; }
.chip-red { background:var(--red); color:#fff; }
.price { font-weight:900; font-size:18px; }
.price .was { color:var(--muted); text-decoration:line-through; font-size:13px; font-weight:400; margin-inline-end:6px; }
.muted { color:var(--muted); } .small { font-size:13px; }

/* Feature cards */
.why { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.why .item { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.why .item .ic { font-size:26px; }
.why .item h3 { margin:10px 0 4px; }

/* Filters */
.filters { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; align-items:end; }
.field { display:flex; flex-direction:column; gap:4px; font-size:14px; }
.field label { font-weight:600; }
input,select,textarea { font:inherit; border:1px solid #cbd5e1; border-radius:10px; padding:9px 11px; background:#fff; color:var(--ink); }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--brand-500); }

/* Detail */
.detail-hero { aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; }

/* Home slider — admin-curated banners, swipeable + auto-advancing, clickable. */
.slider { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:2/1; background:#0b1220; box-shadow:var(--shadow); }
.slider-track { display:flex; height:100%; transform:translateX(0); transition:transform .75s cubic-bezier(.4,0,.2,1); touch-action:pan-y; }
.slider-track.dragging { transition:none; }
.slide { flex:0 0 100%; position:relative; display:block; height:100%; text-decoration:none; }
.slide img { width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.slide-cap { position:absolute; inset-inline:0; inset-block-end:0; padding:44px 22px 18px; color:#fff; font-weight:800; font-size:22px;
  background:linear-gradient(transparent, rgba(15,23,42,.85)); }
.slider-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; border:0; border-radius:999px;
  background:rgba(15,23,42,.5); color:#fff; font-size:26px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .15s; }
.slider-nav:hover { background:rgba(15,23,42,.82); }
.slider-nav.prev { left:14px; } .slider-nav.next { right:14px; }
.slider-dots { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:7px; }
.slider-dots i { width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.55); transition:width .2s, background .2s; cursor:pointer; }
.slider-dots i.on { width:22px; background:#fff; }
@media (max-width:640px){ .slide-cap { font-size:16px; padding:32px 16px 14px; } .slider-nav { width:34px; height:34px; font-size:20px; } }

/* Car gallery — swipeable (touch + mouse drag), dots, arrows, thumbnails. */
.gallery { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; background:#0b1220; }
.gallery-track { display:flex; height:100%; transform:translateX(0); transition:transform .35s ease;
  touch-action:pan-y; will-change:transform; cursor:grab; }
.gallery-track.dragging { transition:none; cursor:grabbing; }
.gallery-slide { flex:0 0 100%; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.gallery-empty { flex:0 0 100%; display:grid; place-items:center; color:#94a3b8; font-weight:700; }
.gallery-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:40px; height:40px; border:0; border-radius:999px;
  background:rgba(15,23,42,.55); color:#fff; font-size:24px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .15s; }
.gallery-nav:hover { background:rgba(15,23,42,.82); }
.gallery-nav.prev { left:12px; } .gallery-nav.next { right:12px; }
.gallery-count { position:absolute; bottom:12px; left:12px; z-index:3; background:rgba(15,23,42,.6); color:#fff;
  font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; }
.gallery-dots { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:6px; }
.gallery-dots i { width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,.5); transition:width .2s, background .2s; }
.gallery-dots i.on { width:18px; background:#fff; }
.gallery-actions { position:absolute; top:12px; right:12px; z-index:3; display:flex; gap:8px; }
.gallery-btn { width:40px; height:40px; border:0; border-radius:999px; background:rgba(255,255,255,.94); color:#0f172a;
  font-size:18px; cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow); transition:transform .12s; }
.gallery-btn:hover { transform:scale(1.08); }
.gallery-btn.js-fav.on { color:#dc2626; }
.gallery-thumbs { display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; }
.gallery-thumb { flex:0 0 auto; width:88px; height:62px; object-fit:cover; border-radius:10px; cursor:pointer;
  opacity:.5; outline:2px solid transparent; transition:opacity .15s, outline-color .15s; }
.gallery-thumb:hover { opacity:.85; }
.gallery-thumb.on { opacity:1; outline-color:var(--brand-600); }
.spec { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.spec .s { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; }
.spec .s .k { font-size:11px; text-transform:uppercase; color:var(--muted); }
.spec .s .v { font-weight:800; }
.dmg-row { display:flex; align-items:center; gap:10px; padding:6px 0; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* Auth */
.authwrap { max-width:440px; margin:48px auto; }
.panel { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; }
.tabs { display:flex; gap:4px; background:#f1f5f9; border-radius:12px; padding:4px; margin-bottom:18px; }
.tabs a { flex:1; text-align:center; padding:9px; border-radius:9px; font-weight:600; font-size:14px; color:var(--muted); }
.tabs a.on { background:#fff; color:var(--ink); box-shadow:var(--shadow); }
.stack { display:flex; flex-direction:column; gap:14px; }
.alert { border-radius:10px; padding:12px 14px; font-size:14px; }
.alert-err { background:#fef2f2; color:#b91c1c; }
.alert-ok { background:var(--brand-50); color:var(--brand-700); }

/* Footer */
/* Sticky footer: body is a full-height column so the footer sits at the bottom
   of the viewport even when the page content is short. */
body { display:flex; flex-direction:column; min-height:100vh; overflow-x:hidden; max-width:100%; }
main { flex:1 0 auto; }
/* Modern footer — dark stage: aurora glow, grid, diagonal marquee, glass
   pills, giant brand wordmark. Markup in partials/footer.php. */
.ftrm { position:relative; overflow:hidden; background:#020617; color:#fff; margin-top:64px; flex-shrink:0; }
.ftrm-aurora {
  position:absolute; left:50%; top:50%; width:80vw; height:60vh; z-index:0; pointer-events:none;
  transform:translate(-50%,-50%); border-radius:50%; filter:blur(80px);
  background:radial-gradient(circle at 50% 50%, rgba(245,185,59,.16) 0%, rgba(245,185,59,.06) 40%, transparent 70%);
  animation:ftrm-breathe 8s ease-in-out infinite alternate;
}
@keyframes ftrm-breathe {
  from { transform:translate(-50%,-50%) scale(1); opacity:.6; }
  to   { transform:translate(-50%,-50%) scale(1.1); opacity:1; }
}
.ftrm-grid {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:60px 60px;
  background-image:linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.ftrm-marquee {
  position:absolute; top:34px; left:-5%; width:110%; z-index:1; overflow:hidden;
  transform:rotate(-2deg); border-block:1px solid rgba(255,255,255,.1);
  background:rgba(2,6,23,.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:13px 0; box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.ftrm-marquee-track { display:flex; width:max-content; animation:ftrm-scroll 40s linear infinite; }
@keyframes ftrm-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.ftrm-marquee-row { display:flex; align-items:center; gap:48px; padding:0 24px; font-size:12px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:#94a3b8; white-space:nowrap; }
.ftrm-marquee-row i { color:rgba(245,185,59,.6); font-style:normal; }
.ftrm-center { position:relative; z-index:2; max-width:960px; margin:0 auto; padding:150px 20px 44px; text-align:center; }
.ftrm-headline {
  font-size:clamp(34px, 7vw, 84px); font-weight:900; letter-spacing:-.03em; line-height:1.02; margin:0 0 14px;
  background:linear-gradient(180deg, #fff 0%, rgba(255,255,255,.4) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 20px rgba(245,185,59,.2));
}
.ftrm-tagline { color:#94a3b8; font-size:14.5px; max-width:460px; margin:0 auto 40px; }
.ftrm-links { display:flex; flex-direction:column; align-items:center; gap:14px; }
.ftrm-row { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; width:100%; }
.ftrm-pill {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:999px; padding:16px 30px; font:inherit; font-weight:700; font-size:14px; color:#fff; cursor:pointer;
  background:linear-gradient(145deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px -10px rgba(2,6,23,.5), inset 0 1px 1px rgba(255,255,255,.1), inset 0 -1px 2px rgba(2,6,23,.8);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:all .4s cubic-bezier(.16,1,.3,1);
}
.ftrm-pill svg { width:22px; height:22px; flex:0 0 auto; color:#94a3b8; transition:color .3s; }
.ftrm-pill:hover {
  color:#fff; transform:translateY(-2px);
  background:linear-gradient(145deg, rgba(245,185,59,.12) 0%, rgba(245,185,59,.03) 100%);
  border-color:rgba(245,185,59,.4);
  box-shadow:0 20px 40px -10px rgba(2,6,23,.7), inset 0 1px 1px rgba(245,185,59,.25);
}
.ftrm-pill:hover svg { color:var(--brand-400); }
.ftrm-pill-sm { padding:11px 22px; font-size:12.5px; color:#94a3b8; }
.ftrm-pill-sm:hover { color:#fff; }
.ftrm-giant {
  position:relative; z-index:1; text-align:center; pointer-events:none; user-select:none;
  font-size:clamp(72px, 23vw, 360px); line-height:.75; font-weight:900; letter-spacing:-.05em;
  white-space:nowrap; margin:0 0 -1.5vw; color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(245,185,59,.12) 0%, transparent 60%);
  -webkit-background-clip:text; background-clip:text;
}
/* Extra inline-end padding keeps the back-to-top button clear of the floating chat launcher. */
.ftrm-bottom { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:14px 28px 28px; padding-inline-end:200px; }
@media (max-width: 700px) { .ftrm-bottom { padding-inline-end:28px; padding-bottom:120px; } }
.ftrm-rights { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:#64748b; }
.ftrm-made { cursor:default; gap:8px; font-size:11px; text-transform:uppercase; letter-spacing:.14em; }
.ftrm-heart { color:var(--brand-400); animation:ftrm-heartbeat 2s cubic-bezier(.25,1,.5,1) infinite; }
@keyframes ftrm-heartbeat {
  0%, 100% { transform:scale(1); filter:drop-shadow(0 0 5px rgba(245,185,59,.5)); }
  15%, 45% { transform:scale(1.2); filter:drop-shadow(0 0 10px rgba(245,185,59,.8)); }
  30% { transform:scale(1); }
}
.ftrm-top { width:48px; height:48px; padding:0; }
.ftrm-top svg { width:18px; height:18px; transition:transform .3s; }
.ftrm-top:hover svg { transform:translateY(-4px); }
/* Scroll-reveal states (the footer script adds .in when scrolled into view). */
.ftrm [data-reveal] { opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.ftrm [data-reveal].in { opacity:1; transform:none; }
.ftrm [data-reveal-giant] { opacity:0; transform:translateY(9vh) scale(.85); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }
.ftrm [data-reveal-giant].in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .ftrm-aurora, .ftrm-marquee-track, .ftrm-heart { animation:none; }
  .ftrm [data-reveal], .ftrm [data-reveal-giant] { opacity:1; transform:none; transition:none; }
}

/* App install banner (phone browsers) — markup in partials/app-prompt.php. */
/* Same z as the chat launcher but later in the DOM, so the sheet paints above it while open. */
.apx { position:fixed; inset-inline:0; bottom:0; z-index:9999; display:flex; justify-content:center; padding:12px; pointer-events:none; }
.apx[hidden] { display:none; }
.apx-card {
  pointer-events:auto; width:100%; max-width:420px; border-radius:24px; padding:16px; color:#fff;
  background:rgba(2,6,23,.96); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 60px rgba(0,0,0,.45); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  animation:apx-up .35s ease-out;
}
@keyframes apx-up { from { transform:translateY(100%); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .apx-card { animation:none; } }
.apx-head { display:flex; align-items:flex-start; gap:12px; }
.apx-badge { width:48px; height:48px; flex:0 0 auto; border-radius:16px; overflow:hidden; background:var(--brand-400); color:#020617; font-weight:900; font-size:20px; display:flex; align-items:center; justify-content:center; }
.apx-badge img { width:100%; height:100%; object-fit:cover; }
.apx-copy { min-width:0; flex:1; }
.apx-title { font-weight:800; margin:0; }
.apx-body { font-size:13.5px; color:#cbd5e1; margin:2px 0 0; }
.apx-x { background:none; border:0; color:#94a3b8; padding:6px; border-radius:999px; cursor:pointer; line-height:0; }
.apx-x svg { width:18px; height:18px; }
.apx-x:hover { background:rgba(255,255,255,.1); color:#fff; }
.apx-actions { display:flex; gap:10px; margin-top:14px; }
.apx-get { flex:1; text-align:center; background:var(--brand-400); color:#020617 !important; font-weight:800; border-radius:999px; padding:12px 18px; font-size:14px; transition:background .2s; }
.apx-get:hover { background:#f8ca66; }
.apx-skip { border:1px solid rgba(255,255,255,.15); background:transparent; color:#cbd5e1; border-radius:999px; padding:12px 18px; font:inherit; font-weight:600; font-size:13.5px; cursor:pointer; }
.apx-skip:hover { background:rgba(255,255,255,.1); color:#fff; }

/* Brand intro splash (partials/splash.php) — ripple-pulse loader around the R mark. */
.splash {
  position:fixed; inset:0; z-index:10001; background:#020617;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:1; transition:opacity .5s ease;
}
.splash[hidden] { display:none; }
.splash-loader {
  --splash-size:min(250px, 58vw); --splash-dur:2s;
  position:relative; width:var(--splash-size); height:var(--splash-size);
}
.splash-box {
  position:absolute; border-radius:50%;
  background:linear-gradient(0deg, rgba(245,185,59,.06) 0%, rgba(245,185,59,.12) 100%);
  border-top:1px solid var(--brand-400);
  box-shadow:rgba(0,0,0,.3) 0 10px 10px 0;
  backdrop-filter:blur(5px);
  animation:splash-ripple var(--splash-dur) infinite ease-in-out;
}
.splash-box:nth-child(1) { inset:40%; z-index:99; }
.splash-box:nth-child(2) { inset:30%; z-index:98; border-color:rgba(245,185,59,.8); animation-delay:.2s; }
.splash-box:nth-child(3) { inset:20%; z-index:97; border-color:rgba(245,185,59,.6); animation-delay:.4s; }
.splash-box:nth-child(4) { inset:10%; z-index:96; border-color:rgba(245,185,59,.4); animation-delay:.6s; }
.splash-box:nth-child(5) { inset:0;   z-index:95; border-color:rgba(245,185,59,.2); animation-delay:.8s; }
.splash-logo { position:absolute; inset:0; display:grid; place-content:center; padding:16%; }
.splash-logo svg {
  width:100%; height:100%; color:var(--brand-400);
  animation:splash-color var(--splash-dur) infinite ease-in-out;
}
.splash-still .splash-box, .splash-still .splash-logo svg { animation:none; }
.splash-out { opacity:0; pointer-events:none; }
@keyframes splash-ripple {
  0%   { transform:scale(1);   box-shadow:rgba(0,0,0,.3) 0 10px 10px 0; }
  50%  { transform:scale(1.3); box-shadow:rgba(0,0,0,.3) 0 30px 20px 0; }
  100% { transform:scale(1);   box-shadow:rgba(0,0,0,.3) 0 10px 10px 0; }
}
@keyframes splash-color {
  0%   { color:var(--brand-400); }
  50%  { color:#fff; }
  100% { color:var(--brand-400); }
}

/* Country-code + number compound field (partials/phone-field.php). */
.phone-row { display:flex; gap:10px; }
.phone-row .phone-cc { flex:0 0 auto; width:auto; min-width:110px; }
.phone-row input[type="tel"] { flex:1 1 auto; min-width:0; }

.center { text-align:center; }
.notfound { padding:80px 20px; text-align:center; }

/* Admin — modern fixed sidebar shell */
:root { --admin-side-w: 248px; --hdr-h: 64px; }
.admin-side {
  position:fixed; inset-block:var(--hdr-h) 0; inset-inline-start:0; width:var(--admin-side-w);
  background:#0f172a; border-inline-end:1px solid #1e293b; overflow-y:auto;
  padding:14px 12px 28px; z-index:25; -webkit-overflow-scrolling:touch;
}
.admin-side-brand { color:var(--brand-400); font-weight:900; font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px 10px; }
.admin-grp { color:#64748b; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin:16px 12px 6px; }
.admin-link { display:flex; align-items:center; gap:11px; color:#cbd5e1; padding:9px 12px; border-radius:11px; font-size:13.5px; font-weight:500; margin-bottom:2px; transition:background .12s, color .12s; }
.admin-link .ic { width:20px; text-align:center; font-size:15px; flex:0 0 auto; }
.admin-link .lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-link:hover { background:#1e293b; color:#fff; }
.admin-link.on { background:linear-gradient(135deg, var(--brand-400), var(--brand-600)); color:#0f172a; font-weight:800; box-shadow:0 6px 16px rgba(180,140,20,.28); }
/* Shift page content clear of the fixed sidebar. */
body.admin-mode main { padding-inline-start:var(--admin-side-w); min-height:calc(100vh - var(--hdr-h)); background:var(--page); }
body.admin-mode main > .section:first-child { padding-top:22px; }
body.admin-mode main .container { max-width:1160px; }
/* The footer lives outside <main>, so shift it clear of the fixed sidebar too. */
body.admin-mode .ftrm { padding-inline-start:var(--admin-side-w); }
/* Mobile / narrow: collapse to a horizontal scroll strip under the header. */
@media (max-width: 900px) {
  .admin-side {
    position:static; inset:auto; width:auto; height:auto; overflow-x:auto; overflow-y:hidden;
    display:flex; align-items:center; gap:4px; padding:8px 12px; border-inline-end:0; border-bottom:1px solid #1e293b;
    white-space:nowrap;
  }
  .admin-side-brand, .admin-grp { display:none; }
  .admin-side nav { display:flex; gap:4px; }
  .admin-link { padding:8px 12px; margin-bottom:0; }
  .admin-link .lbl { white-space:nowrap; }
  body.admin-mode main { padding-inline-start:0; }
  body.admin-mode .ftrm { padding-inline-start:0; }
}
.atable { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; font-size:14px; }
.atable th { text-align:start; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#64748b; padding:12px 14px; border-bottom:1px solid var(--line); background:#f8fafc; }
.atable td { padding:10px 12px; border-bottom:1px solid #f1f5f9; }
.atable tbody tr { transition:background .12s; }
.atable tbody tr:hover { background:#f8fafc; }
.atable tr:last-child td { border-bottom:0; }
.admin-hero { position:relative; overflow:hidden; border-radius:28px; background:#0f172a; color:#fff; padding:28px; box-shadow:0 24px 60px -28px rgba(15,23,42,.55); margin-bottom:20px; }
.admin-hero:before { content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 92% 0%, rgba(245,185,59,.24), transparent 58%), radial-gradient(65% 100% at 0% 100%, rgba(245,185,59,.12), transparent 55%); pointer-events:none; }
.admin-hero > * { position:relative; z-index:1; }
.admin-kicker { display:inline-flex; border:1px solid rgba(245,185,59,.28); background:rgba(245,185,59,.10); color:#f8c85a; border-radius:999px; padding:6px 12px; font-size:11px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.admin-title { margin:12px 0 0; font-size:clamp(26px,4vw,40px); line-height:1.05; font-weight:950; letter-spacing:-.03em; }
.admin-sub { margin:8px 0 0; color:#cbd5e1; font-size:14px; max-width:680px; }
.admin-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:18px; }
.admin-metric { border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); border-radius:18px; padding:13px 14px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.admin-metric b { display:block; color:#f8c85a; font-size:24px; line-height:1; }
.admin-metric span { display:block; margin-top:5px; color:#94a3b8; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.admin-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 0; padding:12px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow); }
.admin-toolbar form { display:flex; gap:8px; flex-wrap:wrap; margin:0; }
.admin-toolbar input,.admin-toolbar select { border-radius:14px; }
.admin-table-wrap { overflow-x:auto; margin-top:16px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow); }
.admin-empty { margin-top:16px; border:1px dashed #cbd5e1; border-radius:22px; padding:34px; background:#fff; text-align:center; color:var(--muted); font-weight:700; }
.astat { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.astat .c { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; }
.astat .c.alert { border-color:#fcd34d; background:#fffbeb; }
.astat .c .n { font-size:24px; font-weight:800; }
.astat .c .l { font-size:11px; text-transform:uppercase; color:#94a3b8; }
.btn-sm { padding:6px 12px; font-size:12px; border-radius:8px; }
.btn-danger { background:#dc2626; color:#fff; }
.btn-outline { border:1px solid var(--line); background:#fff; color:#334155; }

/* --- Support concierge widget ------------------------------------------- */
#rgAssistant { position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:9999; }
#rgLauncher { display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
  background:var(--brand-600); color:#fff; font-weight:800; font-size:14px;
  padding:12px 18px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.18); }
#rgLauncher:hover { background:var(--brand-700); }
#rgLauncher .rg-ic { font-size:18px; }
#rgPanel { position:absolute; inset-block-end:60px; inset-inline-end:0; width:92vw; max-width:360px;
  height:min(560px,72vh); background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 16px 48px rgba(0,0,0,.24); display:flex; flex-direction:column; overflow:hidden; }
#rgPanel[hidden] { display:none; }
.rg-head { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:14px 16px; background:linear-gradient(135deg,var(--brand-500),var(--brand-700)); color:#fff; }
.rg-head .rg-sub { font-size:12px; opacity:.85; margin-top:2px; }
.rg-head button { background:transparent; border:0; color:#fff; font-size:16px; cursor:pointer; }
.rg-log { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:#f8fafc; }
.rg-msg { max-width:82%; padding:9px 13px; border-radius:14px; font-size:14px; line-height:1.45; white-space:pre-line; }
.rg-bot { align-self:flex-start; background:#fff; border:1px solid var(--line); color:var(--ink); }
.rg-me { align-self:flex-end; background:var(--brand-600); color:#fff; }
.rg-card { align-self:stretch; display:flex; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:8px; }
.rg-cimg { width:78px; height:58px; border-radius:8px; flex:none; background:#e2e8f0 center/cover no-repeat; }
.rg-cbody { flex:1; min-width:0; }
.rg-ctitle { font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rg-cmeta { font-size:12px; color:var(--muted); margin:2px 0 6px; }
.rg-cact { display:flex; gap:6px; flex-wrap:wrap; }
.rg-btn { border:0; cursor:pointer; font-size:12px; font-weight:700; padding:6px 12px; border-radius:8px; text-decoration:none; display:inline-block; }
.rg-btn-primary { background:var(--brand-600); color:#fff; }
.rg-btn-ghost { background:#f1f5f9; color:#334155; }
.rg-block { align-self:flex-start; }
.rg-form { display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); background:#fff; }
.rg-form input { flex:1; }
.rg-form button { background:var(--brand-600); color:#fff; border:0; border-radius:10px; padding:0 16px; font-weight:700; cursor:pointer; }
/* body wrapper so the chooser can replace the log+form area */
#rgBody { flex:1; min-height:0; display:flex; flex-direction:column; }
#rgBody[hidden] { display:none; }
.rg-head .rg-wa-top { font-size:18px; line-height:1; padding:0; }
.rg-head .rg-wa-top[hidden] { display:none; }
/* Real WhatsApp badge: official green circle + white glyph (replaces the 🟢 emoji). */
.rg-wa-badge { width:34px; height:34px; flex:none; border-radius:50%; background:#25D366; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; }
.rg-wa-badge svg { width:20px; height:20px; }
.rg-wa-badge-sm { width:26px; height:26px; }
.rg-wa-badge-sm svg { width:15px; height:15px; }
/* Chat chooser (robot vs WhatsApp) */
.rg-choose { flex:1; display:flex; flex-direction:column; justify-content:center; gap:12px; padding:22px 18px; background:#f8fafc; }
.rg-choose[hidden] { display:none; }
.rg-choose-title { font-weight:800; font-size:15px; text-align:center; color:var(--ink); margin-bottom:4px; }
.rg-choice { display:flex; align-items:center; gap:12px; text-align:start; width:100%; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; transition:border-color .15s, transform .05s; }
.rg-choice:hover { border-color:var(--brand-500); }
.rg-choice:active { transform:scale(.99); }
.rg-choice-ic { font-size:26px; flex:none; }
.rg-choice-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rg-choice-txt strong { font-size:14px; color:var(--ink); }
.rg-choice-txt span { font-size:12px; color:var(--muted); }
.rg-choice-wa { border-color:#22c55e33; }
.rg-choice-wa:hover { border-color:#22c55e; }

/* --- Favourites heart --------------------------------------------------- */
.card-wrap { display:block; }
.fav-heart { position:absolute; inset-block-start:10px; inset-inline-end:10px; z-index:3;
  width:38px; height:38px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(255,255,255,.92); color:#dc2626; font-size:20px; line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease; }
.fav-heart:hover { transform:scale(1.12); }
.fav-heart.on { color:#dc2626; }
.fav-heart:not(.on) { color:#64748b; }

/* --- Account dropdown (declutters the header) --------------------------- */
.acct { position:relative; }
.acct > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px 4px 4px; border-radius:999px; border:1px solid var(--line); background:#fff; }
.acct > summary::-webkit-details-marker { display:none; }
.acct > summary:hover { background:#f8fafc; }
.acct .avatar { width:32px; height:32px; border-radius:999px; flex:none; display:inline-flex;
  align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff;
  background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); }
.acct .acct-dot { position:absolute; inset-block-start:2px; inset-inline-start:26px; width:10px; height:10px;
  border-radius:999px; background:#dc2626; border:2px solid #fff; }
.acct-menu { position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0; z-index:1000;
  width:250px; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.16); }
.acct-head { padding:14px 16px; background:#f8fafc; border-bottom:1px solid var(--line); }
.acct-name { font-weight:800; font-size:14px; color:var(--ink); }
.acct-mail { font-size:12px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct-item { display:flex; align-items:center; gap:10px; width:100%; text-align:start; box-sizing:border-box;
  padding:11px 16px; font-size:14px; color:var(--ink); background:none; border:0; cursor:pointer; text-decoration:none; font-family:inherit; }
.acct-item:hover { background:#f1f5f9; }
.acct-badge { margin-inline-start:auto; background:var(--brand-600); color:#fff; border-radius:999px;
  min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; padding:0 6px; }
.acct-verify { background:#fffbeb; color:#92400e; }
.acct-logout { color:#b91c1c; font-weight:600; }

/* ── Marketplace-style browse filter (cars/index) ─────────────────────── */
.mfilter { background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:18px 20px 20px; box-shadow:0 10px 30px rgba(15,23,42,.06); margin-top:16px; }
.mf-top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.mf-city { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
  border-radius:999px; padding:6px 14px; background:var(--page); }
.mf-city select { border:0; background:transparent; font-weight:600; padding:2px 4px; cursor:pointer; }
.mf-pin { opacity:.7; }
.mf-adv-btn { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--ink);
  cursor:pointer; user-select:none; }
.mf-chev { transition:transform .15s; display:inline-block; }
.mf-adv-toggle:checked ~ .mf-top .mf-adv-btn .mf-chev { transform:rotate(90deg); }
.brandrow { display:flex; gap:10px; overflow-x:auto; padding:16px 2px 6px; scrollbar-width:none;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.brandrow::-webkit-scrollbar { display:none; }
.brandchip { position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  min-width:104px; height:64px; padding:0 18px; border:1px solid var(--line); border-radius:14px;
  background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; scroll-snap-align:start; }
.brandchip span { font-weight:800; font-size:15px; color:var(--ink); white-space:nowrap; }
.brandchip input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.brandchip:hover { border-color:var(--brand-400); }
.brandchip.on { border-color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.brandchip img { height:34px; max-width:120px; object-fit:contain; display:block; }

/* ── Horizontal scroller with arrow paging (brand row, equipment chips) ── */
.hs { position:relative; }
.hs-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--ink); display:none; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 14px rgba(15,23,42,.14); transition:opacity .15s, transform .15s; }
.hs.hs-scrollable .hs-btn { display:inline-flex; }
.hs-btn:hover { transform:translateY(-50%) scale(1.06); }
.hs-btn[disabled] { opacity:0; pointer-events:none; }
.hs-btn svg { width:16px; height:16px; }
.hs-prev { inset-inline-start:-8px; }
.hs-next { inset-inline-end:-8px; }
[dir=rtl] .hs-btn svg { transform:scaleX(-1); }
@media (max-width:640px) { .hs-btn { width:32px; height:32px; } }
.mf-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:14px; }
.mf-field label { display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.mf-field select, .mf-field input[type=date], .mf-range input {
  height:46px; border:1px solid var(--line); border-radius:12px; padding:0 12px;
  background:var(--page); width:100%; font-size:14px; color:var(--ink); }
.mf-field select:disabled { opacity:.55; cursor:not-allowed; }
.mf-range { display:flex; align-items:center; gap:8px; }
.mf-range input { text-align:center; min-width:0; }
.mf-dash { color:var(--muted); flex:0 0 auto; }
.mf-adv { display:none; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px;
  padding-top:14px; border-top:1px dashed var(--line); }
.mf-adv-toggle:checked ~ .mf-adv { display:grid; }
.mf-actions { display:flex; justify-content:flex-end; margin-top:18px; }
.mf-submit { height:52px; padding:0 28px; border-radius:14px; font-size:15px; font-weight:800; }
@media (max-width: 860px) {
  .mf-grid { grid-template-columns:repeat(2,1fr); }
  .mf-adv { grid-template-columns:1fr; }
  .mf-actions { justify-content:stretch; }
  .mf-submit { width:100%; }
}
@media (max-width: 520px) { .mf-grid { grid-template-columns:1fr; } }

/* ── City picker modal (Browse-cars filter) ───────────────────────────── */
.mf-citybtn { cursor:pointer; font:inherit; font-weight:600; color:var(--ink); }
.mf-citybtn .mf-caret { color:var(--muted); font-size:11px; }
.cpick { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:16px; }
.cpick[hidden] { display:none; }
.cpick-backdrop { position:absolute; inset:0; background:rgba(2,6,23,.55); }
.cpick-panel { position:relative; background:#fff; border-radius:16px; width:min(560px, 100%);
  max-height:min(640px, 92vh); display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(2,6,23,.35); }
.cpick-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px;
  border-bottom:1px solid var(--line); }
.cpick-head h3 { font-size:19px; font-weight:800; margin:0; }
.cpick-x { border:0; background:none; font-size:18px; cursor:pointer; color:var(--ink); padding:4px 8px; }
.cpick-search { margin:16px 20px 4px; height:48px; border:1px solid var(--line); border-radius:10px;
  padding:0 14px; font-size:15px; }
.cpick-row { display:flex; align-items:center; gap:12px; padding:12px 20px; cursor:pointer; font-size:15px; font-weight:600; }
.cpick-row input { width:20px; height:20px; accent-color:var(--ink); flex:0 0 auto; }
.cpick-row[hidden] { display:none; }
.cpick-all { border-bottom:1px solid var(--line); margin-top:4px; }
.cpick-list { overflow-y:auto; flex:1; padding-bottom:6px; }
.cpick-foot { display:flex; justify-content:flex-end; padding:14px 20px; border-top:1px solid var(--line); }
.cpick-apply { min-width:130px; height:48px; border-radius:12px; font-weight:800; }

/* ── Range popovers (Year / Mileage / Price triggers) ─────────────────── */
.mf-pop { position:relative; }
.mf-popbtn { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  height:46px; border:1px solid var(--line); border-radius:12px; padding:0 12px;
  background:var(--page); font:inherit; font-size:14px; color:var(--ink); cursor:pointer; text-align:start; }
.mf-poplabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mf-popbtn .mf-caret { color:var(--muted); font-size:11px; flex:0 0 auto; }
.mf-popover { position:absolute; top:calc(100% + 8px); inset-inline-start:0; z-index:800;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px;
  width:max(100%, 300px); box-shadow:0 18px 44px rgba(2,6,23,.18); }
.mf-grid .mf-pop:last-child .mf-popover { inset-inline-start:auto; inset-inline-end:0; }
.mf-poprow { display:flex; gap:10px; }
.mf-poprow select { flex:1; min-width:0; }
.mf-popfoot { display:flex; justify-content:flex-end; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line); }
.mf-popdone { min-width:110px; height:44px; border-radius:10px; font-weight:800; }
.mf-tabs { display:flex; justify-content:flex-end; gap:0; margin-bottom:14px; }
.mf-tab { border:1px solid var(--line); background:#fff; font:inherit; font-size:14px; font-weight:700;
  color:var(--ink); padding:8px 16px; cursor:pointer; }
.mf-tab:first-child { border-start-start-radius:10px; border-end-start-radius:10px; }
.mf-tab:last-child { border-start-end-radius:10px; border-end-end-radius:10px; margin-inline-start:-1px; }
.mf-tab.on { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); position:relative; z-index:1; }
@media (max-width: 520px) { .mf-popover { width:100%; } }

/* ── Shared delete-confirmation modal ─────────────────────────────────── */
.rgc[hidden] { display:none; }
.rgc { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; }
.rgc-backdrop { position:absolute; inset:0; background:rgba(2,6,23,.62); backdrop-filter:blur(2px); }
.rgc-card { position:relative; width:min(360px,100%); background:#1c1e24; color:#fff; border-radius:22px;
  padding:26px 22px 22px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:rgcPop .16s ease-out; }
@keyframes rgcPop { from { transform:scale(.94); opacity:0; } to { transform:scale(1); opacity:1; } }
.rgc-icon { width:74px; height:74px; margin:0 auto 16px; border-radius:50%; background:#f8d2ce;
  display:flex; align-items:center; justify-content:center; }
.rgc-icon svg { width:34px; height:34px; fill:#e0483a; }
.rgc-title { font-size:25px; font-weight:900; margin:0 0 8px; }
.rgc-body { color:#c7cbd3; margin:0 0 22px; font-size:15px; line-height:1.5; }
.rgc-del, .rgc-cancel { display:block; width:100%; border:0; border-radius:14px; padding:14px;
  font-size:16px; font-weight:800; cursor:pointer; }
.rgc-del { background:#e0483a; color:#fff; margin-bottom:10px; }
.rgc-del:hover { background:#cf3d30; }
/* Same dialog, non-destructive action (e.g. sending a broadcast): brand gold
   instead of danger red, so the colour doesn't scream "delete". */
.rgc-del.rgc-go { background:var(--brand-600,#C9932B); }
.rgc-del.rgc-go:hover { background:var(--brand-700,#a8791f); }
.rgc-cancel { background:#eceafe; color:#4f46e5; }
.rgc-cancel:hover { background:#e2defd; }

/* ── Modern, uniform car cards (equal height, photos auto-fit/crop) ────── */
.card-wrap { height:100%; }
.card { display:flex; flex-direction:column; height:100%; transition:transform .18s, box-shadow .18s; }
a.card:hover { transform:translateY(-4px); box-shadow:0 18px 42px -18px rgba(15,23,42,.38); }
.carimg { aspect-ratio:16/10; width:100%; overflow:hidden; }
.carimg img { width:100%; height:100%; object-fit:cover; display:block; }
.card .body { padding:14px; display:flex; flex-direction:column; flex:1; gap:3px; }
.card .body .title-line { font-weight:800; font-size:15px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:1; line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.card .body .price { margin-top:auto; padding-top:10px; }
.chip-driver { background:#e0e7ff; color:#3730a3; }

/* ── Showcase home slider (matches the app design: scrim + featured chip
      + arrow CTA + gold pill dots) ─────────────────────────────────────── */
.slider-band { padding-block:26px 4px; }
.slider-modern { aspect-ratio:auto; height:clamp(190px,30vw,340px); border-radius:22px;
  background:#12161b; box-shadow:0 22px 50px -24px rgba(15,18,22,.6); }
.slider-modern .slide img { border-radius:22px; }
.slider-modern .slide-cap { position:static; padding:0; font-size:clamp(17px,2.2vw,22px);
  font-weight:900; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.45); background:none; }
.slide-scrim { position:absolute; inset:0; border-radius:22px; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.28) 38%, transparent 62%); }
.slide-info { position:absolute; inset-inline-start:20px; inset-block-end:18px;
  inset-inline-end:76px; display:flex; flex-direction:column; gap:7px; align-items:flex-start; }
.slide-kicker { background:var(--brand-600,#a66a0b); color:#fff; font-weight:900; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; padding:4px 9px; border-radius:6px; }
.slide-go { position:absolute; inset-inline-end:18px; inset-block-end:18px; width:42px; height:42px;
  border-radius:999px; background:rgba(255,255,255,.94); color:#12161b; font-size:20px; font-weight:900;
  display:flex; align-items:center; justify-content:center; transition:transform .18s; }
.slide:hover .slide-go { transform:translateX(3px); }
[dir=rtl] .slide-go { transform:rotate(180deg); }
[dir=rtl] .slide:hover .slide-go { transform:rotate(180deg) translateX(3px); }
.slider-modern .slider-nav { width:38px; height:38px; background:rgba(255,255,255,.16);
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.28); color:#fff; }
.slider-modern .slider-nav:hover { background:rgba(255,255,255,.3); }
.slider-modern .slider-dots i { background:rgba(255,255,255,.45); height:7px; width:7px; }
.slider-modern .slider-dots i.on { width:22px; background:var(--brand-400,#f5b93b); }
@media (max-width:640px){ .slide-info { inset-inline-start:14px; inset-block-end:14px; inset-inline-end:64px; }
  .slide-go { width:36px; height:36px; inset-inline-end:14px; inset-block-end:14px; } }

/* ── Popular Cars for Sale carousel ───────────────────────────────────── */
.sale-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.sale-arrows { display:flex; gap:8px; flex:0 0 auto; }
.sale-arrow { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff;
  cursor:pointer; font-size:20px; line-height:1; color:var(--ink); display:flex; align-items:center; justify-content:center; }
.sale-arrow:hover { background:var(--page); border-color:var(--brand-400); }
.sale-row { display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity;
  padding-bottom:8px; scrollbar-width:thin; }
/* RTL + scroll-snap strands this scroller in WebKit: iOS Safari computes RTL
   scrollLeft differently and can settle past the content, leaving one card edge
   visible at the far side and blank space where the row should be. Snapping is
   a nicety; a usable row is not. */
[dir="rtl"] .sale-row { scroll-snap-type:none; }
.sale-card { position:relative; flex:0 0 auto;
  /* Plain width + max-width instead of min(): if a browser drops the
     min() declaration the card falls back to width:auto and sizes to the
     photo's intrinsic width, which rendered as a tall narrow sliver. */
  width:82vw; max-width:380px; scroll-snap-align:start;
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow); background:#0b1220;
  transition:transform .18s, box-shadow .18s; }
.sale-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(15,23,42,.4); }
.sale-img { aspect-ratio:16/10; width:100%; }
.sale-img img { width:100%; height:100%; object-fit:cover; display:block; }
.sale-noimg { position:absolute; inset:0; display:grid; place-items:center; color:#94a3b8; font-weight:700; padding:12px; text-align:center; }
.sale-seller { position:absolute; inset-block-end:12px; inset-inline-start:12px; background:#22c55e; color:#fff;
  font-weight:800; font-size:14px; padding:7px 13px; border-radius:10px; display:inline-flex; align-items:center; gap:6px; }
.sale-price { position:absolute; inset-block-end:12px; inset-inline-end:12px; background:#ef4444; color:#fff;
  font-weight:800; font-size:15px; padding:7px 13px; border-radius:10px; }

/* ── Cross-promotion strips (rent ↔ sale browse pages) ────────────────── */
/* One horizontal line of regular listing cards inside an .hs scroller; the
   cards themselves are the normal grid cards, just pinned to a fixed width. */
.xpromo-row { display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth;
  padding-bottom:8px; scrollbar-width:thin; }
.xpromo-row > .card-wrap { flex:0 0 auto; width:270px; }

/* ── Modern admin dashboard ───────────────────────────────────────────── */
.dash-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; }
.kpi:hover { transform:translateY(-3px); box-shadow:0 16px 36px -18px rgba(15,23,42,.32); }
.kpi-ic { width:44px; height:44px; border-radius:12px; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:20px; margin-bottom:12px; }
.kpi-num { font-size:28px; font-weight:900; color:var(--ink); line-height:1.1; }
.kpi-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; flex-wrap:wrap; }
.kpi-label { color:var(--muted); font-size:13px; font-weight:600; }
.kpi-change { font-size:12px; font-weight:800; border-radius:999px; padding:2px 8px; white-space:nowrap; }
.kpi-change.up { color:#166534; background:#dcfce7; }
.kpi-change.down { color:#b91c1c; background:#fee2e2; }
.dash-grid2 { display:grid; grid-template-columns:1.6fr 1fr; gap:20px; }
.dash-grid3 { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:20px; margin-top:20px; }
.dash-panel { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow); }
.dash-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; }
.dash-head h2 { font-size:16px; font-weight:800; margin:0; }
.dash-pill { border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; }
.earn-chart { width:100%; height:200px; display:block; }
.earn-labels { display:flex; justify-content:space-between; margin-top:6px; color:var(--muted); font-size:12px; }
.donut-wrap { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.donut { width:150px; height:150px; flex:0 0 auto; }
.donut-legend { display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--ink); }
.donut-legend .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-inline-end:7px; }
.bars { display:flex; align-items:flex-end; gap:10px; height:180px; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; }
.bar-track { flex:1; width:100%; display:flex; align-items:flex-end; }
.bar-fill { width:100%; max-width:26px; margin:0 auto; background:linear-gradient(180deg,var(--brand-400),var(--brand-600)); border-radius:8px 8px 0 0; }
.bar-lbl { font-size:11px; color:var(--muted); }
.cartype { margin-bottom:12px; }
.cartype-bar { height:12px; border-radius:999px; background:#eef2f7; overflow:hidden; }
.cartype-fill { height:100%; border-radius:999px; background:var(--ink); }
.cartype-row { display:flex; justify-content:space-between; margin-top:4px; font-size:13px; }
.mini-stat { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid #f1f5f9; }
.mini-stat:last-child { border-bottom:0; }
.dash-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid #f1f5f9; gap:10px; }
@media (max-width:1000px){ .dash-kpis{grid-template-columns:repeat(2,1fr)} .dash-grid2,.dash-grid3{grid-template-columns:1fr} }
@media (max-width:560px){ .dash-kpis{grid-template-columns:1fr} }

/* Armored (secure transport) badge — dark tactical chip. */
.chip-armored { background:#1f2937; color:#e5e7eb; }

/* Upload-progress overlay (partials/upload-progress.php) */
.upx { position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(2,6,23,.6); backdrop-filter:blur(3px); }
.upx[hidden] { display:none; }
.upx-panel { background:var(--card); border-radius:20px; padding:32px 24px; width:min(420px,100%);
  text-align:center; box-shadow:0 24px 60px rgba(2,6,23,.35); animation:upxIn .35s cubic-bezier(.18,.9,.32,1.2); }
.upx-title { font-size:19px; font-weight:900; margin:16px 0 6px; }
.upx-sub { color:var(--muted); font-size:14.5px; line-height:1.55; margin:0 0 4px; }
.upx-spinner { width:44px; height:44px; margin:0 auto; border-radius:50%;
  border:4px solid var(--brand-100); border-top-color:var(--brand-600); animation:upxSpin .8s linear infinite; }
.upx-track { display:flex; height:8px; margin-top:16px; border-radius:999px; background:var(--brand-50);
  border:1px solid var(--brand-100); overflow:hidden; }
.upx-track[hidden] { display:none; }
.upx-bar { width:0%; border-radius:999px; background:linear-gradient(90deg,var(--brand-400),var(--brand-600));
  transition:width .25s ease; }
.upx-clock { width:72px; height:72px; margin:0 auto; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); }
.upx #upxDone .btn { margin-top:18px; }
@keyframes upxSpin { to { transform:rotate(360deg); } }
@keyframes upxIn { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }

/* ── Cars for sale (marketplace) ──────────────────────────────────────── */
.sale-hero { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;
  position:relative; overflow:hidden; border-radius:28px; background:#0f172a; color:#fff; padding:28px;
  box-shadow:0 24px 60px -28px rgba(15,23,42,.55); }
.sale-hero:before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 120% at 92% 0%, rgba(245,185,59,.24), transparent 58%),
             radial-gradient(65% 100% at 0% 100%, rgba(245,185,59,.12), transparent 55%); }
.sale-hero > * { position:relative; z-index:1; }
.sale-kicker { display:inline-flex; border:1px solid rgba(245,185,59,.28); background:rgba(245,185,59,.10);
  color:#f8c85a; border-radius:999px; padding:6px 12px; font-size:11px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.sale-title { margin:12px 0 0; font-size:clamp(26px,4vw,40px); line-height:1.05; font-weight:950; letter-spacing:-.03em; }
.sale-sub { margin:8px 0 0; color:#cbd5e1; font-size:14px; max-width:560px; }
.sale-cta { padding:13px 24px; font-size:15px; }
/* /sale filter: min/max price inputs + currency select share one row. */
.mf-field input[type=number] { height:46px; border:1px solid var(--line); border-radius:12px;
  padding:0 12px; background:var(--page); width:100%; font-size:14px; color:var(--ink); min-width:0; }
.mf-poprow > select, .mf-poprow > input { min-width:0; }
.mf-poprow > select[name=currency] { flex:0 0 auto; width:auto; }
.chip-sale { background:#0f172a; color:#f8c85a; }
.chip-neg { background:#dcfce7; color:#166534; }
/* SOLD ribbon over the card photo (logical corner — mirrors correctly in RTL). */
.sold-ribbon { position:absolute; inset-block-start:12px; inset-inline-start:-34px; z-index:2;
  transform:rotate(-35deg); background:var(--red); color:#fff; font-weight:900; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; padding:5px 42px; box-shadow:0 6px 16px rgba(0,0,0,.25);
  pointer-events:none; }
[dir="rtl"] .sold-ribbon { transform:rotate(35deg); }
.sale-card .carimg, .card .carimg { position:relative; }
.sold-ribbon-lg { inset-block-start:22px; font-size:14px; padding:7px 52px; }
.card.sale-sold .carimg img { filter:grayscale(.7); opacity:.85; }
/* Seller card (contact-to-buy) on the sale detail page. */
.sale-seller-card { margin-top:20px; border:1px solid var(--line); border-radius:18px; background:#fff;
  box-shadow:var(--shadow); padding:18px; }
.sale-seller-head { display:flex; gap:12px; align-items:center; }
.sale-seller-ic { width:44px; height:44px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center;
  font-size:22px; background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); color:#fff; }
.sale-seller-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
/* Cost summary panel + promo package radio cards (sell-your-car form). */
.cost-panel { border:1px solid var(--brand-100); border-radius:16px; padding:16px; background:var(--brand-50);
  display:flex; flex-direction:column; gap:10px; }
.cost-row { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14.5px; }
.cost-total { border-top:1px dashed var(--brand-100); padding-top:10px; font-size:16px; font-weight:900; }
.pkg-list { display:flex; flex-direction:column; gap:8px; }
.pkg-card { position:relative; display:flex; cursor:pointer; }
.pkg-card input { position:absolute; inset-inline-start:14px; inset-block-start:16px; accent-color:var(--brand-600); }
.pkg-card .pkg-body { flex:1; display:flex; flex-direction:column; gap:4px; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; padding-inline-start:40px;
  transition:border-color .15s, box-shadow .15s; }
.pkg-card:hover .pkg-body { border-color:var(--brand-400); }
.pkg-card input:checked + .pkg-body { border-color:var(--brand-600); box-shadow:inset 0 0 0 1px var(--brand-600); }
.pkg-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.pkg-price { font-weight:900; color:var(--brand-700); white-space:nowrap; }
.pkg-channels { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.pkg-ch { font-size:10px; padding:2px 8px; background:#e2e8f0; color:#334155; }
.pkg-ch-facebook { background:#dbeafe; color:#1d4ed8; }
.pkg-ch-instagram { background:#fce7f3; color:#be185d; }
.pkg-ch-tiktok { background:#0f172a; color:#e2e8f0; }
.pkg-ch-platform { background:var(--brand-100); color:var(--brand-700); }
/* SOLD banner on the detail page. */
.sale-sold-banner { background:#0f172a; color:#fff; border-radius:14px; padding:12px 18px; font-weight:800;
  margin-bottom:14px; border-inline-start:4px solid var(--red); }

/* Show/hide-password toggle (.pwx wrapper around password inputs) */
.pwx { position:relative; display:block; }
.pwx input { width:100%; padding-inline-end:44px; }
.pwx-t { position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; cursor:pointer; font-size:17px; line-height:1;
  padding:6px; border-radius:8px; opacity:.65; }
.pwx-t:hover { opacity:1; background:#f1f5f9; }