/* Phone number with a searchable country picker: a flag + code button beside the number, a list with search. */
@layer components {
    .phone-input { position: relative; display: flex; gap: var(--space-2); }
    .phone-input > input[type="tel"] { flex: 1; min-width: 0; }
    .phone-input-toggle { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; min-height: var(--tap); padding: 0 var(--space-3); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font: inherit; font-weight: 600; cursor: pointer; }
    .phone-input-toggle:hover { border-color: var(--color-primary); }
    .phone-input-toggle:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); }
    .phone-flag { font-size: 1.15rem; line-height: 1; }
    .phone-field.has-error .phone-input-toggle { border-color: var(--color-danger); }
    .phone-input-menu { position: absolute; z-index: 30; top: calc(100% + var(--space-1)); left: 0; width: min(22rem, 100%); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
    .phone-input-menu[hidden] { display: none; }
    .phone-input-menu .phone-input-search { border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; }
    .phone-input-list { max-height: 16rem; margin: 0; padding: var(--space-1); overflow-y: auto; list-style: none; }
    .phone-input-list li[role="option"] { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: 400; cursor: pointer; }
    .phone-input-list li[role="option"][hidden] { display: none; }
    .phone-input-list li[role="option"]:hover, .phone-input-list li[role="option"]:focus { background: var(--color-surface-alt); outline: none; }
    .phone-input-list li[aria-selected="true"] { color: var(--color-primary); font-weight: 700; }
    .phone-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .phone-option-dial { color: var(--color-text-muted); font-size: var(--text-xs); }
    .phone-input-empty { padding: var(--space-3); color: var(--color-text-muted); font-weight: 400; }
}