/* ============================================================================
   eMIS phone number box (EmisControls.PhoneInput + emis-phone-widget.js):
   flag + dial-code chooser with a country search, number formatted as typed.
   Same widget as the student Edit Bio page, scoped to .emis-phone so it never
   collides with page styles; 4px corners like every other control.
   ============================================================================ */
.emis-phone { position: relative; width: 100%; }
.emis-phone .select-box { position: relative; width: 100%; }
.emis-phone .selected-option {
    display: flex; align-items: stretch;
    background: #fff; border: 1px solid #DBDFEA; border-radius: 4px; overflow: hidden;
    min-height: calc(2.125rem + 2px);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.emis-phone .selected-option:focus-within { border-color: #8AAEDC; box-shadow: 0 0 0 .18rem rgba(11,78,162,.12); }
.emis-phone .chooser {
    position: relative; flex: none;
    width: 6.6rem; padding: 0 1.6rem 0 .7rem;
    display: flex; align-items: center; gap: .45rem;
    cursor: pointer; user-select: none;
    background: #F7F9FC; border-right: 1px solid #E4E9F2;
}
.emis-phone .chooser::after {
    content: ""; position: absolute; right: .65rem; top: 50%;
    width: .42rem; height: .42rem;
    border-right: 1.5px solid #6B7A90; border-bottom: 1.5px solid #6B7A90;
    transform: translateY(-65%) rotate(45deg); transition: transform .18s ease;
}
.emis-phone .chooser.active::after { transform: translateY(-25%) rotate(225deg); }
.emis-phone .chooser .flag { width: 20px; height: 15px; display: inline-block; flex: none; border-radius: 2px; overflow: hidden; }
.emis-phone .chooser .dial { font-weight: 500; font-size: 13px; color: #1E2D50; letter-spacing: .02em; }
.emis-phone .selected-option input[type="tel"] {
    flex: 1 1 auto; min-width: 0;
    border: 0 !important; box-shadow: none !important; outline: 0;
    border-radius: 0 !important; background: transparent;
    padding: .4375rem .85rem; font-size: 13px; color: #303E67; min-height: 0;
}
.emis-phone .selected-option input[type="tel"]::placeholder { color: #A3AEC2; }
.emis-phone .options {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 2100;
    margin-top: 4px; background: #fff;
    border: 1px solid #E4E9F2; border-radius: 4px;
    box-shadow: 0 12px 28px rgba(15,23,42,.12);
    display: none;
}
.emis-phone .options.active { display: block; }
.emis-phone .options .search-box {
    width: 100%; padding: .6rem .8rem; font-size: 13px;
    border: 0; border-bottom: 1px solid #EEF2F7; outline: 0;
    background: #F7F9FC; border-radius: 4px 4px 0 0;
}
.emis-phone .options ol { list-style: none; max-height: 16rem; overflow: auto; margin: 0; padding: 4px 0; }
.emis-phone .options ol li {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .45rem .8rem; cursor: pointer; font-size: 13px; color: #303E67;
}
.emis-phone .options ol li:hover { background: #F2F6FC; }
.emis-phone .options ol li .flag { width: 18px; height: 13px; }
.emis-phone .options ol li .country-name { margin-left: .5rem; }
.emis-phone .options ol li .meta { color: #6B7A90; font-size: 12px; font-variant-numeric: tabular-nums; }
.emis-phone.is-disabled .selected-option { background: #F4F6F9; }
.emis-phone.is-disabled .chooser { cursor: default; }
.emis-phone.is-disabled .chooser::after { display: none; }
@media (max-width: 575.98px) { .emis-phone .chooser { width: 5.9rem; } }