/*
 * Envio24 – Ultimate Member Forms Override
 *
 * Nadpisuje domyślne style Ultimate Member i Kadence dla stron:
 * logowania, rejestracji (particular/empresarial), wyboru konta i resetu hasła.
 * Bazuje na wspólnych tokenach z theme-tokens.css.
 *
 * @version 2.1.0
 * @package envio24-core/assets/css/
 *
 * ZMIANY 2.1.0 (PL):
 * - Poprawka kolorów stanu "filled" inputów:
 *   Ramka i tło wypełnionego pola przepięte na nowe dedykowane tokeny
 *   --e24-input-filled-border i --e24-input-filled-bg-new (żółta tonacja).
 *   Fallbacki (#E9C931, #FEF6E1) zabezpieczają przed brakiem tokenu w przeglądarce.
 * - Stan fokus (e24-um-focus) pozostaje bez zmian – pomarańcz CTA.
 * - Reguła filled+focus (gdy obie klasy aktywne jednocześnie) zawsze
 *   wyświetla pomarańczowy fokus – wygrywa nad samym filled.
 * - Sekcja 15 (Select2 dropdown): opcja zaznaczona używa teraz
 *   --e24-input-filled-bg-new zamiast --e24-input-filled-bg,
 *   dla spójności z nową kolorystyką.
 *
 * ZMIANY 2.0.0 (PL):
 * - Dodano sekcję 15: precyzyjny override szarego hover / highlighted
 *   dla dropdownów Select2 w formularzach UM.
 * - Użyto właściwych tokenów z theme-tokens.css.
 * - Zachowano biały background dropdownu.
 * - Nie ruszano logiki flag ani JS – tylko estetyka hovera.
 *
 * SPIS TREŚCI (PL):
 * 1) Kontener formularza UM
 * 2) Etykiety pól
 * 3) Wrapper PLAIN – zwykłe inputy
 * 4) Wrapper PASSWORD – inputy z oczkiem
 * 5) Wrapper SELECT2 – selecty z widgetem
 * 6) Select2 – układ wewnętrzny (rendered + clear + arrow)
 * 7) Stany: focus / filled (wspólne dla wszystkich typów)
 * 8) Checkbox i radio
 * 9) Komunikaty błędów i notice
 * 10) Przyciski primary / secondary
 * 11) Linki pomocnicze
 * 12) Ikona pokazywania hasła
 * 13) Odstępy i układ
 * 14) RWD
 * 15) Select2 dropdown – override szarego hover (UM)
 */

/* ========================================
 * 1. KONTENER FORMULARZA UM
 * ===================================== */

.um-form,
.um .um-form {
    font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--e24-text-main);
}

.um-col-1,
.um-col-2,
.um-col-auto,
.um .um-col-1,
.um .um-col-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ========================================
 * 2. ETYKIETY PÓL
 * ===================================== */

.um-form label:not(.um-field-checkbox):not(.um-field-radio),
.um .um-form label:not(.um-field-checkbox):not(.um-field-radio),
.um-field-label label,
.um .um-field-label label {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--e24-text-main) !important;
    font-family: "Open Sans", system-ui, sans-serif !important;
    line-height: 1.4 !important;
}

/* ========================================
 * 3. WRAPPER PLAIN – zwykłe inputy / textarea
 * ===================================== */

.um-form .um-field .um-field-area.e24-um-type-plain,
.um .um-form .um-field .um-field-area.e24-um-type-plain {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    border: 1px solid var(--e24-input-border) !important;
    border-radius: 6px !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition:
        border-color 0.2s ease-out,
        background-color 0.2s ease-out !important;
}

