/**
 * Vragenlijst-pagina (page-vragenlijst.php).
 * Pagina-specifieke stijlen, gescoped onder .tmpl-vragenlijst zodat ze de
 * globale stijlen uit style.css niet raken. Basis (kleuren, fonts, .eyebrow,
 * grain) komt uit style.css.
 */

/* smalle kolom (homepage gebruikt .wrap op 1200px; hier een eigen container) */
.tmpl-vragenlijst .vl-wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; }

/* voortgangsbalk */
.tmpl-vragenlijst .progress {
	position: fixed; top: 0; left: 0; height: 3px; width: 0;
	background: linear-gradient(90deg, var(--moss-bright), var(--clay));
	z-index: 101; transition: width .3s;
}

/* intro */
.tmpl-vragenlijst .intro { padding: 140px 0 30px; }
.tmpl-vragenlijst .intro h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); margin-bottom: 18px; }
.tmpl-vragenlijst .intro h1 em { font-style: italic; color: var(--clay); }
.tmpl-vragenlijst .intro p { color: var(--muted); font-weight: 300; font-size: 1.05rem; max-width: 620px; }

/* formulier */
.tmpl-vragenlijst form { padding: 30px 0 120px; }
.tmpl-vragenlijst .group {
	margin-bottom: 18px; background: var(--bg-soft); border: 1px solid var(--line);
	border-radius: 6px 30px 6px 30px; padding: 30px 28px; transition: border-color .4s;
}
.tmpl-vragenlijst .group:focus-within { border-color: var(--moss); }
.tmpl-vragenlijst .group .gnum { font-family: 'Fraunces', serif; color: var(--clay); font-size: .95rem; margin-bottom: 4px; }
.tmpl-vragenlijst label { display: block; font-size: 1.08rem; margin-bottom: 6px; color: var(--paper); }
.tmpl-vragenlijst .hint { display: block; color: var(--muted); font-size: .86rem; font-weight: 300; margin-bottom: 14px; }
.tmpl-vragenlijst .req { color: var(--clay); }
.tmpl-vragenlijst input[type=text],
.tmpl-vragenlijst input[type=email],
.tmpl-vragenlijst input[type=url],
.tmpl-vragenlijst textarea,
.tmpl-vragenlijst select {
	width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
	color: var(--paper); font-family: 'Outfit', sans-serif; font-size: 1rem; padding: 13px 16px;
	transition: border-color .25s;
}
.tmpl-vragenlijst input:focus,
.tmpl-vragenlijst textarea:focus,
.tmpl-vragenlijst select:focus { outline: none; border-color: var(--moss-bright); }
.tmpl-vragenlijst textarea { min-height: 96px; resize: vertical; }
.tmpl-vragenlijst select {
	appearance: none; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239aa896' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center;
}
.tmpl-vragenlijst .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.tmpl-vragenlijst .chip { position: relative; }
.tmpl-vragenlijst .chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tmpl-vragenlijst .chip span {
	display: inline-block; padding: 9px 18px; border: 1px solid var(--line); border-radius: 30px;
	font-size: .9rem; color: var(--paper); transition: all .25s; cursor: pointer;
}
.tmpl-vragenlijst .chip input:checked + span { background: var(--clay-soft); border-color: var(--clay); color: var(--paper); }
.tmpl-vragenlijst .chip input:focus-visible + span { border-color: var(--moss-bright); }

/* knoppen (override op de globale .btn voor de inline-flex met icoon) */
.tmpl-vragenlijst .submit-row { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.tmpl-vragenlijst .btn {
	display: inline-flex; align-items: center; gap: 9px; padding: 15px 30px; border-radius: 40px;
	font-weight: 600; font-size: .98rem; cursor: pointer; border: 0; font-family: 'Outfit', sans-serif;
	transition: transform .3s, box-shadow .3s;
}
.tmpl-vragenlijst .btn-primary { background: var(--clay); color: #241006; }
.tmpl-vragenlijst .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(221,133,89,.3); }
.tmpl-vragenlijst .btn-ghost {
	background: transparent; border: 1px solid var(--line); color: var(--paper); padding: 14px 26px;
	border-radius: 40px; cursor: pointer; font-family: 'Outfit', sans-serif; font-size: .94rem; transition: border-color .3s;
}
.tmpl-vragenlijst .btn-ghost:hover { border-color: var(--moss-bright); }
.tmpl-vragenlijst .note { color: var(--muted); font-size: .85rem; font-weight: 300; margin-top: 16px; }
.tmpl-vragenlijst .back { color: var(--muted); font-size: .92rem; transition: color .25s; }
.tmpl-vragenlijst .back:hover { color: var(--paper); }

/* succes + samenvatting */
.tmpl-vragenlijst .done { display: none; padding: 140px 0 120px; text-align: center; }
.tmpl-vragenlijst .done.show { display: block; }
.tmpl-vragenlijst .done h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 16px; }
.tmpl-vragenlijst .done h2 em { font-style: italic; color: var(--clay); }
.tmpl-vragenlijst .done p { color: var(--muted); font-weight: 300; max-width: 540px; margin: 0 auto 28px; }
.tmpl-vragenlijst .promptbox {
	text-align: left; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px;
	padding: 24px; max-width: 640px; margin: 0 auto 20px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; color: var(--muted);
	white-space: pre-wrap; max-height: 280px; overflow: auto;
}
.tmpl-vragenlijst .err { display: none; color: var(--clay); font-size: .9rem; margin-top: 14px; }
.tmpl-vragenlijst .err.show { display: block; }

@media (max-width: 560px) {
	.tmpl-vragenlijst .intro { padding: 120px 0 20px; }
	.tmpl-vragenlijst .group { padding: 24px 20px; }
}