/* Gestel.nu – inzendformulieren (agenda, familiebericht, tip). Alleen tokens; donker thema volgt vanzelf. */

/* ---- Formulier (pakket A, taak 27) ---- */
.gnp-formulier { max-width: var(--gn-col); }
.gnp-form { font-size: 1rem; }
.gnp-form .gnp-groep {
	margin: var(--gn-space-5) 0; padding: var(--gn-space-4);
	border: 1px solid var(--gn-border); border-radius: var(--gn-radius-sm);
	background: var(--gn-surface-2);
}
.gnp-form .gnp-groep legend { padding: 0 var(--gn-space-2); font-weight: 700; }
.gnp-form .gnp-veld { margin: 0 0 var(--gn-space-5); }
.gnp-form .gnp-label { margin: 0 0 var(--gn-space-2); font-weight: 600; color: var(--gn-text); }
.gnp-form .gnp-verplicht { color: var(--gn-brand); }
.gnp-form .gnp-optioneel { font-weight: 400; color: var(--gn-muted); font-size: .9em; }
.gnp-form .gnp-hint { margin: -.25rem 0 var(--gn-space-2); color: var(--gn-muted); font-size: .9375rem; }

.gnp-form input[type=text], .gnp-form input[type=email], .gnp-form input[type=tel], .gnp-form input[type=url],
.gnp-form input[type=date], .gnp-form input[type=datetime-local], .gnp-form input[type=time],
.gnp-form select, .gnp-form textarea {
	display: block; width: 100%; min-height: 48px; padding: .625rem .875rem;
	font: inherit; font-size: max(16px, 1rem); line-height: 1.4; color: var(--gn-text);
	background: var(--gn-surface); border: 2px solid var(--gn-border); border-radius: var(--gn-radius-sm);
	-webkit-appearance: none; appearance: none;
}
.gnp-form select {
	padding-right: 2.5rem;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 50%, calc(100% - .9rem) 50%;
	background-size: .35rem .35rem; background-repeat: no-repeat;
}
.gnp-form textarea { min-height: 8rem; resize: vertical; }
.gnp-form input[type=file] { display: block; width: 100%; min-height: 48px; padding: .5rem 0; font-size: max(16px, 1rem); }
.gnp-form input[type=file]::file-selector-button {
	min-height: 44px; margin-right: .75rem; padding: .5rem 1rem; font: inherit; font-weight: 700;
	color: var(--gn-text); background: var(--gn-surface-2); border: 2px solid var(--gn-border); border-radius: 999px; cursor: pointer;
}

.gnp-form .gnp-keuzes { display: grid; gap: var(--gn-space-2); }
.gnp-form .gnp-keuze { display: flex; align-items: center; gap: .625rem; min-height: 44px; font-weight: 400; cursor: pointer; }
.gnp-form .gnp-keuze input { width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--gn-brand); flex: none; }

.gnp-form :is(input, select, textarea, button):focus-visible,
.gnp-form .gnp-keuze:focus-within {
	outline: 3px solid var(--gn-focus); outline-offset: 2px;
}
.gnp-form :is(input, select, textarea):focus { border-color: var(--gn-focus); }

/* Fout: rand + icoon + tekst (niet alleen kleur) */
.gnp-form .gnp-fout {
	display: flex; gap: .375rem; align-items: flex-start; margin: var(--gn-space-2) 0 0;
	color: #b3261e; font-weight: 600; font-size: .9375rem;
}
.gnp-form .gnp-fout::before {
	content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem;
	border-radius: 50%; background: #b3261e; color: #fff; font-size: .8125rem; font-weight: 800; line-height: 1;
}
.gnp-form .gnp-veld--fout :is(input, select, textarea) { border-color: #b3261e; }

/* Bestanden met voortgang */
.gnp-form .gnp-bestanden { display: grid; gap: var(--gn-space-2); margin: var(--gn-space-3) 0 0; padding: 0; list-style: none; }
.gnp-form .gnp-bestand {
	display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .625rem .75rem;
	background: var(--gn-surface-2); border-radius: var(--gn-radius-sm); font-size: .9375rem;
}
.gnp-form .gnp-bestand__naam { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.gnp-form .gnp-bestand__grootte, .gnp-form .gnp-bestand__status { color: var(--gn-muted); }
.gnp-form .gnp-bestand progress {
	flex: 1 1 100%; height: .5rem; border: 0; border-radius: 999px; overflow: hidden;
	background: var(--gn-surface-3); accent-color: var(--gn-brand); -webkit-appearance: none; appearance: none;
}
.gnp-form .gnp-bestand progress::-webkit-progress-bar { background: var(--gn-surface-3); }
.gnp-form .gnp-bestand progress::-webkit-progress-value { background: var(--gn-brand); }
.gnp-form .gnp-bestand progress::-moz-progress-bar { background: var(--gn-brand); }
.gnp-form .gnp-bestand__knop {
	min-height: 44px; padding: 0 .75rem; font: inherit; font-weight: 600; color: var(--gn-link);
	background: none; border: 0; text-decoration: underline; cursor: pointer;
}

/* Status, knop, succes */
.gnp-form .gnp-form__status:not(:empty) {
	margin: 0 0 var(--gn-space-4); padding: var(--gn-space-3) var(--gn-space-4);
	border-radius: var(--gn-radius-sm); background: var(--gn-surface-2);
}
.gnp-form .gnp-form__status p { margin: 0; }
.gnp-form .gnp-form__status--fout { border-left: 4px solid #b3261e; }
.gnp-form .gnp-form__status a { color: var(--gn-link); font-weight: 600; }
.gnp-form .gnp-form__acties { margin: var(--gn-space-5) 0 var(--gn-space-3); }
.gnp-form .gnp-form__verzend { min-width: 12rem; font-size: 1rem; }
.gnp-form[aria-busy="true"] .gnp-form__verzend { opacity: .7; cursor: progress; }
.gnp-form .gnp-form__klein { color: var(--gn-muted); font-size: .875rem; }
.gnp-form--gesloten, .gnp-form__succes {
	padding: var(--gn-space-5); border-radius: var(--gn-radius); background: var(--gn-surface-2);
	border-left: 4px solid var(--gn-brand);
}
.gnp-form__succes { font-size: 1.0625rem; }
.gnp-form__succes:focus { outline: 3px solid var(--gn-focus); outline-offset: 2px; }
.gnp-form__succes p { margin: 0 0 var(--gn-space-2); }
.gnp-form__succes .gnp-form__ref { margin: 0; color: var(--gn-muted); font-size: .9375rem; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .gnp-form .gnp-fout { color: #ffb4ab; }
	:root:not([data-theme="light"]) .gnp-form .gnp-veld--fout :is(input, select, textarea) { border-color: #ffb4ab; }
}
:root[data-theme="dark"] .gnp-form .gnp-fout { color: #ffb4ab; }
:root[data-theme="dark"] .gnp-form .gnp-veld--fout :is(input, select, textarea) { border-color: #ffb4ab; }

@media (max-width: 420px) {
	.gnp-form .gnp-groep { padding: var(--gn-space-3); margin-left: 0; margin-right: 0; }
	.gnp-form .gnp-form__verzend { width: 100%; }
}