/*
 * Footer newsletter, Figma nodes 6643:17725 (focus), 6643:17837 (standaard),
 * 6643:17949 (fout) en 6643:18061 (bedankt).
 *
 * Gravity Forms laadt zijn CSS later dan deze file, daarom staan de selectors
 * dubbel (.footer-newsletter.footer-newsletter, .gform_wrapper.gform_wrapper)
 * zodat ze altijd winnen van GF en van de thema-styling.
 * Iconen staan inline als data-URI, er zijn geen losse afbeeldingen nodig.
 */

.footer-newsletter.footer-newsletter {
	--fn-blue: #11455A;
	--fn-green: #9eff00;
	--fn-white: #ffffff;
	--fn-red: #ff7171;
	--fn-line: rgba(255, 255, 255, 0.35);
	--fn-line-hover: rgba(255, 255, 255, 0.65);
	--fn-font: "PP Neue Montreal", sans-serif;
	--fn-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--fn-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
	--fn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M8 16L24 16M18 22L24 16L18 10' stroke='%232F3034' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--fn-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M10.4853 21.9999L21.799 10.6862' stroke='%23003A51' stroke-linecap='round'/%3E%3Cpath d='M10.4853 10.4864L21.799 21.8001' stroke='%23003A51' stroke-linecap='round'/%3E%3C/svg%3E");
	--fn-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='%23003A51' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	display: flex;
	flex-direction: column;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	max-width:100%;
	margin: 0;
	padding: 24px;
	border-radius: 10px;
	background: var(--fn-blue);
	color: var(--fn-white);
	font-family: var(--fn-font);
	overflow: hidden;
}

.footer-newsletter.footer-newsletter *,
.footer-newsletter.footer-newsletter *::before,
.footer-newsletter.footer-newsletter *::after {
	box-sizing: border-box;
}

/* Kop en toelichting */
.footer-newsletter.footer-newsletter .footer-newsletter__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	word-break: break-word;
}

