.forge-cs {
	--forge-cs-content-width: 40%;
	/*
	 * Row-state defaults for the "Kolommen" control's bundled custom
	 * properties (see Content_Switcher::register_content_controls()) - a
	 * plain, non-responsive fallback so the widget still looks correct even
	 * before Elementor's own per-breakpoint CSS for that control has
	 * generated/regenerated (e.g. right after this feature ships on an
	 * existing page - see the mobile safety-net override further down for
	 * the equivalent "column" fallback).
	 */
	--forge-cs-direction: row;
	--forge-cs-content-basis: var(--forge-cs-content-width);
	--forge-cs-content-max-width: var(--forge-cs-content-width);
	--forge-cs-result-flex: 1 1 0;
	display: flex;
	flex-direction: var(--forge-cs-direction);
	align-items: stretch;
	gap: 60px;
	width: 100%;
}

.forge-cs__content {
	/*
	 * Reads the bundled custom properties above rather than a hardcoded
	 * flex-basis/max-width - what actually makes "Kolommen: Onder elkaar"
	 * work at any breakpoint: flex-basis is main-axis-relative (would silently
	 * govern HEIGHT instead of width once flex-direction switches to column),
	 * same underlying gotcha as the Testimonial Carousel/Content Switcher
	 * result-column bug noted elsewhere in this file.
	 */
	flex: 0 0 var(--forge-cs-content-basis);
	max-width: var(--forge-cs-content-max-width);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 24px;
}

.forge-cs__title {
	margin: 0;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.15;
	color: #23302a;
}

.forge-cs__description {
	font-size: 17px;
	line-height: 1.6;
	color: #4b5952;
}

.forge-cs__group-label {
	font-size: 24px;
	font-weight: 700;
	color: #23302a;
}

.forge-cs__options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.forge-cs__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background-color: #f0f0ec;
	border-radius: 12px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.forge-cs__radio-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.forge-cs__radio-dot {
	position: relative;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border: 2px solid #23302a;
	border-radius: 50%;
	background: transparent;
}

.forge-cs__radio-dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #23302a;
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.15s ease;
}

.forge-cs__option.is-active .forge-cs__radio-dot::after {
	transform: translate(-50%, -50%) scale(1);
}

.forge-cs__radio-input:focus-visible ~ .forge-cs__radio-dot {
	outline: 2px solid #23302a;
	outline-offset: 2px;
}

.forge-cs__option-label {
	font-size: 16px;
	color: #23302a;
}

.forge-cs__result {
	--forge-cs-fade-duration: 0.3s;
	/*
	 * flex-basis:0 is only correct while flex-direction is row (main axis
	 * horizontal, doesn't touch the explicit `height` below on the cross
	 * axis). Once "Kolommen" switches to column, that same basis would
	 * govern height instead and override it outright - the bundled
	 * --forge-cs-result-flex property (see .forge-cs above) swaps this to
	 * `0 0 auto` together with the direction so `height` still applies.
	 */
	flex: var(--forge-cs-result-flex);
	box-sizing: border-box;
	height: 500px;
	padding: 32px;
	background-color: #e4e4da;
	border: 1px solid #23302a;
	border-radius: 32px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.forge-cs__panel {
	/*
	 * All panels stacked on top of each other (each takes the same 1x1 grid
	 * cell) and cross-faded via opacity, instead of an instant
	 * display:none/block swap. Deliberately NOT position:absolute + inset:0:
	 * an absolutely positioned element's containing block is the nearest
	 * positioned ancestor's *padding* box, so inset:0 fills right up to the
	 * border and the result column's padding control has no visible effect.
	 * Grid-cell stacking sits inside the content box instead, so padding is
	 * respected. visibility is delayed on the way out so a hidden panel
	 * doesn't stay focusable/clickable mid-fade, but the delay is skipped on
	 * the way in so the incoming panel is interactive immediately.
	 */
	grid-area: 1 / 1;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--forge-cs-fade-duration) ease, visibility 0s linear var(--forge-cs-fade-duration);
}

.forge-cs__panel.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--forge-cs-fade-duration) ease, visibility 0s linear 0s;
}

.forge-cs__panel iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 767px) {
	/*
	 * Mobile safety net, not the primary mechanism: the "Kolommen" control
	 * (see Content_Switcher::register_content_controls()) defaults its mobile
	 * tier to "Onder elkaar" already, so Elementor's own generated
	 * {{WRAPPER}}-scoped CSS normally sets these same custom properties at
	 * this exact breakpoint with higher specificity than this plain-class
	 * rule. This block only matters as a fallback for the moment before that
	 * per-post CSS has regenerated (e.g. right after this feature ships on an
	 * already-published page) - without it, such a page would briefly render
	 * side-by-side columns on a phone screen instead of the stacked layout it
	 * has always had. See .forge-cs__result above for why flex-direction and
	 * flex-basis have to switch together, not independently.
	 */
	.forge-cs {
		--forge-cs-direction: column;
		--forge-cs-content-basis: 100%;
		--forge-cs-content-max-width: 100%;
		--forge-cs-result-flex: 0 0 auto;
	}

	.forge-cs--options-scroll .forge-cs__options {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.forge-cs--options-scroll .forge-cs__options::-webkit-scrollbar {
		display: none;
	}

	.forge-cs--options-scroll .forge-cs__option {
		/*
		 * Basis is the container width minus the configurable peek amount, not
		 * a fixed px card width - that's what makes "Uitsteek volgende optie"
		 * work regardless of how many options there are or how long their
		 * labels run: the current option always fills the viewport width
		 * apart from that one deliberate sliver of the next option.
		 */
		flex: 0 0 calc(100% - var(--forge-cs-mobile-peek, 40px));
		scroll-snap-align: start;
	}

	/*
	 * "Achtergrond om tekst laten sluiten" (radio_fit_content) has no effect
	 * on its own here: align-items only governs CROSS-axis sizing, which in
	 * this row-direction scroll mode is height, not width - width comes
	 * entirely from the calc(100% - peek) rule right above, unconditionally,
	 * regardless of the hug setting. Three classes (0,3,0) beats that rule's
	 * two (0,2,0), so this only kicks in when both modifiers are present -
	 * "peek" is meaningless once cards hug their own text, so it's dropped
	 * here rather than fought over.
	 */
	.forge-cs--options-scroll.forge-cs--options-fit .forge-cs__option {
		flex: 0 0 auto;
		width: fit-content;
		max-width: 100%;
	}
}