/*
 * Country selector + phone field.
 *
 * The landing page and menu.php name their theme variables differently
 * (--glass-border/--text vs --line/--ink), so every colour here falls back
 * through both before landing on a literal. That way one stylesheet inherits
 * whichever page it is dropped into without either page being edited.
 */

.phone-field {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
}

/* The input keeps whatever the page already gave it — width, radius, colours —
   it just stops being full width so the selector can sit beside it. */
.phone-field > input[type="tel"] {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
}

/* The dial-code picker (owner, 18 Oct 2026): a face that reads "🇳🇬 +234",
   with the real <select> lying invisible over it (phone_input.js paints the
   face) — the select is still what is tapped, focused and read aloud, and the
   list it opens keeps every country's name. With the name in the closed box a
   phone's 16 px text cut it to "+234 Ni…". 104px holds the flag and the
   longest code at 16 px, on every width. */
.phone-cc-box {
    position: relative;
    flex: 0 0 104px;
    display: flex;
}

.phone-cc-face {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 44px;
    padding: 0 24px 0 12px;
    border: 1px solid var(--glass-border, var(--line, rgba(15, 23, 42, .14)));
    border-radius: 10px;
    background: var(--card-bg, var(--surface, #fff)) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
    color: var(--text, var(--ink, #0f172a));
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}

.phone-field .phone-cc-box > .phone-cc {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    /* invisible, but focused: iOS zooms a focused control under 16px */
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}

.phone-cc-box:focus-within .phone-cc-face {
    border-color: var(--accent-text, var(--brand, #6d28d9));
}

/* The dropdown itself is drawn by the OS; only the closed control is ours.
   Set a readable colour for the options in dark themes. */
.phone-field .phone-cc option {
    background: var(--bg-elev, var(--surface, #fff));
    color: var(--text, var(--ink, #0f172a));
    font-weight: 500;
}

.phone-field.is-good > input[type="tel"] {
    border-color: rgba(16, 185, 129, .55);
}

.phone-field.is-bad > input[type="tel"] {
    border-color: rgba(239, 68, 68, .65);
}

.phone-note {
    display: block;
    min-height: 15px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--muted, var(--ink-soft, #6b7280));
}

.phone-note.is-bad {
    color: #dc2626;
}