/**
 * Roskam — Gravity Forms (globale styling)
 */

:root {
	--rf-primary: #006dc2;
	--rf-primary-ring: rgba(0, 109, 194, 0.2);
	--rf-cta: #d40c1a;
	--rf-cta-hover-filter: brightness(1.1);
	--rf-foreground: #07121e;
	--rf-foreground-muted: #555f69;
	--rf-required: #d40c1a;
	--rf-label-gap: 0.375rem;
	--rf-field-gap: 1.25rem;
	--rf-border: #dfe6eb;
	--rf-border-input: #dfe6eb;
	--rf-bg: #ffffff;
	--rf-radius-field: 0.75rem;
	--rf-field-height: 2.625rem;
	--rf-radius-btn: 9999px;
	--rf-shadow-btn: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--rf-shadow-btn-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
	--rf-font: 'Inter', system-ui, sans-serif;
}

/* ── Wrapper + spacing ─────────────────────────────────────── */

.gform_wrapper {
	font-family: var(--rf-font);
	color: var(--rf-foreground);
}

.gform_wrapper .gform_fields {
	gap: var(--rf-field-gap);
	row-gap: var(--rf-field-gap);
}

.gform_wrapper .gfield {
	margin: 0;
}

/* ── Labels ────────────────────────────────────────────────── */

body .gform_wrapper .gfield_label,
body .gform_wrapper .gform-field-label,
body .gform-theme--framework .gfield_label,
body .gform-theme--framework .gform-field-label {
	display: block;
	margin: 0 !important;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 600 !important;
	color: var(--rf-foreground);
	line-height: 1.4;
}

body .gform_wrapper .gform-field-label__text,
body .gform-theme--framework .gform-field-label__text {
	font-weight: 600 !important;
}

/* Orbital negeert label-margin; ruimte via input-container (GF-documentatie) */
body .gform_wrapper .gfield .ginput_container,
body .gform-theme--framework .gfield .ginput_container {
	padding-block-start: var(--rf-label-gap) !important;
	margin-block-start: 0 !important;
}

.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_text_asterisk {
	color: var(--rf-required);
	margin-left: 0.15rem;
	font-weight: 400;
}

/* ── Inputs ────────────────────────────────────────────────── */

.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="url"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--rf-foreground);
	background: var(--rf-bg);
	border: 1px solid var(--rf-border-input);
	border-radius: var(--rf-radius-field);
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-shadow: none;
}

.gform_wrapper .ginput_container textarea {
	min-height: 7.5rem;
	resize: none;
}

.gform_wrapper .ginput_container input::placeholder,
.gform_wrapper .ginput_container textarea::placeholder {
	color: var(--rf-foreground-muted);
}

.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container textarea:focus {
	border-color: var(--rf-primary);
	box-shadow: 0 0 0 2px var(--rf-primary-ring);
}

/* Select — eigen blok; GF Orbital zet padding later via theme-variabelen */
body .gform_wrapper .gfield--type-select {
	--gf-ctrl-border-color: var(--rf-border-input);
	--gf-ctrl-border-color-hover: var(--rf-border-input);
	--gf-ctrl-border-color-focus: var(--rf-primary);
	--gf-ctrl-shadow: none;
	--gf-ctrl-padding-block: 0;
	--gf-ctrl-padding-inline: 0;
	--gf-ctrl-size: var(--rf-field-height);
	--gf-ctrl-min-size: var(--rf-field-height);
}

body .gform_wrapper .ginput_container select,
body .gform_wrapper .gfield--type-select select.gform-theme-field-control {
	box-sizing: border-box;
	width: 100%;
	height: var(--rf-field-height);
	min-height: var(--rf-field-height);
	max-height: var(--rf-field-height);
	padding: 0 2.5rem 0 1rem;
	font: inherit;
	font-size: 0.875rem;
	line-height: calc(var(--rf-field-height) - 2px);
	color: var(--rf-foreground);
	background-color: var(--rf-bg);
	border: 1px solid var(--rf-border-input);
	border-radius: var(--rf-radius-field);
	outline: none;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230B0F1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 16px 16px;
}

