/* =========================================================================
   Where to Next? — interactieve wereldkaart
   Sluit aan op de bestaande theme-tokens (Fraunces/Inter, cream/coral/ocean).
   ========================================================================= */

:root {
	--wtn-map-bg:        #C4CCD6;
	--wtn-map-grid:      #B0BAC6;
	--wtn-land:          #F5F1E8;
	--wtn-land-hover:    #E8D9A8;
	--wtn-pin:           #1F2A33;
	--wtn-pin-hover:     #B8954A;
	--wtn-pin-faded:     rgba(31, 42, 51, 0.18);
	--wtn-accent:        #B8954A;
	--wtn-accent-deep:   #8A6E36;
	--wtn-modal-bg:      #FAF7F0;
	--wtn-text:          #1F2A33;
	--wtn-text-mute:     #6B6B6B;
	--wtn-border:        rgba(31, 42, 51, 0.14);
	--wtn-border-strong: rgba(31, 42, 51, 0.28);

	--wtn-month-5: #6FA86F;
	--wtn-month-4: #9DBE6F;
	--wtn-month-3: #E8C547;
	--wtn-month-2: #E89C5B;
	--wtn-month-1: #C4554A;

	--wtn-radius-card:   12px;
	--wtn-radius-modal:  16px;
	--wtn-radius-pill:   999px;

	--wtn-ease:          cubic-bezier(0.16, 1, 0.3, 1);
	--wtn-shadow-1:      0 8px 28px -12px rgba(31, 42, 51, 0.22);
	--wtn-shadow-2:      0 20px 60px -20px rgba(31, 42, 51, 0.32);
}

