/* Country chooser, first-visit overlay and header switcher. Its own file because
   the landing page (Home/Index, Layout = null) doesn't load site.css; both it and
   _Layout link this. Radius tokens have fallbacks for the same reason. */

.country-chooser__options { display: grid; gap: 12px; }
.country-chooser__option {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 16px 18px;
  background: var(--bg); color: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: var(--radius-md, 14px);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.country-chooser__option:hover { border-color: var(--accent); }
.country-chooser__option:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.country-chooser__option:active { transform: translateY(1px); }
.country-chooser__option.is-current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.country-chooser__flag { width: 36px; height: 24px; flex: none; }
.country-chooser__name { flex: 1; font-weight: 700; font-size: 17px; }
.country-chooser__current {
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--accent); padding: 3px 10px; border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* As rows (Profile): no boxes, a tick on the current country. */
.country-chooser--rows .country-chooser__options { gap: 0; }
.country-chooser--rows .country-chooser__option { min-height: 52px; padding: 0; border: 0; border-radius: 0; background: none; }
.country-chooser--rows .country-chooser__option + .country-chooser__option { border-top: 1px solid var(--line); }
.country-chooser--rows .country-chooser__flag { width: 28px; height: 20px; }
.country-chooser--rows .country-chooser__name { font-size: 15.5px; font-weight: 600; }
.country-chooser--rows .is-current .country-chooser__name { font-weight: 800; }
.country-chooser--rows .country-chooser__tick { width: 20px; height: 20px; flex: none; color: var(--brand-navy); }

.country-screen { min-height: 100dvh; display: grid; place-items: center; padding: 32px 20px; background: var(--bg-2); }
.country-screen__inner { width: 100%; max-width: 440px; display: grid; gap: 14px; }
.country-screen__title { font-size: clamp(26px, 6vw, 34px); line-height: 1.15; margin: 10px 0 0; text-wrap: balance; }
.country-screen__lede { margin: 0 0 8px; color: color-mix(in srgb, var(--ink) 68%, transparent); }

/* First-visit overlay on the landing / app welcome page. The page underneath is
   fully rendered (crawlers and no-JS readers see it); only people get the dialog. */
.country-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(3px);
}
.country-overlay__card {
  width: 100%; max-width: 440px; display: grid; gap: 12px;
  background: var(--bg); border-radius: var(--radius-lg, 20px);
  padding: 26px 22px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}
.country-overlay__title { margin: 0; font-size: 24px; line-height: 1.2; }
.country-overlay__lede { margin: 0 0 6px; color: color-mix(in srgb, var(--ink) 68%, transparent); }

/* Header switcher: current country, links to the country screen. */
.country-switch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--radius-pill, 999px);
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: var(--bg);
}
.country-switch:hover { border-color: var(--accent); }
.country-switch__flag { width: 20px; height: 14px; flex: none; }

/* Inline SVG flags (_CountryFlag.cshtml). */
.country-flag {
  display: block; width: 100%; height: 100%;
  border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Country page header: brand left, Cancel right (only when switching). */
.country-screen__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.country-screen__back { font-weight: 600; color: var(--ink); text-decoration: none; padding: 8px 4px; }
.country-screen__back:hover { color: var(--accent); }

/* Header switcher placement. Desktop: right after the brand. Phones: pushed to the
   right next to the burger, and the brand's width budget makes room for it (the
   _Nav rule only reserves space for the burger). */
.site-nav .country-switch { flex: none; margin-left: 14px; }
@media (max-width: 720px) {
  .site-nav .country-switch { margin-left: auto; margin-right: 10px; }
  .site-nav__inner:has(.country-switch) .site-nav__brand {
    max-width: calc(100vw - 190px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }
}

/* "You have 2 filters in the Netherlands — switch" on an empty list (_OtherCountryFilters). */
.other-country {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  max-width: 36rem; margin: var(--space-4, 16px) auto var(--space-5, 24px); padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--radius-md, 14px); background: var(--bg);
}
.other-country__flag { width: 24px; height: 16px; flex: none; }
.other-country__text { flex: 1; min-width: 12rem; font-weight: 600; }
.other-country form { margin: 0; }