/* Neerslagradar op plaatspagina's, in de stijl van de weerkaart op de
   homepage. Alle regels zijn gescoped onder .radar-sectie. */

.radar-sectie {
  --rk-sea: #b9d3e2;
  --rk-sea-deep: #a6c6d9;
  --rk-land: #9cba8d;
  --rk-border: #f2f6f3;
  --rk-ink: #22313b;
  --rk-ink-2: #5b6d78;
  --rk-chip: rgba(255, 255, 255, 0.95);
  --rk-chip-line: rgba(34, 49, 59, 0.10);
  --rk-rain: #4a86b8;
  --rk-marker: #2f6ea5;
  --rk-shadow: 0 1px 2px rgba(24, 39, 51, 0.08), 0 8px 24px rgba(24, 39, 51, 0.08);
}

:root[data-theme='dark'] .radar-sectie {
  --rk-sea: #16293c;
  --rk-sea-deep: #122234;
  --rk-land: #2c4433;
  --rk-border: #0e1a24;
  --rk-ink: #e7edf2;
  --rk-ink-2: #9fb0bc;
  --rk-chip: rgba(18, 28, 41, 0.93);
  --rk-chip-line: rgba(231, 237, 242, 0.14);
  --rk-rain: #6aa5d4;
  --rk-marker: #7db4de;
  --rk-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.35);
}

.radar-sectie .rk-kaart {
  position: relative;
  background: linear-gradient(168deg, var(--rk-sea) 0%, var(--rk-sea-deep) 100%);
  border-radius: 16px;
  box-shadow: var(--rk-shadow);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.radar-sectie .rk-kaart svg { display: block; width: 100%; height: auto; }
.radar-sectie #rk-canvas,
.radar-sectie #rk-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.radar-sectie .rk-prov {
  fill: var(--rk-land);
  stroke: var(--rk-border);
  stroke-width: 1.1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.radar-sectie .rk-sealabel {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  fill: var(--rk-ink-2);
  opacity: 0.55;
  text-transform: uppercase;
}
.radar-sectie svg text { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

.radar-sectie .rk-marker-dot { fill: var(--rk-marker); stroke: #ffffff; stroke-width: 1.6; }
.radar-sectie .rk-marker-halo { fill: var(--rk-marker); opacity: 0.22; }
.radar-sectie .rk-marker-naam {
  font-size: 12.5px;
  font-weight: 700;
  fill: var(--rk-ink);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--rk-sea);
  stroke-width: 3;
  stroke-linejoin: round;
}

.radar-sectie .rk-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 1rem;
  text-align: center;
  color: var(--rk-ink-2);
  font-weight: 600;
}

.radar-sectie .rk-zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--rk-chip-line);
  border-radius: 10px;
  background: var(--rk-chip);
  color: var(--rk-ink);
  cursor: pointer;
  box-shadow: var(--rk-shadow);
}
.radar-sectie .rk-zoom .ic {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.radar-sectie .rk-legenda {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  gap: 2px 14px;
  background: var(--rk-chip);
  border: 1px solid var(--rk-chip-line);
  border-radius: 10px;
  box-shadow: var(--rk-shadow);
  padding: 7px 10px;
}
.radar-sectie .rk-legenda-balk {
  grid-column: 1 / -1;
  width: 120px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, #88ddee, #0099cc, #0055bb, #ffee00, #ff8800, #dd0000);
}
.radar-sectie .rk-legenda-tekst { font-size: 0.68rem; font-weight: 600; color: var(--rk-ink-2); }

.radar-sectie .rk-controls {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.9rem;
}
.radar-sectie .rk-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--btn);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s;
}
.radar-sectie .rk-btn:hover { background: var(--btn-hover); }
.radar-sectie .rk-btn:disabled { opacity: 0.5; cursor: default; }
.radar-sectie .rk-btn .ic { width: 18px; height: 18px; fill: currentColor; stroke: none; }

.radar-sectie .rk-tijdlijn {
  position: relative;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  touch-action: none;
  border-radius: 10px;
}
.radar-sectie .rk-tijdlijn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.radar-sectie .rk-grafiek-svg { display: block; width: 100%; height: auto; }
.radar-sectie .rk-gr-lijn { stroke: var(--rk-chip-line); stroke-width: 1; }
.radar-sectie .rk-gr-basis { stroke: var(--rk-ink-2); stroke-width: 1; opacity: 0.5; }
.radar-sectie .rk-gr-tik { stroke: var(--rk-ink-2); stroke-width: 1; opacity: 0.5; }
.radar-sectie .rk-gr-as { font-size: 11px; fill: var(--rk-ink-2); }
.radar-sectie .rk-gr-vlak { fill: var(--rk-rain); opacity: 0.55; stroke: var(--rk-rain); stroke-width: 1.5; }
.radar-sectie .rk-gr-nu { stroke: var(--rk-ink-2); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.7; }
.radar-sectie .rk-gr-cursor { stroke: var(--rk-marker); stroke-width: 2.5; stroke-linecap: round; }

.radar-sectie .rk-flag {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--rk-ink);
  color: var(--rk-sea);
  font-size: 0.78rem;
  line-height: 1.25;
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  z-index: 3;
}
.radar-sectie .rk-flag strong { font-size: 0.86rem; }

.radar-sectie .rk-samenvatting {
  margin: 0.4rem 0 0 calc(42px + 0.9rem);
  color: var(--rk-ink-2);
  font-size: 0.85rem;
}

.radar-sectie .rk-bron {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.radar-sectie .rk-bron a { color: inherit; }