:root {
	--cream: #f6f4ef;
	--green: #2d5a27;
	--green-light: #4a7c42;
	--green-pale: #b0af65;
	--brown: #8b6f47;
	--text: #2a2a2a;
	--muted: #444;
	--border: #ddd8ce;
	--white: #fff;
	--radius: 12px;
	--shadow: 0 8px 40px rgba(0, 0, 0, .13);
}

.calendar-wrap {
	width: 100%;
	max-width: 560px;
	position: relative;
}

/* ── TRIGGER ── */
.date-field {
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	transition: border-color .2s;
	user-select: none;
	position: relative;
}

.date-field svg {
	position: absolute;
	top: 0;
	right: -5px;
}

.date-field:hover {
	border-color: var(--green-light);
}

.date-field.open {
	border-color: var(--green);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.date-field .icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--green);
}

.date-field .field-text {
	flex: 1;
}

.date-field .field-label {
	font-size: 16.2px;
	display: block;
	font-family: var(--font-family-heading), sans-serif;
	font-weight: 700;
	letter-spacing: 0.4px;
	color: var(--color-burnt);
	pointer-events: none;
}

.date-field .field-value {
	font-size: 16.2px;
	font-weight: 500;
	color: #444;
	margin-top: 1px;
}

.date-field .field-value.placeholder {
	color: #444;
	font-weight: 400;
}

/* ── PANEL ── */
.picker-panel {
	margin-top: 8px;
	min-width: 502px;
	position: absolute;
	top: 100%;
	left: -38%;
	right: 0;
	z-index: 999;
	background: var(--white);
	border-top: none;
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow);
	display: none;
	overflow: hidden;
}

.picker-panel-closed {
	position: absolute;
	top: 68px;
	right: 6px;
	width: 40px;
	height: 40px;
	border: 0;
	cursor: pointer;
	display: none;
	background-color: transparent;
	/* Zonder eigen kleur erft het icoon de knoptekstkleur van de browser —
	   op iOS is dat systeemblauw. */
	color: var(--text);
	font-size: 16.2px;
	line-height: 1;
	-webkit-appearance: none;
	appearance: none;
}


.picker-panel.visible {
	display: block;
}

/* ── TABS ── */
.mode-tabs {
	display: flex;
	border-bottom: 1.5px solid var(--border);
}

.mode-tab {
	flex: 1;
	padding: 13px 16px;
	font-size: 0.8rem;
	font-weight: 500;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--muted);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: color .2s, background .2s;
	font-family: inherit;
}

.mode-tab:first-child {
	border-right: 1.5px solid var(--border);
}

.mode-tab.active {
	color: var(--white);
	background: var(--green-pale);
	font-weight: 600;
}

.check-circle {
	width: 18px;
	height: 18px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .2s, border-color .2s;
}

.mode-tab.active .check-circle {
	background: var(--green);
	border-color: var(--green);
}

.check-circle svg {
	opacity: 0;
	transition: opacity .15s;
}

.mode-tab.active .check-circle svg {
	opacity: 1;
}

/* ── FLEX BADGE ── */
.flex-badge {
	display: none;
	align-items: center;
	gap: 6px;
	background: var(--green-pale);
	border: 1px solid var(--white);
	color: var(--white);
	font-size: 0.7rem;
	font-weight: 500;
	padding: 6px 14px 6px 10px;
	border-radius: 20px;
	margin: 12px auto 0;
	width: fit-content;
}

.flex-badge.visible {
	display: flex;
}

/* ── CALENDAR AREA ── */
.calendar-area {
	background-color: var(--white);
	padding: 16px 16px 8px;
}

/* ─ DESKTOP: viewport showing 2 months ─ */
.desktop-cal {
	display: block;
}

.desktop-cal.is-hidden,
.mobile-cal.is-hidden {
	display: none;
}

.mobile-cal {
	display: none;
}

