body{
margin:0;
font-family:'Rubik',sans-serif;
background:#efefef;
}

/* SEARCH */

.search-btn{
width:30px;
height:30px;
border-radius:50%;
background:#168534;
border:none;
color:white;
margin-right:6px;
cursor:pointer;
font-size:13px;
}

/* MAN */

.man-section{
position:absolute;
left:0;
top:0;
transform:translateY(-117px);
width:300px;
display:flex;
justify-content:center;
z-index:10;
}

.man-section img{
width:300px;
height:auto;
}

/* EMPTY SPACE FOR GRID */

.man-space{
width:324px;
flex:0 0 324px;
}

/* BUTTONS */

.filter-buttons{
display:flex;
flex-direction:column;
align-items:stretch; 
gap:6px;
flex:1 1 220px;
max-width:260px;
}

.btn{
width:100%;
padding:8px;
border-radius:20px;
font-size:12px;
cursor:pointer;
}

.btn-filter{
background: linear-gradient(270deg, #6CB243 -2.56%, #247C3F 100%);
color:white;
border:none;
}

.btn-advanced{
border:1px solid rgba(23, 176, 54, 1);
background:white;
color:rgba(23, 110, 61, 1);
font-size:16px;
text-transform:none;
}

.btn-reset{
border:1px solid #444;
background:white;
font-size:14px;
}

/* CHECKBOX */

.filter-check input{
appearance:none;
width:14px;
height:14px;
border-radius:3px;
border:1px solid rgba(173, 173, 173, 1);
position:relative;
}

.filter-check input:checked{
background:#27b33e;
}

.filter-check input:checked:after{
content:"✓";
color:white;
font-size:9px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

/* DROPDOWNS */

.dropdown-col{
display:flex;
flex-direction:column;
justify-content: space-between;
gap:8px;
flex:1 1 200px;
max-width:240px;
}

.dropdown-col .filter-small.make_select{
padding-left:0;
padding-top:0;
padding-bottom:0;
}

.filter-dropdown::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 10px;
    color: #27b33e;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
}

.rtl .filter-dropdown::after {
    right: auto;
    left: 14px;
}

.filter-dropdown select{
border:none;
background:transparent;
font-size:12px;
outline:none;
width:100%;
cursor:pointer;
}

body .filter-dropdown.car_type_open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

body .filter-dropdown.car_type_open  .span_selection {
	line-height: 19.5px;
	padding-left: 0;
}

html[dir="rtl"] .filter-dropdown {
	align-items: flex-end;
}
/* TAGS */

.tags{
display:flex;
flex-wrap:wrap;
gap:6px;
align-items:center;
justify-content:space-between;
}

/* опускаем фильтры */

.filters-grid > :not(.man-section):not(.man-space) {
  margin-top: 25px;
}

.search-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  margin-bottom: 0px !important;
  padding-top: 20px;
}

.filter-small {
  font-size: 14px;
  color: #666;
}

.select2-container--default .select2-selection--single.select2-selection--single .select2-selection__rendered {
  font-size: 15px;
  font-weight: 500;
}

.filter-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 4px 0;
  font-size: 14px;
}

.btn.btn-advanced {
  color: rgba(23, 110, 61, 1)!important;
}

.btn.btn-filter {
  font-size: 16px;
  font-weight: 500;
  text-transform:none;
}

.search-box .fas.fa-search {
  left: 5px !important;
  width: 40px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(109, 179, 68, 1);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  /* correction 897 (QA): the icon now runs the search (search-hero.js) */
  cursor: pointer;
  border: solid 1px rgba(109, 179, 68, 1);
}

/* NEW TITLE */

.search-title {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  margin-bottom: 0px;
  color: #000;
}

/* CONTAINER */

.search-container {
  box-sizing: border-box;
  width: clamp(
    calc(var(--gc-container-min) - 76px),
    calc(100vw - 4 * var(--gc-gutter) - 2 * var(--gc-ad-max) - 76px),
    calc(var(--gc-container-max) - 76px)
  );
  max-width: none !important;
  margin: auto;
  background: rgba(236, 239, 243, 0.56);
  backdrop-filter: blur(0px);
  border-radius: 14px;
  padding: 0px 30px 10px 10px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 18px;
  container: gc-search / inline-size;
}

.filters-panel {
    margin-top:10px;
}
/* HERO */

.search-hero {
  padding: 0px !important;
  padding-top: 20px !important;
}

#main {
  background: #fff !important;
}

