/* Pakketten Tabs — Figma "pakketten". Tokens only; buttons come from the shared buttons.css and the
   credit badge from the shared credit-badge.css. Mobile-first. */

.ppc-pakketten-tabs {
	position: relative;
	background: var(--ppc-color-surface);
	padding-block: var(--ppc-section-pad-y);
	padding-inline: var(--ppc-section-inset-x);
	overflow: hidden;
}

.ppc-pakketten-tabs__container {
	position: relative;
	max-width: var(--ppc-container-width);
	margin-inline: auto;
}

/* DIJA credit, top-right. Reuses the shared badge, recoloured for a light background and scaled down. */
/* Positioned to bleed off the top-right corner of the 1280 container exactly as in Figma (the
   section's overflow-hidden clips the part that spills past the top/right edge). */
.ppc-pakketten-tabs__credit {
	position: absolute;
	top: -233px;
	right: -194px;
	z-index: 2;
	pointer-events: none;
	--ppc-credit-sparkle-color: var(--ppc-color-picton-blue-bright);
	--ppc-credit-text-color: color-mix(in srgb, var(--ppc-color-credit-text) 72%, transparent);
}

/* Purely decorative; never intercept pointer events over the heading it overlaps. */
.ppc-pakketten-tabs__credit .ppc-credit-badge {
	pointer-events: none;
}

/* Intro */
.ppc-pakketten-tabs__intro {
	max-width: var(--ppc-measure);
	margin-inline: auto;
	text-align: center;
}

.ppc-pakketten-tabs__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--ppc-font-open-sans);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: var(--ppc-font-size-tagline);
	line-height: var(--ppc-line-height-tagline);
	color: var(--ppc-color-picton-blue-dark);
}

.ppc-pakketten-tabs__title {
	margin: 0;
	font-family: var(--ppc-font-heading);
	font-weight: var(--ppc-font-weight-bold);
	font-size: var(--ppc-font-size-h2);
	line-height: var(--ppc-line-height-heading);
	letter-spacing: var(--ppc-letter-spacing-heading);
	color: var(--ppc-color-blue-zodiac);
}

.ppc-pakketten-tabs__text {
	margin: 1rem 0 0;
	font-family: var(--ppc-font-open-sans);
	font-size: var(--ppc-font-size-lead);
	line-height: var(--ppc-line-height-body);
	color: var(--ppc-color-neutral-dark);
}

/* Tab switcher */
.ppc-pakketten-tabs__switch {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem;
	width: fit-content;
	max-width: 100%;
	margin: 2.5rem auto 0;
	padding: 0.375rem;
	background: var(--ppc-color-surface-muted);
	border-radius: 100px;
}

/* Sliding active-tab "bubble". Progressive enhancement: script.js adds .is-enhanced to the switch
   and injects the indicator, then moves it between tabs. Without JS, .is-active below is the pill. */
.ppc-pakketten-tabs__indicator {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	box-sizing: border-box;
	border: 0.7px solid var(--ppc-color-cta-border);
	border-radius: 100px;
	background:
		linear-gradient(172.8deg, rgba(162, 185, 255, 0.2) 11.67%, rgba(25, 79, 141, 0.2) 88.32%),
		var(--ppc-color-picton-blue-darkest);
	box-shadow:
		0 3px 7.7px rgba(0, 0, 0, 0.2),
		inset 3px 3px 4px rgba(255, 255, 255, 0.56),
		inset -4px -4px 3.667px rgba(0, 0, 0, 0.14);
	transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
	pointer-events: none;
}

.ppc-pakketten-tabs__switch.is-enhanced .ppc-pakketten-tabs__tab {
	position: relative;
	z-index: 1;
	background: transparent;
	transition: color 0.3s ease;
}

/* In enhanced mode the moving indicator is the pill, so the active tab itself stays transparent. */
.ppc-pakketten-tabs__switch.is-enhanced .ppc-pakketten-tabs__tab.is-active {
	background: transparent;
}

.ppc-pakketten-tabs__tab {
	appearance: none;
	border: 0;
	cursor: pointer;
	padding: 0.625rem 1.5rem;
	border-radius: 100px;
	background: transparent;
	font-family: var(--ppc-font-sans);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: var(--ppc-font-size-body);
	line-height: var(--ppc-line-height-tight);
	color: var(--ppc-color-blue-zodiac);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ppc-pakketten-tabs__tab:hover {
	color: var(--ppc-color-picton-blue-darker);
}

.ppc-pakketten-tabs__tab.is-active {
	background: var(--ppc-color-picton-blue-darkest);
	color: #ffffff;
}

.ppc-pakketten-tabs__tab:focus-visible {
	outline: 2px solid var(--ppc-color-picton-blue-darker);
	outline-offset: 2px;
}

/* Mobile: the tab options stack below each other as equal-width pills. The indicator needs no
   extra work: script.js positions it from the active tab's offsets, so it slides vertically. */
@media (max-width: 40rem) {
	.ppc-pakketten-tabs__switch {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 20rem;
		/* Concentric corners: the pill radius of a ~39px tab (19.5px) + the 6px padding. The
		   stadium 100px radius reads as a big oval once the switch is taller than it is wide. */
		border-radius: 1.625rem;
	}
}

/* Panels + cards */
.ppc-pakketten-tabs__panel {
	margin-top: 3rem;
}

.ppc-pakketten-tabs__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: stretch;
}

