/* Drakenjacht Templates — parkpagina (mobile-first, responsive) */

:root {
	--djt-accent: #2f5233;
	--djt-accent-dark: #24401f;
	--djt-ink: #1f2733;
	--djt-muted: #5b6472;
	--djt-line: #e2e6ec;
	--djt-bg: #ffffff;
	--djt-soft: #f6f8f6;
	--djt-radius: 14px;
	--djt-hero-max-height: 42vh;
}

body.djt-body {
	margin: 0;
	background: var(--djt-bg);
	color: var(--djt-ink);
	font-family: var(--djt-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-size: 17px;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
}
.djt-body *, .djt-body *::before, .djt-body *::after { box-sizing: border-box; }
.djt-body img { max-width: 100%; height: auto; }
.djt-body a { color: var(--djt-accent); }

/* Nooit breder dan het scherm: geen horizontaal scrollen op paginaniveau,
   en lange woorden/URL's breken automatisch af. */
html { overflow-x: hidden; }
body.djt-body { overflow-x: hidden; max-width: 100%; overflow-wrap: break-word; }
.djt-body p,
.djt-body li,
.djt-body dd,
.djt-body a { overflow-wrap: anywhere; word-break: break-word; }

.djt-container {
	width: 100%;
	max-width: 940px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* Breadcrumb */
.djt-breadcrumb {
	font-size: 0.85rem;
	color: var(--djt-muted);
	padding-top: 16px;
	padding-bottom: 4px;
}
/* Vaste, donkere kleuren (los van de per-spel tekstkleur) voor voldoende contrast. */
.djt-breadcrumb a { color: #3d4550; text-decoration: none; }
.djt-breadcrumb a:hover { color: var(--djt-accent); text-decoration: underline; }
.djt-breadcrumb span { color: #6b7480; margin: 0 2px; }
.djt-breadcrumb__current { color: #1a2029; font-weight: 600; }

/* Hero */
.djt-hero__media { width: 100%; margin-top: 10px; }
.djt-hero__img {
	display: block;
	width: 100%;
	max-height: var(--djt-hero-max-height);
	object-fit: cover;
	object-position: center;
}
.djt-hero__body { padding-top: 20px; padding-bottom: 0; }
.djt-hero__title {
	font-size: clamp(1.7rem, 5vw, 2.6rem);
	line-height: 1.15;
	margin: 0;
}
.djt-hero__loc { margin: 6px 0 0; color: var(--djt-muted); font-size: 1.05rem; }
/* Knop: gelijke marge boven en onder. De sectiemarge van de eerste inhoud wordt
   geneutraliseerd (zie onder), zodat de onderkant klopt met de bovenkant. */
.djt-hero__cta {
	margin: 20px 0;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.djt-content > .djt-section:first-child,
.djt-content > .djt-prose:first-child { margin-top: 0; }

/* Hero-indeling: links titel/ondertitel/knop, rechts de beoordeling met daaronder
   (gecentreerd) de prijssticker. De ruimte tussen beoordeling en sticker is gelijk
   aan de marge boven de hero-tekst (20px). */
.djt-hero__aside {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-top: 24px;
}
@media ( min-width: 640px ) {
	.djt-hero__grid {
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 40px;
		align-items: start;
	}
	.djt-hero__aside { margin-top: 0; }
}

/* Prijssticker naast de knop */
.djt-price {
	position: relative;
	flex: 0 0 auto;
	line-height: 1.05;
}
.djt-price__flag {
	position: absolute;
	top: -6px;
	right: -8px;
	z-index: 2;
	background: #c0392b;
	color: #fff;
	font-size: 0.6rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 8px;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.djt-price__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.djt-price__amount { font-weight: 800; }
.djt-price__unit { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.djt-price__old { text-decoration: line-through; opacity: 0.75; font-weight: 600; }
.djt-price__players { font-weight: 600; }

/* Variant met geüploade sticker-afbeelding */
.djt-price--image { width: 132px; max-width: 42vw; }
.djt-price--image .djt-price__bg { display: block; width: 100%; height: auto; }
.djt-price--image .djt-price__text {
	position: absolute;
	left: var(--djt-px, 50%);
	top: var(--djt-py, 57%);
	width: var(--djt-pw, 46%);
	transform: translate(-50%, -50%);
	color: var(--djt-price-color, #4a3410);
}
.djt-price--image .djt-price__amount { font-size: clamp(0.95rem, 3.6vw, 1.4rem); }
.djt-price--image .djt-price__unit { font-size: clamp(0.5rem, 1.7vw, 0.66rem); margin-top: 0.1em; }
.djt-price--image .djt-price__players { font-size: clamp(0.5rem, 1.7vw, 0.66rem); font-weight: 600; text-transform: none; letter-spacing: 0.01em; line-height: 1.15; margin-top: 0.02em; }
.djt-price--image .djt-price__old { font-size: clamp(0.6rem, 2vw, 0.8rem); }

/* Escape Xperience: onderschrift op twee regels ("Per team" / "1-4 spelers"),
   niet in hoofdletters, met wat meer ruimte tussen het bedrag en het onderschrift.
   Beide regels niet laten afbreken zodat ze netjes op één regel blijven. */
.djt-price--ex .djt-price__unit { text-transform: none; margin-top: 0.38em; line-height: 1.15; }
.djt-price--ex .djt-price__unit,
.djt-price--ex .djt-price__players { white-space: nowrap; }

/* Variant gegenereerde ronde badge (terugval) */
.djt-price--badge {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: var(--djt-sticker-bg, #d98a1e);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(-8deg);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.djt-price--badge::before {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	border: 2px dashed rgba(255, 255, 255, 0.85);
	pointer-events: none;
}
.djt-price--badge .djt-price__amount { font-size: 1.4rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.djt-price--badge .djt-price__unit { font-size: 0.62rem; }
.djt-price--badge .djt-price__old { font-size: 0.72rem; }
.djt-price--badge .djt-price__flag { transform: rotate(8deg); }

/* Buttons */
.djt-btn {
	display: inline-block;
	padding: 14px 26px;
	border-radius: var(--djt-btn-radius, 999px);
	font-weight: 700;
	text-decoration: none;
	min-height: 50px;
	line-height: 1.4;
	transition: transform .05s ease, background .15s ease;
}
.djt-btn:active { transform: translateY(1px); }
.djt-btn--primary,
.djt-btn--primary:link,
.djt-btn--primary:visited { background: var(--djt-accent); color: #fff !important; }
.djt-btn--primary:hover,
.djt-btn--primary:focus {
	background: var(--djt-accent-dark);
	color: #fff !important;
	-webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.6);
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
}
.djt-btn--light { background: #fff; color: var(--djt-accent-dark); }
.djt-btn--light:hover { background: #eef3ee; }

/* Escape Xperience: knoppen krijgen bij hover een zwarte achtergrond met
   accentkleurige tekst (zelfde sfeer als de prijssticker). Geldt voor de primaire
   knoppen én de "Boek nu"-knop in de gouden band onderaan. */
.djt--ex .djt-btn--primary:hover,
.djt--ex .djt-btn--primary:focus,
.djt--ex .djt-btn--light:hover,
.djt--ex .djt-btn--light:focus {
	background: #000;
	color: var(--djt-accent) !important;
	box-shadow: none;
	-webkit-text-stroke: 0;
	text-shadow: none;
}

/* 404 — pagina niet gevonden */
.djt-404__inner {
	text-align: center;
	padding: 64px 20px 72px;
	max-width: 640px;
	margin: 0 auto;
}
.djt-404__code {
	font-size: clamp(4.5rem, 18vw, 8rem);
	font-weight: 800;
	line-height: 1;
	color: var(--djt-accent);
	opacity: .18;
	margin-bottom: -8px;
}
.djt-404__title {
	font-size: clamp(1.5rem, 5vw, 2.2rem);
	color: var(--djt-ink);
	margin: 0 0 12px;
}
.djt-404__text {
	font-size: 1.05rem;
	color: var(--djt-muted);
	margin: 0 0 26px;
	line-height: 1.6;
}
.djt-404__actions { margin: 0; }

/* Content sections */
.djt-content { padding-bottom: 56px; }
.djt-section { margin: 34px 0; }
.djt-section > h2 { font-size: 1.5rem; margin: 0 0 14px; }
.djt-prose :first-child { margin-top: 0; }
.djt-prose :last-child { margin-bottom: 0; }

/* Spel-intro (korte omschrijving van het gekozen spel) */
.djt-spel-intro {
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--djt-ink);
	background: var(--djt-soft);
	border-left: 4px solid var(--djt-accent);
	border-radius: 0 var(--djt-radius) var(--djt-radius) 0;
	padding: 18px 22px;
}
.djt-spel-intro :first-child { margin-top: 0; }
.djt-spel-intro :last-child { margin-bottom: 0; }

/* Card block */
.djt-card {
	background: var(--djt-soft);
	border: 1px solid var(--djt-line);
	border-radius: var(--djt-radius);
	padding: 20px 22px;
}
.djt-facts { list-style: none; margin: 0 0 8px; padding: 0; }
.djt-facts li { padding: 6px 0; border-bottom: 1px solid var(--djt-line); }
.djt-facts li:last-child { border-bottom: none; }

/* Praktische info — definitielijst */
.djt-praktisch-list { margin: 0; padding: 0; }
.djt-praktisch-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--djt-line);
}
.djt-praktisch-row:last-child { border-bottom: none; }
.djt-praktisch-row dt { font-weight: 700; margin: 0; }
.djt-praktisch-row dd { margin: 0; color: var(--djt-muted); }
@media ( min-width: 520px ) {
	.djt-praktisch-row { grid-template-columns: 220px 1fr; }
	.djt-praktisch-row dd { color: var(--djt-ink); }
}

/* Gallery — scrollbare carrousel met pijltjes */
.djt-gallery { position: relative; }
.djt-gallery__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
	scrollbar-width: thin;
}
.djt-gallery__item {
	margin: 0;
	flex: 0 0 auto;
	width: 80%;
	max-width: 340px;
	scroll-snap-align: start;
	border-radius: 10px;
	overflow: hidden;
	background: var(--djt-soft);
}
.djt-gallery__img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

.djt-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	color: var(--djt-ink);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}
.djt-gallery__nav:hover { background: #fff; }
.djt-gallery__nav--prev { left: 6px; }
.djt-gallery__nav--next { right: 6px; }
.djt-gallery__nav[hidden] { display: none; }
.djt-gallery__link { display: block; height: 100%; cursor: zoom-in; }

/* Lightbox — foto schermvullend in een pop-up */
.djt-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.85);
	padding: 24px;
}
.djt-lightbox[aria-hidden="false"] { display: flex; }
body.djt-lightbox-open { overflow: hidden; }
.djt-lightbox__figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.djt-lightbox__img {
	width: auto;
	height: auto;
	max-width: min( 100vw, 1600px );
	max-height: 92vh;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.djt-lightbox__close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}
.djt-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }
.djt-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}
.djt-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.djt-lightbox__nav--prev { left: 14px; }
.djt-lightbox__nav--next { right: 14px; }
.djt-lightbox__nav[hidden] { display: none; }

/* CTA band */
.djt-cta-band {
	background: var(--djt-accent);
	color: #fff;
	text-align: center;
	padding: 40px 0;
	margin: 40px 0;
}
.djt-cta-band h2 { margin: 0 0 18px; font-size: clamp(1.4rem, 4vw, 2rem); }

/* Link cards */
.djt-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.djt-card-link {
	display: block;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--djt-line);
	border-radius: 12px;
	text-decoration: none;
	color: var(--djt-ink);
	font-weight: 600;
	transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.djt-card-link:hover {
	border-color: var(--djt-accent);
	box-shadow: 0 4px 14px rgba(47, 82, 51, 0.10);
}
.djt-card-link__title::after { content: " ›"; color: var(--djt-accent); }

/* Mobiel: hero en tekst (koppen & alinea's) gecentreerd.
   Kruimelpad, praktische-info-rijen en kaartjes blijven links. */
.djt-hero__title,
.djt-hero__loc { text-align: center; }
.djt-hero__cta { justify-content: center; }
.djt-content .djt-section { text-align: center; }
.djt-praktisch-list,
.djt-praktisch-row,
.djt-steps,
.djt-step,
.djt-step__text,
.djt-loc-list,
.djt-loc-stad,
.djt-loc-parken,
.djt-usp-grid,
.djt-usp,
.djt-usp__text,
.djt-review-grid,
.djt-review,
.djt-review__text,
.djt-faq__list,
.djt-faq__q,
.djt-faq__a,
.djt-cards { text-align: left; }

/* Grotere schermen */
@media ( min-width: 640px ) {
	body.djt-body { font-size: 18px; }
	/* Vanaf tablet/desktop weer links uitgelijnd. */
	.djt-hero__title,
	.djt-hero__loc,
	.djt-content .djt-section { text-align: left; }
	.djt-hero__cta { justify-content: flex-start; }
	.djt-gallery__item { width: 46%; max-width: 320px; }
	.djt-cards { grid-template-columns: repeat(2, 1fr); }
	.djt-hero__img { border-radius: var(--djt-radius); }
	.djt-hero__media { padding: 0 20px; max-width: 940px; margin-left: auto; margin-right: auto; }
}

@media ( min-width: 900px ) {
	.djt-cards { grid-template-columns: repeat(3, 1fr); }
	.djt-gallery__item { width: 31.5%; }
	/* Op desktop mag de hero meer verticale ruimte innemen, zodat de foto
	   minder wordt bijgesneden. Respecteert de ingestelde hero-hoogte en telt
	   er extra ruimte bij op, met een plafond zodat hij nooit het hele scherm vult. */
	.djt-hero__img { max-height: min( 86vh, calc( var( --djt-hero-max-height ) + 16vh ) ); }
}

/* ===== Spelthema: perkament-panelen + sfeerafbeelding ===== */
.djt-content--themed { position: relative; }
.djt-content--themed .djt-themed-panel {
	position: relative;
	background:
		radial-gradient( 130% 130% at 82% -12%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55% ),
		radial-gradient( 120% 120% at 8% 112%, rgba(150, 110, 50, 0.10), rgba(150, 110, 50, 0) 50% ),
		var(--djt-parch, #efe1bf);
	border: 2px solid var(--djt-parch-rand, #c9ad78);
	border-radius: 16px;
	box-shadow:
		inset 0 0 0 3px rgba(255, 255, 255, 0.35),
		inset 0 0 16px rgba(120, 90, 40, 0.12),
		0 3px 12px rgba(60, 45, 15, 0.15);
	color: #4a3410;
	padding: 22px 24px;
	margin: 26px 0;
}
.djt-content--themed .djt-themed-panel > h2,
.djt-content--themed .djt-themed-panel > h3 { color: #3a2c10; }
.djt-content--themed .djt-praktisch.djt-card { border-color: var(--djt-parch-rand, #c9ad78); }
.djt-content--themed .djt-praktisch-row { border-color: rgba(120, 90, 40, 0.22); }
.djt-content--themed .djt-praktisch-row dt { color: #6a4e1f; }
.djt-content--themed .djt-praktisch-row dd { color: #4a3410; }

.djt-mascotte {
	position: absolute;
	z-index: 4;
	pointer-events: none;
	width: 118px;
	max-width: 34vw;
	filter: drop-shadow( 0 5px 8px rgba(0, 0, 0, 0.22) );
}
.djt-mascotte__img { display: block; width: 100%; height: auto; }
.djt-mascotte--rechtsboven { top: -24px; right: -6px; transform: rotate(5deg); }
.djt-mascotte--onder { bottom: -38px; right: 8px; }
@media ( min-width: 640px ) {
	.djt-mascotte { width: 150px; }
	.djt-mascotte--rechtsboven { top: -44px; right: -12px; }
	.djt-mascotte--onder { bottom: -54px; right: 22px; }
}

/* ===== Uitleg: genummerde stappen ("zo werkt het") ===== */
.djt-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.djt-step {
	position: relative;
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid var(--djt-line);
	border-radius: 12px;
	background: var(--djt-soft);
}
.djt-step__num {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--djt-accent);
	color: #fff;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}
.djt-step__media {
	flex: 0 0 auto;
	width: 74px;
	height: 74px;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.djt-step__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.djt-step__text { font-weight: 600; }

@media ( min-width: 640px ) {
	.djt-steps { grid-template-columns: 1fr 1fr; }
}

/* Onder het spelthema: perkament-stappen */
.djt-content--themed .djt-step {
	background: var(--djt-parch, #efe1bf);
	border: 2px solid var(--djt-parch-rand, #c9ad78);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35), 0 2px 8px rgba(60, 45, 15, 0.12);
	color: #4a3410;
}

/* ===== Spelpagina: kaart + locaties ===== */
.djt-map {
	height: 420px;
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	margin: 0 0 22px;
	z-index: 0;
	background: var(--djt-soft);
}
.leaflet-container { font: inherit; }
.djt-map-btn {
	display: inline-block;
	margin-top: 8px;
	padding: 6px 14px;
	background: var(--djt-accent);
	color: #fff !important;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
}
.djt-map-btn:hover { background: var(--djt-accent-dark); }

.djt-loc-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
.djt-loc-stad h3 { margin: 0 0 6px; font-size: 1.15rem; }
.djt-loc-parken { margin: 0; padding-left: 18px; }
.djt-loc-parken li { margin: 3px 0; }
@media ( min-width: 640px ) {
	.djt-loc-list { grid-template-columns: 1fr 1fr; }
}

/* Zoekwidget: vind locaties bij jou in de buurt (boven de kaart). */
.djt-nearby__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
	margin: 0 0 10px;
}
.djt-nearby__input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid #c7cdd4;
	border-radius: 8px;
	font-size: 1rem;
	line-height: 1.3;
}
.djt-nearby__input:focus {
	outline: none;
	border-color: var(--djt-accent);
	box-shadow: 0 0 0 2px rgba(47, 82, 51, 0.18);
}
.djt-nearby__form .djt-btn { cursor: pointer; }
.djt-nearby__msg { margin: 0 0 10px; color: #55606e; min-height: 1.2em; }
.djt-nearby__results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* minmax(0,1fr) i.p.v. de impliciete auto-track: anders groeit de track mee
	   met de langste (nowrap) regel en loopt de lijst op mobiel buiten beeld. */
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	/* De sectie is op mobiel gecentreerd; de resultaten blijven links uitgelijnd
	   (anders staat een afbrekende eerste regel gecentreerd). */
	text-align: left;
}
.djt-nearby__item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 12px;
	border: 1px solid #e2e6ea;
	border-radius: 8px;
	background: #fff;
	min-width: 0;
}
.djt-nearby__info {
	min-width: 0;
	/* Lange locatienamen (bv. Escape Xperience) mogen netjes afbreken i.p.v.
	   het scherm uit te lopen. */
	overflow-wrap: anywhere;
}
.djt-nearby__plaats { color: var(--djt-ink); font-weight: 600; }
.djt-nearby__sep { color: #9aa2ac; }
.djt-nearby__link { color: var(--djt-accent); text-decoration: none; }
.djt-nearby__link:hover { text-decoration: underline; }
.djt-nearby__dist { flex: 0 0 auto; font-weight: 600; color: var(--djt-ink); white-space: nowrap; }

/* Ingekorte locatielijst: alleen plaatsen als klikbare chips. */
.djt-loc-intro { margin: 0 0 12px; color: #55606e; }
.djt-loc-steden {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.djt-loc-steden li { margin: 0; }
.djt-loc-steden a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--djt-accent);
	border-radius: 999px;
	color: var(--djt-accent);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.3;
	transition: background .15s ease, color .15s ease;
}
.djt-loc-steden a:hover,
.djt-loc-steden a:focus {
	background: var(--djt-accent);
	color: #fff;
}

/* ===== Stadpagina: kies je locatie ===== */
.djt-kies__intro { margin: 0 0 14px; color: #55606e; }
.djt-kies__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.djt-kies__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 16px;
	border: 1px solid #e2e6ea;
	border-radius: 12px;
	background: #fff;
}
.djt-kies__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.djt-kies__naam { font-weight: 700; font-size: 1.1rem; color: var(--djt-ink); }
.djt-kies__meta { font-size: .9rem; color: #6b7480; }
.djt-kies__btn { flex: 0 0 auto; white-space: nowrap; }
@media ( max-width: 520px ) {
	.djt-kies__item { flex-direction: column; align-items: stretch; }
	.djt-kies__btn { text-align: center; }
}

/* ===== Stadpagina: spellen in deze stad ===== */
.djt-spellen-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.djt-spel-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid #e2e6ea;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	transition: background .15s ease, border-color .15s ease;
}
/* Wit rondje rechtsboven met het spel-logo (transparante achtergrond). */
.djt-spel-card__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
}
.djt-spel-card__logo {
	max-width: 38px;
	max-height: 38px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
/* Hover: lichte tint van de accentkleur van het spel dat de bezoeker op dat moment
   "aan" heeft (de pagina-context) — dus alle kaarten in hetzelfde thema. Groen bij
   Drakenjacht, warme/lichte tint bij Escape Xperience. Alsof de kaart geselecteerd is. */
.djt-spel-card:hover,
.djt-spel-card:focus-within {
	background: #f3f4f6; /* terugval voor oudere browsers */
	background: color-mix( in srgb, var(--djt-accent, #6b7480) 12%, #fff );
	border-color: #d5dae0;
	border-color: color-mix( in srgb, var(--djt-accent, #6b7480) 32%, #fff );
}
.djt-spel-card__media { display: block; line-height: 0; }
.djt-spel-card__media img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
}
.djt-spel-card__body { padding: 14px 16px; }
.djt-spel-card__title { margin: 0 0 6px; font-size: 1.2rem; }
/* Kaart-tekst zwart. Extra specifiek (.djt-spel-card ervoor) zodat het de globale
   link-kleur (.djt-body a { color: accent }) overschrijft. */
.djt-spel-card .djt-spel-card__title-link { color: #1a1a1a; text-decoration: none; }
.djt-spel-card .djt-spel-card__title-link:hover { text-decoration: underline; }
.djt-spel-card__label { margin: 0 0 4px; font-size: .9rem; color: #6b7480; }
.djt-spel-card__parken { margin: 0; padding-left: 18px; }
.djt-spel-card__parken li { margin: 3px 0; }
.djt-spel-card .djt-spel-card__parken a { color: #1a1a1a; text-decoration: none; }
.djt-spel-card .djt-spel-card__parken a:hover { text-decoration: underline; }
@media ( min-width: 640px ) {
	.djt-spellen-grid { grid-template-columns: 1fr 1fr; }
}
@media ( min-width: 960px ) {
	.djt-spellen-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ===== USP-blok "waarom dit spel" ===== */
.djt-usp-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}
.djt-usp {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 5px 10px;
	border: 1px solid var(--djt-line);
	border-radius: 12px;
	background: var(--djt-soft);
}
.djt-usp__check {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--djt-accent);
	color: #fff;
	font-weight: 800;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.djt-usp__text { font-weight: 600; }
/* USP's altijd onder elkaar (ook op tablet en desktop). */
.djt-content--themed .djt-usp {
	background: var(--djt-parch, #efe1bf);
	border: 2px solid var(--djt-parch-rand, #c9ad78);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35), 0 2px 8px rgba(60, 45, 15, 0.12);
	color: #4a3410;
}

/* ===== Beoordeling (sterren) in de hero ===== */
/* Titelregel: titel links, beoordeling rechts, ongeveer gelijke hoogte. */
.djt-hero__titlerow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 1.5rem; /* mobiel: ~1 regel ruimte tot de ondertitel. */
}
.djt-hero__titlerow .djt-hero__title { margin: 0; }
.djt-hero__rating { display: inline-flex; }
@media ( min-width: 640px ) {
	.djt-hero__titlerow {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 0;
	}
}
.djt-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--djt-line);
	border-radius: 999px;
	padding: 6px 14px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	font-size: 0.92rem;
	white-space: nowrap;
}
.djt-rating__stars {
	position: relative;
	display: inline-block;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 2px;
	color: #d9d9d9;
}
.djt-rating__stars::before { content: "\2605\2605\2605\2605\2605"; }
.djt-rating__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #f5a623;
}
.djt-rating__fill::before { content: "\2605\2605\2605\2605\2605"; }
.djt-rating__num { font-weight: 800; }
.djt-rating__count { color: var(--djt-muted); }

/* ===== Uitgelichte reviews (carrousel, 1 tegelijk, pijltjes) ===== */
.djt-revcar { position: relative; padding: 0 40px; }
.djt-revcar__track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.djt-revcar__track::-webkit-scrollbar { display: none; }
.djt-revcar__item { flex: 0 0 100%; scroll-snap-align: center; }
.djt-revcar__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	color: var(--djt-ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.djt-revcar__nav:hover { background: #fff; }
.djt-revcar__nav--prev { left: 0; }
.djt-revcar__nav--next { right: 0; }
.djt-revcar__nav[hidden] { display: none; }
.djt-review {
	margin: 0;
	padding: 16px 18px;
	border: 1px solid var(--djt-line);
	border-radius: 12px;
	background: var(--djt-soft);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.djt-review__stars .djt-rating__stars { font-size: 1.1rem; letter-spacing: 2px; }
.djt-review__text {
	margin: 0;
	font-style: italic;
	color: var(--djt-ink);
	line-height: 1.5;
}
.djt-review__text::before { content: "\201C"; }
.djt-review__text::after { content: "\201D"; }
.djt-content--themed .djt-review {
	background: var(--djt-parch, #efe1bf);
	border: 2px solid var(--djt-parch-rand, #c9ad78);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35), 0 2px 8px rgba(60, 45, 15, 0.12);
	color: #4a3410;
}
.djt-content--themed .djt-review__text { color: #4a3410; }

/* ===== Veelgestelde vragen (accordion) ===== */
.djt-faq__list { display: flex; flex-direction: column; gap: 6px; }
.djt-faq__item {
	border: 1px solid var(--djt-line);
	border-radius: 12px;
	background: var(--djt-soft);
	overflow: hidden;
}
.djt-faq__q {
	cursor: pointer;
	list-style: none;
	padding: 5px 30px 5px 10px;
	font-weight: 700;
	position: relative;
}
.djt-faq__q::-webkit-details-marker { display: none; }
.djt-faq__q::after {
	content: "+";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	line-height: 1;
	color: var(--djt-accent);
}
.djt-faq__item[open] .djt-faq__q::after { content: "\2013"; }
.djt-faq__a { padding: 0 10px 5px; }
.djt-faq__a a { color: var(--djt-accent); }
.djt-faq__a ul, .djt-faq__a ol { margin: 6px 0 0; padding-left: 20px; }
.djt-content--themed .djt-faq__item {
	background: var(--djt-parch, #efe1bf);
	border: 2px solid var(--djt-parch-rand, #c9ad78);
	color: #4a3410;
}
.djt-content--themed .djt-faq__q::after { color: #8a5a1a; }

/* Anker-doelen niet onder de sticky menubalk laten vallen. */
#djt-buurt, #djt-locaties { scroll-margin-top: 84px; }

/* ===== Parkverzoek ===== */
.djt-parkverzoek-cta { text-align: center; }
.djt-parkverzoek-cta__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.djt-parkverzoek-cta__q { margin: 0; font-weight: 600; font-size: 1.1rem; }
/* Mobiel: onder elkaar en gecentreerd. */
@media ( max-width: 640px ) {
	.djt-parkverzoek-cta__row { flex-direction: column; gap: 12px; }
}

/* Standalone-sjablonen (boeking + park-aanvragen): marge ONDER de koptekst (de
   hero-titel) gelijk aan de marge erboven, zodat de titel niet tegen de
   formulierkaart aan loopt. */
.djt-boeking-page .djt-hero__body,
.djt-parkverzoek-page .djt-hero__body { padding-bottom: 20px; }

/* Formulierpagina: zelfde stijl als de boekingstemplate (velden/knoppen komen uit
   de boekingen-CSS, .djb-*). Deze regels zorgen voor centrering + terugval. */
.djt-parkverzoek { max-width: 560px; margin: 0 auto; }
.djt-parkverzoek__intro { margin: 0 0 20px; }
.djt-parkverzoek-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }