:root{
  color-scheme:light;
  --cs-page:#f8fafc;
  --cs-surface:#ffffff;
  --cs-surface-2:#f8fafc;
  --cs-border:#e2e8f0;
  --cs-text:#081b35;
  --cs-muted:#64748b;
}
html{background:var(--cs-page)}
body{background:var(--cs-page);transition:background-color .22s ease,color .22s ease}
html.dark{
  color-scheme:dark;
  --cs-page:#07111f;
  --cs-surface:#0d1d31;
  --cs-surface-2:#102238;
  --cs-border:#263d5a;
  --cs-text:#edf5ff;
  --cs-muted:#aab9cc;
}
html.dark body{background:#07111f!important;color:#e7eef8!important}
html.dark header{background:rgba(7,17,31,.95)!important;border-color:#223956!important;box-shadow:0 8px 30px rgba(0,0,0,.15)}
html.dark main{color:#e7eef8}
html.dark footer{background:#030a14!important}
html.dark .bg-white,
html.dark .bg-background{background-color:#0d1d31!important}
html.dark .bg-slate-50{background-color:#0a1728!important}
html.dark .bg-slate-100{background-color:#12243a!important}
html.dark .bg-blue-50{background-color:#10294b!important}
html.dark .bg-emerald-50{background-color:#0b2a25!important}
html.dark .border-slate-200,
html.dark .border-slate-200\/70,
html.dark .border-slate-300{border-color:#29415f!important}
html.dark .border-blue-200{border-color:#24528a!important}
html.dark .border-emerald-200{border-color:#1c5f50!important}
html.dark .text-slate-950,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700,
html.dark [class*="text-[#081b35]"],
html.dark [class*="text-[#06152d]"]{color:#edf5ff!important}
html.dark .text-slate-600{color:#c2cfdd!important}
html.dark .text-slate-500{color:#aab9cc!important}
html.dark .text-slate-400{color:#91a4ba!important}
html.dark .text-blue-700,
html.dark .text-blue-600{color:#69a9ff!important}
html.dark .text-emerald-800,
html.dark .text-emerald-700{color:#6ee7c2!important}
html.dark input,
html.dark select,
html.dark textarea,
html.dark .cars-filter-control,
html.dark .dealer-control,
html.dark .article-control,
html.dark .sell-input,
html.dark .sell-area{
  background:#0b1a2d!important;
  color:#edf5ff!important;
  border-color:#2b4667!important;
}
html.dark input::placeholder,
html.dark textarea::placeholder{color:#8296ae!important}
html.dark select option{background:#0b1a2d;color:#edf5ff}
html.dark .sell-card{background:#0d1d31!important;border-color:#29415f!important}
html.dark .sell-label{color:#c9d6e4!important}
html.dark .sell-step{color:#9eb0c4!important}
html.dark .sell-step span{background:#172b43!important;color:#cbd7e5!important}
html.dark .sell-step.active{color:#69a9ff!important}
html.dark .sell-step.active span{background:#176bff!important;color:#fff!important}
html.dark .sell-upload{background:#0d2542!important;border-color:#2f6cad!important}
html.dark .sell-upload:hover{background:#123052!important}
html.dark .sell-note{background:#0a1728!important;border-color:#29415f!important;color:#b5c4d5!important}
html.dark #car-sy-helper-panel{background:#0b1728!important;border-color:#29415f!important}
html.dark #car-sy-helper-panel .csh-body{background:#07111f!important}
html.dark #car-sy-helper-panel .csh-assistant{background:#0f2137!important;color:#e7eef8!important;border-color:#29415f!important}
html.dark #car-sy-helper-panel .csh-suggestions,
html.dark #car-sy-helper-panel .csh-form{background:#0b1728!important;border-color:#29415f!important}
html.dark #car-sy-helper-panel .csh-input{background:#071729!important;color:#edf5ff!important;border-color:#2b4667!important}
html.dark #car-sy-helper-panel .csh-chip{background:#10294b!important;color:#8fc0ff!important;border-color:#24528a!important}

/* Keep the branded hero intentionally navy in both modes. */
html.dark .navy-gradient{color:#fff}
html.dark .navy-gradient .text-slate-200,
html.dark .navy-gradient .text-slate-300{color:#dbe7f5!important}

/* Theme control */
header>.container-shell{padding-left:68px!important}
#carsyria-theme-toggle{
  position:fixed!important;
  inset:auto!important;
  top:14px!important;
  left:14px!important;
  right:auto!important;
  bottom:auto!important;
  z-index:2147483643;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.38);
  background:rgba(255,255,255,.92);
  color:#0b2345;
  box-shadow:0 10px 28px rgba(7,24,48,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
#carsyria-theme-toggle:hover{transform:translateY(-1px) scale(1.03)}
#carsyria-theme-toggle:active{transform:scale(.96)}
#carsyria-theme-toggle svg{width:21px;height:21px}
html.dark #carsyria-theme-toggle{
  background:rgba(13,29,49,.94);
  color:#ffd76a;
  border-color:#315071;
  box-shadow:0 10px 30px rgba(0,0,0,.32);
}
@media(max-width:767px){
  header>.container-shell{padding-left:62px!important}
  #carsyria-theme-toggle{width:40px;height:40px;top:16px!important;left:10px!important;right:auto!important;bottom:auto!important;border-radius:13px}
}
@media(prefers-reduced-motion:reduce){
  body,#carsyria-theme-toggle{transition:none!important}
}
/* Avoid covering homepage filters on desktop: header helper is already available. */
@media(min-width:768px){
  button[aria-label="مساعد Car SY"].fixed{display:none!important}
}


/* Car Syria mobile UI hardening — 2026-09-25 */
@media(max-width:767px){
  html{overflow-x:hidden}
  body{
    overflow-x:hidden;
    padding-bottom:calc(78px + env(safe-area-inset-bottom))!important;
  }
  .container-shell{
    width:100%!important;
    max-width:100%!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }
  header>.container-shell{
    min-height:64px!important;
    height:64px!important;
    padding-left:58px!important;
    padding-right:16px!important;
  }
  header img{max-width:142px!important;height:40px!important}
  #carsyria-theme-toggle{
    width:40px!important;height:40px!important;top:12px!important;left:10px!important;
  }

  /* Keep the persistent phone navigation clear of content and iPhone safe area. */
  nav[aria-label="تنقل الهاتف"]{
    height:calc(68px + env(safe-area-inset-bottom))!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
    background:rgba(255,255,255,.97)!important;
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
  }
  html.dark nav[aria-label="تنقل الهاتف"]{
    background:rgba(7,17,31,.97)!important;
    border-color:#29415f!important;
  }
  nav[aria-label="تنقل الهاتف"] a{
    min-width:0!important;
    touch-action:manipulation;
  }

  /* Compact assistant: never cover cards/footer text or the main sell button. */
  button[aria-label="مساعد Car SY"].fixed,
  #car-sy-helper-launcher{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    padding:0!important;
    right:12px!important;
    bottom:calc(82px + env(safe-area-inset-bottom))!important;
    border-radius:15px!important;
    display:grid!important;
    place-items:center!important;
  }
  button[aria-label="مساعد Car SY"].fixed>span:first-child{display:grid!important;place-items:center!important}
  button[aria-label="مساعد Car SY"].fixed>span:not(:first-child){display:none!important}

  /* Toasts must sit above navigation and remain readable on narrow phones. */
  #carsyria-toast,#carsyria-action-toast{
    bottom:calc(142px + env(safe-area-inset-bottom))!important;
    width:max-content!important;
    max-width:calc(100vw - 32px)!important;
    padding:11px 15px!important;
    font-size:13px!important;
    line-height:1.55!important;
  }

  footer{margin-bottom:0!important;padding-bottom:28px!important}
  footer .container-shell{padding-left:20px!important;padding-right:20px!important}
  img,svg,video{max-width:100%}
}


/* Car Syria phone tap targets */
@media(max-width:767px){
  #carsyria-theme-toggle,
  button[aria-label="فتح القائمة"]{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    touch-action:manipulation;
  }
  #carsyria-theme-toggle{top:10px!important;left:8px!important}
  footer a[aria-label="رابط تواصل"]{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    touch-action:manipulation;
  }
}


/* Favorites */
.carsyria-favorite-btn{position:absolute;left:12px;top:12px;z-index:8;width:42px;height:42px;border:1px solid rgba(226,232,240,.95);border-radius:14px;background:rgba(255,255,255,.94);color:#176bff;font-size:25px;line-height:1;display:grid;place-items:center;box-shadow:0 8px 22px rgba(8,27,53,.16);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.carsyria-favorite-btn[aria-pressed="true"]{color:#ef4444;background:#fff}
.carsyria-favorite-detail{width:100%;height:48px;border:1px solid #fecaca;border-radius:12px;background:#fff;color:#dc2626;font-family:inherit;font-weight:900;cursor:pointer}
html.dark .carsyria-favorite-btn{background:rgba(13,29,49,.94);border-color:#315071;color:#8fc0ff}
html.dark .carsyria-favorite-btn[aria-pressed="true"]{color:#fb7185}
html.dark .carsyria-favorite-detail{background:#0d1d31;border-color:#7f1d1d;color:#fda4af}
@media(max-width:767px){.carsyria-favorite-btn{width:44px;height:44px;left:10px;top:10px}}

/* Clear, readable Car Syria wordmark next to the official mark. */
header a:has(>.carsyria-brand-text){display:inline-flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none}
header .carsyria-brand-text{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;line-height:1.12;color:#081b35}
header .carsyria-brand-text strong{font-family:Arial,sans-serif;font-size:20px;font-weight:900;letter-spacing:-.045em}
header .carsyria-brand-text small{font-size:11px;font-weight:700;letter-spacing:0;color:#64748b}
html.dark header .carsyria-brand-text{color:#edf5ff}
html.dark header .carsyria-brand-text small{color:#aab9cc}
@media(max-width:767px){header .carsyria-brand-text strong{font-size:17px}header .carsyria-brand-text small{font-size:10px}}
@media(max-width:390px){header .carsyria-brand-text small{display:none}}
/* Give the genuine empty state the same visual weight as listing cards. */
#cars-empty{border-color:#cbdcf4!important;background:linear-gradient(145deg,#fff 55%,#f0f6ff)!important;box-shadow:0 12px 36px rgba(8,27,53,.05)}
#cars-empty>span{background:#e9f2ff!important;color:#176bff!important}
html.dark #cars-empty{border-color:#29415f!important;background:linear-gradient(145deg,#0d1d31,#10294b)!important}

/* Published listings and the publish preview: the vehicle photo leads, and the maker mark stays compact. */
.carsyria-car-card{border:1px solid #dbe6f4;box-shadow:0 10px 28px rgba(8,27,53,.07)}
.carsyria-car-card:hover{box-shadow:0 18px 38px rgba(8,27,53,.13)}
.carsyria-listing-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#edf4fc}
.carsyria-listing-media>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.carsyria-listing-brand-logo{display:block!important;flex:none!important;width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important;object-fit:contain!important;border:1px solid #dbe6f4;border-radius:10px;padding:4px;background:#fff}
html.dark .carsyria-car-card{border-color:#29415f;box-shadow:0 10px 28px rgba(0,0,0,.2)}
html.dark .carsyria-listing-media{background:#102238}

/* Compact, image-led listing cards across catalogue, home and favorites. */
#cars-grid,#favorites-grid,#featured-section .container-shell>.grid,#cars-section>.grid{
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:14px!important;
}
.carsyria-car-card{border-radius:15px!important}
.carsyria-listing-media{aspect-ratio:16/10!important}
.carsyria-car-card .p-5{padding:11px!important}
.carsyria-car-card h3{font-size:15px!important;line-height:1.5!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.carsyria-car-card p{font-size:12px!important;margin-top:6px!important}
.carsyria-car-card strong{font-size:16px!important}
.carsyria-car-card .mt-4{margin-top:11px!important}
.carsyria-listing-brand-logo{width:29px!important;height:29px!important;max-width:29px!important;max-height:29px!important;border-radius:8px!important;padding:3px!important}
.carsyria-favorite-btn{width:36px;height:36px;left:8px;top:8px}
.carsyria-favorite-btn svg{width:19px;height:19px;fill:none}
.carsyria-favorite-btn[aria-pressed="true"] svg{fill:currentColor}
.carsyria-notify-btn svg,#carsyria-notify-btn svg{width:19px;height:19px}
@media(max-width:650px){#cars-grid,#favorites-grid,#featured-section .container-shell>.grid,#cars-section>.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}}
@media(max-width:440px){#cars-grid,#favorites-grid,#featured-section .container-shell>.grid,#cars-section>.grid{grid-template-columns:1fr!important}}