/* Phone field: flag + country-code picker beside the local number. The picker is a
   custom listbox because a native <select> cannot show a flag in its closed state. */
.sv-field-phone { display: grid; gap: 4px; align-content: start; min-width: 0; }
.sv-phone-label { display: block; margin: 0; font-size: .9rem; font-weight: 600; line-height: inherit; }
.sv-phone { position: relative; display: flex; align-items: stretch; gap: 8px; }
/* The button is as tall as the number field beside it (the flex row stretches it) and as wide as
   its own content, so a short code like +1 and a long one like +1684 each get exactly the room they need. */
.sv-phone__btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; width: auto; min-width: 0; height: auto; margin: 0; padding: 0 10px; border: 1px solid #ccd6e0; border-radius: 8px; background: #fff; font: inherit; font-size: 1rem; font-weight: 400; line-height: 1; color: #23303f; cursor: pointer; white-space: nowrap; }
.sv-phone__btn:hover { border-color: var(--sv-teal, #2e9e9b); }
.sv-phone__flag { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; flex: none; }
.sv-phone__code { display: inline-block; white-space: nowrap; }
.sv-phone__caret { color: var(--sv-slate, #6d6e71); flex: none; }
.sv-phone__num { flex: 1 1 0; min-width: 0; width: auto; direction: ltr; text-align: start; }
.sv-phone__btn:focus-visible, .sv-phone__num:focus { outline: 2px solid var(--sv-teal, #2e9e9b); outline-offset: 0; }
.sv-phone__btn.sv-invalid, .sv-phone.is-invalid .sv-phone__btn { border-color: #b91c1c; }
.sv-phone__pop { position: absolute; z-index: 30; top: calc(100% + 4px); inset-inline-start: 0; width: min(340px, 92vw); padding: 8px; background: #fff; border: 1px solid #ccd6e0; border-radius: 10px; box-shadow: 0 12px 28px rgba(16, 45, 88, .18); }
.sv-phone__pop[hidden] { display: none; }
.sv-phone__pop .sv-phone__search { width: 100%; margin: 0 0 6px; box-sizing: border-box; }
.sv-phone__menu { margin: 0; padding: 0; list-style: none; max-height: 260px; overflow-y: auto; }
.sv-phone__menu li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: .92rem; }
.sv-phone__menu li[hidden] { display: none; }
.sv-phone__menu li:hover, .sv-phone__menu li.is-active { background: #f2f6fa; }
.sv-phone__menu li[aria-selected="true"] { background: #e8f1f8; font-weight: 700; }
.sv-phone__menu li img { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; flex: none; }
.sv-phone__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-phone__menu li b { flex: none; color: var(--sv-slate, #6d6e71); font-weight: 600; direction: ltr; }
.sv-phone__none { margin: 8px; color: var(--sv-slate, #6d6e71); font-size: .9rem; }