/* Weer Aardbevingen — zelfde look & feel als Weer Vorst / Weer Top 10
   (stijlen "klassiek" (standaard), "grijs" en "blauw"). Eigen "wwa-" klassen,
   zodat de plugin naast de andere Weer-plugins kan draaien. */
.wwa-widget {
	--wwa-bg: #1b2230;
	--wwa-panel: #232b3d;
	--wwa-panel-alt: #2a3346;
	--wwa-row-a: #2b3550;
	--wwa-row-b: #161b28;
	--wwa-border: #333d54;
	--wwa-text: #e9ecf2;
	--wwa-text-dim: #8b93a7;
	--wwa-header-bar: #5f8b97;
	--wwa-accent: #3fcda0;
	--wwa-accent-text: #0d2420;
	--wwa-link: #8fd2ff;
	--wwa-new: rgba(63, 205, 160, 0.18);
	--wwa-new-line: #3fcda0;

	/* Magnitudekleuren (zelfde op kaart, legende en lijst). */
	--wwa-m1: #f2c230;
	--wwa-m2: #f08a24;
	--wwa-m3: #d93a2b;
	--wwa-m4: #8e1b3e;
	--wwa-station: #2e9d4f;

	background: var(--wwa-bg);
	color: var(--wwa-text);
	border-radius: 12px;
	padding: 0 0 22px;
	max-width: 1200px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
}

.wwa-widget * {
	box-sizing: border-box;
}

/* Grijze stijl (stijl="grijs"). */
.wwa-widget.wwa-theme-grijs {
	--wwa-bg: #3a3a3a;
	--wwa-panel: #4a4a4a;
	--wwa-panel-alt: #909090;
	--wwa-row-a: #7f7f7f;
	--wwa-row-b: #6c6c6c;
	--wwa-border: #2a2a2a;
	--wwa-text: #f2f2f2;
	--wwa-text-dim: #c9c9c9;
	--wwa-header-bar: #5f8b97;
	--wwa-accent: #c3d426;
	--wwa-accent-text: #1c2400;
	--wwa-link: #d4e63a;
}

/* Klassieke stijl (standaard) — witte kaart op lichtgrijze achtergrond, donkere
   tekst, effen blauwe balken voor de kolomkoppen, zoals Weer Vorst "klassiek". */
.wwa-widget.wwa-theme-klassiek {
	--wwa-bg: #f3f4f6;
	--wwa-panel: #ffffff;
	--wwa-panel-alt: #eef1f5;
	--wwa-row-a: #e3e7ed;
	--wwa-row-b: #ffffff;
	--wwa-border: #c9ced6;
	--wwa-text: #1c2430;
	--wwa-text-dim: #5b6472;
	--wwa-header-bar: #1a5fa0;
	--wwa-accent: #1a5fa0;
	--wwa-accent-text: #ffffff;
	--wwa-link: #c0561a;
	--wwa-new: rgba(28, 138, 92, 0.13);
	--wwa-new-line: #1c8a5c;

	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	border: 1px solid var(--wwa-border);
}

.wwa-widget.wwa-theme-klassiek .wwa-title {
	background: var(--wwa-panel-alt);
	color: var(--wwa-text);
	border-bottom: 1px solid var(--wwa-border);
}

.wwa-widget.wwa-theme-klassiek .wwa-title-sub {
	color: var(--wwa-text-dim);
}

/* ------------------------------ titel & body ------------------------------ */

.wwa-title {
	text-align: center;
	color: #fff;
	background: var(--wwa-header-bar);
	padding: 12px 16px;
	margin-bottom: 20px;
}

