/* Beste reistijd — weergrafiek (server-side SVG) + compacte Pax-strip.
   SVG-element-styles 1-op-1 uit de mockup, gescoped onder .bpn-season-chart. */

.bpn-season-chart {
	--ink: #0f2c3f;
	--muted: #5d7889;
	--temp-1: #ff7a18;  --temp-2: #ff9d4d;  --temp-3: #ffd9b3;
	--water: #1790cf;   --water-dark: #0a5d8a;
	--snow: #8ecde8;    --snow-dark: #2f6f8c;
	--rain: #1f7fb0;    --rain-dark: #0d4a6b;
	--sun: #ffb31e;     --sun-dark: #b07700;
	--wind: #2aa7a0;    --wind-soft: rgba(42, 167, 160, 0.22);
	--best: #ff7a18;    --best-soft: rgba(255, 122, 24, 0.12);
	--display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
	--body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	margin: 1.5rem 0;
	padding: 22px 24px 20px;
	border-radius: 26px;
	background: linear-gradient(140deg, #f6fbfe 0%, #eaf2f8 100%);
	border: 1px solid rgba(255, 255, 255, 0.75);
	box-shadow: 0 18px 50px rgba(15, 44, 63, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7);
	font-family: var(--body);
	color: var(--ink);
}

.bpn-sc-heading {
	font-family: var(--display);
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--ink);
	margin: 0 0 12px;
	letter-spacing: -0.02em;
}

