.phone-input { position: relative; display: flex; align-items: stretch; width: 100%; }
.phone-input-toggle {
    display: inline-flex; align-items: center; gap: .35rem; padding: 0 .6rem; white-space: nowrap;
    background: var(--bs-tertiary-bg, #f8f9fa); border: 1px solid var(--bs-border-color, #dee2e6);
    border-right: 0; border-radius: .375rem 0 0 .375rem; cursor: pointer; color: inherit;
}
.phone-input-toggle:focus-visible { outline: 2px solid #0d6efd; outline-offset: -2px; }
.phone-input-flag { font-size: 1.25rem; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.phone-input-dial { font-weight: 600; font-size: .95rem; }
.phone-input-caret { font-size: .7rem; opacity: .6; }
.phone-input-number { border-radius: 0 .375rem .375rem 0 !important; min-width: 0; }
.phone-input-panel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 1050; width: min(100%, 22rem); min-width: 16rem;
    background: #fff; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); padding: .5rem;
}
.phone-input-list { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 15rem; overflow-y: auto; }
.phone-input-item { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: .375rem; cursor: pointer; }
.phone-input-item:hover, .phone-input-item:focus, .phone-input-item.active { background: #e9f2ff; outline: 0; }
.phone-input-name { flex: 1 1 auto; direction: rtl; text-align: right; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-input-code { direction: ltr; color: #6c757d; font-size: .85rem; }
.phone-input-empty { padding: .5rem; color: #6c757d; text-align: center; font-size: .9rem; }