/* Water-station map and official Windy radar embed switcher. */
.map-panel-title {
  gap: 14px;
}

.map-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}

.map-tabs {
  display: flex;
  padding: 3px;
  background: #edf4f9;
  border: 1px solid #dce8f1;
  border-radius: 11px;
}

.map-tabs button {
  border: 0;
  border-radius: 8px;
  padding: 7px 13px;
  background: transparent;
  color: var(--muted);
  font: 700 11px Tahoma, "Noto Sans Thai", sans-serif;
  cursor: pointer;
}

.map-tabs button.active {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 2px 7px rgba(19, 72, 111, .13);
}

.map-tabs button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.map-view[hidden] {
  display: none;
}

.map-view,
.radar-view iframe {
  height: 430px;
}

.radar-view {
  position: relative;
  background: #d8dde1;
}

.radar-view iframe {
  display: block;
  width: 100%;
  border: 0;
}

.windy-full-link {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 8px 11px;
  border-radius: 9px;
  background: rgba(6, 26, 46, .88);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.windy-full-link:hover {
  background: #061a2e;
}

@media (max-width: 900px) {
  .map-toolbar {
    width: 100%;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .map-view,
  .radar-view iframe {
    height: 360px;
  }

  .windy-full-link {
    right: 8px;
    bottom: 8px;
  }
}