/* MAP card — Leaflet mini-map replacing static HKO radar image */
.wx-map-instance {
  width: 100%;
  height: 640px;
  border-radius: 0 0 12px 12px;
}

.leaflet-container {
  background: #0a0c10 !important;
  font-family: var(--font-sans) !important;
}

/* Weather layer toggle buttons */
.wx-layer-toggles {
  display: flex;
  gap: 0.35rem;
}

.wx-layer-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.wx-layer-btn svg {
  width: 100%;
  height: 100%;
}

.wx-layer-btn:hover {
  border-color: var(--glass-border-hover);
  color: var(--text-main);
}

.wx-layer-btn.active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-dim);
}

/* Lightning active tints the button amber-gold */
.wx-layer-btn.active[title="Lightning"] {
  border-color: #f59e0b;
  color: #f59e0b;
  background: rgba(245,158,11,0.12);
}

/* Rain active — blue tint */
.wx-layer-btn.active[title="Rain Radar"] {
  border-color: #3b82f6;
  color: #3b82f6;
  background: rgba(59,130,246,0.12);
}

/* Wind active — green tint */
.wx-layer-btn.active[title="Wind"] {
  border-color: #10b981;
  color: #10b981;
  background: rgba(16,185,129,0.12);
}

/* HKO radar image container (kept for any legacy reference) */
.radar-image-container {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--glass-border);
  background: #000;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
  filter: contrast(1.1) brightness(0.9);
}

.radar-overlay-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

.loading-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
  color: var(--text-muted);
  gap: 1rem;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.05);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 1s infinite linear;
}


/* Windy embed wrapper. Height was an inline style (640px fixed) until 2026-07-21 —
   moved here so mobile can size it against the viewport, which an inline style
   would always beat. */
.wx-map-wrapper {
  position: relative;
  width: 100%;
  height: 640px;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

@media (max-width: 768px) {
  /* Size the card so that at the bottom of the Weather tab it sits exactly between the
     sticky header and the footer — the whole map visible at once, nothing clipped.
     Measured on 390x844, the 313px of subtracted chrome is:
       128 sticky header + 95 card title/padding + 90 footer (version + last-updated).
     The footer term is what makes it land on a full card rather than one still tucked
     under the header — sizing against the viewport alone is not enough, because the
     page stops scrolling while the footer is still on screen.
     dvh, not vh: on iOS vh is the URL-bar-hidden height, so a vh-sized card overflows
     by the height of the URL bar whenever it is showing. The vh line is the fallback
     for browsers without dvh and must come first. */
  .wx-map-wrapper {
    height: calc(100vh - 313px);
    height: calc(100dvh - 313px);
    min-height: 360px;
  }
}