/* City switcher modal */
.city-switcher[hidden] { display: none; }
.city-switcher {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.city-switcher-bg {
  position: absolute; inset: 0;
  background: rgba(11, 11, 13, 0.78);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.city-switcher-panel {
  position: relative;
  background: #16161c;
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 18px;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.6);
  animation: citySwitcherIn .2s ease-out;
}
@keyframes citySwitcherIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.city-switcher-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.city-switcher-header h2 {
  margin: 0;
  font-size: 16px; font-weight: 800; color: #fff;
  letter-spacing: -0.01em;
}
.city-switcher-close {
  background: transparent; border: none; cursor: pointer;
  color: #94949c;
  padding: 6px; margin: -6px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.city-switcher-close:hover { color: #fff; background: rgba(255,255,255,0.05); }
.city-switcher-empty {
  padding: 32px 22px; text-align: center;
  color: #94949c; font-size: 14px; margin: 0;
}
.city-switcher-grid {
  display: flex; flex-direction: column;
  padding: 8px;
}
.city-switcher-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: #d4d4d8;
  font-size: 15px; font-weight: 500;
  transition: background 0.15s, color 0.15s;
  border: 1px solid transparent;
}
.city-switcher-item:hover {
  background: rgba(201, 168, 76, 0.08);
  color: #fff;
}
.city-switcher-item.is-current {
  background: rgba(201, 168, 76, 0.12);
  border-color: rgba(201, 168, 76, 0.35);
  color: #fff;
}
.city-switcher-name {
  display: inline-flex; align-items: center; gap: 8px;
}
.city-switcher-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fde68a, #d4a548);
  color: #4a2d0a;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.city-switcher-arrow { color: #6a6a72; font-size: 16px; }
.city-switcher-here {
  color: #d4a548;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.city-switcher-item.is-current .city-switcher-here::before { content: '✓ '; }

@media (max-width: 540px) {
  .city-switcher-panel { max-width: 100%; }
}