/* ------------------------------------------------------------------
 * Duinhilletje - mobiele verbeteringen MotoPress datepicker
 * Zie duinhilletje-datepicker-mobile.php voor de toelichting per blok.
 * ------------------------------------------------------------------ */

/* [1] Chatwidget wegnemen zolang de kalender openstaat.
 *     De widget heeft z-index 999999999 en lag precies over "Sluiten". */
body.dh-datepick-open #simple-chat-button--container {
	display: none !important;
}

/* [5] iOS zoomt in zodra je een invoerveld met minder dan 16px aanraakt, en
 *     zoomt daarna niet terug - de gast moet zelf uitknijpen. Het thema zet
 *     deze velden op 14px. Dit is de enige betrouwbare oplossing: de viewport
 *     op maximum-scale zetten negeert iOS sinds versie 10, en het zou pinch
 *     zoom afnemen van juist de mensen die het nodig hebben.
 *
 *     pointer:coarse in plaats van een breedte, want dit is gedrag van
 *     aanraakschermen, niet van smalle schermen. */
@media (pointer: coarse) {

	input.mphb-datepick,
	.mphb-booking-form input[type="text"],
	.mphb-booking-form select,
	.mphb_sc_search-form input[type="text"],
	.mphb_sc_search-form select,
	.mphb_widget_search-form input[type="text"],
	.mphb_widget_search-form select {
		font-size: 16px !important;
	}
}

/* [3] Contrast: geblokkeerde datums moeten leesbaar zijn, niet onzichtbaar.
 *     Origineel was opacity .15 -> rgb(235,235,236) op wit = 1,2:1. */
.mphb-datepick-popup .datepick-month td .mphb-past-date,
.mphb-datepick-popup .datepick-month td .mphb-earlier-check-in-date,
.mphb-datepick-popup .datepick-month td .mphb-earlier-min-date,
.mphb-datepick-popup .datepick-month td .mphb-later-max-date,
.mphb-datepick-popup .datepick-month td .mphb-booked-date:not(.mphb-selectable-date),
.mphb-datepick-popup .datepick-month td .mphb-unselectable-date {
	opacity: 1 !important;
	color: #6b6b6b !important;
	background-color: #ededed !important;
}

/* Verleden en volgeboekt zijn niet hetzelfde: geef ze een eigen teken. */
.mphb-datepick-popup .datepick-month td .mphb-past-date {
	color: #595959 !important;
	background-color: #f7f7f7 !important;
	text-decoration: line-through;
}

.mphb-datepick-popup .datepick-month td .mphb-booked-date:not(.mphb-selectable-date) {
	background-image: repeating-linear-gradient(
		45deg, transparent, transparent 4px, rgba(0, 0, 0, .14) 4px, rgba(0, 0, 0, .14) 8px
	);
}

/* Beschikbare datums juist wél laten opvallen. */
.mphb-datepick-popup .datepick-month td a.mphb-selectable-date {
	background-color: #eef7e4 !important;
	color: #1d4d0f !important;
	font-weight: 600;
}

/* De gekozen incheckdatum moet zichtbaar blijven in de uitcheck-kalender. */
.mphb-datepick-popup .datepick-month td .mphb-check-in-date,
.mphb-datepick-popup .datepick-month td span.mphb-check-in-date {
	background-color: #3d7d1c !important;
	background-image: none !important;
	color: #fff !important;
	font-weight: 700;
}

/* [4] Aanraakvlakken en tekstgrootte. Was 32x32 px met 12px cijfers. */
.mphb-datepick-popup .datepick-month td a,
.mphb-datepick-popup .datepick-month td span {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100% !important;
	min-height: 44px;
	padding: 2px !important;
	font-size: 1rem !important;
	line-height: 1.2;
	border-radius: 4px;
}

.mphb-datepick-popup .datepick-month th {
	font-size: .9rem;
	padding: .35em 0;
}

/* De maand-/jaardropdowns braken af bij vergrote tekst ("20" i.p.v. "2026"). */
.mphb-datepick-popup .datepick-month-header {
	display: flex;
	flex-wrap: wrap;
	gap: .25em;
	align-items: center;
}

.mphb-datepick-popup .datepick-month-header select {
	width: auto !important;
	max-width: 100%;
	min-height: 44px;
	font-size: 1rem;
}

