/* ═══════════════════════════════════════════════════════════════════
   Location Selection Page - Level 1
   ═══════════════════════════════════════════════════════════════════

   Purpose: Entry experience with calm, confident luxury positioning.
   White background with subtle vignette, centered logo, location list.

   ═══════════════════════════════════════════════════════════════════ */

/* ═══ Page Background ═══ */
.page-location-selection {
  background: radial-gradient(
    circle at center,
    var(--bg-luxury) 0%,
    var(--bg-luxury) 70%,
    rgba(0, 0, 0, 0.85) 100%
  );
  min-height: 100vh;
}

.page-location-selection .location-link {
  color: var(--text-on-navy);
}

/* ═══ Location Selection Container ═══ */
.location-selection-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-lg);
}

.location-logo {
  margin-bottom: var(--space-md);
  width: 420px;
  height: 229px;
  min-height: 229px;
  flex-shrink: 0;
  contain: strict;
  overflow: hidden;
  position: relative;
}

.location-logo .logo {
  width: 420px;
  height: 229px;
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.location-heading {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-2xl);
  text-align: center;
}

.location-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

/* ═══ Responsive Adjustments ═══ */
@media (max-width: 768px) {
  .location-selection-wrapper {
    padding: var(--space-xl) var(--space-md);
  }

  .location-logo {
    margin-bottom: var(--space-2xl);
  }
}

@media (max-width: 480px) {
  .location-logo {
    width: 240px;
    height: 130px;
    min-height: 130px;
  }

  .location-logo .logo {
    width: 240px;
    height: 130px;
    left: 50%;
    transform: translateX(-50%);
  }
}