.checkbox-card {
  background: #fff !important;
  border-radius: 20px;
  padding: 10px;
  border: 1px solid #d9d9d9;
  flex:1 1 180px;
  max-width:200px;
}

.select2-container--default .select2-selection--single.select2-selection--single {
  background-color: #fff !important;
}

/* ACTIVE TAG */

.tags .tag{
cursor:pointer;
transition:all .2s ease;
}

.tags .tag.active{
background:#168534 !important;
color:#ffffff !important;
border-color:#27b33e !important;
}

body .search-hero .search-box input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 13px;
  text-align: right !important;
  height: 34px;
}

.btn.btn-reset {
  color: #000 !important;
  text-transform: none;
}

.recent {
  font-size: 13px;
  text-decoration: underline;
  color: #000000;
  margin-top: 4px;
  text-align: center;
}

.search-box {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  background: #fff;
  border-radius: 30px;
  padding: 5px 6px;
  width: 460px;
  max-width: 100%;
  padding-right: 10px;
}

.stm-template-listing_one_elementor input[type="text"], .stm-template-listing_one_elementor input[type="number"], .stm-template-listing_one_elementor input[type="tel"], .stm-template-listing_one_elementor input[type="email"], .stm-template-listing_one_elementor input[type="search"], .stm-template-listing_one_elementor input[type="password"] {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  background: #fff !important;
  color: #000 !important;
}

/* GRID */

.filters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  align-items: stretch;
  font-size: 13px;
  position: relative;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px !important;
  padding-bottom: 14px;
}

.filter-icon {
  color: #27b33e;
  font-size: 12px;
  display: none;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered {
  border-color: #27b33e;
  color: #27b33e;
}

.select2-container--default .select2-selection--single.select2-selection--single .select2-selection__arrow b::before {
  content: "\f107";
  color: #27b33e;
}

.filter-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.filter-dropdown {
  position: relative;
  background: #fff !important;
  border-radius: 20px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d9d9d9;
}

/* TAG ICON */

.tag {
  background: #fff;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 15px;
  color: #555 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tag.active .tag-icon{
filter:brightness(0) invert(1);
}

.tags-title {
  font-size: 16px;
  font-weight: 500;
  max-width: 130px;
  white-space: normal;
  line-height: 1;
  text-align: right;
}

/* SELECT2 DROPDOWN PANEL */

.select2-container--open .select2-dropdown{
border:none;
border-radius:12px;
box-shadow:0 8px 24px rgba(0,0,0,0.12);
overflow:hidden;
padding:6px 0;
background:#ffffff;
}

.select2-container--default .select2-results__option{
padding:10px 14px;
font-size:14px;
color:#333;
transition:all .15s ease;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
background:#f3f5f7;
color:#000;
}

.select2-container--default .select2-results__option--selected{
background:#168534;
color:#fff;
font-weight:500;
}

.select2-search--dropdown{
padding:8px 10px;
border-bottom:1px solid #eee;
}

.select2-search--dropdown .select2-search__field{
border-radius:20px;
border:1px solid #ddd;
padding:6px 10px;
font-size:13px;
outline:none;
}

.select2-results__options::-webkit-scrollbar{
width:6px;
}

.select2-results__options::-webkit-scrollbar-thumb{
background:#d0d6dc;
border-radius:6px;
}

.select2-results__options::-webkit-scrollbar-thumb:hover{
background:#b8c0c7;
}

.select2-container--open .select2-selection__arrow{
transform:rotate(180deg);
transition:transform .2s ease;
}

.badge {
  padding: 6px 20px !important;
}

.footer-divider {
  width: 0 !important;
  height: 50px;
  border-left: 1px dotted #e5e5e5 !important;
}

.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 100% !important;
}

/* CONTAINER QUERIES: filters-grid responsiveness */

@container gc-search (max-width: 1250px) {
  .man-section,
  .man-space {
    display: none;
  }
/*   .filters-grid > :not(.man-section):not(.man-space) {
    margin-top: 0;
  } */
  .filter-buttons,
  .checkbox-card,
  .dropdown-col {
    max-width: none;
  }
}

@container gc-search (max-width: 700px) {
  .filters-grid > * {
    flex-basis: 100%;
    max-width: 100%;
  }
  .search-box {
    width: 100%;
  }
  .tags-title,
  .search-title {
    display: none;
  }
}

