/* ===================================================================
   Phone field with a country flag and dialling code
   ===================================================================
   Used on checkout, registration and the account profile. Rendered by
   includes/phone-field.php, driven by js/phone-field.js.

   Written in plain CSS rather than Tailwind classes so the dropdown
   looks the same whether the page is on the Tailwind CDN or the built
   stylesheet, and so it can't be broken by a rebuild.
   =================================================================== */

.phone-field {
    position: relative;
}

.phone-field__row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* ---- The button that opens the list ---- */
.phone-field__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 0 10px;
    min-height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    color: #111827;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.phone-field__toggle:hover {
    background: #f3f4f6;
}

.phone-field__toggle:focus-visible {
    outline: none;
    border-color: #a3282c;
    box-shadow: 0 0 0 3px rgba(163, 40, 44, .25);
}

.phone-field__flag {
    display: block;
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    background: #e5e7eb;
    flex: 0 0 auto;
}

/* Shown only when the flag image can't load. */
.phone-field__iso {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #6b7280;
}

.phone-field__dial {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.phone-field__caret {
    color: #9ca3af;
    flex: 0 0 auto;
}

.phone-field__number {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- The dropdown ---- */
.phone-field__panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    width: min(340px, 100%);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
    overflow: hidden;
}

.phone-field__panel[hidden] {
    display: none;
}

.phone-field__search-wrap {
    padding: 10px;
    border-bottom: 1px solid #f1f2f4;
}

.phone-field__search {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    color: #111827;
    background: #f9fafb;
}

.phone-field__search:focus {
    outline: none;
    border-color: #a3282c;
    background: #fff;
}

.phone-field__list {
    margin: 0;
    padding: 6px 0;
    list-style: none;
    max-height: 288px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.phone-field__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    color: #111827;
}

.phone-field__option:hover,
.phone-field__option.is-active {
    background: #f6f7f8;
}

.phone-field__option.is-selected {
    background: #fdf8ef;
    font-weight: 600;
}

.phone-field__option[hidden] {
    display: none;
}

.phone-field__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone-field__option-dial {
    flex: 0 0 auto;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

.phone-field__divider {
    height: 1px;
    margin: 6px 12px;
    background: #eceef0;
}

.phone-field__divider[hidden] {
    display: none;
}

.phone-field__empty {
    margin: 0;
    padding: 18px 12px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
}

.phone-field__empty[hidden] {
    display: none;
}

/* ---- Arabic ----------------------------------------------------- */
/* The number itself always stays left-to-right, but the row, the list
   and the dropdown position all mirror. */
[dir="rtl"] .phone-field__option-dial {
    direction: ltr;
}

/* ---- Phones ----------------------------------------------------- */
@media (max-width: 480px) {
    .phone-field__panel {
        width: 100%;
    }

    .phone-field__list {
        max-height: 45vh;
    }

    /* Bigger tap targets on a small screen. */
    .phone-field__option {
        padding: 12px;
    }
}