/* ==========================================================================
   Nishidori Booking – wizard, samenvatting en prijslijst (v2.1)
   Gebruikt de huisstijl-variabelen uit nishidori-core.
   ========================================================================== */

.ndbk {
	--nd-creme-donker: #E8DFC9;
	--nd-wit: #FFFFFF;
	max-width: 1080px;
	margin: 0 auto;
	font-family: var(--nd-font-tekst, 'Comfortaa', sans-serif);
	color: var(--nd-bruin, #4A3428);
}

/* ---------------- stappenbalk ---------------- */
.ndbk-stappen {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	counter-reset: stap;
}
.ndbk-stappen li {
	flex: 1;
	counter-increment: stap;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 6px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .55);
	opacity: .55;
	transition: opacity .2s ease, background .2s ease;
}
.ndbk-stappen li::before { content: counter(stap) '. '; }
.ndbk-stappen li.is-actief { opacity: 1; background: var(--nd-roze, #F2B8CE); }
.ndbk-stappen li.is-gedaan { opacity: .85; background: rgba(242, 184, 206, .45); }

/* ---------------- layout ---------------- */
.ndbk-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 28px;
	align-items: start;
}
@media (max-width: 900px) {
	.ndbk-layout { grid-template-columns: 1fr; }
	.ndbk-samenvatting { position: static !important; }
}

/* ---------------- formulier ---------------- */
.ndbk-form {
	background: var(--nd-off-white, #FBF7EE);
	border-radius: 16px;
	padding: 30px 32px;
	box-shadow: 0 10px 34px rgba(74, 52, 40, .08);
}
.ndbk-stap { display: none; border: 0; margin: 0; padding: 0; }
.ndbk-stap.is-actief { display: block; }
.ndbk-kop {
	font-family: var(--nd-font-kop, 'Comfortaa', sans-serif);
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 6px;
	padding: 0;
}
.ndbk-sub { font-size: 13.5px; opacity: .75; margin: 0 0 20px; }

.ndbk-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .ndbk-rij { grid-template-columns: 1fr; } }
.ndbk-veld { margin-bottom: 18px; }
.ndbk-veld > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.ndbk-veld input[type="text"],
.ndbk-veld input[type="email"],
.ndbk-veld input[type="tel"],
.ndbk-veld input[type="number"],
.ndbk-veld input[type="date"],
.ndbk-veld select,
.ndbk-veld textarea {
	width: 100%;
	padding: 11px 14px;
	border: 2px solid var(--nd-creme-donker);
	border-radius: 10px;
	background: var(--nd-wit);
	font-family: inherit;
	font-size: 14px;
	color: inherit;
	transition: border-color .2s ease;
}
.ndbk-veld input:focus, .ndbk-veld select:focus, .ndbk-veld textarea:focus {
	outline: none;
	border-color: var(--nd-roze-fel, #F8A5C2);
}
.ndbk-hint { font-size: 12px; opacity: .65; margin: 6px 0 0; }

/* ---------------- soort-keuze ---------------- */
.ndbk-soorten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
@media (max-width: 640px) { .ndbk-soorten { grid-template-columns: 1fr; } }
.ndbk-soort input { position: absolute; opacity: 0; }
.ndbk-soort__kaart {
	display: block;
	height: 100%;
	border: 2px solid var(--nd-creme-donker);
	border-radius: 12px;
	padding: 13px 15px;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.ndbk-soort__kaart strong { display: block; font-family: var(--nd-font-kop); margin-bottom: 3px; }
.ndbk-soort__kaart span { font-size: 12.5px; line-height: 1.55; opacity: .75; }
.ndbk-soort input:checked + .ndbk-soort__kaart { border-color: var(--nd-roze-fel); background: #FDF3F7; }
.ndbk-soort input:focus-visible + .ndbk-soort__kaart { outline: 2px solid var(--nd-roze-fel); outline-offset: 2px; }

/* ---------------- ruimtes ---------------- */
.ndbk-ruimtes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .ndbk-ruimtes { grid-template-columns: 1fr; } }
.ndbk-ruimte input { position: absolute; opacity: 0; }
.ndbk-ruimte__kaart {
	display: block;
	height: 100%;
	border: 2px solid var(--nd-creme-donker);
	border-radius: 12px;
	padding: 16px 18px;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.ndbk-ruimte__kaart strong { display: block; font-family: var(--nd-font-kop); font-size: 17px; }
.ndbk-ruimte__sub, .ndbk-ruimte__cap { display: block; font-size: 12.5px; opacity: .72; line-height: 1.5; }
.ndbk-ruimte__cap { margin-top: 2px; }
.ndbk-ruimte__prijs { display: block; margin-top: 8px; font-weight: 700; font-size: 14px; color: var(--nd-terracotta, #C08A6E); }
.ndbk-ruimte__min { display: block; font-size: 12px; opacity: .6; }
.ndbk-ruimte input:checked + .ndbk-ruimte__kaart { border-color: var(--nd-roze-fel); background: #FDF3F7; transform: translateY(-2px); }
.ndbk-ruimte input:focus-visible + .ndbk-ruimte__kaart { outline: 2px solid var(--nd-roze-fel); outline-offset: 2px; }

/* ---------------- add-on (Secret Bar) ---------------- */
.ndbk-addon { display: block; }
.ndbk-addon input { position: absolute; opacity: 0; }
.ndbk-addon__kaart {
	display: block;
	border: 2px dashed var(--nd-terracotta, #C08A6E);
	border-radius: 12px;
	padding: 13px 16px;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
	background: rgba(192, 138, 110, .07);
}
.ndbk-addon__kaart strong { font-family: var(--nd-font-kop); }
.ndbk-addon__kaart span { font-size: 12.5px; opacity: .8; }
.ndbk-addon input:checked + .ndbk-addon__kaart { border-style: solid; border-color: var(--nd-roze-fel); background: #FDF3F7; }

/* ---------------- duur-chips ---------------- */
.ndbk-duren { display: flex; flex-wrap: wrap; gap: 8px; }
.ndbk-duur input { position: absolute; opacity: 0; }
.ndbk-duur span {
	display: inline-block;
	padding: 9px 16px;
	border: 2px solid var(--nd-creme-donker);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.ndbk-duur input:checked + span { border-color: var(--nd-roze-fel); background: #FDF3F7; }
.ndbk-duur input:focus-visible + span { outline: 2px solid var(--nd-roze-fel); outline-offset: 2px; }
#ndbk-uren-anders { margin-top: 10px; max-width: 160px; }

/* ---------------- starttijden ---------------- */
.ndbk-starts { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.ndbk-starttijd {
	padding: 9px 15px;
	border: 2px solid var(--nd-creme-donker);
	border-radius: 999px;
	background: var(--nd-wit);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: inherit;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.ndbk-starttijd:hover { border-color: var(--nd-roze); transform: translateY(-1px); }
.ndbk-starttijd.is-gekozen { border-color: var(--nd-roze-fel); background: var(--nd-roze, #F2B8CE); }

/* ---------------- schoonmaak-checkbox ---------------- */
.ndbk-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer; padding-top: 9px; }
.ndbk-check input { width: 18px; height: 18px; accent-color: var(--nd-roze-fel); flex: 0 0 auto; margin-top: 1px; }

/* ---------------- klanttype-schakel ---------------- */
.ndbk-schakel { display: flex; gap: 20px; flex-wrap: wrap; }
.ndbk-schakel label { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.ndbk-schakel small { opacity: .6; }
.ndbk-schakel input { accent-color: var(--nd-roze-fel); }

/* ---------------- opties (stap 2) ---------------- */
.ndbk-cat { border: 2px solid var(--nd-creme-donker); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.ndbk-cat summary {
	padding: 13px 16px;
	font-family: var(--nd-font-kop);
	font-weight: 700;
	cursor: pointer;
	background: rgba(242, 184, 206, .18);
	list-style: none;
}
.ndbk-cat summary::-webkit-details-marker { display: none; }
.ndbk-cat summary::after { content: '▾'; float: right; transition: transform .2s ease; }
.ndbk-cat:not([open]) summary::after { transform: rotate(-90deg); }
.ndbk-cat__items { padding: 6px 16px 12px; }
.ndbk-optie {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 0;
	border-bottom: 1px solid rgba(74, 52, 40, .08);
	cursor: pointer;
}
.ndbk-optie:last-child { border-bottom: 0; }
.ndbk-optie input { width: 18px; height: 18px; accent-color: var(--nd-roze-fel); flex: 0 0 auto; margin-top: 2px; }
.ndbk-optie__tekst { flex: 1; }
.ndbk-optie__tekst strong { display: block; font-size: 14px; }
.ndbk-optie__tekst span { display: block; font-size: 12.5px; opacity: .7; line-height: 1.5; }
.ndbk-optie__prijs { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--nd-terracotta, #C08A6E); }

/* ---------------- honeypot ---------------- */
.ndbk-web { position: absolute; left: -9999px; top: -9999px; }

/* ---------------- navigatie & meldingen ---------------- */
.ndbk-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 12px; }
.ndbk-privacy { font-size: 11.5px; opacity: .6; margin-top: 14px; line-height: 1.6; }
.ndbk-melding { padding: 13px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; }
.ndbk-melding--ok { background: #E7F3E7; border: 2px solid #9CC79C; }
.ndbk-melding--fout { background: #F9E8E8; border: 2px solid #DBA5A5; }

/* ---------------- samenvatting ---------------- */
.ndbk-samenvatting {
	background: var(--nd-off-white, #FBF7EE);
	border-radius: 16px;
	padding: 24px 26px;
	box-shadow: 0 10px 34px rgba(74, 52, 40, .08);
	position: sticky;
	top: 110px;
}
.ndbk-samenvatting h3 { font-family: var(--nd-font-kop); font-size: 17px; margin: 0 0 14px; }
.ndbk-samenvatting ul { list-style: none; margin: 0 0 16px; padding: 0; }
.ndbk-samenvatting li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 6px 0; border-bottom: 1px dashed rgba(74, 52, 40, .15); }
.ndbk-samenvatting li em { font-style: normal; font-weight: 700; white-space: nowrap; }
.ndbk-leeg { opacity: .55; border-bottom: 0 !important; }
.ndbk-totaalregel { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.ndbk-totaalregel--groot { font-size: 16px; padding-top: 8px; }
.ndbk-aanbetaling { margin-top: 8px; padding-top: 10px; border-top: 2px solid rgba(74, 52, 40, .15); color: var(--nd-terracotta, #C08A6E); font-weight: 700; }
.ndbk-ex-rij { opacity: .75; }
.ndbk-opaanvraag { font-size: 12px; opacity: .7; line-height: 1.6; }

/* ---------------- prijslijst ---------------- */
.ndbk-prijslijst { max-width: 860px; margin: 0 auto; font-family: var(--nd-font-tekst, 'Comfortaa', sans-serif); color: var(--nd-bruin, #4A3428); }
.ndbk-pl-blok {
	background: var(--nd-off-white, #FBF7EE);
	border-radius: 16px;
	padding: 26px 30px;
	margin-bottom: 22px;
	box-shadow: 0 10px 34px rgba(74, 52, 40, .07);
}
.ndbk-pl-blok h3 { font-family: var(--nd-font-kop); font-size: 19px; margin: 0 0 12px; }
.ndbk-pl-blok table { width: 100%; border-collapse: collapse; }
.ndbk-pl-blok td, .ndbk-pl-blok th { padding: 10px 6px; border-bottom: 1px dashed rgba(74, 52, 40, .15); font-size: 14px; vertical-align: top; text-align: left; }
.ndbk-pl-blok tr:last-child td { border-bottom: 0; }
.ndbk-pl-blok td:last-child { text-align: right; white-space: nowrap; font-weight: 700; }
.ndbk-pl-staffel td:last-child, .ndbk-pl-staffel th:last-child { text-align: left; white-space: normal; }
.ndbk-pl-staffel td, .ndbk-pl-staffel th { text-align: center; }
.ndbk-pl-staffel td:first-child, .ndbk-pl-staffel th:first-child { text-align: left; }
.ndbk-pl-tijd { display: block; font-size: 12px; font-weight: 400; opacity: .65; }
.ndbk-pl-noot { font-size: 12.5px; opacity: .7; text-align: center; }