/* Offermaat: alle kleuren, hoeken en fonts komen als CSS-variabelen uit de
   actieve blueprint. De stylesheet zelf is volledig merk-neutraal. */

:root {
	--kleur: #1c6c78;
	--accent: #ffc200;
	--tekst-op-accent: #1a1a1a;
	--hoeken: 12px;
	--font-kop: Georgia, serif;
	--font-ui: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
	--inkt: #22272b;
	--grijs: #667079;
	--lijn: #e3e7ea;
	--vlak: #f5f7f8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
	font-family: var(--font-ui);
	color: var(--inkt);
	background: var(--vlak);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Demo-balk (hoort niet bij het white-label product) ---------- */

.demo-balk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	background: #14181b;
	color: #e8ecef;
	font-size: 13px;
}

.demo-balk .demo-titel { font-weight: 700; letter-spacing: 0.2px; color: inherit; text-decoration: none; }
.demo-balk .demo-titel small { font-weight: 400; opacity: 0.65; margin-left: 6px; }

.demo-cta {
	background: #ffc945;
	color: #14181b;
	font-weight: 700;
	text-decoration: none;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 13px;
}

.demo-cta:hover { filter: brightness(1.05); }

#switcher { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.chip {
	border: 1px solid #3a4147;
	background: transparent;
	color: #e8ecef;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 13px;
	cursor: pointer;
}

.chip.actief { background: #e8ecef; color: #14181b; border-color: #e8ecef; font-weight: 600; }
.chip small { font-weight: 400; opacity: 0.65; font-size: 11.5px; }

#toon-blueprint {
	border: none;
	background: none;
	color: #9fb3bd;
	text-decoration: underline;
	cursor: pointer;
	font-size: 13px;
}

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

/* Mobiel: demo-balk compact, chips in één scrollbare rij */
@media (max-width: 720px) {
	.demo-balk { padding: 8px 12px; gap: 8px; }
	.demo-balk .demo-titel small { display: none; }
	#toon-blueprint { display: none; }
	.demo-cta { margin-left: auto; padding: 6px 12px; font-size: 12.5px; }
	#switcher {
		order: 3;
		width: 100%;
		margin-left: 0;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	#switcher::-webkit-scrollbar { display: none; }
	.chip { flex: none; white-space: nowrap; }
}

/* ---------- Site van het (fictieve) bedrijf ---------- */

.pagina { max-width: 860px; margin: 0 auto; padding: 28px 18px 80px; }

#hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 26px;
}

.hero-tekst { min-width: 0; }

.hero-foto {
	width: 280px;
	height: 200px;
	object-fit: cover;
	border-radius: var(--hoeken);
	box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.45);
	flex: none;
}

@media (max-width: 760px) {
	.hero-foto { display: none; }
}

.merk { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }

.logo-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--hoeken);
	background: var(--kleur);
	color: #fff;
	font-weight: 800;
	font-size: 17px;
	letter-spacing: 0.5px;
	flex: none;
}

.merk strong { display: block; font-size: 16px; }
.merk small { color: var(--grijs); }

#hero h1 {
	font-family: var(--font-kop);
	font-size: clamp(26px, 4.5vw, 38px);
	line-height: 1.15;
	color: var(--kleur);
	margin-bottom: 10px;
}

#hero p { color: var(--grijs); max-width: 560px; }

/* ---------- Voortgang ---------- */

.voortgang {
	display: flex;
	gap: 4px;
	list-style: none;
	margin-bottom: 26px;
	font-size: 12.5px;
	color: var(--grijs);
	flex-wrap: wrap;
}

.voortgang li { display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; }

.voortgang span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--lijn);
	font-weight: 700;
	font-size: 11.5px;
}

.voortgang .nu { color: var(--inkt); font-weight: 600; }
.voortgang .nu span { background: var(--accent); color: var(--tekst-op-accent); }
.voortgang .klaar span { background: var(--kleur); color: #fff; }

h2 { font-family: var(--font-kop); font-size: 22px; margin-bottom: 18px; }

/* ---------- Stap 1: pakketten ---------- */

.pakket-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
}

.pakket-kaart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 20px 18px;
	background: #fff;
	border: 2px solid var(--lijn);
	border-radius: var(--hoeken);
	cursor: pointer;
	text-align: left;
	font: inherit;
	transition: border-color 0.15s, transform 0.15s;
}

