/* ═══════════════════════════════════════════════════════════════
   TestRoute — Shared pricing component (homepage + every DTC page)
   ───────────────────────────────────────────────────────────────
   SINGLE SOURCE OF TRUTH for the pricing "slider".
   Rendered by includes/pricing.php → tr_pricing_render().
   The host page provides the <section> shell (background + width);
   this file styles the heading, the three plan cards and the trust line.

   • Designed for a DARK navy section background.
   • Tokens are component-scoped under .tr-pricing so the component is
     fully portable and does not depend on page-level --tr-* / --c-* vars.
   • !important is required throughout (Cornerstone theme cascade).
   ═══════════════════════════════════════════════════════════════ */

.tr-pricing {
	--tp-green: #03c988 !important;
	--tp-green-d: #02a873 !important;
	--tp-green-lt: #3ee0a6 !important;
	--tp-ink: #0d1b2a !important;
	--tp-ease: cubic-bezier(.4, 0, .2, 1) !important;
	--tp-dur: .2s !important;
	font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ── Heading ── */
.tr-pricing__head { text-align: center !important; max-width: 640px !important; margin: 0 auto 28px !important; }
.tr-pricing__accent { width: 32px !important; height: 2px !important; border-radius: 2px !important; background: rgba(3, 201, 136, .5) !important; margin: 0 auto 14px !important; }
.tr-pricing__title { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.03em !important; line-height: 1.15 !important; color: rgba(255, 255, 255, .94) !important; margin: 0 0 8px !important; }
@media (min-width: 760px) { .tr-pricing__title { font-size: 30px !important; } }
.tr-pricing__sub { font-size: 13px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, .55) !important; margin: 0 !important; }

/* ── Grid ── */
.tr-pricing__cols { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; max-width: 980px !important; margin: 0 auto !important; align-items: stretch !important; }
@media (min-width: 760px) { .tr-pricing__cols { grid-template-columns: 1fr 1fr 1fr !important; gap: 20px !important; } }

/* ── Card ── */
.tr-pricing__plan {
	position: relative !important;
	display: flex !important; flex-direction: column !important;
	background: rgba(255, 255, 255, .04) !important;
	border: .5px solid rgba(255, 255, 255, .1) !important;
	border-radius: 16px !important;
	padding: 28px 24px !important;
	text-align: left !important;
	transition: border-color var(--tp-dur) var(--tp-ease), transform var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease) !important;
}
.tr-pricing__plan:hover { border-color: rgba(255, 255, 255, .2) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .22) !important; }
.tr-pricing__plan.is-hero { background: rgba(3, 201, 136, .06) !important; border-color: rgba(3, 201, 136, .3) !important; }
.tr-pricing__plan.is-hero:hover { border-color: rgba(3, 201, 136, .45) !important; }

