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;
}

/* Hebrew: the box is laid out LTR (header-equipment.php forces direction:ltr on
   .filters-grid) with text-align:right, so the chevron above is pinned to the box's
   LEFT edge and the text to its RIGHT edge. Nothing reserves the chevron's strip on
   the left, and that left edge moves when the car-type popup hides the page scrollbar
   (body overflow:hidden; the RTL scrollbar sits on the left), so the chevron slides
   while the text stays put. Reserve the strip; keep the scrollbar gutter stable. */
html[dir="rtl"] .filter-dropdown {
    padding-left: 30px; /* html[dir] outranks the plugin's .filter-dropdown.car_type_open { padding-left:20px } */
}

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

.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-end;
  gap: 2px;
}

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

/* flex-end above is the Hebrew layout (the grid is forced LTR there, so the
   end is the right edge). In English it pushed "Car Type / Select" to the
   right edge while every other filter reads from the left (task 14095,
   correction 879). Line the text up with the other filters' text. */
html:not([dir="rtl"]) body .filter-dropdown.car_type_open {
  align-items: flex-start;
}

/* The other filters wrap their text in .filter-text, which adds 10px, so
   their text starts 31px in. Car Type has no wrapper and sat 10px closer to
   the edge (task 14095, correction 886). Give it the same inset. */
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; /* 13px before, the other filters use 14px */
}
body .filter-dropdown .buble_car {
  margin-inline-end: 4px;
}

/* After Apply or Reset the scripts rewrite a filter's label as
   "Label<br><span class=span_selection>Select</span>", and the span's 15px
   left padding then indents "Select" under the label in English. */
html:not([dir="rtl"]) body .filter-dropdown .span_selection {
  padding-left: 0;
}

/* 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: #18B537;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  /* correction 897: was pointer-events:none, so the icon looked
     clickable but swallowed nothing (or leaked to elements under it) --
     JS now binds a click handler here to run the same search as
     .btn-filter, so the icon must actually receive the click. */
  cursor: pointer;
  border: solid 1px #13912C;
}

/* 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;
}

/* 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;
  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;
  padding-left: 10px;
  padding-right: 10px;
}

.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: 100px;
  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;
}

@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;
  }
}

/* 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;
	}
}

/* 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;
  }
}