/* Shared dark-mode rules for every VELOCARS page. Core theme variables live in style.css. */
html body.dark { color-scheme: dark; }
body.dark input, body.dark textarea, body.dark select { background: var(--surface); color: var(--text); border-color: var(--line); }
body.dark input::placeholder, body.dark textarea::placeholder { color: var(--muted); }
body.dark .auth-card, body.dark .auth-panel { background: var(--surface); color: var(--text); border-color: var(--line); }

body.dark .login-topbar{background:var(--header,rgba(16,23,18,.96));border-bottom-color:var(--line);}
body.dark .login-card{background:var(--surface);color:var(--text);border-color:var(--line);}

/* Keep native dropdown menus readable in dark mode (including Home 1 search). */
html body.dark select,
html body.dark select option,
html body.dark .hx-search select,
html body.dark .hx-search select option,
html body.dark .h1x-search select,
html body.dark .h1x-search select option,
html body.dark .filter-panel select option,
html body.dark .sort-control select option {
  color: #f2f7f0 !important;
  background-color: #18231b !important;
  -webkit-text-fill-color: #f2f7f0;
}
html body.dark select:focus,
html body.dark select option:checked {
  color: #f2f7f0 !important;
  background-color: #294337 !important;
}

/* Sell Your Car: keep glass action cards readable when hovered in dark mode. */
html body.dark .vx-gl:hover,
html body.dark .vx-gl:hover p,
html body.dark .vx-gl:hover b,
html body.dark .vx-gl:hover small {
  color: #173d32 !important;
  -webkit-text-fill-color: #173d32 !important;
  opacity: 1;
}
html body.dark .vx-gl:hover b { font-weight: 800; }
html body.dark .vx-gl:hover small { opacity: 1 !important; }
html body.dark .vx-gl:hover .gi { color: #173d32 !important; }
html body.dark .vx-gl:hover i { color: #c7f36b !important; }

/* Contact page lime CTA: the supporting sentence must remain legible in dark mode. */
html body.dark .contact-cta .cta-panel,
html body.dark .contact-cta .cta-copy,
html body.dark .contact-cta .cta-copy h2,
html body.dark .contact-cta .cta-copy p,
html body.dark .contact-cta .cta-copy .eyebrow {
  color: #172214 !important;
  -webkit-text-fill-color: #172214 !important;
}
html body.dark .contact-cta .cta-copy p { opacity: 1 !important; }

/* Final contrast repair: Sell page action arrows must remain visible in every state. */
html body.dark .vx-gl i,
html body.dark .vx-gl:hover i {
  display: grid !important;
  place-items: center !important;
  color: #173d32 !important;
  -webkit-text-fill-color: #173d32 !important;
  background: #c7f36b !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html body.dark .vx-gl:hover i {
  color: #c7f36b !important;
  -webkit-text-fill-color: #c7f36b !important;
  background: #173d32 !important;
}
html body.dark .vx-gl:hover .gi,
html body.dark .vx-gl:hover .gi svg {
  color: #173d32 !important;
  stroke: #173d32 !important;
}

/* Contact CTA: the dark-mode text override must never hide the button label. */
html body.dark .contact-cta .cta-panel > a.btn,
html body.dark .contact-cta .cta-panel > a.btn:visited,
html body.dark .contact-cta .cta-panel > a.btn:hover,
html body.dark .contact-cta .cta-panel > a.btn:focus {
  background: #173d32 !important;
  color: #f5f0e5 !important;
  -webkit-text-fill-color: #f5f0e5 !important;
  opacity: 1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  position: relative !important;
  z-index: 3 !important;
  isolation: isolate;
}
html body.dark .contact-cta .cta-panel:after {
  color: rgba(245, 240, 229, .52) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
html body.dark .contact-cta .cta-panel .cta-copy {
  position: relative !important;
  z-index: 2 !important;
}