phone-country-field { display: block; min-width: 0; }
.phone-country-field { --phone-bg: #fff; --phone-text: #122b4c; --phone-muted: #52667f; --phone-border: #cbd5e1; --phone-active: #e7f4fb; position: relative; min-width: 0; color: var(--phone-text); }
.phone-country-field__group { display: flex; border: 1px solid var(--phone-border); border-radius: .4rem; background: var(--phone-bg); min-width: 0; }
.phone-country-field__group:focus-within { border-color: #4fbbdf; box-shadow: 0 0 0 3px rgba(63, 172, 213, .16); }
.phone-country-field__trigger { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .45rem .65rem; border: 0; border-right: 1px solid var(--phone-border); border-radius: .4rem 0 0 .4rem; background: transparent; color: var(--phone-text); font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.phone-country-field img { object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(127, 142, 162, .25); flex: 0 0 auto; }
.phone-country-field__chevron { color: var(--phone-muted); }
.phone-country-field .phone-country-field__number { min-width: 0; flex: 1 1 0; width: 0; margin: 0; border: 0; border-radius: 0 .4rem .4rem 0; background: transparent; color: var(--phone-text); box-shadow: none; }
.phone-country-field__number::placeholder { color: var(--phone-muted); opacity: 1; }
.phone-country-field__popup { position: absolute; z-index: 1060; top: calc(100% + 6px); left: 0; width: max(100%, 280px); max-width: min(360px, calc(100vw - 48px)); padding: .5rem; background: var(--phone-bg); color: var(--phone-text); border: 1px solid var(--phone-border); border-radius: .6rem; box-shadow: 0 12px 36px rgba(10, 32, 58, .18); }
.phone-country-field .phone-country-field__search { width: 100%; margin: 0 0 .4rem; color: var(--phone-text); background: var(--phone-bg); border-color: var(--phone-border); font-size: .9rem; }
.phone-country-field__popup.is-above { top: auto; bottom: calc(100% + 6px); }
.phone-country-field__options { max-height: var(--phone-options-height, 260px); overflow-y: auto; overscroll-behavior: contain; }
.phone-country-field__option { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 42px; text-align: left; padding: .5rem; border: 0; border-radius: .3rem; color: var(--phone-text); background: transparent; font: inherit; font-size: .9rem; }
.phone-country-field__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.phone-country-field__code { font-variant-numeric: tabular-nums; color: var(--phone-muted); }
.phone-country-field__option:is(:hover, .is-focused, .is-current) { background: var(--phone-active); }
.phone-country-field__option.is-current { font-weight: 600; }
.phone-country-field__empty, .phone-country-field__retry { display: block; padding: .6rem; font-size: .875rem; color: var(--phone-muted); }
.phone-country-field__retry { width: 100%; border: 0; background: transparent; text-align: left; text-decoration: underline; }
.phone-country-field .is-readonly { background: rgba(127, 142, 162, .08); }
.phone-country-field__trigger:disabled { opacity: 1; cursor: default; }
.phone-country-field :is(button, input):focus-visible { outline: 2px solid #079aca; outline-offset: 1px; }
body.theme-dark .phone-country-field { --phone-bg: #14263e; --phone-text: #f5f8ff; --phone-muted: #c3cfe0; --phone-border: #526781; --phone-active: #234564; }
@media (max-width: 420px) { .phone-country-field__trigger { padding-inline: .5rem; gap: .3rem; } .phone-country-field .phone-country-field__number { padding-inline: .6rem; } }