/* intl-tel-input layout tweaks for TEG forms */

.teg-phone-wrap,
.form-group:has(> .iti),
.teg-quote-field:has(> .iti) {
    position: relative;
}

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

.iti__tel-input.form-control,
.iti input.teg-quote-input,
.iti input.form-control {
    width: 100%;
    height: auto;
}

/* Keep dropdown above Bootstrap modals / signup overlays */
.iti--container {
    z-index: 2000 !important;
}

.teg-quote-modal .iti__dropdown-content,
.sig-up .iti__dropdown-content {
    z-index: 2010;
}

/*
 * Signup/login popups set color: #fff. The country dropdown has a white
 * background, so inherited white names are invisible. Force dark text.
 */
.iti__dropdown-content,
.iti--container,
.iti__country-list,
.iti__country,
.iti__country-name,
.iti__search-input {
    color: #1d1e27;
}

.iti__dial-code {
    color: #999;
}

.sig-up .iti__dropdown-content,
.sig-up .iti__country,
.sig-up .iti__country-name,
.sig-up .iti__search-input,
.popup .iti__country-name,
.sig-up .iti a {
    color: #1d1e27;
    text-transform: none;
}

.teg-phone-invalid .iti__tel-input,
.iti .teg-phone-input.is-invalid {
    border-color: #dc3545;
}

.teg-phone-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

.teg-phone-invalid + .teg-phone-feedback,
.teg-phone-input.is-invalid ~ .teg-phone-feedback {
    display: block;
}

/* Quote modal inputs already have custom padding */
.teg-quote-modal .iti--allow-dropdown input.teg-quote-input {
    padding-left: var(--iti-selected-country-arrow-padding);
}

@media (max-width: 575.98px) {
    .iti--fullscreen-popup.iti--container {
        z-index: 2100 !important;
    }
}