/* Styles personnalisés pour intl-tel-input */
.iti {
    width: 100%;
    margin-bottom: 0.5rem;
}

.iti__flag {
    background-image: url("../vendor/intl-tel-input/img/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("../vendor/intl-tel-input/img/flags@2x.png");
    }
}

.iti__selected-flag {
    background-color: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-right: none;
    border-radius: 8px 0 0 8px;
}

.iti__country-list {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.iti--allow-dropdown input {
    padding-left: 80px !important;
}

.iti--separate-dial-code input {
    padding-left: 90px !important;
}

/* Conteneur personnalisé pour le champ de téléphone */
.tel-input-container {
    position: relative;
    display: flex;
    flex-direction: row;
}

.tel-input-container .iti {
    flex-grow: 1;
    width: 100% !important;
}

/* Empêcher la duplication des drapeaux */
.iti__flag-container .iti__selected-flag .iti__flag:not(:first-child) {
    display: none !important;
}

/* Assurer que le drapeau principal est visible */
.iti__flag-container .iti__selected-flag .iti__flag:first-child {
    opacity: 1 !important;
}

/* Améliorer la visibilité du conteneur */
.iti.iti--allow-dropdown {
    display: block !important;
    width: 100% !important;
}

/* Assurer que le conteneur de drapeau est au-dessus */
.iti__flag-container {
    z-index: 999 !important;
}