/**
 * MGH formulieren — Advanced Forms for ACF + ACF front-end markup.
 *
 * @package Astra Child
 */

/* ================================================================
   Form wrapper
   ================================================================ */

.mgh-form,
.mgh-form.af-form {
	max-width: 100%;
	margin: 0;
}

.mgh-form .af-title,
.mgh-form .af-description {
	display: none;
}

.mgh-form.mgh-form--show-title .af-title {
	display: block;
	margin: 0 0 8px;
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	font-weight: 700;
	color: var(--mgh-form-label);
}

.mgh-form.mgh-form--show-title .af-description {
	display: block;
	margin: 0 0 24px;
	color: var(--mgh-form-footnote);
	font-size: 0.95rem;
}

/* ================================================================
   Field grid (ACF wrapper widths)
   ================================================================ */

.mgh-form .af-fields,
.mgh-form .acf-fields,
.mgh-form .acf-form-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--mgh-form-gap);
	margin: 0;
	padding: 0;
	border: 0;
}

.mgh-form .af-field,
.mgh-form .acf-field {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.mgh-form .af-field + .af-field,
.mgh-form .acf-field + .acf-field {
	margin-top: 0;
}

/* ================================================================
   Labels
   ================================================================ */

.mgh-form .af-label,
.mgh-form .acf-label {
	margin: 0 0 8px;
	padding: 0;
}

.mgh-form .af-label label,
.mgh-form .acf-label label {
	display: block;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mgh-form-label);
}

.mgh-form .acf-required,
.mgh-form .af-field .acf-required {
	color: inherit;
	font-weight: 700;
}

/* ================================================================
   Text inputs, selects, textarea
   ================================================================ */

.mgh-form .af-input input[type="text"],
.mgh-form .af-input input[type="email"],
.mgh-form .af-input input[type="tel"],
.mgh-form .af-input input[type="number"],
.mgh-form .af-input input[type="url"],
.mgh-form .af-input input[type="password"],
.mgh-form .af-input input[type="date"],
.mgh-form .af-input input[type="time"],
.mgh-form .af-input input[type="datetime-local"],
.mgh-form .af-input input[type="search"],
.mgh-form .acf-input input[type="text"],
.mgh-form .acf-input input[type="email"],
.mgh-form .acf-input input[type="tel"],
.mgh-form .acf-input input[type="number"],
.mgh-form .acf-input input[type="url"],
.mgh-form .acf-input input[type="password"],
.mgh-form .acf-input input[type="date"],
.mgh-form .acf-input input[type="time"],
.mgh-form .acf-input input[type="datetime-local"],
.mgh-form .acf-input input[type="search"],
.mgh-form .af-input select,
.mgh-form .acf-input select,
.mgh-form .af-input textarea,
.mgh-form .acf-input textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--mgh-form-border);
	border-radius: var(--mgh-form-radius);
	background: var(--mgh-form-bg);
	color: var(--mgh-form-label);
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mgh-form .af-input textarea,
.mgh-form .acf-input textarea {
	min-height: 140px;
	resize: vertical;
}

.mgh-form .af-input input::placeholder,
.mgh-form .acf-input input::placeholder,
.mgh-form .af-input textarea::placeholder,
.mgh-form .acf-input textarea::placeholder {
	color: var(--mgh-form-placeholder);
	opacity: 1;
}

.mgh-form .af-input input:focus,
.mgh-form .acf-input input:focus,
.mgh-form .af-input select:focus,
.mgh-form .acf-input select:focus,
.mgh-form .af-input textarea:focus,
.mgh-form .acf-input textarea:focus {
	outline: none;
	border-color: var(--mgh-form-border-focus);
	box-shadow: 0 0 0 1px var(--mgh-form-border-focus);
}

