.omwc-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 1em 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(20,30,40,0.08);
}

/* Licht thema (standaard) */
.omwc-theme-light {
	background: #ffffff;
	color: #2b2f33;
	border: 1px solid #e6e8eb;
}

/* Donker thema (via [meteogram theme="dark"]) */
.omwc-theme-dark {
	background: #1a1b1d;
	color: #e6e6e6;
}

/* Donkerblauw thema (via [meteogram theme="darkblue"]) */
.omwc-theme-darkblue {
	background: #0d1b2a;
	color: #eaf2fa;
}

.omwc-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2px 14px;
	padding: 13px 14px 6px;
}

.omwc-header-main {
	flex: 1 1 220px;
	min-width: 0;
}

.omwc-title {
	font-size: 13.5px;
	font-weight: 700;
}

.omwc-updated {
	font-size: 10.5px;
	white-space: nowrap;
	min-height: 1.3em;
	opacity: 0.75;
}

.omwc-theme-light .omwc-title { color: #23262a; }
.omwc-theme-light .omwc-updated { color: #8a8f94; }

.omwc-theme-dark .omwc-title { color: #f0f0f0; }
.omwc-theme-dark .omwc-updated { color: #9a9a9a; }

.omwc-theme-darkblue .omwc-title { color: #eaf2fa; }
.omwc-theme-darkblue .omwc-updated { color: #93aec6; }

.omwc-canvas {
	display: block;
	width: 100%;
	cursor: crosshair;
	touch-action: pan-y;
}

.omwc-tooltip {
	position: absolute;
	z-index: 5;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 12px;
	line-height: 1.5;
	pointer-events: none;
	min-width: 170px;
	max-width: 230px;
}

.omwc-tooltip[hidden] {
	display: none;
}

.omwc-theme-light .omwc-tooltip {
	background: rgba(255, 255, 255, 0.98);
	border: 1px solid rgba(20, 20, 25, 0.12);
	color: #2b2f33;
	box-shadow: 0 4px 14px rgba(20, 20, 25, 0.12);
}

.omwc-theme-dark .omwc-tooltip {
	background: rgba(20, 20, 22, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #f0f0f0;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.omwc-theme-darkblue .omwc-tooltip {
	background: rgba(13, 27, 42, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #eaf2fa;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.omwc-tt-title {
	font-weight: 700;
	margin-bottom: 4px;
}

.omwc-tt-row {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.omwc-tt-row span {
	flex: 1 1 auto;
	opacity: 0.8;
}

.omwc-tt-row b {
	font-weight: 600;
	margin-left: 8px;
}

.omwc-tt-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.omwc-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 8px 14px;
	font-size: 11.5px;
}

.omwc-theme-light .omwc-legend {
	color: #4c5157;
	background: #f7f9fb;
	border-top: 1px solid #eceef0;
}

.omwc-theme-dark .omwc-legend {
	color: #cfcfcf;
	background: rgba(255, 255, 255, 0.045);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.omwc-theme-darkblue .omwc-legend {
	color: #c3d5e6;
	background: rgba(255, 255, 255, 0.04);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.omwc-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.omwc-swatch {
	display: inline-block;
	width: 14px;
	height: 3px;
	border-radius: 2px;
}

.omwc-theme-light .omwc-swatch-temp { background: #df3232; }
.omwc-theme-light .omwc-swatch-feels { background: repeating-linear-gradient(90deg, #98424c 0 3px, transparent 3px 6px); }
.omwc-theme-light .omwc-swatch-precip { background: #4a90c6; height: 8px; border-radius: 1px; }
.omwc-theme-light .omwc-swatch-ts { background: #f2960c; height: 8px; border-radius: 1px; }

.omwc-theme-dark .omwc-swatch-temp { background: #e8483c; }
.omwc-theme-dark .omwc-swatch-feels { background: repeating-linear-gradient(90deg, rgba(230,230,230,0.8) 0 3px, transparent 3px 6px); }
.omwc-theme-dark .omwc-swatch-precip { background: #4a90d9; height: 8px; border-radius: 1px; }
.omwc-theme-dark .omwc-swatch-ts { background: #ff9800; height: 8px; border-radius: 1px; }

.omwc-theme-darkblue .omwc-swatch-temp { background: #ff6b5b; }
.omwc-theme-darkblue .omwc-swatch-feels { background: repeating-linear-gradient(90deg, rgba(220,232,245,0.75) 0 3px, transparent 3px 6px); }
.omwc-theme-darkblue .omwc-swatch-precip { background: #29b6f6; height: 8px; border-radius: 1px; }
.omwc-theme-darkblue .omwc-swatch-ts { background: #ffb300; height: 8px; border-radius: 1px; }

/* Rond bolletje met de Beaufort-kleurenschaal (0=stil t/m 12=orkaan), zoals de badges
   onder de windpijltjes in de grafiek zelf. Zelfde voor beide thema's: vaste schaal. */
.omwc-swatch-beaufort {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: linear-gradient(90deg, #bfbfbf 0%, #57d6b2 28%, #ffe24b 52%, #ff9a2e 74%, #c21f1f 100%);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
}

.omwc-attribution {
	padding: 2px 14px 10px;
	font-size: 10.5px;
}

.omwc-theme-light .omwc-attribution { color: #8a8f94; background: #f7f9fb; }
.omwc-theme-dark .omwc-attribution { color: #9a9a9a; background: rgba(255, 255, 255, 0.045); }
.omwc-theme-darkblue .omwc-attribution { color: #93aec6; background: rgba(255, 255, 255, 0.04); }

.omwc-theme-light .omwc-attribution a { color: #2f6497; text-decoration: none; }
.omwc-theme-dark .omwc-attribution a { color: #9fc4ec; text-decoration: none; }
.omwc-theme-darkblue .omwc-attribution a { color: #7ec8fa; text-decoration: none; }
.omwc-attribution a:hover { text-decoration: underline; }

.omwc-more {
	padding: 0 14px 14px;
}

.omwc-more-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 9px 10px;
	border-radius: 7px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.omwc-more-btn:hover {
	opacity: 0.85;
}

.omwc-theme-light .omwc-more-btn { background: #eef3f7; color: #2f6497; }
.omwc-theme-dark .omwc-more-btn { background: rgba(255,255,255,0.08); color: #9fc4ec; }
.omwc-theme-darkblue .omwc-more-btn { background: rgba(255,255,255,0.09); color: #7ec8fa; }

.omwc-error {
	padding: 12px 14px;
	border-radius: 6px;
	background: #fdecea;
	color: #a02b2b;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 13px;
}

/*
 * Breedte-varianten voor de shortcode: [meteogram width="full|wide|900px|80%"]
 * "full" en "wide" breken uit de (vaak smalle) tekstkolom van het thema via de
 * gangbare full-bleed-truc met 100vw en negatieve marges.
 */
.omwc-width-full,
.omwc-width-wide {
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.omwc-width-full {
	max-width: 100vw;
	border-radius: 0;
}

.omwc-width-wide {
	max-width: 1400px;
}

.omwc-width-custom {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 600px) {
	.omwc-header {
		padding: 10px 10px 4px;
	}
	.omwc-title {
		font-size: 13.5px;
	}
	.omwc-updated {
		font-size: 10px;
	}
	.omwc-legend {
		font-size: 10.5px;
		gap: 8px;
		padding: 6px 10px;
	}
	.omwc-attribution {
		padding: 2px 10px 8px;
	}
}