/* Make intl-tel-input sit inside the theme's form inputs without breaking their layout. */

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

.iti__tel-input,
.iti input[type="tel"],
.iti input[type="text"] {
    width: 100%;
}

/* The theme's inputs carry their own padding; the plugin adds the dial-code gutter. */
.iti--separate-dial-code .iti__tel-input {
    padding-left: 100px;
}

.iti__country-container {
    z-index: 3;
}

.iti--separate-dial-code .iti__selected-country {
    background-color: transparent;
    border-radius: inherit;
}

.iti__selected-dial-code {
    font-size: inherit;
}

/* Dropdown needs to clear the theme's stacking contexts and stay readable on dark panels. */
.iti__dropdown-content {
    z-index: 1060;
    color: #14203a;
    text-align: left;
}

.iti__search-input {
    color: #14203a;
    font-size: 14px;
}

.iti__country-list {
    max-height: 240px;
}

.wahi-phone-error {
    display: none;
    margin-top: 6px;
    color: #dc3545;
    font-size: 13px;
    line-height: 1.4;
}

/* The pre-footer "Request a call back" block is dark; keep the flag button legible there. */
.request-area .iti__selected-country,
.contact-bg-two .iti__selected-country {
    color: inherit;
}

@media (max-width: 575.98px) {
    .iti--separate-dial-code .iti__tel-input {
        padding-left: 92px;
    }
}