/* Select arrow */
.mgh-form .af-input select,
.mgh-form .acf-input select {
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231d2230' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}

/* Search / voertuigkeuze veld */
.mgh-form .mgh-form-field--search .af-input input,
.mgh-form .mgh-form-field--search .acf-input input,
.mgh-form .af-field-type-post_object .af-input input,
.mgh-form .acf-field-post-object .acf-input input,
.mgh-form .af-field-type-select.mgh-form-field--search .af-input input,
.mgh-form .acf-field-select.mgh-form-field--search .acf-input input {
	padding-left: 44px;
	background-image: url("../icons/form/search.svg");
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 18px 18px;
}

/* Select2 (ACF post object / relationship) */
.mgh-form .select2-container--default .select2-selection--single,
.mgh-form .select2-container--default .select2-selection--multiple {
	min-height: 48px;
	border: 1px solid var(--mgh-form-border);
	border-radius: var(--mgh-form-radius);
	background: var(--mgh-form-bg);
}

.mgh-form .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 10px 16px;
	color: var(--mgh-form-label);
	line-height: 1.4;
}

.mgh-form .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
	right: 8px;
}

.mgh-form .select2-container--default.select2-container--focus .select2-selection--single,
.mgh-form .select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: var(--mgh-form-border-focus);
	box-shadow: 0 0 0 1px var(--mgh-form-border-focus);
}

.mgh-form .mgh-form-field--search .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 44px;
	background-image: url("../icons/form/search.svg");
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 18px 18px;
}

/* ================================================================
   Sectiekoppen (ACF message velden)
   ================================================================ */

.mgh-form .mgh-form-section {
	width: 100% !important;
	margin-top: var(--mgh-form-section-gap);
}

.mgh-form .mgh-form-section:first-child,
.mgh-form .af-fields > .mgh-form-section:first-child,
.mgh-form .acf-fields > .mgh-form-section:first-child {
	margin-top: 0;
}

.mgh-form .mgh-form-section .af-field-instructions,
.mgh-form .mgh-form-section .acf-field-instructions {
	display: none;
}

/* Titel staat in Advanced Forms in .af-label; leeg .af-input verbergen. */
.mgh-form .mgh-form-section > .af-input:empty,
.mgh-form .mgh-form-section > .acf-input:empty {
	display: none;
}

.mgh-form .mgh-form-section > .af-label,
.mgh-form .mgh-form-section > .acf-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--mgh-form-label);
}

.mgh-form .mgh-form-section > .af-label label,
.mgh-form .mgh-form-section > .acf-label label {
	display: block;
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.mgh-form .mgh-form-section > .af-label::before,
.mgh-form .mgh-form-section > .acf-label::before {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: var(--mgh-form-section-icon) center / contain no-repeat;
	mask: var(--mgh-form-section-icon) center / contain no-repeat;
}

.mgh-form .mgh-form-section--personal {
	--mgh-form-section-icon: url("../icons/form/user.svg");
}

.mgh-form .mgh-form-section--vehicle {
	--mgh-form-section-icon: url("../icons/nav/voertuigen.svg");
}

.mgh-form .mgh-form-section--appointment {
	--mgh-form-section-icon: url("../icons/badge/calendar.svg");
}

.mgh-form .mgh-form-section .acf-notice,
.mgh-form .mgh-form-section p {
	margin: 0;
}

/* ================================================================
   Instructions & errors
   ================================================================ */

.mgh-form .af-field-instructions,
.mgh-form .acf-field-instructions {
	margin: 6px 0 0;
	font-size: 0.82rem;
	color: var(--mgh-form-footnote);
}

.mgh-form .acf-error-message,
.mgh-form .af-field.-error .acf-notice {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mgh-red);
	font-size: 0.82rem;
}

.mgh-form .af-field.-error input,
.mgh-form .af-field.-error select,
.mgh-form .af-field.-error textarea,
.mgh-form .acf-field.-error input,
.mgh-form .acf-field.-error select,
.mgh-form .acf-field.-error textarea {
	border-color: var(--mgh-red);
}

