/* Filter Price Range */
:root {
    --range-bar-color: hsl(0, 0%, 0%, 20%);
    --range-progress-bar-color: hsl(120, 35%, 50%);
    --range-thumb-color: var(--range-progress-bar-color);
}
#range-one {
    box-sizing: border-box;
    font-family: system-ui;
}
.sliders_control {
  position: relative;
  min-height: 30px;
} 
.numbers {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between; 
}
.range-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    margin: 0 auto;

    input[type="range"] {
        --left-per: 0%;
        --right-per: 100%;
        
        position:absolute;
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
        outline: none;
        pointer-events: none;
    }
    
    input[type="range"]::-webkit-slider-runnable-track {
    opacity: 1;
    height: 0.5rem;     
        border: none;
        box-shadow: none;
        border-radius: 9999px;
    }
    
    input[type="range"].left-range::-webkit-slider-runnable-track {
        background: linear-gradient(90deg, var(--range-bar-color) var(--left-per), var(--range-progress-bar-color) var(--left-per), var(--range-progress-bar-color) var(--right-per), var(--range-bar-color) var(--right-per));
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none; /* Override default look */
        appearance: none;
        margin-top: -8px; /* Centers thumb on the track */
        background-color: var(--range-thumb-color);
        height: 24px;
        width: 24px;
        pointer-events: all;
        border-radius: 1rem;
        outline: 5px solid white;
        outline-offset: -20px;
        box-shadow: 0 0 10px var(--range-thumb-color);
        cursor: pointer;
    }
}
#range-two {
    --range-progress-bar-color: hsl(250, 35%, 50%); 
    --range-thumb-color: var(--range-progress-bar-color);
}
#range-three, #range-four, #range-five {
    --range-progress-bar-color: hsl(320, 35%, 50%);
    --range-thumb-color: var(--range-progress-bar-color);
}
.info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 40ch;
    margin: 0 auto;
    padding: 1rem;
    border: 3px solid hsl(0, 70%, 60%);
    border-radius: 1rem;
    outline: 2px solid hsl(0, 30%, 60%);
    outline-offset: -8px;
}
.info > div {
    display: grid;
    grid-template-columns: 15ch 1fr;
}
#info-size-range {
    display: grid;
    grid-template-rows: 3ch1fr;
}
#info-size-range > div {
    display: grid;
    grid-template-columns: 3ch 1fr;
}
/* END Filter Price Range */