/* ── Badge ── */
.tr-pricing__badge {
	position: absolute !important; top: -10px !important; left: 50% !important; transform: translateX(-50%) !important;
	white-space: nowrap !important;
	font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .04em !important;
	color: var(--tp-ink) !important; background: var(--tp-green) !important;
	border-radius: 999px !important; padding: 4px 12px !important;
}
.tr-pricing__plan:not(.is-hero) .tr-pricing__badge { background: #13273a !important; border: 1px solid rgba(3, 201, 136, .45) !important; color: var(--tp-green) !important; }

/* ── Name + duration pill ── */
.tr-pricing__name { font-size: 17px !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 4px !important; }
.tr-pricing__dur { display: inline-flex !important; align-self: flex-start !important; align-items: baseline !important; gap: 5px !important; background: rgba(255, 255, 255, .08) !important; padding: 6px 13px !important; border-radius: 8px !important; margin-bottom: 12px !important; }
.tr-pricing__dur b { font-size: 15px !important; font-weight: 700 !important; color: #fff !important; letter-spacing: -.01em !important; }
.tr-pricing__dur span { font-size: 12.5px !important; font-weight: 500 !important; color: rgba(255, 255, 255, .65) !important; }

/* ── Tagline ── */
.tr-pricing__tagline { font-size: 12px !important; color: rgba(255, 255, 255, .6) !important; margin: -6px 0 12px !important; line-height: 1.4 !important; }

/* ── Price ── */
.tr-pricing__was { font-size: 13px !important; color: rgba(255, 255, 255, .4) !important; text-decoration: line-through !important; margin-bottom: 2px !important; }
.tr-pricing__price { display: flex !important; align-items: flex-start !important; gap: 1px !important; margin-bottom: 2px !important; }
.tr-pricing__sym { font-size: 18px !important; font-weight: 700 !important; color: rgba(255, 255, 255, .7) !important; margin-top: 5px !important; }
.tr-pricing__int { font-size: 40px !important; font-weight: 800 !important; color: #fff !important; line-height: 1 !important; letter-spacing: -.03em !important; font-feature-settings: 'tnum' 1 !important; }
.tr-pricing__dec { font-size: 18px !important; font-weight: 700 !important; color: rgba(255, 255, 255, .45) !important; margin-top: 5px !important; }
/* align-self, niet display. De kaart is display:flex met flex-direction:column,
   en een flex-item wordt geblokkificeerd en in de dwarsrichting opgerekt — dus
   inline-block deed niets en de chip liep over de volle kaartbreedte. Gemeten:
   492px in een kaart van 542px. align-self:flex-start laat hem meekrimpen met
   zijn tekst; width:fit-content vangt het geval af waarin de kaart ooit geen
   flexcontainer meer is. */
.tr-pricing__save { align-self: flex-start !important; width: fit-content !important; max-width: 100% !important; display: inline-block !important; font-size: 10px !important; font-weight: 700 !important; color: var(--tp-green-lt) !important; background: rgba(3, 201, 136, .12) !important; border-radius: 999px !important; padding: 2px 8px !important; margin-top: 6px !important; }
.tr-pricing__once { font-size: 11px !important; color: rgba(255, 255, 255, .4) !important; margin: 8px 0 16px !important; }

/* ── Features ── */
.tr-pricing__feats { display: flex !important; flex-direction: column !important; gap: 9px !important; margin-bottom: 20px !important; }
.tr-pricing__feat { display: flex !important; align-items: center !important; gap: 9px !important; font-size: 12.5px !important; color: rgba(255, 255, 255, .78) !important; }
.tr-pricing__feat svg { flex-shrink: 0 !important; color: var(--tp-green) !important; }
.tr-pricing__feat.is-excluded { color: rgba(255, 255, 255, .3) !important; }
.tr-pricing__feat.is-excluded svg { color: rgba(255, 255, 255, .25) !important; }

/* ── CTA (pinned to card bottom for equal-height alignment) ── */
.tr-pricing__cta {
	display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
	width: 100% !important; margin-top: auto !important;
	padding: 13px !important; border-radius: 10px !important;
	background: rgba(255, 255, 255, .08) !important; color: #fff !important; border: .5px solid rgba(255, 255, 255, .14) !important;
	font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important;
	cursor: pointer !important;
	transition: background var(--tp-dur) var(--tp-ease), border-color var(--tp-dur) var(--tp-ease) !important;
}
.tr-pricing__cta svg { flex-shrink: 0 !important; }
.tr-pricing__plan:not(.is-hero) .tr-pricing__cta:hover { background: rgba(255, 255, 255, .12) !important; border-color: rgba(255, 255, 255, .25) !important; }
.tr-pricing__plan.is-hero .tr-pricing__cta { background: var(--tp-green) !important; color: var(--tp-ink) !important; border-color: transparent !important; }
.tr-pricing__plan.is-hero .tr-pricing__cta:hover { background: var(--tp-green-d) !important; }

/* ── Micro line ── */
.tr-pricing__micro { text-align: center !important; font-size: 11px !important; color: rgba(255, 255, 255, .45) !important; margin-top: 9px !important; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.tr-pricing__plan, .tr-pricing__cta { transition: none !important; }
	.tr-pricing__plan:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile slider (< 760px)
   The 3-up grid becomes a horizontal scroll-snap slider. JS (pricing.js)
   opens it centred on the recommended plan and syncs the dots; this CSS
   stands on its own if JS never runs (the hero dot ships pre-active).
   ═══════════════════════════════════════════════════════════════ */

/* Base = hidden; only the slider layout reveals these. */
.tr-pricing__dots { display: none !important; }
.tr-pricing__trustline { display: none !important; }
.tr-pricing__dot { -webkit-appearance: none !important; appearance: none !important; }
.tr-pricing__dot:focus-visible { outline: 2px solid var(--tp-green) !important; outline-offset: 3px !important; }

@media (max-width: 759.98px) {
	.tr-pricing__cols {
		display: flex !important;
		grid-template-columns: none !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory !important;
		scroll-padding-left: 9% !important;
		-webkit-overflow-scrolling: touch !important;
		gap: 12px !important;
		/* 18px top clears the badge at top:-10 (overflow clips vertically too);
		   9% on the sides lets the first/last card centre and creates the peek. */
		padding: 18px 9% 14px !important;
		scrollbar-width: none !important;
	}
	.tr-pricing__cols::-webkit-scrollbar { display: none !important; }

	/* FIX core-3.21.0 — Full-bleed scrollport. The slider used to be clipped
	   at the host container's inner (padded) edge, so neighbour cards were
	   cut off ~16-24px BEFORE the physical screen edge — hanging mid-air with
	   chopped corners. margin-inline: calc(50% - 50vw) moves both edges of
	   the scroller to the true viewport edge regardless of the host page's
	   gutter width (works on the homepage AND every DTC page). Overflow clips
	   at the padding box, so cards remain visible across the 9% side padding
	   right up to the screen edge; the mask then fades them out over the last
	   22px instead of a hard cut. scroll-snap / pricing.js are unaffected —
	   all their maths read live offsets. */
	.tr-pricing__cols {
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		max-width: none !important;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%) !important;
		        mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%) !important;
	}

	.tr-pricing__plan {
		flex: 0 0 82% !important;
		width: 82% !important;
		scroll-snap-align: center !important;
		scroll-snap-stop: always !important;
	}
	/* No sticky-hover lift mid-swipe on touch. */
	.tr-pricing__plan:hover { transform: none !important; box-shadow: none !important; }

	/* The per-card micro line moves out — shown once below the slider. */
	.tr-pricing__micro { display: none !important; }

	.tr-pricing__dots {
		display: flex !important;
		justify-content: center !important;
		gap: 7px !important;
		margin-top: 16px !important;
	}
	.tr-pricing__dot {
		border: none !important;
		cursor: pointer !important;
		height: 7px !important;
		width: 7px !important;
		border-radius: 999px !important;
		padding: 0 !important;
		background: rgba(255, 255, 255, .25) !important;
		transition: width .25s var(--tp-ease), background .25s var(--tp-ease) !important;
	}
	.tr-pricing__dot.is-active {
		width: 22px !important;
		background: var(--tp-green) !important;
	}

	.tr-pricing__trustline {
		display: block !important;
		text-align: center !important;
		font-size: 11px !important;
		color: rgba(255, 255, 255, .45) !important;
		margin-top: 14px !important;
	}
}