/* Custom styles for range slider to make it look premium on webkit browsers */
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #0ea5e9;
    cursor: pointer;
    margin-top: -8px;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.4);
    border: 2px solid #020617;
    transition: transform 0.1s;
}
input[type=range]::-webkit-slider-thumb:active {
    transform: scale(1.1);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #1e293b;
    border-radius: 4px;
}
/* Style for the filled part of the track */
.slider-progress {
    background: linear-gradient(90deg, #0ea5e9 var(--value, 50%), #1e293b var(--value, 50%));
}

/* Toast animation */
@keyframes slideUpFade {
    0% { opacity: 0; transform: translate(-50%, 20px); }
    10% { opacity: 1; transform: translate(-50%, 0); }
    90% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -20px); }
}
.toast-animate {
    animation: slideUpFade 2.5s ease-in-out forwards;
}