/* ══════════════════════════════════════════════════════════════════════════════════════════
   LE SELECTEUR D'INDICATIF TELEPHONIQUE — L'HABILLAGE, ECRIT UNE SEULE FOIS
   ══════════════════════════════════════════════════════════════════════════════════════════

   Ces regles habillent `intl-tel-input` : la liste des pays devient un menu flottant anime, avec
   un champ de recherche colle en haut, un voile derriere, et une infobulle pour les noms de pays
   trop longs. Rien de tout cela n'est fourni par la bibliotheque.

   ⚠ ELLES ETAIENT ECRITES DANS `auth/register/shop.html`, ET NULLE PART AILLEURS. Le profil du
   vendeur, qui modifie les MEMES numeros, n'avait donc qu'un champ de texte libre ou l'on pouvait
   taper « 228 » sans `+` -- ce qui produit un lien `wa.me` que WhatsApp refuse. L'ecran de
   modification etait moins bon que l'ecran de creation.

   Extraites ici le 2026-08-29 avec leur JavaScript (`static/js/phone-input.js`), sans changer une
   valeur : la page d'inscription doit rendre exactement comme avant.

   ⚠ A CHARGER AVEC `intlTelInput.css`, et APRES lui : plusieurs regles ci-dessous ecrasent les
   siennes (largeur de la liste, rayons, ombre).
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.iti { width: 100%; }
.iti__selected-flag {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    padding-left: 1rem;
}
.iti__country-list {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.95);
    transform-origin: top left;
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.22s;
    pointer-events: none;

    width: 300px !important;
    max-height: 275px !important;
    overflow-y: auto;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid rgba(39, 27, 18, 0.1) !important;
    box-shadow: 0 10px 25px -5px rgba(39, 27, 18, 0.12), 0 8px 10px -6px rgba(39, 27, 18, 0.12) !important;
    padding: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(39, 27, 18, 0.12) transparent !important;
}
.iti__divider {
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}
.iti__country-list::-webkit-scrollbar {
    width: 4px !important;
}
.iti__country-list::-webkit-scrollbar-track {
    background: transparent !important;
}
.iti__country-list::-webkit-scrollbar-thumb {
    background-color: rgba(39, 27, 18, 0.12) !important;
    border-radius: 4px !important;
}
.iti__country-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(39, 27, 18, 0.3) !important;
}
.iti__country-list:not(.iti__hide) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.iti__search-item {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 20;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(39, 27, 18, 0.08);
}
.iti__search-container {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(39, 27, 18, 0.04);
    border-radius: 8px;
    padding: 6px 10px;
    border: 1px solid transparent;
}
.iti__search-container:focus-within {
    background: #ffffff;
    border-color: #FF6B35;
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.15);
}
.iti__search-input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    color: #271B12 !important;
    width: 100% !important;
    height: auto !important;
}
/*  ⚠ AU-DESSUS DES FENETRES MODALES, PAS SEULEMENT AU-DESSUS DE LA PAGE.
    Le selecteur pose sa liste dans `document.body` (`dropdownContainer`). A 1010 il passait
    DERRIERE toute modale du projet, qui vit a `z-5000` : le champ telephone de la fenetre
    « Confirmer votre numero » ouvrait une liste invisible. Une liste deroulante est le dernier
    element ouvert a l'ecran ; sa place est au-dessus de tout ce qui est deja ouvert. */
.iti--container {
    z-index: 6000 !important;
}
.iti__no-results {
    padding: 24px 16px !important;
    text-align: center !important;
    color: rgba(39, 27, 18, 0.5) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    list-style: none !important;
}
#custom-tooltip {
    position: fixed;
    background: #271B12 !important;
    color: #FFF7F2 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 107, 53, 0.25) !important;
    box-shadow: 0 10px 15px -3px rgba(39, 27, 18, 0.2), 0 4px 6px -2px rgba(39, 27, 18, 0.1) !important;
    z-index: 6100 !important;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}
/*  Le voile suit la liste : a 1000 il serait reste sous la modale, et le fond de celle-ci
    serait demeure cliquable pendant que la liste est ouverte. */
#phone-dropdown-overlay {
    position: fixed;
    inset: 0;
    background: rgba(39, 27, 18, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5900;
}
#phone-dropdown-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.iti__country {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    cursor: pointer;
    transition: background-color 0.15s;
}
.iti__country-name {
    font-size: 14px !important;
    color: #271B12 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 145px;
}
.iti__dial-code {
    font-size: 14px !important;
    color: rgba(39, 27, 18, 0.6) !important;
    margin-left: auto;
}
@media (max-width: 640px) {
    .iti--container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        pointer-events: none;
        z-index: 6000 !important;
    }
    .iti__country-list {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0.95) !important;
        transform-origin: center !important;
        width: 90vw !important;
        max-width: 340px !important;
        max-height: 65vh !important;
        z-index: 6010 !important;
        margin: 0 !important;
        pointer-events: auto;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.15) !important;
        border-radius: 24px !important;
    }
    .iti__country-list:not(.iti__hide) {
        transform: translate(-50%, -50%) scale(1) !important;
    }
    .iti__country {
        padding: 14px 20px !important;
    }
    .iti__country-name {
        font-size: 16px !important;
        max-width: 170px !important;
    }
    .iti__dial-code {
        font-size: 16px !important;
    }
    .iti__search-item {
        padding: 12px 16px !important;
    }
    .iti__search-container {
        padding: 10px 14px !important;
        gap: 10px !important;
        border-radius: 12px !important;
    }
    .iti__search-input {
        font-size: 15px !important;
    }
    .iti__search-container i {
        font-size: 18px !important;
    }
}

/* Le verdict du serveur sous le champ : « Numéro invalide pour l'indicatif +228 (Togo). »
   (2026-10-01). Même rouille que les autres erreurs de formulaire. */
.phone-verdict {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    color: #B23A17;
}
.phone-verdict[hidden] {
    display: none;
}