/* country.css — Country selection step of the search flow (Bento 2026) */

.country-page { padding-block: var(--sp-8) var(--sp-9); max-width: 900px; }

/* ── Search field ─────────────────────────────────────────────────────── */

.country-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-6);
}

.country-search-icon {
  position: absolute;
  left: var(--sp-4);
  display: flex;
  color: var(--bento-ink-soft);
  pointer-events: none;
}

.country-search {
  width: 100%;
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) * 2 + 16px);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-pill);
  background: var(--bento-cream);
  font-size: 0.9375rem;
  color: var(--bento-ink);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.country-search::placeholder { color: var(--bento-ink-soft); }
.country-search:focus-visible { border-color: var(--bento-tan-300); background: var(--bento-white); }

/* ── World option (pinned) ────────────────────────────────────────────── */

.world-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}

.world-card__icon { font-size: 2.25rem; line-height: 1; flex-shrink: 0; }
.world-card__text { flex: 1; min-width: 0; }
.world-card__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bento-ink);
}
.world-card__desc { font-size: 0.875rem; color: var(--bento-ink-soft); margin: var(--sp-1) 0 0; }
.world-card__arrow { color: var(--bento-ink-soft); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-spring); }
.world-card:hover .world-card__arrow { transform: translateX(4px); }

/* ── Region section label ─────────────────────────────────────────────── */

.region-section-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bento-ink-soft);
  margin-bottom: var(--sp-4);
}

/* ── Region accordion cards ───────────────────────────────────────────── */

.region-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
@media (max-width: 700px) {
  .region-grid { grid-template-columns: 1fr; }
}

.region-card { padding: 0; overflow: hidden; }

.region-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  min-height: 44px;
  cursor: pointer;
  text-align: left;
}

.region-header__name { flex: 1; font-weight: 600; color: var(--bento-ink); font-size: 0.9375rem; }
.region-header__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bento-ink-soft);
  background: var(--bento-sand);
  border-radius: var(--r-pill);
  padding: 2px var(--sp-2);
}
.region-header__chevron { color: var(--bento-ink-soft); transition: transform var(--dur-base) var(--ease-spring); }
.region-header[aria-expanded="true"] .region-header__chevron { transform: rotate(180deg); }

.region-body {
  display: none;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0 var(--sp-5) var(--sp-5);
}
.region-body.open { display: flex; }

.country-btn {
  min-height: 40px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-pill);
  background: var(--bento-white);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bento-ink);
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.country-btn:hover { background: var(--bento-sand); }
.country-btn.selected {
  background: var(--bento-tan-200);
  border-color: var(--bento-tan-300);
  color: var(--bento-btn-text);
}

/* ── Footnote ──────────────────────────────────────────────────────────── */

.country-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  color: var(--bento-ink-soft);
  margin: 0;
}
.country-note .icon-xs { margin-top: 3px; }