/* Zichtbare melding bij een geblokkeerde datum (gevuld door de JS). */
.dh-datepick-hint {
	order: -1;
	margin: 0;
	padding: .75em 1em;
	background: #fdf3d6;
	border-bottom: 1px solid #e6d08a;
	color: #4a3a0b;
	font-size: .95rem;
	line-height: 1.35;
}

.dh-datepick-hint:empty {
	display: none;
}

/* ------------------------------------------------------------------
 * [2] Mobiel: de popup als vast schermvullend paneel.
 *     Was position:absolute (scrolde van het scherm af) en 644px hoog
 *     terwijl een iPhone SE 568px viewport heeft.
 * ------------------------------------------------------------------ */
@media (max-width: 782px) {

	body.dh-datepick-open {
		overflow: hidden;
	}

	.datepick-popup {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		height: 100dvh !important;
		margin: 0 !important;
		z-index: 1000000000 !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		background: #fff;
	}

	.datepick-popup > .datepick {
		display: flex;
		flex-direction: column;
		width: 100% !important;
		min-height: 100%;
		border: 0 !important;
		border-radius: 0 !important;
		font-size: 100%;
		padding-bottom: 2rem;
	}

	/* Balk met Wissen/Sluiten naar boven en vastzetten. */
	.datepick-popup .datepick-ctrl {
		order: -2;
		position: sticky;
		top: 0;
		z-index: 5;
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: .25em .5em;
		float: none !important;
		width: auto !important;
		min-height: 56px;
		padding: .5em .75em !important;
		background: #fff !important;
		/* datepick zet hier standaard color:#fff; op onze witte balk
		 * zou de kop dan onzichtbaar zijn. */
		color: #1d1d1d !important;
		border-bottom: 1px solid #ddd;
		border-radius: 0 !important;
	}

	.datepick-popup .datepick-ctrl .datepick-cmd-clear {
		order: 1;
		margin-right: auto;
		flex: 0 0 auto;
		float: none !important;
		width: auto !important;
		min-height: 44px;
		display: inline-flex !important;
		align-items: center;
		padding: 0 .75em !important;
		font-size: 1rem;
		text-decoration: underline;
	}

	.datepick-popup .datepick-ctrl .datepick-cmd-close {
		order: 2;
		flex: 0 0 auto;
		float: none !important;
		width: auto !important;
		min-height: 44px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0 1.25em !important;
		background: #1d1d1d !important;
		color: #fff !important;
		border-radius: 6px;
		font-size: 1rem;
		font-weight: 600;
		text-align: center !important;
	}

	/* Titel van het paneel, zodat duidelijk is wát je kiest. */
	.datepick-popup .datepick-ctrl::before {
		order: 0;
		content: attr(data-dh-title);
		flex: 1 0 100%;
		padding: .2em .5em 0;
		font-weight: 700;
		font-size: 1rem;
		text-align: center;
	}

	.datepick-popup .datepick-nav {
		order: 0;
		float: none !important;
		width: auto !important;
		display: flex;
		align-items: center;
		min-height: 48px;
	}

	.datepick-popup .datepick-nav .datepick-cmd {
		min-height: 44px;
		height: auto !important;
		padding-top: .3em !important;
		padding-bottom: .3em !important;
	}

	/* Alleen de pijlknoppen: verberg de tekstpijl van datepick en laat het
	 * icoon van het thema staan. "Vandaag" houdt zijn label. */
	.datepick-popup .datepick-nav .datepick-cmd-prev,
	.datepick-popup .datepick-nav .datepick-cmd-next {
		font-size: 0 !important;
	}

	.datepick-popup .datepick-nav .datepick-cmd-prev::before,
	.datepick-popup .datepick-nav .datepick-cmd-next::before {
		font-size: 1.25rem;
	}

	.datepick-popup .datepick-month-row {
		order: 1;
		float: none !important;
		width: auto !important;
	}

	/* Twee maanden naast elkaar past niet; onder elkaar met volle breedte. */
	.datepick-popup .datepick-month {
		float: none !important;
		width: 100% !important;
		margin: 0 0 1.5em !important;
		border: 0 !important;
	}

	.datepick-popup .datepick-month table {
		width: 100%;
		table-layout: fixed;
	}
}