/* ------------------------------------------------------------------ */
/* Booking funnel (template-boekingsaanvraag.php, and embedded in the   */
/* Boeken page by template-request-dates.php)                           */
/* One column of at most 40rem, centred, with the summary aside on the  */
/* right from 64rem and as a collapsible bar on top below that. Every    */
/* colour, size and distance is a theme token; the calendar reuses the   */
/* booking popover markup and styles (booking.css).                     */
/* ------------------------------------------------------------------ */
.ew-funnel-body {
	background: var(--ew-color-bg);
}
.ew-funnel {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
	background: var(--ew-color-bg);
	color: var(--ew-color-text-primary);
}
/* Thin ink bar: logo left, breadcrumbs under it. */
.ew-funnel__bar {
	background: var(--ew-color-ink-900);
	color: var(--ew-color-paper-0);
	border-bottom: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-funnel__bar-row {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-1);
	padding-block: var(--ew-space-2);
}
.ew-funnel__logo {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: var(--ew-tap);
	color: inherit;
	text-decoration: none;
}
.ew-funnel__logo .custom-logo {
	width: auto;
	height: var(--ew-logo-h);
}
.ew-funnel__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ew-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ew-color-text-secondary);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-meta);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
}
.ew-funnel__crumbs li + li::before {
	content: "›";
	margin-inline-end: var(--ew-space-1);
	color: var(--ew-color-text-muted);
}
.ew-funnel__crumbs a {
	color: inherit;
	text-decoration: underline transparent;
	text-underline-offset: 0.3em;
	transition: text-decoration-color var(--ew-motion-duration-fast) var(--ew-motion-ease);
}
.ew-funnel__crumbs a:hover {
	text-decoration-color: var(--ew-color-brass);
}
.ew-funnel__crumbs [aria-current="page"] {
	color: var(--ew-color-paper-0);
}
/* Layout */
.ew-funnel__main {
	flex: 1 0 auto;
	padding-block: var(--ew-section-compact);
}
.ew-funnel__layout {
	display: grid;
	gap: var(--ew-space-5);
}
.ew-funnel__column {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-5);
	width: 100%;
	max-width: 40rem;
	margin-inline: auto;
}
/* The stepper: one line of labels on the paper, in the width of the form
   column, 40px above the row with the form and the overview (so their top
   edges still line up). A hairline under the labels carries the brass
   progress line that ends at the right edge of the active label. */