@media (min-width: 60rem) {
	.ppc-pakketten-tabs__cards {
		grid-template-columns: repeat(3, 1fr);
		align-items: stretch;
	}
}

.ppc-pakketten-tabs__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2.5rem 2rem;
	/* No border by default; it appears only on hover (outer cards) or always (featured card).
	   Kept at 1px transparent so the layout doesn't shift when the colour comes in. */
	border: 1px solid transparent;
	border-radius: var(--ppc-radius-card);
	background: var(--ppc-color-surface);
	text-align: center;
	transition: border-color 0.2s ease-in;
}

.ppc-pakketten-tabs__card.is-clickable {
	cursor: pointer;
}

.ppc-pakketten-tabs__card--featured {
	border-color: var(--ppc-color-scheme5-bg);
	background: rgba(77, 156, 229, 0.06);
	box-shadow: 0 12px 32px rgba(19, 51, 85, 0.12);
}

@media (min-width: 60rem) {
	.ppc-pakketten-tabs__card--featured {
		/* Lift the middle card as in the design. */
		margin-block: -0.75rem;
	}
}

.ppc-pakketten-tabs__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0.375rem 1rem;
	border: 1px solid transparent;
	border-radius: 100px;
	background: var(--ppc-color-scheme5-bg);
	color: #ffffff;
	font-family: var(--ppc-font-sans);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: 0.8125rem;
	line-height: 1.2;
	white-space: nowrap;
}

.ppc-pakketten-tabs__card-title {
	margin: 0;
	font-family: var(--ppc-font-heading);
	font-weight: var(--ppc-font-weight-bold);
	font-size: 1.75rem;
	line-height: var(--ppc-line-height-h5);
	color: var(--ppc-color-blue-zodiac);
}

.ppc-pakketten-tabs__card-text {
	margin: 0.75rem 0 0;
	font-family: var(--ppc-font-open-sans);
	font-size: var(--ppc-font-size-body);
	line-height: var(--ppc-line-height-body);
	color: var(--ppc-color-neutral-dark);
}

.ppc-pakketten-tabs__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 1.75rem 0;
}

.ppc-pakketten-tabs__price-currency {
	font-family: var(--ppc-font-heading);
	font-weight: var(--ppc-font-weight-bold);
	font-size: 1.75rem;
	color: var(--ppc-color-blue-zodiac);
}

.ppc-pakketten-tabs__price-amount {
	font-family: var(--ppc-font-heading);
	font-weight: var(--ppc-font-weight-extrabold);
	font-size: var(--ppc-font-size-price);
	line-height: 1;
	color: var(--ppc-color-blue-zodiac);
}

.ppc-pakketten-tabs__price-suffix {
	flex-basis: 100%;
	font-family: var(--ppc-font-open-sans);
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--ppc-color-neutral-dark);
}

/* Card CTA: full-width maincta. Kept exactly as the shared button renders it — the button's
   overflow-hidden clips the sparkle icon that bleeds off the right/bottom edge, matching the design.
   Only the box is stretched full width with the label centred. Whole-card clicking is handled by
   script.js (a stretched ::after would be clipped by the button's overflow-hidden). */
.ppc-pakketten-tabs__cta.ppc-button__maincta {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 0.7rem 1rem;
}

/* Non-featured cards use an outline button: white fill with the picton-blue-dark border, label and
   sparkle icon (the icon inherits the label colour via currentColor), per Figma. */
