/* ===================================================
   1. Language switcher (desktop dropdown)
   =================================================== */

.language-switcher{
    position:relative;
    display:flex;
    align-items:center;
}

.language-current{
    display:flex;
    align-items:center;
    gap:8px;

    background:none;
    border:none;

    cursor:pointer;

    font-size:14px;
    font-weight:600;

    padding:0;
}

.language-current img{
    width:20px;
    height:14px;
    object-fit:cover;
    border-radius:2px;
}

.language-current i{
    font-size:11px;
    transition:.25s;
}

.language-switcher.opened .language-current i{
    transform:rotate(180deg);
}

.language-dropdown{

    position:absolute;
    top:calc(100% + 12px);
    right:0;

    min-width:90px;

    background:#fff;

    border:1px solid #e5e5e5;
    border-radius:10px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:.25s;

    z-index:99999;
}

.language-switcher.opened .language-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.language-dropdown a{

    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 14px;

    color:#222;
    text-decoration:none;

    transition:.15s;
}

.language-dropdown a:hover{
    background:#f7f7f7;
}

.language-dropdown a.active{
    font-weight:700;
}

.language-dropdown img{
    width:20px;
    height:14px;
    object-fit:cover;
    border-radius:2px;
}


/* ===================================================
   2. Header nav / main-menu (desktop dropdown menu)
   =================================================== */

ul li {
  margin-bottom: 0px;
}

.header-nav{
    display:flex;
    align-items:center;
}

.main-menu{
    display:flex;
    gap:14px;
    list-style:none;
    margin:0;
    padding:0;
}

.main-menu li{
    position:relative;
    flex-shrink:0;
}

.main-menu a{
    display:block;
    padding:10px 4px;
    color:#000;
    text-decoration:none;
    white-space:nowrap;
}


/* dropdown */

.main-menu .sub-menu{
    position:absolute;
    top:100%;
    left:0;

    background:#fff;
    border:1px solid #eee;

    min-width:200px;

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);
    transition:.2s;

    list-style:none;
    padding:10px 0;
}

.main-menu .sub-menu li a{
    padding:8px 15px;
}

.main-menu li:hover > .sub-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}


/* ===================================================
   3. Mobile menu panel + submenu arrows
   =================================================== */

.mobile-menu{
    position:fixed;
    top:0;
    right:-320px;
    width:320px;
    height:100%;
    background:#fff;
    z-index:1000;
    transition:.3s;
    overflow:auto;
}

.mobile-menu.active{
    right:0;
}

/* Without an explicit width, this flex column shrinks to fit its content
   instead of filling the panel (confirmed live: it measured ~233px inside a
   320px-wide #mobileMenu with nothing else constraining it) — box-sizing
   border-box keeps its own padding/border inside that 100%, which is what
   makes each menu item's bottom border look like it stretches the whole row
   instead of stopping ~30% short. */
.mobile-nav{
    width: 100%;
    box-sizing: border-box;
}

.mobile-menu-list{
    list-style:none;
    padding:20px;
    box-sizing: border-box;
}

.mobile-menu-list li{
    border-bottom:1px solid #eee;
}

.mobile-menu-list a{
    display:block;
    padding:12px 0;
    text-decoration:none;
    color:#000;
}

.mobile-menu-list .sub-menu{
    display:none;
    padding-left:15px;
}


.main-menu li.menu-item-has-children > a {
    position: relative;
    padding-right: 20px; /* место для стрелки */
}

/* стрелка */
.main-menu li.menu-item-has-children > a::after {
    content: "\f107"; /* Font Awesome chevron-down */
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s;
    font-size: 10px;
}

/* при hover поворот стрелки */
.main-menu li.menu-item-has-children:hover > a::after {
    transform: translateY(-50%) rotate(180deg);
}





.mobile-menu-list li.menu-item-has-children > a {
    position: relative;
    padding-right: 25px; /* место для стрелки */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* стрелка */
.mobile-menu-list li.menu-item-has-children > a::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    transition: transform 0.3s;
}

/* когда подменю открыто */
.mobile-menu-list li.menu-item-has-children.open > a::after {
    transform: rotate(180deg);
}

@media (max-width: 1115px) {
    .header-left-group,
    .header-search-group {
        display: none !important;
    }
}

.mobile-menu-lang {
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
}

