/**
 * HTML5 Range Slider Styling
 * Replaces price-range-slider.js jQuery plugin
 * Matches existing calculator design: green track (#7FB800), round handle
 */

/* Base range input */
input[type="range"].calculator-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    margin: 12px 0;
    /* Previne swipe-ul orizontal al browserului mobil (back/forward
       gesture) de a fi declan\u0219at c\u00e2nd userul trage de slider. */
    touch-action: pan-y;
}

/* Track - WebKit (Chrome, Safari, Edge) */
input[type="range"].calculator-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    /* background is set inline via :style for dynamic fill */
}

/* Track - Firefox */
input[type="range"].calculator-range::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: #dee2e6;
}

/* Firefox progress (filled portion) */
input[type="range"].calculator-range::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: #004466;
}

/* Thumb - WebKit */
input[type="range"].calculator-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 5px solid #004466;
    cursor: pointer;
    margin-top: -8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.15s ease;
}

input[type="range"].calculator-range::-webkit-slider-thumb:hover {
    box-shadow: 0 2px 6px rgba(127, 184, 0, 0.3);
}

input[type="range"].calculator-range::-webkit-slider-thumb:active {
    box-shadow: 0 2px 8px rgba(127, 184, 0, 0.5);
    transform: scale(1.05);
}

/* Thumb - Firefox */
input[type="range"].calculator-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 5px solid #004466;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.15s ease;
}

input[type="range"].calculator-range::-moz-range-thumb:hover {
    box-shadow: 0 2px 6px rgba(127, 184, 0, 0.3);
}

/* Focus styles */
input[type="range"].calculator-range:focus {
    outline: none;
}

input[type="range"].calculator-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(127, 184, 0, 0.2);
}

input[type="range"].calculator-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(127, 184, 0, 0.2);
}

/* ---- Blue variant (nevoi personale) ---- */
input[type="range"].calculator-range-nevoi::-moz-range-progress {
    background: #6DB1BF;
}

input[type="range"].calculator-range-nevoi::-webkit-slider-thumb {
    border-color: #6DB1BF;
}

input[type="range"].calculator-range-nevoi::-webkit-slider-thumb:hover {
    box-shadow: 0 2px 6px rgba(109, 177, 191, 0.3);
}

input[type="range"].calculator-range-nevoi::-webkit-slider-thumb:active {
    box-shadow: 0 2px 8px rgba(109, 177, 191, 0.5);
}

input[type="range"].calculator-range-nevoi::-moz-range-thumb {
    border-color: #6DB1BF;
}

input[type="range"].calculator-range-nevoi::-moz-range-thumb:hover {
    box-shadow: 0 2px 6px rgba(109, 177, 191, 0.3);
}

input[type="range"].calculator-range-nevoi:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(109, 177, 191, 0.2);
}

input[type="range"].calculator-range-nevoi:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(109, 177, 191, 0.2);
}

/* Slider limits row */
.slider-limits {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: #8a9ca7;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    input[type="range"].calculator-range::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
        margin-top: -9px;
    }

    input[type="range"].calculator-range::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
}