/**
 * Country Select - Select Pays avec drapeaux (Elementor)
 * Dépendances : flag-icons (drapeaux), Tom Select (UI)
 * Fallback : si JS non chargé, le select natif reste inchangé.
 */

/* Flag Icons - drapeaux pays */
@import url('https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css');

/* Tom Select - base (chargé uniquement si besoin de surcharge, sinon via enqueue PHP) */
@import url('https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.css');

/* ==========================================================================
   Ciblage : select Pays Elementor (#form-field-country)
   ========================================================================== */

.elementor-form .ts-wrapper.has-country-flags,
body .elementor-form .ts-wrapper.has-country-flags {
    padding:0;
}

/* Wrapper : même largeur que les autres champs, pas de bordure/ombre en double */
.elementor-form .ts-wrapper.has-country-flags,
body .elementor-form .ts-wrapper.has-country-flags {
    min-width: 0;
    width: 100%;
    border: none !important;
    box-shadow: none !important;
}

/* Champ Pays = même rendu que les autres champs (Vous êtes, Service, etc.) */
.elementor-form .ts-wrapper.has-country-flags .ts-control,
body .elementor-form .ts-wrapper.has-country-flags .ts-control {
    min-height: 40px;
    padding: 10px 40px 10px 14px; /* droite: place pour le caret */
    background-color: #f5f5f5;
    border: 0px;
    border-radius: 4px;
    box-shadow: none !important;
    font-size: inherit;
    line-height: 1.5;
    color: #7A7A7A;
    position: relative;
}

/* Placeholder personnalisé (affiché en JS car controlInput: null) */
.elementor-form .ts-wrapper.has-country-flags .ts-control .country-select-placeholder,
body .elementor-form .ts-wrapper.has-country-flags .ts-control .country-select-placeholder {
    color: #7A7A7A;
    pointer-events: none;
}

/* Placeholder Tom Select / input (secours) */
.elementor-form .ts-wrapper.has-country-flags .ts-control .placeholder,
body .elementor-form .ts-wrapper.has-country-flags .ts-control .placeholder {
    color: #9ca3af;
}

.elementor-form .ts-wrapper.has-country-flags .ts-control input::placeholder,
body .elementor-form .ts-wrapper.has-country-flags .ts-control input::placeholder {
    color: #9ca3af;
}

/* Caret : tout à droite du champ, toujours visible */
.elementor-form .ts-wrapper.has-country-flags .ts-control .dropdown,
body .elementor-form .ts-wrapper.has-country-flags .ts-control .dropdown {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #6b7280;
    pointer-events: none;
}

.elementor-form .ts-wrapper.has-country-flags .ts-control .dropdown::after,
body .elementor-form .ts-wrapper.has-country-flags .ts-control .dropdown::after {
    border-top-color: #6b7280;
    border-width: 5px 4px 0 4px;
}

/* Focus : même comportement que les autres champs (léger changement de bordure, pas de outline) */
.elementor-form .ts-wrapper.has-country-flags.focus .ts-control,
.elementor-form .ts-wrapper.has-country-flags .ts-control:focus-within,
body .elementor-form .ts-wrapper.has-country-flags.focus .ts-control,
body .elementor-form .ts-wrapper.has-country-flags .ts-control:focus-within {
    border-color: #a0a5aa;
    background-color: #f5f5f5;
    outline: none;
    box-shadow: none !important;
}

/* Option et item : alignement drapeau + texte avec espace entre drapeau et nom */
.elementor-form .ts-wrapper.has-country-flags .ts-dropdown .option .country-option,
.elementor-form .ts-wrapper.has-country-flags .item .country-item,
body .elementor-form .ts-wrapper.has-country-flags .option .country-option,
body .elementor-form .ts-wrapper.has-country-flags .item .country-item {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* espace net entre drapeau et nom */
}

.elementor-form .ts-wrapper.has-country-flags .fi,
body .elementor-form .ts-wrapper.has-country-flags .fi {
    flex-shrink: 0;
    width: 1.25em;
    height: 0.9375em; /* 4:3 */
    border-radius: 1px;
    margin-right: 4px; /* espace supplémentaire après le drapeau */
}

.elementor-form .ts-wrapper.has-country-flags .ts-control input,
body .elementor-form .ts-wrapper.has-country-flags .ts-control input {
    font-size: inherit;
    padding: 0;
    min-height: 0;
    color: #374151;
}

/* Item sélectionné (affiché dans le champ) : même rendu que les autres champs */
.elementor-form .ts-wrapper.has-country-flags .ts-control .item,
body .elementor-form .ts-wrapper.has-country-flags .ts-control .item {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
}

/* Dropdown : pas de champ recherche, uniquement la liste scrollable */
.elementor-form .ts-wrapper.has-country-flags .ts-dropdown .ts-control input,
.elementor-form .ts-wrapper.has-country-flags .ts-dropdown .input-group,
body .elementor-form .ts-wrapper.has-country-flags .ts-dropdown .ts-control input,
body .elementor-form .ts-wrapper.has-country-flags .ts-dropdown .input-group {
    display: none !important;
}

/* Dropdown : liste des options */
.elementor-form .ts-wrapper.has-country-flags .ts-dropdown .option,
body .elementor-form .ts-wrapper.has-country-flags .ts-dropdown .option {
    padding: 10px 15px;
}