/* =============================================================
   LOCATION SELECTOR MODAL  ("Choose Your Location")
   ----------------------------------------------------------------
   A right-side slideout dialog opened from the footer region button.
   • Overlay dims the page; the white panel slides in from the right.
   • Desktop: ~680px panel, 2-column country grid.
   • Mobile:  full-width panel, single-column grid.
   Colours/typography follow the site (Comfortaa headings, Inter body).
   ============================================================= */

/* Scoped to the modal (not :root) so these tokens don't leak globally. */
.location-modal {
  --loc-text:        #01040d;   /* primary text            */
  --loc-text-muted:  #5d5e60;   /* subtitle / language     */
  --loc-accent:      #1d52e1;   /* selected underline      */
  --loc-border:      #e6e7eb;   /* dividers / hairlines    */
  --loc-hover:       #f4f5f7;   /* card hover background    */
  --loc-pressed:     #e6e8ee;   /* card active/pressed      */
  --loc-flag-bg:     #eef0f5;   /* flag circle placeholder */
}

/* ── Overlay ─────────────────────────────────────────────────── */
.location-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;                 /* above the nav modal (1000) */
  display: none;
  background: rgba(0, 0, 0, 0.5);
  justify-content: flex-end;     /* panel anchored right */
}
.location-modal.active { display: flex; }

/* ── Panel (right slideout) ──────────────────────────────────── */
.location-modal__panel {
  position: relative;
  width: min(680px, 100%);
  height: 100%;
  background: #ffffff;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  color: var(--loc-text);
}
.location-modal.active .location-modal__panel { transform: translateX(0); }

/* Close button — top-RIGHT of the panel (per the Figma design frames; ~32px) */
.location-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: var(--loc-text);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.15s;
  z-index: 2;
}
.location-modal__close:hover { background: var(--loc-hover); }
.location-modal__close:active { background: var(--loc-pressed); }
.location-modal__close:focus-visible {
  outline: 2px solid var(--loc-accent);
  outline-offset: 2px;
}
.location-modal__close svg { width: 16px; height: 16px; }

/* Scroll region holds all content, padded generously (design: ~56px) */
.location-modal__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 80px 56px 48px;
}

.location-modal__title {
  font-family: 'Comfortaa', 'Helvetica Neue', Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 24px;
  /* Figma box is 319 × 52; web Comfortaa is a touch wider than Figma's metric,
     so we hug the one-line title (fit-content + nowrap) rather than hard-set
     319px (which would force an unwanted wrap). */
  width: fit-content;
  white-space: nowrap;
  min-height: 52px;
}
.location-modal__subtitle {
  font-size: 16px;
  line-height: 22px;
  color: var(--loc-text-muted);
  margin: 0 0 24px;
  width: 470px;           /* Figma: 470 × 44 box */
  min-height: 44px;
}

/* Current location row */
.location-modal__current {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  line-height: 19px;
  font-weight: 400;
  margin: 0 0 22px;
}
.location-modal__current span { width: 305px; }   /* Figma: ~305 × 19 box */
.location-modal__pin { width: 18px; height: 24px; object-fit: contain; flex-shrink: 0; }

.location-modal__divider {
  border: none;
  border-top: 1px solid var(--loc-border);
  margin: 0 0 36px;
}

/* ── Regions ─────────────────────────────────────────────────── */
.location-modal__region { margin-bottom: 46px; }
.location-modal__region:last-child { margin-bottom: 0; }

.location-modal__region-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 12px;
  width: 170px;           /* Figma: 170 × 21 box */
  min-height: 21px;
}

.location-modal__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 227px 227px;   /* Figma: 227 · 8 gap · 227 */
  column-gap: 8px;
  row-gap: 12px;
}

/* ── Country card ────────────────────────────────────────────── */
.location-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  border-bottom: 2px solid transparent;   /* room for the selected underline */
  transition: background 0.15s;
}
.location-card:hover { background: var(--loc-hover); }
.location-card:active { background: var(--loc-pressed); }   /* pressed state */
.location-card:focus-visible {
  outline: 2px solid var(--loc-accent);
  outline-offset: 2px;
}

/* Selected / current locale — bold label + accent underline (per design) */
.location-card.is-current {
  background: var(--loc-hover);
  border-bottom-color: var(--loc-accent);
  border-radius: 8px 8px 0 0;
}
.location-card.is-current .location-card__country { font-weight: 700; }

.location-card__flag {
  width: 37px;
  height: 37px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;                 /* size of the emoji fallback */
  line-height: 1;
  border-radius: 50%;
  background: var(--loc-flag-bg);
  overflow: hidden;
}
/* CMS flag image fills the circle */
.location-card__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Figma: country + language text column is a fixed 168px wide, ~19px line each */
.location-card__text { display: flex; flex-direction: column; width: 168px; min-width: 0; }
.location-card__country { font-size: 16px; line-height: 19px; }
.location-card__language { font-size: 13px; line-height: 19px; color: var(--loc-text-muted); }

/* Disabled (e.g. a locale not yet launched) — kept for future rows */
.location-card.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .location-modal__panel { transition: none; }
}

/* =============================================================
   MOBILE — ≤ 640px : full-width panel, single-column grid
   ============================================================= */
@media (max-width: 640px) {
  .location-modal__panel { width: 100%; box-shadow: none; }
  /* 16px gutters; title sits near the top (close moves to the right) */
  .location-modal__scroll { padding: 48px 16px 32px; }
  /* Reset the desktop fixed widths — full-width on small screens */
  .location-modal__title { font-size: 28px; margin-bottom: 22px; width: auto; white-space: normal; }
  .location-modal__subtitle { width: auto; margin-bottom: 22px; }
  .location-modal__region-title { width: auto; }
  .location-modal__current span { width: auto; }
  .location-modal__divider { margin-bottom: 22px; }

  /* Mobile section rhythm (Figma 360): 40px between regions, 14px to first row */
  .location-modal__region { margin-bottom: 40px; }
  .location-modal__region-title { margin-bottom: 14px; }

  /* Single column; text uses the row width instead of the fixed 168px */
  .location-modal__grid { grid-template-columns: 1fr; row-gap: 12px; }
  .location-card__text { width: auto; }

  /* Larger 48px flags on mobile (Figma) */
  .location-card__flag { width: 48px; height: 48px; font-size: 30px; }

  .location-modal__close { top: 16px; right: 16px; }
}