/**
 * eAuto dark theme — anthracite canvas, purple only around search + CTA.
 * Activate with html[data-theme="dark"].
 */
html[data-theme="dark"] {
  color-scheme: dark;

  /* POVRŠINE — mockup: crni canvas, antracit kartice */
  --background: #0e0f14;
  --canvas: #0e0f14;
  --surface: #1a1b22;
  --bg: #1a1b22;
  --surface-soft: #16171d;
  --surface-hover: #24252e;
  --surface-input: #121318;
  --theme-color: #0e0f14;
  --pearl: #e4e1ec;
  --pearl-hover: #eeeaf4;
  --pearl-ink: #1a1b22;

  /* BRAND */
  --primary: #7a5af8;
  --primary-hover: #896bff;
  --primary-active: #6846e8;
  --primary-deep: #5133c7;
  --primary-bright: #b49aff;
  --primary-soft: rgba(122, 90, 248, 0.12);
  --primary-soft-hover: rgba(122, 90, 248, 0.18);
  --primary-rgb: 122, 90, 248;

  /* TEKST */
  --text-primary: #f4f3f8;
  --text-secondary: #b8bac8;
  --text-muted: #969aaa;
  --text-disabled: #6b6f80;
  --text-on-primary: #ffffff;
  --text-on-dark: #18191d;
  --text-on-dark-muted: #969aaa;

  /* IVICE */
  --border: rgba(184, 186, 200, 0.14);
  --border-strong: rgba(184, 186, 200, 0.26);
  --border-brand: rgba(164, 137, 255, 0.45);
  --border-focus: #b49aff;

  /* STATUS */
  --success: #2ecf84;
  --success-soft: rgba(46, 207, 132, 0.16);
  --success-ink: #7aefb4;
  --warning: #f5b84a;
  --warning-soft: rgba(245, 184, 74, 0.16);
  --warn-ink: #ffd28a;
  --error: #ff7373;
  --error-soft: rgba(255, 115, 115, 0.16);
  --info: #79aeff;
  --info-soft: rgba(121, 174, 255, 0.16);

  /* GRADIENTI — ljubičasti sjaj samo gore oko pretrage */
  --gradient-canvas: radial-gradient(
      ellipse at 50% 12%,
      rgba(122, 90, 248, 0.32) 0%,
      rgba(122, 90, 248, 0.08) 42%,
      transparent 70%
    ),
    #0e0f14;
  --gradient-search: linear-gradient(165deg, #241e36 0%, #1a1726 48%, #14131c 100%);
  --gradient-card: linear-gradient(180deg, #1e1f27 0%, #17181e 100%);
  --gradient-primary: linear-gradient(110deg, #8752ee 0%, #7045e8 100%);
  --gradient-promo: linear-gradient(120deg, #3a2b60 0%, #1c1828 55%, #121318 100%);
  --primary-gradient: var(--gradient-primary);
  --primary-gradient-hero: var(--gradient-canvas);
  --primary-gradient-diag: var(--gradient-search);

  /* SENKE */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-primary: 0 4px 18px rgba(122, 90, 248, 0.28);
  --shadow-search: 0 0 0 1px rgba(164, 137, 255, 0.42), 0 12px 40px rgba(122, 90, 248, 0.22);

  /* CONTRAST (ink on light plates — not brand navy) */
  --dark: #f4f3f8;
  --dark-elevated: #ffffff;
  --dark-hover: #ffffff;
  --dark-deeper: #ffffff;
  --dark-rgb: 244, 243, 248;
  --dark-deeper-rgb: 255, 255, 255;

  /* ICONS */
  --icon-primary: #f4f3f8;
  --icon-secondary: #b8bac8;
  --icon-muted: #969aaa;
  --icon-on-primary: #ffffff;

  /* OVERLAYS */
  --overlay-light: rgba(255, 255, 255, 0.04);
  --overlay-medium: rgba(255, 255, 255, 0.08);
  --overlay-dark: rgba(0, 0, 0, 0.65);

  /* LEGACY ALIASES */
  --ink: var(--text-primary);
  --ink-2: var(--text-primary);
  --surface-2: var(--surface-soft);
  --glass: rgba(35, 36, 43, 0.92);
  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --muted: var(--text-muted);
  --muted-2: var(--text-secondary);
  --accent: var(--primary);
  --accent-soft: var(--primary-soft);
  --accent-strong: var(--primary-hover);
  --accent-ink: var(--primary-bright);
  --danger: var(--error);
  --warn-soft: var(--warning-soft);
  --star: var(--warning);
}

/* Page canvas must follow theme (home/market shells used to hardcode light gray/white) */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #app,
html[data-theme="dark"] .site-shell,
html[data-theme="dark"] .site-main,
html[data-theme="dark"] .home-page,
html[data-theme="dark"] .home-hero-final,
html[data-theme="dark"] .market-page,
html[data-theme="dark"] .browse-page,
html[data-theme="dark"] .page-enter {
  background-color: var(--canvas);
  color: var(--text-primary);
}

/* Dedicated dark logo keeps white mark strokes (invert made them black) */
html[data-theme="dark"] .site-logo .logo-img,
html[data-theme="dark"] .site-logo .logo-img-on-dark {
  filter: none;
}

html[data-theme="dark"] .site-logo .logo-light {
  display: none !important;
}

html[data-theme="dark"] .site-logo .logo-dark {
  display: block !important;
}

.site-logo .logo-dark {
  display: none;
}

/* Soften pure-white chrome leftovers that still hardcode #fff */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .hdr-drawer,
html[data-theme="dark"] .hdr-profile-menu,
html[data-theme="dark"] .hdr-cats-panel,
html[data-theme="dark"] .hdr-d-group,
html[data-theme="dark"] .site-header.is-menu-open {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
}

html[data-theme="dark"] .listing-card.v2,
html[data-theme="dark"] .listing-card.v2.featured,
html[data-theme="dark"] .listing-card.v2.featured:hover {
  background: #1a1b24 !important;
  border-color: #2a2c38 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .listing-card.v2 .body,
html[data-theme="dark"] .listing-card.v2.featured .body,
html[data-theme="dark"] .listing-card.v2.featured:hover .body {
  background: #1a1b24 !important;
  color: #fff;
}

html[data-theme="dark"] .listing-card.v2 .title,
html[data-theme="dark"] .listing-card.v2.featured .title,
html[data-theme="dark"] .listing-card.v2 .price {
  color: #fff !important;
}

/* Specs / seller on cards — hardcoded grays in seller.css + mobile.css */
html[data-theme="dark"] .listing-card.v2 .meta-top,
html[data-theme="dark"] .listing-card.v2 .meta-bottom,
html[data-theme="dark"] .listing-card.v2 .card-foot-loc,
html[data-theme="dark"] .listing-card.v2 .card-foot-loc svg,
html[data-theme="dark"] .listing-card.v2 .spec-line,
html[data-theme="dark"] .listing-card.v2 .card-year,
html[data-theme="dark"] .listing-card.v2 .card-loc,
html[data-theme="dark"] .listing-card.v2 .loc,
html[data-theme="dark"] .listing-card.v2 .cat,
html[data-theme="dark"] .listing-card.v2 .fact strong,
html[data-theme="dark"] .listing-card.v2 .fact span {
  color: #fff !important;
}

html[data-theme="dark"] .listing-card.v2 .fact strong::after {
  background: rgba(255, 255, 255, 0.42) !important;
}

html[data-theme="dark"] .listing-card.v2 .meta-top {
  border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="dark"] .listing-card.v2 .card-labels {
  border-top-color: rgba(255, 255, 255, 0.16) !important;
}

/* ============================================================
   Home search — match tamna_tema.jpeg mockup
   ============================================================ */

/* Keep brand dark bands (same as light mode) — do not follow inverted --dark */
html[data-theme="dark"] .home-quick-search {
  background: #302462;
  color: #fff;
}

html[data-theme="dark"] .home-promo {
  background:
    radial-gradient(55% 80% at 90% 40%, rgba(110, 74, 255, 0.1), transparent 60%),
    #302462;
  color: #fff;
}

/* Stats band — dark gray with white figures */
html[data-theme="dark"] .home-stats,
html[data-theme="dark"] #home-stats {
  background: #1a1b24;
  border-color: #2a2c38;
}

html[data-theme="dark"] .home-stats .hs-item,
html[data-theme="dark"] #home-stats .hs-item {
  border-color: #2a2c38;
}

html[data-theme="dark"] .home-stats .hs-item strong,
html[data-theme="dark"] .home-stats .hs-item strong.accent,
html[data-theme="dark"] #home-stats .hs-item strong,
html[data-theme="dark"] #home-stats .hs-item strong.accent {
  color: #fff;
}

html[data-theme="dark"] .home-stats .hs-item span,
html[data-theme="dark"] #home-stats .hs-item span {
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="dark"] .home-stats a.hs-item-link:hover,
html[data-theme="dark"] #home-stats a.hs-item-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Brands — denser, higher-contrast dark grid */
html[data-theme="dark"] .home-brands-sec .home-h2 {
  color: #fff;
  letter-spacing: -0.03em;
}

html[data-theme="dark"] .home-brands-sec .home-lead {
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .home-brands,
html[data-theme="dark"] #home-brands {
  background: #0a0b12;
  border: 1px solid #2c2e3c;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(110, 74, 255, 0.03),
    0 18px 48px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .home-brands .brand-tile,
html[data-theme="dark"] #home-brands .brand-tile {
  background: #141622;
  color: #fff;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

html[data-theme="dark"] .home-brands .brand-tile:hover,
html[data-theme="dark"] #home-brands .brand-tile:hover {
  background: #1c1f30;
  box-shadow: inset 0 0 0 1px rgba(110, 74, 255, 0.22);
  z-index: 1;
}

html[data-theme="dark"] .home-brands .bc-av,
html[data-theme="dark"] #home-brands .bc-av {
  color: var(--pearl-ink);
  background-color: var(--pearl);
  border-radius: 12px;
  width: min(100%, 100px);
  height: 68px;
  padding: 0.4rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .home-brands .bc-av.has-logo,
html[data-theme="dark"] #home-brands .bc-av.has-logo {
  background-color: var(--pearl);
  background-size: 72% auto;
}

