.filter-select-dropdown {
    border-radius: 0px !important;
}




.search-cars__select {
    height: 3.5rem;
}


.flat-tabs .menu-tab-style1 li,
.flat-tabs-style .menu-tab-style1 li {
    padding: 0 3px 6px;
}

.flat-tabs .menu-tab-style1 li:nth-child(2) {
  	margin-left:16px;
}

#main-nav .menu>li>a {
    padding: 9px 0;
}

.title-xy {
    font-weight: 700;
    font-size: 36px !important;
    line-height: 120% !important;
    letter-spacing: 1px !important;
    text-align: center;
}

.car-box {
    border-radius: 100cqmax;
    border: 0px;
    background-color: #f0f2f1;
    color: #141817;
    font-weight: 700;
    padding: 0.5rem 1rem;
}

.filter-brands-by-alphabet .brand-item {
    border: none;
}

.shortcode-brands .col:hover h6 {
    background-color: rgb(11, 11, 28);
}

.shortcode-brands .col:hover .brand-item {
    background: rgb(244, 244, 244);
}

.shortcode-brands .col:hover span {
    color: white;
}

.brand-name span {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.03125rem;
}

.filter-brands-by-alphabet .brand-item {
    border-radius: 0px;
}

.brand-item:hover img {
    filter: unset;
}

.type-name span {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.03125rem;
}

.type-item {
    border-radius: 0px;
}

.shortcode-car-types .col:hover .type-item {
    background: rgb(244, 244, 244);
}

