/* nice_inputs_form.css
 * Datum: 04-06-2026
 * Versie: v1.7
 * - Added a small gap for radio groups so inline gender options do not sit too close together.
 *
 * Datum: 04-06-2026
 * Versie: v1.6
 * - Added field-pair width overrides so Simple Blocks postcode + plaats pairs render with a short postcode column.
 *
 * Datum: 14-05-2026
 * Versie: v1.5
 *
 * v1.5 aangepast door Codex op 14-05-2026 15:21
 * - field-pair children top aligned zodat foutmeldingen geen naastliggend veld centreren.
 *
 * v1.2 aangepast door ChatGPT op 16-02-2026
 * - pairwrap label mag óók op dezelfde regel als de 2 inputs (>=640px)
 * - postcode in postcode-paren krijgt “kort” kolom-breedte (via data-pair + data-side)
 *
 * v1.3 aangepast door Codex op 20-04-2026 13:47
 * - submit-styling niet meer op elke div.group geforceerd (voorkomt conflict met display block/none)
 * - submit-knop rechts uitgelijnd via knop zelf, zonder zware parent-selector of :has
 *
 * v1.4 aangepast door Codex op 20-04-2026 14:03
 * - submit-styling beperkt tot .group:last-child (alleen de laatste submit-rij)
 * - voorkomt dat informatieve .group-blokken (zonder input) rechts uitlijnen
 */

:is(form.nice-inputs-form, div.form-field-group){ color: var(--frontcolor, currentColor); }
:is(form.nice-inputs-form, div.form-field-group) > div{ margin-bottom: var(--spacing-md, 10px); }

/* Inputs: currentColor */
:is(form.nice-inputs-form, div.form-field-group) input:not([type="checkbox"]):not([type="radio"]),
:is(form.nice-inputs-form, div.form-field-group) select,
:is(form.nice-inputs-form, div.form-field-group) textarea{
	width:100%;
	box-sizing:border-box;
	border:2px solid currentColor;
	border-radius: var(--border-radius-buttons, 5px);
	padding:10px 12px;
	background: color-mix(in srgb, currentColor 3%, white);
	color: currentColor;
	outline:none;
}
:is(form.nice-inputs-form, div.form-field-group) input::placeholder,
:is(form.nice-inputs-form, div.form-field-group) textarea::placeholder{ color: color-mix(in srgb, currentColor 55%, transparent); }
:is(form.nice-inputs-form, div.form-field-group) input:not([type="checkbox"]):not([type="radio"]):focus-visible,
:is(form.nice-inputs-form, div.form-field-group) select:focus-visible,
:is(form.nice-inputs-form, div.form-field-group) textarea:focus-visible{
	outline:2px solid color-mix(in srgb, currentColor 55%, white);
	outline-offset:2px;
}

/* Textarea autogrow (CSS) */
:is(form.nice-inputs-form, div.form-field-group) textarea{
	resize:vertical;
	min-height:3.2em;
	max-height:14em;
	overflow:auto;
	line-height:1.3;
}
@supports (field-sizing: content){
	:is(form.nice-inputs-form, div.form-field-group) textarea{
		field-sizing:content;
		resize:none;
		overflow:hidden;
		max-height:18em;
	}
}

/* Default (smal): label boven input */
:is(form.nice-inputs-form, div.form-field-group) > div > label{ display:block; margin-bottom: var(--spacing-xs, 2px); }
:is(form.nice-inputs-form, div.form-field-group) > div > div{ display:block; }

/* Pairwrap (smal): label boven, inputs onder elkaar */
:is(form.nice-inputs-form, div.form-field-group) .nice-inputs-pairwrap > label{ display:block; margin-bottom: var(--spacing-xs, 2px); }
:is(form.nice-inputs-form, div.form-field-group) .nice-inputs-pairwrap .nice-inputs-pairinputs{
	display:grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xs, 2px);
}
:is(form.nice-inputs-form, div.form-field-group) .nice-inputs-pairwrap .nice-inputs-pairitem{ min-width:0; }
:is(form.nice-inputs-form, div.form-field-group) .field-pair > *{
	margin-top:0;
	margin-bottom:0;
	align-self:start;
}
:is(form.nice-inputs-form, div.form-field-group) .radio-group{
	display:flex;
	flex-wrap:wrap;
	gap:8px 14px;
}
:is(form.nice-inputs-form, div.form-field-group) .radio-group > label.radio{
	display:inline-flex;
	align-items:center;
	gap:6px;
}

