/*
 * The membership step in Gravity Forms: the "Custom Lid Worden" field as
 * radio cards, plus the form around it (stepper, consent, Volgende/Vorige).
 *
 * Only forms that hold the field get the class .klsp-gf on their <form>
 * (gform_pre_render; Gravity Forms puts a form's CSS class there),
 * and every colour comes from the plugin's tokens (--klsp-*, Presale →
 * Kleuren), so each club's form follows its own site. Type and size follow
 * the theme (Divi sets Poppins); nothing here names a form ID.
 */

.klsp-gf {
	--_accent: var(--klsp-active, var(--klsp-button-bg, #111827));
	--_accent-ink: color-mix(in srgb, var(--_accent) 65%, #000);
	--_btn-bg: var(--klsp-button-bg, #111827);
	--_btn-text: var(--klsp-button-text, #fff);
	--_ink: var(--klsp-title, #101d30);
	--_text: var(--klsp-text, #222);
	--_muted: color-mix(in srgb, var(--_text) 72%, #fff);
	--_line: color-mix(in srgb, var(--_ink) 14%, #fff);
	--_card: var(--klsp-bg, #fff);
	--_tint: color-mix(in srgb, var(--_accent) 16%, #fff);
	--_second: var(--klsp-button2-bg, #c79b62);
	--_check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--_dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

/* ---------- Radio cards ---------- */

/* Columns follow the number of cards in view (klsp-n*), so no row ends with an orphan. */
.klsp-gf .gfield--type-moov_joining_field .ginput_container_radio {
	container-type: inline-size;
}

.klsp-gf .gfield--type-moov_joining_field .gfield_radio {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	/* Every card as tall as the tallest in its row. */
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.klsp-gf .gfield--type-moov_joining_field .gfield_radio > li {
	display: block;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.klsp-gf .custom-radio-item,
.et-db #et-boc .et-l .klsp-gf .custom-radio-item {
	height: 100%;
	border-radius: 16px;
	background: var(--_card);
	box-shadow: inset 0 0 0 1px var(--_line);
	transition: box-shadow .15s;
}

.klsp-gf .custom-radio-item label {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	margin: 0;
	padding: 24px;
	cursor: pointer;
	color: var(--_text);
	font-weight: 500;
}

.klsp-gf .custom-radio-item:has(input:checked) {
	box-shadow: inset 0 0 0 2px var(--_accent), 0 18px 40px rgba(16, 29, 48, .10);
}

@media (hover: hover) {
	.klsp-gf .custom-radio-item:hover {
		box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--_accent) 55%, #fff);
	}
	.klsp-gf .custom-radio-item:has(input:checked):hover {
		box-shadow: inset 0 0 0 2px var(--_accent), 0 18px 40px rgba(16, 29, 48, .10);
	}
}

.klsp-gf .custom-radio-item:has(input:focus-visible) {
	outline: 3px solid color-mix(in srgb, var(--_accent) 60%, #fff);
	outline-offset: 3px;
}

.klsp-gf .custom-radio-top-container {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.klsp-gf .custom-radio-title-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

/* The radio itself: drawn, but still the real, focusable input. */
.klsp-gf .custom-radio-top-container input[type="radio"],
.gform-theme--framework .klsp-gf .custom-radio-top-container input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--_card);
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--_text) 55%, #fff);
	outline: none;
	cursor: pointer;
	transition: box-shadow .15s;
}

.klsp-gf .custom-radio-top-container input[type="radio"]::before,
.klsp-gf .custom-radio-top-container input[type="radio"]::after {
	content: none;
	display: none;
}

.klsp-gf .custom-radio-top-container input[type="radio"]:checked,
.gform-theme--framework .klsp-gf .custom-radio-top-container input[type="radio"]:checked {
	background: var(--_card);
	box-shadow: inset 0 0 0 7px var(--_accent);
}

.klsp-gf .custom-radio-title {
	flex: 1 1 auto;
	color: var(--_ink);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.klsp-gf .custom-radio-highlight {
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--_accent);
	color: var(--klsp-button-text, #fff);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.klsp-gf .custom-radio-price-container {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}

.klsp-gf .custom-radio-price {
	order: 1;
	color: var(--_ink);
	font-size: 36px;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.klsp-gf .custom-radio-original-price {
	order: 2;
	color: var(--_muted);
	font-size: 16px;
	text-decoration: line-through;
}

/* On the price's line, as the design; it wraps under it when the card is narrow. */
.klsp-gf .custom-radio-text {
	order: 3;
	color: var(--_muted);
	font-size: 14px;
	font-weight: 500;
}

/* Inside a row the cards share their rows (subgrid) through li, item and
   label: title, price and list line up across the cards. */
@supports (grid-template-rows: subgrid) {
	.klsp-gf .gfield--type-moov_joining_field .gfield_radio > li,
	.klsp-gf .gfield--type-moov_joining_field .custom-radio-item,
	.klsp-gf .gfield--type-moov_joining_field .custom-radio-item label {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		row-gap: 0;
	}
	.klsp-gf .gfield--type-moov_joining_field .custom-radio-top-container {
		display: contents;
	}
	.klsp-gf .gfield--type-moov_joining_field .custom-radio-title-container { grid-row: 1; }
	.klsp-gf .gfield--type-moov_joining_field .custom-radio-price-container { grid-row: 2; margin-top: 14px; align-self: start; }
	.klsp-gf .gfield--type-moov_joining_field .custom-radio-bottom-container { grid-row: 3; margin-top: 14px; }
}

/* ---------- Duration switch (two or more durations) ---------- */

.klsp-gf .klsp-gf-plans .klsp-tabs {
	display: flex;
	width: fit-content;
	gap: 4px;
	margin: 0 auto 24px;
	padding: 4px;
	border-radius: 12px;
	background: var(--_card);
	box-shadow: inset 0 0 0 1px var(--_line);
}

.klsp-gf .klsp-gf-plans .klsp-tab {
	min-height: 44px;
	margin: 0;
	padding: 10px 20px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--_text);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.klsp-gf .klsp-gf-plans .klsp-tab[aria-pressed="true"] {
	background: var(--_accent);
	color: var(--klsp-button-text, #fff);
}

.klsp-gf .klsp-gf-plans .klsp-tab:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--_accent) 60%, #fff);
	outline-offset: 2px;
}

.klsp-gf .gfield_radio > li[hidden] {
	display: none;
}

@container (min-width: 560px) {
	.klsp-gf .gfield_radio:is(.klsp-n2, .klsp-n4, .klsp-n6) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 820px) {
	.klsp-gf .gfield_radio:is(.klsp-n3, .klsp-n5, .klsp-n6) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (min-width: 1040px) {
	.klsp-gf .gfield_radio.klsp-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- What's included ---------- */

.klsp-gf .custom-radio-bottom-container,
.klsp-gf .custom-radio-usp {
	display: block;
}

.klsp-gf .custom-radio-usp ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.klsp-gf .custom-radio-usp li {
	position: relative;
	margin: 0;
	padding: 0 0 0 30px;
	color: var(--_text);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	list-style: none;
}

.klsp-gf .custom-radio-usp li::before {
	content: "";
	position: absolute;
	top: .1em;
	left: 0;
	width: 20px;
	height: 20px;
	background: var(--_accent-ink);
	-webkit-mask: var(--_check) center / contain no-repeat;
	mask: var(--_check) center / contain no-repeat;
}

.klsp-gf .custom-radio-usp li.false {
	color: var(--_muted);
}

.klsp-gf .custom-radio-usp li.false::before {
	background: var(--_muted);
	-webkit-mask-image: var(--_dash);
	mask-image: var(--_dash);
}

.klsp-gf .custom-radio-usp li.gold {
	color: var(--_ink);
	font-weight: 600;
}

/* Abonnementen → "Label bij uitgelichte punten", in the second colour's tint. */
.klsp-gf .klsp-usp-label {
	display: inline-block;
	margin-left: 6px;
	padding: 3px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--_second) 20%, #fff);
	color: color-mix(in srgb, var(--_second) 45%, #000);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	vertical-align: 1px;
	white-space: nowrap;
}

/* ---------- Stepper (Gravity Forms progress indicator "Stappen") ---------- */

.klsp-gf .gf_page_steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
	border: 0;
}

.klsp-gf .gf_step {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--_muted);
	font-size: 15px;
	font-weight: 600;
	opacity: 1;
}

.klsp-gf .gf_step + .gf_step::before {
	content: "";
	display: block;
	width: 64px;
	height: 2px;
	margin-right: 2px;
	background: var(--_line);
}

.klsp-gf .gf_step .gf_step_number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: var(--_card);
	box-shadow: inset 0 0 0 2px var(--_line);
	color: var(--_muted);
	font-size: 14px;
	font-weight: 700;
}

.klsp-gf .gf_step_active,
.klsp-gf .gf_step_completed {
	color: var(--_ink);
}

.klsp-gf .gf_step_active .gf_step_number,
.klsp-gf .gf_step_completed .gf_step_number {
	background: var(--_accent);
	box-shadow: none;
	color: var(--klsp-button-text, #fff);
}

.klsp-gf .gf_step_completed .gf_step_number::before,
.klsp-gf .gf_step_completed .gf_step_number::after {
	background: var(--_accent);
	border-color: var(--_accent);
}

/* ---------- Progress bar (Gravity Forms progress indicator "Voortgangsbalk") ---------- */

.klsp-gf .gf_progressbar_wrapper {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
}

.klsp-gf .gf_progressbar_title {
	margin: 0 0 10px;
	color: var(--_muted);
	font-size: 15px;
	font-weight: 600;
}

.klsp-gf .gf_progressbar {
	height: 8px;
	padding: 0;
	border-radius: 999px;
	background: var(--_tint);
	box-shadow: none;
	overflow: hidden;
}

.klsp-gf .gf_progressbar_percentage {
	height: 100%;
	border-radius: 999px;
	background: var(--_accent);
	color: transparent;
}

.klsp-gf .gf_progressbar_percentage span {
	display: none;
}

/* ---------- A radio field as a switch ----------
   Give a Gravity Forms radio field (e.g. "Looptijd lidmaatschap", which shows
   the 6 or 12 months field) the CSS class klsp-gf-switch. */

/* Orbital lays choices out in a column (and each choice as a grid). */
.gform-theme--framework .klsp-gf .gfield.klsp-gf-switch .gfield_radio,
.klsp-gf .gfield.klsp-gf-switch .gfield_radio {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	border-radius: 12px;
	background: var(--_card);
	box-shadow: inset 0 0 0 1px var(--_line);
}

.gform-theme--framework .klsp-gf .gfield.klsp-gf-switch .gchoice,
.klsp-gf .gfield.klsp-gf-switch .gchoice {
	display: block;
	position: relative;
	margin: 0;
}

.klsp-gf .gfield.klsp-gf-switch .gchoice input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.klsp-gf .gfield.klsp-gf-switch .gchoice label {
	display: block;
	max-width: none;
	margin: 0;
	padding: 10px 20px;
	border-radius: 9px;
	color: var(--_text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

/* A second line in a choice's label (the old form: "Incl. levenslange korting") is left out:
   the note under the switch says it once, and the pills stay one line, as the design. */
.klsp-gf .gfield.klsp-gf-switch .gchoice label :is(span, br) {
	display: none;
}

.klsp-gf .gfield.klsp-gf-switch .gchoice:has(input:checked) label {
	background: var(--_accent);
	color: var(--klsp-button-text, #fff);
}

.klsp-gf .gfield.klsp-gf-switch .gchoice:has(input:focus-visible) label {
	outline: 2px solid var(--_accent);
	outline-offset: 1px;
}

/* ---------- Consent and other checkboxes ---------- */

.klsp-gf .gfield--type-consent input[type="checkbox"],
.klsp-gf .gfield--type-checkbox input[type="checkbox"] {
	width: 22px;
	height: 22px;
	accent-color: var(--_accent);
}

.klsp-gf .gfield--type-consent label {
	color: var(--_text);
	font-size: 15px;
	font-weight: 500;
}

/* ---------- Volgende, Vorige, Verzenden ---------- */

.klsp-gf .gform_page_footer,
.klsp-gf .gform_footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 12px 16px;
	padding-top: 24px;
	border-top: 1px solid var(--_line);
}

.klsp-gf .gform_page_footer .gform_previous_button {
	margin-right: auto;
}

.gform-theme--framework .klsp-gf .gform_next_button.button,
.gform-theme--framework .klsp-gf .gform_button.button,
.klsp-gf .gform_next_button,
.klsp-gf .gform_button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 15px 25px;
	border: 0;
	border-radius: 12px;
	background: var(--_btn-bg);
	color: var(--_btn-text);
	font: inherit;
	font-size: 18px;
	line-height: 1.2;
	cursor: pointer;
}

.klsp-gf .klsp-arrow {
	flex: none;
	width: 18px;
	height: 18px;
}

.gform-theme--framework .klsp-gf .gform_previous_button.button,
.klsp-gf .gform_previous_button {
	min-height: 48px;
	padding: 13px 23px;
	border: 2px solid var(--_line);
	border-radius: 12px;
	background: transparent;
	color: var(--_ink);
	font: inherit;
	font-size: 16px;
	cursor: pointer;
}

.klsp-gf .gform_next_button:hover,
.klsp-gf .gform_button:hover {
	filter: brightness(.94);
}

.klsp-gf .gform_previous_button:hover {
	border-color: var(--_accent);
}

.klsp-gf .gform_next_button:focus-visible,
.klsp-gf .gform_button:focus-visible,
.klsp-gf .gform_previous_button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--_accent) 60%, #fff);
	outline-offset: 3px;
}

/* ---------- Phone ---------- */

@media (max-width: 600px) {
	.klsp-gf .custom-radio-item label {
		padding: 20px;
	}
	.klsp-gf .custom-radio-price {
		font-size: 30px;
	}
	.klsp-gf .gf_step + .gf_step::before {
		width: 24px;
	}
	/* One line: only the current step keeps its label. */
	.klsp-gf .gf_page_steps {
		flex-wrap: nowrap;
	}
	.klsp-gf .gf_step:not(.gf_step_active) .gf_step_label {
		display: none;
	}
	.klsp-gf .klsp-gf-plans .klsp-tabs {
		display: grid;
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
		width: auto;
	}
	.klsp-gf .gform_page_footer .gform_next_button,
	.klsp-gf .gform_page_footer .gform_previous_button,
	.klsp-gf .gform_footer .gform_button {
		flex: 1 1 0;
		justify-content: center;
		margin-right: 0;
	}
}

/* ---------- The form's stepper ----------
   Form 8 carries its steps as an HTML block from the old build (ul.nf-breadcrumbs, the
   active step marked): drawn as the design's numbered stepper. The percentage bar would
   say the same twice, so it goes when that stepper is there. */
.klsp-gf .nf-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	counter-reset: klsp-step;
}
.klsp-gf .nf-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-increment: klsp-step;
}
.klsp-gf .nf-breadcrumbs li + li::before { content: ""; width: 64px; height: 2px; background: var(--_line); }
.klsp-gf .nf-breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--_muted); font-size: 15px; font-weight: 600; line-height: 1.3; }
.klsp-gf .nf-breadcrumb::before {
	content: counter(klsp-step);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--_card);
	box-shadow: inset 0 0 0 2px var(--_line);
	color: var(--_muted);
	font-size: 14px;
	font-weight: 700;
}
.klsp-gf .nf-breadcrumbs li.active .nf-breadcrumb { color: var(--_ink); }
.klsp-gf .nf-breadcrumbs li.active .nf-breadcrumb::before { background: var(--_accent); box-shadow: none; color: var(--klsp-button-text, #fff); }
.klsp-gf:has(.nf-breadcrumbs) .gf_progressbar_wrapper { display: none; }
@media (max-width: 480px) {
	.klsp-gf .nf-breadcrumbs li + li::before { width: 24px; }
	.klsp-gf .nf-breadcrumb { font-size: 14px; }
}

/* The duration switch centred, the note about the discount under it. */
.klsp-gf .gfield.klsp-gf-switch .ginput_container { display: flex; justify-content: center; }
.klsp-gf .gfield.klsp-gf-switch { display: flex; flex-direction: column; align-items: stretch; }
/* The step's title above the switch, the ribbon under the cards, the cooling-off line beside Volgende. */
:is(.gform-theme--framework, .gform_wrapper) .klsp-gf h2.klsp-gf-title, .klsp-gf h2.klsp-gf-title { margin: 0 0 12px; padding: 0; color: var(--_ink); font-size: 37px; font-weight: 700; line-height: 1.3; text-align: center; }
@media (max-width: 980px) { .klsp-gf h2.klsp-gf-title { font-size: 32px; } }
@media (max-width: 767px) { .klsp-gf h2.klsp-gf-title { font-size: 26px; } }
.klsp-gf .ginput_container_radio > .klsp-ribbon { margin-top: 28px; }
.klsp-gf .gform_page_footer:has(.klsp-gf-cooling) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.klsp-gf .klsp-gf-cooling { color: var(--_muted); font-size: 14px; font-weight: 500; }
:is(.gform-theme--framework, .gform_wrapper) .klsp-gf p.klsp-gf-note, .klsp-gf p.klsp-gf-note { display: block; width: 100%; margin: -6px 0 18px; padding: 0; color: var(--_muted); font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center; }

/* Arrived with a plan from elsewhere (?abonnement=): a line that says so, and the chosen card lights up once. */
:is(.gform-theme--framework, .gform_wrapper) .klsp-gf p.klsp-gf-picked, .klsp-gf p.klsp-gf-picked { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--_accent, #68a09b) 14%, #fff); color: var(--_title, #112337); font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center; }
.klsp-gf-picked-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--_accent, #68a09b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
@keyframes klsp-gf-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--_accent, #68a09b) 55%, transparent); } 100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--_accent, #68a09b) 0%, transparent); } }
.klsp-gf li.klsp-gf-pulse .custom-radio-item { animation: klsp-gf-pulse 1s ease-out 2; }
@media (prefers-reduced-motion: reduce) { .klsp-gf li.klsp-gf-pulse .custom-radio-item { animation: none; } }