/* MindTravellers boekingswizard – huisstijl
   Kleuren en lettertypes zijn overgenomen van mindtravellers.com.
   Aanpassen kan via deze variabelen (bijv. in Elementor > Custom CSS). */
.mtbf-wizard {
	--mtbf-sage: #7D998D;          /* koppen, actieve stap, vrije plekken (zoals de site-koppen) */
	--mtbf-sage-soft: #E7EEEA;
	--mtbf-taupe: #7B756A;         /* knoppen (zoals "Nu boeken") */
	--mtbf-hover: #7D998D;         /* hoverkleur knoppen */
	--mtbf-ink: #222222;
	--mtbf-muted: #69727D;
	--mtbf-line: #E4E2DD;
	--mtbf-surface: #F9F9F9;
	--mtbf-taken: #D9D6CF;
	--mtbf-warn: #9A5B13;
	--mtbf-radius: 14px;
	--mtbf-display: "Sawarabi Mincho", Georgia, "Times New Roman", serif;
	--mtbf-text: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;

	max-width: 820px;
	margin: 0 auto;
	color: var(--mtbf-ink);
	font-family: var(--mtbf-text);
	font-size: 16px;
	line-height: 1.6;
}

.mtbf-wizard *,
.mtbf-wizard *::before,
.mtbf-wizard *::after { box-sizing: border-box; }

.mtbf-testflag {
	margin: 0 0 1.5rem;
	padding: .5rem .875rem;
	border: 1px dashed var(--mtbf-warn);
	border-radius: 999px;
	color: var(--mtbf-warn);
	font-size: .8125rem;
}

/* ---------- Stappen ---------- */
.mtbf-steps {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2rem;
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0 0 1.25rem;
	border-bottom: 1px solid var(--mtbf-line);
	font-size: .875rem;
	color: var(--mtbf-muted);
}
.mtbf-steps li { display: flex; align-items: center; gap: .625rem; margin: 0; }
.mtbf-steps span {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid var(--mtbf-line);
	font-family: var(--mtbf-display);
	font-size: .9375rem;
}
.mtbf-steps .is-current { color: var(--mtbf-ink); }
.mtbf-steps .is-current span { background: var(--mtbf-sage); border-color: var(--mtbf-sage); color: #fff; }
.mtbf-steps .is-done span { border-color: var(--mtbf-sage); color: var(--mtbf-sage); }

/* ---------- Koppen ---------- */
.mtbf-title {
	margin: 0 0 1.75rem;
	font-family: var(--mtbf-display);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--mtbf-sage);
	outline: none;
}

/* ---------- Stap 1: ceremonies ---------- */
.mtbf-programs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.mtbf-programs li { margin: 0; }
.mtbf-program {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.25rem 2rem;
	width: 100%;
	padding: 1.75rem 2rem;
	background: var(--mtbf-surface);
	border: 1px solid transparent;
	border-radius: var(--mtbf-radius);
	color: var(--mtbf-ink);
	font: inherit;
	line-height: 1.6;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;   /* het thema zet knoppen op nowrap */
	height: auto;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}
