/**
 * Sendit.ma — styles du champ « Ville / District » au checkout.
 *
 * Chargé uniquement sur la page Checkout (voir Sendit_WooCommerce_Hooks::
 * enqueue_checkout_assets). Auparavant ce CSS était injecté en ligne dans le
 * HTML à chaque chargement de page ; il vit maintenant dans un fichier pour
 * être mis en cache par le navigateur.
 */

/* -------------------------------------------------------------------------
 * 1. Masquer les champs natifs remplacés par le champ Sendit.
 *
 * La ville, le code postal ET la région sont redondants : le district Sendit
 * porte déjà l'information de destination. Laisser la région visible affichait
 * deux listes de villes côte à côte, ce qui poussait les clients à remplir la
 * mauvaise.
 * ---------------------------------------------------------------------- */
.wc-block-components-address-form .wc-block-components-address-form__city,
.wc-block-components-address-form .wc-block-components-address-form__postcode,
.wc-block-components-address-form .wc-block-components-address-form__state,
.wc-block-checkout__billing-fields  .wc-block-components-address-form__city,
.wc-block-checkout__billing-fields  .wc-block-components-address-form__postcode,
.wc-block-checkout__billing-fields  .wc-block-components-address-form__state,
.wc-block-checkout__shipping-fields .wc-block-components-address-form__city,
.wc-block-checkout__shipping-fields .wc-block-components-address-form__postcode,
.wc-block-checkout__shipping-fields .wc-block-components-address-form__state,
#billing-city_field, #shipping-city_field,
#billing-postcode_field, #shipping-postcode_field,
#billing-state_field, #shipping-state_field {
    display: none !important;
}

/* -------------------------------------------------------------------------
 * 2. Mise en page du champ Sendit dans la grille d'adresse.
 * ---------------------------------------------------------------------- */
.wc-block-components-address-form #billing-sendit-district,
.wc-block-components-address-form #shipping-sendit-district,
#billing-sendit-district_field,
#shipping-sendit-district_field,
.sendit-district-row {
    grid-column: 1 / -1 !important;
}

.sendit-district-row,
#billing-sendit-district_field,
#shipping-sendit-district_field {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: relative !important;
}

/* -------------------------------------------------------------------------
 * 3. Neutraliser le wrapper WC Blocks autour de notre <select>.
 *
 * WC Blocks rend les selects additionnels dans :
 *   .wc-block-components-select-input
 *     > .wc-blocks-components-select
 *       > .wc-blocks-components-select__container   (bordure + padding)
 *         > label.wc-blocks-components-select__label (label flottant)
 *         > select                                   (masqué par Select2)
 *         > svg.wc-blocks-components-select__expand  (chevron)
 *
 * On désactive tout cela et on laisse Select2 gérer le rendu et le chevron.
 * ---------------------------------------------------------------------- */
.sendit-district-row .wc-blocks-components-select,
.sendit-district-row .wc-blocks-components-select__container,
.sendit-district-row .wc-block-components-text-input,
.sendit-district-row .wc-block-components-combobox {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    position: static !important;
}

.sendit-district-row .wc-blocks-components-select__expand {
    display: none !important;
}

/* Labels natifs masqués : le nôtre est injecté par le JS. */
.sendit-district-row label.wc-blocks-components-select__label,
.sendit-district-row .wc-blocks-components-select__container > label,
.sendit-district-row > label:not(.sendit-district-label),
.sendit-district-row .wc-block-components-text-input > label,
.sendit-district-row .wc-block-components-combobox > label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
    clip: rect(0 0 0 0) !important;
    overflow: hidden !important;
}

label.sendit-district-label {
    display: block !important;
    position: static !important;
    transform: none !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* Le <select> natif reste dans le DOM (accessibilité + soumission). */
.sendit-district-row select.select2-hidden-accessible,
#billing-sendit-district.select2-hidden-accessible,
#shipping-sendit-district.select2-hidden-accessible {
    display: block !important;
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* -------------------------------------------------------------------------
 * 4. Habillage Select2 aligné sur les champs WC Blocks.
 * ---------------------------------------------------------------------- */
.sendit-district-row .select2-container,
#billing-sendit-district_field .select2-container,
#shipping-sendit-district_field .select2-container {
    width: 100% !important;
    display: block;
}

.sendit-district-row .select2-selection--single,
#billing-sendit-district_field .select2-selection--single,
#shipping-sendit-district_field .select2-selection--single {
    height: 50px !important;
    border: 1px solid #50575e !important;
    border-radius: 4px !important;
    padding: 0 12px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

.sendit-district-row .select2-selection--single .select2-selection__rendered,
#billing-sendit-district_field .select2-selection--single .select2-selection__rendered,
#shipping-sendit-district_field .select2-selection--single .select2-selection__rendered {
    line-height: 48px !important;
    padding: 0 !important;
    color: #1e1e1e !important;
    font-size: 16px !important;
    width: 100% !important;
}

.sendit-district-row .select2-selection--single .select2-selection__placeholder,
#billing-sendit-district_field .select2-selection--single .select2-selection__placeholder,
#shipping-sendit-district_field .select2-selection--single .select2-selection__placeholder {
    color: #757575 !important;
}

.sendit-district-row .select2-selection--single .select2-selection__arrow,
#billing-sendit-district_field .select2-selection--single .select2-selection__arrow,
#shipping-sendit-district_field .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
    right: 8px !important;
    top: 0 !important;
}

.sendit-district-row .select2-selection--single .select2-selection__clear,
#billing-sendit-district_field .select2-selection--single .select2-selection__clear,
#shipping-sendit-district_field .select2-selection--single .select2-selection__clear {
    margin-right: 18px !important;
    color: #757575 !important;
    font-size: 18px !important;
}

.sendit-district-row .select2-container--open .select2-selection--single,
#billing-sendit-district_field .select2-container--open .select2-selection--single,
#shipping-sendit-district_field .select2-container--open .select2-selection--single {
    border-color: #2271b1 !important;
    box-shadow: 0 0 0 1px #2271b1 !important;
}

/* Le dropdown Select2 est attaché à <body> : le styler hors de tout scope. */
.sendit-select2-dropdown.select2-dropdown {
    z-index: 100000 !important;
    border: 1px solid #2271b1 !important;
    border-radius: 4px !important;
}

.sendit-select2-dropdown .select2-search--dropdown .select2-search__field {
    padding: 8px 10px !important;
    border: 1px solid #c3c4c7 !important;
    border-radius: 3px !important;
    font-size: 15px !important;
}

.sendit-select2-dropdown .select2-results__option {
    padding: 10px 12px !important;
    font-size: 15px !important;
}

.sendit-select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background-color: #2271b1 !important;
    color: #fff !important;
}

/* -------------------------------------------------------------------------
 * 5. Thème sombre : ne pas forcer un fond blanc sur un thème sombre.
 * ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    .sendit-district-row .select2-selection--single {
        background: #1e1e1e !important;
        border-color: #757575 !important;
    }
    .sendit-district-row .select2-selection--single .select2-selection__rendered {
        color: #f0f0f1 !important;
    }
}