/* .language-switcher is a flex DIV, but on desktop it's a flex ITEM inside
   .header-left-group, so it naturally shrinks to fit its own content (the
   globe/HE button). Inside .mobile-menu-lang it's a plain block child instead,
   so without this it stretches to the full width of the mobile panel — and
   then the global ".language-dropdown{ left:0 !important }" rule further
   down (written for the desktop header, which is forced direction:ltr)
   anchors the dropdown to the far edge of that oversized box, landing far
   away from the button instead of right under it. inline-flex makes the
   switcher hug its own content here too. */
.mobile-menu-lang .language-switcher {
    display: inline-flex;
}

/* Where the dropdown should re-anchor depends on which side of the row the
   button actually sits on, which flips with page direction (there's no
   forced direction:ltr in the mobile menu the way there is on the desktop
   header). On an RTL page (Hebrew) the switcher sits at the visual right of
   the row, so the dropdown needs right:0 to stay flush with it. On an LTR
   page (English) the switcher already sits at the left, which is exactly
   what the global left:0 rule above already gives it — overriding that for
   LTR too was the bug just reported: it pushed the dropdown further left
   than the button and off the edge of the panel. So this override is scoped
   to RTL pages only; LTR pages fall through to the existing global rule
   unchanged. */
html[dir="rtl"] .mobile-menu-lang .language-dropdown {
    left: auto !important;
    right: 0 !important;
}

/* .header-search is hidden globally at <=1115px (see the rule above and the
   legacy ".header-nav, .header-link, .header-search, .language-selector span"
   rule further down) so the desktop search box collapses to just its icon
   button. The mobile-menu copy reuses the same .header-search class for its
   styling, so it gets caught by that same rule and needs to be forced back
   on here, scoped to just the mobile panel. */
#mobileMenu .header-search {
    display: flex !important;
}

.mobile-menu-search { padding: 12px 20px; }
.mobile-menu-search .header-search { position: relative; width: 100%; }
.mobile-menu-search .header-search input { width: 100%; box-sizing: border-box; }

.mobile-menu-liked-cars {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 20px; color: #000; text-decoration: none;
    font-size: 14px; font-weight: 600;
    border-top: 1px solid #eee; border-bottom: 1px solid #eee;
}

.mobile-menu-profile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
}

.mobile-menu-profile-label {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    order: 2;
}

/* The profile widget itself comes from the parent theme's own
   partials/header/parts/profile.php, which we don't edit directly (it would
   be wiped on a theme update). Two of its own classes fight our mobile-menu
   layout: "pull-right" floats it (floats don't line up in a flex row, which
   is why it looked disconnected from the label text next to it), and
   "hdn-767" is the parent theme's own "hide below 767px" utility class,
   which is exactly why it rendered as a bare, oddly-placed icon here. Both
   are overridden, scoped to just this mobile-menu instance. */
.mobile-menu-profile .pull-right {
    float: none !important;
    display: flex !important;
    align-items: center;
}

.mobile-menu-profile .hdn-767 {
    display: flex !important;
}

.mobile-menu-profile .lOffer-account-unit,
.mobile-menu-profile .lOffer-account {
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ===================================================
   4. Misc: logo, footer, search icon, legacy header spacing
   =================================================== */

.logo_main {
  max-height: 35px !important;
}

.stm-layout-header-equipment .header-nav {
  margin-bottom: 0px !important;
}


.stm-layout-header-equipment #header .header-listing {
  padding: 0px 0 0;
}



.header-nav a {
  color: #000;

}



.footer {
  background-color: #212121;
  margin-top: 0px;
}


.footer-bottom {
  background-color: #212121;
color: #FFFC;
  font-size: 15px;
  line-height:25px;
}



.footer-container {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.footer-left p {
  font-size: 15px;
  color: #FFFC;
  line-height:25px;
}

.footer-links a {
  color: #FFFC;
  font-size: 15px;
  line-height:25px;

}



#wrapper #header .header-listing.stm-fixed, .stm-layout-header-car_magazine #wrapper #header .header-magazine.header-magazine-fixed.stm-fixed {
  padding-bottom: 0px !important;
}

.container.header-inner-content {
  display: none !important;
}


.header-container {
  padding: 5px 20px;
}


#footer {
  display: none;
}


.motors-elementor-arrow-banner .stm-content-arrow-wrap {

  height: 510px !important;
}


