/* ============================================================
   .uk-range — unified canonical range slider (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the single legacy declaration on /pricing:
     .slider-wrapper + .slider-tooltip + .input-range + .range-header +
     .range-display + .range-values  (pricing.css)

   Slots:
     .uk-range                    wrapper, owns the layout state
       .uk-range-header           optional flex row: label + numeric display
         .uk-range-label          <label>
         .uk-range-display        styled <input type="number"> chip
       .uk-range-input            the <input type="range">
       .uk-range-tooltip          floating value bubble above the thumb
       .uk-range-values           optional min/max labels under the track

   Sizes (cascade through CSS variables — no per-size duplication):
     --sm      12px thumb / 4px track
     default   24px thumb / 8px track  (matches the production /pricing slider)
     --lg      32px thumb / 10px track

   JS contract (public/js/uk-range.js):
     - Auto-wires every .uk-range on DOMContentLoaded.
     - On 'input' the JS writes --range-fill (% of track filled) and
       --range-pct (% from left for tooltip position) to the wrapper, mirrors
       input.value into .uk-range-tooltip, and dispatches a 'range:input'
       CustomEvent with detail = { value, percent, container }.
     - mousedown/touchstart adds .is-dragging to the wrapper; mouseup/touchend
       removes it. While dragging the tooltip stays visible regardless of hover.
     - Honours prefers-reduced-motion (no thumb scale on :active, no tooltip
       fade transition).
   ============================================================ */

.uk-range {
    --range-thumb-size: 24px;
    --range-track-height: 8px;
    --range-fill: 0%;
    --range-pct: 0%;

    position: relative;
    padding-top: calc(var(--range-thumb-size) * 0.6);
}

/* ---------- Header (label + numeric display) ---------- */
.uk-range-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
}

.uk-range-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.uk-range-display {
    width: 5ch;
    background: rgba(var(--color-primary-rgb), 0.08);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    border-radius: var(--radius-md);
    text-align: center;
    padding: 4px 6px;
    font-size: var(--font-md);
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--color-primary-light);
    outline: 2px solid transparent;
    outline-offset: 2px;
    -moz-appearance: textfield;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast),
        outline-color var(--transition-fast);
}

.uk-range-display::-webkit-outer-spin-button,
.uk-range-display::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.uk-range-display:hover {
    border-color: rgba(var(--color-primary-rgb), 0.4);
    background: rgba(var(--color-primary-rgb), 0.1);
}

.uk-range-display:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
    background: rgba(var(--color-primary-rgb), 0.12);
    outline-color: var(--color-primary);
}

/* ---------- Tooltip ---------- */
.uk-range-tooltip {
    position: absolute;
    top: 0;
    left: var(--range-pct);
    transform: translate(-50%, -100%);
    margin-top: -4px;
    background: var(--gradient-primary);
    color: #000;
    font-size: var(--font-xs);
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.uk-range-tooltip::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--color-primary);
}

.uk-range:hover .uk-range-tooltip,
.uk-range.is-dragging .uk-range-tooltip {
    opacity: 1;
}

/* ---------- Track + thumb (the <input type="range">) ---------- */
.uk-range-input {
    width: 100%;
    height: var(--range-track-height);
    background: linear-gradient(
        to right,
        var(--color-primary) var(--range-fill),
        var(--color-bg) var(--range-fill)
    );
    border-radius: var(--radius-full);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    margin: 0;
}

.uk-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    background: var(--gradient-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.4);
    margin-top: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.uk-range-input::-moz-range-thumb {
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    background: var(--gradient-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.4);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.uk-range-input:active::-webkit-slider-thumb,
.uk-range-input:focus-visible::-webkit-slider-thumb {
    transform: scale(1.2);
    box-shadow:
        0 2px 16px rgba(var(--color-primary-rgb), 0.6),
        0 0 24px rgba(var(--color-primary-rgb), 0.3);
}

.uk-range-input:active::-moz-range-thumb,
.uk-range-input:focus-visible::-moz-range-thumb {
    transform: scale(1.2);
    box-shadow:
        0 2px 16px rgba(var(--color-primary-rgb), 0.6),
        0 0 24px rgba(var(--color-primary-rgb), 0.3);
}

.uk-range-input::-webkit-slider-runnable-track {
    height: var(--range-track-height);
    border-radius: var(--radius-full);
}

.uk-range-input::-moz-range-track {
    height: var(--range-track-height);
    background: var(--color-bg);
    border-radius: var(--radius-full);
    border: none;
}

.uk-range-input::-moz-range-progress {
    height: var(--range-track-height);
    background: var(--color-primary);
    border-radius: var(--radius-full);
}

.uk-range-input:focus {
    outline: none;
}

/* ---------- Values row (min / max under the track) ---------- */
.uk-range-values {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: var(--font-xs);
    color: var(--color-text-muted);
}

/* ---------- Sizes ---------- */
.uk-range--sm {
    --range-thumb-size: 16px;
    --range-track-height: 6px;
}

.uk-range--lg {
    --range-thumb-size: 32px;
    --range-track-height: 10px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .uk-range-tooltip,
    .uk-range-input::-webkit-slider-thumb,
    .uk-range-input::-moz-range-thumb,
    .uk-range-display {
        transition: none;
    }
    .uk-range-input:active::-webkit-slider-thumb,
    .uk-range-input:active::-moz-range-thumb,
    .uk-range-input:focus-visible::-webkit-slider-thumb,
    .uk-range-input:focus-visible::-moz-range-thumb {
        transform: none;
    }
}