/*
 * 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;
}

.phone-field .phone-cc {
    flex: 0 0 auto;
    /* wide enough for the flag, the dial code and "Nigeria" — the default and
       the common case. Longer names ellipsis rather than hard-cutting, which
       needs overflow:hidden alongside text-overflow. */
    width: 132px;
    max-width: 44%;
    overflow: hidden;
    white-space: nowrap;
    padding: 11px 8px;
    border-radius: 10px;
    border: 1px solid var(--glass-border, var(--line, rgba(15, 23, 42, .14)));
    background: var(--card-bg, var(--surface, #fff));
    color: var(--text, var(--ink, #0f172a));
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    /* WebKit ignores padding and radius on a default menulist */
    -webkit-appearance: none;
    appearance: none;
    background-image: 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");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
    text-overflow: ellipsis;
}

.phone-field .phone-cc:focus {
    border-color: var(--accent-text, var(--brand, #2563eb));
}

/* 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: 11.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--muted, var(--ink-soft, #6b7280));
}

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

/* On a narrow phone the selector and the number stop fighting for the line. */
@media (max-width: 380px) {
    .phone-field .phone-cc {
        width: 92px;
        font-size: 13px;
    }
}