/* International phone fields (intl-tel-input). Numbers always read left to right. */
.mf-phone-number { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

.mf-phone-input__field { width: 100%; }
.mf-phone-input__field .iti,
.mf-phone-public .iti { display: block; width: 100%; }
.mf-phone-input__field input[type=tel],
.mf-phone-public input[type=tel] { direction: ltr; text-align: left; }

.iti { --iti-border-color: #e2e8f0; --iti-dialcode-color: #475569; --iti-hover-color: rgba(14, 165, 233, .08); }
.iti__selected-dial-code { font-variant-numeric: tabular-nums; }
.iti__country-selector,
.iti__dropdown-content { border-radius: 12px; box-shadow: 0 12px 30px rgba(12, 55, 101, .16); overflow: hidden; z-index: 60; }
.iti__search-input { font-family: inherit; font-size: 14px; }
.iti__country { font-size: 14px; padding: 8px 12px; }
html[lang^="ar"] .iti__country-name { direction: rtl; }

/* Filament: the input ring clips its content (control-normalization.css, !important);
   the country list has to show below it. */
.fi-input-wrp.mf-phone-input { overflow: visible !important; position: relative; z-index: 5; }
.fi-input-wrp.mf-phone-input:focus-within { z-index: 30; }

/* Filament: the picker sits inside the input ring, not on top of it. */
.mf-phone-input .iti__selected-country { border-radius: .5rem 0 0 .5rem; }
.mf-phone-input .iti__selected-country-primary { padding-inline: 10px 6px; }

.dark .iti { --iti-border-color: rgba(255, 255, 255, .1); --iti-dialcode-color: #cbd5e1; --iti-hover-color: rgba(255, 255, 255, .06); }
.dark .iti__dropdown-content,
.dark .iti__country-selector { background: #18181b; color: #f4f4f5; }
.dark .iti__search-input { background: #27272a; color: #f4f4f5; }
.dark .iti__country.iti__highlight { background: rgba(255, 255, 255, .08); }