.wwa-title-main {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.wwa-title-sub {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.3px;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 4px;
}

.wwa-body {
	padding: 0 20px;
}

.wwa-error,
.wwa-nodata {
	text-align: center;
	color: var(--wwa-text-dim);
	font-size: 13px;
	padding: 20px 0;
	margin: 0;
}

.wwa-error {
	color: #d64534;
}

.wwa-error-detail {
	font-size: 11px;
	padding-top: 0;
	word-break: break-word;
}

.wwa-nodata[hidden] {
	display: none;
}

/* ------------------------------ kerncijfers ------------------------------ */

.wwa-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
	border: 1px solid var(--wwa-border);
	border-radius: 6px;
	background: var(--wwa-panel);
	margin-bottom: 16px;
	overflow: hidden;
}

.wwa-stat {
	padding: 12px 16px 12px;
	border-left: 1px solid var(--wwa-border);
	min-width: 0;
}

.wwa-stat:first-child {
	border-left: none;
}

.wwa-stat-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--wwa-text-dim);
}

.wwa-stat-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
	color: var(--wwa-text);
}

.wwa-stat-mag {
	color: var(--wwa-m3);
}

.wwa-stat-sub {
	font-size: 12px;
	color: var(--wwa-text-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ------------------------------ filterknoppen ------------------------------ */

.wwa-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 16px;
	margin-bottom: 14px;
}

.wwa-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wwa-widget button.wwa-pill {
	background-color: var(--wwa-panel) !important;
	color: var(--wwa-text) !important;
	border: 1px solid var(--wwa-border);
	border-radius: 999px;
	padding: 6px 15px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: filter 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}

.wwa-widget button.wwa-pill:hover {
	filter: brightness(0.95);
}

.wwa-widget button.wwa-pill:focus-visible {
	outline: 2px solid var(--wwa-accent);
	outline-offset: 2px;
}

.wwa-widget button.wwa-pill.is-active {
	background-color: var(--wwa-accent) !important;
	color: var(--wwa-accent-text) !important;
	border-color: var(--wwa-accent);
}

/* ------------------------------ kaart ------------------------------ */

.wwa-map-wrap {
	border: 1px solid var(--wwa-border);
	border-radius: 6px;
	overflow: hidden;
	background: var(--wwa-panel);
}

.wwa-map {
	width: 100%;
	background: #dfe6ea;
	z-index: 0; /* Leaflet-panelen onder sticky menu's van het thema houden. */
}

.wwa-widget .leaflet-container {
	font-family: inherit;
	font-size: 12px;
}

.wwa-widget .leaflet-container img {
	max-width: none !important; /* thema's die img { max-width:100% } zetten breken de tegels */
	box-shadow: none !important;
}

.wwa-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 16px;
	padding: 8px 12px;
	font-size: 12px;
	color: var(--wwa-text);
	border-top: 1px solid var(--wwa-border);
}

.wwa-leg {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.wwa-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1.5px solid rgba(0, 0, 0, 0.45);
}

.wwa-dot.wwa-m1 { background: var(--wwa-m1); }
.wwa-dot.wwa-m2 { background: var(--wwa-m2); }
.wwa-dot.wwa-m3 { background: var(--wwa-m3); }
.wwa-dot.wwa-m4 { background: var(--wwa-m4); }

