/*
 * Gravity Forms in de A4W-stijl.
 * Velden: compacter (20px tussen de rijen in plaats van 40px), één labelmaat, afgeronde velden van 48px hoog.
 * Knoppen: verzendknop (en volgende/vorige bij formulieren met meerdere stappen) in de A4W-knopstijl,
 * net als de Divi-knoppen: zwart, schuin, extra vet, 10px afgerond; bij hover wit met rode rand en weer recht.
 * Sinds Gravity Forms 3 is de knop een <button> in het "Orbital"-thema (blauw); daarom zowel button als input.
 * Op een donkere achtergrond (sectie of rij met klasse "formulierdonker"): witte knop, bij hover transparant.
 */

/* ---------- Velden: compacter en als één geheel ---------- */

body .gform_wrapper.gform-theme {
	--gf-form-gap-y: 20px !important;
	--gf-form-gap-x: 16px !important;
	--gf-field-gap-y: 12px !important;
	--gf-label-space-primary: 6px !important;
	--gf-ctrl-size: 48px !important;
	--gf-ctrl-size-md: 48px !important;
	--gf-ctrl-radius: 10px !important;
	--gf-radius: 10px !important;
	--gf-ctrl-font-size: 16px !important;
	--gf-ctrl-padding-x: 14px !important;
}

/* Labels: één maat (in plaats van 14pt uit de thema-opties), lopen niet meer over elkaar in smalle kolommen. */
body .gform_wrapper.gform-theme .gfield_label,
body .gform_wrapper.gform-theme legend.gfield_label {
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 3px;
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}
body .gform_wrapper.gform-theme .gfield_label .gfield_required {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #DF231D !important;
}
/* "(Vereist)" wordt een rood sterretje: past ook in smalle kolommen (anders liep het label over 2 regels
   en zakte dat veld lager dan de rest). Schermlezers lezen nog altijd "(Vereist)". */
body .gform_wrapper.gform-theme .gfield_label .gfield_required_text {
	font-size: 0 !important;
}
body .gform_wrapper.gform-theme .gfield_label .gfield_required_text::after {
	content: "*";
	font-size: 16px;
}

/* Sublabels (Voornaam, Achternaam ...) klein en rustig. */
body .gform_wrapper.gform-theme .gform-field-label--type-sub,
body .gform_wrapper.gform-theme .ginput_complex label {
	margin: 0 0 4px !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	opacity: .75;
}
body .gform_wrapper.gform-theme .ginput_complex {
	row-gap: 12px !important;
}

/* Invoervelden. */
body .gform_wrapper.gform-theme input[type=text],
body .gform_wrapper.gform-theme input[type=email],
body .gform_wrapper.gform-theme input[type=tel],
body .gform_wrapper.gform-theme input[type=number],
body .gform_wrapper.gform-theme input[type=url],
body .gform_wrapper.gform-theme select,
body .gform_wrapper.gform-theme textarea {
	border-radius: 10px !important;
	font-size: 16px !important;
}
body .gform_wrapper.gform-theme textarea { padding-top: 12px !important; }

/* Beschrijving en tekenteller onder een veld: goed leesbaar (het grijs van Gravity Forms was op zwart bijna onzichtbaar). */
body .gform_wrapper.gform-theme .gfield_description,
body .gform_wrapper.gform-theme .ginput_counter,
body .gform_wrapper.gform-theme .charleft {
	margin-top: 6px !important;
	padding: 0 !important;
	color: #454445 !important;
	font-size: 14px !important;
	opacity: 1 !important;
}
body .formulierdonker .gform_wrapper.gform-theme .gfield_description,
body .formulierdonker .gform_wrapper.gform-theme .ginput_counter,
body .formulierdonker .gform_wrapper.gform-theme .charleft {
	color: rgba(255, 255, 255, .85) !important;
}
/* Foutmeldingen blijven in hun eigen kleur. */
body .gform_wrapper.gform-theme .gfield_description.validation_message {
	color: #DF231D !important;
}
body .gform_wrapper.gform-theme .ginput_counter_error,
body .gform_wrapper.gform-theme .charleft.warningTextareaInfo {
	color: #DF231D !important;
}

/* Bedankboodschap na het verzenden: volgt de tekstkleur van de sectie (Gravity Forms zette ze vast donker,
   onleesbaar op zwart); op een donkere achtergrond (formulierdonker) altijd wit. */
body .gform_confirmation_wrapper,
body .gform_confirmation_wrapper .gform_confirmation_message,
body .gform_confirmation_message {
	color: inherit !important;
	background: transparent !important;
}
body .et_pb_bg_layout_dark .gform_confirmation_message,
body .formulierdonker .gform_confirmation_wrapper,
body .formulierdonker .gform_confirmation_message {
	color: #fff !important;
}