.desktop-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.nav-btn {
	width: 34px;
	height: 34px;
	border: 1px solid var(--border);
	background: var(--white);
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--green);
	transition: background .15s, border-color .15s;
}

.nav-btn:hover {
	color: #fff;
	background: var(--green-pale);
	border-color: var(--green-pale);
}

.nav-btn:disabled {
	color: var(--border);
	cursor: default;
	border-color: var(--border);
}

.nav-btn:disabled:hover {
	background: none;
	border-color: var(--border);
}

.desktop-months-viewport {
	overflow: hidden; /* clip; no scrollbar */
}

.desktop-months-viewport.is-hidden {
	display: none;
}

/* track holds all months in a row; JS sets transform to slide */
.desktop-months-track {
	display: flex;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

/* each month slot = exactly half the viewport width */
.desktop-month-slot {
	flex: 0 0 100%;
	min-width: 0;
	padding: 0 8px;
}

.month-title {
	font-family: 'Merriweather', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text);
	text-align: center;
	margin-bottom: 12px;
}

/* Desktop toont één maand; de nav-balk vermeldt die al. */
.desktop-month-slot .month-title {
	display: none;
}

/* ─ MOBILE: all months stacked, panel scrolls ─ */
@media only screen and (max-width: 1199px) {

	.date-field .field-label {
		font-size: 14.4px;
	}

}
@media only screen and (max-width: 1024px) {
	.calendar-wrap {
		position: unset;
		max-width: 100%;
	}

	.picker-panel {
		left: calc(-100% - 31px);
		margin-top: 0;
	}

	.date-field svg {
		right: 0;
	}

}
@media only screen and (max-width: 767px) {
	/* Ook op mobiel één maand met pijltjes: .desktop-cal is met
	   VISIBLE_MONTHS = 1 en slots van 100% breedte al een slider, dus die
	   werkt hier net zo goed. De gestapelde .mobile-cal blijft ongebruikt. */
	.desktop-cal {
		display: block;
	}

	.mobile-cal {
		display: none;
	}
	/* Het paneel is een vaste kolom over het hele scherm: de maandenlijst
	   scrollt, de voettekst met Wissen/Toepassen blijft onderaan staan.
	   Eerder was de footer zelf position:fixed binnen een fixed scroller;
	   iOS Safari behandelt zo'n geneste fixed als absolute, waardoor de
	   knoppen helemaal onder de laatste maand belandden en je de picker
	   niet meer kon bevestigen of sluiten. */
	.picker-panel {
		min-width: 100%;
		position: fixed;
		top: 61px;
		left: 0;
		right: 0;
		bottom: auto;
		margin-top: 0;
		/* Meegroeien met de inhoud in plaats van het hele scherm vullen: één
		   maand is lager dan de viewport en gaf anders een grote lege bak.
		   De max-height houdt de voettekst binnen beeld als een maand met zes
		   weekrijen toch te hoog wordt. */
		height: auto;
		max-height: calc(100dvh - 71px);
		overflow: hidden;
		z-index: 1000;
	}

	/* In de boekingskaart staat het veld halverwege de pagina; een paneel dat
	   bovenaan het scherm plakt hoort daar zichtbaar niet bij. Daar hangen we
	   hem dus gewoon onder het veld. De filter-hero houdt de schermbrede
	   overlay: die staat zelf al bovenaan, en daar loste dat een iOS-probleem
	   met de voetknoppen op. */
	.card-book .picker-panel {
		position: absolute;
		top: calc(100% + 8px);
		right: auto;
		bottom: auto;
		left: 0;
		min-width: 0;
		width: 100%;
		max-height: none;
		overflow: visible;
		z-index: 30;
	}

	/* Past het paneel niet onder het veld, dan zet de JS deze klasse en klapt
	   hij naar boven. Zie plaatsPaneel() in js/datepicker.js. */
	.card-book .picker-panel.boven-veld {
		top: auto;
		bottom: calc(100% + 8px);
	}

	/* De sticky onderdelen-dropdown op de retraitepagina staat in dezelfde
	   sectie en kruipt anders over het paneel heen. body.is-hidden wordt door
	   de picker gezet zolang hij open is. */
	body.is-hidden .support-select {
		visibility: hidden;
	}

	.picker-panel.visible {
		display: flex;
		flex-direction: column;
	}

	.picker-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.picker-panel-closed {
		display: block;
		position: absolute;
		top: 4px;
		right: 4px;
		z-index: 2;
	}

	/* Ruimte vrijhouden voor de sluitknop rechtsboven. */
	.desktop-nav {
		padding-right: 40px;
	}

	.calendar-area {
		padding: 16px 12px;
	}

	/* Zonder bovengrens wordt elke dag ruim 50px op een telefoon (aspect-ratio
	   1 op een zevende van de schermbreedte); dat maakt de kalender onnodig
	   hoog en de selectiebollen fors. Wel groot genoeg om comfortabel te
	   raken en te lezen: 44px is de ondergrens voor een tikdoel. */
	.day {
		max-width: 46px;
		max-height: 46px;
		justify-self: center;
	}

	.picker-footer {
		position: static;
		flex: 0 0 auto;
		width: 100%;
		background-color: #fff;
		padding-bottom: max(12px, env(safe-area-inset-bottom));
	}
}

