/* ===========================================================
   RewardRace — Pricing Details (rrew-pdetails)
   The "Pricing details" section of the Pricing page.

   Anatomy (matches the design image, top → bottom):
     1. Heading block   : badge (gold star) + accent title + subtitle
                          + centered Monthly / Yearly billing toggle
     2. Plan cards row  : 3 cards (Basic / Standard / Premium). The
                          "Standard" card is featured — purple border +
                          a floating "Most Popular" pill + filled CTA.
     3. Compare table   : feature-by-plan comparison grid.
     4. Trust strip     : 4 reassurance cards (trial / no card / etc.)

   Colour tokens, type scale, badge wash, shadows and the brand
   gradient are all inherited from base.css so this section reads
   1:1 with the Pricing and Hero widgets.
   =========================================================== */

.rrew-pdetails {
	--pd-bg:            #FFFFFF;
	--pd-text:          var(--rr-heading);
	--pd-body:          var(--rr-text);
	--pd-muted:         var(--rr-muted);
	--pd-subtle:        var(--rr-subtle);
	--pd-border:        var(--rr-border);
	--pd-divider:       var(--rr-divider);

	--pd-card-bg:       #FFFFFF;
	--pd-icon-bg:       var(--rr-brand-soft, #EEEAFB);

	--pd-accent:        var(--rr-brand);
	--pd-accent-soft:   var(--rr-brand-soft);
	--pd-accent-tint:   var(--rr-brand-tint);

	/* Toggle pill */
	--pd-pill-outer:    var(--rr-brand-soft, #EEEAFB);
	--pd-pill-active:   #FFFFFF;

	/* Featured "Most Popular" banner / standard column wash */
	--pd-ink-bg:        #0E0B1F;
	--pd-col-tint:      rgba(87, 63, 211, .045);

	--pd-card-shadow:        0 1px 2px rgba(11, 10, 20, .04), 0 6px 18px rgba(11, 10, 20, .05);
	--pd-card-shadow-hover:  0 4px 14px rgba(87, 63, 211, .12), 0 14px 34px rgba(11, 10, 20, .09);
	--pd-popular-shadow:     0 6px 18px rgba(87, 63, 211, .16), 0 18px 42px rgba(11, 10, 20, .08);

	/* Height of the "Most Popular" ribbon — reserved as top padding
	   above the cards row so the ribbon has room above the card. */
	--pd-badge-h:       44px;

	position: relative;
	background: var(--pd-bg);
	color: var(--pd-body);
	font-family: var(--rr-font-sans);
	box-sizing: border-box;
}
.rrew-pdetails *,
.rrew-pdetails *::before,
.rrew-pdetails *::after { box-sizing: border-box; }

/* ----- Dark mode ----- */
.rrew-pdetails--dark,
html[data-theme="dark"] .rrew-pdetails--auto {
	--pd-bg:          #0A0912;
	--pd-card-bg:     #14122A;
	--pd-icon-bg:     rgba(139, 115, 255, .14);
	--pd-border:      rgba(255, 255, 255, .10);
	--pd-divider:     rgba(255, 255, 255, .08);
	--pd-accent:      #8B73FF;
	--pd-accent-soft: rgba(139, 115, 255, .14);
	--pd-accent-tint: rgba(139, 115, 255, .20);
	--pd-pill-outer:  rgba(139, 115, 255, .16);
	--pd-pill-active: #14122A;
	--pd-ink-bg:      #232238;
	--pd-col-tint:    rgba(139, 115, 255, .08);
	--pd-card-shadow:        0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
	--pd-card-shadow-hover:  0 6px 22px rgba(139, 115, 255, .22), 0 18px 38px rgba(0, 0, 0, .45);
	--pd-popular-shadow:     0 8px 26px rgba(139, 115, 255, .26), 0 20px 44px rgba(0, 0, 0, .45);
}

.rrew-pdetails__inner {
	max-width: var(--rr-container);
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 3vw, 2.5rem);
	position: relative;
}

/* ===========================================================
   1. Heading block
   =========================================================== */
.rrew-pdetails__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Badge — replicated 1:1 from the Hero widget's badge:
   white→lavender wash, hairline brand border, soft shadow,
   gold star icon. */
.rrew-pdetails .rrew-pdetails__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 8px 14px;
	background: linear-gradient(135deg, rgba(255, 255, 255, .85) 0%, rgba(238, 234, 251, .85) 100%);
	border: 1px solid rgba(87, 63, 211, .15);
	border-radius: var(--rr-radius-pill);
	font-size: 13px;
	font-weight: 600;
	color: #2D2A3D;
	letter-spacing: 0;
	text-transform: none;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 1px 2px rgba(11, 10, 20, .04);
	margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}