/* Legenda */
.bpn-sc-legend { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 14px; }
.bpn-sc-leg {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 11px; border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.85);
	font-size: 12.5px; font-weight: 800; color: #234458;
	box-shadow: 0 8px 22px rgba(15, 44, 63, 0.06);
}
.bpn-sc-leg i { width: 28px; height: 12px; border-radius: 999px; display: inline-block; }
.bpn-sc-leg-temp i { background: linear-gradient(90deg, var(--temp-1), var(--temp-3)); }
.bpn-sc-leg-water i { background: var(--water); }
.bpn-sc-leg-sun i { background: var(--sun); }
.bpn-sc-leg-uv i { background: linear-gradient(90deg, #5a9e3a, #e8b400, #ef7d00, #e23b2e, #8a3ffc); }
.bpn-sc-leg-rain i { background: linear-gradient(180deg, #7ccdf2, var(--rain-dark)); }
.bpn-sc-leg-rain_days i { background: #eaf6fc; border: 2px solid var(--rain-dark); }
.bpn-sc-leg-snow i { background: #eaf7ff; border: 2px solid var(--snow); }
.bpn-sc-leg-wind i { background: var(--wind); }

/* SVG */
.bpn-sc-svg { width: 100%; height: auto; display: block; overflow: visible; margin-top: 6px; }

/* Beste-periode kader */
.bpn-sc-best-period { fill: var(--best-soft); stroke: rgba(255, 122, 24, 0.85); stroke-width: 2.5; filter: drop-shadow(0 18px 30px rgba(255, 122, 24, 0.16)); }
.bpn-sc-best-header { fill: var(--best); }
.bpn-sc-best-title { fill: #fff; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }

/* Raster + assen */
.bpn-sc-grid { stroke: rgba(15, 44, 63, 0.10); stroke-width: 1; }
.bpn-sc-axis { font-size: 13px; font-weight: 800; fill: rgba(15, 44, 63, 0.42); }

/* Maand-schelp + temp */
.bpn-sc-shell { fill: rgba(214, 230, 240, 0.72); }
.bpn-sc-temp-range { filter: drop-shadow(0 14px 18px rgba(255, 122, 24, 0.22)); }
.bpn-sc-temp-max { font-size: 22px; font-weight: 800; letter-spacing: -0.04em; fill: #5a2400; paint-order: stroke; stroke: rgba(255, 233, 212, 0.9); stroke-width: 3px; stroke-linejoin: round; }
.bpn-sc-temp-min { font-size: 13px; font-weight: 700; fill: rgba(90, 36, 0, 0.66); paint-order: stroke; stroke: rgba(255, 233, 212, 0.9); stroke-width: 3px; stroke-linejoin: round; }
.bpn-sc-month { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; fill: #1d4358; }

/* Zon + UV */
.bpn-sc-sun-core { fill: var(--sun); }
.bpn-sc-sun-ray { stroke: var(--sun); stroke-width: 2.2; stroke-linecap: round; }
.bpn-sc-sun-glow { fill: rgba(255, 179, 30, 0.18); }
.bpn-sc-sun-hours { font-size: 13.5px; font-weight: 800; fill: var(--sun-dark); }
.bpn-sc-uv-badge { stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 2px 3px rgba(15, 44, 63, 0.25)); }
.bpn-sc-uv-num { font-size: 11px; font-weight: 800; fill: #fff; }

/* Neerslag (golvend waterniveau) */
.bpn-sc-precip-area { opacity: 0.96; }
.bpn-sc-precip-surface { fill: none; stroke: #cdeeff; stroke-width: 2.5; stroke-linecap: round; opacity: 0.75; }
.bpn-sc-precip-sheen { animation: bpn-sc-sheen 5.5s linear infinite; }
@keyframes bpn-sc-sheen { from { transform: translateX(-280px); } to { transform: translateX(1240px); } }
.bpn-sc-precip-val { font-size: 12.5px; font-weight: 800; fill: #0d4a6b; paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 3px; stroke-linejoin: round; }
.bpn-sc-precip-title { font-size: 13px; font-weight: 800; fill: rgba(15, 44, 63, 0.5); }

/* Regendagen (klein, onder het waterniveau) */
.bpn-sc-raindays-val { font-size: 11.5px; font-weight: 800; fill: #1f7fb0; }
.bpn-sc-raindays-title { font-size: 12px; font-weight: 800; fill: rgba(15, 44, 63, 0.5); }

/* Sneeuw-badge */
.bpn-sc-snow-badge { fill: #ffffff; stroke: var(--snow); stroke-width: 2; filter: drop-shadow(0 5px 9px rgba(47, 111, 140, 0.3)); }
.bpn-sc-snow-label { font-size: 12.5px; font-weight: 800; fill: var(--snow-dark); dominant-baseline: middle; }
.bpn-sc-snow-flake { fill: none; stroke: var(--snow); stroke-width: 1.4; stroke-linecap: round; }

/* Watertemp-lijn */
.bpn-sc-water-line { fill: none; stroke: var(--water); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 8px 12px rgba(23, 144, 207, 0.24)); }
.bpn-sc-water-halo { fill: rgba(23, 144, 207, 0.20); }
.bpn-sc-water-dot { fill: #fff; stroke: var(--water); stroke-width: 4; }
.bpn-sc-label-pill { fill: rgba(255, 255, 255, 0.92); stroke: rgba(255, 255, 255, 0.8); stroke-width: 1; filter: drop-shadow(0 5px 10px rgba(15, 44, 63, 0.14)); }
.bpn-sc-water-label { font-size: 12px; font-weight: 800; fill: var(--water-dark); dominant-baseline: middle; }

/* Windstrook */
.bpn-sc-foot-divider { stroke: rgba(15, 44, 63, 0.12); stroke-width: 1; }
.bpn-sc-wind-title { font-size: 13px; font-weight: 800; fill: rgba(15, 44, 63, 0.5); }
.bpn-sc-wind-base { stroke: rgba(15, 44, 63, 0.12); stroke-width: 1.5; }
.bpn-sc-wind-bar { fill: var(--wind); }
.bpn-sc-wind-gust { fill: var(--wind-soft); }
.bpn-sc-wind-val { font-size: 12px; font-weight: 800; fill: #fff; }
.bpn-sc-wind-val-soft { font-size: 10.5px; font-weight: 700; fill: var(--muted); }
.bpn-sc-wind-month { font-size: 12px; font-weight: 800; fill: rgba(15, 44, 63, 0.45); }

/* Multi-locatie tabs (CSS-only via radio-inputs) */
.bpn-sc-tabin { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bpn-sc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.bpn-sc-tablabel { cursor: pointer; padding: 6px 13px; border-radius: 999px; border: 1px solid #cbd5e1; background: #fff; font-size: 13px; font-weight: 700; color: #334155; user-select: none; }
.bpn-sc-tablabel:hover { border-color: #0f766e; color: #0f766e; }
.bpn-sc-multi .bpn-sc-panel { display: none; }

.bpn-sc-src { margin: 8px 2px 0; font-size: 11.5px; color: #64748b; }

/* Verborgen SEO/toegankelijkheids-tabel (zelfde cijfers, leesbaar voor crawlers/screenreaders) */
.bpn-sc-seo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Compacte 12-maands strip (Pax / smalle weergaven) */
.bpn-sc-strip { display: flex; gap: 3px; margin: 8px 0 4px; max-width: 360px; }
.bpn-sc-cell { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.bpn-sc-cell i { display: block; width: 100%; height: 14px; border-radius: 4px; background: #e2e8f0; }
.bpn-sc-cell b { font-size: 9px; font-weight: 700; color: #64748b; line-height: 1; }
.bpn-sc-goed i { background: #16a34a; }
.bpn-sc-ok i { background: #ca8a04; }
.bpn-sc-slecht i { background: #dc2626; }
.bpn-sc-best i { box-shadow: 0 0 0 2px #0f2c3f inset; }
.bpn-sc-best b { color: #0f2c3f; }
.bpn-sc-strip-label { margin: 2px 0 0; font-size: 12px; font-weight: 700; color: #334155; }

@media (max-width: 600px) {
	.bpn-season-chart { padding: 14px 12px; border-radius: 18px; }
	.bpn-sc-legend .bpn-sc-leg { font-size: 11px; padding: 5px 9px; }
}

@media (prefers-reduced-motion: reduce) {
	.bpn-sc-precip-sheen { animation: none; }
}