/* Lightweight Range Slider Styles - Replacement for jQuery UI slider */
#slider-range {
    position: relative;
    height: 4px;
    background: var(--gray-200, #e5e7eb);
    border-radius: 2px;
    margin: 8px 0;
    cursor: pointer;
}

.range-slider-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 2px;
}

.range-slider-range {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: hsl(var(--main-600, 196 69% 36%));
    border-radius: 2px;
    transition: 0.2s linear;
}

.range-slider-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: hsl(var(--main-600, 196 69% 36%));
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    cursor: grab;
    transition: transform 0.2s linear, box-shadow 0.2s linear;
    z-index: 2;
    border: 0;
    outline: 0;
}

.range-slider-handle:hover,
.range-slider-handle:focus {
    transform: translateY(-50%) scale(1.3);
    outline: none;
}

.range-slider-handle.active {
    transform: translateY(-50%) scale(1.3);
    box-shadow: 0px 0px 12px 4px rgba(149, 149, 149, 0.25);
    cursor: grabbing;
}

.range-slider-handle:focus-visible {
    outline: 2px solid hsl(var(--main-600, 196 69% 36%));
    outline-offset: 2px;
}