.wwa-dot-station {
	background: var(--wwa-station);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	border-color: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.wwa-dot-cluster {
	width: 14px;
	height: 14px;
	background: rgba(110, 204, 57, 0.75);
	border: 3px solid rgba(181, 226, 140, 0.8);
	background-clip: padding-box;
}

.wwa-dot-new {
	background: transparent;
	border: 2px solid var(--wwa-m3);
	box-shadow: 0 0 0 3px rgba(217, 58, 43, 0.25);
}

/* Stationsmarkering (druppelvorm, zoals bij Saratoga). */
.wwa-station-icon {
	background: none;
	border: none;
}

.wwa-station-icon span {
	display: block;
	width: 20px;
	height: 20px;
	margin: 2px 0 0 2px;
	background: var(--wwa-station, #2e9d4f);
	border: 2px solid #fff;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Pulserende ring rond aardbevingen van het laatste uur. */
.wwa-pulse {
	background: none;
	border: none;
	pointer-events: none !important;
}

.wwa-pulse span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px solid #d93a2b;
	animation: wwa-pulse 1.8s ease-out infinite;
}

@keyframes wwa-pulse {
	0% { transform: scale(0.4); opacity: 0.9; }
	100% { transform: scale(1.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wwa-pulse span { animation: none; opacity: 0.7; }
}

/* Clusters in Saratoga-groen, met het aantal erin. */
.wwa-cluster {
	background: rgba(181, 226, 140, 0.6);
	border-radius: 50%;
}

.wwa-cluster div {
	width: 30px;
	height: 30px;
	margin: 5px;
	border-radius: 50%;
	background: rgba(110, 204, 57, 0.75);
	text-align: center;
	line-height: 30px;
	font-weight: 700;
	font-size: 12px;
	color: #13310a;
}

.wwa-cluster-hot {
	background: rgba(241, 128, 23, 0.45);
}

.wwa-cluster-hot div {
	background: rgba(240, 120, 30, 0.85);
	color: #fff;
}

/* Kaartpopup. */
.wwa-popup {
	font-size: 12px;
	line-height: 1.5;
	min-width: 190px;
}

.wwa-popup-title {
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 4px;
}

.wwa-popup .wwa-mag {
	margin-right: 4px;
}

.wwa-popup table {
	border-collapse: collapse;
	margin: 0;
	width: 100%;
	border: none;
}

.wwa-popup td {
	padding: 1px 8px 1px 0;
	border: none;
	background: none;
	vertical-align: top;
}

.wwa-popup td:first-child {
	color: #5b6472;
	white-space: nowrap;
}

.wwa-updated {
	text-align: center;
	font-size: 12px;
	color: var(--wwa-text-dim);
	margin: 10px 0 14px;
}

.wwa-stale {
	color: #d64534;
}

/* ------------------------------ lijst ------------------------------ */

.wwa-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 6px;
}

.wwa-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	background: var(--wwa-panel);
	font-size: 13px;
	margin: 0;
	border: none;
}

.wwa-table thead th {
	background: var(--wwa-header-bar);
	color: #fff;
	font-weight: 700;
	text-align: center;
	padding: 5px 10px;
	font-size: 12px;
	letter-spacing: 0.3px;
	line-height: 1.25;
	border: none;
	border-bottom: 1px solid var(--wwa-border);
	vertical-align: middle;
}

.wwa-th-sub {
	font-weight: 400;
	opacity: 0.85;
	font-size: 11px;
}

.wwa-table tbody td {
	padding: 4px 10px;
	border: none;
	border-top: 1px solid var(--wwa-border);
	color: var(--wwa-text);
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
}

.wwa-table tbody tr:nth-child(odd) {
	background: var(--wwa-row-a);
}

.wwa-table tbody tr:nth-child(even) {
	background: var(--wwa-row-b);
}

.wwa-table tbody tr:hover {
	background: var(--wwa-panel-alt);
}

.wwa-table thead th.wwa-col-place,
.wwa-table tbody td.wwa-col-place {
	text-align: left;
	white-space: normal;
	min-width: 140px;
}

.wwa-num {
	font-variant-numeric: tabular-nums;
}

.wwa-col-time {
	font-variant-numeric: tabular-nums;
}

.wwa-ago {
	display: block;
	font-size: 11px;
	color: var(--wwa-text-dim);
}

.wwa-ago:empty {
	display: none;
}

/* Magnitudebadge. */
.wwa-mag {
	display: inline-block;
	min-width: 38px;
	padding: 1px 6px;
	border-radius: 4px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: #fff;
}

.wwa-mag.wwa-m1 { background: var(--wwa-m1, #f2c230); color: #3a2c00; }
.wwa-mag.wwa-m2 { background: var(--wwa-m2, #f08a24); color: #2e1600; }
.wwa-mag.wwa-m3 { background: var(--wwa-m3, #d93a2b); }
.wwa-mag.wwa-m4 { background: var(--wwa-m4, #8e1b3e); }

.wwa-magtype {
	font-size: 11px;
	color: var(--wwa-text-dim);
}

.wwa-col-link a {
	color: var(--wwa-link);
	text-decoration: none;
	font-weight: 600;
}

.wwa-col-link a:hover {
	text-decoration: underline;
}

.wwa-extlink {
	font-weight: 400 !important;
	margin-left: 6px;
	opacity: 0.85;
}

/* Aardbevingen van het laatste uur: zelfde groene markering als "lopend seizoen". */
.wwa-table tbody tr.wwa-row-new {
	background: var(--wwa-new);
	box-shadow: inset 3px 0 0 var(--wwa-new-line);
}

.wwa-table tbody tr.wwa-row-flash {
	animation: wwa-flash 1.6s ease-out;
}

@keyframes wwa-flash {
	0% { background: rgba(26, 95, 160, 0.35); }
	100% { background: inherit; }
}

/* Sorteerpijltjes (worden door wwa-script.js toegevoegd). */
.wwa-table thead th.wwa-sortable {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition: filter 0.15s ease;
}

.wwa-table thead th.wwa-sortable:hover,
.wwa-table thead th.wwa-sortable:focus-visible {
	filter: brightness(1.12);
	outline: none;
}

.wwa-sort {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3px;
	height: 10px;
	margin-bottom: 4px;
}

.wwa-sort i {
	display: block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	opacity: 0.35;
}

.wwa-sort-up {
	border-bottom: 6px solid currentColor;
}

.wwa-sort-down {
	border-top: 6px solid currentColor;
}

.wwa-sorted-asc .wwa-sort-up,
.wwa-sorted-desc .wwa-sort-down {
	opacity: 1;
}

/* ------------------------------ voet ------------------------------ */

.wwa-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: 18px;
	padding: 14px 20px 0;
	border-top: 1px solid var(--wwa-border);
	font-size: 11px;
	color: var(--wwa-text-dim);
}

.wwa-footer a {
	color: inherit;
	text-decoration: underline;
}

.wwa-copyright {
	white-space: nowrap;
}

@media (max-width: 560px) {
	.wwa-body {
		padding: 0 12px;
	}
	.wwa-table {
		font-size: 12px;
	}
	.wwa-stat-value {
		font-size: 22px;
	}
	.wwa-stat {
		border-left: none;
		border-top: 1px solid var(--wwa-border);
	}
	.wwa-stat:first-child {
		border-top: none;
	}
	.wwa-stats {
		grid-template-columns: 1fr 1fr;
	}
	.wwa-stat:nth-child(2) {
		border-top: none;
		border-left: 1px solid var(--wwa-border);
	}
	.wwa-stat:nth-child(4) {
		border-left: 1px solid var(--wwa-border);
	}
}

/* ------------------------------ meer tonen / kaartbeeld ------------------------------ */

.wwa-more,
.wwa-viewinfo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 12px;
	font-size: 12px;
	color: var(--wwa-text-dim);
}

.wwa-more {
	margin-top: 12px;
}

.wwa-viewinfo {
	margin: 0 0 10px;
	padding: 7px 12px;
	border: 1px solid var(--wwa-border);
	border-left: 3px solid var(--wwa-accent);
	border-radius: 6px;
	background: var(--wwa-panel);
	color: var(--wwa-text);
}

.wwa-more[hidden],
.wwa-viewinfo[hidden],
.wwa-widget button[hidden] {
	display: none !important;
}

.wwa-widget button.wwa-more-btn,
.wwa-widget button.wwa-all-btn,
.wwa-widget button.wwa-view-reset {
	background-color: var(--wwa-accent) !important;
	color: var(--wwa-accent-text) !important;
	border: 1px solid var(--wwa-accent);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.wwa-widget button.wwa-all-btn,
.wwa-widget button.wwa-view-reset {
	background-color: var(--wwa-panel) !important;
	color: var(--wwa-text) !important;
	border-color: var(--wwa-border);
}

.wwa-widget button.wwa-more-btn:hover,
.wwa-widget button.wwa-all-btn:hover,
.wwa-widget button.wwa-view-reset:hover {
	filter: brightness(0.95);
}

/* ------------------------------ lijst naast de kaart ------------------------------ */

.wwa-main.wwa-split .wwa-list tbody tr {
	cursor: pointer;
}

.wwa-col-map .wwa-updated {
	margin-bottom: 14px;
}

/* Breed genoeg (widget ≥ 700 px, klasse wwa-wide): kaart links, compacte lijst rechts, even hoog
   als de kaart en met een eigen scrollbalk. Smaller: lijst gewoon eronder. */
/* (klasse wwa-wide wordt door wwa-script.js gezet als de widget ≥ 700 px breed is) */

.wwa-widget.wwa-wide .wwa-split {
	display: flex;
	align-items: stretch;
	gap: 16px;
}

.wwa-widget.wwa-wide .wwa-split .wwa-col-map {
	flex: 1 1 58%;
	min-width: 0;
}

.wwa-widget.wwa-wide .wwa-split .wwa-col-map .wwa-updated {
	margin-bottom: 0;
}

.wwa-widget.wwa-wide .wwa-split .wwa-col-list {
	flex: 0 0 40%;
	min-width: 0;
	position: relative;
	min-height: 300px;
}

.wwa-widget.wwa-wide .wwa-split .wwa-list-panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wwa-border);
	border-radius: 6px;
	background: var(--wwa-panel);
	overflow: hidden;
}

.wwa-widget.wwa-wide .wwa-split .wwa-viewinfo {
	margin: 0;
	border: none;
	border-bottom: 1px solid var(--wwa-border);
	border-left: 3px solid var(--wwa-accent);
	border-radius: 0;
	padding: 6px 10px;
	font-size: 11px;
	justify-content: space-between;
}

.wwa-widget.wwa-wide .wwa-split .wwa-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	border-radius: 0;
}

.wwa-widget.wwa-wide .wwa-split .wwa-nodata {
	padding: 16px 12px;
}

.wwa-widget.wwa-wide .wwa-split .wwa-more {
	margin: 0;
	padding: 8px 10px;
	border-top: 1px solid var(--wwa-border);
	font-size: 11px;
}

.wwa-widget.wwa-wide .wwa-split .wwa-more .wwa-more-info {
	width: 100%;
	text-align: center;
}

/* Compacte lijst: kolomkoppen als sorteerbalk, rijen als kaartjes. */
.wwa-widget.wwa-wide .wwa-split .wwa-table,
.wwa-widget.wwa-wide .wwa-split .wwa-table thead,
.wwa-widget.wwa-wide .wwa-split .wwa-table tbody {
	display: block;
	min-width: 0;
	width: 100%;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead {
	position: sticky;
	top: 0;
	z-index: 2;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead tr {
	display: flex;
	background: var(--wwa-header-bar);
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead th {
	display: block;
	flex: 1 1 0;
	padding: 4px 4px 5px;
	font-size: 11px;
	border: none;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead th.wwa-col-place {
	flex: 1.6 1 0;
	text-align: center;
	min-width: 0;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead th.wwa-c-depth,
.wwa-widget.wwa-wide .wwa-split .wwa-table thead th.wwa-c-link,
.wwa-widget.wwa-wide .wwa-split .wwa-table thead .wwa-th-sub,
.wwa-widget.wwa-wide .wwa-split .wwa-table thead br {
	display: none;
}

.wwa-widget.wwa-wide .wwa-split .wwa-sort {
	margin-bottom: 2px;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table tbody tr {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	grid-template-areas:
		"mag place dist"
		"mag time  depth";
	align-items: center;
	column-gap: 10px;
	row-gap: 1px;
	padding: 6px 10px;
	border-top: 1px solid var(--wwa-border);
}

.wwa-widget.wwa-wide .wwa-split .wwa-table tbody tr:first-child {
	border-top: none;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table tbody td {
	display: block;
	padding: 0;
	border: none;
	text-align: left;
	white-space: normal;
	min-width: 0;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table tbody td.wwa-c-mag {
	grid-area: mag;
	white-space: nowrap;
}

.wwa-widget.wwa-wide .wwa-split .wwa-c-mag .wwa-magtype {
	display: none;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table tbody td.wwa-col-place {
	grid-area: place;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table tbody td.wwa-c-time {
	grid-area: time;
	font-size: 11px;
	color: var(--wwa-text-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wwa-widget.wwa-wide .wwa-split .wwa-c-time .wwa-ago {
	display: inline;
	font-size: inherit;
}

.wwa-widget.wwa-wide .wwa-split .wwa-c-time .wwa-ago:not(:empty)::before {
	content: " · ";
}

.wwa-widget.wwa-wide .wwa-split .wwa-table tbody td.wwa-c-dist {
	grid-area: dist;
	text-align: right;
	font-weight: 600;
	white-space: nowrap;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table tbody td.wwa-c-depth {
	grid-area: depth;
	text-align: right;
	font-size: 11px;
	color: var(--wwa-text-dim);
	white-space: nowrap;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table tbody td.wwa-c-depth::before {
	content: "diepte ";
}

.wwa-widget.wwa-wide .wwa-split .wwa-table tbody td.wwa-c-link {
	display: none;
}

/* Smal scherm (widget < 600 px): dezelfde compacte lijst onder de kaart,
   zodat er niet horizontaal gescrold moet worden. */
/* (klasse wwa-narrow wordt door wwa-script.js gezet als de widget < 600 px breed is) */

.wwa-widget.wwa-narrow .wwa-main .wwa-scroll {
	border: 1px solid var(--wwa-border);
	background: var(--wwa-panel);
}

/* Compacte lijst: kolomkoppen als sorteerbalk, rijen als kaartjes. */
.wwa-widget.wwa-narrow .wwa-main .wwa-table,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead,
.wwa-widget.wwa-narrow .wwa-main .wwa-table tbody {
	display: block;
	min-width: 0;
	width: 100%;
}


.wwa-widget.wwa-narrow .wwa-main .wwa-table thead tr {
	display: flex;
	background: var(--wwa-header-bar);
}

.wwa-widget.wwa-narrow .wwa-main .wwa-table thead th {
	display: block;
	flex: 1 1 0;
	padding: 4px 4px 5px;
	font-size: 11px;
	border: none;
}

.wwa-widget.wwa-narrow .wwa-main .wwa-table thead th.wwa-col-place {
	flex: 1.6 1 0;
	text-align: center;
	min-width: 0;
}

.wwa-widget.wwa-narrow .wwa-main .wwa-table thead th.wwa-c-depth,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead th.wwa-c-link,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead .wwa-th-sub,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead br {
	display: none;
}

.wwa-widget.wwa-narrow .wwa-main .wwa-sort {
	margin-bottom: 2px;
}

.wwa-widget.wwa-narrow .wwa-main .wwa-table tbody tr {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	grid-template-areas:
		"mag place dist"
		"mag time  depth";
	align-items: center;
	column-gap: 10px;
	row-gap: 1px;
	padding: 6px 10px;
	border-top: 1px solid var(--wwa-border);
}

.wwa-widget.wwa-narrow .wwa-main .wwa-table tbody tr:first-child {
	border-top: none;
}

.wwa-widget.wwa-narrow .wwa-main .wwa-table tbody td {
	display: block;
	padding: 0;
	border: none;
	text-align: left;
	white-space: normal;
	min-width: 0;
}

.wwa-widget.wwa-narrow .wwa-main .wwa-table tbody td.wwa-c-mag {
	grid-area: mag;
	white-space: nowrap;
}

.wwa-widget.wwa-narrow .wwa-main .wwa-c-mag .wwa-magtype {
	display: none;
}

.wwa-widget.wwa-narrow .wwa-main .wwa-table tbody td.wwa-col-place {
	grid-area: place;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wwa-widget.wwa-narrow .wwa-main .wwa-table tbody td.wwa-c-time {
	grid-area: time;
	font-size: 11px;
	color: var(--wwa-text-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wwa-widget.wwa-narrow .wwa-main .wwa-c-time .wwa-ago {
	display: inline;
	font-size: inherit;
}

.wwa-widget.wwa-narrow .wwa-main .wwa-c-time .wwa-ago:not(:empty)::before {
	content: " · ";
}

.wwa-widget.wwa-narrow .wwa-main .wwa-table tbody td.wwa-c-dist {
	grid-area: dist;
	text-align: right;
	font-weight: 600;
	white-space: nowrap;
}

.wwa-widget.wwa-narrow .wwa-main .wwa-table tbody td.wwa-c-depth {
	grid-area: depth;
	text-align: right;
	font-size: 11px;
	color: var(--wwa-text-dim);
	white-space: nowrap;
}

.wwa-widget.wwa-narrow .wwa-main .wwa-table tbody td.wwa-c-depth::before {
	content: "diepte ";
}

.wwa-widget.wwa-narrow .wwa-main .wwa-table tbody td.wwa-c-link {
	display: none;
}


/* Lijst onder de kaart (smal scherm): ook in een eigen scrollvenster,
   even hoog als de kaart, met vaste kolomkoppen. */
.wwa-widget:not(.wwa-wide) .wwa-col-list .wwa-scroll {
	max-height: var(--wwa-map-h, 480px);
	overflow-y: auto;
}

.wwa-widget:not(.wwa-wide) .wwa-col-list .wwa-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
}

.wwa-widget.wwa-narrow .wwa-col-list .wwa-table thead th {
	position: static;
}

.wwa-widget.wwa-narrow .wwa-col-list .wwa-table thead {
	position: sticky;
	top: 0;
	z-index: 2;
}

/* ------------------------------ scroll-hint ------------------------------ */

/* Vervaging onderaan het lijstvenster + pijlknop zolang er nog rijen volgen. */
.wwa-scrollhint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 64px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 10px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--wwa-panel) 85%);
	z-index: 3;
	border-radius: 0 0 6px 6px;
}

.wwa-scrollhint[hidden] {
	display: none !important;
}

.wwa-widget button.wwa-scrollhint-btn {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: var(--wwa-accent) !important;
	color: var(--wwa-accent-text) !important;
	border: none;
	border-radius: 999px;
	padding: 5px 14px 5px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	-webkit-appearance: none;
	appearance: none;
}

.wwa-widget button.wwa-scrollhint-btn:hover {
	filter: brightness(1.1);
}

.wwa-scrollhint-arrow {
	display: inline-block;
	font-size: 14px;
	line-height: 1;
	animation: wwa-bob 1.4s ease-in-out infinite;
}

@keyframes wwa-bob {
	0%, 100% { transform: translateY(-1px); }
	50% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
	.wwa-scrollhint-arrow { animation: none; }
}

/* De hint hangt onderaan het scrollvenster zelf. */
.wwa-scroll-box {
	position: relative;
}

.wwa-widget.wwa-wide .wwa-split .wwa-scroll-box {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* ------------------------------ compacte lijst: kolomkoppen uitlijnen ------------------------------
   De kopregel gebruikt exact hetzelfde raster als de rijen eronder:
     [Mag] [Epicentrum / Tijdstip] [Afstand / Diepte]
   zodat elke kop boven zijn eigen gegevens staat. */
.wwa-widget.wwa-wide .wwa-split .wwa-table tbody tr,
.wwa-widget.wwa-narrow .wwa-main .wwa-table tbody tr,
.wwa-widget.wwa-wide .wwa-split .wwa-table thead tr,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead tr {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr) 96px;
	grid-template-areas:
		"mag place dist"
		"mag time  depth";
	column-gap: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead tr,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead tr {
	row-gap: 0;
	padding-top: 4px;
	padding-bottom: 4px;
	align-items: center;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead th,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead th {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 1px 0;
	font-size: 11px;
	line-height: 1.3;
	background: transparent;
	min-width: 0;
	white-space: nowrap;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead th.wwa-c-mag,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead th.wwa-c-mag {
	grid-area: mag;
	justify-content: center;
	align-self: center;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead th.wwa-col-place,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead th.wwa-col-place {
	grid-area: place;
	justify-content: flex-start;
	text-align: left;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead th.wwa-c-time,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead th.wwa-c-time {
	grid-area: time;
	justify-content: flex-start;
	font-weight: 400;
	opacity: 0.9;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead th.wwa-c-dist,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead th.wwa-c-dist {
	grid-area: dist;
	justify-content: flex-end;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead th.wwa-c-depth,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead th.wwa-c-depth {
	display: flex;
	grid-area: depth;
	justify-content: flex-end;
	font-weight: 400;
	opacity: 0.9;
}

/* Sorteerpijltjes hier naast de tekst i.p.v. erboven (lagere kopregel). */
.wwa-widget.wwa-wide .wwa-split .wwa-table thead .wwa-sort,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead .wwa-sort {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	height: auto;
	margin: 0;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead .wwa-sort i,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead .wwa-sort i {
	border-left-width: 3px;
	border-right-width: 3px;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead .wwa-sort-up,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead .wwa-sort-up {
	border-bottom-width: 4px;
}

.wwa-widget.wwa-wide .wwa-split .wwa-table thead .wwa-sort-down,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead .wwa-sort-down {
	border-top-width: 4px;
}

/* Rechterkolom: pijltjes na de tekst, zodat de tekst rechts uitlijnt met de cijfers. */
.wwa-widget.wwa-wide .wwa-split .wwa-table thead th.wwa-c-dist,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead th.wwa-c-dist,
.wwa-widget.wwa-wide .wwa-split .wwa-table thead th.wwa-c-depth,
.wwa-widget.wwa-narrow .wwa-main .wwa-table thead th.wwa-c-depth {
	flex-direction: row-reverse;
	justify-content: flex-start;
}

/* Zonder station (geen afstand): diepte bovenaan rechts. */
.wwa-widget .wwa-no-station tbody tr,
.wwa-widget .wwa-no-station thead tr {
	grid-template-areas:
		"mag place depth"
		"mag time  depth" !important;
}

.wwa-lbl-short {
	display: none;
}

.wwa-widget.wwa-wide .wwa-split .wwa-lbl-long,
.wwa-widget.wwa-narrow .wwa-main .wwa-lbl-long {
	display: none;
}

.wwa-widget.wwa-wide .wwa-split .wwa-lbl-short,
.wwa-widget.wwa-narrow .wwa-main .wwa-lbl-short {
	display: inline;
}

/* Mouseover in de stijl van Weer Meters: donker venster, grijze labels, vette waarden. */
.leaflet-tooltip:not(.wvv-plaats):not(.wrg-plaats) {
	padding: 6px 11px;
	background: #1c2430;
	color: #fff;
	border: 0;
	border-radius: 10px;
	font: 400 12.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}
.leaflet-tooltip-top:not(.wvv-plaats):not(.wrg-plaats)::before { border-top-color: #1c2430; }
.leaflet-tooltip-bottom:not(.wvv-plaats):not(.wrg-plaats)::before { border-bottom-color: #1c2430; }
.leaflet-tooltip-left:not(.wvv-plaats):not(.wrg-plaats)::before { border-left-color: #1c2430; }
.leaflet-tooltip-right:not(.wvv-plaats):not(.wrg-plaats)::before { border-right-color: #1c2430; }