.rrew-pdetails--dark .rrew-pdetails__badge,
html[data-theme="dark"] .rrew-pdetails--auto .rrew-pdetails__badge {
	background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(139, 115, 255, .14) 100%);
	border-color: rgba(255, 255, 255, .12);
	color: var(--pd-text);
}

.rrew-pdetails__badge-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	align-items: center;
	justify-content: center;
	color: #FFB300;
	flex-shrink: 0;
}

.rrew-pdetails__title {
	font-size: var(--rr-fs-h2);
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: var(--rr-lh-snug);
	margin: 0;
	color: var(--pd-text);
	text-wrap: balance;
}
.rrew-pdetails__title-lead,
.rrew-pdetails__title-tail { color: inherit; }
.rrew-pdetails__title-lead { margin-right: .26em; }
.rrew-pdetails__title-tail { margin-left: .26em; }
.rrew-pdetails__title-accent {
	color: var(--pd-accent) !important;
	font-weight: 800;
	font-style: normal !important;
}

.rrew-pdetails__subtitle {
	margin: var(--rr-space-4) auto 0;
	max-width: 540px;
	font-size: var(--rr-fs-md);
	color: var(--pd-muted);
	line-height: 1.6;
}

/* ----- Billing toggle ----- */
.rrew-pdetails__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px;
	margin-top: var(--rr-space-6);
	background: var(--pd-pill-outer);
	border-radius: var(--rr-radius-pill);
}

.rrew-pdetails__toggle-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--pd-text);
	font-family: var(--rr-font-sans);
	font-size: var(--rr-fs-sm);
	font-weight: 600;
	letter-spacing: -.01em;
	padding: 8px 20px;
	border-radius: var(--rr-radius-pill);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	transition:
		background-color var(--rr-dur-fast) var(--rr-ease-out),
		color var(--rr-dur-fast) var(--rr-ease-out),
		box-shadow var(--rr-dur-fast) var(--rr-ease-out);
}
.rrew-pdetails__toggle-btn.is-active {
	background: var(--pd-pill-active);
	color: var(--pd-accent);
	box-shadow: 0 1px 2px rgba(11, 10, 20, .08), 0 2px 6px rgba(11, 10, 20, .05);
}
.rrew-pdetails__toggle-btn:focus-visible {
	outline: none;
	box-shadow: var(--rr-ring);
}

.rrew-pdetails__toggle-save {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: -.005em;
	color: var(--pd-accent);
	background: var(--pd-accent-soft);
	padding: 2px 7px;
	border-radius: var(--rr-radius-pill);
}
.rrew-pdetails__toggle-btn.is-active .rrew-pdetails__toggle-save {
	background: var(--pd-accent-tint);
}

/* ===========================================================
   2. Plan cards
   =========================================================== */
.rrew-pdetails__plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 1.8vw, 1.5rem);
	align-items: stretch;
	margin-top: clamp(2.75rem, 5vw, 4rem);
	/* Reserve room above the row for the featured card's "Most Popular"
	   tab, which sits outside (above) the card's top edge. */
	padding-top: var(--pd-badge-h);
}

.rrew-pdetails__plan {
	position: relative;
	background: var(--pd-card-bg);
	border: 1px solid var(--pd-border);
	border-radius: var(--rr-radius-2xl);
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(1.5rem, 2.2vw, 2rem);
	box-shadow: var(--pd-card-shadow);
	transition:
		transform var(--rr-dur-base) var(--rr-ease-out),
		box-shadow var(--rr-dur-base) var(--rr-ease-out),
		border-color var(--rr-dur-base) var(--rr-ease-out);
}
.rrew-pdetails__plan:hover {
	transform: translateY(-4px);
	box-shadow: var(--pd-card-shadow-hover);
	border-color: color-mix(in srgb, var(--pd-accent) 30%, var(--pd-border));
}

/* Featured card — brand-purple border + softer purple shadow. Top
   corners are flattened so the ribbon above reads as one shape. */
.rrew-pdetails__plan--popular {
	border-color: var(--pd-accent);
	box-shadow: var(--pd-popular-shadow);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.rrew-pdetails__plan--popular:hover {
	border-color: var(--pd-accent);
	box-shadow: var(--pd-popular-shadow);
}

/* "Most Popular" ribbon — mirrors the Pricing widget's ribbon: a
   full-width banner sitting ABOVE the featured card, extending 1px on
   each side to cover the card's border. Rounded top corners + flat
   bottom, flush with the card top so the two read as one panel. */
.rrew-pdetails__plan-badge {
	position: absolute;
	left: -1px;
	right: -1px;
	bottom: 100%;
	height: var(--pd-badge-h);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	background: var(--rr-brand-gradient);
	color: #FFFFFF;
	border-radius: var(--rr-radius-2xl) var(--rr-radius-2xl) 0 0;
	font-size: var(--rr-fs-sm);
	font-weight: 700;
	letter-spacing: -.005em;
	white-space: nowrap;
}

/* Plan header — icon tile + name/tagline */
.rrew-pdetails__plan-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rrew-pdetails__plan-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: var(--rr-radius-lg);
	background: var(--pd-icon-bg);
	color: var(--pd-accent);
}
.rrew-pdetails__plan-icon svg { width: 24px; height: 24px; }