.pakket-kaart:hover { border-color: var(--kleur); transform: translateY(-2px); }
.pakket-icon { font-size: 30px; }
.pakket-kaart strong { font-size: 16px; }
.pakket-kaart small { color: var(--grijs); }
.pakket-kaart em {
	font-style: normal;
	margin-top: 6px;
	font-weight: 700;
	color: var(--kleur);
	font-size: 14px;
}

/* ---------- Stap 2: vragen ---------- */

.vragen { display: flex; flex-direction: column; gap: 14px; }

.vraag {
	background: #fff;
	border: 1px solid var(--lijn);
	border-radius: var(--hoeken);
	padding: 18px;
}

.vraag > label { display: block; font-weight: 600; margin-bottom: 12px; }
.vraag > label small { display: block; font-weight: 400; color: var(--grijs); font-size: 13px; margin-top: 2px; }

.stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--lijn); border-radius: var(--hoeken); overflow: hidden; }

.stepper button {
	width: 46px;
	height: 44px;
	border: none;
	background: var(--vlak);
	font-size: 22px;
	cursor: pointer;
	color: var(--kleur);
	font-weight: 700;
}

.stepper button:hover { background: var(--lijn); }
.stepper output { min-width: 72px; text-align: center; font-weight: 700; font-size: 17px; }

.keuze-groep { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }

.keuze {
	padding: 12px 14px;
	border: 2px solid var(--lijn);
	border-radius: var(--hoeken);
	background: #fff;
	cursor: pointer;
	text-align: left;
	font: inherit;
}

