/**
 * Shared Calculator Slider Styles
 * Used across all calculator page templates
 * Extracted to reduce inline CSS duplication and improve caching
 */

/* Base slider */
.calc-slider {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 8px !important;
    border-radius: 4px !important;
    background: linear-gradient(to right, #1e3a5f 0%, #1e3a5f 50%, #e2e8f0 50%, #e2e8f0 100%) !important;
    outline: none !important;
    cursor: pointer !important;
    margin: 10px 0 !important;
    border: none !important;
    padding: 0 !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
}

/* WebKit (Chrome, Safari, Edge, iOS Safari) thumb */
.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #1e3a5f !important;
    cursor: pointer !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    position: relative !important;
    z-index: 10 !important;
    margin-top: -10px !important;
}

/* WebKit runnable track */
.calc-slider::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 8px !important;
    border-radius: 4px !important;
    background: #e2e8f0 !important;
}

/* Firefox thumb */
.calc-slider::-moz-range-thumb {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #1e3a5f !important;
    cursor: pointer !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* Firefox track */
.calc-slider::-moz-range-track {
    height: 8px !important;
    border-radius: 4px !important;
    background: #e2e8f0 !important;
}

/* Firefox progress (filled portion) */
.calc-slider::-moz-range-progress {
    height: 8px !important;
    border-radius: 4px !important;
    background: #1e3a5f !important;
}

/* IE/Edge thumb */
.calc-slider::-ms-thumb {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #1e3a5f !important;
    cursor: pointer !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* IE/Edge track */
.calc-slider::-ms-track {
    height: 8px !important;
    border-radius: 4px !important;
    background: transparent !important;
    border-color: transparent !important;
    color: transparent !important;
}

.calc-slider::-ms-fill-lower {
    background: #1e3a5f !important;
    border-radius: 4px !important;
}

.calc-slider::-ms-fill-upper {
    background: #e2e8f0 !important;
    border-radius: 4px !important;
}

/* Focus state */
.calc-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.2), 0 2px 8px rgba(0,0,0,0.4) !important;
}

.calc-slider:focus::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.2), 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* Frequency button active state */
.freq-btn.active {
    background: #1e3a5f !important;
    color: white !important;
}

/* Mobile touch improvements */
@media (max-width: 768px) {
    .calc-slider {
        height: 10px !important;
        margin: 16px 0 !important;
    }
    
    .calc-slider::-webkit-slider-thumb {
        width: 32px !important;
        height: 32px !important;
        margin-top: -11px !important;
    }
    
    .calc-slider::-moz-range-thumb {
        width: 28px !important;
        height: 28px !important;
    }
}