/* 2C Zaalkiezer 1.0.0
 * Kleuren en lettertypes aanpassen? Overschrijf de variabelen hieronder in het childthema, bijv.
 * .c2zk { --c2zk-groen: #1E4D3A; }
 */
.c2zk {
	--c2zk-groen: #1E4D3A;
	--c2zk-groen-licht: #EEF4EF;
	--c2zk-olijf: #5E6B2A;
	--c2zk-olijf-licht: #EEF1E2;
	--c2zk-olijf-tekst: #4E5A22;
	--c2zk-tekst: #1B241F;
	--c2zk-grijs: #56605A;
	--c2zk-rand: #DDE3D6;
	--c2zk-rand-donker: #C9D1C0;
	--c2zk-vlak: #F7F8F4;
	--c2zk-foto: #D7DCCD;
	--c2zk-ok: #2E6B47;
	--c2zk-niet: #9A4B2B;
	--c2zk-wit: #FFFFFF;
	--c2zk-kop-font: inherit;
	--c2zk-radius: 16px;

	box-sizing: border-box;
	color: var(--c2zk-tekst);
	background: var(--c2zk-wit);
	border: 1px solid var(--c2zk-rand);
	border-radius: var(--c2zk-radius);
	box-shadow: 0 24px 48px -30px rgba(27, 36, 31, .45);
	overflow: hidden;
	font-size: 17px;
	line-height: 1.55;
	text-align: left;
}
.c2zk *, .c2zk *::before, .c2zk *::after { box-sizing: border-box; }
.c2zk p { padding: 0; }
.c2zk img { max-width: 100%; }

.c2zk .c2zk-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Knoppen: Divi-stijlen neutraliseren */
.c2zk button {
	-webkit-appearance: none; appearance: none;
	font: inherit; color: inherit; letter-spacing: normal; text-transform: none;
	margin: 0; cursor: pointer; text-shadow: none; line-height: 1.3;
}
.c2zk button::after, .c2zk button::before { content: none !important; }
.c2zk button:focus-visible, .c2zk a:focus-visible, .c2zk .c2zk-naam:focus-visible {
	outline: 3px solid var(--c2zk-olijf); outline-offset: 2px;
}
.c2zk .c2zk-naam:focus:not(:focus-visible) { outline: none; }

/* ---------- Vragen ---------- */
.c2zk-vragen { padding: 28px; display: flex; flex-direction: column; gap: 28px; }
.c2zk-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.c2zk .c2zk-titel { margin: 0; padding: 0; font-family: var(--c2zk-kop-font); font-weight: 800; font-size: 28px; line-height: 1.2; color: var(--c2zk-tekst); }
.c2zk .c2zk-intro { margin: 4px 0 0; color: var(--c2zk-grijs); font-size: 16px; }
.c2zk .c2zk-reset {
	background: var(--c2zk-wit); color: var(--c2zk-groen); border: 1px solid var(--c2zk-rand-donker);
	border-radius: 8px; padding: 10px 16px; min-height: 44px; font-weight: 700; font-size: 14px;
}
.c2zk .c2zk-reset:hover { border-color: var(--c2zk-groen); }
.c2zk-stappen { display: flex; flex-direction: column; gap: 28px; }
.c2zk-stap { margin: 0; padding: 0; border: 0; min-width: 0; }
.c2zk .c2zk-legend { padding: 0; margin: 0 0 12px; font-family: var(--c2zk-kop-font); font-weight: 700; font-size: 17px; color: var(--c2zk-tekst); }
.c2zk-nr {
	display: inline-flex; width: 28px; height: 28px; margin-right: 10px; border-radius: 999px;
	background: var(--c2zk-groen); color: var(--c2zk-wit); font-size: 14px; align-items: center; justify-content: center; vertical-align: middle;
}
.c2zk-legend-extra { font-weight: 400; font-size: 15px; color: var(--c2zk-grijs); }
.c2zk-rij { display: flex; flex-wrap: wrap; gap: 28px 40px; }
.c2zk-stap-groep { flex: 1 1 340px; }
.c2zk-stap-wensen { flex: 2 1 420px; }

.c2zk-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.c2zk .c2zk-tegel {
	display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
	padding: 16px; border-radius: 12px; min-height: 44px;
	background: var(--c2zk-wit); border: 1px solid var(--c2zk-rand); color: var(--c2zk-tekst);
	transition: border-color .15s, background-color .15s;
}
.c2zk .c2zk-tegel:hover { border-color: var(--c2zk-groen); }
.c2zk .c2zk-tegel[aria-pressed="true"] { background: var(--c2zk-groen-licht); border-color: var(--c2zk-groen); box-shadow: inset 0 0 0 1px var(--c2zk-groen); }
.c2zk-tegel-icoon { color: var(--c2zk-groen); stroke-width: 1.8; }
.c2zk-tegel-label { font-family: var(--c2zk-kop-font); font-weight: 700; font-size: 16px; line-height: 1.25; }
.c2zk-tegel-hint { font-size: 14px; color: var(--c2zk-grijs); line-height: 1.35; }

