/* [wolkenradar] — klassieke stijl, zoals de andere weer-plugins (Weer Hub). */
.wwr {
	--wwr-blauw: var(--wk-knop, #1a5fa0);
	background: #f3f4f6;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	margin: 0 auto 2em;
	color: #1c2430;
	font-size: 14px;
	box-sizing: border-box;
}

.wwr *,
.wwr *::before,
.wwr *::after {
	box-sizing: border-box;
}

.wwr-kop {
	background: linear-gradient(90deg, var(--wk-kop-basis-1, #1f5fae), var(--wk-kop-basis-2, #4a8ad6));
	color: var(--wk-kop-basis-tekst, #fff);
	padding: 10px 16px;
	font-size: 16px;
	font-weight: 700;
}

/* Bediening: tijd, afspelen, schuifbalk, lagen. */
.wwr-bediening {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	padding: 14px 16px 12px;
}

.wwr-tijd {
	flex: none;
	min-width: 72px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--wwr-blauw);
	color: var(--wk-knop-tekst, #fff);
	font-weight: 700;
	font-size: 14px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.wwr button.wwr-speel {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 1px solid #c9ced6;
	border-radius: 50%;
	background: #fff;
	color: var(--wwr-blauw);
	cursor: pointer;
	box-shadow: none;
}

.wwr button.wwr-speel:hover {
	border-color: var(--wwr-blauw);
	background: #fff;
}

.wwr .wwr-i-pauze { display: none; }
.wwr.is-spelend .wwr-i-speel { display: none; }
.wwr.is-spelend .wwr-i-pauze { display: inline; }

.wwr-schuif {
	--wwr-pct: 100%;
	flex: 1 1 180px;
	min-width: 120px;
	height: 6px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--wwr-blauw) var(--wwr-pct), #d6dbe2 var(--wwr-pct));
	cursor: pointer;
}

.wwr-schuif::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--wwr-blauw);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.wwr-schuif::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--wwr-blauw);
}

.wwr-lagen {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wwr button.wwr-laag {
	margin: 0;
	padding: 6px 14px;
	border: 1px solid #c9ced6;
	border-radius: 999px;
	background: #fff;
	color: #1c2430;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	text-transform: none;
}

.wwr button.wwr-laag:hover {
	border-color: var(--wwr-blauw);
	background: #fff;
	color: #1c2430;
}

.wwr button.wwr-laag.is-actief {
	background: var(--wwr-blauw);
	border-color: var(--wwr-blauw);
	color: var(--wk-knop-tekst, #fff);
}

/* Het beeld. */
.wwr-beeld {
	position: relative;
	margin: 0 16px;
	border-radius: 12px;
	overflow: hidden;
	background: #1d2733;
}

.wwr-img[hidden] {
	display: none;
}

.wwr-img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none !important;
	object-fit: cover;
}

.wwr-label {
	position: absolute;
	top: 12px;
	left: 14px;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
	line-height: 1.25;
	pointer-events: none;
}

.wwr-label b {
	display: block;
	font-size: 20px;
	font-weight: 700;
}

.wwr-label span {
	font-size: 13px;
}

.wwr-stip {
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.wwr-stip i {
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #e63946;
	border: 2px solid #fff;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

.wwr-stip em {
	position: absolute;
	left: 14px;
	top: -3px;
	font-style: normal;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
	white-space: nowrap;
}

.wwr-laden {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 12px;
}

.wwr-laden[hidden] {
	display: none;
}

.wwr-uitleg {
	margin: 10px 16px 0;
	font-size: 12px;
	color: #5b6472;
}

.wwr-voet {
	padding: 8px 16px 14px;
	font-size: 11px;
	color: #5b6472;
	text-align: right;
}

.wwr-voet a {
	color: inherit;
}

@media (max-width: 600px) {
	.wwr-schuif {
		order: 3;
		flex-basis: 100%;
	}
	.wwr-label b {
		font-size: 16px;
	}
}