/* Common presentation and local flag sprites for public phone inputs. */
.iti {
    display: block;
    width: 100%;
    min-width: 0;
    color: var(--home-text, inherit);
    direction: ltr;
    text-align: left;
}

.iti input[type="tel"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding-inline-start: 88px;
    direction: ltr;
    text-align: left;
}

.iti__flag {
    background-image: url("/assets/forms/intl-tel-input-17.0.19/img/flags.png");
}

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

.iti__selected-flag {
    box-sizing: border-box;
    min-width: 78px;
    gap: 5px;
    color: var(--home-text, inherit) !important;
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: var(--home-surface-muted, rgba(0, 0, 0, .05));
}

.iti__arrow {
    border-top-color: currentColor;
}

.iti__arrow--up {
    border-bottom-color: currentColor;
}

.iti__selected-dial-code,
.iti__country,
.iti__country-name {
    color: var(--home-text, inherit);
}

.iti__dial-code {
    color: var(--home-muted, #666);
}

.iti__flag[hidden],
.mth-phone-code-indicator[hidden] {
    display: none !important;
}

.mth-phone-code-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: currentColor;
    white-space: nowrap;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.mth-phone-code-indicator svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.iti__country-list {
    box-sizing: border-box;
    color: var(--home-text, #111);
    background: var(--home-surface, #fff);
    border-color: var(--home-border, #bfbfbf);
    width: var(--mth-phone-list-width, 320px) !important;
    min-width: min(220px, var(--mth-phone-list-width, 320px), calc(100vw - 24px)) !important;
    max-width: min(var(--mth-phone-list-width, 320px), calc(100vw - 24px)) !important;
    overflow-x: hidden !important;
    z-index: 100000;
}

.iti__country {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.iti__country.iti__highlight,
.iti__country:hover,
.iti__country:focus {
    color: var(--home-text, #111);
    background: var(--home-surface-muted, rgba(0, 0, 0, .05));
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background: var(--home-surface-muted, rgba(0, 0, 0, .05));
}

.mth-phone-error {
    display: block;
    margin-top: 6px;
    color: var(--home-phone-error, #a52f23);
    font-size: .875rem;
    line-height: 1.35;
}

.mth-phone-error[hidden] {
    display: none !important;
}

.iti input[aria-invalid="true"] {
    border-color: var(--home-phone-error, #a52f23) !important;
}

.public-appearance-page[data-home-theme="dark"] .mth-phone-error,
.public-appearance-page[data-home-phase="blue"] .mth-phone-error,
.public-appearance-page[data-home-phase="night"] .mth-phone-error {
    --home-phone-error: #ffb2a8;
}