/* Custom styles for intl-tel-input */

/* Override intl-tel-input default styles to match WhatsApp theme */
.iti {
    width: 100% !important;
    position: relative;
}

.iti__input {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    transition: border-color 0.3s ease !important;
    padding-left: 60px !important;
}

.iti__input:focus {
    outline: none !important;
    border-color: #25D366 !important;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
}

.iti__input::placeholder {
    color: #999999 !important;
}

/* Country selector flag button */
.iti__selected-flag {
    background: #f8f9fa !important;
    border-right: 1px solid #e0e0e0 !important;
    border-radius: 11px 0 0 11px !important;
    padding: 0 8px !important;
    transition: all 0.2s ease !important;
    width: 52px !important;
    height: calc(100% - 4px) !important;
    top: 2px !important;
    left: 2px !important;
}

.iti__selected-flag:hover {
    background: #e9ecef !important;
}

.iti__selected-flag.iti__selected-flag--open {
    background: #25D366 !important;
}

.iti__selected-flag .iti__flag {
    margin-top: 0 !important;
}

.iti__arrow {
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid #666 !important;
    margin-top: 2px !important;
    transition: transform 0.3s ease !important;
}

.iti__selected-flag.iti__selected-flag--open .iti__arrow {
    transform: rotate(180deg) !important;
    border-top-color: white !important;
}

/* Country dropdown */
.iti__dropdown {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    margin-top: 8px !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    animation: dropdownFadeIn 0.2s ease !important;
    z-index: 9999999 !important;
    position: absolute !important;
    pointer-events: auto !important;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.iti__dropdown::-webkit-scrollbar {
    width: 6px !important;
}

.iti__dropdown::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}

.iti__dropdown::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 3px !important;
}

.iti__dropdown::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
}

/* Country list items */
.iti__country {
    padding: 12px 16px !important;
    transition: background 0.15s ease !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.iti__country:hover {
    background: #f8f9fa !important;
}

.iti__country.iti__selected {
    background: #e8f5e8 !important;
    color: #25D366 !important;
}

.iti__country:last-child {
    border-bottom: none !important;
}

.iti__country-name {
    font-weight: 500 !important;
    color: #333 !important;
    margin-right: 8px !important;
}

.iti__dial-code {
    color: #666 !important;
    font-size: 14px !important;
}

.iti__selected .iti__country-name,
.iti__selected .iti__dial-code {
    color: #25D366 !important;
}

/* Flag styling - use local images */
.iti__flag {
    width: 20px !important;
    height: 15px !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    margin-right: 8px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Local flag images - Fixed paths */
.iti__flag.iti__ec {
    background-image: url('../images/flags/ec.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block !important;
    width: 20px !important;
    height: 15px !important;
}

.iti__flag.iti__mx {
    background-image: url('../images/flags/mx.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block !important;
    width: 20px !important;
    height: 15px !important;
}

.iti__flag.iti__ar {
    background-image: url('../images/flags/ar.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block !important;
    width: 20px !important;
    height: 15px !important;
}

.iti__flag.iti__cr {
    background-image: url('../images/flags/cr.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block !important;
    width: 20px !important;
    height: 15px !important;
}

.iti__flag.iti__es {
    background-image: url('../images/flags/es.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block !important;
    width: 20px !important;
    height: 15px !important;
}

.iti__flag.iti__co {
    background-image: url('../images/flags/co.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block !important;
    width: 20px !important;
    height: 15px !important;
}

.iti__flag.iti__pe {
    background-image: url('../images/flags/pe.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block !important;
    width: 20px !important;
    height: 15px !important;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .iti__selected-flag {
        width: 45px !important;
        padding: 0 6px !important;
    }
    
    .iti__input {
        padding-left: 55px !important;
        font-size: 16px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    
    .iti__dropdown {
        max-height: 200px !important;
    }
    
    .iti__country {
        padding: 10px 12px !important;
    }
    
    .iti__flag {
        width: 18px !important;
        height: 13px !important;
    }
}