.mgh-form .af-success,
.mgh-form .acf-notice.-success {
	margin: 0 0 20px;
	padding: 20px 16px 0 0;
	border: 1px solid var(--mgh-green);
	border-radius: var(--mgh-form-radius);
	background: rgba(39, 164, 71, 0.08);
	color: var(--mgh-neutral-750);
	text-align: center;
}

/* ================================================================
   Submit & footnote (binnen .af-fields na JS-verplaatsing)
   ================================================================ */

.mgh-form .af-fields > .af-submit,
.mgh-form .acf-form-fields > .af-submit {
	width: 100%;
	flex: 0 0 100%;
	margin: 8px 0 0;
	padding: 0 0 0 16px;
}

.mgh-form .af-fields > .mgh-form__footnote,
.mgh-form .acf-form-fields > .mgh-form__footnote {
	width: 100%;
	flex: 0 0 100%;
	margin: 0;
	padding-left: 16px;
}

.mgh-form .af-submit {
	margin: 24px 0 0;
	padding: 0 0 0 16px;
}

.mgh-form .af-submit-button,
.mgh-form .mgh-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	border: 0 !important;
	border-radius: var(--mgh-radius) !important;
	background: var(--mgh-neutral-900);
	color: var(--mgh-white);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.12s ease;
}

.mgh-form .af-submit-button:hover,
.mgh-form .af-submit-button:focus,
.mgh-form .mgh-form__submit:hover,
.mgh-form .mgh-form__submit:focus {
	background: var(--mgh-neutral-800);
	color: var(--mgh-white);
}

.mgh-form .mgh-form__footnote {
	margin: 12px 0 0;
	padding-left: 16px;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--mgh-form-footnote);
}

