/* Harmonize intl-tel-input with the site's form-control styling */
.iti {
    display: block;
    width: 100%;
}

.iti input.form-control,
.iti input[type="tel"] {
    width: 100%;
    padding-inline-start: 90px;
}

[dir="rtl"] .iti input.form-control,
[dir="rtl"] .iti input[type="tel"] {
    padding-inline-start: 12px;
    padding-inline-end: 90px;
}

.iti__flag-container {
    inset-inline-start: 0;
}

[dir="rtl"] .iti__flag-container {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

[dir="rtl"] .iti__selected-flag {
    flex-direction: row-reverse;
}

.iti__country-list {
    z-index: 1200;
    text-align: start;
}

.iti--allow-dropdown .iti__flag-container {
    z-index: 2;
}

/* The dial code sits over a light input background even inside dark hero
   panels, so force dark text regardless of what color the surrounding
   theme applies to its own inputs/labels. */
.iti__selected-flag,
.iti__selected-dial-code {
    color: #1c1c1c !important;
}

.iti__country-list {
    color: #1c1c1c;
}