/**
 * H2JPHONE v3.16.0 - Styles principaux
 * 
 * 🎯 PRINCIPE: Hériter du contexte parent, pas de couleurs en dur
 * Compatible thème clair ET sombre
 * 
 * Nouveautés v3.16.0:
 * - Option grands drapeaux (.iti--large-flags)
 * - Meilleure gestion separateDialCode
 * 
 * @author H2J / David
 * @version 3.16.0
 */

/* ═══════════════════════════════════════
   VARIABLES CSS - Fallbacks neutres
   Le parent peut override ces variables
   ═══════════════════════════════════════ */
:root {
    --h2jphone-bg: inherit;
    --h2jphone-text: inherit;
    --h2jphone-border: currentColor;
    --h2jphone-border-opacity: 0.3;
    --h2jphone-placeholder-opacity: 0.5;
    --h2jphone-radius: 8px;
    --h2jphone-focus-color: currentColor;
    
    /* Couleurs sémantiques (validation) - peuvent rester fixes */
    --h2jphone-valid: #28a745;
    --h2jphone-invalid: #dc3545;
    --h2jphone-warning: #ffc107;
}

/* ═══════════════════════════════════════
   FIX CRITIQUE : Flags WebP depuis CDN
   intlTelInput v25 utilise WebP par défaut
   ═══════════════════════════════════════ */
.iti__flag {
    background-image: url('https://cdn.jsdelivr.net/npm/intl-tel-input@25.2.0/build/img/flags.webp') !important;
}

@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
    .iti__flag {
        background-image: url('https://cdn.jsdelivr.net/npm/intl-tel-input@25.2.0/build/img/flags@2x.webp') !important;
    }
}

/* ═══════════════════════════════════════
   LARGE FLAGS - Drapeaux agrandis (1.5x)
   🆕 v3.16.0 : Conditionnel via classe
   ═══════════════════════════════════════ */

.iti--large-flags .iti__flag {
    transform: scale(1.5);
    transform-origin: left center;
}

.iti--large-flags .iti__selected-country-primary {
    padding-left: 10px;
}

.iti--large-flags .iti__country .iti__flag-box {
    margin-right: 14px;
    width: 30px;
}

/* Ajuster padding input pour grands drapeaux */
.iti--large-flags input[type="tel"] {
    padding-left: 130px !important;
}

/* Grands drapeaux + indicatif séparé */
.iti--large-flags.iti--separate-dial-code input[type="tel"] {
    padding-left: 140px !important;
}

/* ═══════════════════════════════════════
   CHAMP TÉLÉPHONE - BASE
   🎯 Hérite du contexte parent
   ═══════════════════════════════════════ */

.h2jphone-input,
input[name="phone"],
.iti input[type="tel"] {
    width: 100%;
    min-height: 48px;
    height: auto;
    padding: 14px 16px;
    padding-left: 120px;
    
    /* 🎯 HÉRITER DU PARENT */
    background-color: var(--h2jphone-bg, inherit);
    color: var(--h2jphone-text, inherit);
    border: 2px solid;
    border-color: rgba(128, 128, 128, var(--h2jphone-border-opacity, 0.3));
    
    border-radius: var(--h2jphone-radius, 8px);
    font-size: 16px !important; /* Empêche le zoom iOS + forcer */
    font-family: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

/* Placeholder - TAILLE FORCÉE */
.iti input::placeholder,
input[name="phone"]::placeholder {
    color: inherit;
    opacity: var(--h2jphone-placeholder-opacity, 0.6);
    font-size: 16px !important;
}

/* Focus - utilise la couleur courante */
.h2jphone-input:focus,
input[name="phone"]:focus,
.iti input[type="tel"]:focus {
    outline: none;
    border-color: var(--h2jphone-focus-color, currentColor);
    box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.15);
}

/* ═══════════════════════════════════════
   LABEL FLOTTANT (si utilisé)
   Décaler vers la droite
   ═══════════════════════════════════════ */