html[data-theme="dark"] .home-brands .bc-name,
html[data-theme="dark"] #home-brands .bc-name {
  color: #f4f3fb;
  font-weight: 800;
}

html[data-theme="dark"] .home-brands-sec .btn-home-wide {
  background: #1c1f30;
  color: #fff;
  border: 1px solid #34364a;
}

html[data-theme="dark"] .home-brands-sec .btn-home-wide:hover {
  background: #25283a;
  border-color: rgba(110, 74, 255, 0.55);
  color: #fff;
}

@media (max-width: 899px) {
  html[data-theme="dark"] .home-brands .bc-av,
  html[data-theme="dark"] #home-brands .bc-av {
    width: min(100%, 84px);
    height: 56px;
    border-radius: 10px;
    padding: 0.3rem;
  }
}

html[data-theme="dark"] .home-quick-search .hqs-head h2,
html[data-theme="dark"] .home-quick-search .hqs-head h2 em {
  color: #fff;
}

html[data-theme="dark"] .home-quick-search .hqs-bar,
html[data-theme="dark"] .hqs-bar {
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}

html[data-theme="dark"] #hero-search.hqs-bar {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .hqs-ico {
  color: var(--text-muted);
}

html[data-theme="dark"] .hqs-input input {
  color: var(--text-primary);
  background: transparent;
}

html[data-theme="dark"] .hqs-input input::placeholder,
html[data-theme="dark"] #hf-q[data-ph-animating]::placeholder {
  color: var(--text-muted);
}