.um-form .um-field .um-field-area.e24-um-type-plain > input.um-form-field,
.um-form .um-field .um-field-area.e24-um-type-plain > textarea.um-form-field,
.um .um-form .um-field .um-field-area.e24-um-type-plain > input.um-form-field,
.um .um-form .um-field .um-field-area.e24-um-type-plain > textarea.um-form-field {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    border: 0 !important;
    outline: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-family: "Open Sans", system-ui, sans-serif !important;
    color: var(--e24-text-input) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ========================================
 * 4. WRAPPER PASSWORD – inputy z oczkiem
 * ===================================== */

.um-form .um-field .um-field-area.e24-um-type-password,
.um .um-form .um-field .um-field-area.e24-um-type-password {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    border: 1px solid var(--e24-input-border) !important;
    border-radius: 6px !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition:
        border-color 0.2s ease-out,
        background-color 0.2s ease-out !important;
}

.um-form .um-field .um-field-area.e24-um-type-password .um-field-area-password,
.um .um-form .um-field .um-field-area.e24-um-type-password .um-field-area-password {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.um-form .um-field .um-field-area.e24-um-type-password .um-field-area-password > input.um-form-field,
.um .um-form .um-field .um-field-area.e24-um-type-password .um-field-area-password > input.um-form-field {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 8px 44px 8px 14px !important;
    border: 0 !important;
    outline: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-family: "Open Sans", system-ui, sans-serif !important;
    color: var(--e24-text-input) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ========================================
 * 5. WRAPPER SELECT2 – selecty z widgetem
 * ===================================== */

.um-form .um-field .um-field-area.e24-um-type-select2,
.um .um-form .um-field .um-field-area.e24-um-type-select2 {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    border: 1px solid var(--e24-input-border) !important;
    border-radius: 6px !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transition:
        border-color 0.2s ease-out,
        background-color 0.2s ease-out !important;
}

.um-form .um-field .um-field-area.e24-um-type-select2 .select2-container,
.um .um-form .um-field .um-field-area.e24-um-type-select2 .select2-container {
    width: 100% !important;
}

.um-form .um-field .um-field-area.e24-um-type-select2 .select2-container .select2-selection--single,
.um .um-form .um-field .um-field-area.e24-um-type-select2 .select2-container .select2-selection--single {
    min-height: 44px !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

/* ========================================
 * 6. SELECT2 – układ wewnętrzny
 *    (rendered + clear + arrow)
 *
 *    Układ:  [tekst kraju] ........... [X] [▼]
 * ===================================== */

/* Kontener renderowanego tekstu */
.um-form .um-field .um-field-area.e24-um-type-select2 .select2-selection__rendered,
.um .um-form .um-field .um-field-area.e24-um-type-select2 .select2-selection__rendered {
    display: block !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: 0 0 0 14px !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 44px !important;
    font-family: "Open Sans", system-ui, sans-serif !important;
    color: var(--e24-text-input) !important;
}

/* Przycisk X (clear) – po prawej, przed strzałką */
.um-form .um-field .um-field-area.e24-um-type-select2 .select2-selection__clear,
.um .um-form .um-field .um-field-area.e24-um-type-select2 .select2-selection__clear {
    position: absolute !important;
    right: 30px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    order: 2 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--e24-text-muted) !important;
    cursor: pointer !important;
    transition: color 0.12s ease !important;
    z-index: 5 !important;
}

.um-form .um-field .um-field-area.e24-um-type-select2 .select2-selection__clear:hover,
.um .um-form .um-field .um-field-area.e24-um-type-select2 .select2-selection__clear:hover {
    color: var(--e24-error-border) !important;
}

/* Strzałka (arrow) – skrajnie po prawej */
.um-form .um-field .um-field-area.e24-um-type-select2 .select2-selection__arrow,
.um .um-form .um-field .um-field-area.e24-um-type-select2 .select2-selection__arrow {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    order: 3 !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Padding po prawej na renderowanym tekście */
.um-form .um-field .um-field-area.e24-um-type-select2 .select2-selection--single .select2-selection__rendered,
.um .um-form .um-field .um-field-area.e24-um-type-select2 .select2-selection--single .select2-selection__rendered {
    padding-right: 56px !important;
}

/* Placeholder */
.um-form .um-field .um-field-area.e24-um-type-plain > input.um-form-field::placeholder,
.um-form .um-field .um-field-area.e24-um-type-plain > textarea.um-form-field::placeholder,
.um-form .um-field .um-field-area.e24-um-type-password .um-field-area-password > input.um-form-field::placeholder,
.um .um-form .um-field .um-field-area.e24-um-type-plain > input.um-form-field::placeholder,
.um .um-form .um-field .um-field-area.e24-um-type-plain > textarea.um-form-field::placeholder,
.um .um-form .um-field .um-field-area.e24-um-type-password .um-field-area-password > input.um-form-field::placeholder {
    color: #B0B0B0 !important;
    opacity: 1 !important;
    font-size: 14px !important;
}

/* ========================================
 * 7. STANY: FOCUS / FILLED
 *
 * UWAGA (PL):
 * JS (um-forms.js) nadaje klasy e24-um-focus i e24-um-filled niezależnie –
 * obie mogą być aktywne jednocześnie (podczas edycji wypełnionego pola).
 * Dlatego reguła "filled + focus" musi być zdefiniowana OSOBNO i nadpisywać
 * sam stan "filled". Kolejność reguł w CSS decyduje – focus wygrywa.
 * ===================================== */

/*
 * Stan FOKUS – pomarańcz CTA (bez zmian).
 * Aktywowany przez JS klasą e24-um-focus na wrapperze.
 */
.um-form .um-field .um-field-area.e24-um-control-area.e24-um-focus,
.um .um-form .um-field .um-field-area.e24-um-control-area.e24-um-focus {
    border-color: var(--e24-input-focus-border) !important;
    background-color: var(--e24-input-focus-bg) !important;
}

/*
 * Stan FILLED – żółta tonacja (nowe dedykowane tokeny).
 * Aktywowany przez JS klasą e24-um-filled na wrapperze.
 * Fallbacki (#E9C931, #FEF6E1) zabezpieczają przed brakiem tokenu.
 * WAŻNE: ta reguła NIE może mieć !important silniejszego niż reguła focus+filled
 * – kolejność deklaracji w CSS rozwiązuje konflikt (focus+filled jest poniżej).
 */
.um-form .um-field .um-field-area.e24-um-control-area.e24-um-filled,
.um .um-form .um-field .um-field-area.e24-um-control-area.e24-um-filled {
    border-color: var(--e24-input-filled-border, #E9C931) !important;
    background-color: var(--e24-input-filled-bg-new, #FEF6E1) !important;
}

/*
 * Stan FILLED + FOKUS jednocześnie – wygrywa pomarańczowy fokus.
 * Reguła musi być ZA regułą samego filled (wyższa specyficzność selektora
 * z dwiema klasami .e24-um-filled.e24-um-focus wystarczy do nadpisania).
 */
.um-form .um-field .um-field-area.e24-um-control-area.e24-um-filled.e24-um-focus,
.um .um-form .um-field .um-field-area.e24-um-control-area.e24-um-filled.e24-um-focus {
    border-color: var(--e24-input-focus-border) !important;
    background-color: var(--e24-input-focus-bg) !important;
}

/* Disabled – bez zmian */
.um-form .um-field .um-field-area.e24-um-control-area > input.um-form-field:disabled,
.um-form .um-field .um-field-area.e24-um-control-area > textarea.um-form-field:disabled,
.um-form .um-field .um-field-area.e24-um-control-area .um-field-area-password > input.um-form-field:disabled,
.um .um-form .um-field .um-field-area.e24-um-control-area > input.um-form-field:disabled,
.um .um-form .um-field .um-field-area.e24-um-control-area > textarea.um-form-field:disabled,
.um .um-form .um-field .um-field-area.e24-um-control-area .um-field-area-password > input.um-form-field:disabled {
    color: var(--e24-text-disabled) !important;
    background-color: transparent !important;
    cursor: default !important;
}

/* ========================================
 * 8. CHECKBOX I RADIO
 * ===================================== */

.um-form label.um-field-checkbox,
.um-form label.um-field-radio,
.um .um-form label.um-field-checkbox,
.um .um-form label.um-field-radio {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    font-weight: 400 !important;
}

.um-field-checkbox-state i,
.um-field-radio-state i,
.um .um-field-checkbox-state i,
.um .um-field-radio-state i {
    color: var(--e24-text-input) !important;
    transition: color 0.2s ease !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
}

.um-field-checkbox.active i,
.um-field-radio.active i,
.um .um-field-checkbox.active i,
.um .um-field-radio.active i {
    color: var(--e24-orange) !important;
}

.um-field-checkbox-option,
.um-field-radio-option,
.um .um-field-checkbox-option,
.um .um-field-radio-option {
    margin-left: 24px !important;
    font-size: 14px !important;
    color: var(--e24-text-main) !important;
    line-height: 1.65 !important;
    display: block !important;
}

.um-field-checkbox input[type="checkbox"],
.um-field-radio input[type="radio"],
.um .um-field-checkbox input[type="checkbox"],
.um .um-field-radio input[type="radio"] {
    display: none !important;
}

/* ========================================
 * 9. KOMUNIKATY BŁĘDÓW I NOTICE
 * ===================================== */

.um-field-error,
.um .um-field-error,
.um-notice.um-notice-error,
.um .um-notice.um-notice-error {
    background-color: var(--e24-error-bg) !important;
    border: 2px solid var(--e24-error-border) !important;
    color: var(--e24-error-text) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
}

.um-notice.um-notice-warning,
.um .um-notice.um-notice-warning {
    background-color: var(--e24-warn-bg) !important;
    border: 2px solid var(--e24-warn-border) !important;
    color: var(--e24-warn-text) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
}

.um-notice.um-notice-success,
.um .um-notice.um-notice-success {
    background-color: #EDF7ED !important;
    border: 2px solid #4CAF50 !important;
    color: #2E7D32 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
}

.um-notice,
.um .um-notice {
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    margin-bottom: 12px !important;
}

/* ========================================
 * 10. PRZYCISKI PRIMARY / SECONDARY
 * ===================================== */

/* Wspólne reguły */
.um-button,
input.um-button,
button.um-button,
a.um-button,
.um-form input[type="submit"],
.um .um-form input[type="submit"] {
    width: 100% !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    font-family: "Rubik", sans-serif !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    background-image: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease,
        filter 0.2s ease !important;
}

/* Primary jako input */
input.um-button,
.um-form input[type="submit"],
.um .um-form input[type="submit"] {
    display: block !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 25px !important;
    line-height: 40px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

/* Secondary / anchor */
a.um-button,
.um a.um-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 25px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* PRIMARY – kolory */
.um-button,
input.um-button,
.um-form input[type="submit"],
.um .um-form input[type="submit"] {
    border: 2px solid transparent !important;
    background-color: var(--e24-orange) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    outline: none !important;
}

.um-button:hover,
input.um-button:hover,
.um-form input[type="submit"]:hover,
.um .um-form input[type="submit"]:hover {
    background-color: var(--e24-orange) !important;
    color: #FFFFFF !important;
    filter: brightness(0.92) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important;
}

.um-button:active,
input.um-button:active,
.um-form input[type="submit"]:active,
.um .um-form input[type="submit"]:active {
    background-color: var(--e24-orange) !important;
    color: #FFFFFF !important;
    filter: brightness(0.92) !important;
    transform: translateY(0) scale(0.99) !important;
    box-shadow: none !important;
}

/* SECONDARY – kolory */
.um-button.um-alt,
a.um-button.um-alt,
.um .um-button.um-alt,
.um a.um-button.um-alt {
    border: 2px solid var(--e24-orange) !important;
    background-color: transparent !important;
    color: var(--e24-orange) !important;
    filter: none !important;
}

.um-button.um-alt:hover,
a.um-button.um-alt:hover,
.um .um-button.um-alt:hover,
.um a.um-button.um-alt:hover {
    background-color: var(--e24-input-focus-bg) !important;
    color: var(--e24-orange) !important;
    text-decoration: none !important;
    filter: none !important;
    box-shadow: none !important;
}

.um-button.um-alt:active,
a.um-button.um-alt:active,
.um .um-button.um-alt:active,
.um a.um-button.um-alt:active {
    /*
     * Stan active przycisku secondary (PL):
     * Celowo używa --e24-input-filled-bg (stary token, pomarańczowy odcień)
     * a NIE --e24-input-filled-bg-new, bo to element UI (przycisk),
     * a nie pole formularza. Spójność z kolorem CTA jest tu ważniejsza.
     */
    background-color: var(--e24-input-filled-bg) !important;
    color: var(--e24-orange) !important;
    text-decoration: none !important;
    transform: translateY(0) scale(0.99) !important;
    box-shadow: none !important;
}

/* ========================================
 * 11. LINKI POMOCNICZE
 * ===================================== */

.um-form a:not(.um-button),
.um .um-form a:not(.um-button) {
    color: var(--e24-orange) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.12s ease, filter 0.12s ease !important;
}

.um-form a:not(.um-button):hover,
.um .um-form a:not(.um-button):hover {
    color: var(--e24-orange) !important;
    filter: brightness(0.92) !important;
    text-decoration: underline !important;
}

/* Forgot Password / link alt */
.um-col-alt a.um-link-alt,
.um-col-alt a.um-link-alt:link,
.um-col-alt a.um-link-alt:visited,
.um .um-col-alt a.um-link-alt,
.um .um-col-alt a.um-link-alt:link,
.um .um-col-alt a.um-link-alt:visited {
    display: inline-block !important;
    width: auto !important;
    max-width: max-content !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--e24-orange) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.um-col-alt a.um-link-alt:hover,
.um .um-col-alt a.um-link-alt:hover {
    color: var(--e24-orange) !important;
    filter: brightness(0.92) !important;
    text-decoration: underline !important;
}

.um-form a.um-button:hover,
.um .um-form a.um-button:hover {
    text-decoration: none !important;
}

/* ========================================
 * 12. IKONA POKAZYWANIA HASŁA
 * ===================================== */

.um-toggle-password,
.um .um-toggle-password {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.um-toggle-password i,
.um .um-toggle-password i {
    color: var(--e24-text-muted) !important;
    font-size: 18px !important;
    transition: color 0.12s ease !important;
}

.um-toggle-password:hover i,
.um .um-toggle-password:hover i {
    color: var(--e24-orange) !important;
}

/* ========================================
 * 13. ODSTĘPY I UKŁAD
 * ===================================== */

.um-left.um-half,
.um-right.um-half,
.um-col-alt,
.um .um-left.um-half,
.um .um-right.um-half,
.um .um-col-alt {
    margin-top: 20px !important;
}

/* ========================================
 * 14. RWD
 * ===================================== */

@media (max-width: 768px) {
    .um-form .um-field .um-field-area.e24-um-type-plain > input.um-form-field,
    .um-form .um-field .um-field-area.e24-um-type-plain > textarea.um-form-field,
    .um-form .um-field .um-field-area.e24-um-type-password .um-field-area-password > input.um-form-field,
    .um .um-form .um-field .um-field-area.e24-um-type-plain > input.um-form-field,
    .um .um-form .um-field .um-field-area.e24-um-type-plain > textarea.um-form-field,
    .um .um-form .um-field .um-field-area.e24-um-type-password .um-field-area-password > input.um-form-field {
        font-size: 16px !important;
    }

    .um-form .um-field .um-field-area.e24-um-type-select2 .select2-selection__rendered,
    .um .um-form .um-field .um-field-area.e24-um-type-select2 .select2-selection__rendered {
        font-size: 15px !important;
    }

    input.um-button,
    .um-form input[type="submit"],
    .um .um-form input[type="submit"],
    a.um-button,
    .um a.um-button {
        font-size: 15px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 20px !important;
    }

    input.um-button,
    .um-form input[type="submit"],
    .um .um-form input[type="submit"] {
        line-height: 44px !important;
    }
}

/* ========================================
 * 15. SELECT2 DROPDOWN – OVERRIDE SZAREGO HOVER (UM)
 *
 * UWAGA (PL):
 * - Ten plik ładuje się wyłącznie na stronach UM.
 * - Opcja zaznaczona używa teraz --e24-input-filled-bg-new (żółty)
 *   dla spójności z nową kolorystyką wypełnionych pól.
 * - Hover i highlighted pozostają przy --e24-input-focus-bg (pomarańcz).
 * ===================================== */

/* Tło samego dropdownu – białe */
.select2-container--default .select2-dropdown,
.select2-dropdown {
    background-color: #FFFFFF !important;
    border: 1px solid var(--e24-input-border) !important;
    box-shadow: none !important;
}

/* Kontener wyników */
.select2-container--default .select2-results > .select2-results__options,
.select2-results > .select2-results__options {
    background-color: #FFFFFF !important;
}

/* Każda opcja bazowo biała */
.select2-container--default .select2-results__option,
.select2-results__option {
    background-color: #FFFFFF !important;
    color: var(--e24-text-main) !important;
}

/*
 * Hover / highlighted – pomarańczowy fokus (bez zmian).
 * Select2 4.0.13 używa tej klasy dla aktywnego wiersza.
 */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected="false"],
.select2-container--default .select2-results__option--highlighted[aria-selected="true"],
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted[aria-selected="false"],
.select2-results__option--highlighted[aria-selected="true"] {
    background-color: var(--e24-input-focus-bg) !important;
    color: var(--e24-text-main) !important;
    background-image: none !important;
}

/* Dodatkowe zabezpieczenie na czysty hover myszką */
.select2-container--default .select2-results__option:hover,
.select2-results__option:hover {
    background-color: var(--e24-input-focus-bg) !important;
    color: var(--e24-text-main) !important;
    background-image: none !important;
}

/*
 * Opcja zaznaczona (wybrana), ale niehoverowana –
 * żółty kolor filled dla spójności z wypełnionymi polami.
 */
.select2-container--default .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted),
.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background-color: var(--e24-input-filled-bg-new, #FEF6E1) !important;
    color: var(--e24-text-main) !important;
    background-image: none !important;
}

/* Opcja zaznaczona i jednocześnie hoverowana – wygrywa fokus */
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted,
.select2-results__option[aria-selected="true"].select2-results__option--highlighted {
    background-color: var(--e24-input-focus-bg) !important;
    color: var(--e24-text-main) !important;
    background-image: none !important;
}

/* Wymuszenie dla elementów renderowanych jako li */
.select2-results__option[role="treeitem"].select2-results__option--highlighted,
.select2-results__option[role="option"].select2-results__option--highlighted {
    background-color: var(--e24-input-focus-bg) !important;
    color: var(--e24-text-main) !important;
    background-image: none !important;
}