/* ---------------------------------------------------------------------------
   The phone field's country picker (intl-tel-input 18, public/js/select2/
   intltelinput.min.js) in this design, light and dark: /register and the phone
   popup in the app. Loaded after css/vendors/intltelinput.min.css.

   The library paints its list white and lets the text inherit the page's ink,
   so in the dark theme the country names were white on white and the codes
   floated about. Everything here is tokens, so both themes follow. The search
   row on top of the list is dt-phone.js.
   --------------------------------------------------------------------------- */

/* ------------------------------------------------ the country button */
.iti .iti__flag-container { padding: 1px; }
.iti .iti__selected-flag,
.iti.iti--separate-dial-code .iti__selected-flag {
    position: relative;
    gap: 7px;
    padding: 0 12px 0 13px;
    border-radius: 10px 0 0 10px;
    background: transparent;
    color: var(--dt-ink);
    outline: none;
    transition: background-color var(--dt-dur-enter) var(--dt-ease-enter);
}
.iti .iti__selected-flag:hover,
.iti.iti--separate-dial-code .iti__selected-flag:hover,
.iti .iti__selected-flag[aria-expanded="true"],
.iti.iti--separate-dial-code .iti__selected-flag[aria-expanded="true"] { background: var(--dt-tint); }
.iti .iti__selected-flag:focus-visible { box-shadow: inset 0 0 0 2px var(--dt-ring); }
/* a hairline between the code and the number */
.iti .iti__selected-flag::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--dt-line-strong);
}
.iti .iti__selected-dial-code {
    margin: 0;
    font-family: var(--dt-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--dt-ink);
}
.iti .iti__arrow,
.iti .iti__arrow--up {
    width: 7px;
    height: 7px;
    margin: -3px 0 0 3px;
    border: 0;
    border-right: 1.8px solid var(--dt-ink-muted);
    border-bottom: 1.8px solid var(--dt-ink-muted);
    transform: rotate(45deg);
    transition: transform var(--dt-dur-enter) var(--dt-ease-enter);
}
.iti .iti__arrow--up { margin-top: 4px; transform: rotate(-135deg); }

/* ---------------------------------------------------------- the list */
.iti .iti__country-list {
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    max-height: 320px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    white-space: normal;
    text-align: left;
    list-style: none;
    background: var(--dt-panel);
    border: 1px solid var(--dt-line);
    border-radius: 14px;
    box-shadow: var(--dt-shadow-lg);
    color: var(--dt-ink-body);
    scrollbar-width: thin;
    scrollbar-color: var(--dt-scroll-thumb, rgba(100, 116, 139, 0.35)) transparent;
    animation: dt-iti-in 140ms var(--dt-ease-enter) both;
}
/* the app's old theme paints body.dark-only .iti__country-list #2A3650 */
body.dark-only .iti .iti__country-list { background-color: var(--dt-panel); }
.iti .iti__country-list.iti__hide { display: none; }
.iti .iti__country-list--dropup { top: auto; bottom: calc(100% + 6px); margin: 0; }
@keyframes dt-iti-in { from { opacity: 0; transform: translateY(-4px); } }

.iti .iti__country {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 10px;
    border-radius: 9px;
    font-family: var(--dt-font-body);
    font-size: 14px;
    line-height: 1.3;
    color: var(--dt-ink);
    cursor: pointer;
    outline: none;
}
/* the search hides rows with [hidden], which display: flex above would undo */
.iti .iti__country[hidden],
.iti .iti__divider[hidden],
.iti .dt-iti-empty[hidden] { display: none !important; }
.iti .iti__country.iti__highlight { background: var(--dt-tint); }
.iti .iti__country.iti__active { background: var(--dt-primary-soft); }
.iti .iti__flag-box {
    flex: none;
    display: flex;
    justify-content: center;
    width: 26px !important;
    margin: 0;
}
.iti .iti__country-name {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--dt-ink);
}
.iti .iti__dial-code {
    flex: none;
    font-family: var(--dt-font-mono);
    font-size: 12.5px;
    color: var(--dt-ink-muted);
}
.iti .iti__country.iti__active .iti__country-name { font-weight: 700; color: var(--dt-secondary); }
.iti .iti__country.iti__active .iti__dial-code { color: var(--dt-secondary); }
.iti .iti__divider {
    margin: 6px 4px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--dt-line);
}

