/* ================================================
   BANGPOT — Map Page Styles
   Shared components (header, filter chips, bottom nav)
   come from style.css. This file is map-specific only.
   ================================================ */

/* ================================================
   CONTROLS BAR — single row
   Toggle switch left, time chips right
   ================================================ */
.map-controls {
  background: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-light);
}

.map-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ================================================
   MODE TOGGLE SWITCH — Events / Venues
   Pill-shaped container with sliding active state
   ================================================ */
.map-toggle {
  display: flex;
  align-items: center;
  background: var(--color-gray-bg);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

.map-toggle-btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gray);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.map-toggle-btn.active {
  background: var(--color-dark);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

/* ================================================
   TIME WINDOW CHIPS — 7d / 14d / 30d
   Color-coded, active color set via JS
   ================================================ */
.map-time-bar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.map-time-chip {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 2px solid var(--color-gray-light);
  background: var(--color-white);
  color: var(--color-gray);
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.map-time-chip:active {
  transform: scale(0.95);
}

/* ================================================
   MAP CONTAINER
   Full height minus header + controls + nav
   ================================================ */
.map-container {
  position: relative;
  width: 100%;
  /* Full viewport minus: header ~60px + controls ~58px + nav 64px */
  height: calc(100vh - 182px);
  background: var(--color-gray-bg);
}

#map {
  width: 100%;
  height: 100%;
}

/* ================================================
   MAP LOADING OVERLAY
   ================================================ */
.map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  gap: var(--space-4);
  z-index: 10;
}

.map-loading p {
  font-size: var(--text-sm);
  color: var(--color-gray);
  font-weight: 500;
}

.map-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-gray-light);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ================================================
   BOTTOM CARD — slides up on pin tap
   ================================================ */
.map-card {
  position: fixed;
  bottom: var(--nav-height);
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: var(--max-width);
  background: var(--color-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.map-card.visible {
  transform: translateX(-50%) translateY(0);
}

.map-card-handle {
  width: 36px;
  height: 4px;
  background: var(--color-gray-light);
  border-radius: var(--radius-full);
  margin: var(--space-3) auto var(--space-1);
}

.map-card-inner {
  padding: var(--space-2) var(--space-4) var(--space-5);
}

.map-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ================================================
   EVENT CARD IN MAP
   ================================================ */
.map-card-event {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.map-card-img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--color-gray-light);
}

.map-card-img-placeholder {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #0d0d0d 0%, #1a2e1a 100%);
  flex-shrink: 0;
}

.map-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.map-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.map-card-venue-name {
  font-size: var(--text-xs);
  color: var(--color-gray);
  font-weight: 500;
}

.map-card-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-1);
}

.map-card-time {
  font-size: var(--text-sm);
  font-weight: 600;
}

.map-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

/* ================================================
   VENUE CARD IN MAP
   ================================================ */
.map-card-venue {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.map-card-venue-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.map-card-logo {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid var(--color-gray-light);
  flex-shrink: 0;
}

.map-card-logo-placeholder {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-gray-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-gray);
}

.map-card-venue-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.map-card-venue-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.map-card-venue-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-dark);
}

.map-card-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  flex-shrink: 0;
}

.map-card-tier {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  align-self: flex-start;
}

.map-card-tier.tier-combo {
  background: var(--color-primary);
  color: var(--color-white);
}

.map-card-tier.tier-partner {
  background: var(--color-deep);
  color: var(--color-white);
}

.map-card-area {
  font-size: var(--text-sm);
  color: var(--color-gray);
}

.map-card-venue-actions {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-gray-light);
}

.map-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  flex: 1;
  transition: all 0.2s ease;
}

.map-card-btn-directions {
  background: var(--color-primary);
  color: var(--color-white);
}

.map-card-btn-directions:hover {
  background: var(--color-deep);
}

.map-card-btn-venue {
  background: transparent;
  color: var(--color-dark);
  border: 2px solid var(--color-gray-light);
}

.map-card-btn-venue:hover {
  border-color: var(--color-dark);
}
/* ================================================
   DESKTOP — layout polish
   ================================================ */
@media (min-width: 1024px) {
  .map-controls {
    padding: var(--space-3) var(--space-8);
  }

  /* Map height: minus desktop nav 56px + page header 56px + controls 58px */
  .map-container {
    height: calc(100vh - 170px);
  }

  /* Slide-up card — full width capped */
  .map-card {
    max-width: 480px;
    bottom: var(--space-6);
    border-radius: var(--radius-xl);
  }
}
/* ================================================
   VENUE FILTER CHIPS — Official / Claimed / Unclaimed
   Only visible in Venues mode
   ================================================ */
.map-venue-filter {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.map-venue-chip {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 2px solid var(--color-gray-light);
  background: var(--color-white);
  color: var(--color-gray);
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.map-venue-chip.active {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.map-venue-chip:active {
  transform: scale(0.95);
}
/* ================================================
   VENUE FILTER — dropdown on mobile, chips on desktop
   ================================================ */

/* Venue filter hidden by default, shown via JS style.display */
.map-venue-filter        { display: none; }
.map-venue-dropdown-wrap { display: none; flex-shrink: 0; position: relative; }

.map-venue-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 2px solid var(--color-gray-light);
  background: var(--color-white);
  color: var(--color-dark);
  cursor: pointer;
  transition: border-color 0.15s ease;
  white-space: nowrap;
}

.map-venue-dropdown-btn:hover,
.map-venue-dropdown-btn.open { border-color: var(--color-dark); }

.map-venue-dropdown-btn svg { transition: transform 0.15s ease; flex-shrink: 0; }
.map-venue-dropdown-btn.open svg { transform: rotate(180deg); }

.map-venue-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  min-width: 140px;
  z-index: 100;
  overflow: hidden;
}

.map-venue-dropdown-item {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-dark);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.1s ease;
}

.map-venue-dropdown-item:hover { background: var(--color-gray-bg); }
.map-venue-dropdown-item.active { font-weight: 700; color: var(--color-primary); }

/* Desktop: show chips only in venues mode, always hide dropdown */
@media (min-width: 1024px) {
  .map-venue-filter                              { display: none; }
  .map-controls--venues .map-venue-filter        { display: flex; }
  .map-venue-dropdown-wrap                       { display: none !important; }
}