@media (max-width: 767px) {
    .search-container {
        padding: 16px;
		width: 100%;
    }
	.filters-grid {
		flex-direction: column-reverse;
		gap: 15px;
		margin-top: 15px;
	}
	.tags {
		justify-content: center;
	}
	.search-top {
		padding-top: 0;
	}
	.filters-grid > :not(.man-section):not(.man-space) {
		margin-top: 0;
	}
	.dropdown-col {
		gap: 15px;
	}
	.filter-text {
		padding:0;
	}
}

/* MOBILE: filters collapsible toggle (search_hero) */

.filters-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 700;
  color: #111;
  cursor: pointer;
}

.search-hero button.filters-toggle#gc-filters-toggle {
	color: #000000!important;
	text-transform: none;
	margin-top: 10px;
}

.filters-toggle-arrow {
  display: inline-block;
  color: #247C3F;
  transition: transform .2s ease;
}

.filters-toggle[aria-expanded="true"] .filters-toggle-arrow {
  transform: rotate(180deg);
}

@container gc-search (max-width: 480px) {

  .filters-toggle {
    display: flex;
  }

  .filters-panel {
    display: none;
  }

  .filters-panel.is-open {
    display: block;
  }

}


/* RTL FIX: Price Range / EV Range popup sliders (noUiSlider) render broken on RTL (Hebrew) pages.
   Root cause: the site's own handle CSS unconditionally anchors the 18px handle via `right: -9px`.
   noUiSlider auto-detects text direction from the ambient CSS `direction` and adds the class
   `noUi-txt-dir-rtl` when the popup is RTL; for that case the library's internal math expects
   the handle to be LEFT-anchored (mirroring the pairing its own default stylesheet uses), but our
   unconditional `right` anchor breaks that pairing and pushes the handle far outside the 360px
   popup. Scoping the override to `.noUi-txt-dir-rtl` only fixes Hebrew without touching the
   already-correct English/LTR behavior (which still uses the original `right: -9px` anchor). */
#gcPriceSlider.noUi-txt-dir-rtl .noUi-handle,
#gcRangeSlider.noUi-txt-dir-rtl .noUi-handle {
    left: -9px !important;
    right: auto !important;
}


/* ============================================================
   MOBILE FIX: Price Range / EV Range popups (17_09_26)
   Root cause: a leftover, unconditional Elementor "custom position"
   rule for .gc-price-popup / .gc-range-popup (top: calc(N% + Mpx);
   right: 190/200px) with no @media wrapper and no !important. It sits
   AFTER the site's own max-width:768px "centered modal" rule in the
   stylesheet, so with equal specificity it wins on every screen size,
   including mobile. That is why these two popups open far down the
   page and render abnormally narrow, instead of the centered modal
   the site's own mobile CSS already intends (matching the Car Type
   popup's mobile behaviour). #id selectors + !important guarantee our
   fix wins regardless of any future Elementor edits re-triggering
   the same issue.
============================================================ */

/* Desktop: restore the correct anchored-below-trigger position */
#gcPricePopup, #gcRangePopup {
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
}

/* Mobile: restore + reinforce the intended centered modal, and make
   the popup itself a column flex container so its content (header,
   inputs row, slider) stacks and stays within the viewport width */
@media (max-width: 768px) {
    #gcPricePopup, #gcRangePopup {
        position: fixed !important;
        top: 50% !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        transform: translateY(-50%) scale(1) !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Extra safety net on very narrow screens: let the price min/max
   input row wrap instead of squeezing two fields side by side */
@media (max-width: 480px) {
    #gcPricePopup .gc-price-inputs {
        flex-wrap: wrap !important;
    }
    #gcPricePopup .gc-price-field {
        flex: 1 1 120px !important;
        min-width: 120px !important;
    }
}


/* ============================================================
   FIX: Make & Model popup (gcMakePopup) (17_09_26)
   Same root cause as the Price Range / EV Range fix above: several
   leftover, unconditional Elementor "custom position/size" rules for
   .gc-make-popup and .gc-make-grid (top: calc(60% + 12px), width:
   437-465px, grid-template-columns overrides, and even position:
   absolute re-applied) sit later in the stylesheet than the popup's
   own responsive rules and win on every screen size - including
   forcing position back to "absolute" on mobile. That is why it
   renders far down the page (60% of the tall, stacked mobile filters
   container) instead of the intended fixed, full-viewport modal used
   by the other filter popups, and why its make/model grid doesn't
   lay out cleanly. #id selectors + !important guarantee this wins
   regardless of any future Elementor edits re-triggering the issue.
============================================================ */