/* ── WEEKDAY HEADER ── */
.weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 4px;
}

.weekdays span {
	text-align: center;
	font-size: 0.6rem;
	font-weight: 600;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 4px 0;
}

/* ── DAY GRID ── */
.day-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0;
}

.day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	border-radius: 50%;
	cursor: pointer;
	transition: background .12s, color .12s;
	color: var(--text);
	position: relative;
}

/* Mobiel wat royaler. Deze regels staan bewust hier en niet in de
   mediaquery bovenaan: de basisregels hierboven komen later in het bestand en
   zouden ze bij gelijke specificiteit overrulen. */
@media only screen and (max-width: 767px) {
	.day {
		font-size: 0.9rem;
	}

	/* Lucht tussen de weekrijen; zonder deze regel plakken de cijfers aan
	   elkaar en oogt de maand samengeperst. */
	.day-grid {
		gap: 4px 0;
	}

	.weekdays {
		margin-bottom: 8px;
	}
}

.day:hover:not(.empty):not(.past) {
	background: var(--green-pale);
	color: var(--white);
}

.day.empty {
	cursor: default;
}

.day.past {
	color: var(--border);
	cursor: default;
}

.day.today::after {
	content: '';
	position: absolute;
	bottom: 3px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--green-pale);
}

.day.selected {
	background: var(--green-pale) !important;
	color: #fff !important;
	font-weight: 600;
}

.day.selected.today::after {
	background: rgba(255, 255, 255, .5);
}

/* flex ±3 highlight */
.day.flex-hi {
	background: var(--green-pale);
	border-radius: 0;
}

.day.flex-hi-start {
	background: var(--green-pale);
	border-radius: 50% 0 0 50%;
}

.day.flex-hi-end {
	background: var(--green-pale);
	border-radius: 0 50% 50% 0;
}