html[data-theme="dark"] .hqs-go {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .hqs-mic {
  color: var(--text-secondary);
}

html[data-theme="dark"] .hqs-mic:hover,
html[data-theme="dark"] .hqs-mic.is-listening {
  color: var(--primary-bright);
  background: var(--primary-soft);
}

html[data-theme="dark"] .hqs-popular {
  color: var(--text-secondary);
}

html[data-theme="dark"] .hqs-tag {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}

html[data-theme="dark"] .hqs-tag:hover {
  color: var(--primary-bright);
  border-color: rgba(var(--primary-rgb), 0.55);
  background: var(--primary-soft);
}

html[data-theme="dark"] .home-filter,
html[data-theme="dark"] .home-quick-search .home-filter,
html[data-theme="dark"] #home-filter {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow:
    0 0 0 1px rgba(var(--primary-rgb), 0.03),
    0 18px 40px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .hf-cats {
  background: rgba(7, 8, 21, 0.45);
  border-bottom: 1px solid var(--border);
  border-radius: 17px 17px 0 0;
  gap: 0.2rem;
  padding: 0.35rem 0.35rem 0.3rem;
}

html[data-theme="dark"] .hf-cat {
  color: var(--text-secondary);
  border-right: 0;
  border-top-color: transparent;
  border-radius: 12px;
  min-height: 56px;
}

html[data-theme="dark"] .hf-cat:not(:last-child)::after {
  display: none;
}

html[data-theme="dark"] .hf-cat:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

html[data-theme="dark"] .hf-cat.on,
html[data-theme="dark"] .hf-cat.on:hover {
  background: var(--primary);
  color: #fff;
  border-top-color: transparent;
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0.18rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

html[data-theme="dark"] .hf-cat.on .ico,
html[data-theme="dark"] .hf-cat.on .ico svg {
  color: #fff;
}

/* Category piktograms — dark navy fills vanish on dark chrome; lift them */
html[data-theme="dark"] .hf-cat .ico {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--pearl);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .hf-cat:hover .ico {
  background: var(--pearl-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 6px 16px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] .hf-cat .ico img,
html[data-theme="dark"] .hf-cat .ico svg {
  width: 36px;
  height: 36px;
}

html[data-theme="dark"] .hf-cat[data-cat="truck"] .ico,
html[data-theme="dark"] .hf-cat[data-cat="poljoprivredne-masine"] .ico,
html[data-theme="dark"] .hf-cat[data-cat="drone"] .ico {
  width: 52px;
  height: 52px;
}

html[data-theme="dark"] .hf-cat[data-cat="truck"] .ico img,
html[data-theme="dark"] .hf-cat[data-cat="poljoprivredne-masine"] .ico img,
html[data-theme="dark"] .hf-cat[data-cat="drone"] .ico img {
  width: 34px;
  height: 34px;
}

/* Active purple pill — white glyph, pearl ring around icon only */
html[data-theme="dark"] .hf-cat.on .ico,
html[data-theme="dark"] .hf-cat.on:hover .ico {
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  border: 1.5px solid var(--pearl);
}

html[data-theme="dark"] .hf-cat.on .ico img,
html[data-theme="dark"] .hf-cat.on .ico svg {
  filter: brightness(0) invert(1);
}

/* Subcategory piktograms — mirror root cats (light plate / purple+white when on) */
html[data-theme="dark"] .hf-subcat .ico {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--pearl);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.28);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

html[data-theme="dark"] .hf-subcat:hover .ico {
  background: var(--pearl-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 6px 16px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] .hf-subcat .ico img,
html[data-theme="dark"] .hf-subcat .ico svg {
  width: 34px;
  height: 34px;
  filter: none;
}

/* Active subcat icon = same purple tile + white glyph as main cats */
html[data-theme="dark"] .hf-subcat.on .ico,
html[data-theme="dark"] .hf-subcat.on:hover .ico {
  background: var(--primary) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .hf-subcat.on .ico img,
html[data-theme="dark"] .hf-subcat.on .ico svg {
  filter: brightness(0) invert(1) !important;
}

html[data-theme="dark"] .hf-subcat .lbl {
  color: #fff;
}

html[data-theme="dark"] .hf-subcat.on .lbl {
  color: #fff;
  font-weight: 700;
}

/* Scaled transport/agro piktograms — room for transform: scale(1.24) */
html[data-theme="dark"] .hf-subcat[data-sub="kombi-i-laka-dostavna-vozila"] .ico,
html[data-theme="dark"] .hf-subcat[data-sub="kamioni-do-7-5t"] .ico,
html[data-theme="dark"] .hf-subcat[data-sub="kamioni-preko-7-5t"] .ico,
html[data-theme="dark"] .hf-subcat[data-sub="kamperi"] .ico,
html[data-theme="dark"] .hf-subcat[data-sub="prikolice-poluprikolice"] .ico,
html[data-theme="dark"] .hf-subcat[data-sub="autobusi"] .ico,
html[data-theme="dark"] .hf-subcat[data-sub="traktori"] .ico,
html[data-theme="dark"] .hf-subcat[data-sub="kombajni"] .ico,
html[data-theme="dark"] .hf-subcat[data-sub="prikljucne-masine"] .ico,
html[data-theme="dark"] .hf-subcat[data-sub="poljo-prikolice"] .ico,
html[data-theme="dark"] .hf-subcat[data-sub="masine-i-alati"] .ico,
html[data-theme="dark"] .hf-subcat[data-sub="agro-kosacica"] .ico,
html[data-theme="dark"] .hf-subcat[data-sub="agro-sejalica"] .ico,
html[data-theme="dark"] .hf-subcat[data-sub="agro-prskalica"] .ico,
html[data-theme="dark"] .hf-subcat[data-sub="agro-tanjiraca"] .ico {
  width: 52px;
  height: 52px;
}

html[data-theme="dark"] .hf-subcat[data-sub="kombi-i-laka-dostavna-vozila"] .ico img,
html[data-theme="dark"] .hf-subcat[data-sub="kamioni-do-7-5t"] .ico img,
html[data-theme="dark"] .hf-subcat[data-sub="kamioni-preko-7-5t"] .ico img,
html[data-theme="dark"] .hf-subcat[data-sub="kamperi"] .ico img,
html[data-theme="dark"] .hf-subcat[data-sub="prikolice-poluprikolice"] .ico img,
html[data-theme="dark"] .hf-subcat[data-sub="autobusi"] .ico img,
html[data-theme="dark"] .hf-subcat[data-sub="traktori"] .ico img,
html[data-theme="dark"] .hf-subcat[data-sub="kombajni"] .ico img,
html[data-theme="dark"] .hf-subcat[data-sub="prikljucne-masine"] .ico img,
html[data-theme="dark"] .hf-subcat[data-sub="poljo-prikolice"] .ico img,
html[data-theme="dark"] .hf-subcat[data-sub="masine-i-alati"] .ico img,
html[data-theme="dark"] .hf-subcat[data-sub="agro-kosacica"] .ico img,
html[data-theme="dark"] .hf-subcat[data-sub="agro-sejalica"] .ico img,
html[data-theme="dark"] .hf-subcat[data-sub="agro-prskalica"] .ico img,
html[data-theme="dark"] .hf-subcat[data-sub="agro-tanjiraca"] .ico img {
  width: 32px;
  height: 32px;
}

html[data-theme="dark"] .hf-main {
  background: var(--surface);
  border-radius: 0 0 17px 17px;
}

html[data-theme="dark"] .hf-subcat {
  color: #fff;
  background: transparent;
}

html[data-theme="dark"] .hf-subcat:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

html[data-theme="dark"] .hf-subcat.on,
html[data-theme="dark"] .hf-subcat.on:hover {
  background: transparent;
  color: #fff;
}

html[data-theme="dark"] .hf-sub-pill {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

html[data-theme="dark"] .hf-sub-pill:hover {
  color: var(--text-primary);
  border-color: rgba(var(--primary-rgb), 0.4);
}

html[data-theme="dark"] .hf-sub-pill.on {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-bright);
}

html[data-theme="dark"] .hf-field select,
html[data-theme="dark"] .hf-field input,
html[data-theme="dark"] .hf-range select,
html[data-theme="dark"] .hf-range input,
html[data-theme="dark"] .hf-multi-trigger {
  background: #0c0e1c;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}

html[data-theme="dark"] .hf-field select:focus,
html[data-theme="dark"] .hf-field input:focus,
html[data-theme="dark"] .hf-range select:focus,
html[data-theme="dark"] .hf-range input:focus,
html[data-theme="dark"] .hf-multi-trigger:hover:not(:disabled),
html[data-theme="dark"] .hf-multi-trigger[aria-expanded="true"],
html[data-theme="dark"] .hf-multi-box:has(.hf-multi-trigger[aria-expanded="true"]) {
  background: #10122a;
  border-color: rgba(var(--primary-rgb), 0.55);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
}

html[data-theme="dark"] .hf-field input::placeholder,
html[data-theme="dark"] .hf-multi-summary {
  color: var(--text-muted);
}

html[data-theme="dark"] .hf-dash {
  color: var(--text-muted);
}

html[data-theme="dark"] .hf-multi-panel {
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .hf-multi-search input {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

html[data-theme="dark"] .hf-multi-empty {
  color: var(--text-muted);
}

html[data-theme="dark"] .hf-multi-opt {
  color: var(--text-primary);
}

html[data-theme="dark"] .hf-multi-opt:hover {
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .hf-multi-opt.hf-multi-family {
  color: var(--primary-bright);
}

html[data-theme="dark"] .hf-advanced {
  color: var(--primary-bright);
}

html[data-theme="dark"] .hf-advanced:hover {
  color: #c4b5ff;
}

html[data-theme="dark"] .hf-adv-count {
  background: var(--primary);
  color: #fff;
}

html[data-theme="dark"] .hf-go {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .hf-go:hover {
  background: var(--primary-hover);
}

html[data-theme="dark"] .hf-go:active {
  background: var(--primary-active);
}

html[data-theme="dark"] .home-page .listing-card.v2 .body,
html[data-theme="dark"] .home-page .listing-card.v2.featured .body,
html[data-theme="dark"] .home-page .listing-card.v2.delux .body,
html[data-theme="dark"] .market-grid .listing-card.v2 .body,
html[data-theme="dark"] .home-page .home-feat-page .listing-card.v2.featured .body,
html[data-theme="dark"] .home-page .home-feat-page .listing-card.v2 .body,
html[data-theme="dark"] .home-page .home-feat-cards .listing-card.v2.featured .body,
html[data-theme="dark"] .home-page .home-feat-cards .listing-card.v2 .body,
html[data-theme="dark"] .home-page .home-bodytype .market-grid.home-feat-cards .listing-card.v2:not(.list) .body,
html[data-theme="dark"] .home-page .home-feat-cards .listing-card.v2:not(.list) .body,
html[data-theme="dark"] .home-page .home-bodytype .market-grid:not(.home-feat-cards) .listing-card.v2.delux:not(.list) .body,
html[data-theme="dark"] .home-page .market-grid:not(.home-feat-cards) .listing-card.v2.delux:not(.list) .body,
html[data-theme="dark"] .home-page .home-bodytype .listing-card.v2.delux .body,
html[data-theme="dark"] .market-grid .listing-card.v2.featured:not(.list) .body,
html[data-theme="dark"] .card-grid .listing-card.v2.featured:not(.list) .body,
html[data-theme="dark"] .seller-grid .listing-card.v2.featured:not(.list) .body {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
}

/* Card chrome — outer shell was hardcoded #fff on desktop feat/bodytype rails */
html[data-theme="dark"] .home-page .home-feat-page .listing-card.v2,
html[data-theme="dark"] .home-page .home-feat-cards .listing-card.v2,
html[data-theme="dark"] .home-page .home-feat-page .listing-card.v2.featured,
html[data-theme="dark"] .home-page .home-feat-cards .listing-card.v2.featured,
html[data-theme="dark"] .home-page .home-bodytype .listing-card.v2,
html[data-theme="dark"] .market-grid .listing-card.v2.featured:not(.list),
html[data-theme="dark"] .card-grid .listing-card.v2.featured:not(.list) {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}

/* Body-type pills — inactive no longer white tiles */
html[data-theme="dark"] .body-pill {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

html[data-theme="dark"] .body-pill:hover {
  border-color: var(--primary);
  color: var(--primary-bright);
  background: rgba(var(--primary-rgb), 0.12);
}

html[data-theme="dark"] .body-pill.on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Card titles — white in dark mode (home + all listing cards) */
html[data-theme="dark"] .title.title-mm,
html[data-theme="dark"] .listing-card .title.title-mm,
html[data-theme="dark"] .listing-card.v2 .title.title-mm,
html[data-theme="dark"] .home-page .home-feat-page .listing-card.v2 .title-mm,
html[data-theme="dark"] .home-page .home-feat-cards .listing-card.v2 .title-mm,
html[data-theme="dark"] .home-page .home-bodytype .listing-card.v2 .title-mm {
  color: #fff;
}

html[data-theme="dark"] .home-page .home-feat-page .listing-card.v2 .price,
html[data-theme="dark"] .home-page .home-feat-cards .listing-card.v2 .price,
html[data-theme="dark"] .home-page .home-bodytype .listing-card.v2 .price {
  color: #fff;
}

html[data-theme="dark"] .home-page .home-feat-page .listing-card.v2 .card-year,
html[data-theme="dark"] .home-page .home-feat-cards .listing-card.v2 .card-year,
html[data-theme="dark"] .home-page .home-feat-page .listing-card.v2 .card-loc,
html[data-theme="dark"] .home-page .home-feat-cards .listing-card.v2 .card-loc,
html[data-theme="dark"] .home-page .home-bodytype .listing-card.v2 .card-year,
html[data-theme="dark"] .home-page .home-bodytype .listing-card.v2 .card-loc {
  color: var(--text-secondary);
}

html[data-theme="dark"] .home-bodytype .home-h2 {
  color: #fff;
}

html[data-theme="dark"] .home-bodytype .home-lead {
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .home-bodytype .btn-home-wide,
html[data-theme="dark"] .home-bodytype a.btn-home-wide {
  color: #fff;
}

html[data-theme="dark"] .site-nav a,
html[data-theme="dark"] .hdr-vehicle-mark {
  color: var(--text-primary);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .select,
html[data-theme="dark"] .input {
  background: var(--surface-soft);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

html[data-theme="dark"] .btn-post,
html[data-theme="dark"] .hf-search-btn,
html[data-theme="dark"] .hdr-d-cta {
  background: var(--primary);
  color: var(--text-on-primary);
}

html[data-theme="dark"] .hdr-menu-logout .hdr-menu-ico,
html[data-theme="dark"] .hdr-menu-logout:hover,
html[data-theme="dark"] .hdr-menu-logout:focus-visible {
  background: rgba(180, 35, 24, 0.16);
  color: #f97066;
}

html[data-theme="dark"] .hdr-menu-logout:hover .hdr-menu-ico,
html[data-theme="dark"] .hdr-menu-logout:focus-visible .hdr-menu-ico {
  background: rgba(180, 35, 24, 0.28);
  color: #f97066;
}

html[data-theme="dark"] .hdr-profile-btn[aria-expanded="true"],
html[data-theme="dark"] .hdr-profile-btn:hover {
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

/* Mobile overrides that force light search chrome */
@media (max-width: 899px) {
  html[data-theme="dark"] .hqs-bar,
  html[data-theme="dark"] .hqs-tag,
  html[data-theme="dark"] .home-filter,
  html[data-theme="dark"] .home-quick-search #home-filter,
  html[data-theme="dark"] .hf-main,
  html[data-theme="dark"] .hf-cat.on,
  html[data-theme="dark"] .hf-cat.on:hover {
    background: var(--surface-soft);
  }

  html[data-theme="dark"] .home-filter,
  html[data-theme="dark"] .home-quick-search #home-filter {
    background: var(--surface);
    border-color: var(--border-strong);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  }

  html[data-theme="dark"] .hf-cats {
    background: rgba(7, 8, 21, 0.55);
  }

  html[data-theme="dark"] .hf-cat.on,
  html[data-theme="dark"] .hf-cat.on:hover {
    background: var(--primary);
    color: #fff;
  }

  html[data-theme="dark"] .hqs-tag {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
  }

  html[data-theme="dark"] .hqs-popular-chev {
    background: linear-gradient(90deg, transparent, var(--canvas) 42%);
    color: #fff;
  }
}

/* ============================================================
   Ad detail page — info blocks + related cards
   ============================================================ */

html[data-theme="dark"] .detail-page {
  color: #fff;
}

/* Sticky title bar (appended to body) + bottom CTA — hardcoded light chrome */
html[data-theme="dark"] .listing-sticky {
  background: #12142b;
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .listing-sticky-info strong,
html[data-theme="dark"] .listing-sticky-price {
  color: #fff;
}

html[data-theme="dark"] .listing-sticky-info span {
  color: rgba(255, 255, 255, 0.82);
}

html[data-theme="dark"] .listing-sticky-report,
html[data-theme="dark"] .listing-sticky .listing-share-btn {
  background: #1a1b24;
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

html[data-theme="dark"] .listing-sticky-report:hover,
html[data-theme="dark"] .listing-sticky .listing-share-btn:hover {
  background: #222433;
  border-color: rgba(255, 255, 255, 0.28);
}

html[data-theme="dark"] .detail-page .mobile-cta {
  background: #12142b;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .detail-page .mobile-cta .m-back,
html[data-theme="dark"] .detail-page .mobile-cta .m-cta-cmp,
html[data-theme="dark"] .detail-page .mobile-cta .m-cta-fav {
  background: #2a2c38;
  color: #fff;
}

html[data-theme="dark"] .detail-page .mobile-cta .m-cta-fav svg {
  fill: #fff;
  stroke: #fff;
}

html[data-theme="dark"] .detail-page .mobile-cta .m-cta-fav .fav-count {
  color: #fff;
}

html[data-theme="dark"] .detail-page .mobile-cta .m-cta-fav.on svg {
  fill: var(--primary);
  color: var(--primary);
}

html[data-theme="dark"] .detail-page .mobile-cta .m-cta-cmp.on {
  background: rgba(122, 90, 248, 0.22);
  box-shadow: inset 0 0 0 2px var(--primary);
}

html[data-theme="dark"] .detail-page .mobile-cta .btn-outline,
html[data-theme="dark"] .detail-page .mobile-cta a.btn-outline {
  background: #2a2c38;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}

html[data-theme="dark"] .detail-page .mobile-cta .btn-primary,
html[data-theme="dark"] .detail-page .mobile-cta a.btn-primary {
  color: #fff;
}

html[data-theme="dark"] .detail-card,
html[data-theme="dark"] .side-card,
html[data-theme="dark"] .side-stack .detail-loc,
html[data-theme="dark"] .detail-page .listing-tools,
html[data-theme="dark"] .detail-page .auction-panel {
  background: #1a1b24;
  border-color: #2a2c38;
  color: #fff;
  box-shadow: none;
}

html[data-theme="dark"] .detail-card > h2,
html[data-theme="dark"] .side-card > h3,
html[data-theme="dark"] .side-stack .detail-loc > h2,
html[data-theme="dark"] .listing-head h1,
html[data-theme="dark"] .listing-more-head h2 {
  color: #fff;
  border-color: #2a2c38;
}

html[data-theme="dark"] .detail-card.spec-block > h2,
html[data-theme="dark"] .side-card > h3 {
  background: #22242f;
  border-color: #2a2c38;
  color: #fff;
}

html[data-theme="dark"] .detail-card.spec-block .spec-body {
  background: #1a1b24;
  color: #fff;
}

html[data-theme="dark"] .listing-meta,
html[data-theme="dark"] .listing-type,
html[data-theme="dark"] .quick-spec .k,
html[data-theme="dark"] .tech-cell .k {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .quick-spec .v,
html[data-theme="dark"] .tech-cell .v,
html[data-theme="dark"] .listing-price-block .now,
html[data-theme="dark"] .listing-desc,
html[data-theme="dark"] .spec-checks li,
html[data-theme="dark"] .detail-page .seller-top,
html[data-theme="dark"] .detail-page .seller-name,
html[data-theme="dark"] .detail-page .loc-row,
html[data-theme="dark"] .detail-page .loc-info {
  color: #fff;
}

html[data-theme="dark"] .tech-cell {
  border-color: #2a2c38;
}

html[data-theme="dark"] .quick-spec:not(:last-child)::after {
  background: #2a2c38;
}

html[data-theme="dark"] .listing-toolbar,
html[data-theme="dark"] .detail-page .listing-toolbar,
html[data-theme="dark"] .detail-page .listing-toolbar.is-pinned .listing-toolbar-inner {
  background: #12142b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none;
}

html[data-theme="dark"] .detail-page .listing-toolbar.is-pinned .listing-toolbar-inner {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .listing-toolbar-info,
html[data-theme="dark"] .listing-toolbar-info strong,
html[data-theme="dark"] .listing-toolbar-info > span,
html[data-theme="dark"] .listing-toolbar-info .listing-toolbar-price,
html[data-theme="dark"] .detail-page .listing-toolbar-info,
html[data-theme="dark"] .detail-page .listing-toolbar-info strong,
html[data-theme="dark"] .detail-page .listing-toolbar-info > span,
html[data-theme="dark"] .detail-page .listing-toolbar-info .listing-toolbar-price {
  color: #fff !important;
}

html[data-theme="dark"] .listing-toolbar-dot {
  background: #2a2c38;
  color: #fff;
}

html[data-theme="dark"] .listing-toolbar-report {
  background: #2a2c38;
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

html[data-theme="dark"] .listing-toolbar-report:hover {
  background: #222433;
}

html[data-theme="dark"] .detail-page .more-link {
  color: var(--primary-bright);
}

/* Related / seller cards on ad page — same dark cards as home */
html[data-theme="dark"] .listing-more .listing-card.v2,
html[data-theme="dark"] .listing-more .listing-card.v2.featured,
html[data-theme="dark"] .listing-more .listing-card.v2.delux,
html[data-theme="dark"] .listing-more .listing-card.v2.featured:not(.list),
html[data-theme="dark"] .listing-more-grid .listing-card.v2,
html[data-theme="dark"] .listing-more-grid .listing-card.v2.featured,
html[data-theme="dark"] .listing-more-grid .listing-card.v2.delux,
html[data-theme="dark"] .detail-page .listing-card.v2,
html[data-theme="dark"] .detail-page .listing-card.v2.featured {
  background: #1a1b24 !important;
  border: 1px solid #2a2c38 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .listing-more .listing-card.v2.featured::before,
html[data-theme="dark"] .listing-more-grid .listing-card.v2.featured::before {
  background: var(--primary-gradient);
}

html[data-theme="dark"] .listing-more .listing-card.v2 .body,
html[data-theme="dark"] .listing-more .listing-card.v2.featured .body,
html[data-theme="dark"] .listing-more .listing-card.v2.featured:hover .body,
html[data-theme="dark"] .listing-more .listing-card.v2.delux .body,
html[data-theme="dark"] .listing-more-grid .listing-card.v2 .body,
html[data-theme="dark"] .listing-more-grid .listing-card.v2.featured .body,
html[data-theme="dark"] .listing-more-grid .listing-card.v2.delux .body,
html[data-theme="dark"] .detail-page .listing-card.v2 .body,
html[data-theme="dark"] .detail-page .listing-card.v2.featured .body,
html[data-theme="dark"] .card-grid .listing-card.v2 .body,
html[data-theme="dark"] .seller-grid .listing-card.v2 .body {
  background: #1a1b24 !important;
  border-color: #2a2c38 !important;
  color: #fff !important;
}

html[data-theme="dark"] .listing-more .listing-card.v2 .title,
html[data-theme="dark"] .listing-more .listing-card.v2 .title.title-mm,
html[data-theme="dark"] .listing-more .listing-card.v2.featured .title,
html[data-theme="dark"] .listing-more .listing-card.v2 .price,
html[data-theme="dark"] .listing-more .listing-card.v2.featured .price,
html[data-theme="dark"] .listing-more-grid .listing-card.v2 .title,
html[data-theme="dark"] .listing-more-grid .listing-card.v2 .title.title-mm,
html[data-theme="dark"] .listing-more-grid .listing-card.v2.featured .title,
html[data-theme="dark"] .listing-more-grid .listing-card.v2 .price,
html[data-theme="dark"] .listing-more-grid .listing-card.v2.featured .price,
html[data-theme="dark"] .detail-page .listing-card.v2 .title,
html[data-theme="dark"] .detail-page .listing-card.v2 .title.title-mm,
html[data-theme="dark"] .detail-page .listing-card.v2 .price,
html[data-theme="dark"] .card-grid .listing-card.v2 .title,
html[data-theme="dark"] .card-grid .listing-card.v2 .title.title-mm,
html[data-theme="dark"] .card-grid .listing-card.v2 .price,
html[data-theme="dark"] .seller-grid .listing-card.v2 .title,
html[data-theme="dark"] .seller-grid .listing-card.v2 .title.title-mm,
html[data-theme="dark"] .seller-grid .listing-card.v2 .price {
  color: #fff !important;
}

html[data-theme="dark"] .listing-more .listing-card.v2 .spec-line,
html[data-theme="dark"] .listing-more .listing-card.v2 .card-year,
html[data-theme="dark"] .listing-more .listing-card.v2 .card-loc,
html[data-theme="dark"] .listing-more .listing-card.v2 .loc,
html[data-theme="dark"] .listing-more .listing-card.v2 .cat,
html[data-theme="dark"] .listing-more .listing-card.v2 .meta-top,
html[data-theme="dark"] .listing-more .listing-card.v2 .meta-bottom,
html[data-theme="dark"] .listing-more .listing-card.v2 .card-foot-loc,
html[data-theme="dark"] .listing-more-grid .listing-card.v2 .spec-line,
html[data-theme="dark"] .listing-more-grid .listing-card.v2 .card-year,
html[data-theme="dark"] .listing-more-grid .listing-card.v2 .card-loc,
html[data-theme="dark"] .listing-more-grid .listing-card.v2 .loc,
html[data-theme="dark"] .listing-more-grid .listing-card.v2 .cat,
html[data-theme="dark"] .listing-more-grid .listing-card.v2 .meta-top,
html[data-theme="dark"] .listing-more-grid .listing-card.v2 .meta-bottom,
html[data-theme="dark"] .listing-more-grid .listing-card.v2 .card-foot-loc,
html[data-theme="dark"] .detail-page .listing-card.v2 .card-year,
html[data-theme="dark"] .detail-page .listing-card.v2 .card-loc,
html[data-theme="dark"] .detail-page .listing-card.v2 .loc,
html[data-theme="dark"] .card-grid .listing-card.v2 .card-year,
html[data-theme="dark"] .card-grid .listing-card.v2 .card-loc,
html[data-theme="dark"] .seller-grid .listing-card.v2 .card-year,
html[data-theme="dark"] .seller-grid .listing-card.v2 .card-loc {
  color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] .listing-more .listing-card.v2 .fact strong,
html[data-theme="dark"] .listing-more-grid .listing-card.v2 .fact strong,
html[data-theme="dark"] .detail-page .listing-card.v2 .fact strong,
html[data-theme="dark"] .card-grid .listing-card.v2 .fact strong,
html[data-theme="dark"] .seller-grid .listing-card.v2 .fact strong {
  color: #fff !important;
}

html[data-theme="dark"] .listing-more .listing-card.v2 .fact span,
html[data-theme="dark"] .listing-more-grid .listing-card.v2 .fact span,
html[data-theme="dark"] .detail-page .listing-card.v2 .fact span,
html[data-theme="dark"] .card-grid .listing-card.v2 .fact span,
html[data-theme="dark"] .seller-grid .listing-card.v2 .fact span {
  color: rgba(255, 255, 255, 0.62) !important;
}

html[data-theme="dark"] .listing-more .listing-card.v2.featured:not(.list),
html[data-theme="dark"] .listing-more-grid .listing-card.v2.featured:not(.list),
html[data-theme="dark"] .detail-page .listing-card.v2.featured:not(.list) {
  background: #1a1b24 !important;
  border: 1px solid #2a2c38 !important;
  box-shadow: none !important;
}

/* Related ads under listing use .rel-card (not .listing-card) */
html[data-theme="dark"] .rel-card,
html[data-theme="dark"] .listing-more .rel-card,
html[data-theme="dark"] .listing-more-grid .rel-card {
  background: #1a1b24 !important;
  border-color: #2a2c38 !important;
  color: #fff;
}

html[data-theme="dark"] .rel-body {
  background: #1a1b24 !important;
  color: #fff;
}

html[data-theme="dark"] .rel-title,
html[data-theme="dark"] .rel-price,
html[data-theme="dark"] .rel-price strong {
  color: #fff !important;
}

html[data-theme="dark"] .rel-price.has-discount strong {
  color: #f87171 !important;
}

html[data-theme="dark"] .rel-specs,
html[data-theme="dark"] .rel-kicker,
html[data-theme="dark"] .rel-price s {
  color: rgba(255, 255, 255, 0.68) !important;
}

html[data-theme="dark"] .rel-media {
  background: #12131a;
}

/* ============================================================
   Browse / search (/polovni-automobili, pretraga)
   --dark is inverted in dark theme → force brand navy chrome
   ============================================================ */

html[data-theme="dark"] .browse-quick-search,
html[data-theme="dark"] .browse-page .browse-quick-search,
html[data-theme="dark"] .sellers-page .browse-quick-search,
html[data-theme="dark"] .browse-page .browse-qs-pin.is-pinned .browse-qs-pin-inner {
  background: #302462 !important;
  color: #fff !important;
}

html[data-theme="dark"] .browse-hub-chips {
  background:
    radial-gradient(55% 80% at 90% 40%, rgba(110, 74, 255, 0.1), transparent 60%),
    #302462 !important;
  color: #fff;
}

html[data-theme="dark"] .browse-hub-chips h2 {
  color: #ffb347;
}

html[data-theme="dark"] .browse-hub-chips .browse-hub-grid a,
html[data-theme="dark"] .browse-hub-chips .browse-hub-chip-label {
  color: #fff !important;
}

html[data-theme="dark"] .browse-hub-chips .browse-hub-count {
  color: #ffb347 !important;
}

html[data-theme="dark"] .browse-hub-related .home-start-card,
html[data-theme="dark"] .home-start-card.browse-hub-cat-card {
  background: #1a1b24 !important;
  border-color: #2a2c38 !important;
  color: #fff !important;
}

html[data-theme="dark"] .browse-hub-related .home-start-card strong,
html[data-theme="dark"] .home-start-card.browse-hub-cat-card strong {
  color: #fff !important;
}

html[data-theme="dark"] .browse-hub-related .home-start-card span:last-child,
html[data-theme="dark"] .home-start-card.browse-hub-cat-card span:last-child {
  color: rgba(255, 255, 255, 0.7) !important;
}

html[data-theme="dark"] .browse-hub-related .home-start-ico,
html[data-theme="dark"] .home-start-card.browse-hub-cat-card .home-start-ico {
  background: linear-gradient(165deg, #f5f3fc 0%, #e4e0f2 100%) !important;
  color: var(--primary);
}

html[data-theme="dark"] .browse-hub-related .home-start-card:hover,
html[data-theme="dark"] .home-start-card.browse-hub-cat-card:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

html[data-theme="dark"] .browse-hub-guide h2,
html[data-theme="dark"] .browse-hub-faq h2,
html[data-theme="dark"] .browse-hub-block h2 {
  color: #fff;
}

html[data-theme="dark"] .browse-hub-guide p,
html[data-theme="dark"] .browse-hub-faq-item p {
  color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] .browse-hub-faq-item {
  border-color: #2a2c38;
}

html[data-theme="dark"] .browse-hub-faq-item summary {
  color: #fff;
}

html[data-theme="dark"] .sort-select,
html[data-theme="dark"] .browse-meta-row .sort-select,
html[data-theme="dark"] .browse-view-toggle,
html[data-theme="dark"] .browse-save-search {
  background: #1a1b24 !important;
  border-color: #2a2c38 !important;
  color: #fff !important;
}

html[data-theme="dark"] .browse-view-btn {
  color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .browse-view-btn + .browse-view-btn {
  border-color: #2a2c38;
}

html[data-theme="dark"] .browse-view-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

html[data-theme="dark"] .browse-view-btn.is-on {
  background: rgba(110, 74, 255, 0.22);
  color: #c4b5ff;
}

html[data-theme="dark"] .browse-save-search:hover {
  border-color: rgba(110, 74, 255, 0.45);
  color: #c4b5ff;
}

html[data-theme="dark"] .browse-save-search.is-saved {
  background: rgba(110, 74, 255, 0.22) !important;
  color: #c4b5ff !important;
}

html[data-theme="dark"] .market-chips .filter-chip,
html[data-theme="dark"] .filter-chip {
  background: #1a1b24 !important;
  border-color: #2a2c38 !important;
  color: #fff !important;
}

html[data-theme="dark"] .market-chips .filter-chip.active,
html[data-theme="dark"] .filter-chip.active {
  background: rgba(110, 74, 255, 0.28) !important;
  border-color: transparent !important;
  color: #e4dcff !important;
}

html[data-theme="dark"] .market-chips .filter-chip.clear,
html[data-theme="dark"] .filter-chip.clear,
html[data-theme="dark"] .filter-chip.clear-all {
  background: rgba(255, 92, 92, 0.14) !important;
  border-color: rgba(255, 92, 92, 0.35) !important;
  color: #ff8a8a !important;
}

html[data-theme="dark"] .pagination button:not(.on):not(.nav) {
  background: #1a1b24 !important;
  border-color: #2a2c38 !important;
  color: #fff !important;
}

html[data-theme="dark"] .pagination button.on {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

html[data-theme="dark"] .pagination button.nav {
  color: rgba(255, 255, 255, 0.75) !important;
}

html[data-theme="dark"] .browse-market-block {
  background: #1a1b24;
  border-color: #2a2c38;
  color: #fff;
}

html[data-theme="dark"] .browse-market-block h2,
html[data-theme="dark"] .browse-market-dl dd {
  color: #fff;
}

html[data-theme="dark"] .browse-market-dl dt {
  color: rgba(255, 255, 255, 0.65);
}

html[data-theme="dark"] .market-page-head h1,
html[data-theme="dark"] .browse-page .market-page-head h1 {
  color: #fff;
}

html[data-theme="dark"] .market-page-head p,
html[data-theme="dark"] .browse-interpreted {
  color: rgba(255, 255, 255, 0.72);
}

/* Browse PA cards — keep title/price white; year readable */
html[data-theme="dark"] .browse-page .market-grid .listing-card.v2.pa-card,
html[data-theme="dark"] .browse-page .market-grid .listing-card.v2.pa-card .body {
  background: #1a1b24 !important;
  border-color: #2a2c38 !important;
}

html[data-theme="dark"] .browse-page .market-grid .listing-card.v2.pa-card .title,
html[data-theme="dark"] .browse-page .market-grid .listing-card.v2.pa-card .title-mm,
html[data-theme="dark"] .browse-page .market-grid .listing-card.v2.pa-card .price {
  color: #fff !important;
}

html[data-theme="dark"] .browse-page .market-grid .listing-card.v2.pa-card .card-year,
html[data-theme="dark"] .browse-page .market-grid .listing-card.v2.pa-card .card-loc {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* List view on browse */
html[data-theme="dark"] .market-list .listing-card.v2.list,
html[data-theme="dark"] .listing-card.v2.list {
  background: #1a1b24 !important;
  border-color: #2a2c38 !important;
  color: #fff;
}

html[data-theme="dark"] .market-list .listing-card.v2.list .title,
html[data-theme="dark"] .market-list .listing-card.v2.list .price,
html[data-theme="dark"] .listing-card.v2.list .list-head .title,
html[data-theme="dark"] .listing-card.v2.list .price {
  color: #fff !important;
}

html[data-theme="dark"] .listing-card.v2.list .list-spec-cell,
html[data-theme="dark"] .market-list .listing-card.v2.list .list-spec-cell,
html[data-theme="dark"] .listing-card.v2.list .list-spec-grid .list-spec-cell {
  color: #fff !important;
}

html[data-theme="dark"] .listing-card.v2.list .list-excerpt {
  color: #c8cde0 !important;
}

html[data-theme="dark"] .listing-card.v2.list .list-spec-grid .list-spec-cell:nth-child(-n + 3) {
  border-bottom-color: rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="dark"] .listing-card.v2.list .list-spec-logo.list-spec-seller,
html[data-theme="dark"] .listing-card.v2.list .list-seller-type {
  color: #fff !important;
}

html[data-theme="dark"] .listing-card.v2.list .list-foot .list-spec-loc,
html[data-theme="dark"] .listing-card.v2.list .list-mid > .list-spec-loc,
html[data-theme="dark"] .listing-card.v2.list .list-foot .list-spec-loc svg {
  color: #fff !important;
}

html[data-theme="dark"] .listing-card.v2.list .meta-top,
html[data-theme="dark"] .listing-card.v2.list .meta-bottom {
  color: #fff !important;
}

/* ============================================================
   Postavi oglas — classic + quick wizard
   ============================================================ */

html[data-theme="dark"] .wiz-page,
html[data-theme="dark"] .post-mode-pick,
html[data-theme="dark"] .quick-listing-page,
html[data-theme="dark"] .post-listing-classic {
  background: var(--canvas);
  color: #fff;
}

html[data-theme="dark"] .wiz-head h1,
html[data-theme="dark"] .post-mode-pick h1,
html[data-theme="dark"] .post-mode-pick h2,
html[data-theme="dark"] .quick-listing-page h1,
html[data-theme="dark"] .quick-listing-page h2,
html[data-theme="dark"] .wiz-card h2,
html[data-theme="dark"] .wiz-side-card h3,
html[data-theme="dark"] .wiz-subh,
html[data-theme="dark"] .quick-card-head h2,
html[data-theme="dark"] .wiz-preview-title {
  color: #fff !important;
}

html[data-theme="dark"] .wiz-head .wiz-step-label,
html[data-theme="dark"] .wiz-card .sub,
html[data-theme="dark"] .wiz-tip p,
html[data-theme="dark"] .wiz-field .hint,
html[data-theme="dark"] .post-mode-card .post-mode-body > span:last-child,
html[data-theme="dark"] .quick-side-help,
html[data-theme="dark"] .quick-side-label,
html[data-theme="dark"] .wiz-preview .m,
html[data-theme="dark"] .post-dash-lead {
  color: rgba(255, 255, 255, 0.7) !important;
}

html[data-theme="dark"] .wiz-card,
html[data-theme="dark"] .wiz-side-card,
html[data-theme="dark"] .quick-listing-page .wiz-card {
  background: #1a1b24 !important;
  border-color: #2a2c38 !important;
  color: #fff;
  box-shadow: none;
}

/* .wiz-side-card.dark used var(--dark) which inverts to light in dark theme */
html[data-theme="dark"] .wiz-side-card.dark {
  background: #302462 !important;
  border-color: #302462 !important;
  color: #fff !important;
}

html[data-theme="dark"] .wiz-side-card.dark .wiz-tip p {
  color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] .post-mode-card {
  background: #1a1b24 !important;
  border-color: #2a2c38 !important;
  color: #fff;
  box-shadow: none;
}

html[data-theme="dark"] .post-mode-card strong {
  color: #fff !important;
}

html[data-theme="dark"] .post-mode-ico {
  background: rgba(110, 74, 255, 0.22);
  color: #c4b5ff;
}

html[data-theme="dark"] .post-mode-chev {
  color: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .wiz-field label,
html[data-theme="dark"] .quick-form label,
html[data-theme="dark"] .field label {
  color: rgba(255, 255, 255, 0.88) !important;
}

html[data-theme="dark"] .quick-form .field > span:first-child {
  color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="dark"] .wiz-field input,
html[data-theme="dark"] .wiz-field select,
html[data-theme="dark"] .wiz-field textarea,
html[data-theme="dark"] .wiz-eq-filter,
html[data-theme="dark"] .quick-form input,
html[data-theme="dark"] .quick-form select,
html[data-theme="dark"] .quick-form textarea,
html[data-theme="dark"] .quick-review-title input {
  background: #12131a !important;
  border-color: #2a2c38 !important;
  color: #fff !important;
}

html[data-theme="dark"] .wiz-field input::placeholder,
html[data-theme="dark"] .wiz-field textarea::placeholder,
html[data-theme="dark"] .quick-form input::placeholder,
html[data-theme="dark"] .quick-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

html[data-theme="dark"] .wiz-field.is-invalid > input,
html[data-theme="dark"] .wiz-field.is-invalid > select,
html[data-theme="dark"] .wiz-field.is-invalid > textarea,
html[data-theme="dark"] .wiz-field.is-invalid > .wiz-nsel-host select,
html[data-theme="dark"] .wiz-field.is-invalid .wiz-field-tip-wrap input,
html[data-theme="dark"] .wiz-field.is-invalid .hf-multi-trigger,
html[data-theme="dark"] .wiz-field.is-invalid .wiz-suggest input {
  border-color: var(--error, #ff7373) !important;
  box-shadow: 0 0 0 3px var(--error-soft, rgba(255, 115, 115, 0.16)) !important;
}

html[data-theme="dark"] .wiz-field-error {
  color: var(--error, #ff7373);
}

html[data-theme="dark"] .wiz-upload.is-invalid,
html[data-theme="dark"] .wiz-card.is-invalid .wiz-upload {
  border-color: var(--error, #ff7373) !important;
  background: var(--error-soft, rgba(255, 115, 115, 0.16)) !important;
}

html[data-theme="dark"] .wiz-field input:focus,
html[data-theme="dark"] .wiz-field select:focus,
html[data-theme="dark"] .wiz-field textarea:focus,
html[data-theme="dark"] .quick-form input:focus,
html[data-theme="dark"] .quick-form select:focus,
html[data-theme="dark"] .quick-form textarea:focus,
html[data-theme="dark"] .quick-review-title input:focus {
  background: #161833 !important;
  border-color: rgba(110, 74, 255, 0.55) !important;
}

html[data-theme="dark"] .wiz-field.is-invalid > input:focus,
html[data-theme="dark"] .wiz-field.is-invalid > select:focus,
html[data-theme="dark"] .wiz-field.is-invalid > textarea:focus {
  border-color: var(--error, #ff7373) !important;
  box-shadow: 0 0 0 3px var(--error-soft, rgba(255, 115, 115, 0.16)) !important;
}

html[data-theme="dark"] .wiz-opt,
html[data-theme="dark"] .wiz-tile,
html[data-theme="dark"] .wiz-pill {
  background: #12131a !important;
  border-color: #2a2c38 !important;
  color: #fff !important;
}

html[data-theme="dark"] .wiz-tile .box {
  background: #1a1b24 !important;
  border-color: #3a3d4d !important;
}

html[data-theme="dark"] .wiz-opt.on,
html[data-theme="dark"] .wiz-tile.on,
html[data-theme="dark"] .wiz-pill.on {
  background: rgba(110, 74, 255, 0.22) !important;
  border-color: var(--primary) !important;
  color: #e4dcff !important;
}

html[data-theme="dark"] .wiz-tile.on .box {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

html[data-theme="dark"] .wiz-check {
  color: #fff !important;
}

html[data-theme="dark"] .wiz-finance {
  background: #12131a !important;
  color: #fff;
}

html[data-theme="dark"] .wiz-suggest-list {
  background: #1a1b24 !important;
  border-color: #2a2c38 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .wiz-suggest-item {
  color: #fff !important;
}

html[data-theme="dark"] .wiz-suggest-item:hover,
html[data-theme="dark"] .wiz-suggest-item.on {
  background: rgba(110, 74, 255, 0.2) !important;
  color: #e4dcff !important;
}

html[data-theme="dark"] .wiz-suggest-empty {
  color: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .wiz-stepper::before {
  background: #2a2c38;
}

html[data-theme="dark"] .wiz-step .dot {
  background: #2a2c38;
  border-color: var(--canvas);
  color: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .wiz-step .lab {
  color: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .wiz-step.active .lab,
html[data-theme="dark"] .wiz-step.done .lab {
  color: #fff;
}

html[data-theme="dark"] .wiz-step.active .dot,
html[data-theme="dark"] .wiz-step.done .dot {
  color: #fff;
}

html[data-theme="dark"] .quick-currency-seg {
  background: #12131a;
  border-color: #2a2c38;
}

html[data-theme="dark"] .quick-currency-seg .quick-cur {
  color: rgba(255, 255, 255, 0.75);
}

html[data-theme="dark"] .quick-currency-seg .quick-cur.on {
  background: rgba(110, 74, 255, 0.28) !important;
  color: #fff !important;
}

html[data-theme="dark"] .quick-section summary {
  color: #fff;
  background: #12131a;
  border-color: #2a2c38;
}

html[data-theme="dark"] .quick-ready {
  background: #12131a;
  border-color: #2a2c38;
  color: #fff;
}

html[data-theme="dark"] .quick-ready-row strong {
  color: #fff;
}

html[data-theme="dark"] .quick-ready-row span {
  color: rgba(255, 255, 255, 0.65);
}

html[data-theme="dark"] .quick-side-switch {
  color: #c4b5ff;
}

html[data-theme="dark"] .wiz-actions .wiz-btn-sec,
html[data-theme="dark"] .wiz-actions .wiz-btn-ghost,
html[data-theme="dark"] .wiz-actions .link-back {
  background: #1a1b24 !important;
  border-color: #2a2c38 !important;
  color: #fff !important;
}

html[data-theme="dark"] .wiz-photo.add,
html[data-theme="dark"] button.wiz-photo.add {
  background: rgba(110, 74, 255, 0.16) !important;
  border-color: rgba(110, 74, 255, 0.4) !important;
  color: #c4b5ff !important;
}

html[data-theme="dark"] .wiz-field-tip-btn {
  color: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .quick-warn {
  background: rgba(245, 184, 74, 0.12);
  border-color: rgba(245, 184, 74, 0.35);
  color: #ffd28a;
}

/* === PROFILE / SELLER DARK === */
html[data-theme="dark"] .pf-page,
html[data-theme="dark"] .seller-page {
  background-color: var(--canvas);
  color: var(--text-primary);
}

html[data-theme="dark"] .pf-mode {
  background: var(--surface-soft);
  border-color: var(--border);
}

html[data-theme="dark"] .pf-mode-btn.on {
  background: var(--surface);
  color: var(--primary-bright);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .pf-card,
html[data-theme="dark"] .pf-side,
html[data-theme="dark"] .pf-hero,
html[data-theme="dark"] .pf-tabs,
html[data-theme="dark"] .pf-btn.ghost,
html[data-theme="dark"] .pf-btn-edit {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
}

html[data-theme="dark"] .pf-side-avatar {
  background: var(--surface-soft);
  border-color: var(--border-strong);
}

html[data-theme="dark"] .pf-chip.on {
  background: var(--primary);
  color: #fff;
}

html[data-theme="dark"] .pf-danger,
html[data-theme="dark"] .pf-btn-danger {
  background: var(--error-soft);
  border-color: rgba(255, 92, 92, 0.35);
  color: #ffb4b4;
}

html[data-theme="dark"] .seller-profile-card,
html[data-theme="dark"] .seller-tab-panel,
html[data-theme="dark"] .seller-info-card,
html[data-theme="dark"] .seller-contact-card,
html[data-theme="dark"] .seller-about,
html[data-theme="dark"] .seller-about-bio,
html[data-theme="dark"] .seller-filters,
html[data-theme="dark"] .seller-sort,
html[data-theme="dark"] .listings-head .sort-select,
html[data-theme="dark"] .seller-map-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
}

html[data-theme="dark"] .seller-avatar {
  border-color: var(--surface);
}

html[data-theme="dark"] .seller-tabs a,
html[data-theme="dark"] .seller-nav a {
  color: var(--text-secondary);
}

html[data-theme="dark"] .seller-tabs a.on,
html[data-theme="dark"] .seller-nav a.on {
  color: var(--primary-bright);
  border-color: var(--primary);
}

html[data-theme="dark"] .seller-stat,
html[data-theme="dark"] .seller-chip,
html[data-theme="dark"] .seller-pill {
  background: var(--surface-soft);
  border-color: var(--border);
  color: var(--text-secondary);
}

html[data-theme="dark"] .seller-search input,
html[data-theme="dark"] .seller-filters select,
html[data-theme="dark"] .seller-filters input {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Advanced search / filter sheets — hardcoded #fff in components.css */
html[data-theme="dark"] .sheet-backdrop,
html[data-theme="dark"] .sheet-backdrop:has(.sheet-car-adv),
html[data-theme="dark"] .sheet-backdrop.adv-backdrop {
  background: var(--overlay-dark);
  color: var(--text-primary);
}

html[data-theme="dark"] .sheet-backdrop:has(.sheet-car-adv),
html[data-theme="dark"] .sheet-backdrop.adv-backdrop {
  background: var(--background);
}

html[data-theme="dark"] .sheet,
html[data-theme="dark"] .sheet.sheet-car-adv,
html[data-theme="dark"] .sheet.adv-sheet {
  background: var(--surface);
  color: var(--text-primary);
  color-scheme: dark;
  box-shadow: none;
}

html[data-theme="dark"] .sheet::before {
  background: var(--border-strong);
}

html[data-theme="dark"] .sheet-head h3,
html[data-theme="dark"] .adv-head h3,
html[data-theme="dark"] .adv-sec-title,
html[data-theme="dark"] .adv-eq-head strong,
html[data-theme="dark"] .sheet-acc > summary,
html[data-theme="dark"] .sheet-check,
html[data-theme="dark"] .eq-opt,
html[data-theme="dark"] .eq-opt span,
html[data-theme="dark"] .adv-toggle {
  color: var(--text-primary);
}

html[data-theme="dark"] .adv-kicker,
html[data-theme="dark"] .sheet-sec,
html[data-theme="dark"] .adv-sec-hint,
html[data-theme="dark"] .adv-range-lbl,
html[data-theme="dark"] .adv-range-dash {
  color: var(--text-secondary);
}

html[data-theme="dark"] .sheet-foot,
html[data-theme="dark"] .sheet-car-adv .sheet-foot,
html[data-theme="dark"] .sheet-car-adv .adv-foot {
  background: var(--surface);
  border-top-color: var(--border);
}

@media (min-width: 900px) {
  html[data-theme="dark"] .sheet-car-adv .adv-foot {
    background: transparent;
    border-top-color: transparent;
  }
}

html[data-theme="dark"] .adv-close {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

html[data-theme="dark"] .adv-close:hover,
html[data-theme="dark"] .adv-close:focus-visible {
  border-color: var(--primary);
  color: var(--primary-bright);
  background: var(--primary-soft);
}

html[data-theme="dark"] .adv-jump {
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .adv-jump button {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

html[data-theme="dark"] .adv-jump button:hover,
html[data-theme="dark"] .adv-jump button:focus-visible {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-bright);
}

html[data-theme="dark"] .adv-sec {
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .adv-sec-mark {
  background: var(--primary-soft);
}

html[data-theme="dark"] .adv-eq-block,
html[data-theme="dark"] .sheet-acc {
  background: var(--surface-soft);
  border-color: var(--border-strong);
}

html[data-theme="dark"] .sheet .chip,
html[data-theme="dark"] .sheet-car-adv .chip {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

html[data-theme="dark"] .sheet .chip.active,
html[data-theme="dark"] .sheet-car-adv .chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

html[data-theme="dark"] .sheet.sheet-car-adv .adv-sec .input,
html[data-theme="dark"] .sheet.sheet-car-adv .adv-sec .select,
html[data-theme="dark"] .sheet.sheet-car-adv .adv-sec input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .sheet.sheet-car-adv .adv-sec .hf-multi-trigger,
html[data-theme="dark"] .sheet-car-adv .input,
html[data-theme="dark"] .sheet-car-adv .select,
html[data-theme="dark"] .sheet-car-adv .adv-range-inputs .input,
html[data-theme="dark"] .sheet-car-adv input[type="month"],
html[data-theme="dark"] .sheet-car-adv .hf-multi-trigger,
html[data-theme="dark"] .sheet-car-adv .eq-filter {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

html[data-theme="dark"] .sheet.sheet-car-adv .adv-sec .input:focus,
html[data-theme="dark"] .sheet.sheet-car-adv .adv-sec .select:focus,
html[data-theme="dark"] .sheet.sheet-car-adv .adv-sec .hf-multi-trigger:hover:not(:disabled),
html[data-theme="dark"] .sheet.sheet-car-adv .adv-sec .hf-multi-trigger[aria-expanded="true"],
html[data-theme="dark"] .sheet-car-adv .hf-multi-trigger:hover:not(:disabled),
html[data-theme="dark"] .sheet-car-adv .hf-multi-trigger[aria-expanded="true"] {
  background: var(--surface-hover);
  border-color: rgba(var(--primary-rgb), 0.55);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

html[data-theme="dark"] .sheet-car-adv input::placeholder,
html[data-theme="dark"] .sheet-car-adv .select::placeholder,
html[data-theme="dark"] .sheet-car-adv .field-month > label {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .sheet-car-adv input:-webkit-autofill,
html[data-theme="dark"] .sheet-car-adv input:-webkit-autofill:hover,
html[data-theme="dark"] .sheet-car-adv input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  box-shadow: 0 0 0 1000px var(--surface-soft) inset;
  caret-color: var(--text-primary);
}

html[data-theme="dark"] .sheet-foot .btn-ghost,
html[data-theme="dark"] .adv-foot .btn-ghost {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Quieter purple glow — page CSS still uses primary-rgb drop shadows */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .hf-go,
html[data-theme="dark"] .hqs-go,
html[data-theme="dark"] .hdr-d-cta,
html[data-theme="dark"] .browse-jump-top,
html[data-theme="dark"] .ai-chat-fab,
html[data-theme="dark"] .home-start-swipe,
html[data-theme="dark"] .home-sellers-swipe,
html[data-theme="dark"] .upz-toggle-btn.on,
html[data-theme="dark"] .nv-chip.is-on,
html[data-theme="dark"] .quick-listing-page .btn-primary {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .home-start-swipe,
html[data-theme="dark"] .home-sellers-swipe {
  box-shadow: -6px 0 14px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .hqs-mic.is-listening::after {
  opacity: 0.2;
}

html[data-theme="dark"] #listing-report-sheet .listing-report-check,
html[data-theme="dark"] #listing-report-sheet .listing-report-car-note span,
html[data-theme="dark"] #listing-report-sheet .listing-report-note span {
  color: var(--text-primary);
}

html[data-theme="dark"] #listing-report-sheet .listing-report-check--wrong select,
html[data-theme="dark"] #listing-report-sheet .listing-report-car-note textarea,
html[data-theme="dark"] #listing-report-sheet .listing-report-note textarea {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

html[data-theme="dark"] #listing-report-sheet .listing-report-check--wrong select:disabled {
  background: var(--surface);
  color: var(--text-muted);
}

/* ============================================================
   r1014b — mockup: crni hero, ljubičasti sjaj oko pretrage, antracit oglasi
   ============================================================ */

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #app,
html[data-theme="dark"] .site-shell,
html[data-theme="dark"] .site-main,
html[data-theme="dark"] .home-page,
html[data-theme="dark"] .market-page,
html[data-theme="dark"] .browse-page,
html[data-theme="dark"] .page-enter,
html[data-theme="dark"] .pf-page,
html[data-theme="dark"] .seller-page,
html[data-theme="dark"] .wiz-page,
html[data-theme="dark"] .detail-page {
  background-color: var(--background);
  background-image: none;
  color: var(--text-primary);
}

/* Hero ostaje crn — bez ljubičastog fila */
html[data-theme="dark"] .home-hero-final {
  background: var(--background);
}

html[data-theme="dark"] .hero-copy h1,
html[data-theme="dark"] .hero-copy h1 em {
  color: #fff !important;
}

html[data-theme="dark"] .hero-lead {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .hero-badge {
  background: var(--primary-soft);
  color: var(--primary-bright);
}

html[data-theme="dark"] .hero-hub-cta a {
  color: var(--primary-bright);
}

/* Zona iza pretrage: ambient ljubičasti glow */
html[data-theme="dark"] .home-quick-search,
html[data-theme="dark"] .browse-quick-search,
html[data-theme="dark"] .browse-page .browse-quick-search,
html[data-theme="dark"] .sellers-page .browse-quick-search,
html[data-theme="dark"] .browse-page .browse-qs-pin.is-pinned .browse-qs-pin-inner {
  background: var(--gradient-canvas) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .home-quick-search .hqs-head h2,
html[data-theme="dark"] .home-quick-search .hqs-head h2 em {
  color: var(--primary-bright) !important;
}

/* Search bar = tamni pill sa glow ivicom */
html[data-theme="dark"] .home-quick-search .hqs-bar,
html[data-theme="dark"] #hero-search.hqs-bar,
html[data-theme="dark"] .browse-qs-bar {
  background: var(--surface-input) !important;
  border: 1px solid var(--border-brand) !important;
  box-shadow: var(--shadow-search) !important;
}

html[data-theme="dark"] #hero-search .hqs-input,
html[data-theme="dark"] .hqs-input input,
html[data-theme="dark"] .browse-qs-input input {
  background: transparent !important;
  color: var(--text-primary);
}

html[data-theme="dark"] .hqs-input input::placeholder,
html[data-theme="dark"] #hf-q[data-ph-animating]::placeholder {
  color: var(--text-muted);
}

/* Filter panel = glavni ljubičasti card */
html[data-theme="dark"] .home-filter,
html[data-theme="dark"] .home-quick-search .home-filter,
html[data-theme="dark"] #home-filter {
  background: var(--gradient-search) !important;
  border: 1px solid var(--border-brand) !important;
  box-shadow: var(--shadow-search);
}

html[data-theme="dark"] .hf-cats {
  background: transparent !important;
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .hf-main {
  background: transparent !important;
}

html[data-theme="dark"] .hf-field select,
html[data-theme="dark"] .hf-field input,
html[data-theme="dark"] .hf-range select,
html[data-theme="dark"] .hf-range input,
html[data-theme="dark"] .hf-multi-trigger {
  background: var(--surface-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
}

html[data-theme="dark"] .listing-card.v2,
html[data-theme="dark"] .listing-card.v2.featured,
html[data-theme="dark"] .listing-card.v2.delux,
html[data-theme="dark"] .listing-card.v2.list,
html[data-theme="dark"] .listing-card.v2 .body,
html[data-theme="dark"] .listing-card.v2.featured .body,
html[data-theme="dark"] .rel-card,
html[data-theme="dark"] .rel-body {
  background: var(--gradient-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-card) !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .hf-go,
html[data-theme="dark"] .hqs-go,
html[data-theme="dark"] .hdr-d-cta,
html[data-theme="dark"] .btn-post,
html[data-theme="dark"] .hf-search-btn,
html[data-theme="dark"] .quick-listing-page .btn-primary,
html[data-theme="dark"] .pagination button.on {
  background: var(--gradient-primary) !important;
  color: var(--text-on-primary) !important;
  box-shadow: var(--shadow-primary) !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .market-chips .filter-chip,
html[data-theme="dark"] .body-pill,
html[data-theme="dark"] .hqs-tag,
html[data-theme="dark"] .browse-save-search,
html[data-theme="dark"] .sort-select,
html[data-theme="dark"] .browse-view-toggle,
html[data-theme="dark"] .btn-home-wide,
html[data-theme="dark"] .wiz-actions .wiz-btn-sec,
html[data-theme="dark"] .wiz-actions .wiz-btn-ghost {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .filter-chip:hover,
html[data-theme="dark"] .body-pill:hover,
html[data-theme="dark"] .hqs-tag:hover,
html[data-theme="dark"] .btn-home-wide:hover,
html[data-theme="dark"] .browse-save-search:hover {
  background: var(--surface-hover) !important;
}

html[data-theme="dark"] .hf-cat.on,
html[data-theme="dark"] .hf-cat.on:hover,
html[data-theme="dark"] .body-pill.on,
html[data-theme="dark"] .filter-chip.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-on-primary) !important;
}

html[data-theme="dark"] .home-promo {
  background: var(--background) !important;
  color: var(--text-primary);
}

html[data-theme="dark"] .home-h2,
html[data-theme="dark"] .home-deals .home-h2,
html[data-theme="dark"] .home-new24 .home-h2,
html[data-theme="dark"] .home-bodytype .home-h2,
html[data-theme="dark"] .home-promo h2,
html[data-theme="dark"] .home-promo h2 em {
  color: #fff !important;
}

html[data-theme="dark"] .home-lead,
html[data-theme="dark"] .hp-text {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .hqs-ico,
html[data-theme="dark"] .hqs-mic,
html[data-theme="dark"] .hf-advanced,
html[data-theme="dark"] .more-link,
html[data-theme="dark"] .detail-page .more-link,
html[data-theme="dark"] .quick-side-switch,
html[data-theme="dark"] .home-section-cta a,
html[data-theme="dark"] a.hero-hub-cta {
  color: var(--primary-bright);
}

html[data-theme="dark"] .hqs-mic:hover,
html[data-theme="dark"] .hqs-mic.is-listening,
html[data-theme="dark"] .hf-advanced:hover {
  color: var(--primary-bright);
  background: var(--primary-soft);
}

html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] textarea:focus-visible,
html[data-theme="dark"] summary:focus-visible,
html[data-theme="dark"] [tabindex]:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .hdr-drawer,
html[data-theme="dark"] .detail-card,
html[data-theme="dark"] .side-card,
html[data-theme="dark"] .wiz-card,
html[data-theme="dark"] .pf-card,
html[data-theme="dark"] .sheet {
  background: var(--surface);
  border-color: var(--border);
}

html[data-theme="dark"] .home-stats,
html[data-theme="dark"] #home-stats {
  background: var(--surface) !important;
  border: 1px solid var(--border-brand) !important;
  box-shadow: none;
}

html[data-theme="dark"] .home-stats .hs-item,
html[data-theme="dark"] #home-stats .hs-item {
  border-color: var(--border) !important;
}

html[data-theme="dark"] .home-stats .hs-item strong,
html[data-theme="dark"] #home-stats .hs-item strong {
  color: #fff !important;
}

html[data-theme="dark"] .home-stats .hs-item span,
html[data-theme="dark"] #home-stats .hs-item span {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .home-listings-nav-btn {
  background: var(--primary) !important;
  color: #fff !important;
  border: 0 !important;
}

html[data-theme="dark"] .listing-toolbar,
html[data-theme="dark"] .listing-sticky,
html[data-theme="dark"] .detail-page .mobile-cta,
html[data-theme="dark"] .detail-page .listing-toolbar.is-pinned .listing-toolbar-inner {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* r1014c — perl bela umesto #fff na pločicama (ikonice, start, saloni, marke) */
html[data-theme="dark"] .hf-cat .ico,
html[data-theme="dark"] .hf-subcat .ico {
  background: var(--pearl) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .hf-cat:hover .ico,
html[data-theme="dark"] .hf-subcat:hover .ico {
  background: var(--pearl-hover) !important;
}

html[data-theme="dark"] .hf-cat.on .ico,
html[data-theme="dark"] .hf-cat.on:hover .ico {
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box;
  border: 1.5px solid var(--pearl);
}

html[data-theme="dark"] .home-start-card {
  background: var(--pearl) !important;
  border-color: rgba(228, 225, 236, 0.35) !important;
  color: var(--pearl-ink);
}

html[data-theme="dark"] .home-start-card strong {
  color: var(--pearl-ink) !important;
}

html[data-theme="dark"] .home-start-card span:last-child {
  color: #6b6f80 !important;
}

html[data-theme="dark"] .home-start-ico {
  background: var(--pearl-hover) !important;
  color: var(--primary);
}

html[data-theme="dark"] .home-start-card:hover,
html[data-theme="dark"] .browse-hub-related .home-start-card:hover,
html[data-theme="dark"] .home-start-card.browse-hub-cat-card:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

html[data-theme="dark"] .home-start-card:hover strong,
html[data-theme="dark"] .home-start-card:hover span:last-child {
  color: #fff !important;
}

html[data-theme="dark"] .home-start-card:hover .home-start-ico {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff;
}

html[data-theme="dark"] .browse-hub-related .home-start-card,
html[data-theme="dark"] .home-start-card.browse-hub-cat-card {
  background: var(--pearl) !important;
  border-color: rgba(228, 225, 236, 0.35) !important;
  color: var(--pearl-ink) !important;
}

html[data-theme="dark"] .browse-hub-related .home-start-card strong,
html[data-theme="dark"] .home-start-card.browse-hub-cat-card strong {
  color: var(--pearl-ink) !important;
}

html[data-theme="dark"] .browse-hub-related .home-start-card span:last-child,
html[data-theme="dark"] .home-start-card.browse-hub-cat-card span:last-child {
  color: #6b6f80 !important;
}

html[data-theme="dark"] .home-seller-card {
  background: var(--pearl) !important;
  border-color: rgba(228, 225, 236, 0.28) !important;
}

html[data-theme="dark"] .home-seller-card:hover {
  background: var(--pearl-hover) !important;
  border-color: var(--primary) !important;
}

html[data-theme="dark"] .home-seller-card strong {
  color: var(--pearl-ink) !important;
}

html[data-theme="dark"] .home-seller-card .hs-av:not(:has(img)) {
  background: var(--pearl-hover);
}

html[data-theme="dark"] .hs-vbadge {
  border-color: var(--pearl);
}

html[data-theme="dark"] .hs-listings,
html[data-theme="dark"] .hs-meta {
  color: #6b6f80 !important;
}

html[data-theme="dark"] .home-brands .bc-av,
html[data-theme="dark"] #home-brands .bc-av,
html[data-theme="dark"] .home-brands .bc-av.has-logo,
html[data-theme="dark"] #home-brands .bc-av.has-logo {
  background-color: var(--pearl) !important;
}

html[data-theme="dark"] .browse-hub-related .home-start-ico,
html[data-theme="dark"] .home-start-card.browse-hub-cat-card .home-start-ico {
  background: var(--pearl-hover) !important;
  color: var(--primary);
}