/* noUiSlider Custom Styles - Salary Range Slider */

/* Override Bootstrap _utilities.scss line 71 - bg-light background color */
/* This overrides: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important */
:root {
    --bs-light-rgb: 12, 118, 224;
    --bs-bg-opacity: 1;
}

/* Override Bootstrap .bg-light utility class */
.bg-light,
.bg-light[style*="rgba(var(--bs-light-rgb)"],
[class*="bg-light"],
[style*="rgba(var(--bs-light-rgb),var(--bs-bg-opacity))"] {
    background-color: rgb(12 118 224) !important;
    background: rgb(12 118 224) !important;
}

/* Main Slider Container - Before slider initialization */
#nonlinear {
    margin: 20px 0 !important;
    width: 100% !important;
    min-height: 10px !important;
    height: 10px !important;
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    padding: 0 !important;
    overflow: visible !important;
    /* Show background BEFORE initialization so user sees something */
    background: #e2e8f0 !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 5px !important;
}

/* Target (the slider container) - Clear visible track - THIS IS THE SLIDER LINE */
#nonlinear.noUi-target,
#nonlinear.noUi-target.noUi-ltr,
#nonlinear.noUi-target.noUi-horizontal,
div#nonlinear.noUi-target {
    width: 100% !important;
    height: 10px !important;
    min-height: 10px !important;
    max-height: 10px !important;
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    background: #e2e8f0 !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 5px !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    /* CRITICAL: Ensure slider line is always visible */
}

/* Background (the unfilled track area) - Saturated zip line style */
#nonlinear .noUi-background,
#nonlinear.noUi-target .noUi-background {
    background: #e2e8f0 !important;
    border-radius: 5px !important;
}

/* Base (the track) - THIS IS THE SLIDER LINE - MUST be visible */
#nonlinear .noUi-base,
#nonlinear.noUi-target .noUi-base,
div#nonlinear .noUi-base {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Ensure track is always visible */
    min-height: 10px !important;
    background: transparent !important;
}

/* Origin (handle container) - MUST allow handles to move freely */
/* CRITICAL: Do NOT set fixed width - let noUiSlider manage origin width dynamically */
/* CRITICAL: pointer-events: auto on origin allows clicking even when handles are hidden */
/* CRITICAL: Do NOT set left - noUiSlider MUST control left to move handles when clicking */
#nonlinear .noUi-origin,
#nonlinear.noUi-target .noUi-origin,
div#nonlinear .noUi-origin {
    position: absolute !important;
    height: 10px !important;
    width: 20px !important;
    min-width: 20px !important;
    z-index: 10 !important;
    top: 0 !important;
    overflow: visible !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* CRITICAL: Enable pointer events on origin since handles are hidden */
    pointer-events: auto !important;
    cursor: pointer !important;
    /* CRITICAL: left MUST be controlled by noUiSlider - do not override it */
    /* When user clicks on slider, noUiSlider changes origin's left to move the handle */
    /* width will be set by noUiSlider dynamically based on handle position */
}

/* Handle - Part of slider, not a button */
/* CRITICAL: Let noUiSlider position handles horizontally (left/right), but set top for vertical centering */
/* HANDLES ARE HIDDEN - User requested to remove dots completely */
#nonlinear .noUi-handle,
#nonlinear.noUi-target .noUi-handle,
#nonlinear .noUi-origin .noUi-handle,
div#nonlinear .noUi-handle,
div#nonlinear .noUi-origin .noUi-handle,
div#nonlinear.noUi-target .noUi-handle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: default !important;
    box-shadow: none !important;
    z-index: -1 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

#nonlinear .noUi-handle:hover,
#nonlinear.noUi-target .noUi-handle:hover {
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.4) !important;
    border-color: #1d4ed8 !important;
}

#nonlinear .noUi-handle:active,
#nonlinear.noUi-target .noUi-handle:active {
    cursor: grabbing !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.5) !important;
}

#nonlinear .noUi-handle:before,
#nonlinear .noUi-handle:after,
#nonlinear.noUi-target .noUi-handle:before,
#nonlinear.noUi-target .noUi-handle:after {
    display: none !important;
    content: none !important;
}

/* Connect (the filled area between handles) - Custom color matching visual identity */
/* CRITICAL: Do NOT set left/right - let noUiSlider position it dynamically */
/* CRITICAL: pointer-events: none allows clicks to pass through to handles */
#nonlinear .noUi-connect,
#nonlinear.noUi-target .noUi-connect,
div#nonlinear .noUi-connect {
    display: block !important;
    visibility: visible !important;
    /* Visual identity colors: primary-blue (#2563eb) to primary-purple (#7c3aed) */
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
    height: 100% !important;
    position: absolute !important;
    z-index: 1 !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 5px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
    top: 0 !important;
    /* CRITICAL: Allow clicks to pass through connect to handles */
    pointer-events: none !important;
    /* left and right will be set by noUiSlider dynamically */
}

/* Ensure parent container doesn't clip */
.px-sm-2.px-0.py-3.pb-0 {
    overflow: visible !important;
    position: relative !important;
}

/* Salary Range Filter Container */
.salary-range-container {
    overflow: visible !important;
    position: relative !important;
}

/* CRITICAL: Force all slider elements to be visible */
#nonlinear * {
    box-sizing: border-box !important;
}

/* Ensure noUiSlider default styles don't hide elements */
#nonlinear .noUi-base,
#nonlinear .noUi-connect,
#nonlinear .noUi-origin,
#nonlinear .noUi-handle {
    box-sizing: border-box !important;
}