.search-icon-btn {
  color: #5b6771 !important;
}


@media (max-width: 1115px) {
  .search-icon-btn {
    display: block;
  }
}


@media (max-width: 1115px) {
  .header-nav, .header-link, .header-search, .language-selector span {
    display: none;
  }
}



.header-search i {
  left: 12px !important;
}

.header-search input{
  width: 100%;
  box-sizing: border-box;
  padding-left: 40px;
  border: 1px solid #B0B0B0;
  background-color: #fff;
  color:#555555;
  font-size:14px;

}

.header-search input::placeholder{
    text-align: right;
}

.header-search i {
  position: absolute;
  left: 12px;
  color: var(--gray-400);
  pointer-events: none;
}


.header-search i {
  position: absolute;
  left: 5px !important;

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #18B537;
  color: #fff;

  border-radius: 50%;

  font-size: 12px;

  pointer-events: none;
  border: solid 1px #13912C;
}


@media (max-width: 991px) {
  .stm-layout-header-equipment #header .lOffer-account-unit {
    margin-right: 0px !important;
    margin-left: 0px !important;
  }
}

@media (max-width: 1150px) {
  .stm-layout-header-equipment #header .lOffer-account-unit .lOffer-account {
    margin-right: 0px;
  }
}

.stm-layout-header-equipment #header .lOffer-account-unit .lOffer-account:hover {
  color: #18b537;
}


@media (max-width: 1115px) {
  .mobile-menu-btn {
    display: block;
  }
}


.footer-container {
  padding-bottom: 20px !important;
}
.footer-container {
    text-align: right;
}

.footer-links a {
  color: #FFFC;
  font-size: 15px;
  line-height: 35px;
}

/*
.stm-template-listing_one_elementor input[type="text"] {
  text-align: right;
}
*/


/* ===================================================
   5. Header search autocomplete results dropdown
   =================================================== */

.header-search{
    position:relative;
    flex:1 1 auto;
    width:100%;
}

#home_search_results{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;
    overflow:hidden;
    display:none;
    z-index:999999;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
}

.search-car{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    text-decoration:none;
    color:#111;
    border-bottom:1px solid #eee;
}

.search-car:hover{
    background:#f7f7f7;
}

.search-car img{
    width:70px;
    height:50px;
    object-fit:contain;
    flex-shrink:0;
}

.search-car span{
    font-size:14px;
    font-weight:600;
}

.search-empty{
    padding:15px;
    color:#888;
}

.search-car strong{
    color:#17B036;
}


/* ===================================================
   6. GC header layout (flex groups, RTL overrides)
   =================================================== */

/* ===== GC header layout: [language / account / liked cars] · [search] · [menu + logo] ===== */

.gc-header-container{
    max-width:1364px !important;
    width:100%;
    box-sizing:border-box;
    margin-inline:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between;
    gap:20px;

    /* Keep the header's physical layout identical on Hebrew pages: without this,
       html[dir="rtl"] flips the flex main axis and logo/menu (last in the markup)
       would jump to the left while language/account/liked cars move to the right.
       Pinning direction:ltr here keeps group order == visual order in both languages
       (this is what the old "FORCE EN HEADER LAYOUT" order:n rules used to do). */
    direction:ltr !important;
}

.header-left-group{
    display:flex;
    align-items:center;
    gap:20px;
}

.header-liked-cars{
    display:flex;
    align-items:center;
    gap:6px;
    color:#000;
    text-decoration:none;
    font-size:14px;
    font-weight:400;
    white-space:nowrap;
}

.header-search-group{
    display:flex;
    align-items:center;
    position:relative;
    flex:1 1 auto;
    min-width:0;
    max-width:360px;
}

.header-right-group{
    display:flex;
    align-items:center;
    gap:20px;
}

/* dropdown языка открывать вправо */
.language-dropdown{
    left:0 !important;
    right:auto !important;
}

/* desktop */
@media (min-width:1116px){

    .gc-header-container{
        flex-direction:row !important;
    }
}

/* mobile не трогаем */
@media (max-width:1115px){

    .gc-header-container{
        justify-content:space-between;
    }

    .header-left-group{
        margin-left:0;
    }

    .header-nav{
        display:none !important;
    }
}
/*
.header-search input {
    direction: rtl;
    text-align: right;
}
*/

/*
.header-search input {
  padding-right: 50px;
}
*/