[class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

.card-box {
    border-radius: 10px;
}

.card-box .image {
    border-radius: 10px 10px 0 0;
}

.card-box .image .card--img {
    border-radius: 10px 10px 0 0
}

/* .listing-sidebar-right .listing-sidebar-right__content {
    width: calc(100% - 360px) !important;
} */


/* ---------- CONTENEUR PRINCIPAL ----------__________________________________________________ */
.search-container {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

/* ---------- BARRE DE RECHERCHE ---------- */
.search-bar {
    background: #ffffff;
    border-radius: 60px;
    padding: 0px 6px 0px 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    position: relative;
    width: 100%;
}

.search-bar:focus-within {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* ---------- WRAPPER INPUT ---------- */
.input-wrapper-search {
    flex: 1;
    position: relative;
    min-height: 56px;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: text;
    width: 100%;
}

/* ---------- INPUT ---------- */
.input-wrapper-search .search-input {
    width: 100%;
    border: none;
    padding: 0px 6px 0px 16px;
    font-size: 1.05rem;
    font-weight: 400;
    color: #1a2a3a;
    background: transparent;
    outline: none;
    position: relative;
    z-index: 2;
    caret-color: #0a2540;
    box-shadow: none;
}

.input-wrapper-search .search-input::placeholder {
    color: transparent;
}

/* ---------- PLACEHOLDER ANIMÉ ---------- */
.animated-placeholder {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #9aabba;
    font-size: 1.05rem;
    font-weight: 300;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95%;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: text;
}

/* ---------- PLACEHOLDER EN MODE FOCUS ---------- */
.animated-placeholder.focused {
    color: #9aabba;
}

.animated-placeholder.focused .try-badge {
    color: #9aabba;
    font-size: 0.9rem;
    font-weight: unset;
}

/* ---------- CURSEUR CLIGNOTANT (CACHÉ PAR DÉFAUT) ---------- */
.placeholder-cursor {
    display: none;
    width: 2px;
    height: 1.1em;
    background: #2a6a8e;
    margin-left: 2px;
    animation: blink 0.8s step-end infinite;
    vertical-align: text-bottom;
}

/*  CURSEUR VISIBLE UNIQUEMENT EN MODE FOCUS */
.animated-placeholder.focused .placeholder-cursor {
    display: inline-block !important;
}

/*  CACHER LE CURSEUR QUAND L'INPUT EST FOCUS OU REMPLI */
.input-wrapper-search .search-input:focus~.animated-placeholder .placeholder-cursor,
.input-wrapper-search .search-input:not(:placeholder-shown)~.animated-placeholder .placeholder-cursor {
    display: none !important;
}

.input-wrapper-search .search-input:focus {
    box-shadow: none;
    border: none;
    padding-left: 0px;
}

.input-wrapper-search .search-input:active {
    box-shadow: none !important;
    border: none !important;
    padding-left: 0px;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ---------- BADGE "ESSAYER" ---------- */
.try-badge {
    display: inline-block;
    color: #9aabba;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
    letter-spacing: -0.2px;
    transition: color 0.3s ease;
}

/* ---------- CARROUSEL ---------- */
.carousel-wrapper-search {
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 32px;
    position: relative;
    flex: 1;
    min-width: 60px;
}

.carousel-track {
    display: flex;
    flex-direction: column;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    width: 100%;
}

.carousel-item {
    flex-shrink: 0;
    height: 32px;
    display: flex;
    align-items: center;
    font-size: 0.92rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
    transition: color 0.3s ease;
}

.carousel-item .item-text {
    padding: 2px 0;
    border-radius: 30px;
    transition: color 0.3s ease, background 0.3s ease;
    color: #9aabba;
    font-size: 0.9rem;
}

.carousel-item.active .item-text {
    color: #9aabba;
    background: rgba(42, 106, 142, 0.06);
    padding: 2px 12px;
}

/* ---------- CACHER LE CARROUSEL EN MODE FOCUS ---------- */
.animated-placeholder.focused .carousel-wrapper-search {
    display: none;
}



/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
    .search-bar {
        padding: 8px 8px 8px 18px;
        border-radius: 40px;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }

    .input-wrapper-search {
        min-height: 44px;
        width: 100%;
        order: 0;
    }

    .input-wrapper-search .search-input {
        font-size: 0.95rem;
        padding: 10px 4px 10px 0;
    }

    .animated-placeholder {
        font-size: 0.95rem;
    }

    .carousel-wrapper-search {
        height: 28px;
    }

    .carousel-item {
        height: 28px;
        font-size: 0.8rem;
    }

    .carousel-item.active .item-text {
        padding: 1px 10px;
    }

    .try-badge {
        font-size: 0.85rem;
    }
  

}

@media (max-width: 480px) {
    .search-bar {
        padding: 6px 6px 6px 14px;
        border-radius: 30px;
        gap: 4px;
        width: 100%;
    }

    .input-wrapper-search {
        min-height: 38px;
    }

    .input-wrapper-search .search-input {
        font-size: 0.85rem;
        padding: 8px 2px 8px 0;
    }

    .animated-placeholder {
        font-size: 0.85rem;
        gap: 2px;
    }

    .carousel-wrapper-search {
        height: 24px;
    }

    .carousel-item {
        height: 24px;
        font-size: 0.7rem;
    }

    .carousel-item.active .item-text {
        padding: 1px 8px;
    }

    .try-badge {
        font-size: 0.75rem;
    }
  
    .title-xy {
    	font-size:28px!important;
  }
  .flat-tabs .menu-tab-style1 li{
  	margin:auto;
  }
}

/* ---------- MODE SOMBRE ---------- */
@media (prefers-color-scheme: dark) {
    .search-bar {
        background: #1a2a3a;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
    }

    .input-wrapper-search .search-input {
        color: #e8eef2;
        caret-color: #6aaaee;
    }

    .animated-placeholder {
        color: #6a7a8a;
    }

    .try-badge {
        color: #6a7a8a;
    }

    .carousel-item {
        color: #6a7a8a;
    }

    .carousel-item.active .item-text {
        color: #6a7a8a;
        background: rgba(42, 106, 142, 0.15);
    }

    .animated-placeholder.focused {
        color: #6aaaee;
    }

    .animated-placeholder.focused .try-badge {
        color: #6aaaee;
    }

    .placeholder-cursor {
        background: #6aaaee;
    }

    .search-btn {
        color: #6aaaee;
    }

    .search-btn:hover:not(:disabled) {
        color: #8ac4ee;
    }

}

/* ---------- ANIMATION D'APPARITION ---------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.search-bar {
    animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}


/* ---------- SECTION : SEPARATEUR ---------- */
.search-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    /* padding: 22px 0 1.2rem 0; */
    flex-wrap: wrap;
}



.divider-badge i {
    font-size: 0.9rem;
    color: #2a6df4;
}

.listing-sidebar-right .listing-sidebar-right__filter {
    width: 330px
}

.filter-sidebar-popup .filter-select-dropdown {
    box-shadow: unset;
    border-top: 1px solid #e0e4e3;
}

.bases {
    padding: 20px 28px 0 10px !important;
}

.bases .search-cars__label {
    left: unset;
}


.h7,
h7 {
    font-size: 16px;
    line-height: 1.44;
}

.mb-18 {
    margin-bottom: 8px;
}


.header.header-style-1.bg-white.sticky-bar{
  	box-shadow: 0 .1px 11px 2px rgba(68,89,88,.11);
}