/* Phone fields with a country picker (tq-phone.js, intl-tel-input 18.2.1).
   The library's own sheet draws the flags; this makes it sit like our other
   fields and follow the light/dark tokens. */
.iti { display: block; width: 100%; }
.iti .form-control { width: 100%; }

/* The flag + dial code: a quiet surface joined to the field. */
.iti--separate-dial-code .iti__selected-flag {
    background: var(--tuqio-surface);
    border-right: 1px solid var(--tuqio-border);
    border-radius: 6px 0 0 6px;
}
.iti--separate-dial-code .iti__selected-flag:hover,
.iti--separate-dial-code .iti__selected-flag:focus { background: var(--tuqio-navy-soft); }
.iti__selected-dial-code { color: var(--tuqio-text); font-size: .9rem; font-weight: 600; }
.iti__arrow { border-top-color: var(--tuqio-muted); }
.iti__arrow--up { border-bottom-color: var(--tuqio-muted); }

/* The list opens on <body> (dropdownContainer), above modals. */
.iti--container { z-index: 2000; }
.iti__country-list {
    max-height: 260px;
    margin-top: 4px;
    border: 1px solid var(--tuqio-line);
    border-radius: 10px;
    background: var(--tuqio-card);
    color: var(--tuqio-text);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
    font-size: .88rem;
}
.iti__country { padding: 7px 12px; }
.iti__country.iti__highlight { background: var(--tuqio-navy-soft); }
.iti__dial-code { color: var(--tuqio-muted); }
.iti__divider { border-bottom-color: var(--tuqio-line); }

/* Phones: the library goes full screen; keep it on our colours. */
.iti--fullscreen-popup.iti--container { padding: 24px 16px; background: rgba(15, 23, 42, .55); }
.iti--fullscreen-popup .iti__country-list { max-height: 100%; }

/* The picker wraps the input, so Bootstrap's ".is-invalid ~ .invalid-feedback"
   no longer finds the message beside it. */
.iti:has(.is-invalid) ~ .invalid-feedback { display: block; }