#gcMakePopup {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    width: 920px !important;
}

@media (max-width: 1100px) {
    #gcMakePopup {
        width: 760px !important;
    }
}

@media (max-width: 768px) {
    #gcMakePopup {
        position: fixed !important;
        inset: 12px !important;
        top: 12px !important;
        right: 12px !important;
        left: 12px !important;
        bottom: 12px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: auto !important;
    }

    #gcMakePopup .gc-make-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        width: auto !important;
        justify-content: initial !important;
    }
}


/* ============================================================
   FIX: Model dropdown (.gc-model-popup) inside Make & Model (17_09_26)
   Same recurring issue again: leftover, unconditional Elementor
   "custom position/size" rules for .gc-model-popup (position:
   absolute; left: 50%; width: 200px) sit after the popup's own
   max-width:768px "centered modal" rule and win on every screen
   size. On mobile this re-centers the dropdown on its OWN make card
   instead of the viewport, so for a card in the rightmost column the
   dropdown opens mostly off-screen to the right. #id-scoped selector
   + !important restores the centered-on-screen behaviour regardless
   of which column the card is in.
============================================================ */
@media (max-width: 768px) {
    #gcMakePopup .gc-model-popup {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        top: 50% !important;
        width: auto !important;
        transform: translateY(-50%) scale(1) !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
}


/* Shared glass overlay for filter popups (Price/Range/Car/Make) */
.gc-popup-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.38) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
    z-index: 199 !important;
    pointer-events: none !important;
}
.gc-popup-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ===== MOBILE search filters: popups + dim overlay sit above the sticky site header (z 1055) and the compare bar (z 9999) ===== */
@media (max-width:768px){
  .gc-popup-overlay{
    z-index:10000 !important;
  }
  .gc-make-popup,
  .gc-car-popup,
  .gc-price-popup,
  .gc-range-popup{
    z-index:10001 !important;
  }
  /* the popup is a centered flex column; with content taller than the popup, centering pushes the
     title/search row above the top edge where it cannot be scrolled to. Start from the top instead. */
  #gcMakePopup{
    justify-content:flex-start !important;
  }
  /* logged-in only: keep the popup header clear of the WP admin bar */
  .admin-bar #gcMakePopup{
    top:58px !important;
  }
}

/* ===== MOBILE Make & Model: the model list is position:fixed (a centered sheet). Any ancestor with a
   transform or a transform animation becomes its containing block, which squeezed it to the width of a
   selected card and made it scroll away with the list. Remove both so it is sized by the viewport. ===== */
@media (max-width:768px){
  body #gcMakePopup.gc-make-popup.active{
    transform:none !important;
  }
  #gcMakePopup .gc-make-card,
  #gcMakePopup .gc-make-card.active,
  #gcMakePopup .gc-make-card:hover{
    transform:none !important;
    animation:none !important;
  }
}

/* ===== MOBILE Make & Model popup: Figma styling — flat square tiles, green selected state with corner check,
   full-width Model pill, model list as a dropdown under the button ===== */
