.omm-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 1.5em 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	border-radius: 8px;
	overflow: hidden;
}

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

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

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

.omm-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 14px;
	padding: 12px 14px 6px;
}

.omm-title {
	font-size: 15px;
	font-weight: 700;
}

.omm-updated {
	font-size: 11px;
	white-space: nowrap;
}

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

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

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

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

.omm-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;
}

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

.omm-theme-light .omm-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);
}

.omm-theme-dark .omm-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);
}

.omm-theme-darkblue .omm-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);
}

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

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

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

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

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

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

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

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

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

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

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

.omm-theme-light .omm-swatch-temp { background: #e6362a; }
.omm-theme-light .omm-swatch-feels { background: repeating-linear-gradient(90deg, rgba(60,64,68,0.6) 0 3px, transparent 3px 6px); }
.omm-theme-light .omm-swatch-pressure { background: repeating-linear-gradient(90deg, #7cb518 0 3px, transparent 3px 6px); }
.omm-theme-light .omm-swatch-precip { background: #3f7fbf; height: 8px; border-radius: 1px; }
.omm-theme-light .omm-swatch-cloud { background: rgba(91,96,102,0.35); height: 8px; border-radius: 1px; }
.omm-theme-light .omm-swatch-ts { background: #f2960c; height: 8px; border-radius: 1px; }

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

.omm-theme-darkblue .omm-swatch-temp { background: #ff6b5b; }
.omm-theme-darkblue .omm-swatch-feels { background: repeating-linear-gradient(90deg, rgba(220,232,245,0.75) 0 3px, transparent 3px 6px); }
.omm-theme-darkblue .omm-swatch-pressure { background: repeating-linear-gradient(90deg, #7ed957 0 3px, transparent 3px 6px); }
.omm-theme-darkblue .omm-swatch-precip { background: #29b6f6; height: 8px; border-radius: 1px; }
.omm-theme-darkblue .omm-swatch-cloud { background: rgba(180,200,220,0.4); height: 8px; border-radius: 1px; }
.omm-theme-darkblue .omm-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. */
.omm-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;
}

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

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

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

.omm-error {
	padding: 14px 16px;
	border-radius: 6px;
	background: #3a2020;
	color: #f3caca;
	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.
 */
.omm-width-full,
.omm-width-wide {
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

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

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

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

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