/* Estilos personalizados para o controle deslizante */
.slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #22C55E; /* Cor verde vibrante */
    cursor: pointer;
    border: 2px solid white; /* Borda branca para destacar */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
}

/* Estilo da barra do controle deslizante (track) */
.slider-track {
    width: 100%;
    height: 8px;
    background: #A7F3D0; /* Verde claro para a barra */
    border-radius: 9999px; /* Borda arredondada */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 1;
}

/* Estilo da parte preenchida do controle deslizante */
.slider-filled-track {
    height: 8px;
    background: #22C55E; /* Verde vibrante para a parte preenchida */
    border-radius: 9999px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 1;
}

/* Estilos específicos para o input range para garantir que o thumb seja customizado */
/* Webkit (Chrome, Safari) */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #22C55E;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    margin-top: -8px; /* Ajuste para alinhar o polegar com a track */
}

/* Mozilla (Firefox) */
input[type=range]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #22C55E;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Outros navegadores (IE, Edge) - Pode exigir prefixos adicionais se necessário */
input[type=range]::-ms-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #22C55E;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Esconder a track padrão do input range e usar as customizadas */
input[type=range]::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
}
input[type=range]::-moz-range-track {
    background: transparent;
    border: none;
}
input[type=range]::-ms-track {
    background: transparent;
    border: none;
    color: transparent; /* Remove a cor da track para IE/Edge */
}