/* ==========================================================================
   International phone fields -- components/phone-input + public/js/phone-input.js,
   on top of public/vendor/intl-tel-input/css/intlTelInput.min.css.

   The number itself always reads left to right, with the flag and dial code at
   its left, in Arabic as in English (the library sets dir="ltr" on the field's
   container on an RTL page); the country list follows the page: right to left
   with Arabic names on the Arabic site.
   ========================================================================== */

.iti--site {
    --iti-hover-color: #F6F0F3;
    --iti-border-color: #E7E7E7;
    --iti-dialcode-color: #080907;
    --iti-dropdown-bg: #FFFFFF;
    --iti-spacer-horizontal: 10px;
    --iti-arrow-color: #919191;
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* The field keeps its page's own look; only the width is the container's. */
.iti--site .iti__tel-input { width: 100%; }
.iti--site .iti__tel-input::placeholder { text-align: left; }

/* Selected country: flag, the dial code in the field's type, a small caret */
.iti--site .iti__selected-dial-code {
    font-family: inherit;
    font-weight: 600;
    color: #080907;
    direction: ltr;
}
.iti--site .iti__selected-country { border-radius: 6px 0 0 6px; }
.iti--site .iti__selected-country:focus-visible { outline: 2px solid #532740; outline-offset: -2px; }
.iti--site .iti__selected-country-primary { padding-inline: 8px 6px; }

/* The dropdown / fullscreen list: the site's font, the brand colour on the highlighted row */
.iti__dropdown-content,
.iti__country-list,
.iti__search-input {
    font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
}
.iti__dropdown-content {
    border-radius: 10px;
    border: 1px solid #E7E7E7;
    box-shadow: 0 12px 32px rgba(34, 34, 34, .12);
    overflow: hidden;
    z-index: 1060; /* above the sticky site header and Bootstrap modals' backdrop */
}
.iti__search-input {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #E7E7E7;
    font-size: 15px;
    outline: none;
}
.iti__search-input:focus { box-shadow: inset 0 -2px 0 #532740; }
.iti__country { padding: 10px 12px; font-size: 15px; }
.iti__country.iti__highlight { background-color: #F6F0F3; }
.iti__country-name { color: #222222; }
.iti__dial-code { color: #616161; direction: ltr; unicode-bidi: isolate; }

/* Arabic: names start at the right, the dial code sits at the row's end */
[dir="rtl"] .iti__country { text-align: right; }

/* A read-only field (the sign-in number on the account page): no caret, no pointer */
.iti--site .iti__tel-input[readonly] ~ .iti__country-container .iti__arrow,
.iti--site:has(.iti__tel-input[readonly]) .iti__arrow { display: none; }
.iti--site:has(.iti__tel-input[readonly]) .iti__selected-country { cursor: default; }