:root {
    --ilaLightBlue: #c4e9f5;
    --ilaOrange: #ff5f05;
    --ilaBlue: #13294b;
    --ilaLightGrey: #f4f4f4;
    --ilaGrey: #707372;
    --input-size: 20px;
    --transition-fast: 0.2s;
}

/* ========== BASE COMPONENT STYLES ========== */

.ila-input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}

    .ila-input-group span {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        align-self: stretch;
    }

    .ila-input-group label {
        margin-bottom: 0;
    }

    /* ========== UNIVERSAL INPUT STYLES ========== */

    .ila-input-group .ila-input,
    .ila-input-group .ila-select,
    .ila-input-group .ila-textarea {
        appearance: none;
        -webkit-appearance: none;
        font-size: 14px;
        padding: 8px;
        color: #333;
        border: 2px solid var(--ilaGrey);
        background-color: white;
        width: 100%;
        transition: border-color var(--transition-fast), background-color var(--transition-fast);
    }

        .ila-input-group .ila-input::placeholder,
        .ila-input-group .ila-select::placeholder,
        .ila-input-group .ila-textarea::placeholder {
            color: var(--ilaGrey);
        }

        .ila-input-group .ila-input:hover,
        .ila-input-group .ila-select:hover,
        .ila-input-group .ila-textarea:hover {
            background-color: #F0F7FA; /* HOVER COLOR*/
            border-color: var(--ilaOrange);
        }

        .ila-input-group .ila-input:focus,
        .ila-input-group .ila-select:focus,
        .ila-input-group .ila-textarea:focus {
            border: 2px solid var(--ilaBlue);
            background-color: var(--ilaLightBlue);
            outline: none;
        }

        .ila-input-group .ila-input:focus-visible,
        .ila-input-group .ila-select:focus-visible,
        .ila-input-group .ila-textarea:focus-visible {
            border: 2px solid var(--ilaOrange);
            background-color: white;
        }

        .ila-input-group .ila-input:active,
        .ila-input-group .ila-select:active,
        .ila-input-group .ila-textarea:active {
            border: 2px solid var(--ilaOrange);
            background-color: white;
        }

        .ila-input-group .ila-input:disabled,
        .ila-input-group .ila-select:disabled,
        .ila-input-group .ila-textarea:disabled {
            background-color: #e0e0e0;
            border-color: #aaa;
            color: #aaa;
            cursor: not-allowed;
        }


    /* ========== RADIO ========== */

    /* Base Style for .ila-radio */
    .ila-input-group .ila-radio {
        box-sizing: border-box;
        width: var(--input-size);
        height: var(--input-size);
        border-radius: 50%; /* Makes it a circle */
        appearance: none;
        -webkit-appearance: none;
        background: white; /* Default background */
        border: 2px solid var(--ilaGrey); /* Default border */
        box-shadow: none; /* Ensure no box-shadow is applied */
        position: relative; /* Added for positioning the ::before pseudo-element */
        /* Transition border-color and background-color */
        transition: border-color var(--transition-fast), background-color var(--transition-fast);
        cursor: pointer; /* Good practice for clickable elements */
    }

        /* Pseudo-element for the center dot (initially hidden/scaled down) */
        .ila-input-group .ila-radio::before {
            content: '';
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: calc(var(--input-size) * 0.5);
            height: calc(var(--input-size) * 0.5);
            background-color: var(--ilaBlue); /* Color of the dot */
            border-radius: 50%; /* Makes the dot a circle */
            transform: translate(-50%, -50%) scale(0);
            transition: transform var(--transition-fast);
        }

        /* Hover State */
        .ila-input-group .ila-radio:hover {
            border-color: var(--ilaOrange);
            background-color: #F0F7FA;
        }

        /* Focus State */
        .ila-input-group .ila-radio:focus {
            border-color: var(--ilaOrange);
            background-color: #F0F7FA;
        }

        /* Checked State - Styles for the radio button itself */
        .ila-input-group .ila-radio:checked {
            border-color: var(--ilaBlue);
            background-color: var(--ilaLightBlue);
        }

            /* Checked State - Show the ::before pseudo-element (the dot) */
            .ila-input-group .ila-radio:checked::before {
                transform: translate(-50%, -50%) scale(1); /* Scale the dot to full size */
            }


            /* Checked and Focus Combination */
            .ila-input-group .ila-radio:checked:focus {
                border-color: var(--ilaBlue);
                background-color: var(--ilaLightBlue);
            }

    /* ========== CHECKBOXES ========== */

    .ila-input-group .ila-checkbox {
        width: var(--input-size);
        height: var(--input-size);
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        border: 2px solid var(--ilaGrey);
        position: relative;
        cursor: pointer;
    }

        .ila-input-group .ila-checkbox:hover:not(:checked),
        .ila-input-group .ila-checkbox:focus:not(:checked) {
            border-color: var(--ilaOrange);
            background-color: #F0F7FA; /* HOVER COLOR*/
        }

        .ila-input-group .ila-checkbox:checked {
            border-color: var(--ilaBlue);
            background-color: var(--ilaLightBlue);
        }

            .ila-input-group .ila-checkbox:checked::before {
                content: "";
                position: absolute;
                top: 3px;
                left: 5px;
                width: 6px;
                height: 8px;
                border: solid var(--ilaBlue);
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

        .ila-input-group .ila-checkbox:hover:checked::before {
            border-color: var(--ilaOrange);
        }

        .ila-input-group .ila-checkbox:checked:focus {
            border-color: var(--ilaBlue);
            background-color: var(--ilaLightBlue);
        }

        .ila-input-group .ila-checkbox:disabled {
            background: #e0e0e0;
            border-color: #aaa;
            cursor: not-allowed;
        }

            .ila-input-group .ila-checkbox:disabled::before {
                border-color: #aaa;
            }

            .ila-input-group .ila-checkbox:disabled + label {
                color: #aaa;
            }

    /* ========== SPECIAL INPUT VARIANTS ========== */

    .ila-input-group .ila-search,
    .ila-input-group .ila-calendar,
    .ila-input-group .ila-select {
        position: relative;
        padding-right: 30px;
        background-repeat: no-repeat;
        background-position: right 10px center;
        border: 2px solid var(--ilaGrey);
        width: 100%;
    }

        /* Hover State */
        .ila-input-group .ila-search:hover,
        .ila-input-group .ila-calendar:hover,
        .ila-input-group .ila-select:hover {
            border-color: var(--ilaOrange);
            background-color: #F0F7FA; /* HOVER COLOR*/
        }



    .ila-input-group .ila-search {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2213%22%20height%3D%2214%22%20viewBox%3D%220%200%2013%2014%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_3163_8362)%22%3E%3Cpath%20d%3D%22M7.92972%201.86172C6.11508%200.0470712%203.1733%200.0470712%201.36196%201.86172C-0.452685%203.67636%20-0.452685%206.61483%201.36196%208.42948C3.00473%2010.0722%205.56638%2010.221%207.38434%208.88892L11.1194%2013.176C11.5491%2013.6057%2012.2498%2013.6057%2012.6795%2013.176C13.1092%2012.7463%2013.1092%2012.0455%2012.6795%2011.6158L8.42222%207.84112C9.72123%206.02648%209.55927%203.49126%207.92972%201.86172ZM7.04388%207.54364C5.71843%208.86909%203.57325%208.86909%202.2478%207.54364C0.922347%206.21819%200.922347%204.07301%202.2478%202.74755C3.57325%201.4221%205.71843%201.4221%207.04388%202.74755C8.36933%204.07301%208.36933%206.21819%207.04388%207.54364Z%22%20fill%3D%22%23FF5F05%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_3163_8362%22%3E%3Crect%20width%3D%2213%22%20height%3D%2213%22%20fill%3D%22white%22%20transform%3D%22translate(0%200.5)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
    }

    .ila-input-group .ila-calendar {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FF6F00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22/%3E%3C/svg%3E');
        pointer-events: auto;
    }

        .ila-input-group .ila-calendar::-webkit-calendar-picker-indicator {
            opacity: 0;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            cursor: pointer;
            z-index: 2;
        }

    .ila-input-group .ila-select {
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_3163_8483)%22%3E%3Cpath%20d%3D%22M6.98785%208.77842C6.76884%209.07516%206.22752%209.07516%206.00851%208.77842L3.04157%204.7219L0.0787562%200.66864C-0.140252%200.371901%200.132475%200.000161171%200.56636%200.000161171H12.4341C12.868%200.000161171%2013.1407%200.371901%2012.9217%200.66864L9.95479%204.72516L6.98785%208.77842Z%22%20fill%3D%22%23FF5F05%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_3163_8483%22%3E%3Crect%20width%3D%229%22%20height%3D%2213%22%20fill%3D%22white%22%20transform%3D%22matrix(0%20-1%201%200%200%209)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
    }

