/* Override for intl-tel-input flag sprites and styling */
.iti__flag {
    background-image: url("/static/assets/img/intl-tel-input/flags.png") !important;
}

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

/* Fix for phone input spacing to match other form elements */
.iti {
    display: block;
    width: 100%;
    margin-bottom: 1.5rem;
    position: relative;
}

/* Force consistent phone input height and styling for ALL devices */
.iti .form-control {
    height: auto !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}

/* Specific mobile adjustments */
@media (max-width: 767.98px) {
    .iti {
        margin-bottom: 1.25rem;
    }
    
    /* Force consistent margin on ALL mobile devices */
    input[type="tel"].form-control {
        margin-bottom: 0 !important;
    }
}

/* Fix for specific iOS devices */
@supports (-webkit-touch-callout: none) {
    .iti .form-control {
        font-size: 16px !important; /* Prevents zoom on iOS */
        min-height: 3rem !important;
    }
}

/* Ensure flag dropdown alignment is consistent */
.iti__selected-flag {
    display: flex;
    align-items: center;
    height: 100% !important;
}

/* Extra small devices (portrait phones) */
@media (max-width: 575.98px) {
    .iti .form-control {
        font-size: 15px !important;
        padding-left: 85px !important;
    }
}