/* Styles pour les filtres de recherche - Luxshope */

/* Styles pour le slider de prix */
.price-slider-container input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    outline: none;
}

/* Track (rail) */
.price-slider-container input[type="range"]::-webkit-slider-track {
    background: #e5e7eb;
    height: 6px;
    border-radius: 3px;
}

.price-slider-container input[type="range"]::-moz-range-track {
    background: #e5e7eb;
    height: 6px;
    border-radius: 3px;
    border: none;
}

/* Thumbs (curseurs) */
.price-slider-container .slider-min::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #f97316;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin-top: 13px; /* Ajuster le centrage */
}

.price-slider-container .slider-max::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #ea580c;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin-top: 13px; /* Ajuster le centrage */
}

.price-slider-container .slider-min::-moz-range-thumb {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #f97316;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: none;
}

.price-slider-container .slider-max::-moz-range-thumb {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #ea580c;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: none;
}

/* Assurer que les sliders ne se chevauchent pas */
.price-slider-container .slider-min {
    z-index: 1;
}

.price-slider-container .slider-max {
    z-index: 2;
}

/* Styles spécifiques pour le drawer mobile */
#filters-drawer .price-slider-container {
    width: 100%;
    margin-bottom: 1rem;
}

/* Améliorer l'alignement des valeurs de prix dans le drawer */
#filters-drawer .price-slider-container .flex.justify-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0.75rem;
}

/* S'assurer que le container du slider occupe toute la largeur dans le drawer */
#filters-drawer .price-slider-container .relative {
    width: 100%;
    margin-bottom: 1rem;
}

/* Alignement des inputs range dans le drawer */
#filters-drawer .price-slider-container input[type="range"] {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Style pour le bouton "Aller" dans le drawer */
#filters-drawer .price-slider-container button {
    width: 100%;
    text-align: center;
}

/* Corrections spécifiques pour mobile */
@media (max-width: 768px) {
    #filters-drawer .price-slider-container {
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }
    
    #filters-drawer .price-slider-container .flex {
        margin-bottom: 0.75rem;
    }
    
    #filters-drawer .price-slider-container .relative {
        margin-bottom: 1rem;
    }
}