.ksp-form {
	--ksp-groen: var(--e-global-color-accent, #61ce70);
	--ksp-rand: #d5d8dc;
	max-width: 640px;
}
.ksp-form p { margin: 0 0 14px; }
.ksp-form label { display: block; margin-bottom: 4px; font-weight: 600; }
.ksp-form input[type="text"],
.ksp-form input[type="email"],
.ksp-form input[type="tel"],
.ksp-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--ksp-rand);
	border-radius: 4px;
	font: inherit;
	font-size: 16px; /* voorkomt inzoomen op iPhone */
}
.ksp-hp { position: absolute; left: -9999px; }

/* Foto's */
.ksp-fotos { margin: 0 0 14px; }
.ksp-form.ksp-js #ksp-fotoinput { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ksp-form:not(.ksp-js) .ksp-fotoknop { display: none; }
.ksp-fotoknop {
	display: block;
	padding: 18px 12px;
	border: 2px dashed var(--ksp-groen);
	border-radius: 6px;
	text-align: center;
	cursor: pointer;
	font-weight: 400;
}
.ksp-fotoknop:hover,
.ksp-fotos:focus-within .ksp-fotoknop { background: rgba(97, 206, 112, .08); }
.ksp-fotos:has(#ksp-fotoinput:focus-visible) .ksp-fotoknop { outline: 2px solid currentColor; outline-offset: 2px; }
.ksp-fotoknop-tekst { display: block; font-weight: 700; font-size: 1.05em; }
.ksp-fotoknop-tekst::before { content: "+ "; }
.ksp-fotoknop-hint { display: block; font-size: .875em; opacity: .75; margin-top: 2px; }

.ksp-voorbeelden {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}
.ksp-voorbeelden:empty { display: none; }
.ksp-voorbeelden li {
	position: relative;
	aspect-ratio: 1;
	border-radius: 4px;
	background: #f1f2f4 center / cover no-repeat;
	overflow: hidden;
	font-size: 11px;
}
.ksp-naam { position: absolute; inset: auto 0 0; padding: 4px; word-break: break-all; }
.ksp-beeld .ksp-naam { display: none; }
.ksp-laden { opacity: .5; }
.ksp-weg {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: 18px;
	line-height: 26px;
	cursor: pointer;
}

.ksp-melding { color: #c62828; font-weight: 600; }
.ksp-verstuur {
	width: 100%;
	padding: 14px;
	border: 0;
	border-radius: 4px;
	background: var(--ksp-groen);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.ksp-verstuur:disabled { opacity: .7; cursor: wait; }
.ksp-klaar { padding: 16px; border-left: 4px solid var(--ksp-groen); background: rgba(97, 206, 112, .1); }