.iti ~ label,
.iti + label,
.form-group:has(.iti) > label,
.iti-container ~ label {
    left: 120px !important;
    margin-left: 0;
}

.form-group .iti ~ label,
.form-floating .iti ~ label {
    left: 120px !important;
    transform-origin: left top;
}

.form-group > label:first-child {
    left: 0 !important;
}

/* ═══════════════════════════════════════
   INTL-TEL-INPUT - CONTAINER
   ═══════════════════════════════════════ */

.iti {
    width: 100%;
    display: block;
}

.iti__country-container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 0 8px;
    display: flex;
    align-items: center;
}

.iti__selected-country {
    display: flex;
    align-items: center;
    padding: 0 8px;
    height: 100%;
    cursor: pointer;
    border-radius: var(--h2jphone-radius, 8px) 0 0 var(--h2jphone-radius, 8px);
    transition: background-color 0.2s ease;
}

.iti__selected-country:hover {
    background-color: rgba(128, 128, 128, 0.1);
}

/* Dial code séparé - hérite de la couleur du texte */
.iti__selected-dial-code {
    margin-left: 8px;
    font-size: 16px;
    font-weight: 600;
    color: inherit;
}

/* Flèche dropdown - utilise currentColor */
.iti__arrow {
    margin-left: 8px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.iti__arrow--up {
    transform: rotate(180deg);
}

/* ═══════════════════════════════════════
   DROPDOWN - LISTE DES PAYS
   🎯 Fond neutre, texte lisible
   ═══════════════════════════════════════ */

.iti__dropdown {
    position: absolute;
    z-index: 9999 !important;
    
    /* Fond toujours clair pour lisibilité */
    background: #ffffff;
    color: #333333;
    
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--h2jphone-radius, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-height: 350px;
    overflow: hidden;
    margin-top: 4px;
}

/* Conteneur du search - prendre toute la largeur */
.iti__dropdown-content,
.iti__search-container {
    width: 100%;
    display: block;
}

/* Thème sombre - dropdown reste claire pour lisibilité */
@media (prefers-color-scheme: dark) {
    .iti__dropdown {
        background: #ffffff;
        color: #333333;
    }
}

/* Zone de recherche - PLEINE LARGEUR */
.iti__dropdown .iti__search-input,
.iti__search-input {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 12px 14px;
    margin: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 15px;
    outline: none;
    box-sizing: border-box !important;
    display: block;
    
    /* Fond légèrement différent */
    background: #f8f9fa;
    color: #333333;
    
    /* PAS de border-radius en haut - aligné avec dropdown */
    border-radius: 0;
}

.iti__search-input::placeholder {
    color: #666666;
    opacity: 0.7;
}

.iti__search-input:focus {
    background: #ffffff;
    border-bottom-color: rgba(0, 0, 0, 0.2);
}

/* Liste des pays */
.iti__country-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}

.iti__country {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    color: #333333;
}

.iti__country:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.iti__country--highlight {
    background-color: rgba(0, 0, 0, 0.08);
}

/* Nom des pays - TOUJOURS LISIBLE */
.iti__country-name {
    flex: 1;
    margin-left: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #333333;
}

/* Indicatif dans la liste */
.iti__dial-code {
    color: #666666;
    font-size: 14px;
    font-weight: 500;
    margin-left: 8px;
}

/* Pays préférés - séparateur */
.iti__divider {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin: 4px 0;
}

/* ═══════════════════════════════════════
   VALIDATION VISUELLE
   🎯 Couleurs sémantiques (universelles)
   ═══════════════════════════════════════ */