/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 768px) {
	.mgh-form {
		--mgh-form-gap: 10px;
		--mgh-form-section-gap: 18px;
	}

	.mgh-form .af-field[style*="width"],
	.mgh-form .acf-field[style*="width"] {
		width: 100% !important;
	}

	.mgh-form.mgh-form--show-title .af-title {
		margin: 0 0 4px;
		font-size: 1.35rem;
		text-align: center;
	}

	.mgh-form.mgh-form--show-title .af-description {
		margin: 0 0 16px;
		font-size: 0.88rem;
		text-align: center;
	}

	.mgh-form .af-fields,
	.mgh-form .acf-fields,
	.mgh-form .acf-form-fields {
		gap: var(--mgh-form-gap);
	}

	.mgh-form .af-label,
	.mgh-form .acf-label {
		margin: 0 0 4px;
	}

	.mgh-form .af-label label,
	.mgh-form .acf-label label {
		font-size: 0.88rem;
		line-height: 1.25;
	}

	.mgh-form .af-input input[type="text"],
	.mgh-form .af-input input[type="email"],
	.mgh-form .af-input input[type="tel"],
	.mgh-form .af-input input[type="number"],
	.mgh-form .af-input input[type="url"],
	.mgh-form .af-input input[type="password"],
	.mgh-form .af-input input[type="date"],
	.mgh-form .af-input input[type="time"],
	.mgh-form .af-input input[type="datetime-local"],
	.mgh-form .af-input input[type="search"],
	.mgh-form .acf-input input[type="text"],
	.mgh-form .acf-input input[type="email"],
	.mgh-form .acf-input input[type="tel"],
	.mgh-form .acf-input input[type="number"],
	.mgh-form .acf-input input[type="url"],
	.mgh-form .acf-input input[type="password"],
	.mgh-form .acf-input input[type="date"],
	.mgh-form .acf-input input[type="time"],
	.mgh-form .acf-input input[type="datetime-local"],
	.mgh-form .acf-input input[type="search"],
	.mgh-form .af-input select,
	.mgh-form .acf-input select,
	.mgh-form .af-input textarea,
	.mgh-form .acf-input textarea {
		padding: 10px 12px;
		font-size: 0.92rem;
		min-height: 42px;
	}

	.mgh-form .af-input textarea,
	.mgh-form .acf-input textarea {
		min-height: 88px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.mgh-form .af-input select,
	.mgh-form .acf-input select {
		padding-right: 36px;
		background-position: right 12px center;
	}

	.mgh-form .select2-container--default .select2-selection--single,
	.mgh-form .select2-container--default .select2-selection--multiple {
		min-height: 42px;
	}

	.mgh-form .select2-container--default .select2-selection--single .select2-selection__rendered {
		padding: 8px 12px;
		line-height: 1.3;
	}

	.mgh-form .select2-container--default .select2-selection--single .select2-selection__arrow {
		height: 40px;
	}

	.mgh-form .mgh-form-field--search .af-input input,
	.mgh-form .mgh-form-field--search .acf-input input,
	.mgh-form .af-field-type-post_object .af-input input,
	.mgh-form .acf-field-post-object .acf-input input,
	.mgh-form .mgh-form-field--search .select2-container--default .select2-selection--single .select2-selection__rendered {
		padding-left: 38px;
		background-position: 12px center;
		background-size: 16px 16px;
	}

	/* Helpertekst verbergen — ontwerp toont die niet */
	.mgh-form .af-field-instructions,
	.mgh-form .acf-field-instructions {
		display: none;
	}

	.mgh-form .mgh-form-section {
		margin-top: var(--mgh-form-section-gap);
	}

	.mgh-form .mgh-form-section > .af-label,
	.mgh-form .mgh-form-section > .acf-label {
		gap: 8px;
		margin: 0 0 2px;
	}

	.mgh-form .mgh-form-section > .af-label label,
	.mgh-form .mgh-form-section > .acf-label label {
		font-size: 1rem;
	}

	.mgh-form .mgh-form-section > .af-label::before,
	.mgh-form .mgh-form-section > .acf-label::before {
		width: 18px;
		height: 18px;
	}

	.mgh-form .af-fields > .af-submit,
	.mgh-form .acf-form-fields > .af-submit,
	.mgh-form .af-submit {
		margin: 12px 0 0;
		padding: 0;
	}

	.mgh-form .af-fields > .mgh-form__footnote,
	.mgh-form .acf-form-fields > .mgh-form__footnote,
	.mgh-form .mgh-form__footnote {
		margin: 8px 0 0;
		padding-left: 0;
		font-size: 0.75rem;
		line-height: 1.4;
	}

	.mgh-form .af-submit-button,
	.mgh-form .mgh-form__submit {
		width: 100%;
		min-height: 48px;
		padding: 12px 20px;
		border-radius: 10px !important;
	}

	body.page-template-page-template-full-width .mgh-form,
	body.page-template-page-template-full-width .af-form {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	body.page-template-page-template-full-width .mgh-form .af-label,
	body.page-template-page-template-full-width .mgh-form .acf-label,
	body.page-template-page-template-full-width .af-form label {
		font-size: 0.88rem;
		font-weight: 700;
		margin-bottom: 0;
	}

	body.page-template-page-template-full-width .mgh-form .acf-input input,
	body.page-template-page-template-full-width .mgh-form .acf-input select,
	body.page-template-page-template-full-width .mgh-form .acf-input textarea,
	body.page-template-page-template-full-width .af-form input,
	body.page-template-page-template-full-width .af-form select,
	body.page-template-page-template-full-width .af-form textarea {
		width: 100%;
		border-radius: 10px;
	}

	body.page-template-page-template-full-width .af-submit,
	body.page-template-page-template-full-width .mgh-form .acf-form-submit {
		margin-top: 0.35rem;
	}

	body.page-template-page-template-full-width .af-submit button,
	body.page-template-page-template-full-width .mgh-form .acf-form-submit input[type="submit"],
	body.page-template-page-template-full-width .mgh-form .acf-form-submit button {
		width: 100%;
	}
}