/* Knop iets dichter bij de velden. */
body .gform_wrapper.gform-theme .gform_footer,
body .gform_wrapper.gform-theme .gform_page_footer {
	margin-top: 24px !important;
	padding: 0 !important;
}

/* Gsm: alles onder elkaar, iets dichter bij elkaar. */
@media (max-width: 640px) {
	body .gform_wrapper.gform-theme { --gf-form-gap-y: 16px !important; }
}

/* ---------- Knoppen ---------- */


/* Ook de accentkleur van het formulier (focusrand, aangevinkte vakjes) niet langer blauw. */
body .gform_wrapper.gform-theme {
	--gf-color-primary: #010101 !important;
	--gf-color-primary-rgb: 1, 1, 1 !important;
	--gf-color-primary-contrast: #fff !important;
	--gf-color-primary-darker: #010101 !important;
	--gf-color-primary-lighter: #454445 !important;
}

body .gform_wrapper .gform_footer .gform_button,
body .gform_wrapper .gform_footer button[type=submit],
body .gform_wrapper .gform_footer input[type=submit],
body .gform_wrapper .gform_page_footer .gform_next_button,
body .gform_wrapper .gform_page_footer .gform_previous_button,
body .gform_wrapper .gform_page_footer button[type=submit],
body .gform_wrapper .gform_page_footer input[type=submit] {
	display: inline-block !important;
	width: auto !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: .3em 1em !important;
	border: 2px solid #010101 !important;
	border-radius: 10px !important;
	background: #010101 !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: 'Barlow', Helvetica, Arial, Lucida, sans-serif !important;
	font-size: 18px !important;
	font-weight: 900 !important;
	font-style: normal !important;
	line-height: 1.7em !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transform: skewX(-15deg);
	transition: transform .3s ease, color .3s ease, background-color .3s ease, border-color .3s ease !important;
}

body .gform_wrapper .gform_footer .gform_button:hover,
body .gform_wrapper .gform_footer .gform_button:focus-visible,
body .gform_wrapper .gform_footer button[type=submit]:hover,
body .gform_wrapper .gform_footer input[type=submit]:hover,
body .gform_wrapper .gform_page_footer .gform_next_button:hover,
body .gform_wrapper .gform_page_footer .gform_previous_button:hover,
body .gform_wrapper .gform_page_footer button[type=submit]:hover,
body .gform_wrapper .gform_page_footer input[type=submit]:hover {
	border-color: #DF231D !important;
	background: #fff !important;
	color: #010101 !important;
	transform: skewX(0deg);
}

body .gform_wrapper .gform_footer .gform_button:focus-visible,
body .gform_wrapper .gform_page_footer .button:focus-visible {
	outline: 2px solid #DF231D !important;
	outline-offset: 3px !important;
}

/* Tijdens het verzenden. */
body .gform_wrapper .gform_footer .gform_button:disabled,
body .gform_wrapper .gform_footer .gform_button[disabled] {
	opacity: .6 !important;
	cursor: wait !important;
}

/* Donkere achtergrond. */
body .formulierdonker .gform_wrapper .gform_footer .gform_button,
body .formulierdonker .gform_wrapper .gform_footer button[type=submit],
body .formulierdonker .gform_wrapper .gform_footer input[type=submit],
body .formulierdonker .gform_wrapper .gform_page_footer .gform_next_button,
body .formulierdonker .gform_wrapper .gform_page_footer .gform_previous_button,
body .formulierdonker .gform_wrapper .gform_page_footer button[type=submit],
body .formulierdonker .gform_wrapper .gform_page_footer input[type=submit] {
	border-color: #fff !important;
	background: #fff !important;
	color: #010101 !important;
}
body .formulierdonker .gform_wrapper .gform_footer .gform_button:hover,
body .formulierdonker .gform_wrapper .gform_footer button[type=submit]:hover,
body .formulierdonker .gform_wrapper .gform_footer input[type=submit]:hover,
body .formulierdonker .gform_wrapper .gform_page_footer .gform_next_button:hover,
body .formulierdonker .gform_wrapper .gform_page_footer .gform_previous_button:hover,
body .formulierdonker .gform_wrapper .gform_page_footer button[type=submit]:hover,
body .formulierdonker .gform_wrapper .gform_page_footer input[type=submit]:hover {
	border-color: #DF231D !important;
	background: transparent !important;
	color: #fff !important;
}
body .formulierdonker .gform_wrapper.gform-theme {
	--gf-color-primary: #fff !important;
	--gf-color-primary-rgb: 255, 255, 255 !important;
	--gf-color-primary-contrast: #010101 !important;
}

@media (prefers-reduced-motion: reduce) {
	body .gform_wrapper .gform_footer .gform_button,
	body .gform_wrapper .gform_page_footer .button { transition: none !important; }
}