/* ========== TEXTAREA ========== */

.ila-textarea {
    resize: both;
}

/* ========== FILE UPLOAD ========== */
.ila-file-upload-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 2px solid var(--ilaGrey);
    background-color: white;
    width: 100%;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    position: relative;
    box-sizing: border-box;
}

    .ila-file-upload-container:hover {
        background-color: #F0F7FA;
        border-color: var(--ilaOrange);
    }

    .ila-file-upload-container:focus-within {
        border: 2px solid var(--ilaBlue);
        background-color: var(--ilaLightBlue);
    }

    .ila-file-upload-container:focus-visible,
    .ila-file-upload-container:active {
        border: 2px solid var(--ilaOrange);
        background-color: white;
    }

    .ila-file-upload-container.disabled {
        background-color: #e0e0e0;
        border-color: #aaa;
        color: #aaa;
        cursor: not-allowed;
    }

    .ila-file-upload-container input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

/* === STYLING THE BUTTON === */
.ila-file-upload-label {
    display: inline-block;
    cursor: pointer;
    font-weight: 700;
    line-height: 20px;
    padding: 10px 20px; /* More padding */
    border: 1px solid var(--ilaBlue); /* Blue border */
    color: white; /* White text */
    background-color: var(--ilaBlue); /* Blue background */
    border-radius: 5px; /* Slightly more rounded corners */
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    z-index: 1;
}

    .ila-file-upload-label:hover {
        background-color: var(--white, #FFF);
        color: var(--il-blue, #13294B);
    }

    .ila-file-upload-label:active {
        background-color: #004085; /* Darkest blue when clicking */
        transform: translateY(1px); /* Simple press effect */
    }
/* === END STYLING THE BUTTON === */


.ila-file-upload-placeholder {
    color: #bbb;
    flex-grow: 1;
    padding-left: 10px;
    font-size: 14px;
    z-index: 1;
}

.ila-file-upload-container.file-chosen .ila-file-upload-placeholder {
    color: #333;
}

.ila-file-upload-container.disabled .ila-file-upload-label {
    background-color: #b0b0b0;
    color: #f0f0f0;
    border-color: #999;
    cursor: not-allowed;
}

    .ila-file-upload-container.disabled .ila-file-upload-label:hover {
        background-color: #b0b0b0; /* Keep disabled style on hover */
        border-color: #999;
    }


/* ========== TOGGLE BUTTON ========== */




/*fieldset {
    margin: 1em;
    flex: 1 0 10em;
}
*/
ila-input-group.ila-toggles div {
    box-sizing: border-box;
    position: relative;
}

ila-input-group.ila-toggles > div {
    margin: 1.5em 0;
}

    ila-input-group.ila-toggles > div:first-of-type {
        margin-top: 1em;
    }

    ila-input-group.ila-toggles > div:last-of-type {
        margin-bottom: 1em;
    }

ila-input-group.ila-toggles {
    border: 0.15em solid rgba(0, 0, 0, 0.25);
}

/* applies to all toggle buttons with 'aria-pressed' attribute, whether true or false */
.ila-input-group [aria-pressed] {
    display: block;
    box-sizing: border-box;
    border: none;
    color: inherit;
    background: none;
    font: inherit;
    line-height: inherit;
    text-align: left;
    padding: .4em 0 .4em 4em;
    position: relative;
    outline: none;
}

    /* html for disabled button has blank 'disabled' attribute */
    .ila-input-group [aria-pressed][disabled],
    .ila-input-group[aria-pressed][disabled]:hover {
        color: var(--il-storm-60, #8E9090);
    }

    /* the 'before' section is the pill container, this determines height of button. */
    .ila-input-group [aria-pressed]::before,
    .ila-input-group [aria-pressed]::after {
        content: "";
        position: absolute;
        height: 1.8em;
        transition: all 0.25s ease;
    }

    .ila-input-group [aria-pressed]::before {
        left: 0;
        top: 0.2em;
        width: 3em;
        border: 0em solid var(--il-storm--il-storm-85, #929191);
        background: var(--il-storm--il-storm-85, #929191);
        border-radius: 1.1em;
    }

    /* the 'after' section is the pill that slides laft and right */
    .ila-input-group [aria-pressed]::after {
        left: 0;
        top: 0.25em;
        background-color: #fff;
        background-position: center center;
        border-radius: 50%;
        width: 1.2em;
        height: 1.2em;
        border: 0.25em solid var(--il-storm--il-storm-85, #929191);
    }

    /* whether aria pressed is true or false */
    .ila-input-group [aria-pressed]:hover::before {
        outline: 3px solid var(--il-orange-il-orange, #FF5F05);
    }

    /* whether aria pressed is true or false */
    .ila-input-group [aria-pressed]:focus::before {
        outline: 3px solid #13294b;
        background: var(--il-arches--il-arches-90, #C7EDF8);
    }

    /* border of pill turns arches blue to match bgd color of before */
    .ila-input-group [aria-pressed]:focus::after {
        background-color: #13294b;
        border: 0.25em solid var(--il-arches--il-arches-90, #C7EDF8);
    }

/* pill moves from left:0 to left: 1.25em when pressed = true, border color changes to match bgd color of before */
.ila-input-group [aria-pressed=true]::after {
    left: 1.25em;
    border-color: #13294b;
}

.ila-input-group [aria-pressed=true]::before {
    background-color: #13294b;
}

.ila-input-group [aria-pressed=true]:hover::before {
    background-color: var(--il-orange-il-orange, #FF5F05);
    outline: none;
}

.ila-input-group [aria-pressed=true]:hover::after {
    border-color: var(--il-orange-il-orange, #FF5F05);
}

.ila-input-group [aria-pressed=true]:focus::before {
    background-color: var(--il-arches--il-arches-90, #C7EDF8);
    outline: 3px solid #13294b;
}

.ila-input-group [aria-pressed=true]:focus::after {
    border-color: var(--il-arches--il-arches-90, #C7EDF8);
}

.ila-input-group [aria-pressed][disabled]::before {
    background-color: var(--il-storm--il-storm-60, #8E9090);
    border-color: #ddd;
}

.ila-input-group [aria-pressed][disabled]::after {
    border-color: var(--il-storm--il-storm-60, #8E9090);
    left: 0
}

.ila-input-group [aria-pressed][disabled]:hover::before {
    outline: 3px solid var(--il-orange, #FF5F05);
}

/* Windows High Contrast Mode Support */
@media screen and (-ms-high-contrast: active) {
    .ila-input-group [aria-pressed]:focus::before,
    .ila-input-group [aria-pressed]:hover::before {
        outline: 1px dotted windowText;
        outline-offset: 0.25em;
    }

    .ila-input-group [aria-pressed]::after {
        background-color: windowText;
    }

    .ila-input-group [aria-pressed][disabled]::after {
        background-color: transparent;
    }
}

/* Reduced motion */
@media screen and (prefers-reduced-motion: reduce) {
    .ila-input-group [aria-pressed]::before,
    .ila-input-group [aria-pressed]::after {
        transition: none;
    }
}

/* Print styles */
@media print {
    .ila-input-group [aria-pressed]::before,
    .ila-input-groups [aria-pressed]::after,
    .ila-input-group [aria-pressed][disabled] {
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}


/* ========== RANGE INPUT (Revised for more 'enabled' default look) ========== */

/*
  Define variables based on the toggle button aesthetics.
  These could be in :root or a common parent class like .ila-input-group.
  Make sure these are defined in your actual CSS where they can be accessed.
*/
/*:root {*/ /* Or a more specific selector like .ila-style-context */
    /*--ila-storm-60: #8E9090;*/ /* For disabled elements */
    /*--ila-storm-85: #929191;*/ /* Default subtle grey (used for track) */
    /*--ila-orange: #FF5F05;*/ /* Hover accent */
    /*--ila-blue-dark: #13294b;*/ /* Focus/active primary color, NOW DEFAULT THUMB BORDER */
    /*--ila-blue-light: #C7EDF8;*/ /* Focus/active secondary color */
    /*--ila-white: #fff;*/ /* Thumb background, etc. */
    /* Range slider specific variables */
    /*--ila-range-track-height: 0.6em;
    --ila-range-track-border-radius: 1em;
    --ila-range-thumb-size: 1.6em;
    --ila-range-thumb-border-width: 0.25em;
}*/

/* Basic styling for the range input */
/*input[type="range"].ila-range-slider {
    display: block;
    width: 100%;
    margin: 1.5em 0;*/ /* Consistent with toggle group item margins */
    /*background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    padding: 0;
}*/

    /* === WebKit (Chrome, Safari, new Edge) === */
    /*input[type="range"].ila-range-slider::-webkit-slider-runnable-track {
        width: 100%;
        height: var(--ila-range-track-height);
        background: var(--ila-storm-85);*/ /* Default track color */
        /*border-radius: var(--ila-range-track-border-radius);
        border: none;
        transition: background 0.25s ease;
    }

    input[type="range"].ila-range-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: var(--ila-range-thumb-size);
        height: var(--ila-range-thumb-size);
        background: var(--ila-white);
        border-radius: 50%;*/
        /* CHANGED: Default thumb border to dark blue for more 'enabled' look */
        /*border: var(--ila-range-thumb-border-width) solid var(--ila-blue-dark);*/
        /* Vertically center thumb on track */
        /*margin-top: calc((var(--ila-range-track-height) - var(--ila-range-thumb-size)) / 2);
        transition: background-color 0.25s ease, border-color 0.25s ease;
    }*/

    /* Hover states for WebKit */
    /*input[type="range"].ila-range-slider:hover::-webkit-slider-thumb {
        border-color: var(--ila-orange);*/ /* Orange for hover, consistent */
    /*}*/

    /* Focus outline for the whole input */
    /*input[type="range"].ila-range-slider:focus-visible {
        outline: 3px solid var(--ila-blue-dark);
        outline-offset: 0.2em;
    }*/

        /* Focus states for WebKit - track and thumb change */
        /*input[type="range"].ila-range-slider:focus-visible::-webkit-slider-runnable-track {
            background: var(--ila-blue-light);*/ /* Track bg changes to light blue */
        /*}

        input[type="range"].ila-range-slider:focus-visible::-webkit-slider-thumb {
            background-color: var(--ila-blue-dark);*/ /* Thumb bg changes to dark blue */
            /*border-color: var(--ila-blue-light);*/ /* Thumb border changes to light blue */
        /*}*/

    /* Active (dragging) states for WebKit thumb */
    /*input[type="range"].ila-range-slider:active::-webkit-slider-thumb {
        background-color: var(--ila-blue-dark);
        border-color: var(--ila-blue-dark);
    }*/


    /* === Mozilla Firefox === */
    /*input[type="range"].ila-range-slider::-moz-range-track {
        width: 100%;
        height: var(--ila-range-track-height);
        background: var(--ila-storm-85);*/ /* Default track color */
        /*border-radius: var(--ila-range-track-border-radius);
        border: none;
        transition: background 0.25s ease;
    }

    input[type="range"].ila-range-slider::-moz-range-thumb {
        width: var(--ila-range-thumb-size);
        height: var(--ila-range-thumb-size);
        background: var(--ila-white);
        border-radius: 50%;*/
        /* CHANGED: Default thumb border to dark blue */
        /*border: var(--ila-range-thumb-border-width) solid var(--ila-blue-dark);
        transition: background-color 0.25s ease, border-color 0.25s ease;
    }*/

    /* Progress fill for Firefox */
    /*input[type="range"].ila-range-slider::-moz-range-progress {
        background-color: var(--ila-blue-dark);*/ /* "Active" color for filled part */
        /*height: var(--ila-range-track-height);
        border-radius: var(--ila-range-track-border-radius);
        border: none;
    }*/

    /* Hover states for Firefox */
    /*input[type="range"].ila-range-slider:hover::-moz-range-thumb {
        border-color: var(--ila-orange);
    }*/

    /* Focus states for Firefox */
    /*input[type="range"].ila-range-slider:focus-visible::-moz-range-track {
        background: var(--ila-blue-light);
    }

    input[type="range"].ila-range-slider:focus-visible::-moz-range-thumb {
        background-color: var(--ila-blue-dark);
        border-color: var(--ila-blue-light);
    }

    input[type="range"].ila-range-slider:focus-visible::-moz-range-progress {
        background-color: var(--ila-blue-dark);
    }*/

    /* Active (dragging) states for Firefox thumb */
    /*input[type="range"].ila-range-slider:active::-moz-range-thumb {
        background-color: var(--ila-blue-dark);
        border-color: var(--ila-blue-dark);
    }*/


    /* === Microsoft Edge (Legacy) & IE === */
    /*input[type="range"].ila-range-slider::-ms-track {
        width: 100%;
        height: var(--ila-range-track-height);
        background: transparent;
        border-color: transparent;
        border-width: calc(var(--ila-range-thumb-size) / 2) 0;
        color: transparent;
        transition: background 0.25s ease;
    }

    input[type="range"].ila-range-slider::-ms-fill-lower {
        background: var(--ila-blue-dark);*/ /* Filled part */
        /*border-radius: var(--ila-range-track-border-radius);
        transition: background 0.25s ease;
    }

    input[type="range"].ila-range-slider::-ms-fill-upper {
        background: var(--ila-storm-85);*/ /* Unfilled part - default track color */
        /*border-radius: var(--ila-range-track-border-radius);
        transition: background 0.25s ease;
    }

    input[type="range"].ila-range-slider::-ms-thumb {
        width: var(--ila-range-thumb-size);
        height: var(--ila-range-thumb-size);
        background: var(--ila-white);
        border-radius: 50%;*/
        /* CHANGED: Default thumb border to dark blue */
        /*border: var(--ila-range-thumb-border-width) solid var(--ila-blue-dark);
        margin-top: 0px;
        transition: background-color 0.25s ease, border-color 0.25s ease;
    }*/

    /* Hover states for IE/Edge Legacy */
    /*input[type="range"].ila-range-slider:hover::-ms-thumb {
        border-color: var(--ila-orange);
    }*/

    /* Focus states for IE/Edge Legacy */
    /*input[type="range"].ila-range-slider:focus-visible::-ms-fill-upper {
        background: var(--ila-blue-light);
    }

    input[type="range"].ila-range-slider:focus-visible::-ms-fill-lower {
        background: var(--ila-blue-dark);
    }

    input[type="range"].ila-range-slider:focus-visible::-ms-thumb {
        background-color: var(--ila-blue-dark);
        border-color: var(--ila-blue-light);
    }*/

    /* Active (dragging) states for IE/Edge Legacy thumb */
    /*input[type="range"].ila-range-slider:active::-ms-thumb {
        background-color: var(--ila-blue-dark);
        border-color: var(--ila-blue-dark);
    }*/


    /* === Disabled State (Common logic, applied with browser-specific selectors) === */
    /*input[type="range"].ila-range-slider:disabled {
        cursor: not-allowed;
    }*/

        /* Disabled WebKit */
        /*input[type="range"].ila-range-slider:disabled::-webkit-slider-runnable-track {
            background: var(--ila-storm-60);
        }

        input[type="range"].ila-range-slider:disabled::-webkit-slider-thumb {
            background: var(--ila-white);
            border-color: var(--ila-storm-60);*/ /* Clearly different from new default blue border */
            /*cursor: not-allowed;
        }*/

        /* Disabled Firefox */
        /*input[type="range"].ila-range-slider:disabled::-moz-range-track {
            background: var(--ila-storm-60);
        }

        input[type="range"].ila-range-slider:disabled::-moz-range-thumb {
            background: var(--ila-white);
            border-color: var(--ila-storm-60);
            cursor: not-allowed;
        }

        input[type="range"].ila-range-slider:disabled::-moz-range-progress {
            background-color: var(--ila-storm-85);
        }*/

        /* Disabled IE/Edge Legacy */
        /*input[type="range"].ila-range-slider:disabled::-ms-fill-lower {
            background: var(--ila-storm-85);
        }

        input[type="range"].ila-range-slider:disabled::-ms-fill-upper {
            background: var(--ila-storm-60);
        }

        input[type="range"].ila-range-slider:disabled::-ms-thumb {
            background: var(--ila-white);
            border-color: var(--ila-storm-60);
            cursor: not-allowed;
        }*/

/* Reduced motion - remove transitions */
/*@media screen and (prefers-reduced-motion: reduce) {
    input[type="range"].ila-range-slider::-webkit-slider-runnable-track,
    input[type="range"].ila-range-slider::-webkit-slider-thumb,
    input[type="range"].ila-range-slider::-moz-range-track,
    input[type="range"].ila-range-slider::-moz-range-thumb,
    input[type="range"].ila-range-slider::-moz-range-progress,
    input[type="range"].ila-range-slider::-ms-track,
    input[type="range"].ila-range-slider::-ms-fill-lower,
    input[type="range"].ila-range-slider::-ms-fill-upper,
    input[type="range"].ila-range-slider::-ms-thumb {
        transition: none !important;
    }
}*/

/* Print styles - ensure colors are printed */
/*@media print {
    input[type="range"].ila-range-slider,
    input[type="range"].ila-range-slider::-webkit-slider-runnable-track,
    input[type="range"].ila-range-slider::-webkit-slider-thumb,
    input[type="range"].ila-range-slider::-moz-range-track,
    input[type="range"].ila-range-slider::-moz-range-thumb,
    input[type="range"].ila-range-slider::-moz-range-progress,
    input[type="range"].ila-range-slider::-ms-fill-lower,
    input[type="range"].ila-range-slider::-ms-fill-upper,
    input[type="range"].ila-range-slider::-ms-thumb {
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}*/