/* ── FOOTER ── */
.picker-footer {
	border-top: 1.5px solid var(--border);
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.footer-info {
	font-size: 0.7rem;
	color: var(--muted);
	cursor: pointer;
}

.footer-info strong {
	color: var(--text);
}

.footer-info.active {
	font-weight: bold;
}

.btn-clear {
	background: none;
	border: none;
	font-size: 0.7rem;
	color: var(--muted);
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
	transition: color .15s, background .15s;
	font-family: inherit;
}

.btn-clear:hover {
	color: var(--text);
	background: var(--cream);
}

.btn-apply {
	background: var(--green-pale);
	color: var(--white);
	border: none;
	border-radius: 8px;
	padding: 9px 20px;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background .15s;
}

.btn-apply:hover {
	background: #898838;
}

/* =========================================================
   3-MODE DATEPICKER — uitbreiding (periode / maand / flexibel)
   Alle selectors zijn gescoped binnen .picker-panel zodat ze
   geen invloed hebben op andere secties van de site.
========================================================= */

/* ── TABS: 3 stuks ── */
.picker-panel .mode-tab {
	padding: 12px 8px;
	font-size: 0.7rem;
	line-height: 1.25;
	gap: 0;
}

.picker-panel .mode-tab:first-child {
	border-right: none;
}

.picker-panel .mode-tab + .mode-tab {
	border-left: 1.5px solid var(--border);
}

/* ── PANES ── */
.picker-body {
	position: relative;
}

.picker-body .pane {
	display: none;
}

.picker-body .pane.active {
	display: block;
}

/* ── MAAND-PANE ── */
.picker-panel .month-intro {
	font-size: 0.7rem;
	color: var(--muted);
	padding: 14px 16px 0;
}

.picker-panel .month-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 14px 16px 16px;
}

.picker-panel .month-btn {
	padding: 9px 8px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	background: var(--white);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--text);
	text-align: center;
	line-height: 1.1;
	transition: border-color .15s, background .15s, color .15s;
}

.picker-panel .month-btn .yr {
	display: inline;
	font-size: 0.7rem;
	font-weight: 400;
	opacity: .6;
	margin-left: 4px;
}

.picker-panel .month-btn:hover {
	border-color: var(--green-pale);
}

.picker-panel .month-btn.selected {
	background: var(--green-pale);
	border-color: var(--green-pale);
	color: var(--white);
	font-weight: 600;
}

.picker-panel .month-btn.selected .yr {
	opacity: .85;
}

/* ── FLEXIBEL-PANE ── */
.picker-panel .flex-pane {
	text-align: center;
	padding: 30px 26px 34px;
}

.picker-panel .flex-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cream);
	color: var(--green);
}

.picker-panel .flex-pane h4 {
	margin: 0 0 6px;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--text);
	font-family: var(--font-family-heading), 'Merriweather', sans-serif;
}

.picker-panel .flex-pane p {
	margin: 0 auto;
	max-width: 360px;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--muted);
}

/* ── PERIODE-SELECTIE (begin/eind + tussenliggende dagen) ── */
.picker-panel .day.range-start,
.picker-panel .day.range-end {
	background: var(--green-pale) !important;
	color: var(--white) !important;
	font-weight: 600;
}

.picker-panel .day.range-start {
	border-radius: 50% 0 0 50%;
}

.picker-panel .day.range-end {
	border-radius: 0 50% 50% 0;
}

.picker-panel .day.range-start.range-end {
	border-radius: 50%;
}

.picker-panel .day.in-range {
	background-color: transparent;
	background-image: linear-gradient(rgba(176, 175, 101, .13), rgba(176, 175, 101, .13));
	background-size: 100% 72%;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 0;
	color: var(--text);
}

/* hover-voorbeeld tussen start en de dag waar de muis op staat */
.picker-panel .day.in-range-preview {
	background-color: transparent;
	background-image: linear-gradient(rgba(176, 175, 101, .08), rgba(176, 175, 101, .08));
	background-size: 100% 72%;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 0;
}

.picker-panel .day.range-end-preview {
	background-color: rgba(176, 175, 101, .08);
	border-radius: 0 50% 50% 0;
}

/* ── FOOTER ── */
.picker-panel .footer-actions {
	display: flex;
	gap: 8px;
}

/* ── MOBIEL ── */
@media only screen and (max-width: 767px) {
	/* Geen extra ruimte onderaan meer: de footer stond ooit vast onderin en
	   had die 64px nodig, maar staat sinds de iOS-fix gewoon in de flow. In de
	   boekingskaart is hij zelfs helemaal verborgen, en dan bleef er een lege
	   bak onder de laatste weekrij staan. */
	.picker-body {
		padding-bottom: 0;
	}

	.picker-panel .month-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.picker-panel .flex-pane {
		padding: 36px 24px;
	}
}