@media (max-width:768px){
  /* --- make tiles: full-column square, flat (no shadow) --- */
  #gcMakePopup .gc-make-grid{
    gap:18px 12px !important;
    align-items:start;
  }
  #gcMakePopup .gc-make-card,
  #gcMakePopup .gc-make-card.active,
  #gcMakePopup .gc-make-card:hover{
    width:100% !important;
    height:auto !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  #gcMakePopup .gc-make-icon{
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1;
    margin:0 !important;
    background:#EFEFEF !important;
    border:1px solid #E2E2E2 !important;
    border-radius:8px !important;
    box-shadow:none !important;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
  }
  #gcMakePopup .gc-make-icon img{
    width:46% !important;
    height:auto !important;
    object-fit:contain;
  }
  /* --- selected make: light green tile, green outline, corner check --- */
  #gcMakePopup .gc-make-card.active .gc-make-icon{
    background:#F2FAF2 !important;
    border:1.5px solid #4CAF50 !important;
  }
  #gcMakePopup .gc-make-card .gc-check{
    top:0 !important;
    left:0 !important;
    right:auto !important;
    width:34px !important;
    height:34px !important;
    border-radius:7px 0 0 0 !important;
    background:#4CAF50 !important;
    box-shadow:none !important;
    z-index:2;
  }
  #gcMakePopup .gc-make-card.active .gc-check{
    transform:none !important;
  }
  #gcMakePopup .gc-make-name{
    font-size:15px !important;
    font-weight:400 !important;
    margin:8px 0 8px !important;
    text-align:center;
  }
  #gcMakePopup .gc-make-card.active .gc-make-name{
    font-weight:700 !important;
  }
  /* --- Model button: full width pill, stays neutral when the make is selected --- */
  #gcMakePopup .gc-model-button,
  #gcMakePopup .gc-make-card.active .gc-model-button,
  #gcMakePopup .gc-model-button.active{
    width:100% !important;
    height:32px !important;
    padding:0 12px !important;
    justify-content:space-between !important;
    background:#fff !important;
    border:1px solid #D7D7D7 !important;
    box-shadow:none !important;
    font-size:13px !important;
    font-weight:400 !important;
  }
  #gcMakePopup .gc-arrow::after{
    width:6px !important;
    height:6px !important;
    border-right:1.5px solid #4CAF50 !important;
    border-bottom:1.5px solid #4CAF50 !important;
  }
  /* the span and its ::after were both flipping on open, which cancelled out */
  #gcMakePopup .gc-model-button.active .gc-arrow{
    transform:none !important;
  }
  #gcMakePopup .gc-model-button.active .gc-arrow::after{
    transform:translate(-50%,-25%) rotate(225deg) !important;
  }
  /* --- model list: dropdown under the button, two columns wide, flat --- */
  body #gcMakePopup .gc-make-card .gc-model-popup{
    position:absolute !important;
    top:calc(100% + 6px) !important;
    left:auto !important;
    right:auto !important;
    inset-inline-start:0 !important; /* logical, so Hebrew (RTL) mirrors correctly */
    width:calc(200% + 12px) !important;
    max-height:260px !important;
    transform:none !important;
    padding:6px 14px !important;
    border:1px solid #DDDDDD !important;
    border-radius:10px !important;
    box-shadow:0 4px 14px rgba(0,0,0,.06) !important;
  }
  /* third column: open towards the other side so it stays inside the popup */
  body #gcMakePopup .gc-make-card:nth-child(3n) .gc-model-popup{
    inset-inline-start:auto !important;
    inset-inline-end:0 !important;
  }
  #gcMakePopup .gc-model-item{
    padding:6px 0 !important;
    margin:0 !important;
    font-size:14px !important;
  }
  #gcMakePopup .gc-model-item input:checked{
    background-color:#4CAF50 !important;
    border-color:#4CAF50 !important;
  }
}

/* =====================================================
 * Merged from QA: new filter-bar selectors + phone fixes for the filter
 * popups (16px inputs to stop iOS zoom, Make & Model popup position).
 * ===================================================== */
 
/* Laptop widths: tighten the tags so the row fits on one line where possible */
@container gc-search (max-width: 1300px) {
    .tags { gap: 4px; }
    .tags .tag { padding: 5px 7px; font-size: 14px; }
    .tags-title { font-size: 14px; max-width: 105px; }
}

html[dir="rtl"]:has(.search-hero){scrollbar-gutter:stable;}

html:not([dir="rtl"]) body .filter-dropdown.car_type_open{align-items:flex-start;}

html:not([dir="rtl"]) body .filter-dropdown.car_type_open{padding-left:30px;}

html[dir="rtl"] body .filter-dropdown.car_type_open{padding-right:30px;}

body .filter-dropdown.car_type_open,body .filter-dropdown.car_type_open .span_selection{font-size:14px;}

body .filter-dropdown .buble_car{margin-inline-end:4px;}

html:not([dir="rtl"]) body .filter-dropdown .span_selection{padding-left:0;}

@media (max-width:768px){input,select,textarea{font-size:16px !important;}.search-hero input,.search-hero select,.search-hero textarea,#listingFilterPopup input,#listingFilterPopup select,#listingFilterPopup textarea,.select2-search--dropdown .select2-search__field{font-size:16px !important;}#gcMakePopup.active,#gcMakePopup .gc-make-card.gc-popup-open{transform:none !important;}#gcMakePopup .gc-model-popup.active{position:fixed !important;top:18vh !important;right:16px !important;bottom:auto !important;left:16px !important;width:auto !important;max-width:none !important;max-height:64vh !important;overflow-y:auto !important;transform:none !important;transition:none !important;animation:none !important;z-index:1002 !important;}}

/* =====================================================
 * From QA (25.09): Car Type popup - equal tile heights (correction 896)
 * ===================================================== */
/* correction 896: variable-length labels caused uneven item heights,
   not insufficient spacing. Reserve two lines for every label so
   single-word and two-word labels share the same item box height. */
.gc-car-popup-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.gc-car-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 6px;
}