/* Extra voorrang: het thema maakt knoptekst bij hover wit */
.mtbf-wizard .mtbf-program:hover,
.mtbf-wizard .mtbf-program:focus { border-color: var(--mtbf-sage); background: #fff; color: var(--mtbf-ink); }
.mtbf-wizard .mtbf-program:hover .mtbf-wizard .mtbf-btn--ghost { background: var(--mtbf-hover); border-color: var(--mtbf-hover); color: #fff; }
.mtbf-program__body { display: grid; gap: .5rem; }
.mtbf-program__name {
	font-family: var(--mtbf-display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mtbf-sage);
}
.mtbf-program__desc { max-width: 58ch; color: var(--mtbf-ink); font-size: .9375rem; }
.mtbf-program__meta { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; font-size: .8125rem; color: var(--mtbf-muted); }
.mtbf-program__side { display: grid; justify-items: end; gap: .75rem; }
.mtbf-program__price { font-size: 1.0625rem; white-space: nowrap; color: var(--mtbf-ink); }
.mtbf-program__price small { font-size: .75rem; color: var(--mtbf-muted); }

/* ---------- Stap 2: datums ---------- */
.mtbf-month + .mtbf-month { margin-top: 2rem; }
.mtbf-month__title {
	margin: 0 0 .875rem;
	font-family: var(--mtbf-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--mtbf-ink);
	outline: none;
}
.mtbf-month__title::first-letter { text-transform: uppercase; }
.mtbf-datelist { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.mtbf-date {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem 1.75rem;
	margin: 0;
	padding: 1.125rem 1.5rem;
	background: #fff;
	border: 1px solid var(--mtbf-line);
	border-radius: var(--mtbf-radius);
}
.mtbf-date__when { display: grid; gap: .125rem; }
.mtbf-date__dates { font-weight: 500; }
.mtbf-date__dates::first-letter { text-transform: uppercase; }
.mtbf-date__times, .mtbf-date__label { font-size: .8125rem; color: var(--mtbf-muted); }
.mtbf-date__avail { display: grid; gap: .5rem; }
.mtbf-date__act { display: flex; align-items: center; gap: 1.25rem; justify-self: end; }
.mtbf-date__price { white-space: nowrap; }

.mtbf-date.is-few .mtbf-date__label { color: var(--mtbf-warn); font-weight: 500; }
.mtbf-date.is-full, .mtbf-date.is-closed { background: var(--mtbf-surface); border-color: transparent; }
.mtbf-date.is-full .mtbf-date__dates, .mtbf-date.is-closed .mtbf-date__dates { color: var(--mtbf-muted); font-weight: 400; }

/* Plekken als stippen */
.mtbf-seats { display: flex; flex-wrap: wrap; gap: 5px; }
.mtbf-seat { width: 9px; height: 9px; border-radius: 50%; background: var(--mtbf-sage); }
.mtbf-seat.is-taken { background: var(--mtbf-taken); }

.mtbf-wizard .mtbf-more {
	display: block;
	margin: 1.75rem auto 0;
	padding: .75rem 1.75rem;
	background: transparent;
	border: 1px solid var(--mtbf-taupe);
	border-radius: 999px;
	color: var(--mtbf-taupe);
	font: inherit;
	font-size: .875rem;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
}
.mtbf-wizard .mtbf-more:hover { background: var(--mtbf-hover); border-color: var(--mtbf-hover); color: #fff; }

/* ---------- Stap 3 ---------- */
.mtbf-choice {
	display: grid;
	gap: .25rem;
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--mtbf-sage-soft);
	border-radius: var(--mtbf-radius);
	outline: none;
}
.mtbf-choice__program { font-family: var(--mtbf-display); font-size: 1.375rem; font-weight: 600; color: var(--mtbf-ink); }
.mtbf-choice__date { color: var(--mtbf-ink); font-size: .9375rem; }
.mtbf-choice__date::first-letter { text-transform: uppercase; }

/* ---------- Knoppen ---------- */
.mtbf-wizard .mtbf-btn {
	display: inline-block;
	padding: .8125rem 1.75rem;
	background: var(--mtbf-taupe);
	color: #fff;
	border: 1px solid var(--mtbf-taupe);
	border-radius: 999px;
	font-family: var(--mtbf-text);
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.mtbf-wizard .mtbf-btn:hover { background: var(--mtbf-hover); border-color: var(--mtbf-hover); color: #fff; }
.mtbf-btn--ghost { background: transparent; color: var(--mtbf-taupe); }

.mtbf-wizard .mtbf-back {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	margin: 0 0 1.25rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--mtbf-taupe);
	font: inherit;
	font-size: .875rem;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-transform: none;
	cursor: pointer;
}
.mtbf-wizard .mtbf-back:hover,
.mtbf-wizard .mtbf-back:focus { color: var(--mtbf-hover); background: none; }

.mtbf-wizard :focus-visible { outline: 2px solid var(--mtbf-sage); outline-offset: 3px; border-radius: 6px; }
/* Koppen krijgen focus via script (voor schermlezers); daar geen zichtbaar kader. */
.mtbf-wizard [tabindex="-1"]:focus,
.mtbf-wizard [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

.mtbf-loading, .mtbf-empty { color: var(--mtbf-muted); }
.mtbf-error { color: #a12622; }
.mtbf-error ul { margin: 0 0 1rem 1.25rem; }

/* Intakeformulier: invoervelden in de stijl van de site */
.mtbf-intake input[type="text"],
.mtbf-intake input[type="email"],
.mtbf-intake input[type="tel"],
.mtbf-intake select,
.mtbf-intake textarea {
	width: 100%;
	padding: .75rem 1.125rem;
	border: 1px solid #69727D;
	border-radius: 25px;
	font-family: var(--mtbf-text);
	font-size: .9375rem;
	background: #fff;
}
.mtbf-intake textarea { border-radius: var(--mtbf-radius); min-height: 6rem; }
.mtbf-intake label { font-size: .9375rem; }

/* ---------- Mobiel ---------- */
@media (max-width: 680px) {
	.mtbf-program { grid-template-columns: 1fr; padding: 1.5rem; }
	.mtbf-program__side { justify-items: start; grid-auto-flow: column; align-items: center; justify-content: space-between; }
	.mtbf-date { grid-template-columns: 1fr; gap: .875rem; padding: 1.125rem; }
	.mtbf-date__act { justify-self: stretch; justify-content: space-between; }
	.mtbf-steps { gap: .5rem 1.25rem; font-size: .8125rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mtbf-program, .mtbf-btn { transition: none; }
}