.header-search i {
  right: 5px;
}

/* RTL */
html[dir="rtl"] .header-search input {
    padding-right: 50px;
}

html[dir="rtl"] .checkbox-card {
    direction: rtl;
}

html[dir="rtl"] .filters-grid {
    direction: ltr    
}


html[dir="rtl"] .filter-dropdown {
  text-align: right;
}


html[dir="rtl"] .card-footer {
    direction: ltr;
}

html[dir="ltr"] .card-footer {
    direction: rtl;
}



html[dir="ltr"] .vs-header {
   direction: rtl;
}


html[dir="rtl"] .vs-header {
   direction: ltr;
}




html[dir="ltr"] .elementor-heading-title {
   direction: ltr;
}


html[dir="rtl"] .elementor-heading-title {
   direction: ltr;
}



html[dir="ltr"] .footer {
   direction: rtl;
}


html[dir="rtl"] .footer {
   direction: ltr;
}




html[dir="ltr"] .footer-links {
  text-align: left;
}

html[dir="ltr"] .footer-container {
  text-align: left;
}




html[dir="rtl"] #carsPagination {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  direction: ltr;
  display: flex;
  justify-content: center;
  direction: ltr;
}






html[dir="ltr"] .cars-sort {
   direction: rtl;
}


html[dir="rtl"] .cars-sort {
   direction: ltr;
}


html[dir="rtl"] .cars-sort .select2-container {
  padding-left: 20px;
}


html[dir="ltr"] .search-box input {
  text-align: left !important;
}

html[dir="rtl"] .search-box input {
  margin-left: 20px;
}

/* LTR 
html[dir="ltr"] .header-search input {
    padding-left: 50px;
}
*/


.elementor-93117 .elementor-element.elementor-element-292bdd9 .motors-elementor-arrow-banner .stm-content-arrow-wrap .centered-banner-content-listing .inner h1 {
  direction: ltr;
}


/*
.lfp-field.lfp-range {
  direction: ltr;
}
*/

.noui-minmax {
  direction: ltr;
}

.lfp-slider-labels {
  direction: ltr;
}

/* Comparison Chart menu badge */
.gc-menu-label { position: relative; display: inline-block; }
.gc-compare-count {
  position: absolute; top: -8px; right: -12px; left: auto;
  min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
  border-radius: 9px; background: #E5322D; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  pointer-events: none;
}
html[dir="rtl"] .gc-compare-count { left: -12px; right: auto; }
.gc-compare-count[hidden] { display: none; }

/* "Cars I liked" header link: green heart + count on every page */
.header-liked-cars.has-liked i {
  color: #6CB243;
  font-weight: 900;
}
.header-liked-cars .gc-liked-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: 4px;
  border-radius: 9px; background: #6CB243; color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1;
}
.header-liked-cars .gc-liked-count[hidden] { display: none; }
.gc-compare-count[hidden] { display: none; }

/* ==========================================================
   Hide the HE/EN language switcher (desktop + mobile menu)
   The site goes live in Hebrew only for now. Delete this block
   to bring the switcher back. (2026-10-13)
   ========================================================== */
.header-left-group .language-switcher,
.mobile-menu-lang {
    display: none !important;
}

/* Contact form (CF7) on Hebrew pages: columns follow RTL order (2026-10-15) */
html[dir="rtl"] .wpcf7-form .row > [class*="col-"]{float:right;}
html[dir="rtl"] .wpcf7-form .contact-us-label{text-align:right;}

/* Elementor accordions on Hebrew pages (FAQ): text gets the same inner padding on the right as the "+" icon has on the left (2026-10-15) */
html[dir="rtl"] .elementor-accordion .elementor-tab-title{padding-right:20px !important;}

/* About page (93172): narrow, readable text column (2026-10-16).
   search-hero.css forces boxed Elementor sections to 100% with !important, so override here. */
.elementor-93172 .elementor-element-51f601c > .elementor-container{max-width:820px !important;}

/* About page: Sparky beside the "GREEN CATALOG" paragraph (2026-10-16) */
.elementor-93172 .gc-about-sparky{float:left;width:160px;height:auto;margin:0 24px 8px 0;}
.elementor-93172 .gc-about-name::after{content:"";display:block;clear:both;}
@media (max-width:767px){ .elementor-93172 .gc-about-sparky{width:110px;margin:0 14px 6px 0;} }