/* Valide - vert */
.phone-valid,
input[name="phone"].valid {
    border-color: var(--h2jphone-valid, #28a745) !important;
}

/* Invalide - rouge */
.phone-invalid,
input[name="phone"].invalid {
    border-color: var(--h2jphone-invalid, #dc3545) !important;
    background-color: rgba(220, 53, 69, 0.05);
}

/* Avertissement - orange */
.phone-warning,
input[name="phone"].warning {
    border-color: var(--h2jphone-warning, #ffc107) !important;
    background-color: rgba(255, 193, 7, 0.05);
}

/* Messages de validation */
.h2jphone-validation-msg {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 8px;
    font-weight: 500;
}

.h2jphone-validation-msg.text-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: #c82333;
}

.h2jphone-validation-msg.text-warning {
    background-color: rgba(255, 193, 7, 0.15);
    color: #856404;
}

.h2jphone-validation-msg.text-success {
    background-color: rgba(40, 167, 69, 0.1);
    color: #1e7e34;
}

.h2jphone-validation-msg i {
    font-size: 14px;
}

/* ═══════════════════════════════════════
   RESPONSIVE - MOBILE FIRST
   🔴 CRITIQUE: 75-80% du trafic
   ═══════════════════════════════════════ */

@media (max-width: 768px) {
    .h2jphone-input,
    input[name="phone"],
    .iti input[type="tel"] {
        font-size: 16px; /* Empêche zoom iOS */
        min-height: 52px;
        padding-left: 100px;
    }
    
    .iti__selected-dial-code {
        font-size: 15px;
    }
    
    /* ========== MASQUER RECHERCHE SUR MOBILE ========== */
    /* Évite le déclenchement du clavier */
    .iti__search-input,
    .iti__country-list-header,
    .iti--fullscreen-popup .iti__search-input {
        display: none !important;
    }
    
    /* ========== POPUP FULLSCREEN MOBILE ========== */
    .iti--fullscreen-popup .iti__dropdown {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        transform: none !important;
        z-index: 10000 !important;
    }
    
    .iti--fullscreen-popup .iti__country-list {
        max-height: calc(100vh - 60px) !important;
        height: calc(100vh - 60px) !important;
    }
    
    /* Dropdown standard mobile - centré */
    .iti__dropdown {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px);
        max-height: 70vh;
        top: 50% !important;
        transform: translateY(-50%);
        border-radius: 12px;
    }
    
    .iti__country-list {
        max-height: calc(70vh - 20px);
    }
    
    .iti__country {
        padding: 14px 16px;
    }
    
    .iti__country-name {
        font-size: 16px;
    }
    
    /* Labels décalés */
    .iti ~ label,
    .form-group .iti ~ label {
        left: 100px !important;
    }
}

@media (max-width: 380px) {
    .h2jphone-input,
    input[name="phone"],
    .iti input[type="tel"] {
        padding-left: 90px;
    }
    
    .iti__selected-dial-code {
        font-size: 14px;
    }
    
    .iti ~ label,
    .form-group .iti ~ label {
        left: 90px !important;
    }
}

/* ═══════════════════════════════════════
   INTÉGRATION CONTEXTES PARENTS
   S'adapte automatiquement au thème
   ═══════════════════════════════════════ */

/* Si dans un formulaire sombre */
.dark-theme .h2jphone-input,
.dark-theme input[name="phone"],
.dark-theme .iti input[type="tel"],
[data-theme="dark"] .h2jphone-input,
[data-theme="dark"] input[name="phone"],
[data-theme="dark"] .iti input[type="tel"] {
    background-color: inherit;
    color: inherit;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Si dans un formulaire avec fond coloré */
.h2jtools-form .h2jphone-input,
.h2jtools-form input[name="phone"],
.h2jtools-form .iti input[type="tel"] {
    background-color: inherit;
    color: inherit;
}

/* Hériter automatiquement des inputs du même formulaire */
form .iti input[type="tel"] {
    font-family: inherit;
    font-size: inherit;
}

/* ═══════════════════════════════════════
   ACCESSIBILITÉ
   ═══════════════════════════════════════ */

/* Outline visible pour navigation clavier */
.iti__selected-country:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.iti__country:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* Réduire les animations si préférence utilisateur */
@media (prefers-reduced-motion: reduce) {
    .h2jphone-input,
    input[name="phone"],
    .iti input[type="tel"],
    .iti__selected-country,
    .iti__country,
    .iti__arrow {
        transition: none;
    }
}