.keuze small { display: block; color: var(--grijs); font-size: 12.5px; margin-top: 2px; }
.keuze.actief { border-color: var(--kleur); background: color-mix(in srgb, var(--kleur) 7%, #fff); }
.keuze.actief strong { color: var(--kleur); }

.vraag-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vraag-toggle > label { margin-bottom: 0; }

.toggle {
	flex: none;
	width: 56px;
	height: 32px;
	border-radius: 999px;
	border: none;
	background: var(--lijn);
	position: relative;
	cursor: pointer;
	transition: background 0.15s;
}

.toggle span {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: left 0.15s;
}

.toggle.aan { background: var(--kleur); }
.toggle.aan span { left: 28px; }

.vrije-tekst {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--lijn);
	border-radius: calc(var(--hoeken) / 1.5);
	font: inherit;
	resize: vertical;
}

.vrije-tekst:focus { outline: 2px solid var(--kleur); border-color: var(--kleur); }

.foto-vak {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border: 2px dashed var(--lijn);
	border-radius: var(--hoeken);
	cursor: pointer;
	color: var(--grijs);
	font-weight: 600;
	font-size: 14px;
}

.foto-vak:hover { border-color: var(--kleur); color: var(--kleur); }
.foto-vak input { display: none; }

.foto-namen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.foto-chip {
	background: var(--vlak);
	border: 1px solid var(--lijn);
	border-radius: 999px;
	padding: 3px 11px;
	font-size: 12.5px;
	color: var(--grijs);
}

/* ---------- Prijsbalk en knoppen ---------- */

.prijsbalk {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 18px;
	padding: 14px 18px;
	background: var(--kleur);
	color: #fff;
	border-radius: var(--hoeken);
}

.prijsbalk span { font-size: 13px; opacity: 0.85; }
.prijsbalk strong { font-size: 20px; }

.knoppen { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.knop-verder, .knop-terug, .knop-opnieuw {
	padding: 13px 22px;
	border-radius: var(--hoeken);
	border: none;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.knop-verder { background: var(--accent); color: var(--tekst-op-accent); }
.knop-verder:hover { filter: brightness(0.95); }
.knop-terug, .knop-opnieuw { background: #fff; border: 1px solid var(--lijn); color: var(--inkt); }

/* ---------- Stap 3: gegevens ---------- */

.gegevens { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: #fff; border: 1px solid var(--lijn); border-radius: var(--hoeken); padding: 18px; }
.gegevens label { font-weight: 600; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }

.gegevens input {
	padding: 11px 12px;
	border: 1px solid var(--lijn);
	border-radius: calc(var(--hoeken) / 1.5);
	font: inherit;
}

.gegevens input:focus { outline: 2px solid var(--kleur); border-color: var(--kleur); }
.gegevens input.fout { border-color: #c8102e; outline: 2px solid #c8102e33; }
.gegevens .privacy { grid-column: 1 / -1; color: var(--grijs); font-size: 12.5px; }

@media (max-width: 560px) {
	.gegevens { grid-template-columns: 1fr; }
}

/* ---------- Stap 4: offerte ---------- */

.offerte {
	background: #fff;
	border: 1px solid var(--lijn);
	border-radius: var(--hoeken);
	padding: 30px;
}

.offerte-kop { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 3px solid var(--kleur); padding-bottom: 18px; margin-bottom: 18px; }
.offerte-kop .merk { margin-bottom: 0; }
.offerte-meta { text-align: right; }
.offerte-meta h2 { margin-bottom: 4px; color: var(--kleur); }
.offerte-meta small { display: block; color: var(--grijs); font-size: 12.5px; }

.klantblok { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; font-size: 14px; color: var(--grijs); }
.klantblok strong { color: var(--inkt); font-size: 15px; }

.offerte-inleiding { margin-bottom: 16px; }

.offerte-tabel { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 14px; }
.offerte-tabel thead th { text-align: left; }
.offerte-tabel thead tr:first-child th {
	font-family: var(--font-kop);
	font-size: 16px;
	color: var(--kleur);
	padding: 10px 8px 6px;
	border-bottom: 2px solid var(--kleur);
}
.offerte-tabel .kolommen th { color: var(--grijs); font-size: 12px; font-weight: 600; padding: 8px; border-bottom: 1px solid var(--lijn); }
.offerte-tabel td { padding: 8px; border-bottom: 1px solid var(--lijn); }
.offerte-tabel td:last-child, .offerte-tabel .kolommen th:last-child { text-align: right; }
.offerte-tabel tfoot td { color: var(--grijs); }
.offerte-tabel tfoot td:first-child { text-align: right; }
.offerte-tabel .totaal td { font-weight: 800; color: var(--inkt); font-size: 15px; border-top: 2px solid var(--inkt); border-bottom: none; }

.offerte-extra { font-size: 13.5px; margin-bottom: 10px; color: var(--inkt); }

.btw-toelichting, .voorwaarden { font-size: 12.5px; color: var(--grijs); margin-bottom: 10px; }
.voettekst { font-size: 14px; margin-top: 14px; }

.demo-notitie { margin-top: 14px; font-size: 12.5px; color: var(--grijs); text-align: center; }

/* ---------- Blueprint-modal ---------- */

#blueprint-modal {
	border: none;
	border-radius: 12px;
	padding: 0;
	width: min(720px, 92vw);
	max-height: 84vh;
}

#blueprint-modal::backdrop { background: rgba(10, 14, 16, 0.55); }

#blueprint-modal .modal-kop {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: #14181b;
	color: #e8ecef;
	position: sticky;
	top: 0;
}

#blueprint-modal .modal-kop small { opacity: 0.7; display: block; }
#blueprint-modal .sluit { background: none; border: 1px solid #3a4147; color: #e8ecef; border-radius: 8px; padding: 5px 12px; cursor: pointer; }
#blueprint-modal pre { padding: 18px; font-size: 12px; line-height: 1.5; overflow: auto; }

/* Mobiel: compactere voortgang, pagina en offerte */
@media (max-width: 560px) {
	.pagina { padding: 20px 14px 60px; }
	.voortgang { font-size: 11.5px; gap: 2px; }
	.voortgang li { padding: 3px 6px 3px 2px; gap: 5px; }
	.voortgang span { width: 19px; height: 19px; font-size: 10.5px; }
	.offerte { padding: 18px 14px; }
	.offerte-tabel { font-size: 12.5px; }
	.offerte-tabel td, .offerte-tabel .kolommen th { padding: 7px 5px; }
	.offerte-meta { text-align: left; }
	.prijsbalk strong { font-size: 17px; }
}

/* ---------- Print: alleen de offerte ---------- */

@media print {
	body { background: #fff; }
	.demo-balk, #hero, .voortgang, .niet-printen { display: none !important; }
	.pagina { max-width: none; padding: 0; }
	.offerte { border: none; border-radius: 0; padding: 0; }
}