/* ══════════════════════════════════════════════════════════════════════════
   THE COUNTRY FIELD

   `partials/country_select.html` and `js/country-select.js`. One stylesheet,
   loaded by both base layouts, where there were four copies of the flag rules
   -- admin.css, account.css, booking.css and inline in Settings -- at three
   different paddings.

   The button wears the select's own classes, so how the field looks is still
   decided by whatever draws `.form-select` where it sits. Only what a button
   does differently from a select is said here, and then the list.

   Every color is a `palette.css` variable.
   ══════════════════════════════════════════════════════════════════════════ */

.country-select-wrapper { position: relative; }

/* Still the value and still in the form, laid exactly under the button. */
.bt-cs-native {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none;
}

.bt-cs-field {
    display: flex; align-items: center; gap: 9px;
    width: 100%; text-align: left; cursor: pointer;
    white-space: nowrap; overflow: hidden;
}
.bt-cs-field:disabled { cursor: default; }
.bt-cs-field.is-invalid { border-color: var(--error-color); }
.bt-cs-flag { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.form-select-sm.bt-cs-field .bt-cs-flag { width: 16px; height: 16px; }
.bt-cs-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bt-cs-text.is-empty { color: var(--text-muted); }

/* ── the list ──────────────────────────────────────────────────────────────
   Drawn at the end of the document and placed by the script, so a card with
   `overflow:hidden` round the field cannot cut it off. */
.bt-cs-panel {
    position: fixed; z-index: 1191;
    display: flex; flex-direction: column;
    background: var(--bg-elevated); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 18px 50px var(--card-shadow);
    font-family: var(--font-sans); font-size: 1rem; line-height: 1.4;
    overflow: hidden;
}
.bt-cs-panel:focus { outline: none; }
.bt-cs-find { flex: 0 0 auto; padding: 8px 8px 4px; }
.bt-cs-search {
    display: block; width: 100%;
    border: 1px solid var(--field-border); border-radius: 9px;
    padding: 8px 10px; font: inherit; font-size: .85rem;
    background: var(--bg-primary); color: var(--text-primary); outline: none;
}
.bt-cs-search:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-alpha); }
.bt-cs-list {
    position: relative; flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 2px 6px 6px;
}
.bt-cs-opt {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 8px; border: 0; border-radius: 8px; background: none;
    font: inherit; font-size: .87rem; color: var(--text-primary);
    text-align: left; cursor: pointer;
}
.bt-cs-opt:hover { background: var(--bg-secondary); }
.bt-cs-opt:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }
.bt-cs-opt .bt-cs-flag { width: 18px; height: 18px; }
.bt-cs-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-cs-opt.is-clear { color: var(--text-muted); }
.bt-cs-opt.is-on { color: var(--accent-color); font-weight: 600; }
.bt-cs-tick {
    width: 14px; height: 14px; margin-left: auto; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 2.6;
    stroke-linecap: round; stroke-linejoin: round;
}
.bt-cs-none { margin: 0; padding: 18px 10px; text-align: center; font-size: .82rem; color: var(--text-muted); }

/* ── on a phone ────────────────────────────────────────────────────────────
   A sheet from the bottom edge, the shape of the nav menu and the trip filter.
   Tall from the start, because the keyboard takes the bottom of the screen the
   moment the search is touched, and the matches are drawn at the top. */
.bt-cs-scrim {
    position: fixed; inset: 0; z-index: 1190; background: var(--scrim);
    animation: btCsFade .25s ease-out backwards;
}
.bt-cs-panel.is-sheet {
    left: 0; right: 0; top: auto; bottom: 0;
    height: 86%;
    border-radius: 20px 20px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -12px 40px var(--card-shadow);
    animation: btCsRise .28s cubic-bezier(.22,.61,.36,1) backwards;
}
.bt-cs-head { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 14px 15px 6px; }
.bt-cs-head b { font-size: .95rem; font-weight: 700; letter-spacing: -.018em; }
.bt-cs-x {
    margin-left: auto; flex: 0 0 auto; width: 30px; height: 30px;
    border: 0; border-radius: 50%;
    background: var(--bg-secondary); color: var(--text-primary);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.is-sheet .bt-cs-find { padding: 4px 12px 6px; }
/* Sixteen pixels, or iOS zooms the page the moment the field is touched. */
.is-sheet .bt-cs-search { font-size: 16px; padding: 10px 12px; }
.is-sheet .bt-cs-list { padding: 2px 8px 10px; }
.is-sheet .bt-cs-opt { padding: 12px 8px; font-size: .95rem; }
.is-sheet .bt-cs-opt .bt-cs-flag { width: 22px; height: 22px; }

@keyframes btCsRise { from { transform: translateY(100%); } to { transform: none; } }
@keyframes btCsFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .bt-cs-scrim, .bt-cs-panel.is-sheet { animation: none; }
}