/* Styles pour les sliders doubles - VERSION SIMPLIFIÉE */

/* Style de base pour tous les range inputs */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
}

/* Piste du slider - WebKit/Blink */
input[type="range"]::-webkit-slider-track {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    border: none;
}

/* Curseur MIN - Vert foncé - WebKit/Blink */
input[type="range"].range-slider-min::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1a4436;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(26, 68, 54, 0.3);
    transition: all 0.15s ease-in-out;
}

input[type="range"].range-slider-min::-webkit-slider-thumb:hover {
    background: #25673f;
    transform: scale(1.15);
    box-shadow: 0 4px 10px rgba(26, 68, 54, 0.5);
}

input[type="range"].range-slider-min::-webkit-slider-thumb:active {
    background: #2f7a4f;
    transform: scale(1.1);
}

/* Curseur MAX - Orange - WebKit/Blink */
input[type="range"].range-slider-max::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d97706;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
    transition: all 0.15s ease-in-out;
}

input[type="range"].range-slider-max::-webkit-slider-thumb:hover {
    background: #f59e0b;
    transform: scale(1.15);
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.5);
}

input[type="range"].range-slider-max::-webkit-slider-thumb:active {
    background: #fbbf24;
    transform: scale(1.1);
}

/* Piste du slider - Firefox */
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    border: none;
}

/* Curseur MIN - Vert foncé - Firefox */
input[type="range"].range-slider-min::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1a4436;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(26, 68, 54, 0.3);
    transition: all 0.15s ease-in-out;
}

input[type="range"].range-slider-min::-moz-range-thumb:hover {
    background: #25673f;
    transform: scale(1.15);
    box-shadow: 0 4px 10px rgba(26, 68, 54, 0.5);
}

input[type="range"].range-slider-min::-moz-range-thumb:active {
    background: #2f7a4f;
    transform: scale(1.1);
}

/* Curseur MAX - Orange - Firefox */
input[type="range"].range-slider-max::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d97706;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
    transition: all 0.15s ease-in-out;
}

input[type="range"].range-slider-max::-moz-range-thumb:hover {
    background: #f59e0b;
    transform: scale(1.15);
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.5);
}

input[type="range"].range-slider-max::-moz-range-thumb:active {
    background: #fbbf24;
    transform: scale(1.1);
}

/* Focus states */
input[type="range"]:focus {
    outline: none;
}

input[type="range"].range-slider-min:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(26, 68, 54, 0.2), 0 2px 6px rgba(26, 68, 54, 0.3);
}

input[type="range"].range-slider-min:focus::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(26, 68, 54, 0.2), 0 2px 6px rgba(26, 68, 54, 0.3);
}

input[type="range"].range-slider-max:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.2), 0 2px 6px rgba(217, 119, 6, 0.3);
}

input[type="range"].range-slider-max:focus::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.2), 0 2px 6px rgba(217, 119, 6, 0.3);
}

/* Désactiver le remplissage par défaut sur Firefox */
input[type="range"]::-moz-range-progress {
    background: transparent;
}