/**
 * =============================================================================
 * eWazo — Composant téléphone international (réutilisable)
 * =============================================================================
 * Un seul fichier CSS partagé par TOUTES les pages qui utilisent le
 * composant (public ET Admin, voir assets/js/phone-input.js) — jamais de
 * copie locale de ces styles.
 * =============================================================================
 */

.ewazo-phone-field {
    /* Le formulaire parent (.ic-form-group, voir style.css) est en
       "display:flex; flex-direction:column; align-items:flex-end" — sans
       largeur explicite ici, ce champ (contrairement aux autres, tous en
       ".input-group" qui ont "width:100%" dans le thème) se réduisait à la
       largeur de son contenu et se collait au bord droit du formulaire,
       ce qui le faisait paraître décalé/déborder par rapport aux autres
       champs sur mobile. width:100% + box-sizing le force à occuper
       exactement la même largeur que les autres champs, dans tous les
       formulaires qui utilisent ce composant. */
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.ewazo-phone-control {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(23, 145, 56, 0.25);
    border-radius: var(--border-radius, 10px);
    overflow: hidden;
    background: #fff;
}

/* Formulaires publics (sign-up, edit-profile, complete-profile) : ces
   pages utilisent des champs "input-lg input-rounded" (55px de haut,
   arrondi pilule 50px, voir assets/css/style.css) — on aligne le champ
   téléphone sur cette même taille UNIQUEMENT dans ce contexte, pour ne
   pas changer sa taille dans l'Admin (champs 40px, arrondi léger, voir
   Admin/assets/css/forms.css) qui n'a jamais été signalé comme cassé. */
.ic-form-group .ewazo-phone-control {
    height: 55px;
    border-radius: 50px;
}

.ewazo-phone-country-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: none;
    border-right: 1px solid rgba(23, 145, 56, 0.2);
    background: rgba(23, 145, 56, 0.06);
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}

.ewazo-phone-flag {
    font-size: 18px;
    line-height: 1;
}

.ewazo-phone-dial {
    font-weight: 600;
}

.ewazo-phone-local {
    flex: 1 1 auto;
    box-sizing: border-box;
    border: none !important;
    outline: none;
    padding: 10px 12px;
    font-size: 14px;
    min-width: 0;
    /* Même fond que le reste du champ : sinon le fond blanc par défaut de
       l'input tranchait avec le fond du bouton pays à gauche. */
    background: transparent;
}

.ewazo-phone-dropdown {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    width: 260px;
    max-width: 90vw;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 8px;
}

.ewazo-phone-search {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 6px;
}

.ewazo-phone-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.ewazo-phone-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
}

.ewazo-phone-option:hover,
.ewazo-phone-option:focus {
    background: rgba(23, 145, 56, 0.08);
}

.ewazo-phone-option-dial {
    margin-left: auto;
    color: var(--text-muted, #8a8a8a);
    font-size: 12px;
}