body .gform_wrapper .ginput_container select:focus,
body .gform_wrapper .gfield--type-select select.gform-theme-field-control:focus {
	border-color: var(--rf-primary);
	box-shadow: 0 0 0 2px var(--rf-primary-ring);
}

/* ── Validatie ─────────────────────────────────────────────── */

.gform_wrapper .gfield_error .ginput_container input,
.gform_wrapper .gfield_error .ginput_container textarea,
.gform_wrapper .gfield_error .ginput_container select {
	border-color: var(--rf-cta);
	box-shadow: none;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	background: none;
	border: 0;
	padding: 0;
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--rf-cta);
}

.gform_wrapper .gform_validation_errors {
	display: none;
}

/* ── Checkbox / radio ────────────────────────────────────── */

.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.gform_wrapper .gfield_checkbox input[type="checkbox"],
.gform_wrapper .gfield_radio input[type="radio"] {
	width: 1rem;
	height: 1rem;
	margin: 0.125rem 0 0;
	flex-shrink: 0;
	border: 1px solid var(--rf-border);
	background: var(--rf-bg);
	accent-color: var(--rf-primary);
	cursor: pointer;
}

.gform_wrapper .gfield_checkbox input[type="checkbox"] {
	border-radius: 0.25rem;
}

.gform_wrapper .gfield_radio input[type="radio"] {
	border-radius: 9999px;
}

.gform_wrapper .gfield_checkbox .gchoice label,
.gform_wrapper .gfield_radio .gchoice label {
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--rf-foreground);
	line-height: 1.4;
	cursor: pointer;
}

/* ── GF Orbital theme tokens ───────────────────────────────── */

