/*
 * WihdaTec Pro – Champs déroulants v1.0.0
 * 12-10-2026 (Montréal) – Présentation SEULEMENT.
 * Toutes les règles restent limitées aux éléments marqués par champs.js.
 * Aucun sélecteur global de grille, de carrousel, de pagination ou de recherche.
 */

/* Select2 : couleur du champ et espace réservé à la flèche. */
.wih-cd-select2.select2-container .select2-selection--single {
    position: relative !important;
    box-sizing: border-box !important;
    background-color: var(--wih-cd-field-bg) !important;
    color: var(--wih-cd-field-text) !important;
    padding-right: calc(var(--wih-cd-arrow-right) + var(--wih-cd-arrow-size) + 21px) !important;
    overflow: hidden !important;
}
.wih-cd-select2.select2-container .select2-selection--single .select2-selection__rendered,
.wih-cd-select2.select2-container .select2-selection--single .select2-selection__placeholder {
    position: static !important;
    display: block !important;
    color: var(--wih-cd-field-text) !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.wih-cd-select2.select2-container .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    display: block !important;
    height: 100% !important;
    width: calc(var(--wih-cd-arrow-size) + 13px) !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    right: var(--wih-cd-arrow-right) !important;
    opacity: 1 !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: none !important;
}
.wih-cd-select2.select2-container .select2-selection--single .select2-selection__arrow b {display:none!important;}
.wih-cd-select2.select2-container .select2-selection--single .select2-selection__arrow::after {
    content: '' !important;
    display: block !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: calc(50% + var(--wih-cd-arrow-y)) !important;
    left: 50% !important;
    width: var(--wih-cd-arrow-size) !important;
    height: var(--wih-cd-arrow-size) !important;
    border: solid var(--wih-cd-arrow-color) !important;
    border-width: 0 var(--wih-cd-arrow-stroke) var(--wih-cd-arrow-stroke) 0 !important;
    transform: translate(-50%, -65%) rotate(45deg) !important;
    pointer-events: none !important;
}
.wih-cd-select2.select2-container--open .select2-selection--single .select2-selection__arrow::after {
    transform: translate(-50%, -25%) rotate(225deg) !important;
}

/* Conserver le X NATIF de Select2, et non créer un effacement qui modifierait la recherche. */
.wih-cd-select2.wih-cd-has-clear.select2-container .select2-selection--single {
    padding-right: calc(var(--wih-cd-arrow-right) + var(--wih-cd-arrow-size) + var(--wih-cd-x-right) + var(--wih-cd-x-size) + 32px) !important;
}
.wih-cd-select2.wih-cd-has-clear.select2-container .select2-selection--single .select2-selection__arrow {
    right: calc(var(--wih-cd-arrow-right) + var(--wih-cd-x-right) + var(--wih-cd-x-size) + 10px) !important;
}
.wih-cd-select2.select2-container .select2-selection--single .select2-selection__clear {
    display: flex !important;
    position: absolute !important;
    float: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    top: calc(50% + var(--wih-cd-x-y)) !important;
    right: var(--wih-cd-x-right) !important;
    left: auto !important;
    width: calc(var(--wih-cd-x-size) + 5px) !important;
    height: calc(var(--wih-cd-x-size) + 7px) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: var(--wih-cd-x-size) !important;
    font-weight: 600 !important;
    color: var(--wih-cd-x-color) !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
}

/* Bootstrap Select, seulement si l'élément a été associé au champ ciblé. */
.wih-cd-bootstrap.bootstrap-select > .dropdown-toggle {
    position: relative !important;
    box-sizing: border-box !important;
    padding-right: calc(var(--wih-cd-arrow-right) + var(--wih-cd-arrow-size) + 25px) !important;
    background-color: var(--wih-cd-field-bg) !important;
    color: var(--wih-cd-field-text) !important;
}
.wih-cd-bootstrap.bootstrap-select > .dropdown-toggle .caret,
.wih-cd-bootstrap.bootstrap-select > .dropdown-toggle .bs-caret {display: none !important;}
.wih-cd-bootstrap.bootstrap-select > .dropdown-toggle::after,
.wih-cd-native-parent::after {
    content: '' !important;
    position: absolute !important;
    display: block !important;
    top: calc(50% + var(--wih-cd-arrow-y)) !important;
    right: calc(var(--wih-cd-arrow-right) + 6px) !important;
    width: var(--wih-cd-arrow-size) !important;
    height: var(--wih-cd-arrow-size) !important;
    box-sizing: border-box !important;
    border: solid var(--wih-cd-arrow-color) !important;
    border-width: 0 var(--wih-cd-arrow-stroke) var(--wih-cd-arrow-stroke) 0 !important;
    transform: translateY(-65%) rotate(45deg) !important;
    pointer-events: none !important;
}
.wih-cd-bootstrap.bootstrap-select.open > .dropdown-toggle::after,
.wih-cd-bootstrap.bootstrap-select.show > .dropdown-toggle::after {
    transform: translateY(-35%) rotate(225deg) !important;
}
.wih-cd-bootstrap.bootstrap-select .dropdown-menu {
    background-color: var(--wih-cd-menu-bg) !important;
    color: var(--wih-cd-menu-text) !important;
}
.wih-cd-bootstrap.bootstrap-select .dropdown-menu li a,
.wih-cd-bootstrap.bootstrap-select .dropdown-menu li a span {
    color: var(--wih-cd-menu-text) !important;
}