.ew-funnel__progress {
	order: -2;
	width: 100%;
	max-width: 40rem;
	margin-inline: auto;
	margin-bottom: calc(2.5rem - var(--ew-space-5));
}
@media (min-width: 64rem) {
	.ew-funnel__layout {
		grid-template-columns: minmax(0, 40rem) minmax(16rem, 19rem);
		justify-content: center;
		column-gap: var(--ew-space-6);
		align-items: start;
	}

	.ew-funnel__layout--single {
		grid-template-columns: minmax(0, 40rem);
	}

	.ew-funnel__progress {
		grid-column: 1 / -1;
		margin-inline: 0;
	}

	.ew-funnel__aside {
		position: sticky;
		top: var(--ew-space-4);
	}
}
.ew-funnel__steps {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ew-space-1) 2rem;
	margin: 0;
	padding: 0 0 var(--ew-space-2);
	list-style: none;
	color: var(--ew-color-ink-900);
	font-family: var(--ew-font-body);
	font-size: 0.8125rem;
	font-weight: var(--ew-weight-ui);
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}
/* The only difference between the states is the opacity of the ink. */
.ew-funnel__step-item {
	opacity: 0.3;
	transition: opacity 150ms var(--ew-motion-ease);
}
.ew-funnel__step-item.is-done {
	opacity: 0.55;
}
.ew-funnel__step-item.is-done:hover,
.ew-funnel__step-item.is-current {
	opacity: 1;
}
.ew-funnel__step-label {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: default;
}
button.ew-funnel__step-label {
	cursor: pointer;
}
.ew-funnel__step-label:focus-visible {
	outline: none;
	text-decoration: underline;
	text-decoration-thickness: var(--ew-border-width);
	text-decoration-color: var(--ew-color-ink-900);
	text-underline-offset: calc(2 * var(--ew-line));
}
.ew-funnel__steps-count {
	display: none;
	margin-inline-start: auto;
	font-variant-numeric: var(--ew-numeric) tabular-nums;
}
.ew-funnel__steps-line {
	position: relative;
	display: block;
	height: 1px;
	background: color-mix(in srgb, var(--ew-color-ink-900) 12%, transparent);
}
.ew-funnel__steps-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--ew-color-brass);
	transition: width calc(2 * var(--ew-motion-duration-fast)) var(--ew-motion-ease-out);
}
/* Tablet, when even two lines do not fit: only the active label and "3 / 4". */
.ew-funnel__progress.is-compact .ew-funnel__step-item:not(.is-current) {
	display: none;
}
.ew-funnel__progress.is-compact .ew-funnel__steps-count {
	display: inline-block;
}
/* Phone: the stepper is a sticky bar from edge to edge, the labels on one
   line that scrolls sideways when they do not fit (the scrollbar stays
   hidden, funnel.js scrolls the active label into view). The layout is a
   flex column here, because a sticky grid item cannot leave its own row.
   The negative top margin cancels the top padding while the bar is not
   stuck, so nothing moves compared to the stepper in the flow. */
@media (max-width: 47.99rem) {
	.ew-funnel__layout {
		display: flex;
		flex-direction: column;
	}

	.ew-funnel__progress {
		position: sticky;
		top: var(--ew-admin-bar-h);
		z-index: var(--ew-z-header);
		display: grid;
		/* One track that is never narrower than the bar and grows with the
		   labels: the hairline then runs under every label when scrolled. */
		grid-template-columns: minmax(max-content, 100%);
		width: auto;
		max-width: none;
		margin-top: calc(-1 * var(--ew-space-2));
		margin-inline: calc(-1 * var(--ew-gutter));
		padding-top: var(--ew-space-2);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		background: var(--ew-color-bg);
	}

	.ew-funnel__progress::-webkit-scrollbar {
		display: none;
	}

	.ew-funnel__steps {
		flex-wrap: nowrap;
		padding-inline: var(--ew-gutter);
		white-space: nowrap;
	}

	.ew-funnel__step-item {
		flex: none;
	}

	.ew-funnel__progress.is-compact .ew-funnel__step-item:not(.is-current) {
		display: list-item;
	}

	.ew-funnel__progress.is-compact .ew-funnel__steps-count {
		display: none;
	}
}
/* The admin bar stops being fixed below 600px (as for .ew-header). */
@media (max-width: 37.5rem) {
	.ew-funnel__progress {
		top: 0;
	}
}
/* The panel: the card that carries over from the homepage bar. */
.ew-funnel__panel {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-5);
	padding: var(--ew-card-padding);
	background: var(--ew-color-surface);
	border: var(--ew-border-width) solid var(--ew-color-border);
	border-radius: var(--ew-card-radius);
	box-shadow: var(--ew-shadow-card);
}
.ew-funnel__head {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-2);
}
.ew-funnel__title {
	margin: 0;
	font-size: var(--ew-text-heading-2);
}
.ew-funnel__title:focus-visible {
	outline-offset: calc(2 * var(--ew-line));
}
.ew-funnel__lede {
	margin: 0;
	max-width: var(--ew-measure-lead);
	color: var(--ew-color-text-secondary);
}
/* Entering a step: a short fade and slide. */
@keyframes ew-funnel-in {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}
.ew-funnel__step.is-entering {
	animation: ew-funnel-in var(--ew-motion-duration-normal) var(--ew-motion-ease);
}
/* The step body: one container per step, so it can move into its review
   block for inline editing and back. Same rhythm as the step itself. */