.ppc-pakketten-tabs__card:not(.ppc-pakketten-tabs__card--featured) .ppc-pakketten-tabs__cta.ppc-button__maincta {
	background: var(--ppc-color-surface);
	border: 0.7px solid var(--ppc-color-picton-blue-dark);
	color: var(--ppc-color-picton-blue-dark);
	box-shadow: none;
	transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover an outer card: its border adopts the middle card's blue, and the outline button fills in
   (background becomes the button's border colour, label + icon turn white) with the same glossy
   glow as the main CTA. */
.ppc-pakketten-tabs__card:not(.ppc-pakketten-tabs__card--featured):hover {
	border-color: var(--ppc-color-scheme5-bg);
}

.ppc-pakketten-tabs__card:not(.ppc-pakketten-tabs__card--featured):hover .ppc-pakketten-tabs__cta.ppc-button__maincta {
	background: var(--ppc-color-picton-blue-dark);
	border-color: var(--ppc-color-picton-blue-dark);
	color: #ffffff;
	box-shadow: var(--ppc-shadow-maincta);
}

/* Smooth colour changes for the featured-card hover state below. */
.ppc-pakketten-tabs__card-title,
.ppc-pakketten-tabs__card-text,
.ppc-pakketten-tabs__price-currency,
.ppc-pakketten-tabs__price-amount,
.ppc-pakketten-tabs__price-suffix,
.ppc-pakketten-tabs__usp,
.ppc-pakketten-tabs__check,
.ppc-pakketten-tabs__badge {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.ppc-pakketten-tabs__card--featured {
	transition: border-color 0.2s ease-in, background-color 0.2s ease, box-shadow 0.2s ease;
}

.ppc-pakketten-tabs__card--featured .ppc-pakketten-tabs__cta.ppc-button__maincta {
	transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover the featured (middle) card: the whole card fills with its border colour; content text turns
   white for contrast; the badge and button invert to a white variant with blue text/icon. */
.ppc-pakketten-tabs__card--featured:hover {
	background: var(--ppc-color-scheme5-bg);
	box-shadow: var(--ppc-shadow-maincta);
}

.ppc-pakketten-tabs__card--featured:hover .ppc-pakketten-tabs__card-title,
.ppc-pakketten-tabs__card--featured:hover .ppc-pakketten-tabs__card-text,
.ppc-pakketten-tabs__card--featured:hover .ppc-pakketten-tabs__price-currency,
.ppc-pakketten-tabs__card--featured:hover .ppc-pakketten-tabs__price-amount,
.ppc-pakketten-tabs__card--featured:hover .ppc-pakketten-tabs__price-suffix,
.ppc-pakketten-tabs__card--featured:hover .ppc-pakketten-tabs__usp,
.ppc-pakketten-tabs__card--featured:hover .ppc-pakketten-tabs__check {
	color: #ffffff;
}

.ppc-pakketten-tabs__card--featured:hover .ppc-pakketten-tabs__badge {
	background: var(--ppc-color-surface);
	border-color: var(--ppc-color-picton-blue-dark);
	color: var(--ppc-color-picton-blue-dark);
}

.ppc-pakketten-tabs__card--featured:hover .ppc-pakketten-tabs__cta.ppc-button__maincta {
	background: var(--ppc-color-surface);
	border-color: var(--ppc-color-picton-blue-dark);
	color: var(--ppc-color-picton-blue-dark);
	box-shadow: none;
}

/* USPs */
.ppc-pakketten-tabs__usps {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	text-align: left;
}

.ppc-pakketten-tabs__usp {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-family: var(--ppc-font-open-sans);
	font-size: var(--ppc-font-size-body);
	line-height: var(--ppc-line-height-body);
	color: var(--ppc-color-neutral-darker);
}

.ppc-pakketten-tabs__check {
	flex-shrink: 0;
	margin-top: 0.15em;
	color: var(--ppc-color-success);
}

/* Below 960px the cards stack; centre the USP lines within each card. */
@media (max-width: 59.9375rem) {
	.ppc-pakketten-tabs__usps {
		align-items: center;
		text-align: center;
	}
}

/* Divider above the USP list, as in the design. */
.ppc-pakketten-tabs__usps {
	border-top: 1px solid var(--ppc-color-card-border);
	padding-top: 1.5rem;
}

.ppc-pakketten-tabs__footnote {
	/* Figma: 500px wide, 56px below the packages, black at 50% (opacity on the node). */
	max-width: 31.25rem;
	margin: 3.5rem auto 0;
	font-family: var(--ppc-font-open-sans);
	font-style: italic;
	font-size: 0.8125rem;
	line-height: var(--ppc-line-height-body);
	color: var(--ppc-color-neutral-darkest);
	opacity: 0.5;
	text-align: center;
}

/* Rating */
.ppc-pakketten-tabs__rating {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

.ppc-pakketten-tabs__rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--ppc-font-sans);
	font-size: 0.875rem;
	color: var(--ppc-color-blue-zodiac);
}

.ppc-pakketten-tabs__rating-label {
	font-weight: var(--ppc-font-weight-semibold);
}

.ppc-pakketten-tabs__rating-logo {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ppc-color-success);
}

/* Hide the corner credit on small screens to avoid clutter over the stacked layout. */
@media (max-width: 48rem) {
	.ppc-pakketten-tabs__credit {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ppc-pakketten-tabs__tab,
	.ppc-pakketten-tabs__indicator {
		transition: none;
	}
}