/*
 * Presale parts, in the house style of the club's Divi site (see the design
 * boards in docs/handoff/design). Colours come from :root (--klsp-*, set in
 * Presale → Kleuren, else from Divi); a part's own Stijl sets --klsp-c-* and
 * the shape variables on its wrapper. Sizes are in em of the part's font size.
 */

.klsp {
	--_bg: var(--klsp-c-bg, transparent);
	--_title: var(--klsp-c-title, var(--klsp-title, #222));
	--_text: var(--klsp-c-text, var(--klsp-text, #333));
	--_card: var(--klsp-c-card, var(--klsp-bg, #fff));
	--_accent: var(--klsp-c-accent, var(--klsp-active, #222));
	--_btn-bg: var(--klsp-c-button-bg, var(--klsp-button-bg, #222));
	--_btn-text: var(--klsp-c-button-text, var(--klsp-button-text, #fff));
	/* Border and hover: set in Stijl or Kleuren, else the invert (transparent, text and
	   border in the button colour). Every fallback is a colour, never empty. */
	--_btn-border: var(--klsp-c-button-border, var(--klsp-button-border, var(--_btn-bg)));
	--_btn-hover-bg: var(--klsp-c-button-hover-bg, var(--klsp-button-hover-bg, transparent));
	--_btn-hover-text: var(--klsp-c-button-hover-text, var(--klsp-button-hover-text, var(--_btn-bg)));
	--_btn-hover-border: var(--klsp-c-button-hover-border, var(--klsp-button-hover-border, var(--_btn-bg)));
	--_border: var(--klsp-c-border, color-mix(in srgb, var(--_title) 13%, transparent));
	--_radius: var(--klsp-radius, 16px);
	--_muted: color-mix(in srgb, var(--_text) 72%, transparent);
	--_line: color-mix(in srgb, var(--_title) 13%, transparent);
	--_tint: color-mix(in srgb, var(--_accent) 16%, #fff);
	--_accent-ink: color-mix(in srgb, var(--_accent) 62%, #000);
	--_second: var(--klsp-button2-bg, #c79b62);
	--_second-tint: color-mix(in srgb, var(--_second) 20%, #fff);
	--_second-ink: color-mix(in srgb, var(--_second) 45%, #000);
	--_danger: #b42318;
	--_danger-tint: #fdecea;
	--_signal: var(--klsp-signal, #c2410c);
	--_signal-tint: color-mix(in srgb, var(--_signal) 11%, #fff);
	--_signal-ink: color-mix(in srgb, var(--_signal) 88%, #000);
	--_section: var(--klsp-bg-alt, #f3f5fa);
	/* Tiles read on white and on the section grey alike. */
	--_tile: color-mix(in srgb, var(--_title) 6%, transparent);
	--_shadow: 0 10px 30px rgba(16, 29, 48, .06);
	--_shadow-up: 0 18px 40px rgba(16, 29, 48, .10);
	--_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");
	--_cross: 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='M7 7l10 10M17 7L7 17'/%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");

	box-sizing: border-box;
	max-width: var(--klsp-maxw, none);
	margin: var(--klsp-mt, 0) auto var(--klsp-mb, 0);
	padding: var(--klsp-pad, 0);
	background: var(--_bg);
	border-radius: var(--_radius);
	color: var(--_text);
	font-size: calc(1rem * var(--klsp-scale, 1));
	line-height: 1.5;
}

.klsp *, .klsp *::before, .klsp *::after { box-sizing: border-box; }
.klsp .klsp-title { margin: 0 0 .4em; padding: 0; color: var(--_title); font-weight: 700; line-height: 1.25; }
.klsp .klsp-text { margin: 0 0 1em; padding: 0; }
/* A part's own section title and lead (plans, FAQ) as the template's Divi headings: 37px, 32px on a tablet, 26px on a phone. */
.klsp h2.klsp-title { font-size: 37px; line-height: 1.3; }
.klsp h2.klsp-title + .klsp-text { font-size: 18px; line-height: 1.5; font-weight: 500; }
@media (max-width: 980px) { .klsp h2.klsp-title { font-size: 32px; } }
@media (max-width: 767px) { .klsp h2.klsp-title { font-size: 26px; } .klsp h2.klsp-title + .klsp-text { font-size: 16px; } }
.klsp .klsp-label { margin: 0 0 .5em; padding: 0; color: var(--_title); font-weight: 600; }
.klsp .klsp-meta { margin: 0; padding: 0; color: var(--_muted); font-size: .875em; font-weight: 500; }

/* Tonen: "alleen op telefoon en tablet" includes tablets (up to 1024px). */
@media (max-width: 1024px) { .klsp-only-desktop { display: none !important; } }
@media (min-width: 1025px) { .klsp-only-mobile { display: none !important; } }

/* On a dark Divi section (a module set to "dark", or module class klsp-on-dark):
   light text and translucent tiles. A part's own Stijl colours still win. */
.et_pb_bg_layout_dark .klsp, .klsp-on-dark .klsp, .klsp.klsp-on-dark {
	--_title: var(--klsp-c-title, #fff);
	--_text: var(--klsp-c-text, rgba(255, 255, 255, .9));
	--_line: rgba(255, 255, 255, .25);
	--_tile: rgba(255, 255, 255, .12);
	--_muted: rgba(255, 255, 255, .8);
	--_tint: rgba(255, 255, 255, .2);
}

/* ---------- Buttons ----------
   The site's Divi button: 12px corners (or Divi's own radius), arrow on the right.
   On a Klasse site the filled ones also carry the theme's button classes
   (kls_presale_button_class()); everywhere else, the dashboard previews
   included, this is their look. */
.klsp .klsp-btn:not(.theme-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .65em;
	min-height: 48px;
	margin: 0;
	padding: .8em 1.4em;
	border: 0;
	border-radius: var(--klsp-btn-radius, 12px);
	background: var(--_btn-bg);
	box-shadow: inset 0 0 0 2px var(--_btn-border);
	color: var(--_btn-text);
	font: inherit;
	font-size: 1.125em;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, color .15s, box-shadow .15s;
}
/* Hover only with a real pointer (a tap would leave it stuck), never on the sticky button. */
@media (hover: hover) and (pointer: fine) {
	.klsp:not(.klsp-sticky) .klsp-btn:not(.theme-button):hover { background: var(--_btn-hover-bg); box-shadow: inset 0 0 0 2px var(--_btn-hover-border); }
	:is(.klsp, .et-db #et-boc .et-l .klsp, #page-container .et_pb_module .klsp):not(.klsp-sticky) a.klsp-btn:not(.theme-button):hover { color: var(--_btn-hover-text) !important; }
}
.klsp .klsp-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--_btn-bg) 55%, #fff); outline-offset: 3px; }
.klsp .klsp-arrow { flex: none; width: 1em; height: 1em; transition: transform .15s; }
.klsp .klsp-btn:hover .klsp-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .klsp .klsp-btn:hover .klsp-arrow { transform: none; } }
/* A Divi text module gives its links a colour with !important (its link colour setting),
   which would win over a button's own text colour. So every variant states its text
   colour the same way: filled follows the part's "Tekst op knop", then Kleuren. */
:is(.klsp, .et-db #et-boc .et-l .klsp, #page-container .et_pb_module .klsp) a.klsp-btn { color: var(--_btn-text) !important; text-decoration: none !important; }
:is(.klsp, .et-db #et-boc .et-l .klsp, #page-container .et_pb_module .klsp) a.klsp-btn.theme-button { color: var(--klsp-c-button-text, var(--klsp-theme-button-text, var(--_btn-text))) !important; }
/* On hover a theme button follows the hover colours too (the rule above is stronger than the theme's hover):
   the bar's button and every claim button alike. */
:is(.klsp, .et-db #et-boc .et-l .klsp, #page-container .et_pb_module .klsp) a.klsp-btn.theme-button:is(:hover, :focus-visible) { color: var(--klsp-c-button-hover-text, var(--_btn-hover-text)) !important; }
/* The variants set the same variables, so base, hover and text rules above apply to all. */
.klsp .klsp-btn.klsp-btn--secondary {
	--_btn-bg: var(--_second);
	--_btn-text: var(--klsp-c-button-text, var(--klsp-button2-text, #111));
	--_btn-border: var(--klsp-button2-border, var(--_second));
	--_btn-hover-bg: var(--klsp-button2-hover-bg, transparent);
	--_btn-hover-text: var(--klsp-button2-hover-text, var(--_second));
	--_btn-hover-border: var(--klsp-button2-hover-border, var(--_second));
}
/* Outline fills with the button colour on hover; soft gets a stronger tint. */
.klsp .klsp-btn.klsp-btn--outline {
	--_btn-bg: transparent;
	--_btn-text: var(--_title);
	--_btn-border: var(--_title);
	--_btn-hover-bg: var(--klsp-c-button-bg, var(--klsp-button-bg, #222));
	--_btn-hover-text: var(--klsp-c-button-text, var(--klsp-button-text, #fff));
	--_btn-hover-border: var(--klsp-c-button-bg, var(--klsp-button-bg, #222));
}
.klsp .klsp-btn.klsp-btn--soft {
	--_btn-bg: color-mix(in srgb, var(--_title) 10%, transparent);
	--_btn-text: var(--_title);
	--_btn-border: transparent;
	--_btn-hover-bg: color-mix(in srgb, var(--_title) 18%, transparent);
	--_btn-hover-text: var(--_title);
	--_btn-hover-border: transparent;
}
.klsp .klsp-btn.klsp-btn--pill { border-radius: 999px !important; }
/* The theme's own button (Klasse, colours with !important) follows a part's own Stijl
   colours; with none set it keeps the theme's look and hover. Site-wide colours from
   Kleuren: kls_presale_theme_button_css(). */
.klsp[style*="--klsp-c-button-bg:"] a.klsp-btn.theme-button { background-color: var(--klsp-c-button-bg) !important; border-color: var(--klsp-c-button-border, var(--klsp-c-button-bg)) !important; }
.klsp[style*="--klsp-c-button-border:"] a.klsp-btn.theme-button { border-color: var(--klsp-c-button-border) !important; }
.klsp:is([style*="--klsp-c-button-bg:"], [style*="--klsp-c-button-hover-"]) a.klsp-btn.theme-button:hover {
	background-color: var(--klsp-c-button-hover-bg, transparent) !important;
	color: var(--klsp-c-button-hover-text, var(--klsp-c-button-bg, var(--klsp-button-bg, #222))) !important;
	border-color: var(--klsp-c-button-hover-border, var(--klsp-c-button-bg, var(--klsp-button-bg, #222))) !important;
}

/* ---------- Small shared parts ---------- */

.klsp .klsp-pill {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: .38em .92em;
	border-radius: 999px;
	font-size: .8125em;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}
.klsp-pill--accent { background: var(--_tint); color: var(--_accent-ink); }
.klsp-pill--second { background: var(--_second-tint); color: var(--_second-ink); }
.klsp-pill--muted { background: color-mix(in srgb, var(--_title) 8%, transparent); color: var(--_muted); }
.klsp-pill--section { background: var(--_section); color: var(--_text); }
.klsp-pill--danger { background: var(--_danger-tint); color: var(--_danger); }
.klsp-pill--solid { background: var(--_accent); color: var(--klsp-button-text, #fff); }
.klsp .klsp-pill .klsp-dot { margin: 0; width: .62em; height: .62em; }
/* Older markup and the event label. */
.klsp .klsp-badge { display: inline-block; align-self: flex-start; padding: .38em .92em; border-radius: 999px; background: var(--_second-tint); color: var(--_second-ink); font-size: .8125em; font-weight: 600; line-height: 1.3; }

/* A list with checks: phase extras, plan contents, event programme. */
.klsp .klsp-list, .klsp .klsp-plan-usps, .klsp .klsp-event-program {
	display: flex;
	flex-direction: column;
	gap: .5em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .94em;
	font-weight: 500;
}
.klsp .klsp-list li, .klsp .klsp-plan-usps li, .klsp .klsp-event-program li { position: relative; margin: 0; padding: 0 0 0 1.95em; list-style: none; }
.klsp .klsp-list li::before, .klsp .klsp-plan-usps li::before, .klsp .klsp-event-program li::before {
	content: "";
	position: absolute;
	top: .12em;
	left: 0;
	width: 1.33em;
	height: 1.33em;
	background: var(--_accent-ink);
	-webkit-mask: var(--_check) center / contain no-repeat;
	mask: var(--_check) center / contain no-repeat;
}
.klsp .klsp-list li.is-missed { color: var(--_muted); }
.klsp .klsp-list li.is-missed::before { background: var(--_muted); -webkit-mask-image: var(--_cross); mask-image: var(--_cross); }
.klsp .klsp-plan-usps li.false { color: var(--_muted); }
.klsp .klsp-plan-usps li.false::before { background: var(--_muted); -webkit-mask-image: var(--_dash); mask-image: var(--_dash); }
.klsp .klsp-plan-usps li.gold { color: var(--_title); font-weight: 600; }
.klsp .klsp-usp-label { display: inline-block; margin-left: .4em; padding: .2em .7em; border-radius: 999px; background: var(--_second-tint); color: var(--_second-ink); font-size: .8em; font-weight: 600; vertical-align: .05em; white-space: nowrap; }

/* Live dot */
.klsp-dot { display: inline-block; flex: none; width: .65em; height: .65em; margin-right: .6em; border-radius: 50%; background: #9ca3af; vertical-align: .05em; }
.klsp-dot.is-live { background: #2e9e5b; box-shadow: 0 0 0 0 rgba(46, 158, 91, .55); animation: klsp-pulse 2s infinite; }
@keyframes klsp-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 158, 91, .55); } 70% { box-shadow: 0 0 0 .55em rgba(46, 158, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 158, 91, 0); } }
@media (prefers-reduced-motion: reduce) { .klsp-dot.is-live { animation: none; box-shadow: 0 0 0 .3em rgba(46, 158, 91, .25); } }

/* ---------- Countdown ----------
   Tiles by default; inline in running text (status, join header); short
   (3d 05:54:34) in the bar on a phone and in the sticky CTA. */
.klsp-cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; max-width: 24em; }
.klsp-cd-unit { display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .6em .25em; border-radius: 10px; background: var(--_tile); }
.klsp-cd-unit b { color: var(--_title); font-size: 1.5em; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.klsp-cd-unit small { color: var(--_muted); font-size: .75em; font-weight: 500; }
.klsp-cd-ended { display: none; grid-column: 1 / -1; color: var(--_title); font-weight: 600; }
.klsp-cd.is-ended .klsp-cd-unit, .klsp-cd.is-ended .klsp-cd-short { display: none; }
.klsp-cd.is-ended .klsp-cd-ended { display: inline; }
.klsp-cd--inline { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: .45em; max-width: none; }
.klsp-cd--inline .klsp-cd-unit { flex-direction: row; align-items: baseline; gap: .2em; padding: 0; background: none; }
.klsp-cd--inline .klsp-cd-unit b { color: inherit; font-size: 1em; }
.klsp-cd--inline .klsp-cd-unit small { color: inherit; font-size: .8em; opacity: .85; }
.klsp-cd--short { display: inline; max-width: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.klsp-cd--short b { font-weight: inherit; }

/* ---------- Phase cards ----------
   A row of cards when there is room; on a phone the active phase comes first
   and past and coming phases shrink to one line. */
.klsp-cards-wrap, .klsp-cards { container-type: inline-size; }
/* Phase cards (as the design): equal heights, head and percentage level, the last part
   (button or dates) at the bottom. */
.klsp .klsp-cards > .klsp-card > :last-child { margin-top: auto; }
/* In a row every card is as tall as the tallest; the button sits at the bottom.
   The columns follow the number of cards (klsp-n*), so no row ends with one
   card on its own: 2 and 4 go two by two, 3 stay a row of three, 4 a row of four
   when there is room. Below that, one column. */
.klsp-cards, .klsp-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5em; align-items: stretch; }
.klsp-memberships { container-type: inline-size; }
.klsp-cards.klsp-n1, .klsp-plans.klsp-n1 { grid-template-columns: minmax(0, 30em); }
@container (min-width: 560px) {
	.klsp-plans:is(.klsp-n2, .klsp-n4, .klsp-n6) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phase cards turn into one-line rows below 760px, so they only go side by side from there. */
@container (min-width: 760px) {
	.klsp-cards:is(.klsp-n2, .klsp-n4, .klsp-n6) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Inside a row the cards share their rows (subgrid): titles, prices, lists and
   buttons line up across the cards, whatever wraps in one of them. Every part
   has a fixed row; spacing is a margin, so a row nobody uses takes no room. */
@supports (grid-template-rows: subgrid) {
	.klsp .klsp-plans > .klsp-plan { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
	.klsp-plans > .klsp-plan > .klsp-plan-head { grid-row: 1; }
	.klsp-plans > .klsp-plan > .klsp-plan-offer { grid-row: 2; }
	.klsp-plans > .klsp-plan > .klsp-plan-usps { grid-row: 3; }
	/* The button keeps its space above it (its margin-top: auto would make it 0 in the tallest card). */
	.klsp .klsp-plans > .klsp-plan > .klsp-btn.klsp-btn { grid-row: 4; align-self: end; margin-top: 1.25em; }
	.klsp-plans > .klsp-plan > * + * { margin-top: 1.1em; }
}
@container (min-width: 900px) {
	.klsp-cards:is(.klsp-n3, .klsp-n5, .klsp-n6), .klsp-plans:is(.klsp-n3, .klsp-n5, .klsp-n6) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 1100px) {
	.klsp-cards.klsp-n4, .klsp-plans.klsp-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.klsp .klsp-card {
	display: flex;
	flex-direction: column;
	gap: 1.1em;
	margin: 0;
	padding: 1.75em;
	border-radius: var(--_radius);
	background: var(--_card);
	box-shadow: var(--_shadow);
}
.klsp .klsp-card.is-now { box-shadow: 0 0 0 2px var(--_accent), var(--_shadow-up); }
.klsp .klsp-card.is-full { box-shadow: 0 0 0 2px var(--_second), var(--_shadow-up); }
.klsp .klsp-card.is-gap { background: transparent; box-shadow: inset 0 0 0 1px var(--_line); }
.klsp .klsp-card.is-past { background: color-mix(in srgb, var(--_title) 5%, var(--_section)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_title) 12%, var(--_section)); }
.klsp-card-head { display: flex; justify-content: space-between; align-items: center; gap: .75em; }
.klsp-card-name { color: var(--_title); font-size: 1.25em; font-weight: 600; line-height: 1.3; }
.klsp-card.is-past .klsp-card-name { color: var(--_text); }
.klsp-card-line { display: none; }
.klsp-card .klsp-narrow { display: none; }
.klsp .klsp-card-note { margin: 0; padding: 0; font-size: .875em; font-weight: 600; line-height: 1.45; }
/* !important: Klasse sets every paragraph in Divi content to color: inherit !important. */
.klsp .klsp-card-note.is-late { color: var(--_danger) !important; }
.klsp .klsp-card-note.is-wait { color: var(--_second-ink) !important; }
.klsp .klsp-card-foot { margin-top: auto; }
.klsp-spots.is-done .klsp-meter { background: color-mix(in srgb, var(--_title) 12%, var(--_section)); }
.klsp-spots.is-done .klsp-meter span { background: color-mix(in srgb, var(--_title) 55%, var(--_section)); }
.klsp-spots.is-soon .klsp-meter { background: var(--_section); }
.klsp-card-short { display: none; }
.klsp .klsp-card-pct { display: flex; flex-direction: column; gap: .35em; margin: 0; padding: 0; }
.klsp-card-num { color: var(--_title); font-size: 3.5em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.klsp-card.is-next .klsp-card-num { color: var(--_text); }
.klsp-card.is-past .klsp-card-num { color: var(--_muted); }
.klsp-card-num s, .klsp-card-short s { text-decoration-thickness: 3px; }
.klsp-card-sub { color: var(--_text); font-weight: 500; }
.klsp .klsp-card-lead { margin: 0; padding: 0; color: var(--_title); font-size: 1.35em; font-weight: 700; line-height: 1.3; }
.klsp-card.is-gap .klsp-card-lead { font-size: 1.25em; font-weight: 600; }
.klsp-card-live { display: flex; flex-direction: column; gap: .5em; }
.klsp-card .klsp-btn { align-self: stretch; margin-top: auto; }
/* Buttons in a card: a little smaller, so the text stays on one line in a narrow column. */
.klsp :is(.klsp-card, .klsp-plan, .klsp-event) .klsp-btn:not(.theme-button) { gap: .5em; padding: .85em 1.1em; font-size: 1em; }
/* The theme's own button (Klasse: 18px, 25px left and 60px right for its arrow, all !important)
   gets the same smaller size in a card, its arrow moved in to match. */
.klsp :is(.klsp-card, .klsp-plan, .klsp-event) a.klsp-btn.theme-button { padding-left: 1.1em !important; padding-right: 2.6em !important; font-size: 1em !important; white-space: nowrap; }
.klsp :is(.klsp-card, .klsp-plan, .klsp-event) a.klsp-btn.theme-button::after { right: 1.1em !important; }
.klsp-card.is-full .klsp-meter { background: var(--_second-tint); }
@container (max-width: 759px) {
	.klsp .klsp-card { padding: 1.4em; }
	.klsp-card-num { font-size: 3em; }
	.klsp .klsp-card.is-past { gap: .75em; padding: 1.1em 1.3em; }
	.klsp .klsp-card.is-next { padding: 1.1em 1.4em; }
	.klsp-card:is(.is-past, .is-next) :is(.klsp-card-pct, .klsp-card-foot) { display: none; }
	.klsp-card.is-next :is(.klsp-card-extras, .klsp-spots, .klsp-card-note) { display: none; }
	.klsp-card:is(.is-past, .is-next) .klsp-card-short { display: inline; }
	.klsp-card:is(.is-past, .is-next) .klsp-card-name { font-size: 1em; }
	.klsp-card.is-next .klsp-card-line { display: block; margin-top: .15em; color: var(--_muted); font-size: .8125em; font-weight: 500; }
	.klsp-card.is-next .klsp-wide { display: none; }
	.klsp-card.is-next .klsp-narrow { display: inline; }
}

/* ---------- Status line: banner, above a form ----------
   Inline layout, so it follows the module's text alignment. */
.klsp .klsp-status-line { margin: 0; color: var(--_title); font-weight: 600; }
.klsp-status-cd { display: block; margin-top: .2em; font-weight: 500; opacity: .9; }
/* tiles="1" (the banner): the line, then compact tiles. */
.klsp-status--tiles { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.klsp-status--tiles .klsp-cd { display: flex; gap: 8px; max-width: none; }
.klsp-status--tiles .klsp-cd-unit { min-width: 52px; padding: 8px 12px; }
.klsp-status--tiles .klsp-cd-unit b { font-size: 22px; }
.klsp .klsp-join-note { margin: 0; padding: 0; color: var(--_muted); font-size: 15px; font-style: italic; font-weight: 500; }
/* ---------- Ribbon: the sign-ups (design: "35 mensen gingen je voor · Wees de volgende.") ---------- */
.klsp.klsp-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0; padding: 14px 52px 14px 22px; border-radius: 10px 0 0 10px; background: var(--klsp-text, #101d30); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%); }
.klsp-ribbon-icon { flex: none; color: var(--_second); }
.klsp-ribbon-text { font-size: 20px; font-weight: 700; line-height: 1.3; }
.klsp-ribbon-text b { color: var(--_second); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.klsp-ribbon-tag { color: color-mix(in srgb, #fff 88%, transparent); font-size: 15px; font-weight: 600; }
/* ---------- Proefles page: lessons with times, the plan beside the deal ---------- */
.klsp.klsp-proeflessen { container-type: inline-size; }
.klsp-lesson-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.klsp .klsp-lesson-text { font-size: 15px; }
.klsp-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.klsp .klsp-slot { min-height: 44px; margin: 0; padding: 10px 14px; border: 0; border-radius: 10px; background: var(--_section); box-shadow: inset 0 0 0 1px var(--_line); color: var(--_title); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.klsp .klsp-slot[aria-pressed="true"] { background: var(--_accent); box-shadow: none; color: var(--klsp-button-text, #fff); }
.klsp .klsp-slot:disabled { color: var(--_muted); text-decoration: line-through; cursor: not-allowed; }
.klsp .klsp-slot:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; }
.klsp .klsp-lesson-left { margin: 0; padding: 0; color: var(--_muted); font-size: 14px; font-weight: 500; }
.klsp .klsp-lesson-left.is-few { color: var(--_danger) !important; font-weight: 600; }
.klsp.klsp-proefles_plan .klsp-slot-main { background: var(--_section); box-shadow: none; }
.klsp .klsp-trial-after { font-size: 24px; font-weight: 700; }
.klsp .klsp-slot-side .klsp-meter { background: rgba(255, 255, 255, .16); }
/* The trial form: the cancel note left of the button on their own row, as the design. */
.klsp.klsp-proefles_plan .gform_wrapper.gform_wrapper .gform_footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.klsp.klsp-proefles_plan.klsp-slot .gform_wrapper.gform_wrapper .gform_footer :is(button, input[type="submit"]) { width: auto; }
.klsp .klsp-trial-cancel { color: var(--_muted); font-size: 14px; font-weight: 500; }
/* "Zo werkt het": a small label above a smaller title (Divi text module class klsp-werkt-kop). */
.klsp-eyebrow { margin: 0 0 4px !important; padding: 0 !important; color: var(--klsp-button2-ink, color-mix(in srgb, var(--klsp-button2-bg, #c79b62) 45%, #000)) !important; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.klsp-werkt-kop h2 { font-size: 28px !important; font-weight: 600 !important; line-height: 1.2 !important; }
/* The trial form's own field for the chosen lesson: filled by a time on a card, not typed. */
/* The chosen lesson and time: the first field of the trial form, over the full width. */
.klsp-slot .gfield.klsp-proefles-keuze { grid-column: 1 / -1 !important; }
/* Hero: a label above the title (Velden), and the "Zo werkt het" steps as pills (module class klsp-steps-pills). */
/* Vertrouwensbalk (design: the teal band): a Velden Punten field in a Divi text module with class klsp-trust;
   the block's Stijl gives the band its colour (Accentkleur). */
.klsp-trust .klsp-points { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 24px 36px; margin: 0 !important; }
.klsp-trust .klsp-points li { gap: 14px; color: #fff !important; font-size: 18px; font-weight: 500; line-height: 1.35; }
.klsp-trust .klsp-points li::before { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .18) var(--_trust-check) center / 20px no-repeat; -webkit-mask: none; mask: none; }
.klsp-trust { --_trust-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.klsp-hero-pill { display: inline-block; margin: 0 0 18px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px; font-weight: 600; }
.klsp-steps-pills .klsp-steps { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.klsp-steps-pills .klsp-steps li { align-items: center; gap: 14px; padding: 10px 24px 10px 10px; border-radius: 999px; background: var(--klsp-c-tint, color-mix(in srgb, var(--klsp-button2-bg, #c79b62) 20%, #fff)); }
.klsp-steps-pills .klsp-steps li::before { width: 38px; height: 38px; margin: 0; background: var(--klsp-button2-bg, #c79b62); color: var(--klsp-title, #101d30); font-size: 15px; font-weight: 600; }
.klsp-step-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.3; }
.klsp-steps li b { display: block; color: var(--klsp-title, #101d30); font-weight: 600; }
.klsp-steps li span { display: block; color: color-mix(in srgb, var(--klsp-text, #333) 72%, #fff); font-size: .875em; font-weight: 500; }
/* ---------- Twijfel: the missed phase beside the trial lesson (Lid worden) ---------- */
.klsp.klsp-twijfel { display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px; }
.klsp-twijfel-past { flex: 2 1 560px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 28px; border-radius: var(--_radius); background: var(--_section); }
.klsp-twijfel-copy { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.klsp .klsp-twijfel-title { margin: 0; padding: 0; color: var(--_title); font-size: 22px; font-weight: 700; line-height: 1.3; }
.klsp .klsp-twijfel-copy .klsp-meta { font-size: 15px; }
.klsp-twijfel-trial { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px; border-radius: var(--_radius); background: var(--klsp-text, #101d30); color: #fff; }
.klsp .klsp-twijfel-name { margin: 0; padding: 0; font-size: 18px; font-weight: 600; }
/* !important: Klasse sets every paragraph in Divi content to color: inherit !important. */
.klsp .klsp-twijfel-text { margin: 0; padding: 0; color: color-mix(in srgb, #fff 80%, transparent) !important; font-size: 15px; line-height: 1.5; }
.klsp .klsp-twijfel-trial .klsp-btn { margin-top: auto; }
.klsp .klsp-status-meta { margin: 0; padding: 0; color: var(--_text); font-size: 14px; font-weight: 500; opacity: .9; }
/* The banner's buttons: side by side, wrapping on a phone. */
.klsp.klsp-knoppen { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.klsp.klsp-knoppen .klsp-btn:not(.theme-button) { font-weight: 400; }
@media (max-width: 600px) { .klsp.klsp-knoppen > a { flex: 1 1 100%; } }

/* ---------- Counters ---------- */
.klsp-spots { display: flex; flex-direction: column; gap: .5em; }
.klsp .klsp-spots p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2em 1em; margin: 0; color: var(--_title); font-size: .94em; font-weight: 600; }
.klsp .klsp-spots p > span { color: var(--_muted); font-weight: 500; }
.klsp-meter { height: 8px; border-radius: 999px; background: var(--_tint); overflow: hidden; }
.klsp-meter span { display: block; height: 100%; border-radius: 999px; background: var(--_accent); }
.klsp-counters > .klsp-spots { padding: 1.4em 1.75em; border-radius: var(--_radius); background: var(--_card); box-shadow: var(--_shadow); }
.klsp .klsp-registrations { margin: 0; color: var(--_title); font-weight: 600; }
.klsp-social { display: flex; flex-direction: column; gap: .3em; padding: 1.4em 1.75em; border-radius: var(--_radius); background: var(--_card); box-shadow: var(--_shadow); }
.klsp-social .klsp-registrations b { display: block; font-size: 2.75em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.klsp .klsp-quote { margin: 0; padding: 0; border: 0; color: var(--_muted); font-size: .875em; font-style: normal; }
.klsp .klsp-quote p { margin: 0; padding: 0; }
.klsp .klsp-quote p::before { content: "\201C"; }
.klsp .klsp-quote p::after { content: "\201D"; }
.klsp .klsp-quote cite { font-style: normal; font-weight: 600; }

/* ---------- Forms, slot, event ---------- */
.klsp-lead, .klsp-anchor { scroll-margin-top: calc(var(--klsp-bar-h, 0px) + 100px); }
/* ---------- Afsluiter: the form card beside the dark deal card (design: Presale deals, aanmelden) ---------- */
.klsp.klsp-slot { display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px; }
.klsp-slot-main { container-type: inline-size; flex: 2 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: 40px; border-radius: var(--_radius); background: var(--_card); box-shadow: var(--_shadow); scroll-margin-top: calc(var(--klsp-bar-h, 0px) + 100px); }
.klsp-slot-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.klsp .klsp-slot-head :is(.klsp-title, .klsp-text) { margin: 0; }
/* The site's text colour (navy on the template) with white text. */
.klsp-slot-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: var(--_radius); background: var(--klsp-text, #101d30); color: #fff; }
.klsp .klsp-slot-name { margin: 0; padding: 0; font-size: 1.25em; font-weight: 600; line-height: 1.3; }
.klsp .klsp-slot-side .klsp-list { color: #fff; }
.klsp .klsp-slot-side .klsp-list li::before { background: var(--_accent); }
/* !important: Klasse sets every paragraph in Divi content to color: inherit !important. */
.klsp .klsp-slot-time { margin: 0; padding: 0; color: color-mix(in srgb, #fff 80%, transparent) !important; font-size: .875em; font-variant-numeric: tabular-nums; }
.klsp .klsp-slot-side .klsp-btn { align-self: stretch; margin-top: auto; }
/* The form's fields and its button in a row, as the design: four across when the card has the room,
   else two by two (the button beside the last field), one on a phone; never three and one. */
.klsp.klsp-slot .gform_wrapper.gform_wrapper form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: end; margin: 0; }
@container (min-width: 420px) { .klsp.klsp-slot .gform_wrapper.gform_wrapper form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 880px) { .klsp.klsp-slot .gform_wrapper.gform_wrapper form { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.klsp.klsp-slot .gform_wrapper.gform_wrapper :is(.gform_body, .gform_fields) { display: contents; }
.klsp.klsp-slot .gform_wrapper.gform_wrapper :is(.gform_validation_container, .gform_hidden, .gfield_visibility_hidden, .akismet-fields-container) { display: none; }
/* Gravity Forms spans each field over its own 12 columns. */
.klsp.klsp-slot .gform_wrapper.gform_wrapper .gfield { grid-column: auto; margin: 0; padding: 0; }
.klsp.klsp-slot .gform_wrapper.gform_wrapper :is(.gfield--type-consent, .gfield--type-checkbox, .gfield--type-textarea, .gfield--type-html, .gfield--type-section, .gform_validation_errors, .gform_heading) { grid-column: 1 / -1; }
.klsp.klsp-slot .gform_wrapper.gform_wrapper .gfield_label { margin: 0 0 6px; color: var(--_title); font-size: 14px; font-weight: 600; }
.klsp.klsp-slot .gform_wrapper.gform_wrapper .gfield input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="url"]), .klsp.klsp-slot .gform_wrapper.gform_wrapper .gfield :is(textarea, select) { width: 100% !important; min-height: 50px; padding: 13px 14px !important; border: 1px solid color-mix(in srgb, var(--_title) 20%, #fff) !important; border-radius: 10px !important; background: #fff !important; color: var(--_text); font-size: 16px !important; font-weight: 500; }
.klsp.klsp-slot .gform_wrapper.gform_wrapper .gform_footer { margin: 0; padding: 0; }
.klsp.klsp-slot .gform_wrapper.gform_wrapper .gform_footer :is(button, input[type="submit"]) { width: 100%; min-height: 50px; margin: 0; }
@media (max-width: 767px) {
	.klsp-slot-main { padding: 24px; }
	.klsp-slot-side { padding: 24px; }
}
.klsp-nested { padding: 0; }
.klsp .klsp-event { display: flex; flex-direction: column; gap: 1em; margin: 0; padding: 1.75em; border-radius: var(--_radius); background: var(--_card); box-shadow: var(--_shadow); }
/* The text goes under the date tile when its longest word doesn't fit beside it. */
.klsp-event-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; }
.klsp-event-head > div { flex: 1 1 0; min-width: min-content; max-width: 100%; overflow-wrap: break-word; }
.klsp-event-day { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 4em; height: 4.25em; border-radius: 12px; background: var(--_second-tint); color: var(--_second-ink); line-height: 1.1; }
.klsp-event-day b { font-size: 1.5em; font-weight: 700; }
.klsp-event-day small { font-size: .75em; font-weight: 600; }
.klsp .klsp-event-date { margin: 0; padding: 0; color: var(--_title); font-size: 1.25em; font-weight: 600; line-height: 1.3; }
.klsp .klsp-event-meta { margin: 0; padding: 0; color: var(--_muted); font-size: .875em; font-weight: 500; }
.klsp-event .klsp-btn { align-self: flex-start; }

/* ---------- Aftelknop ----------
   On a dark banner: filled with a soft ring. On a light page: white with a
   coloured ring. */
.klsp .klsp-aftel {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 8.25em;
	height: 8.25em;
	border-radius: 50%;
	background: var(--_card);
	box-shadow: inset 0 0 0 3px var(--_accent);
	color: var(--_title);
	text-align: center;
	text-decoration: none;
	line-height: 1.1;
}
.klsp-aftel b { font-size: 2.75em; font-weight: 800; line-height: 1; }
.klsp-aftel small { max-width: 7em; margin-top: .2em; color: var(--_muted); font-size: .8em; font-weight: 500; }
:is(.et_pb_bg_layout_dark, .klsp-on-dark) .klsp .klsp-aftel, .klsp.klsp-on-dark .klsp-aftel {
	background: var(--_btn-bg);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--_btn-bg) 30%, transparent);
	color: var(--_btn-text);
}
:is(.et_pb_bg_layout_dark, .klsp-on-dark) .klsp .klsp-aftel small, .klsp.klsp-on-dark .klsp-aftel small { color: inherit; opacity: .9; }
:is(.klsp, #page-container .et_pb_module .klsp) a.klsp-aftel { color: var(--_title) !important; text-decoration: none !important; }
:is(.et_pb_bg_layout_dark, .klsp-on-dark) :is(.klsp, #page-container .et_pb_module .klsp) a.klsp-aftel { color: var(--_btn-text) !important; }

/* ---------- FAQ: one style everywhere ---------- */
.klsp-faq { display: flex; flex-direction: column; gap: .75em; }
.klsp-faq > .klsp-title { margin-bottom: .2em; }
/* Stijl: Kaarten is the question's background, Rand its border, Accent the icon. */
.klsp .klsp-faq-item { margin: 0; padding: 0; border-radius: 14px; background: var(--_card); box-shadow: inset 0 0 0 1px var(--klsp-c-border, transparent), 0 6px 18px rgba(16, 29, 48, .05); }
.klsp .klsp-faq-item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	padding: 1.15em 1.4em;
	color: var(--_title);
	font-size: 1.06em;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}
.klsp-faq-item summary::-webkit-details-marker { display: none; }
.klsp-faq-item summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--_accent) 55%, #fff); outline-offset: 2px; border-radius: 14px; }
.klsp-faq-item summary::after {
	content: "";
	flex: none;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: var(--_tint) center / 1em no-repeat;
	-webkit-mask: none;
}
/* The icon is a mask on an inner layer so it takes the accent's dark ink. */
.klsp-faq-item summary { position: relative; }
.klsp-faq-item summary::before {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(1.4em + .5em);
	width: 1em;
	height: 1em;
	margin-top: -.5em;
	background: var(--_accent-ink);
	-webkit-mask: var(--_faq-icon) center / contain no-repeat;
	mask: var(--_faq-icon) center / contain no-repeat;
	transition: transform .2s;
	z-index: 1;
}
.klsp-faq--plus { --_faq-icon: 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.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12M12 6v12'/%3E%3C/svg%3E"); }
.klsp-faq--plus details[open] { --_faq-icon: 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.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.klsp-faq--chevron { --_faq-icon: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.klsp-faq--chevron details[open] summary::before { transform: rotate(180deg); }
.klsp .klsp-faq-answer { padding: 0 1.4em 1.35em; color: var(--_text); line-height: 1.6; }
.klsp-faq-answer > :first-child { margin-top: 0; }
.klsp-faq-answer > :last-child { margin-bottom: 0; padding-bottom: 0; }

/* The same look for a Divi Toggle or Accordion module with the module class
   klsp-faq-look, so a page that uses Divi's own FAQ matches the presale FAQ. */
.et_pb_module.klsp-faq-look .et_pb_toggle,
.et_pb_module.klsp-faq-look.et_pb_toggle {
	margin: 0 0 12px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 14px;
	background: var(--klsp-bg, #fff) !important;
	box-shadow: 0 6px 18px rgba(16, 29, 48, .05);
}
.et_pb_module.klsp-faq-look .et_pb_toggle_title,
.et_pb_module.klsp-faq-look.et_pb_toggle .et_pb_toggle_title {
	position: relative;
	margin: 0;
	padding: 20px 64px 20px 24px !important;
	color: var(--klsp-title, #222) !important;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}
.et_pb_module.klsp-faq-look .et_pb_toggle_title::before {
	top: 50% !important;
	right: 24px !important;
	width: 32px;
	height: 32px;
	margin-top: -16px !important;
	border-radius: 50%;
	background: color-mix(in srgb, var(--klsp-active, #222) 16%, #fff);
	color: color-mix(in srgb, var(--klsp-active, #222) 62%, #000) !important;
	font-size: 16px !important;
	line-height: 32px;
	text-align: center;
}
.et_pb_module.klsp-faq-look .et_pb_toggle_content {
	padding: 0 24px 22px !important;
	color: var(--klsp-text, #333);
	font-size: 16px;
	line-height: 1.6;
}

/* ---------- Join header ---------- */
.klsp-join_header { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.klsp .klsp-deal { display: flex; align-items: center; margin: 0; padding: 0; color: var(--_title); font-weight: 600; }

/* ---------- Memberships ---------- */
.klsp-plans-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1em 1.5em; margin: 0 0 2em; }
.klsp-plans-head > div > :last-child { margin-bottom: 0; }
.klsp .klsp-tabs { display: inline-flex; gap: 4px; margin: 0; padding: 4px; border-radius: 12px; background: var(--_section); }
.klsp .klsp-tab {
	min-height: 44px;
	margin: 0;
	padding: .6em 1.15em;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--_text);
	font: inherit;
	font-size: .94em;
	font-weight: 600;
	cursor: pointer;
}
.klsp .klsp-tab[aria-pressed="true"] { background: var(--_card); box-shadow: 0 2px 8px rgba(16, 29, 48, .10); color: var(--_title); }
.klsp .klsp-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--_accent) 55%, #fff); outline-offset: 2px; }
.klsp-plans[hidden] { display: none; }
/* A switch shows its cards with a short fade (also the cards in the Lid worden form). */
@keyframes klsp-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.klsp-plans:not([hidden]), .klsp-gf .gfield_radio > li[data-klsp-panel]:not([hidden]) { animation: klsp-fade-in .28s ease both; }
@media (prefers-reduced-motion: reduce) { .klsp-plans:not([hidden]), .klsp-gf .gfield_radio > li[data-klsp-panel]:not([hidden]) { animation: none; } }
.klsp .klsp-plan {
	display: flex;
	flex-direction: column;
	gap: 1.1em;
	margin: 0;
	padding: 1.75em;
	border-radius: var(--_radius);
	background: var(--_section);
	box-shadow: none;
}
.klsp .klsp-plan.is-featured { background: var(--_card); box-shadow: 0 0 0 2px var(--_accent), var(--_shadow-up); }
.klsp-plan-head { display: flex; justify-content: space-between; align-items: center; gap: .75em; }
.klsp .klsp-plan-name { margin: 0; padding: 0; color: var(--_title); font-size: 1.25em; font-weight: 600; line-height: 1.3; }
.klsp .klsp-plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .6em; margin: 0; padding: 0; }
.klsp-plan-price b { color: var(--_title); font-size: 2.75em; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.klsp-plan-price s { color: var(--_muted); font-size: 1.1em; }
.klsp-plan-price small { color: var(--_muted); font-size: .875em; font-weight: 500; }
.klsp-plan-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1em; }
.klsp .klsp-plan-saving { align-self: flex-start; margin: 0; padding: .38em .92em; border-radius: 999px; background: var(--_second-tint); color: var(--_second-ink); font-size: .8125em; font-weight: 600; }
.klsp .klsp-plan .klsp-btn { margin-top: auto; align-self: stretch; }
@media (max-width: 600px) {
	.klsp-plans-head { flex-direction: column; align-items: stretch; }
	.klsp .klsp-tabs { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; }
	.klsp-plan-price b { font-size: 2.25em; }
}

/* ---------- Urgency bar: sticky at the top; front.js moves pinned headers below it ---------- */
.klsp.klsp-bar {
	--_bg: var(--klsp-c-bg, var(--klsp-bar-bg, #222));
	--_text: var(--klsp-c-text, var(--klsp-bar-text, #fff));
	--_title: var(--_text);
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 99990;
	margin: 0;
	border-radius: 0;
	border-bottom: 1px solid var(--klsp-c-border, transparent);
	font-size: calc(.9375rem * var(--klsp-scale, 1));
}
.klsp-bar.is-pinned { position: fixed; left: 0; right: 0; }
.klsp-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5em 1.75em; padding: var(--klsp-pad, .6em 1em); }
.klsp-bar-text { font-weight: 600; text-align: center; }
.klsp-bar .klsp-bar-time { font-weight: 500; }
.klsp-bar .klsp-cd--short { display: none; }
.klsp.klsp-bar .klsp-btn:not(.theme-button) { min-height: 40px; padding: .6em 1.15em; font-size: 1.05em; }
@media (max-width: 1023px) {
	/* One line, at most 56px: offer and short time on the left, button on the right.
	   Up to tablets: offer, full time and the theme's big button need about 850px in a row. */
	.klsp-bar-inner { flex-wrap: nowrap; justify-content: space-between; gap: .75em; padding: var(--klsp-pad, 7px 12px 7px 16px); }
	.klsp-bar-text { display: flex; flex-direction: column; min-width: 0; font-size: .875em; line-height: 1.3; text-align: left; }
	.klsp-bar-offer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.klsp-bar .klsp-bar-time { display: none; }
	.klsp-bar .klsp-cd--short { display: inline; }
	.klsp.klsp-bar .klsp-btn:not(.theme-button) { flex: none; min-height: 40px; padding: .55em .9em; font-size: .95em; }
	.klsp.klsp-bar a.klsp-btn.theme-button { flex: none; padding: .55em .9em !important; font-size: .95em !important; white-space: nowrap; }
	.klsp-bar .klsp-arrow, .klsp.klsp-bar a.klsp-btn.theme-button::after { display: none; }
}

/* ---------- Sticky CTA: phones only ---------- */
.klsp-sticky { display: none; }
@media (max-width: 767px) {
	.klsp.klsp-sticky {
		display: block;
		position: fixed;
		z-index: 99980;
		left: 0;
		right: 0;
		bottom: var(--klsp-sticky-offset, 0px);
		margin: 0;
		padding: var(--klsp-pad, 12px 16px calc(12px + env(safe-area-inset-bottom)));
		border-radius: 0;
		background: var(--klsp-c-bg, var(--klsp-title, #222));
		transition: transform .25s;
	}
	.klsp.klsp-sticky--floating { left: auto; right: 16px; bottom: calc(16px + var(--klsp-sticky-offset, 0px)); padding: 0; background: transparent; }
	/* Stijl: Hoeken and Rand shape the button; Schaduw is a Sticky CTA setting. */
	.klsp.klsp-sticky .klsp-btn { display: flex; width: 100%; justify-content: space-between; gap: 1em; border-radius: var(--klsp-radius, 12px); box-shadow: inset 0 0 0 2px var(--klsp-c-border, transparent); }
	.klsp.klsp-sticky--floating .klsp-btn { width: auto; border-radius: var(--klsp-radius, 999px); box-shadow: inset 0 0 0 2px var(--klsp-c-border, transparent), 0 10px 24px rgba(16, 29, 48, .25); }
	.klsp.klsp-sticky--floating.klsp-sticky--shadow-strong .klsp-btn { box-shadow: inset 0 0 0 2px var(--klsp-c-border, transparent), 0 12px 32px rgba(0, 0, 0, .38); }
	.klsp.klsp-sticky--bar.klsp-sticky--shadow-strong { box-shadow: 0 -8px 28px rgba(0, 0, 0, .28); }
	.klsp.klsp-sticky--bar:not(.klsp-sticky--shadow-none) { box-shadow: 0 -6px 20px rgba(0, 0, 0, .12); }
	.klsp.klsp-sticky--floating.klsp-sticky--shadow-none .klsp-btn { box-shadow: inset 0 0 0 2px var(--klsp-c-border, transparent); }
	.klsp-sticky .klsp-cd--short { font-size: .85em; }
	.klsp-sticky.is-hidden { transform: translateY(calc(100% + 24px)); }
	body:not(.wp-admin):has(.klsp-sticky--bar) { padding-bottom: 80px; }
}

/* Inside Divi Builder plugin modules (.et-db #et-boc .et-l), which zero
   margins, padding, backgrounds and font sizes: assets/divi-builder.css
   repeats every rule above under that scope (tests/build-divi-css.php). */

/* A Divi row clips what sticks out (overflow: hidden): with presale cards it shows their rings and shadows. */
:is(#et-boc, #page-container, body) .et_pb_row:has(.klsp-cards, .klsp-plans, .klsp-gf) { overflow: visible !important; }

/* ---------- Pagina's → Stijl per blok, on the block's Divi section or row ----------
   Divi's own section and row CSS carries an id in its selectors, and per module also two classes with
   !important (a row's padding): these weigh one class more, with !important.
   Colours and photos per block: kls_presale_blocks_css(). */
:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk.klsp-bg-white { background-color: #fff !important; background-image: none !important; }
:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk.klsp-bg-light { background-color: var(--klsp-bg-alt, #f3f5fa) !important; background-image: none !important; }
:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk.klsp-space-tight { --klsp-space: 40px; }
:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk.klsp-space-compact { --klsp-space: 56px; }
:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk.klsp-space-normal { --klsp-space: 96px; }
:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk.klsp-space-large { --klsp-space: 120px; }
:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk[class*="klsp-space-"] { padding-top: var(--klsp-space) !important; padding-bottom: var(--klsp-space) !important; }
:is(#et-boc, #page-container, body) .et_pb_section.klsp-blk.klsp-blk.klsp-blk[class*="klsp-space-"] > .et_pb_row { padding-top: 0 !important; padding-bottom: 0 !important; }
:is(#et-boc, #page-container, body) .et_pb_section.klsp-blk.klsp-blk.klsp-blk[class*="klsp-space-"] > .et_pb_row + .et_pb_row { padding-top: var(--klsp-space) !important; }
/* Two row blocks in a row: the space between them once, not twice. */
:is(#et-boc, #page-container, body) .et_pb_row.klsp-blk.klsp-blk.klsp-blk[class*="klsp-space-"] + .et_pb_row.klsp-blk.klsp-blk.klsp-blk[class*="klsp-space-"] { padding-top: 0 !important; }
@media (max-width: 767px) {
	:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk.klsp-space-tight { --klsp-space: 28px; }
	:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk.klsp-space-compact { --klsp-space: 32px; }
	:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk.klsp-space-normal { --klsp-space: 48px; }
	:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk.klsp-space-large { --klsp-space: 56px; }
}
:is(#et-boc, #page-container, body) .et_pb_section.klsp-blk.klsp-blk.klsp-blk.klsp-width-narrow .et_pb_row, :is(#et-boc, #page-container, body) .et_pb_row.klsp-blk.klsp-blk.klsp-blk.klsp-width-narrow { max-width: 760px !important; }
:is(#et-boc, #page-container, body) .et_pb_section.klsp-blk.klsp-blk.klsp-blk.klsp-width-normal .et_pb_row, :is(#et-boc, #page-container, body) .et_pb_row.klsp-blk.klsp-blk.klsp-blk.klsp-width-normal { max-width: 1080px !important; }
:is(#et-boc, #page-container, body) .et_pb_section.klsp-blk.klsp-blk.klsp-blk.klsp-width-wide .et_pb_row, :is(#et-boc, #page-container, body) .et_pb_row.klsp-blk.klsp-blk.klsp-blk.klsp-width-wide { width: 90% !important; max-width: 1400px !important; }
:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk.klsp-align-center :is(.et_pb_text, .et_pb_text_inner, h1, h2, h3, h4, p) { text-align: center !important; }
:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk.klsp-align-center :is(.et_pb_button_module_wrapper, .button_module_wrapper) { text-align: center !important; justify-content: center !important; }
:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk.klsp-align-left :is(.et_pb_text, .et_pb_text_inner, h1, h2, h3, h4, p) { text-align: left !important; }
:is(#et-boc, #page-container, body) :is(.et_pb_section, .et_pb_row).klsp-blk.klsp-blk.klsp-blk.klsp-align-left :is(.et_pb_button_module_wrapper, .button_module_wrapper) { text-align: left !important; justify-content: flex-start !important; }

/* ---------- Velden: structured fields (points, pairs, steps, video, comparison) ---------- */
/* Margins with !important: Divi resets every list in a module (.et_pb_module ul) with more weight. */
.klsp-points { margin: 0 0 1em !important; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5em; }
.klsp-points li { display: flex; align-items: center; gap: .5em; margin: 0; padding: 0; }
.klsp-points li::before { content: ""; flex: none; width: 1.1em; height: 1.1em; background: var(--klsp-active, var(--klsp-button-bg, #222)); -webkit-mask: var(--_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")) center / contain no-repeat; mask: var(--_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")) center / contain no-repeat; }
/* Numbered circles in the accent colour: Divi resets the list numbers. */
/* Every step as tall as the longest: the numbers stay evenly apart when a step takes two lines. */
.klsp-steps { margin: 0 0 1em !important; padding: 0 !important; list-style: none; counter-reset: klsp-step; display: grid; grid-auto-rows: 1fr; gap: .7em; }
.klsp-steps li { counter-increment: klsp-step; display: flex; align-items: flex-start; gap: .7em; margin: 0; padding: 0; }
.klsp-steps li::before { content: counter(klsp-step); flex: none; width: 1.75em; height: 1.75em; margin-top: -.15em; border-radius: 50%; display: grid; place-items: center; background: var(--klsp-active, var(--klsp-button-bg, #222)); color: var(--klsp-button-text, #fff); font-size: .875em; font-weight: 700; line-height: 1; }
/* A heading or list in a field's text after a paragraph gets room above it (Divi's last paragraph has none below). */
.et_pb_text_inner:has(.klsp-points, .klsp-steps, .klsp-pairs) > :is(p, ul, ol, div) + :is(h2, h3, h4),
.et_pb_text_inner > p + :is(.klsp-points, .klsp-steps, .klsp-pairs) { margin-top: .9em !important; }
.klsp-pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1em 1.6em; }
.klsp-pairs > div { display: flex; flex-direction: column; gap: .25em; }
.klsp-pairs b { font-weight: 700; }
.klsp-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--klsp-radius, 16px); overflow: hidden; background: #000; }
.klsp-video :is(iframe, video) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.klsp-compare { width: 100%; border-collapse: collapse; }
.klsp-compare :is(th, td) { padding: .7em .8em; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); text-align: left; }
.klsp-compare thead th { font-size: .875em; font-weight: 600; opacity: .75; }
@media (max-width: 480px) { .klsp-compare :is(th, td) { padding: .6em .4em; font-size: .9375em; } }

/* A section ends as it starts: Divi's bottom padding and margin under the last text in a module go. */
.klsp-blk .et_pb_text_inner > :last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* Form fields: one height for text fields and lists, the text in the middle (a 15px line height on 16px text sat high). */
.klsp.klsp-slot .gform_wrapper.gform_wrapper .gfield input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="url"]), .klsp.klsp-slot .gform_wrapper.gform_wrapper .gfield select { height: 52px !important; min-height: 52px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.4 !important; }
.klsp.klsp-slot .gform_wrapper.gform_wrapper .gfield select { padding-right: 40px !important; line-height: 50px !important; } /* a styled list doesn't centre its text itself */
.klsp.klsp-slot .gform_wrapper.gform_wrapper .gfield textarea { line-height: 1.5 !important; }
.klsp.klsp-slot .gform_wrapper.gform_wrapper .ginput_container { margin-top: 0 !important; }
/* Plan cards: the list keeps its room under "Je bespaart …" (the list's own margin: 0 won before). */
.klsp .klsp-plan > .klsp-plan-offer + .klsp-plan-usps { margin-top: 1.1em; }