/* Step 1: dates and the inline calendar */
.ew-funnel__date {
	cursor: default;
}
/* The picker folds away once a stay is chosen; "Datums wijzigen" opens it. */
.ew-funnel__body,
.ew-funnel__step,
.ew-funnel__picker {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-4);
}
.ew-funnel__status {
	margin: 0;
	color: var(--ew-color-text-secondary);
	font-size: var(--ew-text-meta);
	font-weight: var(--ew-weight-medium);
}
.ew-funnel__calendar {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-3);
}
.ew-funnel__calendar .ew-booking__popover-calendar {
	display: grid;
	gap: var(--ew-space-4);
}
@media (min-width: 40rem) {
	.ew-funnel__calendar .ew-booking__popover-calendar--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.ew-funnel__calendar .ew-booking__grid {
	max-width: none;
}
.ew-funnel__stay {
	margin: 0;
	font-family: var(--ew-font-body);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
}
.ew-funnel__stay-nights {
	color: var(--ew-color-text-muted);
	font-weight: var(--ew-weight-medium);
}
.ew-funnel__price {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--ew-space-3);
	margin: 0;
}
.ew-funnel__price-label {
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
}
.ew-amount {
	font-family: var(--ew-font-numeric);
	font-weight: var(--ew-weight-medium);
	font-variant-numeric: var(--ew-numeric) tabular-nums;
}
.ew-funnel__price .ew-amount {
	font-size: var(--ew-text-heading-3);
}
/* Step 2: steppers */
.ew-funnel__stepper-field .ew-stepper {
	max-width: 12rem;
}
/* Step 3: fields */
.ew-funnel__steppers,
.ew-funnel__dates,
.ew-funnel__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ew-space-3);
}
.ew-funnel__field--email,
.ew-funnel__field--street,
.ew-funnel__field--remarks {
	grid-column: 1 / -1;
}
@media (max-width: 35.99rem) {
	.ew-funnel__fields,
	.ew-funnel__steppers,
	.ew-funnel__dates {
		grid-template-columns: minmax(0, 1fr);
	}
}
.ew-form .ew-funnel__select {
	width: 100%;
	min-height: var(--ew-field-height);
	padding: var(--ew-space-1) var(--ew-space-2);
	border: 0;
	border-bottom: var(--ew-border-width) solid var(--ew-color-border);
	border-radius: var(--ew-field-radius) var(--ew-field-radius) 0 0;
	background: color-mix(in srgb, var(--ew-color-text-primary) 4%, transparent);
	color: var(--ew-color-text-primary);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-body);
	font-weight: var(--ew-weight-medium);
	line-height: var(--ew-leading-ui);
}
.ew-form .ew-funnel__select:hover,
.ew-form .ew-funnel__select:focus-visible {
	background: color-mix(in srgb, var(--ew-color-text-primary) 8%, transparent);
	border-bottom-color: var(--ew-color-brass);
}
.ew-funnel__consent {
	gap: var(--ew-space-1);
}
.ew-funnel__check {
	display: flex;
	align-items: flex-start;
	gap: var(--ew-space-2);
	color: var(--ew-color-text-primary);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-medium);
	letter-spacing: 0;
	line-height: var(--ew-leading-ui);
	cursor: pointer;
}
.ew-funnel__check input {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.1rem 0 0;
	accent-color: var(--ew-color-brass);
}
.ew-funnel__check a {
	color: inherit;
	text-decoration-color: var(--ew-color-brass);
	text-underline-offset: 0.2em;
}
/* Honeypot: off screen for people, present for bots. */
.ew-funnel__trap {
	position: absolute;
	left: -200vw;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* Step 4: review blocks and costs */
.ew-funnel__review {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-3);
}
.ew-funnel__indication,
.ew-funnel__block {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-1);
	padding-top: var(--ew-space-3);
	border-top: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-funnel__block-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--ew-space-3);
}
.ew-funnel__block-title {
	margin: 0;
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
	color: var(--ew-color-text-muted);
}
.ew-funnel__block-change {
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ew-color-text-primary);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-meta);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	text-decoration: underline;
	text-decoration-color: var(--ew-color-brass);
	text-underline-offset: 0.3em;
	cursor: pointer;
}
.ew-funnel__block-change:hover {
	color: var(--ew-color-brass);
}
.ew-funnel__block-body {
	margin: 0;
	white-space: pre-line;
}
/* Inline editing: the step's own fields sit inside the block, on a light
   well, with one "Klaar" button. The page stays on the review step. */