.gc-car-name {
  white-space: normal;
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
  font-size: 13px;
  min-height: 2.4em;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .gc-car-popup-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}


/* ==========================================================
   Checkbox card (רמה גבוהה / ביצועים / ...) – keep the label
   text right next to its checkbox instead of space-between
   ========================================================== */
.checkbox-card .filter-check {
    justify-content: flex-start;
}
.checkbox-card .filter-check input {
    top: 0 !important;      /* was nudged up by -3px, misaligned with the text */
    margin: 0;
    flex-shrink: 0;
}

/* ==========================================================
   Price / range popups – readable header + values (2026-10-13)
   - title: label on the first line, selected value under it
   - numbers/units keep LTR order (₪69,000–₪1,600,000, 400 km)
   - range popup: drop the duplicate bubble under the handle and
     the stray "0 km" label next to the input
   ========================================================== */
#gcPricePopup .gc-price-title,
#gcRangePopup .gc-range-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.3;
}
#gcPricePopup .gc-price-current,
#gcRangePopup .gc-range-current {
    order: 2;
    unicode-bidi: isolate;
    white-space: nowrap;
}
/* price range stays RTL: low price on the right, high on the left */
#gcPricePopup .gc-price-current {
    direction: rtl;
}
/* range value follows the page: "160 ק״מ" in Hebrew, "160 km" in English */
#gcPricePopup .gc-price-field input,
#gcRangePopup .gc-range-field input {
    unicode-bidi: isolate;
    text-align: center;
}
#gcRangePopup .gc-range-bubble,
#gcRangePopup .gc-range-max {
    display: none !important;
}

/* ==========================================================
   "חדשות חמות" news grid – Hebrew reading order (2026-10-13)
   Bootstrap columns float left, so in RTL the first article was
   on the left. Float them right so article #1 is on the right.
   ========================================================== */
html[dir="rtl"] .gc-evzone-news .posts-grid > [class*="col-"] {
    float: right;
}

/* ==========================================================
   Car type field: keep the selected count "(1)" on the same line
   as "סוג רכב" (the field was a flex column, so the count, label
   and "בחר" each took their own row). (2026-10-13)
   ========================================================== */
body .filter-dropdown.car_type_open {
    display: block !important;
}
body .filter-dropdown.car_type_open .buble_car {
    display: inline;
    margin-inline-end: 4px;
}
body .filter-dropdown.car_type_open br {
    display: none;
}
body .filter-dropdown.car_type_open .span_selection {
    display: block;
}

/* ==========================================================
   Make & Model popup – compact like on QA (2026-10-13)
   A fixed 920px / 760px width stretched the 5 brand columns to
   ~140px each with big empty gaps. Let it size to its content.
   ========================================================== */
@media (min-width: 769px) {
    #gcMakePopup {
        width: auto !important;
    }
}

/* Release v1 (2026-10-14): hide "hot deals" + "new arrivals" checkboxes */
.checkbox-card .filter-check:has(input[data-value="hot_deal"]),
.checkbox-card .filter-check:has(input[data-value="new_arrival"]){display:none !important;}

/* Client batch 2026-10-15 */
/* 1. hide "recent searches" link under the filter buttons */
.filter-buttons .recent{display:none !important;}
/* 7. lifestyle row: title on the right (start of the RTL row) */
.filters-panel .tags .tags-title{order:-1;}

/* Make & Model popup — designer update 2026-10-15 (desktop):
   7 makes per row, fixed height, the "all makes" grid scrolls inside the popup */
@media (min-width: 769px) {
    #gcMakePopup.gc-make-popup{
        width: 720px !important;
        max-width: calc(100vw - 32px) !important;
        height: min(680px, calc(100vh - 120px));
        display: flex !important;
        flex-direction: column;
        box-sizing: border-box;
        padding: 18px 20px !important;
        /* always centered in the viewport (2026-10-15) */
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 100000 !important;
    }
    #gcMakePopup > *{ flex: none; }
    #gcMakePopup .gc-make-grid{
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 16px 12px !important;
    }
    #gcMakePopup .gc-make-grid:not(.popular_cars){
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding: 2px 4px 12px 2px;   /* room for the card borders + scrollbar */
        scrollbar-width: thin;
        scrollbar-color: #7cb342 transparent;
    }
    #gcMakePopup .gc-make-card{ width: auto !important; min-width: 0; }
}