.rrew-pdetails__plan-name {
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0;
	color: var(--pd-text);
	line-height: 1.15;
}
.rrew-pdetails__plan-tagline {
	font-size: var(--rr-fs-xs);
	color: var(--pd-muted);
	margin: 2px 0 0;
	line-height: 1.4;
	font-weight: 500;
}

/* Price */
.rrew-pdetails__plan-price {
	display: flex;
	align-items: baseline;
	gap: 2px;
	margin: clamp(1rem, 1.6vw, 1.35rem) 0;
}
.rrew-pdetails__plan-pair {
	display: none;
	align-items: baseline;
	gap: 2px;
}
.rrew-pdetails.is-monthly .rrew-pdetails__plan-pair--monthly,
.rrew-pdetails.is-yearly  .rrew-pdetails__plan-pair--yearly { display: inline-flex; }
.rrew-pdetails:not(.is-monthly):not(.is-yearly) .rrew-pdetails__plan-pair--monthly { display: inline-flex; }

.rrew-pdetails__plan-currency {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--pd-text);
	line-height: 1;
	align-self: flex-start;
	margin-top: .35em;
}
.rrew-pdetails__plan-amount {
	font-size: clamp(2rem, 1.3rem + 1.8vw, 2.625rem);
	font-weight: 800;
	letter-spacing: -.025em;
	color: var(--pd-text);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.rrew-pdetails__plan-period {
	font-size: var(--rr-fs-sm);
	color: var(--pd-muted);
	font-weight: 500;
	margin-left: 5px;
	align-self: flex-end;
	margin-bottom: .25em;
}

/* Feature list */
.rrew-pdetails__plan-features {
	list-style: none;
	margin: 0 0 var(--rr-space-6);
	padding: var(--rr-space-5) 0 0;
	border-top: 1px solid var(--pd-divider);
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.rrew-pdetails__plan-feature {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--rr-fs-sm);
	color: var(--pd-body);
	line-height: 1.4;
	font-weight: 500;
}
.rrew-pdetails__plan-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--pd-accent);
	margin-top: 1px;
}
.rrew-pdetails__plan-check svg { width: 18px; height: 18px; }

/* Feature text — a trailing "( … )" parenthetical renders on a second
   line as a smaller, muted subtitle. */
.rrew-pdetails__plan-feature-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.rrew-pdetails__plan-feature-note {
	font-size: var(--rr-fs-xs);
	font-weight: 500;
	color: var(--pd-muted);
	line-height: 1.35;
}

/* CTA button — outline by default, filled gradient on the featured card. */
.rrew-pdetails__plan-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: auto;
	padding: 13px 22px;
	background: transparent;
	color: var(--pd-accent);
	border: 1.5px solid var(--pd-accent);
	border-radius: var(--rr-radius-pill);
	text-decoration: none;
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: -.012em;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color var(--rr-dur-fast) var(--rr-ease-out),
		color var(--rr-dur-fast) var(--rr-ease-out),
		transform var(--rr-dur-fast) var(--rr-ease-out),
		box-shadow var(--rr-dur-fast) var(--rr-ease-out);
}
.rrew-pdetails__plan-cta:hover {
	background: var(--pd-accent);
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: var(--rr-shadow-brand-sm);
}
.rrew-pdetails__plan-cta:focus-visible {
	outline: none;
	box-shadow: var(--rr-ring);
}

.rrew-pdetails__plan--popular .rrew-pdetails__plan-cta {
	background: var(--rr-brand-gradient);
	color: #FFFFFF;
	border-color: transparent;
	box-shadow: var(--rr-shadow-brand-sm);
}
.rrew-pdetails__plan--popular .rrew-pdetails__plan-cta:hover {
	box-shadow: var(--rr-shadow-brand-md);
	filter: saturate(1.06);
}

/* ===========================================================
   3. Compare features table
   =========================================================== */