/* ── GEBLOKKEERDE DAGEN (koppeling in/uitchecken) ── */
.picker-panel .day.blocked {
	color: var(--border);
	cursor: default;
	pointer-events: none;
	background: none !important;
}

/* ── VERBLIJF (single-modus: incheck + nachten + uitcheck) ──
   De boekingssidebar kent de verblijfsduur (pakket + extra nachten), dus
   kleuren we niet één dag maar het hele blok. De tussenliggende dagen zijn
   als incheckdag geblokkeerd; deze regels staan bewust ná .day.blocked zodat
   ze die grijstint overrulen binnen het gekozen verblijf.

   Alle dagen van het verblijf vullen de hele cel. Een lagere band (zoals in
   de periode-modus) valt hier uit de toon: de incheckdag is een vol bolletje,
   en dan lijken de vervolgdagen een maatje kleiner. */
.picker-panel .day.stay-start {
	background: var(--green-pale) !important;
	color: var(--white) !important;
	font-weight: 600;
	border-radius: 50% 0 0 50%;
}

.picker-panel .day.stay-night {
	background: rgba(176, 175, 101, .2) !important;
	border-radius: 0;
	color: var(--text) !important;
}

/* Uitcheckdag: hoort bij het verblijf, maar er wordt niet overnacht. */
.picker-panel .day.stay-end {
	background: rgba(176, 175, 101, .1) !important;
	border-radius: 0 50% 50% 0;
	color: var(--muted) !important;
}

/* Voorbeeld onder de muis, vóór het klikken. */
.picker-panel .day.stay-start-preview {
	background: var(--green-pale) !important;
	color: var(--white) !important;
	border-radius: 50% 0 0 50%;
}

.picker-panel .day.stay-night-preview {
	background: rgba(176, 175, 101, .1) !important;
	border-radius: 0;
	color: var(--muted) !important;
}

.picker-panel .day.stay-end-preview {
	background: rgba(176, 175, 101, .06) !important;
	border-radius: 0 50% 50% 0;
	color: var(--muted) !important;
}

/* De eigen hover-stijl van .day zou de vervolgdagen bij het passeren van de
   muis alsnog vol inkleuren; binnen een verblijf is dat ongewenst. */
.picker-panel .day.stay-night:hover,
.picker-panel .day.stay-end:hover,
.picker-panel .day.stay-night-preview:hover,
.picker-panel .day.stay-end-preview:hover {
	color: var(--muted);
}


/* ── UITLEGKNOPJE BIJ DE INCHECKDATUM ──
   Staat naast de datepicker in de boekingssidebar; hier gehouden omdat het
   de werking van de kalender uitlegt. Tonen op hover én op focus, zodat een
   tik op mobiel hem ook opent (de knop krijgt dan focus). */
.card-book-group .book-info {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--white);
	cursor: pointer;
	z-index: 3;
}

.card-book-group .book-info-mark {
	display: block;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 10.8px;
	font-style: italic;
	line-height: 18px;
	color: var(--muted);
}

.card-book-group .book-info:hover,
.card-book-group .book-info:focus-visible {
	border-color: var(--green-pale);
}

.card-book-group .book-info-tip {
	position: absolute;
	right: -6px;
	bottom: calc(100% + 10px);
	display: none;
	width: 250px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--white);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
	font-size: 11.2px;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	color: var(--text);
	cursor: default;
	z-index: 4;
}

.card-book-group .book-info:hover .book-info-tip,
.card-book-group .book-info:focus .book-info-tip {
	display: block;
}

/* Pijltje naar het knopje toe. */
.card-book-group .book-info-tip::after {
	content: '';
	position: absolute;
	top: 100%;
	right: 12px;
	border: 6px solid transparent;
	border-top-color: var(--white);
}

/* Ruimte voor het knopje; style.css laadt later, dus hier een tandje
   specifieker zodat de padding-right niet wordt overruled. */
.card-book .card-book-group .calendar-wrap {
	padding-right: 34px;
}