/* Fix Slider Touch Targets - Make them actually touchable */

/* Give sliders proper spacing and touch areas */
.sliders {
    padding: 10px 0;
}

.slider {
    /* Bigger touch area around each slider */
    padding: 16px 0;
    margin: 0;
    position: relative;
}

/* Make the actual input bigger for touch */
.slider input[type="range"] {
    width: 100%;
    height: 44px; /* Apple recommended minimum touch target */
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    cursor: pointer;
    /* Allow vertical scrolling but not horizontal on sliders */
    touch-action: pan-y;
    position: relative;
    z-index: 2;
}

/* Track - keep it thin visually but input is still big */
.slider input[type="range"]::-webkit-slider-track {
    height: 2px;
    background: rgba(244, 241, 232, 0.1);
    border-radius: 1px;
}

/* Thumb - make it bigger for mobile */
.slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(244, 241, 232, 0.8);
    border: 2px solid rgba(244, 241, 232, 0.2);
    margin-top: -13px;
    cursor: pointer;
}

/* Active state */
.slider input[type="range"]:active::-webkit-slider-thumb {
    background: rgba(244, 241, 232, 1);
    transform: scale(1.2);
}

/* Firefox support */
.slider input[type="range"]::-moz-range-track {
    height: 2px;
    background: rgba(244, 241, 232, 0.1);
    border-radius: 1px;
}

.slider input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(244, 241, 232, 0.8);
    border: 2px solid rgba(244, 241, 232, 0.2);
    cursor: pointer;
}

/* Label spacing */
.slider label {
    display: block;
    margin-bottom: 8px;
}

/* Stop panel from scrolling when using sliders */
.panel-content {
    /* Allow touch scrolling but contain it */
    overscroll-behavior: contain;
}