.rrew-pdetails__compare {
	margin-top: clamp(2.75rem, 5vw, 4rem);
	border: 1px solid var(--pd-border);
	border-radius: var(--rr-radius-2xl);
	background: var(--pd-card-bg);
	box-shadow: var(--pd-card-shadow);
	overflow: hidden;
}
/* Horizontal scroll safety-net on narrow viewports. */
.rrew-pdetails__compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.rrew-pdetails__table {
	width: 100%;
	min-width: 620px;
	display: grid;
	grid-template-columns: minmax(190px, 1.7fr) repeat(3, minmax(96px, 1fr));
}

/* Row wrappers use display:contents so their cells still land on the
   parent grid — this lets us style header / last rows cleanly. */
.rrew-pdetails__row { display: contents; }

/* Every cell */
.rrew-pdetails__cell {
	display: flex;
	align-items: center;
	padding: 16px 18px;
	font-size: var(--rr-fs-sm);
	border-bottom: 1px solid var(--pd-divider);
}
.rrew-pdetails__cell--value { justify-content: center; }

/* Subtle wash behind the featured (Standard) column. */
.rrew-pdetails__cell--standard { background: var(--pd-col-tint); }

/* Header row */
.rrew-pdetails__row--head .rrew-pdetails__cell {
	padding-top: 20px;
	padding-bottom: 20px;
	font-weight: 800;
	color: var(--pd-text);
	font-size: var(--rr-fs-md);
}
.rrew-pdetails__col-head {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	letter-spacing: -.01em;
}
.rrew-pdetails__col-tag {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--pd-accent);
	background: var(--pd-accent-soft);
	padding: 3px 7px;
	border-radius: var(--rr-radius-pill);
}

/* Row label cell — icon + text */
.rrew-pdetails__row-label {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-weight: 600;
	color: var(--pd-text);
}
.rrew-pdetails__row-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: var(--rr-radius-md);
	background: var(--pd-icon-bg);
	color: var(--pd-accent);
}
.rrew-pdetails__row-icon svg { width: 17px; height: 17px; }

/* Value glyphs */
.rrew-pdetails__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--pd-accent);
}
.rrew-pdetails__tick svg { width: 22px; height: 22px; }
.rrew-pdetails__dash {
	color: var(--pd-subtle);
	font-weight: 600;
}
.rrew-pdetails__val-text {
	font-weight: 600;
	color: var(--pd-body);
}

/* Drop the last row's bottom border (the card edge already closes it). */
.rrew-pdetails__row:last-child .rrew-pdetails__cell { border-bottom: 0; }

/* ===========================================================
   4. Trust strip
   =========================================================== */
.rrew-pdetails__trust {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(.75rem, 1.4vw, 1.125rem);
}

.rrew-pdetails__trust-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: var(--pd-card-bg);
	border: 1px solid var(--pd-border);
	border-radius: var(--rr-radius-xl);
	box-shadow: var(--rr-shadow-xs);
	transition:
		transform var(--rr-dur-fast) var(--rr-ease-out),
		box-shadow var(--rr-dur-fast) var(--rr-ease-out),
		border-color var(--rr-dur-fast) var(--rr-ease-out);
}
.rrew-pdetails__trust-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--pd-card-shadow);
	border-color: color-mix(in srgb, var(--pd-accent) 26%, var(--pd-border));
}

.rrew-pdetails__trust-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: var(--rr-radius-md);
	background: var(--pd-icon-bg);
	color: var(--pd-accent);
}
.rrew-pdetails__trust-icon svg { width: 21px; height: 21px; }

.rrew-pdetails__trust-title {
	font-size: var(--rr-fs-sm);
	font-weight: 700;
	color: var(--pd-text);
	margin: 0;
	line-height: 1.3;
	letter-spacing: -.012em;
}
.rrew-pdetails__trust-text {
	font-size: var(--rr-fs-xs);
	color: var(--pd-muted);
	margin: 2px 0 0;
	line-height: 1.4;
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 1024px) {
	.rrew-pdetails__plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
	.rrew-pdetails__plan--popular { margin-top: var(--pd-badge-h); }
}

@media (max-width: 860px) {
	.rrew-pdetails__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.rrew-pdetails__inner { padding: clamp(2.5rem, 8vw, 4rem) clamp(1rem, 5vw, 1.5rem); }
	.rrew-pdetails__toggle-btn { padding: 8px 16px; }
	.rrew-pdetails__cell { padding: 13px 14px; }
}

@media (max-width: 460px) {
	.rrew-pdetails__trust { grid-template-columns: 1fr; }
	.rrew-pdetails__plan { padding: var(--rr-space-5); }
}

@media (prefers-reduced-motion: reduce) {
	.rrew-pdetails__plan:hover,
	.rrew-pdetails__plan-cta:hover,
	.rrew-pdetails__trust-card:hover { transform: none; }
}