/**
 * 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;
}
.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;
}

/* ── Invoervelden: 249px breed, 34px hoog ── */
.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'] {
	width: 249px !important;
	max-width: 100% !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;
}

/* ── Textarea (opmerking/vraag): normale hoogte ── */
.cf-section .gform_wrapper textarea,
.cf-section .gform_wrapper .ginput_container textarea {
	width: 100% !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;
}

.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;
}

/* ── Grid layout voor velden: 2 kolommen van 249px ── */
.cf-section .gform_wrapper .gform_fields {
	display: grid !important;
	grid-template-columns: 249px 249px !important;
	row-gap: 0.3rem !important;
	column-gap: 1.6rem !important;
	margin: 0 !important;
	padding: 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;
}
/* E-mail en telefoon altijd naast elkaar, ook als GF ze op full-width zet */
.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;
}

/* ── Naam-veld: Voornaam + Achternaam naast elkaar, elk 249px ── */
.cf-section .gform_wrapper .ginput_container_name {
	display: flex !important;
	row-gap: 0.3rem !important;
	column-gap: 1.6rem !important;
	flex-wrap: nowrap !important;
}
.cf-section .gform_wrapper .ginput_container_name span {
	flex: 0 0 auto !important;
	width: auto !important;
	padding: 0 !important;
}
.cf-section .gform_wrapper .ginput_container_name input[type='text'] {
	width: 249px !important;
	height: 34px !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;
}

/* ── Specifieke veldbreedtes (contactformulier, form ID 2) ── */
.cf-section #input_2_1_6 {
	width: 260px !important;
	max-width: 100% !important;
}
/* Telefoonnummer: extra selectors om GF .medium class te overrulen */
.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_email input.large,
.cf-section #field_2_5 .ginput_container_phone input {
	min-width: 260px !important;
	max-width: 100% !important;
}
/* Reset GF .medium breedte globaal, daarna telefoon opnieuw instellen */
.cf-section .gform_wrapper input.medium {
	width: 249px !important;
}
.cf-section #field_2_5 input.medium {
	width: 260px !important;
}

/* E-mail: zelfde max/vaste breedte als telefoon (260px) */
.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 {
	width: 260px !important;
	max-width: 100% !important;
}
.cf-section #input_2_3,
.cf-section #field_2_3 textarea {
	min-width: 536px !important;
	max-width: 100% !important;
}

/* ── PDP reserve: form ID 3 — zelfde veldbreedtes als form 2 (alleen als veld-ID’s overeenkomen) ── */
.cf-section #input_3_1_6 {
	width: 260px !important;
	max-width: 100% !important;
}
.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_email input.large,
.cf-section #field_3_5 .ginput_container_phone input {
	min-width: 260px !important;
	max-width: 100% !important;
}
.cf-section #field_3_5 input.medium {
	width: 260px !important;
}
.cf-section #input_3_3,
.cf-section #field_3_3 textarea {
	min-width: 536px !important;
	max-width: 100% !important;
}

/* ── Responsive: voorkom overflow op tablet/mobiel ── */
@media (max-width: 1023px) {
	.cf-section .gform_wrapper .gform_fields {
		grid-template-columns: 1fr !important;
		column-gap: 0.75rem !important;
	}

	.cf-section .gform_wrapper .ginput_container_name {
		flex-wrap: wrap !important;
	}

	.cf-section .gform_wrapper .ginput_container_name input[type='text'] {
		width: 100% !important;
		max-width: 100% !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'] {
		width: 100% !important;
	}

	.cf-section #input_2_1_6 {
		width: 100% !important;
		min-width: 0 !important;
	}

	.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 {
		min-width: 0 !important;
	}

	.cf-section #input_2_3,
	.cf-section #field_2_3 textarea {
		min-width: 0 !important;
		width: 100% !important;
	}

	.cf-section #input_3_1_6 {
		width: 100% !important;
		min-width: 0 !important;
	}

	.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 {
		min-width: 0 !important;
	}

	.cf-section #input_3_3,
	.cf-section #field_3_3 textarea {
		min-width: 0 !important;
		width: 100% !important;
	}
}

/* ── 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;
}