/* Pricing Block - frontend styling
 * Scoped under .wb-pricing so nothing leaks into the rest of the site.
 * Self-contained: no framework or icon font required.
 */

.wb-pricing {
	--wb-pricing-blue: var(--color-primary-600, #2f86eb);
	--wb-pricing-accent: var(--wb-accent, var(--color-primary-600, #2f86eb));
	--wb-pricing-blue-dark: var(--color-primary-700, #1f6fd0);
	--wb-pricing-navy: var(--color-primary-950, #0f2a4a);
	--wb-pricing-ink: #46586f;
	--wb-pricing-star: var(--color-warning, #f5a524);
	position: relative;
	padding: clamp(2rem, 5vw, 5rem) 0;
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.wb-pricing.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.wb-pricing-inner {
	max-width: 75rem; /* = .grid-container van de template */
	margin: 0 auto;
	padding: 0 0.9375rem; /* = gutter van de template */
}

/* ---- Heading ------------------------------------------------------------ */
.wb-pricing-head {
	text-align: center;
	max-width: 44rem;
	margin: 0 auto 2.2rem;
}

.wb-pricing-eyebrow {
	color: var(--wb-pricing-blue);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
}

.wb-pricing-title {
	color: var(--wb-pricing-navy);
	font-weight: 800;
	font-size: clamp(1.8rem, 3.4vw, 2.8rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 0.8rem;
}

.wb-pricing-lead {
	color: var(--wb-pricing-ink);
	font-size: clamp(1rem, 1.3vw, 1.12rem);
	line-height: 1.65;
	margin: 0;
}

/* ---- Month / year switch ------------------------------------------------ */
.wb-pricing-switch {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 auto 2.6rem;
}

.wb-pricing-switch-label {
	color: var(--wb-pricing-ink);
	font-size: 0.95rem;
	font-weight: 600;
	transition: color 0.2s ease;
	-webkit-user-select: none;
	user-select: none;
}

.wb-pricing-switch-label.is-active {
	color: var(--wb-pricing-navy);
}

.wb-pricing-switch-track {
	position: relative;
	display: inline-block;
	width: 54px;
	height: 30px;
	flex: 0 0 auto;
	cursor: pointer;
}

.wb-pricing-toggle {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.wb-pricing-switch-knob {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: rgba(15, 42, 74, 0.18);
	transition: background 0.2s ease;
}

.wb-pricing-switch-knob::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 5px rgba(15, 42, 74, 0.25);
	transition: transform 0.2s ease;
}

.wb-pricing-toggle:checked + .wb-pricing-switch-knob {
	background: var(--wb-pricing-blue);
}

.wb-pricing-toggle:checked + .wb-pricing-switch-knob::before {
	transform: translateX(24px);
}

.wb-pricing-toggle:focus-visible + .wb-pricing-switch-knob {
	outline: 2px solid var(--wb-pricing-blue);
	outline-offset: 2px;
}

/* ---- Card grid ---------------------------------------------------------- */
.wb-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 1.8rem);
	align-items: stretch;
}

.wb-pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(15, 42, 74, 0.10);
	border-radius: 18px;
	padding: 28px;
	box-shadow: 0 6px 20px rgba(15, 42, 74, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wb-pricing-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(15, 42, 74, 0.12);
}

/* Highlighted card - stronger border + shadow + ribbon */
.wb-pricing-card--highlight {
	border: 2px solid var(--wb-pricing-blue);
	box-shadow: 0 18px 40px rgba(47, 134, 235, 0.22);
}

.wb-pricing-ribbon {
	position: absolute;
	top: 16px;
	right: -6px;
	background: var(--wb-pricing-blue);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px 0 0 999px;
	box-shadow: 0 4px 10px rgba(47, 134, 235, 0.35);
}

.wb-pricing-plan {
	color: var(--wb-pricing-navy);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.9rem;
}

/* ---- Price -------------------------------------------------------------- */
.wb-pricing-pricewrap {
	margin-bottom: 1.4rem;
}

.wb-pricing-price {
	display: block;
	color: var(--wb-pricing-navy);
	font-size: clamp(2rem, 3.4vw, 2.6rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.wb-pricing-price-info {
	display: block;
	color: var(--wb-pricing-ink);
	font-size: 0.85rem;
	margin-top: 0.35rem;
}

/* ---- Feature list ------------------------------------------------------- */
.wb-pricing-features {
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 0;
	flex: 1 1 auto;
}

.wb-pricing-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 7px 0;
	color: var(--wb-pricing-ink);
	font-size: 0.96rem;
	line-height: 1.45;
	border-bottom: 1px solid rgba(15, 42, 74, 0.06);
}

.wb-pricing-features li:last-child {
	border-bottom: none;
}

.wb-pricing-check {
	flex: 0 0 auto;
	color: var(--wb-pricing-blue);
	margin-top: 1px;
}

/* ---- Button ------------------------------------------------------------- */
.wb-pricing-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 24px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	line-height: 1;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
	margin-top: auto;
}

.wb-pricing-btn--primary {
	background: var(--wb-pricing-blue);
	color: #fff;
	box-shadow: 0 8px 20px rgba(47, 134, 235, 0.32);
}

.wb-pricing-btn--primary:hover {
	background: var(--wb-pricing-blue-dark);
	transform: translateY(-1px);
	color: #fff;
}

.wb-pricing-btn--hollow {
	background: transparent;
	color: var(--wb-pricing-navy);
	border: 1.5px solid rgba(15, 42, 74, 0.22);
}

.wb-pricing-btn--hollow:hover {
	border-color: var(--wb-pricing-blue);
	color: var(--wb-pricing-blue);
	transform: translateY(-1px);
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wb-pricing {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.wb-pricing-card,
	.wb-pricing-btn {
		transition: none !important;
	}
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
	.wb-pricing-grid {
		grid-template-columns: 1fr;
		max-width: 26rem;
		margin: 0 auto;
	}
}

/* ---------------------------------------------------------------------------
 * Containerbreedte gelijk aan .grid-container van de TimeWriter-template
 * (css/basics.css + css/variables.css). Zo lijnen de blokken exact uit met de
 * navigatie en met de secties die de template-opmaak gebruiken. De fallbacks
 * gelden als de module buiten dit template wordt gebruikt.
 * ------------------------------------------------------------------------ */
.wb-pricing-inner {
	max-width: var(--max-width-desktop, 75rem);
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
}
@media (max-width: 1500px) {
	.wb-pricing-inner { max-width: var(--max-width-medium, 75rem); }
}
@media (max-width: 1100px) {
	.wb-pricing-inner { max-width: var(--max-width-tablet, 100%); }
}
@media (max-width: 1023px) {
	.wb-pricing-inner { max-width: calc(var(--max-width-tablet, 1023px) - 40px); }
}