/* ============================================================================
   KrsKrt Range field enhancements (central / frontend)
   - Bigger "grabbable" square thumb (5px radius) with a raised box-shadow
   - Current value shown ON the thumb (overlay bubble, positioned by krskrt-range.js)
   - Step dots painted INTO the track background (radial-gradients) so the native
     thumb always paints on top of them — the handle is never covered by a dot
   - Optional multi-colour gradient track + per-position thumb border colour
   These override the JFB defaults (main.css, CSS-var driven).
   ============================================================================ */

:root {
    --krskrt-range-thumb: 34px;   /* thumb (square) size — JS reads this for bubble positioning */
    --krskrt-range-track: 8px;    /* track height (overridable per field via the inline var) */
}

/* Flex (slider + value side-by-side) → relative block so the value bubble can be
   overlaid on the thumb. No padding: the wrap is exactly the slider's height so
   the bar, thumb and bubble all centre on the same line. */
.jet-form-builder__field-wrap.range-wrap {
    display: block;
    position: relative;
    width: 100%;
}

/* Slider sizing via JFB's CSS variables. */
input[type="range"].jet-form-builder__field.range-field {
    --jet-fb__range-field-slider--size: var(--krskrt-range-thumb);
    --jet-fb__range-field-slider--br:   5px;
    --jet-fb__range-field-slider--bgc:  #ffffff;
    --jet-fb__range-field-range--height: var(--krskrt-range-track);
    --jet-fb__range-field-range--br:    15px;
    margin: 0;
    width: 100%;
    display: block;              /* no inline baseline gap → wrap height == slider height */
    position: relative;
    z-index: 2;
    background: transparent;
}

/* Square, outlined, grabbable thumb (mirrors the repeater "Add row" button look).
   Border defaults to #dedede; when a gradient is set, krskrt-range.js overrides
   --krskrt-range-thumb-border with the gradient colour at the thumb's position.
   The thumb is a native pseudo painted ON TOP of the track, so the step dots
   (drawn into the track background) always sit beneath it. */
input[type="range"].jet-form-builder__field.range-field::-webkit-slider-thumb {
    border: 1px solid var(--krskrt-range-thumb-border, #dedede);
    background: #ffffff;
    box-shadow: 0 3px 0 #a0a0a0, 0 6px 8px rgba(0,0,0,0.25);
}
input[type="range"].jet-form-builder__field.range-field::-moz-range-thumb {
    border: 1px solid var(--krskrt-range-thumb-border, #dedede);
    background: #ffffff;
    box-shadow: 0 3px 0 #a0a0a0, 0 6px 8px rgba(0,0,0,0.25);
}

/* ── Value bubble: overlaid on the thumb, positioned by JS (left set inline) ── */
.range-wrap .jet-form-builder__field-value.range-value {
    position: absolute;
    top: 0;
    height: var(--krskrt-range-thumb); /* same height as the slider → centres on the thumb */
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%); /* JS sets `left` to the thumb centre */
    pointer-events: none;        /* never block dragging the native thumb */
    z-index: 3;                  /* above the thumb */
    font-family: 'Lekton', sans-serif;
    font-size: 14px;
    line-height: 1;
    color: #a0a0a0;
    white-space: nowrap;
}
.range-wrap .jet-form-builder__field-value-number { font-weight: 700; }
.range-wrap .jet-form-builder__field-value-prefix,
.range-wrap .jet-form-builder__field-value-suffix { opacity: 0.7; }

/* Unset state: no value chosen yet (nothing saved to the database). Show the
   hand-swipe-right hint icon instead of a number; krskrt-range.js parks the
   thumb at the first position and toggles .is-unset on the bubble. */
.range-wrap .jet-form-builder__field-value.range-value .krskrt-range-hint {
    display: none;
    font-size: 18px;
    line-height: 1;
    color: #a0a0a0;
}
.range-wrap .jet-form-builder__field-value.range-value.is-unset .krskrt-range-hint {
    display: inline-block;
}
.range-wrap .jet-form-builder__field-value.range-value.is-unset .jet-form-builder__field-value-number,
.range-wrap .jet-form-builder__field-value.range-value.is-unset .jet-form-builder__field-value-prefix,
.range-wrap .jet-form-builder__field-value.range-value.is-unset .jet-form-builder__field-value-suffix {
    display: none;
}