/*
 * International phone input — country selector + number field.
 * Used on the contact form and checkout form (templates/contact/contact.html,
 * templates/shop/checkout.html). Loaded only where the phone widget is
 * rendered.
 *
 * Two layers:
 *   1. .phone-input-group / .phone-country-select / .phone-number-input —
 *      the plain, no-JS-required baseline: a native <select> + <input>
 *      styled to look like one unified control.
 *   2. .phone-country / .phone-country-toggle / .phone-country-panel / ... —
 *      the optional JS-enhanced searchable dropdown (static/js/phone-input.js)
 *      that visually replaces the native select when the vendored
 *      libphonenumber-js library loads successfully.
 */

.phone-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
}

/* ---- Baseline (no-JS) native select ---- */
.phone-country-select {
    flex: 0 0 auto;
    width: 6.5rem;
    max-width: 40%;
    min-width: 0;
    padding: 0.65rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid #d1d5db;
    border-right: none;
    border-radius: 0.5rem 0 0 0.5rem;
    background-color: #fff;
    color: #1f2937;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3e%3cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    background-size: 1rem;
    padding-right: 1.5rem;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone-country-select:focus {
    outline: none;
    border-color: #B63A2B;
    box-shadow: 0 0 0 3px rgba(182, 58, 43, 0.15);
    z-index: 1;
    position: relative;
}

/* Hidden once the JS-enhanced dropdown takes over (still the real,
   submitted form control — display:none does not remove it from
   submission, only `disabled` would). */
.phone-country-select.phone-country-select--enhanced {
    display: none;
}

.phone-number-input.form-input {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 0 0.5rem 0.5rem 0;
}

.phone-input-group .phone-number-input {
    border-radius: 0 0.5rem 0.5rem 0;
}

/* ---- JS-enhanced searchable country dropdown ---- */
.phone-country {
    position: relative;
    flex: 0 0 auto;
}

.phone-country-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: 100%;
    padding: 0.65rem 0.6rem;
    font-size: 0.875rem;
    border: 1px solid #d1d5db;
    border-right: none;
    border-radius: 0.5rem 0 0 0.5rem;
    background-color: #fff;
    color: #1f2937;
    cursor: pointer;
    white-space: nowrap;
}

.phone-country-toggle:hover {
    background-color: #f9fafb;
}

.phone-country-toggle:focus-visible {
    outline: none;
    border-color: #B63A2B;
    box-shadow: 0 0 0 3px rgba(182, 58, 43, 0.15);
    z-index: 1;
    position: relative;
}

.phone-country-toggle .phone-flag {
    font-size: 1.1rem;
    line-height: 1;
}

.phone-country-toggle .phone-code {
    font-variant-numeric: tabular-nums;
    color: #374151;
}

.phone-country-toggle .phone-caret {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-left: 0.1rem;
}

.phone-country-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 40;
    width: max(16rem, 100%);
    max-width: 90vw;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.phone-country-search {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    outline: none;
}

.phone-country-search:focus {
    background-color: #fafafa;
}

.phone-country-listbox {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    max-height: 15rem;
    overflow-y: auto;
}

.phone-country-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #1f2937;
    cursor: pointer;
}

.phone-country-option .phone-flag {
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.phone-country-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone-country-option:hover,
.phone-country-option:focus {
    background-color: #fdf2f0;
    outline: none;
}

.phone-country-option.is-selected {
    background-color: #fbeae7;
    font-weight: 600;
}

.phone-country-empty {
    padding: 0.75rem;
    font-size: 0.8125rem;
    color: #6b7280;
    text-align: center;
}

@media (max-width: 480px) {
    .phone-country-panel {
        width: max(85vw, 100%);
    }
}