/* Range slider — paired with idomains/js/component/rangeSlider.js.
   Supports dual-thumb (price/weight filter) and single-thumb
   (single-value control) variants via markup contract; see the
   demo at /dev/admin/range_slider.php and the JS file for the
   full markup contract.

   Layout: .range-slider is a flex row of three columns:
       [min label]   [track + thumbs]   [max label]
   The labels stay outside the track so they never sit underneath
   the slider chrome. For a single-value slider, the markup
   includes only one label — using .range-label.-max puts it on
   the right of the track (matches single-value-slider conventions
   where the current value sits next to the end-of-fill).

   Colours come from CSS custom properties so tenants can theme
   the slider without overriding individual rules. */

.range-slider {
    display: flex;
    align-items: center;
    gap: 10px;
    --range-fill-color: #607dbf;
    --range-track-color: #ddd;
    --range-thumb-bg: #fff;
    --range-thumb-border: #607dbf;
}

.range-slider .range-label {
    flex: 0 0 auto;
    font-size: 13px;
    color: #444;
    line-height: 1;
    white-space: nowrap;
}
.range-slider .range-label.-min { order: 1; text-align: right; }
.range-slider .range-control    { order: 2; flex: 1 1 auto; position: relative; height: 28px; }
.range-slider .range-label.-max { order: 3; text-align: left;  }

/* Editable label variant — markup uses <input class="range-label"...>
   in place of <span>. Subtle border + a hair of padding so the input
   reads as editable without dominating the slider visually. */
.range-slider input.range-label {
    width: 60px;
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: #444;
    box-sizing: border-box;
    text-align: center;
}
.range-slider input.range-label:focus {
    outline: none;
    border-color: var(--range-fill-color);
    box-shadow: 0 0 0 2px rgba(96, 125, 191, 0.2);
}

.range-slider .range-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 11px;
    height: 6px;
    background: var(--range-track-color);
    border-radius: 3px;
}

.range-slider .range-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--range-fill-color);
    border-radius: 3px;
}

/* Input fills the full .range-control box. default.css applies
   padding:4px to every input; we reset it here so WebKit's runnable-track
   centring math is predictable across browsers. With height:28px and
   padding:0, the runnable-track centres at y=14 in WebKit (matching the
   visible .range-track) and ::-moz-range-thumb auto-centres at y=14 in
   Firefox. */
.range-slider .range-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 28px;
    padding: 0;
    background: none;
    border: 0;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.range-slider .range-thumb::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--range-thumb-bg);
    border: 2px solid var(--range-thumb-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    /* WebKit/Blink top-aligns the thumb with the runnable-track; lift by
       (track − thumb) / 2 = (6 − 15) / 2 to centre on the track. Firefox
       uses ::-moz-range-thumb (below) and auto-centres in the input box,
       so this rule deliberately does not apply there. */
    margin-top: -4.5px;
}

.range-slider .range-thumb::-moz-range-thumb {
    pointer-events: auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--range-thumb-bg);
    border: 2px solid var(--range-thumb-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.range-slider .range-thumb::-webkit-slider-runnable-track {
    background: transparent;
    border: 0;
    height: 6px;
}

.range-slider .range-thumb::-moz-range-track {
    background: transparent;
    border: 0;
    height: 6px;
}