/* =============================================================================
 *  Country selector — flag + dial code + searchable list
 *  Pairs with assets/js/country-select.js and country_field() in helper.php.
 * ========================================================================== */

.cs-field { display: block; }
.cs-label {
    display: block; font-size: .85rem; font-weight: 600;
    color: var(--text, #0f172a); margin-bottom: .4rem;
}
.cs-label .cs-req { color: var(--danger, #dc2626); margin-left: .15rem; }

/* The control: country button + phone input sharing one rounded shell. */
.cs-control {
    position: relative; display: flex; align-items: stretch;
    border: 1.5px solid var(--border, #cbd5e1); border-radius: 12px;
    background: var(--surface, #fff);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cs-control:focus-within {
    border-color: var(--primary, #0B4E3D);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary, #0B4E3D) 14%, transparent);
}
[data-country-select].has-error .cs-control { border-color: var(--danger, #dc2626); }
[data-country-select].has-error .cs-control:focus-within {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger, #dc2626) 16%, transparent);
}
[data-country-select].is-valid .cs-control { border-color: var(--success, #2F8065); }

/* Country button */
.cs-toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: 0 .7rem; border: 0; border-right: 1.5px solid var(--border, #cbd5e1);
    border-radius: 12px 0 0 12px; background: var(--surface-2, #f8fafc);
    font: inherit; font-size: .92rem; font-weight: 600; color: inherit;
    cursor: pointer; white-space: nowrap; transition: background .18s ease;
}
.cs-toggle:hover { background: color-mix(in srgb, var(--primary, #0B4E3D) 7%, var(--surface-2, #f8fafc)); }
.cs-toggle:focus-visible { outline: 2px solid var(--primary, #0B4E3D); outline-offset: -2px; }
.cs-caret { transition: transform .2s ease; opacity: .6; flex: 0 0 auto; }
[data-country-select].is-open .cs-caret { transform: rotate(180deg); }

/* Flag slot — emoji where the OS supports it, ISO badge where it does not
   (Windows renders regional-indicator pairs as plain letters). */
.cs-flag { font-size: 1.15rem; line-height: 1; flex: 0 0 auto; }
.cs-flag.cs-flag-code {
    font-size: .66rem; font-weight: 800; letter-spacing: .02em;
    padding: .18rem .3rem; border-radius: 4px; line-height: 1;
    background: linear-gradient(135deg, var(--primary, #0B4E3D), var(--secondary, #174D3D));
    color: #fff; min-width: 1.9em; text-align: center;
}

/* Phone input */
.cs-phone {
    flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
    padding: .72rem .85rem; font: inherit; font-size: .95rem; color: inherit; border-radius: 0 12px 12px 0;
}
.cs-phone:focus { outline: none; }

/* Popover */
.cs-pop {
    position: absolute; z-index: 60; top: calc(100% + .4rem); left: 0;
    width: min(340px, 92vw); border-radius: 14px; overflow: hidden;
    background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 20px 48px -16px rgba(8, 11, 26, .38);
    opacity: 0; transform: translateY(-6px) scale(.985);
    transition: opacity .16s ease, transform .16s ease;
}
[data-country-select].is-open .cs-pop { opacity: 1; transform: translateY(0) scale(1); }
.cs-pop[hidden] { display: none; }

.cs-search-wrap { padding: .55rem; border-bottom: 1px solid var(--border, #eef2f7); }
.cs-search {
    width: 100%; padding: .55rem .7rem; font: inherit; font-size: .9rem;
    border: 1.5px solid var(--border, #cbd5e1); border-radius: 9px;
    background: var(--surface-2, #f8fafc); color: inherit;
}
.cs-search:focus { outline: none; border-color: var(--primary, #0B4E3D); }

.cs-list { list-style: none; margin: 0; padding: .3rem; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.cs-item {
    display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem;
    border-radius: 9px; cursor: pointer; font-size: .9rem; line-height: 1.3;
}
.cs-item:hover, .cs-item.is-active { background: var(--surface-2, #f1f5f9); }
.cs-item[aria-selected="true"] { color: var(--primary, #0B4E3D); font-weight: 700; }
.cs-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-dial { flex: 0 0 auto; opacity: .65; font-variant-numeric: tabular-nums; font-size: .84rem; }
.cs-empty { padding: .9rem .7rem; text-align: center; font-size: .86rem; color: var(--muted, #64748b); }

/* Messages */
.cs-error { display: block; margin-top: .35rem; font-size: .8rem; color: var(--danger, #dc2626); min-height: 1em; }
.cs-hint  { display: block; margin-top: .3rem; font-size: .78rem; color: var(--muted, #64748b); }

/* No-JS fallback: the real <select> stays usable. */
.cs-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.no-js .cs-native { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto; }
.no-js .cs-toggle { display: none; }

/* Dark mode */
:root[data-theme="dark"] .cs-control,
:root[data-theme="dark"] .cs-pop { background: #111a2e; border-color: rgba(255,255,255,.14); }
:root[data-theme="dark"] .cs-toggle { background: rgba(255,255,255,.05); border-right-color: rgba(255,255,255,.14); }
:root[data-theme="dark"] .cs-search { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
:root[data-theme="dark"] .cs-item:hover,
:root[data-theme="dark"] .cs-item.is-active { background: rgba(255,255,255,.07); }

/* Mobile: the popover becomes full-width under the control. */
@media (max-width: 480px) {
    .cs-pop { width: 100%; }
    .cs-list { max-height: 46vh; }
    .cs-phone { padding: .78rem .8rem; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
}

@media (prefers-reduced-motion: reduce) {
    .cs-control, .cs-pop, .cs-caret, .cs-toggle { transition: none; }
}