/* ---------------------------------------------------- search (dt-phone.js) */
.iti .dt-iti-search {
    position: sticky;
    top: -6px;
    z-index: 1;
    margin: -6px -6px 6px;
    padding: 8px;
    background: var(--dt-panel);
    border-bottom: 1px solid var(--dt-line);
    list-style: none;
    cursor: default;
}
/* the library makes every input inside .iti relative with z-index 0, so the
   icon needs its own layer to stay above the field */
.iti .dt-iti-search svg {
    position: absolute;
    z-index: 1;
    left: 20px;
    top: 50%;
    margin-top: -8px;
    color: var(--dt-ink-muted);
    pointer-events: none;
}
.iti .dt-iti-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 36px;
    border-radius: 10px;
    border: 1px solid var(--dt-line-strong);
    background: var(--dt-paper);
    color: var(--dt-ink);
    font-family: var(--dt-font-body);
    font-size: 14px;
    box-shadow: none;
    outline: none;
}
.iti .dt-iti-search input::placeholder { color: var(--dt-ink-muted); opacity: 1; }
.iti .dt-iti-search input:focus { border-color: var(--dt-primary); box-shadow: 0 0 0 3px var(--dt-primary-soft); }
/* the sign-up form rings every focused field with an !important outline; inside
   the list the border and the soft halo above already say where the focus is */
.iti .dt-iti-search input:focus,
.dt-auth .dt-field .iti .dt-iti-search input:focus { outline: none !important; }
.iti .dt-iti-empty {
    padding: 16px 10px;
    list-style: none;
    font-size: 13px;
    text-align: center;
    color: var(--dt-ink-muted);
}

/* ---------------------------------------- phones: the library's full screen */
.iti.iti--container.iti--fullscreen-popup {
    padding: 24px 14px;
    background: var(--dt-scrim);
}
.iti.iti--fullscreen-popup .iti__country-list {
    position: relative;
    top: auto;
    width: 100%;
    min-width: 0;
    max-height: min(72vh, 560px);
    border: 1px solid var(--dt-line);
    border-radius: 16px;
}
.iti.iti--fullscreen-popup .iti__country { padding: 11px 10px; }

@media (prefers-reduced-motion: reduce) {
    .iti .iti__country-list { animation: none; }
    .iti .iti__arrow, .iti .iti__selected-flag { transition: none; }
}

/* ------------------------------------------- the app's phone popup (partials/
   phone-popup): the dialog and the field wrap were overflow: hidden inline, to
   round their corners, and cut the open list down to its first row. They let
   it out now; the header rounds its own top corners instead. */
#phone-popup-modal .modal-content,
#phone-popup-modal #phone-popup-input-wrap { overflow: visible !important; }
#phone-popup-modal .modal-body > div:first-child { border-radius: var(--dt-r-xl) var(--dt-r-xl) 0 0; }
#phone-popup-modal #phone-popup-input-wrap .iti input { border-radius: 0 9px 9px 0; }
/* the field itself: the popup paints it white inline, so in the dark theme the
   country button sat dark on a white field; both follow the tokens now */
#phone-popup-modal #phone-popup-input-wrap {
    background: var(--dt-panel) !important;
    border-color: var(--dt-line-strong) !important;
}
#phone-popup-modal #phone-popup-input-wrap:focus-within { border-color: var(--dt-primary) !important; box-shadow: 0 0 0 3px var(--dt-primary-soft); }
#phone-popup-modal #phone-popup-input { color: var(--dt-ink); }
#phone-popup-modal #phone-popup-input::placeholder { color: var(--dt-ink-muted); opacity: 1; }