/* ------------------------------------------------------------------
 * Duinhilletje - periodekiezer
 * Hoort bij period-picker.js. Zie datepicker-mobile.css voor het paneel.
 * ------------------------------------------------------------------ */

/* Samenvatting van de gekozen periode, onder de twee datumvelden. */
.dh-period {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em 1em;
	margin: 0 0 1.5em;
	width: 100%;
	padding: .85em 1em;
	background: #eef7e4;
	border-left: 3px solid #3d7d1c;
	border-radius: 3px;
	line-height: 1.4;
}

/* display:flex op de class hierboven verslaat de browserstandaard
 * [hidden]{display:none} - zonder deze regel blijft een leeg blok staan. */
.dh-period[hidden] {
	display: none;
}

/* Op het zoekformulier staat het blok binnen dezelfde <p> als het
 * uitcheckveld en plakt het er dus tegenaan. Op de chaletpagina volgt het
 * op een <p> die zelf al ondermarge heeft; daar zou extra ruimte dubbelop
 * zijn. Vandaar alleen ruimte als het blok direct op een veld volgt. */
input + .dh-period {
	margin-top: 1.5em;
}

/* Nog geen vertrekdatum: dit is een aansporing, geen bevestiging. */
.dh-period--partial {
	background: #fdf3d6;
	border-left-color: #b08900;
}

.dh-period__text {
	flex: 1 1 12em;
	font-weight: 600;
	color: #1d4d0f;
}

.dh-period--partial .dh-period__text {
	color: #4a3a0b;
}

.dh-period__change {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 1em;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 4px;
	color: #1d4d0f;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.dh-period--partial .dh-period__change {
	color: #4a3a0b;
}

.dh-period__change:hover,
.dh-period__change:focus-visible {
	background: rgba( 0, 0, 0, .06 );
}

/* Regel onder de kop van het paneel: waar is de gast in de keuze.
 * De kop zelf (::before) komt uit datepicker-mobile.css. */
@media (max-width: 782px) {

	.datepick-popup .datepick-ctrl[data-dh-sub]::after {
		order: 1;
		content: attr(data-dh-sub);
		flex: 1 0 100%;
		padding: 0 .5em .2em;
		color: #4f4a3f;
		font-size: .85rem;
		font-weight: 400;
		line-height: 1.3;
		text-align: center;
	}

	/* De knoppen staan na de kop en de subregel. */
	.datepick-popup .datepick-ctrl .datepick-cmd-clear {
		order: 2;
	}

	.datepick-popup .datepick-ctrl .datepick-cmd-close {
		order: 3;
	}
}