/* Sectie en gedeelde kaartkleuren. */
.mainSite .abonnementenPage {
	--abonnementen-section-padding: 4rem;
}

.mainSite .abonnementTypes.abonnementenCards {
	--card-muted: color-mix(in srgb, var(--color-white) 78%, transparent);
	--card-negative: color-mix(in srgb, var(--color-white) 70%, transparent);
	--card-border: color-mix(in srgb, var(--color-white) 23%, transparent);
	--card-accent-border: rgba(var(--color-ter-rgb), .35);
	--card-badge-bg: var(--color-ter);
	--card-sweep-duration: 8s;
}

.mainSite .abonnementenPage .pageElement:has(> #abonnementTypesBg) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 100vh;
	height: auto;
}

.mainSite .abonnementenPage #abonnementTypesBg {
	height: auto;
	padding: var(--abonnementen-section-padding) 0;
}

.mainSite .abonnementenPage #abonnementTypesBg .headerTxt {
	text-align: center;
}

/* Slider: de betaalkeuze blijft begrensd; het openbare overzicht loopt door tot de schermrand. */
.mainSite .abonnementTypes.abonnementenCards {
	display: block;
	width: 100%;
	min-width: 0;
	gap: 0;
	margin-top: 3rem;
	padding: 1rem 0 .5rem;
	overflow-x: clip;
	overflow-y: visible;
}

.mainSite .abonnementTypes.abonnementenCards[data-mode="overview"] {
	overflow: visible;
}

.mainSite .abonnementTypes.abonnementenCards > .swiper-wrapper {
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
}

/* Glazen kaarten: dezelfde variabelen als de overige kaders in body.css. */
.mainSite .abonnementTypes.abonnementenCards .abonnementType {
	position: relative;
	box-sizing: border-box;
	flex-shrink: 0;
	height: auto;
	min-width: 0;
	padding: 1.5rem 1.15rem;
	border: 1px solid var(--card-border);
	border-radius: var(--glass-radius);
	background-color: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--glass-shadow);
	/* text-shadow: var(--glass-textShadow); */
    text-shadow: 0 0px 3px #000;
	color: var(--color-white);
	overflow-wrap: anywhere;
}

.mainSite .abonnementTypes.abonnementenCards .abonnementType.meestGekozen {
	border-color: var(--card-accent-border);
}

/* Dezelfde zachte lichtveeg als het contactmenu, met een langere staart. */
.mainSite .abonnementTypes.abonnementenCards .abonnementCardSweep {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: visible;
	fill: none;
	stroke: var(--color-ter);
	stroke-width: 1.5;
	stroke-linecap: butt;
	pointer-events: none;
}

.mainSite .abonnementTypes.abonnementenCards .abonnementCardSweepSegment {
	animation: abonnementCardSweep var(--card-sweep-duration) linear infinite paused;
}

.mainSite .abonnementTypes.abonnementenCards .abonnementCardSweep.is-visible .abonnementCardSweepSegment {
	animation-play-state: running;
}

@keyframes abonnementCardSweep {
	from { stroke-dashoffset: var(--abonnement-sweep-offset); }
	to { stroke-dashoffset: calc(var(--abonnement-sweep-offset) - 100px); }
}

.mainSite .abonnementTypes.abonnementenCards .abonnementBadge {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.75rem;
	padding: .15em 1rem 0;
	border-radius: var(--glass-radius);
	background-color: var(--card-badge-bg);
	color: var(--color-black);
	font-size: .7em;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow: none;
}

/* Kaartinhoud: fonts en letterspatiëring volgen body.css. */
.mainSite .abonnementTypes.abonnementenCards .cardHeading {
	min-height: var(--abonnementen-heading-height, 0px);
}

.mainSite .abonnementTypes.abonnementenCards .title {
	margin: 0;
	color: inherit;
}

.mainSite .abonnementTypes.abonnementenCards .introTekst {
	margin: .45rem 0 0;
	font-size: .8em;
	line-height: 1.5;
	color: var(--card-muted);
}

