/* ═══════════════════════════════════════════════════════════════
   shared-ui.css — ECOFACTOR AUTO unified UI styles
   Unified scrollbars, dropdowns, popups across the whole site.
   Load AFTER shared-catalog-theme.css on every page.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ TOKENS (override if not set) ═══ */
:root {
  --scroll-width: 8px;
  --scroll-width-thin: 6px;
  --scroll-thumb: rgba(252, 207, 47, 0.5);
  --scroll-thumb-hover: rgba(252, 207, 47, 0.8);
  --scroll-track: rgba(255, 255, 255, 0.04);
  --z-header: 200;
  --z-dropdown-in-header: 3100;
  --z-sidebar-sticky: 40;
  --z-filter-dropdown: 50;
  --z-drawer-overlay: 250;
  --z-drawer: 260;
  --z-mobile-nav: 300;
  --z-modal: 9000;
  --z-lang-popup: 9999;
  --z-cookie-consent: 1200;
}

[data-theme=light] {
  --scroll-thumb: rgba(252, 207, 47, 0.75);
  --scroll-thumb-hover: rgba(252, 207, 47, 1);
  --scroll-track: rgba(0, 0, 0, 0.04);
}

/* ═══ GLOBAL SCROLLBAR (WebKit + Firefox) ═══ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

*::-webkit-scrollbar {
  width: var(--scroll-width-thin);
  height: var(--scroll-width-thin);
}
*::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 10px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s ease;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* Main page scrollbar — slightly wider */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: var(--scroll-width);
}

/* Hide scrollbars where not needed (tabs, utility) */
.no-scrollbar, .catalog-tabs {
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar,
.catalog-tabs::-webkit-scrollbar {
  display: none;
}

/* ═══ CONSISTENT DROPDOWNS (sort, filters, selectors) ═══ */
.sort-menu,
.gh-lang-dropdown,
.gh-about-dropdown {
  max-height: min(70vh, 480px);
  overflow-y: auto;
}

/* Sort dropdown & header dropdowns — above sidebar/sticky bar */
.sort-menu { z-index: 500 !important; position: absolute; }
.gh-lang-dropdown,
.gh-about-dropdown { z-index: var(--z-dropdown-in-header) !important; }

/* Budget modal & popups — above everything */
.budget-overlay { z-index: var(--z-modal) !important; }
.coming-overlay { z-index: var(--z-modal) !important; }
.auth-modal,
.auth-overlay { z-index: calc(var(--z-modal) + 10) !important; }

/* Mobile filter drawer (catalog) — above overlay */
.drawer-overlay { z-index: var(--z-drawer-overlay) !important; }
.filter-drawer  { z-index: var(--z-drawer) !important; }

/* Sticky header always on top of in-page content */
.gh-header { z-index: var(--z-header) !important; }

/* ═══ FILTER ACCORDION — ensure body scrolls, no overlap ═══ */
.filter-group.open .filter-body {
  /* cap height so multiple open groups don't push layout */
  max-height: min(60vh, 420px);
  overflow-y: auto;
}

/* Filter inner list (brands, models, years) — scroll only the list */
.filter-list {
  max-height: 260px;
  overflow-y: auto;
}

/* ═══ MOBILE NAV / DRAWER — scrollable content ═══ */
.gh-mobile-nav,
#ghMobileNav {
  overflow-y: auto;
  max-height: 100svh;
}
.filter-drawer {
  overflow-y: hidden;
}
.drawer-filters {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* ═══ MODAL BODIES — always scrollable when content is tall ═══ */
.budget-modal,
.coming-modal,
.auth-modal {
  max-height: min(88vh, 920px);
  overflow-y: auto;
}

/* ═══ POPUP FORM CHIP (legacy) ═══ */
.popup-box { max-height: 90vh; overflow-y: auto; }

/* ═══ LANG POPUP (coming from browser) ═══ */
#cult-lang-popup { z-index: var(--z-lang-popup); }

/* ═══ COOKIE CONSENT ═══ */
.cc-overlay,
.cookie-consent { z-index: var(--z-cookie-consent); }

/* ═══ SELECT / TEXTAREA / INPUT — consistent focus ring ═══ */
select:focus,
textarea:focus,
input:focus {
  outline: none;
}

/* ═══ BODY SCROLL-LOCK when modal open ═══ */
body.is-modal-open {
  overflow: hidden;
}


/* ═══ User fix: sidebar header styling ═══ */
.sidebar-header {
  position: relative !important;
  z-index: 1 !important;
  padding: 10px 10px 10px !important;
  border-radius: var(--radius-lg, 14px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  order: 0 !important;
}

/* Ensure active chips are always above cards and visible */
.catalog-bar {
  position: sticky;
  top: calc(var(--header-h, 72px) + 0px);
  z-index: 150;
  background: var(--bg);
  overflow: visible;
}
/* sort-menu lives INSIDE catalog-bar; its stacking context is scoped, so 500 is relative */
.sort-wrap { position: relative; z-index: 200; }
.sort-wrap.open { z-index: 500; }
/* Ensure car-list never creates stacking context above catalog-bar */
.car-list, .car-card { z-index: auto; }
.active-chips {
  flex-wrap: wrap;
  min-height: 30px;
}
.active-chips .chip {
  animation: chipIn 0.18s ease;
}
@keyframes chipIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}