/* Bel-drukte (scripts/beldrukte.js): bolletje naast de belnummers en de widget op /over-ons/contact/. */
.bd, .bd-compact {
	--bd-rustig: var(--highlight-green, #72B533);
	--bd-normaal: var(--primary-blue, #0077C8);
	--bd-druk: #E08A00;
	--bd-zeerdruk: #D23C3C;
	--bd-grijs: #9AA3AD;
	--bd-muted: #555;
	--bd-border: var(--gray-dark, #E1E1E1);
	--bd-bar: var(--light-blue, #d5f4ff);
	--bd-bar-nu: var(--secundary-blue, #00ACED);
	--bd-live: var(--primary-blue, #0077C8);
	--bd-accent: var(--primary-blue, #0077C8);
}

.bd-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--bd-grijs); flex: none; }
:is(.bd, .bd-compact)[data-niveau="rustig"] .bd-dot { background: var(--bd-rustig); }
:is(.bd, .bd-compact)[data-niveau="normaal"] .bd-dot { background: var(--bd-normaal); }
:is(.bd, .bd-compact)[data-niveau="druk"] .bd-dot { background: var(--bd-druk); }
:is(.bd, .bd-compact)[data-niveau="zeerdruk"] .bd-dot { background: var(--bd-zeerdruk); }
:is(.bd, .bd-compact)[data-niveau="onbereikbaar"] .bd-dot { background: var(--bd-druk); }

/* ---------- Naast een belnummer ---------- */
.bd-compact {
	display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px;
	margin-left: 8px; vertical-align: middle;
	font-size: 0.85rem; line-height: 1.3; color: var(--bd-muted);
}
.bd-compact-label, .bd-compact-link { white-space: nowrap; }
.bd-compact .bd-dot { width: 8px; height: 8px; }
.bd-compact-sep { color: var(--bd-grijs); }
.bd-compact-link { color: var(--color-link, #1B75BA); text-decoration: underline; text-underline-offset: 2px; }
/* In een kaart: op een eigen regel, in de kleur van de tekst eromheen */
.bd-compact--blok { display: flex; margin: 0.3rem 0 0; color: inherit; opacity: 0.85; }
/* Onder een knop: eigen regel, de knop zelf blijft gelijk */
.bd-compact--onder { display: flex; margin: 6px 0 0; }
.bd-compact--midden { justify-content: center; }
/* Losse statusregel (contactmenu) */
[data-beldrukte-status]:empty { display: none; }
[data-beldrukte-status] .bd-compact { margin-left: 0; }

/* ---------- Volledige widget (contactpagina) ---------- */
.bd {
	background: var(--color-white, #FFF);
	border: 1px solid var(--bd-border);
	border-radius: var(--border-radius, 5px);
	padding: var(--padding-default, 1.2rem);
	margin: 1.2rem 0;
	max-width: 520px;
	line-height: 1.45;
}
.bd[hidden] { display: none; }
.bd-head { display: flex; align-items: center; gap: 8px; }
.bd-label { font-family: var(--font-bold, inherit); font-size: 1.05rem; font-weight: normal; }
.bd-live {
	margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
	font-size: 0.72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bd-live);
}
.bd-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: bd-pulse 1.6s ease-in-out infinite; }
@keyframes bd-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .bd-live::before { animation: none; } }

.bd-sub { margin: 6px 0 0; color: var(--bd-muted); font-size: 0.95rem; }
.bd-tip { margin: 10px 0 0; color: var(--bd-muted); font-size: 0.88rem; }
.bd-wacht { margin-top: 6px; color: inherit; font-size: 0.95rem; }

.bd-chart { margin-top: 14px; }
.bd-bars { display: flex; align-items: flex-end; gap: 4px; height: 84px; border-bottom: 1px solid var(--bd-border); }
.bd-col { position: relative; flex: 1; height: 100%; }
.bd-bar, .bd-bar-live { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px 3px 0 0; }
.bd-bar { background: var(--bd-bar); }
.bd-col.is-nu .bd-bar { background: var(--bd-bar-nu); }
.bd-bar-live { left: 22%; right: 22%; background: var(--bd-live); transition: height .4s ease; }
.bd-axis { display: flex; gap: 4px; margin-top: 4px; }
.bd-axis span { flex: 1; text-align: center; font-size: 0.72rem; color: var(--bd-muted); white-space: nowrap; }

.bd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bd-btn {
	display: inline-block; padding: 9px 14px; border-radius: var(--border-radius, 5px);
	background: var(--bd-accent); color: var(--color-white, #FFF); border: 1px solid var(--bd-accent);
	text-decoration: none; font-family: var(--font-bold, inherit); font-size: 0.95rem;
}
.bd-btn:hover { filter: brightness(1.08); text-decoration: none; }
.bd-btn--ghost { background: transparent; color: var(--bd-accent); }
.bd-btn--wa { --bd-accent: var(--color-dark-green, #0a5d00); }