/* ========================================
   MODERN SLIDER STYLES
   Refactored slider system with gradient fills
   ======================================== */

/* Enable JS-based features */
.js {
    --js: 1;
}

/* Base slider variables and styling */
input[type=range] {
    /* Value tracking */
    --min: 0;
    --max: 100;
    --val: 50;
    --rng: calc(var(--max) - var(--min));
    --pos: calc((var(--val) - var(--min)) / var(--rng) * 100%);
    
    /* Dimensions */
    --input-w: 100%;
    --input-p: 0.5em;
    --input-h: calc(var(--track-h) + 2 * var(--input-p));
    --track-w: calc(var(--input-w) - 2 * var(--input-p));
    --track-h: 0.875em;
    --track-r: calc(0.5 * var(--track-h));
    
    /* Track gradient colors (default: yellow/orange) */
    --track-c0-rgb: 226, 182, 8;    
    --track-c1-rgb: 184, 2, 2;    
    --track-fill-alpha: 0.65;      /* transparency of active fill */
    --track-fill-alpha-b: 0.76;      /* transparency of active fill */

    /* Track edge effect for rounded end */
    --track-e: radial-gradient(circle farthest-side at 100%,
            transparent calc(100% - 2px), 
            #000 calc(100% - 1px))
        0 / var(--track-r) no-repeat;
    
    /* Track gradient (semi-transparent so texture shows underneath) */
    --track-g: linear-gradient(
        90deg,
        rgba(var(--track-c0-rgb), var(--track-fill-alpha)),
        rgba(var(--track-c1-rgb), var(--track-fill-alpha))
    );
    
    /* Thumb dimensions */
    --thumb-h: 1.75em;
    --thumb-w: var(--thumb-h);
    --thumb-r: 50%;
    --thumb-b: 2px;
    --thumb-c: transparent;
    --thumb-p: inset(0);
    
    /* Styling */
    width: var(--input-w);
    height: var(--input-h);
    border-radius: var(--input-h);
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1), 
                inset 0 1px 0 2px #0d0d0d;
    background: linear-gradient(#0a0a0a, #111 15%, #272727, #1d1d1d);
    font: inherit;
    transition: 0.3s;
    cursor: pointer;
    outline-offset: -0.15em;
}

/* Remove default styling */
input[type=range],
input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

/* ========================================
   WEBKIT (Chrome, Safari, Edge)
   ======================================== */

input[type=range]::-webkit-slider-container {
    -webkit-user-modify: read-write;
    margin: var(--input-p);
    height: var(--track-h);
    border-radius: var(--track-h);
    box-shadow: inset 0 0 0 2px #000;
    background:
        var(--track-e),
        var(--track-g) 0 / calc(var(--js, 0) * var(--pos)) 100% no-repeat,
        linear-gradient(27deg, #a8a8a8 1px, transparent 1px) 0 1px / 4px 4px,
        linear-gradient(207deg, #a8a8a8 1px, transparent 1px) 2px 0px / 4px 4px,
        linear-gradient(27deg, #d0d0d0 1px, transparent 1px) 0px 2px / 4px 4px,
        linear-gradient(207deg, #d0d0d0 1px, transparent 1px) 2px 1px / 4px 4px,
        linear-gradient(90deg, #b8b8b8 2px, transparent 2px) 0 0 / 4px 4px,
        linear-gradient(#c5c5c5 25%, #b0b0b0 25%, #b0b0b0 50%, transparent 50%, transparent 75%, #d8d8d8 75%, #d8d8d8) 0 0 / 4px 4px,
        #9a9a9a;
}

input[type=range]::-webkit-slider-runnable-track {
    margin: 0 calc(-1 * var(--input-p));
    height: var(--thumb-h);
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.9));
}

input[type=range]::-webkit-slider-thumb {
    box-sizing: border-box;
    border: solid var(--thumb-b) var(--thumb-c);
    width: var(--thumb-w);
    height: var(--thumb-h);
    border-radius: var(--thumb-r);
    box-shadow: 0 -1px #000, inset 0 -1px #8a8a8a;
    background: 
        conic-gradient(
            #fefefe, #ebebeb, #989898 25%, 
            #808080 0%, #797979, #b3b3b3 50%, 
            #bdbdbd 0%, #d3d3d3, #989898, #d8d8d8, #fefefe
        ) padding-box,
        linear-gradient(#f9f9f9, #8d8d8c) border-box;
    clip-path: var(--thumb-p);
    cursor: ew-resize;
}

/* ========================================
   FIREFOX
   ======================================== */

input[type=range]::-moz-range-track {
    margin: var(--input-p);
    height: var(--track-h);
    border-radius: var(--track-h);
    box-shadow: inset 0 0 0 2px #000;
    background:
        linear-gradient(27deg, #a8a8a8 1px, transparent 1px) 0 1px / 4px 4px,
        linear-gradient(207deg, #a8a8a8 1px, transparent 1px) 2px 0px / 4px 4px,
        linear-gradient(27deg, #d0d0d0 1px, transparent 1px) 0px 2px / 4px 4px,
        linear-gradient(207deg, #d0d0d0 1px, transparent 1px) 2px 1px / 4px 4px,
        linear-gradient(90deg, #b8b8b8 2px, transparent 2px) 0 0 / 4px 4px,
        linear-gradient(#c5c5c5 25%, #b0b0b0 25%, #b0b0b0 50%, transparent 50%, transparent 75%, #d8d8d8 75%, #d8d8d8) 0 0 / 4px 4px,
        #9a9a9a;
}

input[type=range]::-moz-range-progress {
    height: var(--track-h);
    border: solid var(--input-p) transparent;
    border-right-width: 0;
    border-radius: var(--input-h) 0 0 var(--input-h);
    box-shadow: inset 0 0 0 2px #000;
    background:
        var(--track-g) 0 0 / 100% 100% no-repeat,
        linear-gradient(27deg, #a8a8a8 1px, transparent 1px) 0 1px / 4px 4px,
        linear-gradient(207deg, #a8a8a8 1px, transparent 1px) 2px 0px / 4px 4px,
        linear-gradient(27deg, #d0d0d0 1px, transparent 1px) 0px 2px / 4px 4px,
        linear-gradient(207deg, #d0d0d0 1px, transparent 1px) 2px 1px / 4px 4px,
        linear-gradient(90deg, #b8b8b8 2px, transparent 2px) 0 0 / 4px 4px,
        linear-gradient(#c5c5c5 25%, #b0b0b0 25%, #b0b0b0 50%, transparent 50%, transparent 75%, #d8d8d8 75%, #d8d8d8) 0 0 / 4px 4px;
    background-clip: padding-box;
    mask: 
        radial-gradient(closest-side at var(--track-r), 
            red calc(100% - 1px), transparent),
        linear-gradient(red 0 0) var(--track-r) no-repeat;
    mask-clip: padding-box;
    mask-size: calc(var(--track-w) - var(--track-h));
}

input[type=range]::-moz-range-thumb {
    box-sizing: border-box;
    border: solid var(--thumb-b) var(--thumb-c);
    width: var(--thumb-w);
    height: var(--thumb-h);
    border-radius: var(--thumb-r);
    box-shadow: 0 -1px #000, inset 0 -1px #8a8a8a;
    background: 
        conic-gradient(
            #fefefe, #ebebeb, #989898 25%, 
            #808080 0%, #797979, #b3b3b3 50%, 
            #bdbdbd 0%, #d3d3d3, #989898, #d8d8d8, #fefefe
        ) padding-box,
        linear-gradient(#f9f9f9, #8d8d8c) border-box;
    clip-path: var(--thumb-p);
    cursor: ew-resize;
}

/* ========================================
   INTERACTION STATES
   ======================================== */

input[type=range]:hover,
input[type=range]:focus {
    outline: solid 2px var(--track-c1);
}

/* ========================================
   SLIDER VARIANTS
   ======================================== */

/* Star thumb (default yellow/orange) */
input[type=range].slider-star {
    --thumb-p: polygon(
        calc(50% + (50% - 3px) * 1) calc(50% + (50% - 3px) * 0), 
        97.5528258148% 65.4508497187%, 
        calc(50% + (50% - 3px) * 0.8090169944) calc(50% + (50% - 3px) * 0.5877852523), 
        79.3892626146% 90.4508497187%, 
        calc(50% + (50% - 3px) * 0.3090169944) calc(50% + (50% - 3px) * 0.9510565163), 
        50% 100%, 
        calc(50% + (50% - 3px) * -0.3090169944) calc(50% + (50% - 3px) * 0.9510565163), 
        20.6107373854% 90.4508497187%, 
        calc(50% + (50% - 3px) * -0.8090169944) calc(50% + (50% - 3px) * 0.5877852523), 
        2.4471741852% 65.4508497187%, 
        calc(50% + (50% - 3px) * -1) calc(50% + (50% - 3px) * 0), 
        2.4471741852% 34.5491502813%, 
        calc(50% + (50% - 3px) * -0.8090169944) calc(50% + (50% - 3px) * -0.5877852523), 
        20.6107373854% 9.5491502813%, 
        calc(50% + (50% - 3px) * -0.3090169944) calc(50% + (50% - 3px) * -0.9510565163), 
        50% 0%, 
        calc(50% + (50% - 3px) * 0.3090169944) calc(50% + (50% - 3px) * -0.9510565163), 
        79.3892626146% 9.5491502813%, 
        calc(50% + (50% - 3px) * 0.8090169944) calc(50% + (50% - 3px) * -0.5877852523), 
        97.5528258148% 34.5491502813%
    );
}

/* Blue/cyan gradient */
input[type=range].slider-blue {
    --track-c0-rgb: 0, 16, 213;   /* #0010d5 */
    --track-c1-rgb: 0, 209, 222;  /* #00d1de */
}

/* Red/pink gradient with rounded square thumb */
input[type=range].slider-pink {
    --thumb-r: 5px;
    --track-c0-rgb: 204, 4, 13;    /* #cc040d */
    --track-c1-rgb: 212, 77, 191;  /* #d44dbf */
}

/* Green/lime gradient with pill thumb */
input[type=range].slider-green {
    --thumb-w: 2em;
    --thumb-h: 1.125em;
    --thumb-r: var(--thumb-h);
    --track-c0-rgb: 8, 195, 0;     /* #08c300 */
    --track-c1-rgb: 170, 202, 0;   /* #aaca00 */
}

/* Gray gradient with tall thumb */
input[type=range].slider-gray {
    --thumb-w: 1.25em;
    --thumb-h: 2em;
    --track-c0-rgb: 15, 15, 15;    /* #0f0f0f */
    --track-c1-rgb: 115, 115, 115; /* #737373 */
}