/* Listes natives : flèche sur le parent, uniquement lorsque celui-ci ne
 * contient qu'un seul élément <select>, afin de ne pas déplacer les formulaires. */
.wih-cd-native-parent {position:relative !important;}
.wih-cd-native-parent > select.wih-cd-native {
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: calc(var(--wih-cd-arrow-right) + var(--wih-cd-arrow-size) + 25px) !important;
    background-color: var(--wih-cd-field-bg) !important;
    color: var(--wih-cd-field-text) !important;
}
.wih-cd-native-parent:has(> select.select2-hidden-accessible)::after {display:none!important;}

/* Select2 ouvre souvent son menu dans <body> : couleur seulement pour le popup
 * relié à un select marqué, par la classe ajoutée temporairement en JS. */
.wih-cd-popup .select2-dropdown,
.wih-cd-popup .select2-results__options,
.wih-cd-popup .select2-results__option {
    background-color: var(--wih-cd-menu-bg) !important;
    color: var(--wih-cd-menu-text) !important;
}

@media (max-width: 767px) {
    .wih-cd-select2, .wih-cd-bootstrap, .wih-cd-native-parent, .wih-cd-popup {
        --wih-cd-arrow-color: var(--wih-cd-mobile-arrow-color) !important;
        --wih-cd-x-color: var(--wih-cd-mobile-x-color) !important;
        --wih-cd-field-bg: var(--wih-cd-mobile-field-bg) !important;
        --wih-cd-field-text: var(--wih-cd-mobile-field-text) !important;
        --wih-cd-menu-bg: var(--wih-cd-mobile-menu-bg) !important;
        --wih-cd-menu-text: var(--wih-cd-mobile-menu-text) !important;
    }
}

/* Arabe RTL : X au bord gauche ; flèche voisine, sans chevauchement. */
html[dir='rtl'] .wih-cd-select2.select2-container .select2-selection--single {
    padding-left: calc(var(--wih-cd-arrow-right) + var(--wih-cd-arrow-size) + 21px) !important;
    padding-right: 8px !important;
}
html[dir='rtl'] .wih-cd-select2.select2-container .select2-selection--single .select2-selection__arrow {
    left: var(--wih-cd-arrow-right) !important;
    right: auto !important;
}
html[dir='rtl'] .wih-cd-select2.wih-cd-has-clear.select2-container .select2-selection--single {
    padding-left: calc(var(--wih-cd-arrow-right) + var(--wih-cd-arrow-size) + var(--wih-cd-x-right) + var(--wih-cd-x-size) + 32px) !important;
    padding-right: 8px !important;
}
html[dir='rtl'] .wih-cd-select2.wih-cd-has-clear.select2-container .select2-selection--single .select2-selection__arrow {
    left: calc(var(--wih-cd-arrow-right) + var(--wih-cd-x-right) + var(--wih-cd-x-size) + 10px) !important;
    right: auto !important;
}
html[dir='rtl'] .wih-cd-select2.select2-container .select2-selection--single .select2-selection__clear {
    left: var(--wih-cd-x-right) !important;
    right: auto !important;
}
html[dir='rtl'] .wih-cd-bootstrap.bootstrap-select > .dropdown-toggle,
html[dir='rtl'] .wih-cd-native-parent > select.wih-cd-native {
    padding-left: calc(var(--wih-cd-arrow-right) + var(--wih-cd-arrow-size) + 25px) !important;
    padding-right: 8px !important;
}
html[dir='rtl'] .wih-cd-bootstrap.bootstrap-select > .dropdown-toggle::after,
html[dir='rtl'] .wih-cd-native-parent::after {
    left: calc(var(--wih-cd-arrow-right) + 6px) !important;
    right: auto !important;
}