/**
 * Gravity Forms: zelfde styling als contactblok (.cf-section).
 * Contact: form ID 2 (`#field_2_*`). PDP reserve: form ID 3 — zelfde layoutregels gespiegeld naar `#field_3_*`.
 */

/* ── Basis: Montserrat, 12px, regular ── */
.cf-section .gform_wrapper {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
}

.cf-section .cf-form-col {
	--cf-form-width: 536px;
	--cf-form-gap: 1.6rem;
	--cf-field-width: 249px;
	--cf-field-col: calc((var(--cf-form-width) - var(--cf-form-gap)) / 2);
	container-type: inline-size;
	container-name: cf-form;
	min-width: 0;
}

.cf-section .gform_wrapper *,
.cf-section .gform_wrapper input,
.cf-section .gform_wrapper textarea,
.cf-section .gform_wrapper select,
.cf-section .gform_wrapper label {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 400 !important;
}

/* ── Labels: pl-2 + pr-2, 12px, regular ── */
.cf-section .gform_wrapper .gfield_label {
	font-size: 12px !important;
	font-weight: 400 !important;
	color: #32100e;
	margin-bottom: 0.25rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	display: block;
}

/* ── Verberg het "Naam"-label (type-name = gecombineerd naamveld) ── */
.cf-section .gform_wrapper .gfield--type-name > .gfield_label {
	display: none !important;
}

/* ── Verberg verplicht-indicator overal ── */
.cf-section .gform_wrapper .gfield_required,
.cf-section .gform_wrapper .gfield_required_text,
.cf-section .gform_wrapper .gfield_required_asterisk,
.cf-section .gform_wrapper abbr[title='verplicht'],
.cf-section .gform_wrapper abbr[title='required'] {
	display: none !important;
}

/* ── Verberg tekenteller bij opmerkingenveld ── */
.cf-section .gform_wrapper .ginput_counter,
.cf-section .gform_wrapper .charleft,
.cf-section .gform_wrapper .charcount,
.cf-section .gform_wrapper [id*='charleft'],
.cf-section .gform_wrapper [id*='counter'] {
	display: none !important;
}

.cf-section .gform_wrapper input:focus,
.cf-section .gform_wrapper textarea:focus {
	border-color: #2a4c50 !important;
	box-shadow: none !important;
}

/* ── Knop: klein formaat, links uitlijnen ── */
.cf-section .gform_wrapper .gform_footer,
.cf-section .gform_wrapper .gform_page_footer {
	text-align: left !important;
	padding: 0.4rem 0 1rem 0 !important;
	margin: 0 !important;
}
.cf-section .gform_wrapper .gform_footer input[type='submit'],
.cf-section .gform_wrapper .gform_page_footer input[type='submit'] {
	width: auto !important;
	display: inline-block !important;
	background-color: #ab3300 !important;
	color: #fff !important;
	border: none !important;
	padding: 0.63rem 1.77rem !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.025em !important;
	cursor: pointer !important;
	border-radius: 0 !important;
	transition: background-color 0.2s !important;
	margin: 0 !important;
}