.mainSite .abonnementTypes.abonnementenCards .priceHolder {
	min-height: var(--abonnementen-price-height, 0px);
	margin: 1.6rem 0 1.25rem;
	color: var(--color-ter);
}

.mainSite .abonnementTypes.abonnementenCards .priceLine {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem .4rem;
}

.mainSite .abonnementTypes.abonnementenCards .priceHolder .price {
	font-size: 2.15em;
	line-height: 1.15;
	white-space: nowrap;
}

.mainSite .abonnementTypes.abonnementenCards .priceHolder .price .decimal {
	font-size: .55em;
	vertical-align: baseline;
	margin: 0;
}

.mainSite .abonnementTypes.abonnementenCards .priceHolder .duration {
	margin: 0;
	font-size: .85em;
	line-height: 1.4;
	text-transform: lowercase;
}

.mainSite .abonnementTypes.abonnementenCards .prijsToelichting {
	margin: .35rem 0 0;
	color: var(--card-muted);
	font-size: .75em;
	line-height: 1.5;
}

.mainSite .abonnementTypes.abonnementenCards .cardAction {
	min-height: var(--abonnementen-action-height, 0px);
}

.mainSite .abonnementTypes.abonnementenCards .cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.25rem;
	margin: 0;
	padding: .7rem 2rem;
	font-size: .95em;
	line-height: 1.25;
	text-align: center;
}

.mainSite .abonnementTypes.abonnementenCards .cta .ctaLabel {
	display: block;
	padding-top: .15em;
}

.mainSite .abonnementTypes.abonnementenCards .cta .ctaAnimationText {
	display: block;
	min-width: 0;
}

/* Geen geërfde glasschaduw, ook niet op iconen of pseudo-elementen. */
.mainSite .abonnementTypes.abonnementenCards .cta,
.mainSite .abonnementTypes.abonnementenCards .cta *,
.mainSite .abonnementTypes.abonnementenCards .cta::before,
.mainSite .abonnementTypes.abonnementenCards .cta::after,
.mainSite .abonnementTypes.abonnementenCards .cta *::before,
.mainSite .abonnementTypes.abonnementenCards .cta *::after {
	text-shadow: none;
}

/* Flex behoudt de echte fontbasislijn binnen de afgeknipte lettervakjes. */
.mainSite .abonnementTypes.abonnementenCards .cta .ctaAnimationChar {
	display: inline-flex;
	vertical-align: baseline;
}

/* De hoverletters gebruiken echte kopieën in plaats van text-shadow. */
.mainSite .abonnementTypes.abonnementenCards .cta .ctaAnimationCharInner {
	position: relative;
}

.mainSite .abonnementTypes.abonnementenCards .cta .ctaAnimationCharCopy {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
}

.mainSite .abonnementTypes.abonnementenCards .cta.ghost {
	background-color: transparent;
	border-color: color-mix(in srgb, var(--color-white) 40%, transparent);
	color: var(--color-white);
}

.mainSite .abonnementTypes.abonnementenCards .textUnderBtn {
	margin: .7rem 0 0;
	color: var(--card-muted);
	font-size: .75em;
	line-height: 1.45;
}

.mainSite .abonnementTypes.abonnementenCards hr {
	margin: 1.3rem 0 .75rem;
	border-color: currentColor;
	opacity: .18;
}

/* Positieve en negatieve opsommingen. */
.mainSite .abonnementTypes.abonnementenCards .description {
	display: block;
	font-size: .82em;
	line-height: 1.5;
}

.mainSite .abonnementTypes.abonnementenCards .description ul {
	margin: 0;
	padding-left: 1.4rem;
	list-style: none;
}

.mainSite .abonnementTypes.abonnementenCards .description ul li {
	padding: .3rem 0;
}

.mainSite .abonnementTypes.abonnementenCards .description ul li::before {
	color: var(--color-ter);
	font-size: .9em;
	left: -1.4rem;
	top: .45rem;
	transform: none;
	margin: 0;
}

.mainSite .abonnementTypes.abonnementenCards .negatievePunten,
.mainSite .abonnementTypes.abonnementenCards .negatievePunten ul li::before {
	color: var(--card-negative);
}

