.iti {
    width: 100%;
}

.iti__flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/img/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/img/flags@2x.png");
    }
}

.form-group .iti--allow-dropdown input {
    padding-left: 52px;
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: rgba(0, 0, 0, 0.05);
}

.iti__selected-flag {
    border-radius: 12px 0 0 12px;
}

/* The vendor default list (grey border, flat drop-shadow, cramped rows)
   doesn't match the rest of the redesigned auth modal — restyle it to look
   like the app's other dropdowns (css/lokey-theme.css's .dropdown-menu). */
.iti__country-list {
    /* .iti__country-list's actual parent is .iti__flag-container — a box
       that only wraps the flag/dial-code area, shrunk to fit that content,
       not the full input — so a percentage width resolves against that
       narrow box rather than the input's visible width. A fixed width
       (capped so it can't overflow a narrow viewport) is needed instead. */
    width: 380px;
    max-width: calc(100vw - 48px);
    white-space: normal;
    border: 1px solid var(--line, #E6EBF1);
    border-radius: 12px;
    box-shadow: 0 20px 44px -20px rgba(30, 43, 60, 0.35);
    padding: 6px;
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
}

.iti__divider {
    border-bottom: 1px solid var(--line, #E6EBF1);
    margin: 0 4px 6px;
    padding: 0 0 6px;
}

.iti__country {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--ink, #22303F);
}

.iti__country.iti__highlight {
    background-color: var(--blue-tint, #EAF3FF);
}

.iti__dial-code {
    color: var(--grey, #5B6B7C);
}