/* ============================================================
   Travel-region grouped pickers (Phase 2)
   Shared by: onboarding Step 1, settings Work tab, Discover More-filters,
   and the AdminCP user editor. Onboarding/settings use .lm-pill buttons
   (JS-bound); discover keeps .lm-filter-checkbox, admin keeps .check — all
   three gain the group headings + flag emoji below.
   ============================================================ */
.lm-travel-group { margin-bottom: 18px; transition: opacity 150ms ease; }
.lm-travel-group:last-child { margin-bottom: 0; }
.lm-travel-group-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lm-text-muted, #64748b);
}
.lm-travel-pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* Compact travel pills so a 3-pill group (e.g. Europe · UK · Eastern Europe/CIS)
   fits on one line inside the half-width settings grid column. */
.lm-travel-pill { padding: 6px 11px; gap: 4px; font-size: 12.5px; }
.lm-travel-pill .lm-pill-flag { margin-right: 3px; }

/* Pill buttons (onboarding/settings). Base look comes from .lm-pill; this
   just guarantees the flag + label + check sit on one row. Selected = brand
   green so it matches the rest of the UI. */
.lm-travel-pill { display: inline-flex; align-items: center; }
.lm-travel-pill.is-selected { background: var(--lm-primary, #0f6f4f); border-color: var(--lm-primary, #0f6f4f); color: #fff; }
/* Hover/focus on a SELECTED pill: keep it dark-green with white text. Without
   this the base .lm-pill:hover lightens the background, leaving green text on a
   pale fill (unreadable in light mode). */
.lm-travel-pill.is-selected:hover,
.lm-travel-pill.is-selected:focus-visible {
  background: var(--lm-primary-strong, #0a5a3f);
  border-color: var(--lm-primary-strong, #0a5a3f);
  color: #fff;
}
.lm-travel-pill.is-selected .lm-pill-text,
.lm-travel-pill.is-selected:hover .lm-pill-text { color: #fff; }

/* Group flow: keep groups content-sized (never grow to a full row) and
   top-aligned, so small adjacent groups (e.g. Middle East & Africa +
   Asia & Oceania) pack onto the same line when width allows. */
.lm-travel-regions { align-items: flex-start; }
.lm-travel-group { flex: 0 1 auto; }

/* Flag emoji — keep rectangular, never round. */
.lm-pill-flag,
.lm-travel-flag { font-size: 1.05em; line-height: 1; margin-right: 5px; border-radius: 0; }

/* "Available worldwide" ON → fade the region groups (still clickable). The
   data-faded attribute is toggled by the worldwide switch in
   lm-onboarding.js / lm-settings.js. */
.lm-travel-regions[data-faded="1"] .lm-travel-group { opacity: 0.6; }