/**
 * 🎨 STYLES PERSONNALISÉS POUR intl-tel-input
 * Adaptation au design Tailwind de votre projet
 */

/* Container principal */
.iti {
    width: 100%;
    display: block;
}

/* Drapeau et sélecteur de pays */
.iti__flag-container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 0 12px;
    display: flex;
    align-items: center;
    z-index: 1;
}

.iti__selected-flag {
    display: flex;
    align-items: center;
    padding: 0 8px 0 12px;
    height: 100%;
    background: transparent;
    border: none;
    cursor: default; /* Pas de curseur pointer car un seul pays */
}

/* Drapeau russe */
.iti__flag {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
}

/* Icône dropdown (cachée car un seul pays) */
.iti__arrow {
    display: none !important; /* Pas de flèche car un seul pays disponible */
}

/* Code pays */
.iti__selected-dial-code {
    margin-left: 8px;
    font-weight: 600;
    color: #10b981; /* Emerald-500 */
    font-size: 0.875rem;
}

/* Dark mode pour le code pays */
@media (prefers-color-scheme: dark) {
    .iti__selected-dial-code {
        color: #34d399; /* Emerald-400 */
    }
}

/* Input téléphone - Ajustement pour laisser place au drapeau */
.iti__tel-input, 
.iti input[type="tel"],
input[name="phone_number"] {
    padding-left: 60px !important; /* Espace pour drapeau + code pays */
}

/* Liste déroulante des pays (cachée car un seul pays) */
.iti__country-list {
    display: none !important; /* Masquer complètement la liste */
}

/* Focus state sur le container */
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: transparent;
}

/* Validation states */
.iti input.border-green-500 + .iti__flag-container .iti__selected-dial-code {
    color: #10b981;
}

.iti input.border-red-500 + .iti__flag-container .iti__selected-dial-code {
    color: #ef4444;
}

/* Container de validation icon */
.phone-validation-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    z-index: 2;
    pointer-events: none;
}

/* Animation pour les erreurs */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slideIn {
    animation: slideIn 0.3s ease-out;
}

/* Message d'aide sous le champ */
.phone-help-text {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: #64748b; /* Slate-500 */
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.phone-help-text i {
    font-size: 0.625rem;
}

/* Dark mode pour le texte d'aide */
@media (prefers-color-scheme: dark) {
    .phone-help-text {
        color: #94a3b8; /* Slate-400 */
    }
}

/* Responsive - Mobile */
@media (max-width: 640px) {
    .iti__tel-input, 
    .iti input[type="tel"],
    input[name="phone_number"] {
        font-size: 16px; /* Éviter le zoom automatique sur iOS */
    }
    
    .iti__selected-dial-code {
        font-size: 0.8125rem;
    }
}

/* Style pour le champ wrapper quand il y a une erreur */
.phone-input-wrapper.has-error .iti input {
    border-color: #ef4444 !important;
}

.phone-input-wrapper.has-success .iti input {
    border-color: #10b981 !important;
}

/* Badge "Numéro russe uniquement" */
.phone-country-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); /* Blue-50 */
    border: 1px solid #bae6fd; /* Blue-200 */
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #0369a1; /* Blue-700 */
    margin-top: 0.5rem;
}

.phone-country-badge i {
    font-size: 0.875rem;
}

/* Dark mode pour le badge */
@media (prefers-color-scheme: dark) {
    .phone-country-badge {
        background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); /* Blue-900 */
        border-color: #1d4ed8; /* Blue-700 */
        color: #93c5fd; /* Blue-300 */
    }
}

/* Transition smooth pour tous les changements */
.iti *, .phone-validation-icon, .phone-error-message {
    transition: all 0.2s ease-in-out;
}