/* ── Onder lg (<1024px): origineel 2-koloms, volle breedte (tablet + mobiel) ── */
@media (max-width: 1023px) {
	.cf-section .gform_wrapper {
		width: 100% !important;
		max-width: 100% !important;
	}

	.cf-section .gform_wrapper .gfield {
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 0 !important;
		padding: 0 !important;
	}

	.cf-section .gform_wrapper .ginput_container {
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 0 !important;
	}

	.cf-section .gform_wrapper .gform_fields {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		row-gap: 0.3rem !important;
		column-gap: var(--cf-form-gap) !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.cf-section .gform_wrapper .gfield--width-full,
	.cf-section .gform_wrapper .gfield--type-textarea,
	.cf-section .gform_wrapper .gfield--type-name {
		grid-column: 1 / -1 !important;
	}

	.cf-section .gform_wrapper .gfield--type-email,
	.cf-section .gform_wrapper .gfield--type-phone {
		grid-column: span 1 !important;
	}

	.cf-section .gform_wrapper .ginput_container_name {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: var(--cf-form-gap) !important;
		row-gap: 0.3rem !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.cf-section .gform_wrapper .ginput_container_name span {
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
	}

	.cf-section .gform_wrapper .ginput_container_name .name_sub_label,
	.cf-section .gform_wrapper .ginput_container_name label {
		font-family: 'Montserrat', sans-serif !important;
		font-size: 12px !important;
		font-weight: 400 !important;
		color: #32100e !important;
		margin-bottom: 0.25rem !important;
		display: block !important;
		text-transform: none !important;
		letter-spacing: normal !important;
	}

	.cf-section .gform_wrapper .ginput_container input,
	.cf-section .gform_wrapper .ginput_container select,
	.cf-section .gform_wrapper input[type='text'],
	.cf-section .gform_wrapper input[type='email'],
	.cf-section .gform_wrapper input[type='tel'],
	.cf-section .gform_wrapper input[type='number'],
	.cf-section .gform_wrapper input.medium,
	.cf-section .gform_wrapper .ginput_container_name input[type='text'],
	.cf-section #input_2_1_6,
	.cf-section #field_2_5 #input_2_5,
	.cf-section #field_2_5 input.medium,
	.cf-section #field_2_5 .ginput_container input,
	.cf-section #field_2_5 .ginput_container_phone input,
	.cf-section .gform_wrapper .gfield--type-email input,
	.cf-section .gform_wrapper .gfield--type-email input.medium,
	.cf-section .gform_wrapper .ginput_container_email input.large,
	.cf-section #input_3_1_6,
	.cf-section #field_3_5 #input_3_5,
	.cf-section #field_3_5 input.medium,
	.cf-section #field_3_5 .ginput_container input,
	.cf-section #field_3_5 .ginput_container_phone input {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: 34px !important;
		border: 1px solid #d1d5db !important;
		padding: 0 0.6rem !important;
		font-size: 12px !important;
		background: #fff !important;
		border-radius: 0 !important;
		outline: none !important;
		box-shadow: none !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	.cf-section .gform_wrapper textarea,
	.cf-section .gform_wrapper .ginput_container textarea,
	.cf-section #input_2_3,
	.cf-section #field_2_3 textarea,
	.cf-section #input_3_3,
	.cf-section #field_3_3 textarea {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		border: 1px solid #d1d5db !important;
		padding: 0.5rem 0.6rem !important;
		font-size: 12px !important;
		background: #fff !important;
		border-radius: 0 !important;
		outline: none !important;
		box-shadow: none !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	.cf-section .gform_wrapper .gform_footer,
	.cf-section .gform_wrapper .gform_page_footer {
		max-width: 100% !important;
	}

	.cf-section .cf-form-banner {
		max-width: 100% !important;
	}
}

/* ── Desktop: 536px-raster, 2 kolommen (≥1024px, lg-pagina) ── */
@media (min-width: 1024px) {
	.cf-section .gform_wrapper {
		width: var(--cf-form-width) !important;
		max-width: 100% !important;
	}

	.cf-section .gform_wrapper .gform_fields {
		display: grid !important;
		grid-template-columns: var(--cf-field-col) var(--cf-field-col) !important;
		row-gap: 0.3rem !important;
		column-gap: var(--cf-form-gap) !important;
		margin: 0 !important;
		padding: 0 !important;
		width: var(--cf-form-width) !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.cf-section .gform_wrapper .gfield--width-full,
	.cf-section .gform_wrapper .gfield--type-textarea,
	.cf-section .gform_wrapper .gfield--type-name {
		grid-column: 1 / -1 !important;
	}

	.cf-section .gform_wrapper .gfield--type-email,
	.cf-section .gform_wrapper .gfield--type-phone {
		grid-column: span 1 !important;
	}

	.cf-section .gform_wrapper .gfield {
		margin-bottom: 0 !important;
		padding: 0 !important;
	}

	.cf-section .gform_wrapper .ginput_container {
		margin-top: 0 !important;
	}

	/* Naamrij:zelfde kolommen als e-mail/telefoon */
	.cf-section .gform_wrapper .ginput_container_name {
		display: grid !important;
		grid-template-columns: var(--cf-field-col) var(--cf-field-col) !important;
		column-gap: var(--cf-form-gap) !important;
		row-gap: 0.3rem !important;
		width: var(--cf-form-width) !important;
		max-width: 100% !important;
	}

	.cf-section .gform_wrapper .ginput_container_name span {
		min-width: 0 !important;
		width: 100% !important;
		padding: 0 !important;
	}

	.cf-section .gform_wrapper .ginput_container_name .name_sub_label,
	.cf-section .gform_wrapper .ginput_container_name label {
		font-family: 'Montserrat', sans-serif !important;
		font-size: 12px !important;
		font-weight: 400 !important;
		color: #32100e !important;
		margin-bottom: 0.25rem !important;
		display: block !important;
		text-transform: none !important;
		letter-spacing: normal !important;
	}

	.cf-section .gform_wrapper .ginput_container input,
	.cf-section .gform_wrapper .ginput_container select,
	.cf-section .gform_wrapper input[type='text'],
	.cf-section .gform_wrapper input[type='email'],
	.cf-section .gform_wrapper input[type='tel'],
	.cf-section .gform_wrapper input[type='number'],
	.cf-section .gform_wrapper input.medium,
	.cf-section .gform_wrapper .ginput_container_name input[type='text'],
	.cf-section #input_2_1_6,
	.cf-section #field_2_5 #input_2_5,
	.cf-section #field_2_5 input.medium,
	.cf-section #field_2_5 .ginput_container input,
	.cf-section #field_2_5 .ginput_container_phone input,
	.cf-section .gform_wrapper .gfield--type-email input,
	.cf-section .gform_wrapper .gfield--type-email input.medium,
	.cf-section .gform_wrapper .ginput_container_email input.large,
	.cf-section #input_3_1_6,
	.cf-section #field_3_5 #input_3_5,
	.cf-section #field_3_5 input.medium,
	.cf-section #field_3_5 .ginput_container input,
	.cf-section #field_3_5 .ginput_container_phone input {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: 34px !important;
		border: 1px solid #d1d5db !important;
		padding: 0 0.6rem !important;
		font-size: 12px !important;
		background: #fff !important;
		border-radius: 0 !important;
		outline: none !important;
		box-shadow: none !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	.cf-section .gform_wrapper textarea,
	.cf-section .gform_wrapper .ginput_container textarea,
	.cf-section #input_2_3,
	.cf-section #field_2_3 textarea,
	.cf-section #input_3_3,
	.cf-section #field_3_3 textarea {
		width: 100% !important;
		max-width: var(--cf-form-width) !important;
		min-width: 0 !important;
		border: 1px solid #d1d5db !important;
		padding: 0.5rem 0.6rem !important;
		font-size: 12px !important;
		background: #fff !important;
		border-radius: 0 !important;
		outline: none !important;
		box-shadow: none !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	.cf-section .gform_wrapper .gform_footer,
	.cf-section .gform_wrapper .gform_page_footer {
		max-width: var(--cf-form-width) !important;
	}
}

/* Banner 536px: alleen desktop met brede formulierkolom */
@media (min-width: 1024px) {
	@container cf-form (min-width: 540px) {
		.cf-section .cf-form-banner {
			max-width: var(--cf-form-width) !important;
		}
	}
}

/* ── Smalle formulierkolom (2-koloms pagina): gelijke kolommen, geen overflow ── */
@container cf-form (max-width: 539px) {
	.cf-section .gform_wrapper {
		width: 100% !important;
		max-width: 100% !important;
	}

	.cf-section .gform_wrapper .gform_fields {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		width: 100% !important;
		max-width: 100% !important;
		column-gap: var(--cf-form-gap) !important;
	}

	.cf-section .gform_wrapper .ginput_container_name {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		width: 100% !important;
		max-width: 100% !important;
		column-gap: var(--cf-form-gap) !important;
	}

	.cf-section .gform_wrapper textarea,
	.cf-section .gform_wrapper .ginput_container textarea,
	.cf-section #input_2_3,
	.cf-section #field_2_3 textarea,
	.cf-section #input_3_3,
	.cf-section #field_3_3 textarea {
		max-width: 100% !important;
	}

	.cf-section .gform_wrapper .gform_footer,
	.cf-section .gform_wrapper .gform_page_footer {
		max-width: 100% !important;
	}
}

/* Fallback zonder container queries: 2-koloms pagina lg–xl */
@supports not (container-type: inline-size) {
	@media (min-width: 1024px) and (max-width: 1279px) {
		.cf-section .gform_wrapper {
			width: 100% !important;
			max-width: 100% !important;
		}

		.cf-section .gform_wrapper .gform_fields {
			grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
			width: 100% !important;
			max-width: 100% !important;
		}

		.cf-section .gform_wrapper .ginput_container_name {
			grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
			width: 100% !important;
			max-width: 100% !important;
		}

		.cf-section .gform_wrapper textarea,
		.cf-section #input_2_3,
		.cf-section #field_2_3 textarea,
		.cf-section #input_3_3,
		.cf-section #field_3_3 textarea {
			max-width: 100% !important;
		}

		.cf-section .gform_wrapper .gform_footer,
		.cf-section .gform_wrapper .gform_page_footer {
			max-width: 100% !important;
		}

		.cf-section .cf-form-banner {
			max-width: 100% !important;
		}
	}

	@media (min-width: 1280px) {
		.cf-section .cf-form-banner {
			max-width: var(--cf-form-width) !important;
		}
	}
}

/* Banner: standaard volle breedte van kolom */
.cf-section .cf-form-banner {
	width: 100%;
	max-width: 100%;
}

/* ── Validatie ── */
.cf-section .gform_wrapper .validation_error {
	background: #fef2f2;
	border: 1px solid #fca5a5;
	color: #991b1b;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	margin-bottom: 0.75rem;
}
.cf-section .gform_wrapper .gfield_validation_message,
.cf-section .gform_wrapper .gfield_error .gfield_label {
	color: #991b1b;
	font-size: 0.75rem;
}
.cf-section .gform_wrapper .gfield_error input,
.cf-section .gform_wrapper .gfield_error textarea {
	border-color: #fca5a5 !important;
}

/*
 * PDP: gf.css (via tailwind) target .gform_wrapper.gravity-theme — zelfde !important
 * als contact; geldt voor reserve-formulier (ID 3) in .cf-section.
 */
body.single-product .cf-section .gform_wrapper.gravity-theme,
body.single-product .cf-section .gform_wrapper.gravity-theme .gform_fields,
body.single-product .cf-section .gform_wrapper.gravity-theme .gfield {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
}
body.single-product .cf-section .gform_wrapper.gravity-theme .gform_footer {
	padding: 0 !important;
	margin: 0 !important;
	text-align: left !important;
}
body.single-product .cf-section .gform_wrapper.gravity-theme .gform_footer input[type='submit'] {
	width: auto !important;
	display: inline-block !important;
	background-color: #ab3300 !important;
	color: #fff !important;
	border: none !important;
	padding: 0.63rem 1.77rem !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.025em !important;
	border-radius: 0 !important;
}

/* PDP reserve: submit-knop gelijk aan knop Reserveer direct (158×38px, primary-500 / hover primary-600) */
body.single-product .not-in-stock-reserve .gform_wrapper .gform_footer input[type='submit'],
body.single-product .not-in-stock-reserve .gform_wrapper.gravity-theme .gform_footer input[type='submit'] {
	box-sizing: border-box !important;
	width: 158px !important;
	min-width: 158px !important;
	height: 38px !important;
	min-height: 38px !important;
	max-width: 100% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #ab3300 !important;
	color: #fff !important;
	border: none !important;
	padding: 0 0.5rem !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease !important;
}
body.single-product .not-in-stock-reserve .gform_wrapper .gform_footer input[type='submit']:hover,
body.single-product .not-in-stock-reserve .gform_wrapper.gravity-theme .gform_footer input[type='submit']:hover {
	background-color: #972e00 !important;
}