/**
 * Our overrides on top of filters.css.
 *
 * Kept in a separate file so filters.css stays a pristine copy and can be
 * re-synced or replaced wholesale (see HANDOVER.md §2g on licensing).
 */

/* ---------------------------------------------------------------------
 * Price slider: bigger cursor target.
 *
 * The inherited design draws an 18x18 handle on a 10px track. That reads
 * fine but is a small mouse target and a poor touch target. These rules
 * add an INVISIBLE hit area around the handle — nothing about the visible
 * design changes.
 *
 * The base stylesheet sets `.noUi-handle:after { display: none }` to hide
 * noUiSlider's grip lines, so the pseudo-element is free to reuse here and
 * has to be switched back on explicitly.
 * ------------------------------------------------------------------- */

.ssf_range_slider.rounded .noUi-handle::after,
.ssf_range_slider.square .noUi-handle::after {
    display: block;
    content: "";
    position: absolute;
    top: -13px;
    right: -13px;
    bottom: -13px;
    left: -13px;
    background: transparent;
    border-radius: 50%;
}

/* Make it look draggable. */
.ssf_range_slider .noUi-handle {
    cursor: grab;
}

.ssf_range_slider .noUi-handle.noUi-active {
    cursor: grabbing;
}

/* Hover/focus feedback.
 *
 * Scale ONLY — never width/height/top/right. noUiSlider positions handles
 * with `right`/`top` offsets, so changing those on hover moves the handle out
 * from under the cursor (it visibly jumps up and sideways). `transform` is
 * not used on .noUi-handle by either stylesheet (the library transforms
 * .noUi-origin, the parent), so scaling here is safe and grows from the
 * centre, leaving the handle exactly where it sits. */
.ssf_range_slider .noUi-handle {
    transition: transform 0.12s ease;
}

.ssf_range_slider .noUi-handle:hover,
.ssf_range_slider .noUi-handle:focus,
.ssf_range_slider .noUi-handle.noUi-active {
    transform: scale(1.25);
}

/* Touch input gets a genuinely bigger handle, not just a bigger hit box. */
@media (pointer: coarse) {
    .ssf_range_slider.rounded .noUi-handle {
        height: 26px;
        width: 26px;
        top: -9px;
        right: -13px;
        border-radius: 13px;
    }
}