body:has(#gravity_forms_theme_framework-css) .gform-theme--framework.gform-theme--orbital,
.gform_wrapper.gform-theme--framework,
.gform-theme--framework {
	--gf-color-primary: var(--rf-primary);
	--gf-ctrl-border-color: var(--rf-border-input);
	--gf-ctrl-border-color-hover: var(--rf-border-input);
	--gf-ctrl-border-color-focus: var(--rf-primary);
	--gf-ctrl-shadow: none;
	--gf-ctrl-padding-block: 0.75rem;
	--gf-ctrl-padding-inline: 1rem;
	--gf-ctrl-btn-bg-color-primary: #d40c1a;
	--gf-ctrl-btn-bg-color-hover-primary: #d40c1a;
	--gf-ctrl-btn-color-primary: #ffffff;
	--gf-ctrl-btn-radius: 9999px;
	--gf-ctrl-btn-font-weight: 700;
	--gf-ctrl-btn-padding-y: 0.875rem;
	--gf-ctrl-btn-padding-x: 1.75rem;
	--gf-ctrl-label-font-weight-primary: 600;
	--gf-ctrl-label-font-size-primary: 0.875rem;
	--gf-field-gap-y: 1.25rem;
	--gf-form-gap-y: 1.25rem;
}

body:has(#gravity_forms_theme_framework-css) .gform-theme--framework.gform-theme--orbital .gform_footer,
body:has(#gravity_forms_theme_framework-css) .gform-theme--framework.gform-theme--orbital .gform_page_footer,
.gform_wrapper.gform-theme--framework .gform_footer,
.gform_wrapper.gform-theme--framework .gform_page_footer {
	--gf-ctrl-btn-bg-color-primary: #d40c1a;
	--gf-ctrl-btn-bg-color-hover-primary: #d40c1a;
	--gf-ctrl-btn-radius: 9999px;
}

/* ── Submit ────────────────────────────────────────────────── */

.gform_wrapper .gform_footer {
	margin-top: 1.25rem;
	padding: 0;
}

body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer input.gform_button,
body .gform_wrapper .gform_footer button[type="submit"],
body .gform_wrapper .gform_footer button.gform_button,
body .gform_wrapper .gform_footer button.gform-theme-button,
body .gform-theme--framework .gform_footer input[type="submit"].gform_button,
body .gform-theme--framework .gform_footer button[type="submit"].gform_button,
body .gform-theme--framework .gform_footer button.gform_button,
body .gform-theme--framework .gform_footer button.gform-theme-button,
body .gform-theme--framework #field_submit button[type="submit"].gform_button,
body .gform-theme--framework .gfield--type-submit button[type="submit"],
body .gform_wrapper .gform_page_footer input[type="submit"],
body .gform_wrapper .gform_page_footer button[type="submit"],
body .gform_wrapper .gform_page_footer button.gform_button,
body .gform_wrapper .gform_page_footer input.gform_button,
body .gform_wrapper [id^="gform_submit_button_"] {
	--gf-ctrl-btn-bg-color-primary: #d40c1a;
	--gf-ctrl-btn-bg-color-hover-primary: #d40c1a;
	--gf-ctrl-btn-radius: 9999px;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	font-family: var(--rf-font);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	background: #d40c1a !important;
	background-color: #d40c1a !important;
	border: 0 !important;
	border-radius: 9999px !important;
	box-shadow: var(--rf-shadow-btn);
	cursor: pointer;
	transition:
		box-shadow 0.15s ease,
		filter 0.15s ease;
}

body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_footer input.gform_button:hover,
body .gform_wrapper .gform_footer button[type="submit"]:hover,
body .gform_wrapper .gform_footer button.gform_button:hover,
body .gform-theme--framework .gform_footer input[type="submit"].gform_button:hover,
body .gform-theme--framework .gform_footer button[type="submit"].gform_button:hover,
body .gform-theme--framework #field_submit button[type="submit"].gform_button:hover,
body .gform_wrapper .gform_page_footer input[type="submit"]:hover,
body .gform_wrapper .gform_page_footer button[type="submit"]:hover,
body .gform_wrapper .gform_page_footer button.gform_button:hover,
body .gform_wrapper .gform_page_footer input.gform_button:hover {
	color: #ffffff;
	background-color: #d40c1a;
	filter: var(--rf-cta-hover-filter);
	box-shadow: var(--rf-shadow-btn-hover);
}

body .gform_wrapper .gform_footer input[type="submit"]:focus,
body .gform_wrapper .gform_footer input.gform_button:focus,
body .gform_wrapper .gform_footer button[type="submit"]:focus,
body .gform_wrapper .gform_footer button.gform_button:focus,
body .gform_wrapper .gform_footer input[type="submit"]:active,
body .gform_wrapper .gform_footer input.gform_button:active,
body .gform_wrapper .gform_footer button[type="submit"]:active,
body .gform_wrapper .gform_footer button.gform_button:active,
body .gform-theme--framework .gform_footer input[type="submit"].gform_button:focus,
body .gform-theme--framework .gform_footer button[type="submit"].gform_button:focus,
body .gform-theme--framework .gform_footer input[type="submit"].gform_button:active,
body .gform-theme--framework .gform_footer button[type="submit"].gform_button:active,
body .gform-theme--framework #field_submit button[type="submit"].gform_button:focus,
body .gform-theme--framework #field_submit button[type="submit"].gform_button:active,
body .gform_wrapper .gform_page_footer input[type="submit"]:focus,
body .gform_wrapper .gform_page_footer button[type="submit"]:focus,
body .gform_wrapper .gform_page_footer button.gform_button:focus,
body .gform_wrapper .gform_page_footer input.gform_button:focus,
body .gform_wrapper .gform_page_footer input[type="submit"]:active,
body .gform_wrapper .gform_page_footer button[type="submit"]:active,
body .gform_wrapper .gform_page_footer button.gform_button:active,
body .gform_wrapper .gform_page_footer input.gform_button:active {
	color: #ffffff;
	background-color: #d40c1a;
	border-radius: 9999px;
}

body .gform_wrapper .gform_footer input[type="submit"]:focus-visible,
body .gform_wrapper .gform_footer input.gform_button:focus-visible,
body .gform_wrapper .gform_footer button[type="submit"]:focus-visible,
body .gform_wrapper .gform_footer button.gform_button:focus-visible,
body .gform-theme--framework .gform_footer input[type="submit"].gform_button:focus-visible,
body .gform-theme--framework .gform_footer button[type="submit"].gform_button:focus-visible,
body .gform-theme--framework #field_submit button[type="submit"].gform_button:focus-visible,
body .gform_wrapper .gform_page_footer input[type="submit"]:focus-visible,
body .gform_wrapper .gform_page_footer button[type="submit"]:focus-visible,
body .gform_wrapper .gform_page_footer button.gform_button:focus-visible,
body .gform_wrapper .gform_page_footer input.gform_button:focus-visible {
	outline: 2px solid #d40c1a;
	outline-offset: 3px;
}

.gform_wrapper .gform_button svg,
.gform_wrapper [id^="gform_submit_button_"] svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: currentColor;
}

/* ── Bevestiging (.gform_confirmation_message) ─────────────── */

.gform_confirmation_wrapper .gform_confirmation_message,
.gform_confirmation_message {
	background-color: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 16px;
	padding: 32px;
	text-align: center;
	box-sizing: border-box;
	width: 100%;
	color: #15803d;
	font-size: var(--rk-font-size-sm, 0.875rem);
	line-height: 1.5;
}

.gform_confirmation_message__icon {
	width: 40px;
	height: 40px;
	color: var(--rk-success, #16a34a);
	margin: 0 auto 16px;
	display: block;
}

.gform_confirmation_message__body {
	margin: 0;
}

.gform_confirmation_message__body > :first-child {
	margin-top: 0;
}

.gform_confirmation_message__body > :last-child {
	margin-bottom: 0;
}

.gform_confirmation_message__body h1,
.gform_confirmation_message__body h2,
.gform_confirmation_message__body h3,
.gform_confirmation_message__body h4,
.gform_confirmation_message__body strong:only-child,
.gform_confirmation_message__body p:first-child strong {
	color: #166534;
	font-size: var(--rk-font-size-lg, 1.125rem);
	font-weight: 700;
	margin: 16px 0 4px;
	line-height: 1.4;
}

.gform_confirmation_message__body p {
	color: #15803d;
	font-size: var(--rk-font-size-sm, 0.875rem);
	margin: 0 0 0.5rem;
	line-height: 1.5;
}

.gform_confirmation_message__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: var(--rk-primary, #006dc2);
	color: var(--rk-text-inverse, #ffffff);
	border: none;
	border-radius: var(--rk-radius-full, 9999px);
	padding: 10px 24px;
	font-size: var(--rk-font-size-sm, 0.875rem);
	font-weight: 700;
	line-height: 1.25;
	margin-top: 24px;
	cursor: pointer;
	transition: background-color var(--rk-transition-fast, 150ms ease-out);
}

.gform_confirmation_message__button:hover {
	background-color: var(--rk-primary-dark, #004d90);
}

.gform_confirmation_message__button:focus-visible {
	outline: 2px solid var(--rk-primary-dark, #004d90);
	outline-offset: 3px;
}

.gform_confirmation_message__button-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: currentColor;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (min-width: 640px) {
	.gform_wrapper .gform_fields .gf_left_half,
	.gform_wrapper .gform_fields .gf_right_half {
		width: calc(50% - 0.5rem);
	}

	.gform_wrapper .gform_fields:has(.gf_left_half, .gf_right_half) {
		gap: 1rem 1rem;
	}
}

@media (max-width: 639px) {
	.gform_wrapper .gform_fields .gf_left_half,
	.gform_wrapper .gform_fields .gf_right_half {
		width: 100%;
	}
}