/* Dual Range Slider Styling - Improved UX */
.range-slider {
    position: relative;
    width: 100%;
    height: 8px;
    background: #e5e5e5;
    border-radius: 5px;
    cursor: pointer;
}

    .range-slider input[type=range] {
        position: absolute;
        width: 100%;
        height: 8px;
        background: none;
        pointer-events: none;
        -webkit-appearance: none;
        z-index: 3;
    }

        .range-slider input[type=range]::-webkit-slider-thumb {
            pointer-events: all;
            width: 26px; /* bigger clickable area */
            height: 26px;
            border-radius: 50%;
            background: #a10f2b;
            border: 3px solid white;
            box-shadow: 0 0 3px rgba(0,0,0,0.2);
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            -webkit-appearance: none;
        }

            .range-slider input[type=range]::-webkit-slider-thumb:hover {
                transform: scale(1.2);
                box-shadow: 0 0 6px rgba(161, 15, 43, 0.7);
            }

        .range-slider input[type=range]::-moz-range-thumb {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #a10f2b;
            border: 3px solid white;
            cursor: pointer;
            transition: transform 0.15s ease;
        }

            .range-slider input[type=range]::-moz-range-thumb:hover {
                transform: scale(1.2);
            }

    .range-slider .range-fill {
        position: absolute;
        height: 8px;
        background: #a10f2b;
        border-radius: 5px;
        top: 0;
        left: 0;
        z-index: 1;
    }

    /* Make entire track area more tappable */
    .range-slider::before {
        content: "";
        position: absolute;
        top: -6px;
        bottom: -6px;
        left: 0;
        right: 0;
        z-index: 0;
    }