.ew-funnel__block-editor {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-4);
	padding: var(--ew-space-3);
	background: color-mix(in srgb, var(--ew-color-text-primary) 4%, transparent);
	border-radius: var(--ew-radius-sm);
	animation: ew-funnel-in var(--ew-motion-duration-normal) var(--ew-motion-ease);
}
.ew-funnel__block.is-editing,
.ew-funnel__block-editor .ew-funnel__body {
	gap: var(--ew-space-3);
}
.ew-funnel__editor-actions {
	display: flex;
	justify-content: flex-end;
	margin: 0;
}
.ew-funnel__costs {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-2);
	padding-top: var(--ew-space-3);
	border-top: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-funnel__cost-rows > div.is-total dt {
	color: var(--ew-color-text-primary);
}
.ew-funnel__cost-rows dd,
.ew-funnel__summary-rows dd {
	font-variant-numeric: var(--ew-numeric) tabular-nums;
}
/* Navigation: Vorige as a text link, one primary button. */
.ew-funnel__nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--ew-space-4);
	padding-top: var(--ew-space-3);
	border-top: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-funnel__change-dates,
.ew-funnel__previous {
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.ew-funnel__next {
	position: relative;
}
.ew-funnel__next.is-sending {
	color: transparent;
}
.ew-funnel__next.is-sending::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.125rem;
	height: 1.125rem;
	border: var(--ew-line) solid var(--ew-button-primary-fg);
	border-right-color: transparent;
	border-radius: 50%;
	animation: ew-funnel-spin calc(1.5 * var(--ew-motion-duration-slow)) linear infinite;
}
@keyframes ew-funnel-spin {
	to {
		transform: rotate(360deg);
	}
}
/* Summary aside ("Je aanvraag") */
.ew-funnel__summary {
	background: var(--ew-color-surface);
	border: var(--ew-border-width) solid var(--ew-color-border);
	border-radius: var(--ew-card-radius);
	box-shadow: var(--ew-shadow-card);
}
.ew-funnel__summary-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--ew-space-2);
	min-height: var(--ew-tap);
	padding: var(--ew-space-2) var(--ew-space-3);
	list-style: none;
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	cursor: pointer;
}
/* Closed bar on a phone: arrival and departure on one line under the title. */
.ew-funnel__summary-dates {
	flex-basis: 100%;
	margin-top: var(--ew-space-1);
	color: var(--ew-color-text-muted);
	font-size: var(--ew-text-meta);
	font-weight: var(--ew-weight-medium);
	letter-spacing: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ew-funnel__summary-total {
	margin-inline-start: auto;
}
.ew-funnel__summary-caret {
	width: var(--ew-space-2);
	height: var(--ew-space-2);
	flex: none;
	transition: transform var(--ew-motion-duration-fast) var(--ew-motion-ease);
}
.ew-funnel__summary[open] .ew-funnel__summary-caret {
	transform: rotate(180deg);
}
.ew-funnel__summary-body {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-2);
	padding: 0 var(--ew-space-3) var(--ew-space-3);
}
.ew-funnel__price-hint,
.ew-funnel__deposit,
.ew-funnel__rules,
.ew-funnel__summary-empty {
	margin: 0;
	color: var(--ew-color-text-muted);
	font-size: var(--ew-text-meta);
	font-weight: var(--ew-weight-medium);
}
.ew-funnel__cost-rows > div.is-total,
.ew-funnel__summary-rows > div.is-total {
	border-top-color: var(--ew-color-text-primary);
}
@media (max-width: 63.99rem) {
	.ew-funnel__aside {
		order: -1;
	}
}
/* Embedded in the Boeken page: the same layout inside a regular section
   under the sticky site header, so the root is a plain block and the
   sticky parts (the summary aside from 64rem, the step bar below 48rem)
   sit below the header instead of under it. From 64rem the layout takes
   the page's twelve-column grid like the other sections (and the booking
   widget it replaces): step bar and panel in columns 1 to 7, the summary
   in 9 to 12, so the funnel is as wide as the page. */