/* ---------- Page-level wrapper ---------- */
.wtn-section {
	padding: clamp(32px, 6vw, 80px) 0 clamp(24px, 4vw, 56px);
	background: linear-gradient(180deg, var(--cream, #FFF8EE) 0%, #F8F1E0 100%);
}
.wtn-header {
	max-width: 760px;
	margin: 0 auto clamp(24px, 4vw, 48px);
	text-align: center;
}
.wtn-eyebrow {
	display: inline-block;
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wtn-accent);
	margin-bottom: 12px;
	font-weight: 600;
}
.wtn-title {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: clamp(40px, 6vw, 76px);
	line-height: 1;
	color: var(--wtn-text);
	margin: 0 0 14px;
	letter-spacing: -0.02em;
	font-weight: 600;
}
.wtn-title em {
	color: var(--coral, #E76F51);
	font-style: italic;
}
.wtn-lede {
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: clamp(15px, 1.6vw, 18px);
	color: var(--wtn-text-mute);
	margin: 0;
	line-height: 1.55;
}
.wtn-howto {
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 15px;
	color: var(--wtn-text);
	line-height: 1.65;
	max-width: 620px;
	margin: 24px auto 0;
	text-align: left;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid var(--wtn-border);
	border-radius: var(--wtn-radius-card);
	padding: 18px 22px;
	box-shadow: var(--wtn-shadow-1);
}
@media (max-width: 600px) {
	.wtn-howto {
		font-size: 14px;
		padding: 14px 16px;
		margin-top: 18px;
	}
}

.wtn-noscript {
	background: #fff;
	border: 1px solid var(--wtn-border);
	border-radius: var(--wtn-radius-card);
	padding: 16px 20px;
	color: var(--wtn-text);
}

/* ---------- Skeleton loader ---------- */
.wtn-skeleton {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.wtn-skeleton__bar {
	height: 56px;
	background: linear-gradient(90deg, #ECE6D6, #F4EFE0, #ECE6D6);
	background-size: 200% 100%;
	border-radius: var(--wtn-radius-card);
	animation: wtnShimmer 1.4s linear infinite;
}
.wtn-skeleton__map {
	aspect-ratio: 2 / 1;
	background: linear-gradient(90deg, #DAE0E7, #E5E9EE, #DAE0E7);
	background-size: 200% 100%;
	border-radius: var(--wtn-radius-modal);
	animation: wtnShimmer 1.4s linear infinite;
}
@keyframes wtnShimmer {
	0%   { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

/* ---------- Filter bar ---------- */
.wtn-filters {
	background: #fff;
	border: 1px solid var(--wtn-border);
	border-radius: var(--wtn-radius-card);
	padding: 14px 16px;
	margin-bottom: 16px;
	box-shadow: var(--wtn-shadow-1);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.wtn-filter-group {
	position: relative;
}
.wtn-filter-btn {
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 14px;
	font-weight: 500;
	color: var(--wtn-text);
	background: #F8F4EA;
	border: 1px solid var(--wtn-border);
	border-radius: var(--wtn-radius-pill);
	padding: 8px 14px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 180ms var(--wtn-ease);
	min-height: 38px;
}
.wtn-filter-btn:hover { background: #F0E9D8; border-color: var(--wtn-border-strong); }
.wtn-filter-btn[aria-expanded="true"] { background: var(--wtn-text); color: #fff; border-color: var(--wtn-text); }
.wtn-filter-btn--active { background: var(--wtn-accent); color: #fff; border-color: var(--wtn-accent); }
.wtn-filter-btn__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	border-radius: 999px;
	background: rgba(255,255,255,0.25);
	font-size: 12px;
	font-weight: 600;
	padding: 0 6px;
}
.wtn-filter-btn--active .wtn-filter-btn__count { background: rgba(0,0,0,0.18); }
.wtn-filter-btn__caret { width: 10px; height: 10px; transition: transform 180ms var(--wtn-ease); }
.wtn-filter-btn[aria-expanded="true"] .wtn-filter-btn__caret { transform: rotate(180deg); }

.wtn-filter-popover {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 30;
	min-width: 280px;
	max-width: min(360px, calc(100vw - 32px));
	background: #fff;
	border: 1px solid var(--wtn-border-strong);
	border-radius: var(--wtn-radius-card);
	padding: 14px;
	box-shadow: var(--wtn-shadow-2);
	display: none;
}
.wtn-filter-popover[data-open="true"] { display: block; animation: wtnFadeIn 220ms var(--wtn-ease); }
@keyframes wtnFadeIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.wtn-filter-popover__title {
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wtn-text-mute);
	margin: 0 0 10px;
}
.wtn-chip-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.wtn-chip {
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 13px;
	background: #F4F0E5;
	border: 1px solid transparent;
	border-radius: var(--wtn-radius-pill);
	padding: 6px 12px;
	cursor: pointer;
	transition: all 160ms var(--wtn-ease);
	color: var(--wtn-text);
	min-height: 32px;
}
.wtn-chip:hover { background: #EAE2CD; }
.wtn-chip[aria-pressed="true"] {
	background: var(--wtn-accent);
	color: #fff;
	border-color: var(--wtn-accent);
}
.wtn-chip[aria-checked="true"] {
	background: var(--wtn-accent);
	color: #fff;
	border-color: var(--wtn-accent);
}

.wtn-slider-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}
.wtn-slider-row input[type="range"] {
	flex: 1;
	accent-color: var(--wtn-accent);
}

.wtn-filter-reset {
	margin-left: auto;
	background: none;
	border: 0;
	color: var(--wtn-text-mute);
	font-size: 13px;
	cursor: pointer;
	padding: 6px 10px;
	font-family: var(--font-body, "Inter", sans-serif);
	text-decoration: underline;
	text-decoration-color: rgba(0,0,0,0.2);
	text-underline-offset: 2px;
}
.wtn-filter-reset:hover { color: var(--wtn-text); }
.wtn-filter-counter {
	width: 100%;
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 13px;
	color: var(--wtn-text-mute);
	margin-top: 8px;
	border-top: 1px dashed var(--wtn-border);
	padding-top: 10px;
}
.wtn-filter-counter strong { color: var(--wtn-text); }

/* ---------- World map ---------- */
.wtn-map-wrap {
	position: relative;
	background: var(--wtn-map-bg);
	border-radius: var(--wtn-radius-modal);
	overflow: hidden;
	box-shadow: var(--wtn-shadow-1);
	/* exact 1000:425 — matcht de SVG viewBox (`0 44 1000 425`) zonder
	   letterboxing onder/boven. */
	aspect-ratio: 1000 / 425;
}
.wtn-map-svg {
	display: block;
	width: 100%;
	height: 100%;
	user-select: none;
	-webkit-user-select: none;
}
.wtn-map-svg .wtn-land-shape {
	fill: var(--wtn-land);
	stroke: rgba(31,42,51,0.18);
	stroke-width: 0.35;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition: fill 180ms var(--wtn-ease);
}
.wtn-map-svg .wtn-land-shape--hover { fill: var(--wtn-land-hover); }

.wtn-map-svg .wtn-pin {
	cursor: pointer;
	transition: opacity 220ms var(--wtn-ease);
}
/* Visible pin (2nd circle in each .wtn-pin group) — donker bolletje met
   witte rand. `vector-effect: non-scaling-stroke` houdt de rand altijd
   1.5px in pixels, ongeacht hoe ver er ingezoomd wordt. */
.wtn-map-svg .wtn-pin circle:nth-of-type(2) {
	fill: var(--wtn-pin);
	stroke: #fff;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
	transition: transform 200ms var(--wtn-ease), fill 200ms var(--wtn-ease);
	transform-origin: center;
	transform-box: fill-box;
}
.wtn-map-svg .wtn-pin:hover circle:nth-of-type(2),
.wtn-map-svg .wtn-pin:focus-visible circle:nth-of-type(2) {
	fill: var(--wtn-pin-hover);
	transform: scale(1.35);
}
.wtn-map-svg .wtn-pin--in-compare circle:nth-of-type(2) { fill: var(--wtn-accent); }
.wtn-map-svg .wtn-pin--faded { opacity: 0.18; pointer-events: none; }
.wtn-map-svg .wtn-pin:focus { outline: none; }
.wtn-map-svg .wtn-pin:focus-visible circle:nth-of-type(2) {
	stroke: var(--wtn-accent);
	stroke-width: 2.5;
}
/* Hit area (1st circle) — onzichtbaar, alleen voor klikken/touch. Geen
   stroke, geen fill — anders zie je een dikke witte ring bij inzoomen. */
.wtn-map-svg .wtn-pin__hit {
	fill: transparent;
	stroke: none;
	pointer-events: all;
}

/* Legend / hint */
.wtn-map-hint {
	position: absolute;
	bottom: 12px;
	right: 14px;
	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 6px 10px;
	border-radius: var(--wtn-radius-pill);
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 12px;
	color: var(--wtn-text-mute);
	box-shadow: var(--wtn-shadow-1);
	pointer-events: none;
	transition: opacity 220ms var(--wtn-ease);
}

/* Zoom controls */
.wtn-zoom-ctrl {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 5;
}
.wtn-zoom-btn {
	width: 36px;
	height: 36px;
	background: rgba(255,255,255,0.96);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid var(--wtn-border);
	border-radius: 10px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wtn-text);
	box-shadow: var(--wtn-shadow-1);
	transition: background 160ms var(--wtn-ease), transform 120ms var(--wtn-ease), opacity 220ms var(--wtn-ease);
	padding: 0;
}
.wtn-zoom-btn svg { width: 16px; height: 16px; display: block; }
.wtn-zoom-btn:hover { background: #fff; transform: translateY(-1px); }
.wtn-zoom-btn:active { transform: translateY(0); }
.wtn-zoom-btn--reset { margin-top: 4px; opacity: 0.4; }

.wtn-map-wrap { cursor: grab; }
.wtn-map-wrap--grabbing,
.wtn-map-wrap--grabbing * { cursor: grabbing !important; }
.wtn-map-wrap.wtn-map-wrap--grabbing .wtn-pin { pointer-events: none; }
.wtn-map-svg { touch-action: none; }
.wtn-map-svg .wtn-pin circle:nth-child(2) {
	transition: r 220ms var(--wtn-ease), fill 200ms var(--wtn-ease), transform 200ms var(--wtn-ease);
}

/* Hover card */
.wtn-hover-card {
	position: absolute;
	z-index: 20;
	width: 280px;
	background: #fff;
	border-radius: var(--wtn-radius-card);
	padding: 14px;
	box-shadow: var(--wtn-shadow-2);
	border: 1px solid var(--wtn-border);
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 180ms var(--wtn-ease), transform 180ms var(--wtn-ease);
	font-family: var(--font-body, "Inter", sans-serif);
}
.wtn-hover-card[data-open="true"] {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.wtn-hover-card__name {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--wtn-text);
	margin: 0 0 4px;
}
.wtn-hover-card__flag { font-size: 22px; line-height: 1; }
.wtn-hover-card__tag {
	color: var(--wtn-text-mute);
	font-size: 13px;
	margin: 0 0 10px;
	line-height: 1.45;
}
.wtn-hover-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
	font-size: 12px;
	color: var(--wtn-text);
}
.wtn-hover-card__meta span {
	background: #F4F0E5;
	padding: 3px 8px;
	border-radius: var(--wtn-radius-pill);
}
.wtn-hover-card__hint {
	font-size: 12px;
	color: var(--wtn-accent);
	font-weight: 600;
	margin: 0;
}

/* ---------- Compare tray ---------- */
.wtn-compare-tray {
	position: sticky;
	bottom: 16px;
	margin-top: 16px;
	z-index: 25;
	background: var(--wtn-text);
	color: #fff;
	border-radius: var(--wtn-radius-pill);
	padding: 10px 14px;
	display: none;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	box-shadow: var(--wtn-shadow-2);
	font-family: var(--font-body, "Inter", sans-serif);
}
.wtn-compare-tray[data-active="true"] { display: flex; }
.wtn-compare-tray__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255,255,255,0.15);
	padding: 4px 10px 4px 8px;
	border-radius: var(--wtn-radius-pill);
	font-size: 13px;
}
.wtn-compare-tray__chip button {
	background: none;
	border: 0;
	color: rgba(255,255,255,0.85);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0 2px;
}
.wtn-compare-tray__spacer { flex: 1; }
.wtn-compare-tray__btn {
	background: var(--wtn-accent);
	color: #fff;
	border: 0;
	padding: 8px 16px;
	border-radius: var(--wtn-radius-pill);
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
}
.wtn-compare-tray__btn:hover { background: var(--wtn-accent-deep); }
.wtn-compare-tray__clear {
	background: none;
	border: 0;
	color: rgba(255,255,255,0.7);
	cursor: pointer;
	font-size: 13px;
	font-family: inherit;
	text-decoration: underline;
}

/* ---------- Modal & sheet ---------- */
.wtn-overlay {
	position: fixed;
	inset: 0;
	background: rgba(31,42,51,0.55);
	backdrop-filter: blur(2px);
	z-index: 999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	animation: wtnFadeIn 220ms var(--wtn-ease);
}
.wtn-overlay[data-open="true"] { display: flex; }

.wtn-modal {
	position: relative;
	width: min(960px, 100%);
	max-height: calc(100dvh - 48px);
	background: var(--wtn-modal-bg);
	border-radius: var(--wtn-radius-modal);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--wtn-shadow-2);
	animation: wtnModalIn 280ms var(--wtn-ease);
	font-family: var(--font-body, "Inter", sans-serif);
}
@keyframes wtnModalIn {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}
.wtn-modal__close {
	position: absolute;
	top: 14px; right: 14px;
	background: rgba(255,255,255,0.9);
	border: 0;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: var(--wtn-text);
	z-index: 5;
	box-shadow: 0 4px 14px -4px rgba(0,0,0,0.2);
}
.wtn-modal__close:hover { background: #fff; }
.wtn-modal__body {
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* HeroHeader */
.wtn-hero {
	position: relative;
	min-height: 180px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	padding: 24px;
	color: #fff;
}
.wtn-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
	pointer-events: none;
}
.wtn-hero > * { position: relative; z-index: 1; }
.wtn-hero__title {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: clamp(32px, 4vw, 44px);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
	line-height: 1.05;
	text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.wtn-hero__flag { font-size: 1.1em; line-height: 1; }
.wtn-hero__tag {
	margin: 6px 0 0;
	max-width: 600px;
	font-size: 15px;
	line-height: 1.45;
	text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.wtn-meta-row {
	background: #fff;
	border-bottom: 1px solid var(--wtn-border);
	padding: 12px 24px;
	font-size: 13px;
	color: var(--wtn-text-mute);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: center;
}
.wtn-meta-row strong { color: var(--wtn-text); font-weight: 500; }
.wtn-meta-row__badge {
	background: var(--ocean-soft, #CFEAE5);
	color: var(--ocean-deep, #1F6F66);
	padding: 3px 10px;
	border-radius: var(--wtn-radius-pill);
	font-size: 12px;
	font-weight: 600;
}

/* Modal content layout */
.wtn-content {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.wtn-section-title {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 22px;
	margin: 0 0 12px;
	color: var(--wtn-text);
	font-weight: 600;
}
.wtn-eyebrow-sm {
	display: block;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wtn-accent);
	font-weight: 600;
	margin-bottom: 6px;
}

/* QuickScanBadges */
.wtn-badge-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.wtn-badge-row__label {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wtn-text-mute);
	margin: 0 0 6px;
	font-weight: 600;
}
.wtn-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.wtn-badge {
	font-size: 13px;
	background: #F4EEDB;
	color: var(--wtn-text);
	padding: 5px 12px;
	border-radius: var(--wtn-radius-pill);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.wtn-badge--mute {
	background: #ECECEC;
	color: var(--wtn-text-mute);
}
.wtn-badge--vibe {
	background: #EAE0C7;
}

.wtn-not-ideal {
	font-size: 13px;
	color: var(--wtn-text-mute);
	margin: 8px 0 0;
}

/* Score bars */
.wtn-scores {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}
@media (max-width: 600px) {
	.wtn-scores { grid-template-columns: repeat(2, 1fr); }
}
.wtn-score {
	background: #fff;
	border: 1px solid var(--wtn-border);
	border-radius: var(--wtn-radius-card);
	padding: 12px;
	text-align: center;
}
.wtn-score__label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wtn-text-mute);
	margin: 0 0 8px;
}
.wtn-score__bar {
	height: 6px;
	background: #ECE6D6;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 6px;
}
.wtn-score__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--wtn-accent) 0%, var(--coral, #E76F51) 100%);
	border-radius: 999px;
	transition: width 600ms var(--wtn-ease);
}
.wtn-score__value {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--wtn-text);
}

/* Best time bar */
.wtn-months {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 4px;
}
.wtn-month {
	position: relative;
	aspect-ratio: 1 / 1.4;
	border-radius: 6px;
	cursor: pointer;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 4px 0;
	font-size: 12px;
	font-weight: 600;
	color: rgba(0,0,0,0.65);
	transition: transform 160ms var(--wtn-ease);
}
.wtn-month:hover { transform: translateY(-2px); }
.wtn-month[data-rating="5"] { background: var(--wtn-month-5); color: #fff; }
.wtn-month[data-rating="4"] { background: var(--wtn-month-4); }
.wtn-month[data-rating="3"] { background: var(--wtn-month-3); }
.wtn-month[data-rating="2"] { background: var(--wtn-month-2); color: #fff; }
.wtn-month[data-rating="1"] { background: var(--wtn-month-1); color: #fff; }
.wtn-month__tip {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--wtn-text);
	color: #fff;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 160ms var(--wtn-ease);
	z-index: 5;
	max-width: 220px;
	white-space: normal;
	width: max-content;
}
.wtn-month:hover .wtn-month__tip,
.wtn-month:focus .wtn-month__tip { opacity: 1; }
.wtn-best-summary {
	margin-top: 12px;
	font-size: 14px;
	color: var(--wtn-text-mute);
	line-height: 1.5;
}
.wtn-best-summary strong { color: var(--wtn-text); }

/* Weather grid */
.wtn-weather {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
@media (max-width: 600px) { .wtn-weather { grid-template-columns: repeat(2, 1fr); } }
.wtn-weather__card {
	background: #fff;
	border: 1px solid var(--wtn-border);
	border-radius: var(--wtn-radius-card);
	padding: 14px;
	text-align: center;
}
.wtn-weather__season {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wtn-text-mute);
	margin: 0 0 4px;
	font-weight: 600;
}
.wtn-weather__temp {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 32px;
	font-weight: 600;
	color: var(--wtn-text);
	line-height: 1;
}
.wtn-weather__rain, .wtn-weather__sea {
	font-size: 12px;
	color: var(--wtn-text-mute);
	margin: 4px 0 0;
}

/* Budget */
.wtn-budget-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 12px;
}
@media (max-width: 600px) { .wtn-budget-tiers { grid-template-columns: 1fr; } }
.wtn-budget-tier {
	background: #fff;
	border: 1px solid var(--wtn-border);
	border-radius: var(--wtn-radius-card);
	padding: 12px;
	text-align: center;
}
.wtn-budget-tier--featured { background: var(--sun-soft, #FBEFC8); border-color: var(--wtn-accent); }
.wtn-budget-tier__label { font-size: 12px; color: var(--wtn-text-mute); margin: 0 0 4px; font-weight: 600; }
.wtn-budget-tier__price { font-family: var(--font-display, "Fraunces", serif); font-size: 22px; font-weight: 600; }
.wtn-budget-tier__sub { font-size: 11px; color: var(--wtn-text-mute); }

.wtn-budget-examples {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}
@media (max-width: 600px) {
	.wtn-budget-examples { grid-template-columns: repeat(2, 1fr); }
}
.wtn-budget-example {
	background: #fff;
	border: 1px solid var(--wtn-border);
	border-radius: 8px;
	padding: 8px;
	text-align: center;
	font-size: 12px;
}
.wtn-budget-example__price { font-weight: 600; color: var(--wtn-text); margin-top: 2px; font-size: 14px; }
.wtn-price-compared {
	margin-top: 10px;
	font-size: 13px;
	color: var(--wtn-text-mute);
}
.wtn-price-compared--up { color: #C4554A; }
.wtn-price-compared--down { color: #6FA86F; }

/* Safety + health 2 cols */
.wtn-twocol {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 700px) { .wtn-twocol { grid-template-columns: 1fr; } }
.wtn-block {
	background: #fff;
	border: 1px solid var(--wtn-border);
	border-radius: var(--wtn-radius-card);
	padding: 16px;
}
.wtn-block h3 {
	margin: 0 0 10px;
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 18px;
	color: var(--wtn-text);
}
.wtn-stat-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px dashed var(--wtn-border);
	font-size: 14px;
}
.wtn-stat-row:last-child { border-bottom: 0; }
.wtn-stat-row__label { color: var(--wtn-text-mute); }
.wtn-stat-row__value { color: var(--wtn-text); font-weight: 500; }
.wtn-stars {
	color: var(--wtn-accent);
	letter-spacing: 1px;
	font-size: 14px;
}
.wtn-stars span[aria-hidden] { color: rgba(0,0,0,0.15); }

.wtn-lgbtq {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--wtn-radius-pill);
	font-size: 12px;
	font-weight: 600;
}
.wtn-lgbtq--zeer-vriendelijk { background: #DCEEDC; color: #2E7A2E; }
.wtn-lgbtq--vriendelijk { background: #EAF3DA; color: #5C7A2E; }
.wtn-lgbtq--neutraal { background: #FBEFC8; color: #8A6E36; }
.wtn-lgbtq--voorzichtig { background: #FBE0C8; color: #B8693A; }
.wtn-lgbtq--afgeraden { background: #F8D5D0; color: #A53A2E; }

.wtn-vacc {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--wtn-radius-pill);
	font-size: 12px;
	font-weight: 600;
	background: #ECE6D6;
	color: var(--wtn-text);
}

.wtn-hazards {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.wtn-hazards span {
	background: #ECECEC;
	font-size: 12px;
	color: var(--wtn-text-mute);
	padding: 3px 10px;
	border-radius: var(--wtn-radius-pill);
}

/* Highlights */
.wtn-highlights { display: grid; gap: 10px; }
.wtn-highlight {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--wtn-border);
	border-radius: var(--wtn-radius-card);
	padding: 12px 14px;
}
.wtn-highlight__icon {
	width: 36px;
	height: 36px;
	background: var(--sun-soft, #FBEFC8);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.wtn-highlight__name {
	font-weight: 600;
	color: var(--wtn-text);
	margin: 0 0 2px;
	font-size: 15px;
}
.wtn-highlight__city {
	font-style: italic;
	color: var(--wtn-text-mute);
	font-size: 12px;
	margin-left: 6px;
	font-weight: 400;
}
.wtn-highlight__desc {
	font-size: 13px;
	color: var(--wtn-text-mute);
	margin: 0;
	line-height: 1.45;
}
.wtn-highlight__book {
	display: inline-block;
	background: var(--wtn-accent);
	color: #fff;
	font-size: 11px;
	padding: 1px 8px;
	border-radius: var(--wtn-radius-pill);
	margin-left: 6px;
	font-weight: 600;
	vertical-align: middle;
}

/* Routes */
.wtn-route { background: #fff; border:1px solid var(--wtn-border); border-radius: var(--wtn-radius-card); padding: 12px 14px; margin-bottom: 8px; }
.wtn-route__name { font-weight: 600; margin: 0 0 4px; color: var(--wtn-text); }
.wtn-route__duration { color: var(--wtn-accent); font-weight: 600; font-size: 13px; margin-left: 6px; }
.wtn-route__stops { margin: 4px 0 0; font-size: 13px; color: var(--wtn-text-mute); line-height: 1.4; }

.wtn-foodrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.wtn-drink { font-size: 13px; color: var(--wtn-text-mute); margin-top: 4px; }

/* Practical info grid */
.wtn-practical {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 16px;
}
@media (max-width: 600px) { .wtn-practical { grid-template-columns: 1fr; } }
.wtn-practical__row {
	display: flex;
	gap: 10px;
	font-size: 13px;
	padding: 6px 0;
	border-bottom: 1px dashed var(--wtn-border);
}
.wtn-practical__row:last-child { border-bottom: 0; }
.wtn-practical__icon { width: 22px; flex-shrink: 0; }
.wtn-practical__label { color: var(--wtn-text-mute); margin-right: 6px; }
.wtn-practical__value { color: var(--wtn-text); }

/* Insider tips */
.wtn-tips {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 600px) { .wtn-tips { grid-template-columns: 1fr; } }
.wtn-tip {
	background: var(--sun-soft, #FBEFC8);
	border-radius: var(--wtn-radius-card);
	padding: 14px;
	border-left: 3px solid var(--wtn-accent);
}
.wtn-tip--warn {
	background: #FBE0C8;
	border-left-color: #B8693A;
}
.wtn-tip__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wtn-accent-deep); margin-bottom: 4px; }
.wtn-tip--warn .wtn-tip__label { color: #B8693A; }
.wtn-tip__text { font-size: 14px; line-height: 1.45; color: var(--wtn-text); margin: 0; }

.wtn-sustain {
	background: #DCEEDC;
	border-left: 3px solid #6FA86F;
	padding: 12px 14px;
	border-radius: var(--wtn-radius-card);
	font-size: 13px;
	color: #2E5E2E;
	line-height: 1.5;
}

/* CTA — extra .wtn-app/.wtn-overlay-scope om globale a:hover te overrulen. */
.wtn-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}
.wtn-app .wtn-cta__btn,
.wtn-overlay .wtn-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--wtn-radius-pill);
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	line-height: 1.2;
	transition: background 180ms var(--wtn-ease), border-color 180ms var(--wtn-ease), color 180ms var(--wtn-ease);
}
.wtn-app .wtn-cta__btn--primary,
.wtn-overlay .wtn-cta__btn--primary {
	background: var(--coral, #E76F51);
	color: #fff;
}
.wtn-app .wtn-cta__btn--primary:hover,
.wtn-app .wtn-cta__btn--primary:focus-visible,
.wtn-overlay .wtn-cta__btn--primary:hover,
.wtn-overlay .wtn-cta__btn--primary:focus-visible {
	background: var(--coral-deep, #B84A2F);
	color: #fff;
}
.wtn-app .wtn-cta__btn--secondary,
.wtn-overlay .wtn-cta__btn--secondary {
	background: transparent;
	color: var(--wtn-text);
	border-color: var(--wtn-text);
}
.wtn-app .wtn-cta__btn--secondary:hover,
.wtn-overlay .wtn-cta__btn--secondary:hover {
	background: var(--wtn-text);
	color: #fff;
}
.wtn-app .wtn-cta__btn--secondary[data-active="true"],
.wtn-overlay .wtn-cta__btn--secondary[data-active="true"] {
	background: var(--wtn-accent);
	color: #fff;
	border-color: var(--wtn-accent);
}

.wtn-modal__footer {
	padding: 12px 24px 18px;
	border-top: 1px solid var(--wtn-border);
	font-size: 11px;
	color: var(--wtn-text-mute);
}

/* ---------- Compare modal ---------- */
.wtn-compare-modal {
	width: min(1100px, 100%);
	max-height: calc(100dvh - 48px);
	background: var(--wtn-modal-bg);
	border-radius: var(--wtn-radius-modal);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--wtn-shadow-2);
	font-family: var(--font-body, "Inter", sans-serif);
	position: relative;
	animation: wtnModalIn 280ms var(--wtn-ease);
}
.wtn-compare-modal__head {
	padding: 18px 24px;
	border-bottom: 1px solid var(--wtn-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.wtn-compare-modal__title {
	margin: 0;
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 24px;
	font-weight: 600;
}
.wtn-compare-modal__body { overflow: auto; padding: 8px 24px 24px; }
.wtn-compare-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 13px;
}
.wtn-compare-table th, .wtn-compare-table td {
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--wtn-border);
}
.wtn-compare-table th {
	background: var(--wtn-modal-bg);
	position: sticky;
	top: 0;
	z-index: 2;
}
.wtn-compare-table th:first-child {
	font-weight: 500;
	color: var(--wtn-text-mute);
}
.wtn-compare-table .wtn-compare-table__head {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--wtn-text);
}
.wtn-compare-table .wtn-compare-best {
	background: rgba(111, 168, 111, 0.18);
	font-weight: 600;
}
.wtn-compare-table .wtn-compare-best::after { content: " ✓"; color: #6FA86F; }
.wtn-compare-modal__share {
	background: var(--wtn-text);
	color: #fff;
	border: 0;
	padding: 8px 14px;
	border-radius: var(--wtn-radius-pill);
	cursor: pointer;
	font-size: 13px;
	font-family: inherit;
}
.wtn-compare-modal__share:hover { background: #000; }

/* ---------- Country list (was mobile-only, now also shown on desktop) ---------- */
.wtn-mobile-list {
	margin-top: 16px;
	background: #fff;
	border: 1px solid var(--wtn-border);
	border-radius: var(--wtn-radius-card);
	padding: 12px;
}
.wtn-mobile-search {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--wtn-border);
	border-radius: var(--wtn-radius-pill);
	font-family: inherit;
	font-size: 14px;
	margin-bottom: 12px;
	background: #F8F4EA;
}
.wtn-mobile-section { margin-bottom: 12px; }
.wtn-mobile-section h4 {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	color: var(--wtn-accent);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.wtn-mobile-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 8px;
	background: none;
	border: 0;
	width: 100%;
	text-align: left;
	cursor: pointer;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	color: var(--wtn-text);
}
.wtn-mobile-row:hover { background: #F4EFE0; }
.wtn-mobile-row__flag { font-size: 20px; }
.wtn-mobile-row__name { flex: 1; }
.wtn-mobile-row__meta { font-size: 12px; color: var(--wtn-text-mute); }
.wtn-mobile-row__chev { color: var(--wtn-text-mute); font-size: 16px; }

/* Desktop layout: meerkoloms tegelgrid zodat de lijst de breedte vult. */
@media (min-width: 769px) {
	.wtn-mobile-list {
		margin-top: 24px;
		padding: 24px clamp(20px, 3vw, 32px);
		box-shadow: var(--wtn-shadow-1);
	}
	.wtn-mobile-search {
		max-width: 420px;
		display: block;
		margin: 0 auto 20px;
	}
	.wtn-mobile-list > div:last-child {
		columns: 3 240px;
		column-gap: 32px;
	}
	.wtn-mobile-section {
		break-inside: avoid;
		page-break-inside: avoid;
		margin-bottom: 18px;
	}
	.wtn-mobile-section h4 {
		padding-bottom: 6px;
		margin-bottom: 6px;
		border-bottom: 1px solid var(--wtn-border);
	}
	.wtn-mobile-row {
		padding: 8px 10px;
	}
	.wtn-mobile-row__chev {
		opacity: 0;
		transition: opacity 160ms var(--wtn-ease), transform 160ms var(--wtn-ease);
	}
	.wtn-mobile-row:hover .wtn-mobile-row__chev,
	.wtn-mobile-row:focus-visible .wtn-mobile-row__chev {
		opacity: 1;
		transform: translateX(2px);
	}
}

/* ---------- Mobile filter drawer ---------- */
.wtn-mobile-filter-toggle {
	display: none;
	width: 100%;
	background: var(--wtn-text);
	color: #fff;
	border: 0;
	padding: 12px 16px;
	border-radius: var(--wtn-radius-pill);
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	margin-bottom: 12px;
}

/* ---------- Empty state ---------- */
.wtn-empty {
	background: #fff;
	border: 1px dashed var(--wtn-border-strong);
	padding: 24px;
	border-radius: var(--wtn-radius-card);
	text-align: center;
	color: var(--wtn-text-mute);
	margin-top: 12px;
	font-size: 14px;
}
.wtn-empty button {
	background: none;
	border: 0;
	color: var(--wtn-accent);
	cursor: pointer;
	text-decoration: underline;
	font: inherit;
}

/* ---------- Page-content area below the tool ---------- */
.wtn-page-content {
	padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 80px);
	background: var(--cream, #FFF8EE);
}
.wtn-page-content__inner {
	max-width: 760px;
	margin: 0 auto;
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 17px;
	line-height: 1.7;
	color: var(--wtn-text);
}
.wtn-page-content__inner h2,
.wtn-page-content__inner h3 {
	font-family: var(--font-display, "Fraunces", serif);
	color: var(--wtn-text);
	margin-top: 1.6em;
}
.wtn-page-content__inner h2 { font-size: 32px; }
.wtn-page-content__inner h3 { font-size: 24px; }

/* ---------- Focus rings (a11y) ---------- */
.wtn-app button:focus-visible,
.wtn-app a:focus-visible,
.wtn-app [role="button"]:focus-visible,
.wtn-overlay button:focus-visible,
.wtn-overlay a:focus-visible {
	outline: 2px solid var(--wtn-accent);
	outline-offset: 2px;
}

/* Globale `a:hover { color: var(--coral-deep) }` uit colors_and_type.css
   wordt binnen onze tool overruled. Inline-styled links behouden zo hun
   kleur, en getoonde links krijgen een nette underline op hover. */
.wtn-overlay a:not(.wtn-cta__btn):hover,
.wtn-app a:not(.wtn-cta__btn):hover {
	color: var(--wtn-accent-deep);
	text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.wtn-filters { display: none; }
	.wtn-filters[data-mobile-open="true"] { display: flex; }
	.wtn-mobile-filter-toggle { display: block; }
	.wtn-map-wrap { aspect-ratio: 1000 / 500; }
	.wtn-map-hint { display: none; }
	.wtn-hover-card { display: none !important; }

	.wtn-modal { max-height: 100dvh; max-width: 100%; border-radius: 16px 16px 0 0; align-self: flex-end; width: 100%; animation: wtnSheetIn 320ms var(--wtn-ease); }
	.wtn-overlay { padding: 0; align-items: flex-end; }
	.wtn-compare-modal { max-height: 100dvh; border-radius: 16px 16px 0 0; }
}

@keyframes wtnSheetIn {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.wtn-skeleton__bar, .wtn-skeleton__map { animation: none; }
	.wtn-modal, .wtn-compare-modal, .wtn-overlay,
	.wtn-filter-popover, .wtn-pin circle, .wtn-month, .wtn-score__fill {
		animation: none !important;
		transition: none !important;
	}
}