.mainSite .abonnementTypes.abonnementenCards .description a {
	color: inherit;
	text-decoration: underline;
}

.mainSite .abonnementTypes.abonnementenCards .description > :last-child {
	margin-bottom: 0;
}

.mainSite .abonnementTypes.abonnementenCards a:focus-visible,
.mainSite .abonnementTypes.abonnementenCards input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Betaalkeuze: effen kaartvlakken met een afzonderlijke selectiestatus. */
.mainSite .abonnementTypes.abonnementenCards[data-mode="payment"] {
	--card-muted: rgba(var(--color-prim-rgb), .76);
	--card-negative: rgba(var(--color-prim-rgb), .64);
	--card-border: rgba(var(--color-prim-rgb), .18);
	--card-accent-border: rgba(var(--color-prim-rgb), .3);
	margin-top: 1rem;
}

.mainSite .abonnementTypes.abonnementenCards[data-mode="payment"] .abonnementType {
	background-color: var(--color-white);
	color: var(--color-prim);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	transition: border-color .3s ease-in-out, box-shadow .3s ease-in-out;
}

.mainSite .abonnementTypes.abonnementenCards[data-mode="payment"] .abonnementType:hover {
	transform: none;
	box-shadow: inset 0 0 0 1px rgba(var(--color-prim-rgb), .3);
}

.mainSite .abonnementTypes.abonnementenCards[data-mode="payment"] .abonnementType:has(input:checked) {
	border-color: var(--color-prim);
	box-shadow: inset 0 0 0 2px var(--color-prim);
}

.mainSite .abonnementTypes.abonnementenCards[data-mode="payment"] .abonnementType::after {
	content: none;
}

.mainSite .abonnementTypes.abonnementenCards[data-mode="payment"] .priceHolder,
.mainSite .abonnementTypes.abonnementenCards[data-mode="payment"] .description li::before {
	color: var(--color-prim);
}

.mainSite .abonnementTypes.abonnementenCards[data-mode="payment"] .negatievePunten li::before {
	color: var(--card-negative);
}

.mainSite .abonnementTypes.abonnementenCards .abonnementSelectie {
	margin-bottom: 1rem;
	font-size: .75em;
}

.mainSite .abonnementTypes.abonnementenCards .abonnementSelectie label {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	cursor: pointer;
}

.mainSite .abonnementTypes.abonnementenCards .abonnementSelectie input {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--color-prim);
}

.mainSite .abonnementTypes.abonnementenCards .selectedLabel,
.mainSite .abonnementTypes.abonnementenCards input:checked ~ .selectieLabel {
	display: none;
}

.mainSite .abonnementTypes.abonnementenCards input:checked ~ .selectedLabel {
	display: inline;
}

/* Glazen toelichtingskader onder het overzicht. */
/* .mainSite .abonnementenPage .abonnemententekst {
	margin-top: 2rem;
	padding: 1.5rem;
	border-radius: var(--glass-radius);
	background-color: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--glass-shadow);
	text-shadow: var(--glass-textShadow);
	overflow-wrap: anywhere;
}

.mainSite .abonnementenPage .abonnemententekst > :last-child {
	margin-bottom: 0;
} */

/* Responsive uitbreidingen. */
@media (min-width: 992px) {
	.mainSite .abonnementenPage {
		--abonnementen-section-padding: 6rem;
	}
}

@media (min-width: 1200px) {
	.mainSite .abonnementenPage {
		--abonnementen-section-padding: 8rem;
	}
}

@media (min-width: 1400px) {
	.mainSite .abonnementTypes.abonnementenCards .abonnementType {
		padding: 1.75rem 1.4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mainSite .abonnementTypes.abonnementenCards .abonnementCardSweep {
		display: none;
	}

	.mainSite .abonnementTypes.abonnementenCards .abonnementCardSweepSegment {
		animation: none;
	}

	.mainSite .abonnementTypes.abonnementenCards[data-mode="payment"] .abonnementType {
		transition: none;
	}
}