/*
 * Numéro de téléphone : [ indicatif ▼ ] [ numéro national ]
 * (resources/views/components/phone-field.blade.php)
 *
 * L'indicatif reste compact ; le numéro prend le reste. Les couleurs, bordures
 * et hauteurs viennent des champs de la page : ce fichier ne règle que la
 * disposition et la liste de recherche.
 */
.phone-field { display: flex; align-items: stretch; gap: .5rem; width: 100%; min-width: 0; }
.phone-field__country { flex: 0 0 8.5rem; min-width: 0; display: flex; }
.phone-field__country > select { width: 100%; min-width: 0; }
/* Base 0 et largeur 0 : le numéro prend la place restante sans imposer sa
   largeur naturelle (~200 px) — sinon un <fieldset> (min-width: min-content)
   s'élargit et la page déborde à 390 px. */
.phone-field__number { flex: 1 1 0; min-width: 0; width: 0 !important; }

/* select2 greffé sur l'indicatif : même hauteur que le numéro. */
.phone-field__country .select2-container { width: 100% !important; height: 100%; }
.phone-field__country .select2-container .select2-selection--single { display: flex; align-items: center; height: 100%; min-height: 40px; }
.phone-field__country .select2-container .select2-selection--single .select2-selection__rendered { flex: 1 1 auto; min-width: 0; padding-left: .6rem; padding-right: 1.6rem; line-height: 1.3; white-space: nowrap; }
.phone-field__country .select2-container .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); height: 26px; }
.phone-field__selected { display: inline-flex; align-items: center; gap: .3rem; font-variant-numeric: tabular-nums; }
.phone-field__iso { display: inline-block; min-width: 1.6rem; padding: 0 .2rem; border-radius: 3px; background: #eef2f7; color: #334155; font-size: .72rem; font-weight: 700; text-align: center; }

/* La liste s'ouvre plus large que l'indicatif, sans sortir de l'écran — dans
   le champ comme dans une fenêtre (classe posée par phone-field.js). */
.select2-dropdown.phone-field__dropdown { min-width: min(20rem, calc(100vw - 2rem)); z-index: 2000; }
.phone-field__dropdown .select2-search--dropdown .select2-search__field { min-height: 38px; font-size: 16px; }
.phone-field__dropdown .select2-results > .select2-results__options { max-height: min(45vh, 300px); }
.phone-field__dropdown .select2-results__option { padding: .5rem .7rem; }
.phone-field__option { display: flex; align-items: center; gap: .35rem; }
.phone-field__option-dial { margin-left: auto; padding-left: .8rem; color: #64748b; font-variant-numeric: tabular-nums; }
.select2-results__option--highlighted .phone-field__option-dial { color: inherit; }

@media (max-width: 380px) {
    .phone-field { gap: .35rem; }
    .phone-field__country { flex-basis: 7.4rem; }
}