.ew-funnel--embedded {
	display: block;
	min-height: 0;
	background: transparent;
}
@media (min-width: 64rem) {
	.ew-funnel__summary-head {
		cursor: default;
		pointer-events: none;
	}
	.ew-funnel__summary-caret {
		display: none;
	}
	.ew-funnel--embedded .ew-funnel__layout {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		justify-content: stretch;
		column-gap: var(--ew-gap);
	}
	.ew-funnel--embedded .ew-funnel__progress,
	.ew-funnel--embedded .ew-funnel__column {
		grid-column: 1 / 8;
		max-width: none;
	}
	.ew-funnel--embedded .ew-funnel__aside {
		grid-column: 9 / 13;
		top: calc(var(--ew-admin-bar-h) + var(--ew-header-h) + var(--ew-space-4));
	}
}
@media (max-width: 47.99rem) {
	.ew-funnel--embedded .ew-funnel__progress {
		top: calc(var(--ew-admin-bar-h) + var(--ew-header-h));
	}
}
@media (max-width: 37.5rem) {
	.ew-funnel--embedded .ew-funnel__progress {
		top: var(--ew-header-h);
	}
}
/* Thank-you page */
.ew-funnel__thanks {
	gap: var(--ew-space-4);
}
.ew-funnel__summary-empty[hidden],
.ew-funnel__summary-rows[hidden],
.ew-funnel__summary-head::-webkit-details-marker,
.ew-funnel__summary-dates[hidden],
.ew-funnel__summary[open] .ew-funnel__summary-dates,
.ew-funnel__previous[hidden],
.ew-funnel__submit-error:empty,
.ew-funnel__price-hint[hidden],
.ew-funnel__indication[hidden],
.ew-funnel__status:empty,
.ew-funnel__picker[hidden],
.ew-funnel__collapsed[hidden],
.ew-funnel__step[hidden],
.ew-funnel__overview[hidden] {
	display: none;
}
.ew-funnel__overview,
.ew-funnel__legend,
.ew-funnel__collapsed,
.ew-funnel__actions {
	margin: 0;
}
/* Footer line */
.ew-funnel__foot {
	padding-block: var(--ew-space-4);
	border-top: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-funnel__call {
	margin: 0;
	color: var(--ew-color-text-muted);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-medium);
	text-align: center;
}
.ew-funnel__call a {
	color: var(--ew-color-text-primary);
	font-weight: var(--ew-weight-ui);
	text-decoration-color: var(--ew-color-brass);
	text-underline-offset: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
	.ew-funnel__step-item,
	.ew-funnel__steps-fill {
		transition: none;
	}
	.ew-funnel__step.is-entering,
	.ew-funnel__block-editor,
	.ew-funnel__next.is-sending::after {
		animation-duration: var(--ew-motion-duration-fast);
	}
	.ew-funnel__next.is-sending::after {
		animation: none;
		border-right-color: var(--ew-button-primary-fg);
		opacity: 0.6;
	}
}