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

/* The flag + dial code (e.g. "+968") is wider than the padding intl-tel-input measures when it starts (the font
   may not be loaded yet), so the number and its placeholder ended up underneath it. Reserve room for the whole
   selector: the script below refines this to the real width, this is the safe default for every dial code length.
   !important because the library writes its own (too small) padding inline on the input. */
.iti input.form-control,
.iti input[type="tel"] {
    width: 100%;
    padding-inline-start: var(--iti-selector-width, 118px) !important;
    padding-inline-end: 12px !important;
}

/* The dial-code selector replaces the field's decorative icon; both in the same corner overlap. */
.iti-field > i,
.iti-field > .field-icon,
.iti-field > .input-icon,
.gov-input-icon.iti-field > i {
    display: none !important;
}

.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;
}