/* ============================================================
   Sélecteur d'indicatif téléphonique avec drapeaux
   Remplace visuellement un <select class="js-flag-select"> natif
   par un dropdown personnalisé affichant une icône de drapeau réelle
   (PNG) au lieu d'un emoji, dont le rendu dépend de la police du
   système d'exploitation (les drapeaux emoji ne s'affichent pas sur
   Windows, plateforme la plus répandue).
   ============================================================ */

.flag-select {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.flag-select-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.flag-select-trigger {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: #fff;
    text-align: left;
}

.flag-select-trigger:focus-visible {
    outline: 2px solid #4F46E5;
    outline-offset: 2px;
}

.flag-select-flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    visibility: hidden;
}

.flag-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: inherit;
    color: inherit;
}

.flag-select-caret {
    font-size: 0.7em;
    color: #94A3B8;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.flag-select.is-open .flag-select-caret {
    transform: rotate(180deg);
}

.flag-select-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    margin: 0;
    padding: 0.25rem;
    min-width: 190px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08);
    list-style: none;
}

.flag-select-list[hidden] {
    display: none;
}

.flag-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #1E293B;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
}

.flag-select-option img {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.flag-select-option:hover,
.flag-select-option.is-active {
    background: #EEF2FF;
}

.flag-select-option[aria-selected="true"] {
    font-weight: 700;
    color: #4F46E5;
}