.footer-newsletter.footer-newsletter .footer-newsletter__heading {
	margin: 0;
	padding: 0;
	color: var(--fn-white);
	font-family: var(--fn-font);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

.footer-newsletter.footer-newsletter .footer-newsletter__text {
	margin: 0;
	padding: 0;
	color: var(--fn-white);
	font-family: var(--fn-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}

/* Gravity Forms reset */
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper {
	margin: 0;
	padding: 0;
	max-width: none;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper form {
	position: relative;
	width: 100%;
	margin: 0;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_heading,
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_required_legend,
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_validation_errors,
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_ajax_spinner {
	display: none;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_body {
	margin: 0;
	padding: 0;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield {
	position: relative;
	width: 100%;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* E-mailveld */
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email {
	padding-top: 10px;
}

/* Label: zwevend in de rand (focus en fout) */
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email .gfield_label {
	position: absolute;
	top: 0;
	left: 8px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 1px 6px;
	background-color: var(--fn-blue);
	color: var(--fn-green);
	font-family: var(--fn-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	white-space: nowrap;
	transform: translate(0, 0) scale(1);
	transform-origin: left center;
	pointer-events: none;
	transition:
		transform 0.35s var(--fn-ease),
		color 0.25s ease,
		background-color 0.25s ease,
		opacity 0.25s ease;
}

/* Label: als placeholder in het veld (leeg en geen focus) */
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email:not(:focus-within):not(.gfield_error):has(input:placeholder-shown) .gfield_label {
	background-color: transparent;
	color: var(--fn-white);
	font-weight: 400;
	transform: translate(5px, 22.8px) scale(1.143);
}

/* Label: weg als het veld is ingevuld en je eruit klikt */
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email:not(:focus-within):not(.gfield_error):has(input:not(:placeholder-shown)) .gfield_label {
	opacity: 0;
	transform: translate(0, 4px) scale(0.96);
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email .gfield_label * {
	color: inherit;
	font: inherit;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email .gfield_required {
	display: inline;
	margin: 0;
	padding: 0;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email .ginput_container {
	margin: 0;
	padding: 0;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email input[type="email"],
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email input[type="text"] {
	display: block;
	width: 100%;
	max-width: none;
	height: 50px;
	min-height: 0;
	margin: 0;
	padding: 0 50px 0 19px;
	border: 1px solid var(--fn-line);
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: var(--fn-white);
	font-family: var(--fn-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	caret-color: var(--fn-green);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Het label doet dienst als placeholder */
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email input::placeholder {
	color: transparent;
	opacity: 0;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email input:-webkit-autofill {
	-webkit-text-fill-color: var(--fn-white);
	/* -webkit-box-shadow: 0 0 0 1000px var(--fn-blue) inset; */
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email input:hover {
	border-color: var(--fn-line-hover);
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email:focus-within input {
	border-color: var(--fn-green);
}

/* Fout */
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email.gfield_error .gfield_label {
	color: var(--fn-red);
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email.gfield_error input {
	border-color: var(--fn-red);
	box-shadow: none;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-email.gfield_error .ginput_container {
	animation: fn-shake 0.45s ease both;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield_validation_message,
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .validation_message {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fn-red);
	font-family: var(--fn-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	animation: fn-fade-down 0.35s var(--fn-ease) both;
}

/* Bevestigingsveld voor e-mail niet gebruiken */
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .ginput_container_email .ginput_right {
	display: none;
}

/* Akkoord-checkbox */
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-consent > .gfield_label,
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-consent > legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .ginput_container_consent {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .ginput_container_consent input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 3.2px;
	background-color: var(--fn-blue);
	background-image: var(--fn-check);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0 0;
	box-shadow: none;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		background-size 0.3s var(--fn-bounce),
		transform 0.15s ease;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .ginput_container_consent input[type="checkbox"]::before,
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .ginput_container_consent input[type="checkbox"]::after {
	content: none;
	display: none;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .ginput_container_consent input[type="checkbox"]:hover {
	border-color: var(--fn-green);
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .ginput_container_consent input[type="checkbox"]:active {
	transform: scale(0.88);
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .ginput_container_consent input[type="checkbox"]:checked {
	border-color: var(--fn-green);
	background-color: var(--fn-green);
	background-size: 12px 12px;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .ginput_container_consent input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--fn-white);
	outline-offset: 2px;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield_consent_label {
	display: inline;
	margin: 0;
	padding: 0;
	color: var(--fn-white);
	font-family: var(--fn-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	cursor: pointer;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield_consent_label a {
	color: inherit;
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
	transition: color 0.2s ease;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield_consent_label a:hover {
	color: var(--fn-green);
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-consent .gfield_required,
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gfield--type-consent .gfield_description:not(.validation_message) {
	display: none;
}

/* Verzendknop in het e-mailveld */
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_footer {
	position: absolute;
	top: 19px;
	right: 9px;
	z-index: 3;
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_footer input[type="submit"],
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_footer button {
	display: block;
	width: 32px;
	min-width: 0;
	height: 32px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background-color: var(--fn-green);
	/* Twee pijlen: de zichtbare en een wachtende links buiten de knop */
	background-image: var(--fn-arrow), var(--fn-arrow);
	background-position: 0 0, -32px 0;
	background-repeat: no-repeat;
	background-size: 32px 32px;
	box-shadow: none;
	color: transparent;
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		background-position 0.5s var(--fn-ease),
		transform 0.25s var(--fn-bounce),
		border-radius 0.25s ease;
}

/* Hover: pijl schiet rechts weg, nieuwe pijl komt van links binnen */
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_footer input[type="submit"]:hover,
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_footer button:hover {
	background-position: 32px 0, 0 0;
	border-radius: 6px;
	transform: scale(1.08);
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_footer input[type="submit"]:active,
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_footer button:active {
	transform: scale(0.92);
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_footer button:focus-visible {
	outline: 2px solid var(--fn-white);
	outline-offset: 2px;
}

/* Knop geeft een tikje zodra er iets is ingevuld */
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper form:has(.gfield--type-email input:not(:placeholder-shown)) .gform_footer input[type="submit"],
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper form:has(.gfield--type-email input:not(:placeholder-shown)) .gform_footer button {
	animation: fn-nudge 0.5s var(--fn-ease) 1;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper form:has(.gfield--type-email.gfield_error) .gform_footer input[type="submit"],
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper form:has(.gfield--type-email.gfield_error) .gform_footer button {
	background-color: var(--fn-red);
	background-image: var(--fn-cross);
	background-position: 0 0;
	box-shadow: none;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper form:has(.gfield--type-email.gfield_error) .gform_footer input[type="submit"]:hover,
.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper form:has(.gfield--type-email.gfield_error) .gform_footer button:hover {
	background-position: 0 0;
	transform: scale(1.08) rotate(90deg);
}

/* Bedankt */
.footer-newsletter.footer-newsletter .gform_confirmation_wrapper,
.footer-newsletter.footer-newsletter .gform_confirmation_message {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fn-white);
}

.footer-newsletter.footer-newsletter .footer-newsletter__thanks {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer-newsletter.footer-newsletter .footer-newsletter__thanks-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 50px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--fn-line);
	border-radius: 8px;
	background: var(--fn-green);
	color: var(--fn-blue);
	font-family: var(--fn-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	animation: fn-pop 0.5s var(--fn-bounce) both;
}

.footer-newsletter.footer-newsletter .footer-newsletter__thanks-banner svg {
	display: block;
	flex: 0 0 auto;
}

.footer-newsletter.footer-newsletter .footer-newsletter__thanks-banner svg path {
	stroke-dasharray: 20;
	stroke-dashoffset: 20;
	animation: fn-draw 0.4s ease 0.35s forwards;
}

.footer-newsletter.footer-newsletter .footer-newsletter__thanks-text {
	margin: 0;
	padding: 0;
	color: var(--fn-white);
	font-family: var(--fn-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	animation: fn-fade-up 0.45s var(--fn-ease) 0.2s both;
}

.footer-newsletter.footer-newsletter .footer-newsletter__thanks-text a {
	color: inherit;
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
}

/* Animaties */
@keyframes fn-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(2px); }
}

@keyframes fn-fade-down {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes fn-fade-up {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes fn-pop {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes fn-draw {
	to { stroke-dashoffset: 0; }
}

@keyframes fn-nudge {
	0% { transform: scale(1); }
	40% { transform: scale(1.12); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.footer-newsletter.footer-newsletter *,
	.footer-newsletter.footer-newsletter *::before,
	.footer-newsletter.footer-newsletter *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}