.c2zk-segment {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
	background: var(--c2zk-rand-donker); border: 1px solid var(--c2zk-rand-donker); border-radius: 10px; overflow: hidden;
}
.c2zk .c2zk-seg {
	border: 0; border-radius: 0; padding: 10px 8px; min-height: 60px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center;
	background: var(--c2zk-wit); color: var(--c2zk-tekst);
}
.c2zk .c2zk-seg:hover { background: var(--c2zk-groen-licht); }
.c2zk .c2zk-seg[aria-pressed="true"] { background: var(--c2zk-groen); color: var(--c2zk-wit); }
.c2zk-seg-label { font-family: var(--c2zk-kop-font); font-weight: 700; font-size: 15px; }
.c2zk-seg-hint { font-size: 13px; color: var(--c2zk-grijs); }
.c2zk .c2zk-seg[aria-pressed="true"] .c2zk-seg-hint { color: #D3DED6; }

.c2zk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.c2zk .c2zk-chip {
	display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 999px; min-height: 44px;
	background: var(--c2zk-wit); border: 1px solid var(--c2zk-rand-donker); color: var(--c2zk-tekst); font-size: 15px;
}
.c2zk .c2zk-chip:hover { border-color: var(--c2zk-groen); }
.c2zk .c2zk-chip[aria-pressed="true"] { background: var(--c2zk-groen-licht); border-color: var(--c2zk-groen); font-weight: 600; }
.c2zk-vinkje {
	flex: none; width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
	background: var(--c2zk-wit); border: 1.5px solid #8A958C; color: transparent;
}
.c2zk-vinkje svg { stroke-width: 3.5; }
.c2zk .c2zk-chip[aria-pressed="true"] .c2zk-vinkje { background: var(--c2zk-groen); border-color: var(--c2zk-groen); color: var(--c2zk-wit); }

/* ---------- Resultaat ---------- */
.c2zk-resultaat {
	background: var(--c2zk-vlak); border-top: 1px solid var(--c2zk-rand);
	padding: 28px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start;
}
.c2zk-gekozen {
	flex: 3 1 600px; min-width: 0; background: var(--c2zk-wit); border: 2px solid var(--c2zk-olijf);
	border-radius: 14px; overflow: hidden; display: flex; flex-wrap: wrap;
}
.c2zk-foto { flex: 1 1 100%; aspect-ratio: 16 / 9; min-height: 0; position: relative; background: var(--c2zk-foto); }
.c2zk-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.c2zk-foto-leeg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--c2zk-grijs); font-size: 14px; }
.c2zk-info { flex: 1 1 320px; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.c2zk .c2zk-naam { margin: 0; padding: 0; font-family: var(--c2zk-kop-font); font-weight: 800; font-size: 26px; line-height: 1.2; color: var(--c2zk-tekst); }
.c2zk .c2zk-omschrijving { margin: 6px 0 0; color: var(--c2zk-grijs); font-size: 16px; }

.c2zk-badge {
	align-self: flex-start; display: inline-block; font-weight: 600; letter-spacing: .04em; border-radius: 999px;
	font-size: 13px; padding: 4px 12px; background: #F1F2EE; color: var(--c2zk-grijs);
}
.c2zk-badge.is-klein { font-size: 12px; padding: 2px 8px; }
.c2zk-badge.is-best { background: var(--c2zk-olijf); color: var(--c2zk-wit); }
.c2zk-badge.is-goed { background: var(--c2zk-olijf-licht); color: var(--c2zk-olijf-tekst); }

.c2zk .c2zk-feiten { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; font-size: 15px; }
.c2zk .c2zk-feiten div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c2zk .c2zk-feiten dt { color: var(--c2zk-grijs); font-size: 13px; font-weight: 400; margin: 0; }
.c2zk .c2zk-feiten dd { margin: 0; font-weight: 600; line-height: 1.35; }

.c2zk .c2zk-label { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c2zk-olijf); }
.c2zk-cap { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.c2zk-cap-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--c2zk-vlak); border: 1px solid var(--c2zk-rand); }
.c2zk-cap-item span { font-size: 13px; color: var(--c2zk-grijs); }
.c2zk-cap-item strong { font-family: var(--c2zk-kop-font); font-weight: 800; font-size: 20px; line-height: 1.1; }
.c2zk-cap-item.is-actief { background: var(--c2zk-groen); border-color: var(--c2zk-groen); color: var(--c2zk-wit); }
.c2zk-cap-item.is-actief span { color: #D3DED6; }

.c2zk .c2zk-redenen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.c2zk .c2zk-redenen li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.c2zk .c2zk-redenen li::before { content: none; }
.c2zk-reden-icoon { flex: none; margin-top: 3px; stroke-width: 2.5; }
.c2zk-redenen .is-ok .c2zk-reden-icoon { color: var(--c2zk-ok); }
.c2zk-redenen .is-niet { color: var(--c2zk-grijs); }
.c2zk-redenen .is-niet .c2zk-reden-icoon { color: var(--c2zk-niet); }

.c2zk-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.c2zk-tag { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--c2zk-olijf-licht); color: var(--c2zk-olijf-tekst); }
.c2zk .c2zk-notitie { margin: 0; font-size: 14px; color: var(--c2zk-grijs); }