/* Submit rechts, binnen veldbreedte (alleen laatste group = submit-rij) */
:is(form.nice-inputs-form, div.form-field-group) > .group:last-child{
	display:flex;
	justify-content:flex-end;
	align-items:center;
	margin-top: var(--spacing-lg, 20px);
}
:is(form.nice-inputs-form, div.form-field-group) > .group:last-child > button,
:is(form.nice-inputs-form, div.form-field-group) > .group:last-child > a.button{ max-width:100%; }

/* >=640px: label + input(s) op 1 regel (ook voor pairs) */
@media (min-width:640px){
	:is(form.nice-inputs-form, div.form-field-group){ --nice-input-label-col:220px; }

	/* Single controls */
	:is(form.nice-inputs-form, div.form-field-group) > div:has(> label):has(> div){
		display:grid;
		grid-template-columns: var(--nice-input-label-col) 1fr;
		align-items:center;
		column-gap: var(--spacing-md, 10px);
	}
	:is(form.nice-inputs-form, div.form-field-group) > div:has(> label):has(> div) > label{ margin:0; }
	:is(form.nice-inputs-form, div.form-field-group) > div:has(> label):has(> div) > div{ margin:0; }

	/* Pairwrap: label links, 2 inputs rechts */
	:is(form.nice-inputs-form, div.form-field-group) .nice-inputs-pairwrap{
		display:grid;
		grid-template-columns: var(--nice-input-label-col) 1fr;
		align-items:start;
		column-gap: var(--spacing-md, 10px);
	}
	:is(form.nice-inputs-form, div.form-field-group) .nice-inputs-pairwrap > label{ margin:0; padding-top: 6px; }

	:is(form.nice-inputs-form, div.form-field-group) .nice-inputs-pairwrap .nice-inputs-pairinputs{
		grid-template-columns: 1fr 1fr;
		gap: var(--spacing-sm, 5px);
	}

	/* In pairitems: alleen input, dus geen extra labelkolom meer nodig */
	:is(form.nice-inputs-form, div.form-field-group) .nice-inputs-pairwrap .nice-inputs-pairitem{
		display:block;
	}

	/* Submit: zelfde inspringing als inputkolom */
	:is(form.nice-inputs-form, div.form-field-group) > .group:last-child:has(button){
		padding-left: var(--nice-input-label-col);
	}
}

/* Postcode korter binnen postcode-paren:
   - zip_place: postcode links (data-side="left") kort
   - address_zip: postcode rechts (data-side="right") kort */
@media (min-width:640px){
	/* postcode + plaats */
	:is(form.nice-inputs-form, div.form-field-group) .nice-inputs-pairwrap[data-pair="zip_place"] .nice-inputs-pairinputs{
		grid-template-columns: minmax(120px, 0.35fr) 1fr;
	}

	:is(form.nice-inputs-form, div.form-field-group) .field-pair[data-pair="zip_place"]{
		grid-template-columns: 140px minmax(0, 1fr) !important;
	}

	/* adres + postcode */
	:is(form.nice-inputs-form, div.form-field-group) .nice-inputs-pairwrap[data-pair="address_zip"] .nice-inputs-pairinputs{
		grid-template-columns: 1fr minmax(120px, 0.35fr);
	}

	:is(form.nice-inputs-form, div.form-field-group) .field-pair[data-pair="address_zip"]{
		grid-template-columns: minmax(0, 1fr) 140px !important;
	}
}

/* =========================================================
   nice-inputs-form: submit row fix (button binnen max breedte)
   ========================================================= */

/* 1) Form zelf: vaste maximale breedte voor alle rijen */
:is(form.nice-inputs-form, div.form-field-group){
	width: 100%;
	max-width: var(--nice-inputs-max-width, 980px);
}

/* 2) Elke "row" mag nooit breder worden dan de form */
:is(form.nice-inputs-form, div.form-field-group) > div{
	max-width: 100%;
}

/* 3) Group zelf niet forceren:
      display vanuit HTML/JS moet leidend blijven (block/none) */
:is(form.nice-inputs-form, div.form-field-group) > div.group{
	width: 100%;
	max-width: 100%;
	grid-column: 1 / -1;
	justify-self: stretch;
	margin-top: var(--spacing-md, 10px);
}

/* 4) Alleen de submit-knop rechts zetten binnen de groep */
:is(form.nice-inputs-form, div.form-field-group) > div.group > button,
:is(form.nice-inputs-form, div.form-field-group) > div.group > a.button{
	display: table;
	margin-left: auto;
	max-width: 100%;
}

/* 5) Als je row-layout grid gebruikt met vaste kolommen:
      voorkom dat .group per ongeluk die kolommen erft */
:is(form.nice-inputs-form, div.form-field-group) > div.group{
	grid-template-columns: none;
}

.form-field-group-inner {
	display: flex;
	flex-direction: row;
}
.form-field-group-inner > *:is(label, input, select, textarea) {
	max-width: 300px;
}