.c2zk-acties { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding-top: 4px; }
.c2zk .c2zk-knop {
	background: var(--c2zk-groen); color: var(--c2zk-wit); text-decoration: none; font-family: var(--c2zk-kop-font);
	font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center;
}
.c2zk .c2zk-knop:hover { background: #143628; color: var(--c2zk-wit); }
.c2zk .c2zk-link {
	color: var(--c2zk-groen); font-family: var(--c2zk-kop-font); font-weight: 700; font-size: 15px;
	text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
}
.c2zk .c2zk-link:hover { text-decoration: underline; }

.c2zk-anders { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.c2zk-anders .c2zk-label { margin-bottom: 2px; }
.c2zk .c2zk-ander {
	display: flex; gap: 12px; align-items: center; text-align: left; width: 100%;
	background: var(--c2zk-wit); border: 1px solid var(--c2zk-rand); border-radius: 12px; padding: 10px; min-height: 44px; color: var(--c2zk-tekst);
}
.c2zk .c2zk-ander:hover { border-color: var(--c2zk-groen); }
.c2zk-ander-foto { flex: none; width: 76px; height: 58px; border-radius: 8px; overflow: hidden; background: var(--c2zk-foto); display: block; }
.c2zk-ander-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c2zk-ander-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.c2zk-ander-naam { font-family: var(--c2zk-kop-font); font-weight: 700; font-size: 15px; line-height: 1.25; }
.c2zk-ander-meta { font-size: 14px; color: var(--c2zk-grijs); }
.c2zk .c2zk-twijfel { margin: 6px 0 0; font-size: 15px; color: var(--c2zk-grijs); }
.c2zk .c2zk-twijfel a { color: var(--c2zk-groen); font-weight: 600; }

.c2zk-fallback { margin: 0; padding-left: 1.2em; }

/* ---------- Mobiel ---------- */
@media (max-width: 600px) {
	.c2zk-vragen, .c2zk-resultaat { padding: 20px 16px; }
	.c2zk .c2zk-titel { font-size: 23px; }
	.c2zk-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.c2zk .c2zk-tegel { padding: 12px; }
	.c2zk-tegel-hint { display: none; }
	.c2zk-foto { aspect-ratio: 4 / 3; }
	.c2zk-info { padding: 20px 16px; }
	.c2zk .c2zk-naam { font-size: 22px; }
	.c2zk .c2zk-feiten { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.c2zk * { transition: none !important; }
}

/* Datumkiezer bij de aanvraag (1.1.0) */
.c2zk-aanvraag { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; border-top: 1px solid var(--c2zk-rand); }
.c2zk-datum { display: flex; flex-direction: column; gap: 6px; max-width: 340px; }
.c2zk .c2zk-datum label { display: block; margin: 0; }
.c2zk .c2zk-datum-invoer {
	-webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; min-height: 48px; margin: 0;
	padding: 10px 14px; font: inherit; font-size: 16px; color: var(--c2zk-tekst);
	background: var(--c2zk-wit); border: 1px solid var(--c2zk-rand-donker); border-radius: 10px;
}
.c2zk .c2zk-datum-invoer:hover { border-color: var(--c2zk-groen); }
.c2zk .c2zk-datum-invoer:focus-visible { outline: 3px solid var(--c2zk-olijf); outline-offset: 2px; border-color: var(--c2zk-groen); }
.c2zk .c2zk-datum-hint { margin: 0; padding: 0; font-size: 14px; line-height: 1.45; color: var(--c2zk-grijs); }