/**
 * Earn Points tab: card layout, and the matching look of the Claim Rewards
 * and Your Vouchers tabs.
 *
 * Loaded on the rewards dashboard while Settings > Rewards Dashboard > Earn
 * Points Section > Layout is "Cards" (includes/frontend/earn-tab.php builds
 * the Earn Points markup). It loads after the other dashboard styles, and
 * every selector starts with ".spar-rewards-dashboard .spar-earn-cards",
 * "#spar-tab-claim" or "#spar-tab-vouchers" so neither those nor theme or
 * WooCommerce styles leak in. The classic list keeps the older look on all three tabs.
 */

/* Colours. The theme colours come from Settings > Rewards Dashboard >
   Theme Colors; text drawn in them is darkened so it stays readable. */

.spar-rewards-dashboard .spar-earn-cards,
.spar-rewards-dashboard #spar-tab-claim,
.spar-rewards-dashboard #spar-tab-vouchers {
	--spar-earn-text: #1f2937;
	--spar-earn-muted: #5d6573;
	--spar-earn-border: #e3e6ee;
	--spar-earn-divider: #eceef3;
	--spar-earn-control: #d5d9e3;
	--spar-earn-surface: #ffffff;
	--spar-earn-soft: #f6f7fb;
	--spar-earn-track: #eceef3;
	--spar-earn-neutral-bg: #f1f3f6;
	--spar-earn-neutral-ink: #4b5563;
	--spar-earn-progress-bg: #fff1de;
	--spar-earn-progress-ink: #8a4300;
	--spar-earn-error: #b42318;
	--spar-earn-brand: var(--spar-theme-color-1, #667eea);
	--spar-earn-brand-2: var(--spar-theme-color-2, #764ba2);
	--spar-earn-accent: var(--spar-theme-accent-color, #2ca58d);
	--spar-earn-brand-tint: rgba(102, 126, 234, 0.12);
	--spar-earn-brand-line: #aab4f3;
	--spar-earn-brand-ink: #3f46a8;
	--spar-earn-accent-tint: rgba(44, 165, 141, 0.12);
	--spar-earn-accent-ink: #1f7a68;
}

.spar-rewards-dashboard .spar-earn-cards {
	display: flex;
	flex-direction: column;
	gap: 28px;
	color: var(--spar-earn-text);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.spar-rewards-dashboard .spar-earn-cards,
	.spar-rewards-dashboard #spar-tab-claim,
	.spar-rewards-dashboard #spar-tab-vouchers {
		--spar-earn-brand-tint: color-mix(in srgb, var(--spar-earn-brand) 12%, transparent);
		--spar-earn-brand-line: color-mix(in srgb, var(--spar-earn-brand) 50%, #ffffff);
		--spar-earn-brand-ink: color-mix(in srgb, var(--spar-earn-brand) 70%, #000000);
		--spar-earn-accent-tint: color-mix(in srgb, var(--spar-earn-accent) 13%, transparent);
		--spar-earn-accent-ink: color-mix(in srgb, var(--spar-earn-accent) 70%, #000000);
	}
}

.spar-rewards-dashboard.spar-dashboard--dark .spar-earn-cards,
.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-claim,
.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers {
	--spar-earn-text: #e5e7eb;
	--spar-earn-muted: #a6acb8;
	--spar-earn-border: #2f3138;
	--spar-earn-divider: #2a2c33;
	--spar-earn-control: #3a3d46;
	--spar-earn-surface: rgb(60 60 60 / 35%);
	--spar-earn-soft: rgba(255, 255, 255, 0.05);
	--spar-earn-track: rgba(255, 255, 255, 0.12);
	--spar-earn-neutral-bg: rgba(255, 255, 255, 0.08);
	--spar-earn-neutral-ink: #c7c9cf;
	--spar-earn-progress-bg: rgba(245, 158, 11, 0.16);
	--spar-earn-progress-ink: #fbbf24;
	--spar-earn-error: #f97066;
	--spar-earn-brand-tint: rgba(102, 126, 234, 0.2);
	--spar-earn-brand-line: #5a64b8;
	--spar-earn-brand-ink: #c3cbff;
	--spar-earn-accent-tint: rgba(44, 165, 141, 0.2);
	--spar-earn-accent-ink: #7fdcc6;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.spar-rewards-dashboard.spar-dashboard--dark .spar-earn-cards,
	.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-claim,
	.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers {
		--spar-earn-brand-tint: color-mix(in srgb, var(--spar-earn-brand) 22%, transparent);
		--spar-earn-brand-line: color-mix(in srgb, var(--spar-earn-brand) 60%, #000000);
		--spar-earn-brand-ink: color-mix(in srgb, var(--spar-earn-brand) 45%, #ffffff);
		--spar-earn-accent-tint: color-mix(in srgb, var(--spar-earn-accent) 22%, transparent);
		--spar-earn-accent-ink: color-mix(in srgb, var(--spar-earn-accent) 50%, #ffffff);
	}
}

/* Intro, level boost note, groups */

.spar-rewards-dashboard .spar-earn-cards .spar-earn-cards__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-intro-text {
	flex: 1 1 260px;
	margin: 0;
	color: var(--spar-earn-muted);
}

/* Level boost note: what the level gives, and on a second line that the
   amounts below include it. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-cards__boost {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 14px 8px 12px;
	border-radius: 12px;
	background: var(--spar-earn-brand-tint);
	color: var(--spar-earn-brand-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-cards__boost-line,
.spar-rewards-dashboard .spar-earn-cards .spar-earn-cards__boost-detail {
	display: block;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-cards__boost-detail {
	font-size: 12px;
	font-weight: 500;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-group__title {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--spar-earn-text);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-group__count {
	color: var(--spar-earn-muted);
	font-size: 13px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-cards__empty {
	margin: 0;
	color: var(--spar-earn-muted);
}

/* Grid: two columns where there is room, one on narrow screens. */

.spar-rewards-dashboard .spar-earn-cards .spar-earn-cards__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(320px, calc(50% - 8px))), 1fr));
	gap: 16px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card--wide,
.spar-rewards-dashboard .spar-earn-cards .spar-earn-card-slot--wide {
	grid-column: 1 / -1;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card-slot {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Card */

/* Each card is a container, so its head can rearrange by the card's own width
   (two columns, one column, or a narrow My Account content area). Dialogs a
   card opens are printed outside it for this reason. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	margin: 0;
	padding: 18px;
	border: 1px solid var(--spar-earn-border);
	border-radius: 14px;
	background: var(--spar-earn-surface);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	color: var(--spar-earn-text);
	container: spar-earn-card / inline-size;
}

/* The customer can act on it now (spins waiting, products to review...). */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-card--ready {
	border-color: var(--spar-earn-brand-line);
	box-shadow: 0 0 0 3px var(--spar-earn-brand-tint);
}

/* Head: icon, name and description, and the value at the top right. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__head {
	display: grid;
	grid-template-areas: "icon heading value";
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 8px 14px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__icon {
	display: inline-flex;
	grid-area: icon;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--spar-earn-brand-tint);
	color: var(--spar-earn-brand);
	font-size: 18px;
	line-height: 1;
}

/* At least as tall as the icon, so a name on its own lines up with its middle. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__heading {
	display: flex;
	grid-area: heading;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	min-height: 40px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__title {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--spar-earn-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: normal;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__desc {
	margin: 2px 0 0;
	color: var(--spar-earn-muted);
	font-size: 13px;
	line-height: 1.45;
}

/* Value: the amount, with what it is on a smaller line beneath. Only the
   smaller line wraps, so a long points label or translation never pushes the
   amount out of the corner. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__value {
	display: flex;
	grid-area: value;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	justify-self: end;
	box-sizing: border-box;
	max-width: 190px;
	padding: 7px 12px;
	border-radius: 10px;
	background: var(--spar-earn-accent-tint);
	text-align: right;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__value-amount {
	color: var(--spar-earn-accent-ink);
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
	white-space: nowrap;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__value-prefix,
.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__boost {
	color: var(--spar-earn-accent-ink);
	font-size: 12px;
	font-weight: 600;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__value-unit {
	margin-top: 2px;
	color: var(--spar-earn-accent-ink);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* A value given as plain text rather than an amount. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__value--text .spar-earn-card__value-unit {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
}

/* Narrow cards: the value moves under the name and reads as one line,
   "150 Points a year". */
@container spar-earn-card (max-width: 400px) {
	.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__head {
		grid-template-areas:
			"icon heading"
			". value";
		grid-template-columns: auto minmax(0, 1fr);
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__value {
		flex-flow: row wrap;
		align-items: baseline;
		justify-content: flex-start;
		justify-self: start;
		gap: 0 6px;
		max-width: 100%;
		padding: 5px 10px;
		text-align: left;
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__value-amount {
		font-size: 17px;
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__value-unit {
		margin: 0;
		font-size: 13px;
	}
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__body {
	min-width: 0;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__meta {
	color: var(--spar-earn-muted);
	font-size: 13px;
	line-height: 1.45;
}

/* Separate facts in one meta area, each on its own line. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__meta-line {
	display: block;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__body + .spar-earn-card__meta {
	margin-top: -6px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card--split-meta .spar-earn-card__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 12px;
}

/* Buttons sit at the bottom, so those of cards side by side line up. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-top: auto;
}

/* Buttons in the head (Prize Wheel): on a wide card they sit at the right of
   the name, the button at the edge and its note (the countdown) before it. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__head > .spar-earn-card__actions--head {
	grid-area: value;
	flex-direction: row-reverse;
	align-self: center;
	justify-content: flex-start;
	margin-top: 0;
	text-align: right;
}

/* Not wide enough to share the row: under the name, from the left edge. */
@container spar-earn-card (max-width: 599px) {
	.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__head > .spar-earn-card__actions--head {
		grid-area: auto;
		grid-column: 1 / -1;
		flex-direction: row;
		margin-top: 6px;
		text-align: left;
	}
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__note,
.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__actions .spar-spin-countdown {
	margin: 0;
	color: var(--spar-earn-muted);
	font-size: 13px;
	font-style: normal;
	line-height: 1.4;
}

.spar-rewards-dashboard .spar-earn-cards .spar-countdown-time {
	font-variant-numeric: tabular-nums;
}

/* Collapsible rows ("More ways to get spins", "How it works", "Completed"):
   a chevron on the right instead of the browser's triangle. */
.spar-rewards-dashboard .spar-earn-cards summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	list-style: none;
	cursor: pointer;
}

.spar-rewards-dashboard .spar-earn-cards summary::-webkit-details-marker {
	display: none;
}

.spar-rewards-dashboard .spar-earn-cards summary::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin: 0 4px 0 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: 0.6;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.15s ease;
}

.spar-rewards-dashboard .spar-earn-cards details[open] > summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.spar-rewards-dashboard .spar-earn-cards summary:focus-visible {
	border-radius: 6px;
	outline: 2px solid var(--spar-earn-brand);
	outline-offset: 2px;
}

/* Collapsed extra detail ("More ways to get spins"). */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__details {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--spar-earn-divider);
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__details-toggle {
	padding: 12px 0 0;
	color: var(--spar-earn-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__details-body {
	padding-top: 8px;
	color: var(--spar-earn-muted);
	font-size: 13px;
	line-height: 1.5;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__list {
	margin: 0;
	padding: 0 0 0 18px;
	list-style: disc;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__list li {
	margin: 0 0 2px;
	padding: 0;
}

.spar-rewards-dashboard .spar-earn-cards a.spar-earn-buy-spins-link {
	color: var(--spar-earn-brand-ink);
}

/* Status chips */

.spar-rewards-dashboard .spar-earn-cards .spar-earn-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--spar-earn-neutral-bg);
	color: var(--spar-earn-neutral-ink);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-chip--ready {
	background: var(--spar-earn-brand-tint);
	color: var(--spar-earn-brand-ink);
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-chip--progress {
	background: var(--spar-earn-progress-bg);
	color: var(--spar-earn-progress-ink);
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-chip--done {
	background: var(--spar-earn-accent-tint);
	color: var(--spar-earn-accent-ink);
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-chip i {
	font-size: 10px;
}

/* Buttons and fields */

.spar-rewards-dashboard .spar-earn-cards .spar-earn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	min-height: 40px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transform: none;
	transition: filter 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-btn--primary {
	background: linear-gradient(135deg, var(--spar-earn-brand), var(--spar-earn-brand-2));
	color: #ffffff;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-btn--primary:hover,
.spar-rewards-dashboard .spar-earn-cards .spar-earn-btn--primary:focus {
	color: #ffffff;
	filter: brightness(1.06);
	transform: none;
	box-shadow: none;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-btn--secondary {
	border-color: var(--spar-earn-control);
	background: var(--spar-earn-surface);
	color: var(--spar-earn-text);
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-btn--secondary:hover,
.spar-rewards-dashboard .spar-earn-cards .spar-earn-btn--secondary:focus {
	border-color: var(--spar-earn-brand);
	background: var(--spar-earn-surface);
	color: var(--spar-earn-brand-ink);
	transform: none;
	box-shadow: none;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-btn:focus-visible {
	outline: 2px solid var(--spar-earn-brand);
	outline-offset: 2px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-btn:disabled,
.spar-rewards-dashboard .spar-earn-cards .spar-earn-btn.is-loading {
	opacity: 0.55;
	filter: none;
	cursor: not-allowed;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-field-label {
	display: block;
	margin: 0 0 6px;
	color: var(--spar-earn-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.spar-rewards-dashboard .spar-earn-cards input.spar-earn-input {
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--spar-earn-control);
	border-radius: 10px;
	background: var(--spar-earn-surface);
	box-shadow: none;
	color: var(--spar-earn-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
}

/* Dark date picker and caret in dark mode. */
.spar-rewards-dashboard.spar-dashboard--dark .spar-earn-cards input.spar-earn-input {
	color-scheme: dark;
}

.spar-rewards-dashboard .spar-earn-cards input.spar-earn-input:focus {
	border-color: var(--spar-earn-brand);
	outline: 2px solid var(--spar-earn-brand-tint);
	outline-offset: 0;
}

/* Card contents */

/* Points for Orders tiers. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-tiers {
	overflow: hidden;
	border: 1px solid var(--spar-earn-divider);
	border-radius: 10px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-tiers__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 8px;
	padding: 9px 10px;
	font-size: 14px;
	line-height: 1.4;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-tiers__row + .spar-earn-tiers__row {
	border-top: 1px solid var(--spar-earn-divider);
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-tiers__row strong {
	color: var(--spar-earn-accent-ink);
	white-space: nowrap;
}

/* Progress towards a bonus. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-progress {
	overflow: hidden;
	height: 8px;
	border-radius: 999px;
	background: var(--spar-earn-track);
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-progress__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--spar-earn-brand), var(--spar-earn-brand-2));
}

/* The Order Streak bar keeps its own look; it just loses its top margin. */
.spar-rewards-dashboard .spar-earn-cards .spar-streak-bar {
	margin-top: 0;
}

/* Birthday field. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-birthday {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-birthday .spar-earn-field-label {
	margin: 0;
}

.spar-rewards-dashboard .spar-earn-cards .spar-birthday-status {
	color: var(--spar-earn-muted);
	font-size: 13px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-birthday-status.is-success {
	color: var(--spar-earn-accent-ink);
}

.spar-rewards-dashboard .spar-earn-cards .spar-birthday-status.is-error {
	color: var(--spar-earn-error);
}

/* Custom way countdown. */
.spar-rewards-dashboard .spar-earn-cards .spar-cwe-countdown {
	margin: 0;
	color: var(--spar-earn-muted);
	font-size: 13px;
}

/* Refer a Friend */

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
}

/* The link and sharing take a little over half the card and the stats the
   rest; below about 580px the stats move under them. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__main {
	display: flex;
	flex: 4 1 300px;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__field,
.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__share {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__input-row {
	display: flex;
	gap: 8px;
	margin: 0;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__input-row input.spar-earn-input {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--spar-earn-soft);
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__input-row .spar-earn-btn {
	flex: none;
	min-height: 42px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__share-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 12px;
	margin: 0 0 6px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__share-head .spar-earn-field-label {
	margin: 0;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__share-bonus {
	color: var(--spar-earn-accent-ink);
	font-size: 13px;
	font-weight: 600;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__networks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--spar-earn-control);
	border-radius: 999px;
	background: var(--spar-earn-surface);
	box-shadow: none;
	color: var(--spar-earn-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transform: none;
}

.spar-rewards-dashboard .spar-earn-cards .spar-share-btn:hover,
.spar-rewards-dashboard .spar-earn-cards .spar-share-btn:focus {
	border-color: var(--spar-earn-brand);
	box-shadow: none;
	color: var(--spar-earn-text);
	text-decoration: none;
	transform: none;
}

.spar-rewards-dashboard .spar-earn-cards .spar-share-btn:focus-visible {
	outline: 2px solid var(--spar-earn-brand);
	outline-offset: 2px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-share-icon {
	display: inline-flex;
	font-size: 14px;
	line-height: 1;
}

.spar-rewards-dashboard .spar-earn-cards .spar-share-pill {
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--spar-earn-accent-tint);
	color: var(--spar-earn-accent-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
}

/* Referral stats: a card per stat with its icon in the tinted square, and the
   points earned in green, as in the floating rewards widget. The icon sits
   above the figures in narrow tiles and beside them where there is room. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__stats {
	display: grid;
	flex: 3 1 260px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
	gap: 8px;
	container: spar-earn-stats / inline-size;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
	padding: 12px;
	border: 1px solid var(--spar-earn-border);
	border-radius: 12px;
	background: var(--spar-earn-surface);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-stat__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--spar-earn-brand-tint);
	color: var(--spar-earn-brand);
	font-size: 14px;
	line-height: 1;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-stat__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-stat__value {
	color: var(--spar-earn-text);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-stat__label {
	margin-top: 1px;
	color: var(--spar-earn-muted);
	font-size: 12px;
	line-height: 1.35;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-stat--earned .spar-earn-stat__icon {
	background: var(--spar-earn-accent-tint);
	color: var(--spar-earn-accent-ink);
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-stat--earned .spar-earn-stat__value {
	color: var(--spar-earn-accent-ink);
}

@container spar-earn-stats (min-width: 300px) {
	.spar-rewards-dashboard .spar-earn-cards .spar-earn-stat {
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__more {
	flex: 1 1 100%;
	min-width: 0;
	border-top: 1px solid var(--spar-earn-divider);
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__details {
	margin: 0;
	border-bottom: 1px solid var(--spar-earn-divider);
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__details:last-child {
	border-bottom: 0;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__details > .spar-earn-card__details-toggle {
	min-height: 44px;
	padding: 12px 0;
	box-sizing: border-box;
	font-size: 14px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__steps {
	margin: 0 0 14px;
	padding: 0 0 0 20px;
	color: var(--spar-earn-muted);
	font-size: 14px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__steps li {
	margin: 0 0 4px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-referral__details .spar-referral-clicks-log {
	margin: 0 0 14px;
}

/* Link clicks: a compact table inside the card (phones keep the stacked rows
   reward-points.css gives them). */
@media (min-width: 481px) {
	.spar-rewards-dashboard .spar-earn-cards .spar-referral-clicks-log table.spar-points-log {
		margin: 0;
		overflow: hidden;
		border: 1px solid var(--spar-earn-divider);
		border-radius: 10px;
		background: var(--spar-earn-surface);
		box-shadow: none;
		font-family: inherit;
		font-size: 13px;
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-referral-clicks-log table.spar-points-log thead {
		background: var(--spar-earn-soft);
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-referral-clicks-log table.spar-points-log th {
		padding: 9px 12px;
		color: var(--spar-earn-muted);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.04em;
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-referral-clicks-log table.spar-points-log td {
		padding: 9px 12px;
		border-bottom-color: var(--spar-earn-divider);
		color: var(--spar-earn-text);
		font-size: 13px;
		font-weight: 400;
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-referral-clicks-log table.spar-points-log tbody tr,
	.spar-rewards-dashboard .spar-earn-cards .spar-referral-clicks-log table.spar-points-log tbody tr:nth-child(even),
	.spar-rewards-dashboard .spar-earn-cards .spar-referral-clicks-log table.spar-points-log tbody tr:hover {
		background: transparent;
		transform: none;
	}

	/* dashboard-dark-mode.css colours the table and stripes its rows with !important. */
	.spar-rewards-dashboard.spar-dashboard--dark .spar-earn-cards .spar-referral-clicks-log table.spar-points-log {
		background: var(--spar-earn-surface) !important;
		box-shadow: none !important;
	}

	.spar-rewards-dashboard.spar-dashboard--dark .spar-earn-cards .spar-referral-clicks-log table.spar-points-log thead {
		background: var(--spar-earn-soft) !important;
	}

	.spar-rewards-dashboard.spar-dashboard--dark .spar-earn-cards .spar-referral-clicks-log table.spar-points-log tbody tr,
	.spar-rewards-dashboard.spar-dashboard--dark .spar-earn-cards .spar-referral-clicks-log table.spar-points-log tbody tr:nth-child(even) {
		background: transparent !important;
	}
}

.spar-rewards-dashboard .spar-earn-cards .spar-referral-clicks-log .spar-pagination {
	margin: 12px 0 0;
}

.spar-rewards-dashboard .spar-earn-cards .spar-referral-clicks-log .spar-pagination-btn {
	min-width: 34px;
	min-height: 34px;
	padding: 0 10px;
	border: 1px solid var(--spar-earn-control);
	border-radius: 8px;
	background: var(--spar-earn-surface);
	color: var(--spar-earn-text);
	font-size: 13px;
	transform: none;
}

.spar-rewards-dashboard .spar-earn-cards .spar-referral-clicks-log .spar-pagination-btn.spar-pagination-current {
	border-color: var(--spar-earn-brand) !important;
	background: var(--spar-earn-brand) !important;
	color: #ffffff !important;
}

.spar-rewards-dashboard .spar-earn-cards .spar-referral-clicks-log .spar-pagination-btn[disabled] {
	opacity: 0.5;
}

/* The current page is a disabled button too, but must not look faded. */
.spar-rewards-dashboard .spar-earn-cards .spar-referral-clicks-log .spar-pagination-btn.spar-pagination-current[disabled] {
	opacity: 1;
}

/* Completed ways */

.spar-rewards-dashboard .spar-earn-cards .spar-earn-completed {
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--spar-earn-border);
	border-radius: 14px;
	background: var(--spar-earn-soft);
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-completed[open] {
	padding-bottom: 16px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-completed__toggle {
	min-height: 48px;
	padding: 12px 0;
	box-sizing: border-box;
	color: var(--spar-earn-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card--completed {
	box-shadow: none;
}

.spar-rewards-dashboard .spar-earn-cards .spar-earn-card--completed .spar-earn-card__icon {
	background: var(--spar-earn-neutral-bg);
	color: var(--spar-earn-muted);
}

/* Product Offers & Bonuses (PRO): the block built for the classic list,
   restyled as a full-width card. */

/* Its header and offers each take a full row of the wrapping flex row that
   buy-products.css sets up. */
.spar-rewards-dashboard .spar-earn-cards .spar-earn-card-slot > .spar-bp-card {
	display: flex;
	flex: 1 1 auto;
	flex-flow: row wrap;
	align-content: flex-start;
	align-items: stretch;
	gap: 12px;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--spar-earn-border);
	border-radius: 14px;
	background: var(--spar-earn-surface);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	color: var(--spar-earn-text);
}

.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-header {
	align-items: flex-start;
	gap: 12px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-earn-fa-icon {
	position: static;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--spar-earn-brand-tint);
	color: var(--spar-earn-brand);
	font-size: 18px;
	line-height: 1;
	transform: none;
}

.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-earn-fa-icon i {
	background: none;
	color: inherit;
	-webkit-text-fill-color: currentColor;
}

.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 40px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-title {
	color: var(--spar-earn-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

/* Each offer: picture at the top left, points in the card value style. */
.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-box {
	align-items: flex-start;
	padding: 14px;
	border-color: var(--spar-earn-divider);
	border-radius: 12px;
	background: var(--spar-earn-soft);
	container: spar-bp-rule / inline-size;
}

.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-box:hover {
	box-shadow: none;
}

/* A narrow offer: the points go under its name instead of beside it, so a long
   points label does not squeeze the name and requirement into a thin column. */
@container spar-bp-rule (max-width: 520px) {
	.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-box-head,
	.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-name-wrap {
		display: contents;
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-name {
		order: 0;
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-points-wrap {
		order: 1;
		align-items: flex-start;
		margin-top: 2px;
		text-align: left;
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-points {
		white-space: normal;
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-desc,
	.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-products,
	.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-req {
		order: 2;
		margin-top: 4px;
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-footer {
		order: 3;
		flex-wrap: wrap;
		gap: 8px 14px;
	}
}

/* Each offer's points in the same green box as the card values. */
.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-points {
	display: inline-block;
	justify-self: start; /* On phones buy-products.css makes it a grid item, which would stretch. */
	padding: 3px 10px;
	border-radius: 8px;
	background: var(--spar-earn-accent-tint);
	color: var(--spar-earn-accent-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	white-space: nowrap;
}

.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-name {
	color: var(--spar-earn-text);
	font-size: 15px;
	font-weight: 600;
}

.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-req,
.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rule-desc {
	color: var(--spar-earn-muted);
	font-size: 13px;
}

.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-card-desc {
	margin-top: 2px;
	color: var(--spar-earn-muted);
	font-size: 13px;
}

/* Offers side by side where there is room, like the cards. */
.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-rules-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(320px, calc(50% - 6px))), 1fr));
	gap: 12px;
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-btn.button {
	min-height: 38px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--spar-earn-control);
	border-radius: 999px;
	background: var(--spar-earn-surface);
	box-shadow: none;
	color: var(--spar-earn-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 36px;
	text-transform: none;
}

.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-btn.button:hover,
.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-bp-btn.button:focus {
	border-color: var(--spar-earn-brand);
	background: var(--spar-earn-surface);
	color: var(--spar-earn-brand-ink);
}

/* One multiplier for everything: the note at the top says so, so the
   "(x1.5)" after each amount in the block is not needed. */
.spar-rewards-dashboard .spar-earn-cards:not(.spar-earn-cards--mixed-boost) .spar-points-multiplier {
	display: none;
}

/* Narrow screens */

@media (max-width: 480px) {
	.spar-rewards-dashboard .spar-earn-cards {
		gap: 22px;
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-earn-cards__grid {
		gap: 12px;
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-earn-card,
	.spar-rewards-dashboard .spar-earn-cards .spar-earn-card-slot > .spar-bp-card {
		padding: 14px;
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-earn-card__icon,
	.spar-rewards-dashboard .spar-earn-cards .spar-bp-card .spar-earn-fa-icon {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	.spar-rewards-dashboard .spar-earn-cards .spar-earn-completed {
		padding: 0 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spar-rewards-dashboard .spar-earn-cards .spar-earn-btn {
		transition: none;
	}
}

/* Claim Rewards tab: the same look as the cards above. Its markup
   (templates/ways-to-redeem.php and functions-myaccount.php) carries a
   few inline styles, which the !important rules below override. */

/* Section headings keep the dashboard's own heading style (account-rewards.css),
   the same as the Levels and History tabs; only the gap above the later
   sections of the Claim tab is evened out. */
.spar-rewards-dashboard #spar-tab-claim .spar-redeem-title ~ .spar-redeem-title {
	margin-top: 40px;
}

.spar-rewards-dashboard #spar-tab-claim .spar-redeem-intro,
.spar-rewards-dashboard #spar-tab-vouchers .spar-redeem-intro {
	margin: 0 0 16px;
	color: var(--spar-earn-muted);
	font-size: 14px;
}

.spar-rewards-dashboard #spar-tab-claim .spar-redeem-rate,
.spar-rewards-dashboard #spar-tab-claim .spar-redeem-worth {
	margin: 0 0 8px;
	color: var(--spar-earn-text);
	font-size: 14px;
}

/* Reward cards: up to three a row. */
.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(220px, calc(33.333% - 11px))), 1fr));
	gap: 16px;
	margin: 0;
}

.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid .spar-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	padding: 20px 18px 18px;
	border: 1px solid var(--spar-earn-border);
	border-radius: 14px;
	background: var(--spar-earn-surface);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	color: var(--spar-earn-text);
	text-align: center;
}

/* The icon or picture at the top: icons sit in the tinted square the Earn
   cards use; product pictures keep their own look. */
.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid .spar-box > div[style]:first-child {
	height: auto !important;
	margin: 0 0 14px !important;
}

.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid .spar-box > div[style]:first-child:has(> .spar-reward-icon) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px !important;
	border-radius: 12px;
	background: var(--spar-earn-brand-tint);
	color: var(--spar-earn-brand);
	font-size: 22px !important;
	line-height: 1;
}

.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid .spar-reward-icon.spar-badge-icon--gradient {
	background: none;
	color: var(--spar-earn-brand);
	-webkit-text-fill-color: currentColor;
}

.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid .spar-box h4 {
	margin: 0 0 8px;
	color: var(--spar-earn-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

/* Points cost in the green box the Earn cards use for their values. */
.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid .spar-redeem-cost {
	display: inline-block;
	margin: 0 0 8px;
	padding: 4px 12px;
	border-radius: 8px;
	background: var(--spar-earn-accent-tint);
	color: var(--spar-earn-accent-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid .spar-box p {
	margin: 0 0 4px;
	color: var(--spar-earn-muted);
	font-size: 13px;
	line-height: 1.45;
}

.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid .spar-box p a {
	color: inherit;
}

/* "You have ... You can redeem this reward now." */
.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid .spar-box > p[style]:not(.spar-redemption-button) {
	display: block !important;
	margin: 8px 0 0 !important;
	color: var(--spar-earn-muted) !important;
	font-size: 12px !important;
}

.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid .spar-progress-bar {
	align-self: stretch;
	height: 8px;
	margin: 12px 0 0;
	border-radius: 999px;
	background: var(--spar-earn-track);
}

.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid .spar-progress-bar span {
	border-radius: inherit;
	background: linear-gradient(90deg, var(--spar-earn-brand), var(--spar-earn-brand-2));
}

/* The button sits at the bottom, so those of cards side by side line up. */
.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid p.spar-redemption-button {
	margin: auto 0 0;
	padding-top: 16px;
}

.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid .spar-redemption-button .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--spar-earn-brand), var(--spar-earn-brand-2));
	box-shadow: none;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	transform: none;
}

.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid .spar-redemption-button .button:hover,
.spar-rewards-dashboard #spar-tab-claim .spar-redeem-grid .spar-redemption-button .button:focus {
	background: linear-gradient(135deg, var(--spar-earn-brand), var(--spar-earn-brand-2));
	color: #ffffff;
	filter: brightness(1.06);
	transform: none;
}

/* "Claim Spins" and "Add Discount to Cart": account-rewards.css styles these
   with !important, so the same pill look needs it here. */
.spar-rewards-dashboard #spar-tab-claim button.spar-buy-spins-btn,
.spar-rewards-dashboard #spar-tab-claim .spar-redeem-compact--account .spar-redeem-apply-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 20px !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, var(--spar-earn-brand), var(--spar-earn-brand-2)) !important;
	font-family: inherit;
	line-height: 1.2 !important;
}

.spar-rewards-dashboard #spar-tab-claim button.spar-buy-spins-btn:hover:not(:disabled),
.spar-rewards-dashboard #spar-tab-claim .spar-redeem-compact--account .spar-redeem-apply-btn:hover:not(:disabled) {
	filter: brightness(1.06);
}

.spar-rewards-dashboard #spar-tab-claim button.spar-buy-spins-btn:disabled,
.spar-rewards-dashboard #spar-tab-claim .spar-redeem-compact--account .spar-redeem-apply-btn:disabled {
	opacity: 0.55 !important;
	filter: none;
}

/* Prize wheel spins: a soft panel with the field and button in one row. */
.spar-rewards-dashboard #spar-tab-claim .spar-buy-spins-section {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--spar-earn-divider);
	border-radius: 14px;
	background: var(--spar-earn-soft);
}

.spar-rewards-dashboard #spar-tab-claim .spar-buy-spins-controls {
	gap: 10px 12px;
}

.spar-rewards-dashboard #spar-tab-claim .spar-buy-spins-label {
	color: var(--spar-earn-text);
	font-size: 13px;
	font-weight: 600;
}

.spar-rewards-dashboard #spar-tab-claim input.spar-buy-spins-qty {
	box-sizing: border-box;
	min-height: 40px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--spar-earn-control);
	border-radius: 10px;
	background: var(--spar-earn-surface);
	box-shadow: none;
	color: var(--spar-earn-text);
	font-family: inherit;
	font-size: 14px;
}

.spar-rewards-dashboard #spar-tab-claim .spar-buy-spins-total {
	color: var(--spar-earn-muted);
	font-size: 13px;
}

/* Points discount (with items in the cart): the panel matches the spins one. */
.spar-rewards-dashboard #spar-tab-claim .spar-redeem-compact--account {
	padding: 14px 16px;
	border-color: var(--spar-earn-divider);
	border-radius: 14px;
	background: var(--spar-earn-soft);
}

.spar-rewards-dashboard #spar-tab-claim .spar-redeem-compact--account .spar-redeem-slider {
	accent-color: var(--spar-earn-brand);
}

.spar-rewards-dashboard #spar-tab-claim .spar-redeem-compact--account .spar-redeem-input {
	border-color: var(--spar-earn-control);
	border-radius: 10px;
}

/* Points discount: "Add items to your cart..." as a soft note. */
.spar-rewards-dashboard #spar-tab-claim .spar-cart-empty-state-dash {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--spar-earn-divider);
	border-radius: 12px;
	background: var(--spar-earn-soft);
	text-align: left;
}

.spar-rewards-dashboard #spar-tab-claim .spar-cart-empty-state-dash .spar-cart-empty-icon-dash {
	margin: 0;
	font-size: 18px;
	line-height: 1;
}

.spar-rewards-dashboard #spar-tab-claim .spar-cart-empty-state-dash .spar-cart-empty-title-dash {
	margin: 0;
	color: var(--spar-earn-text);
	font-size: 14px;
	font-weight: 500;
}

.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-claim input.spar-buy-spins-qty {
	color-scheme: dark;
}

/* Your Vouchers tab (templates/redeemed-vouchers.php): the voucher
   table as a card. Code on the left, value, and the status with its
   button together on the right; each voucher a small card on phones. */

.spar-rewards-dashboard #spar-tab-vouchers .spar-redeem-intro {
	margin-bottom: 6px;
}

/* The code: a dashed "coupon" in a fixed-width font, easy to read and copy. */
.spar-rewards-dashboard #spar-tab-vouchers .spar-copy-voucher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 6px 10px;
	border: 1px dashed var(--spar-earn-brand-line);
	border-radius: 8px;
	background: var(--spar-earn-brand-tint);
	color: var(--spar-earn-brand-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

.spar-rewards-dashboard #spar-tab-vouchers .spar-copy-voucher:hover {
	border-color: var(--spar-earn-brand);
	background: var(--spar-earn-brand-tint);
	color: var(--spar-earn-brand-ink);
}

.spar-rewards-dashboard #spar-tab-vouchers .spar-copy-voucher:focus-visible {
	outline: 2px solid var(--spar-earn-brand);
	outline-offset: 2px;
}

.spar-rewards-dashboard #spar-tab-vouchers .spar-copy-voucher-icon {
	color: currentColor;
	opacity: 0.7;
}

.spar-rewards-dashboard #spar-tab-vouchers .spar-copy-voucher:hover .spar-copy-voucher-icon {
	color: currentColor;
	opacity: 1;
}

.spar-rewards-dashboard #spar-tab-vouchers .spar-copy-voucher.spar-copied {
	border-style: solid;
	border-color: transparent;
	background: var(--spar-earn-accent-tint);
	color: var(--spar-earn-accent-ink);
}

/* Value: bold, in the green used for amounts elsewhere. */
.spar-rewards-dashboard #spar-tab-vouchers .spar-points-log td.spar-voucher-amount-col {
	color: var(--spar-earn-accent-ink);
	font-weight: 700;
}

/* Status: a dot before the text, green while the voucher can be used. */
.spar-rewards-dashboard #spar-tab-vouchers .spar-points-log tbody td:last-child {
	color: var(--spar-earn-text);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

.spar-rewards-dashboard #spar-tab-vouchers .spar-points-log tbody td:last-child::before {
	content: "";
	position: static;
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 8px 0 0;
	padding: 0;
	border-radius: 50%;
	background: var(--spar-earn-accent);
	vertical-align: 1px;
}

/* "Apply to Cart": a soft button that fills on hover. */
.spar-rewards-dashboard #spar-tab-vouchers .spar-apply-to-cart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 34px;
	margin: 0 0 0 14px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: var(--spar-earn-brand-tint);
	box-shadow: none;
	color: var(--spar-earn-brand-ink);
	float: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	vertical-align: middle;
	transition: background 0.15s ease, color 0.15s ease;
}

.spar-rewards-dashboard #spar-tab-vouchers .spar-apply-to-cart-btn:hover:not([disabled]),
.spar-rewards-dashboard #spar-tab-vouchers .spar-apply-to-cart-btn:focus-visible {
	background: linear-gradient(135deg, var(--spar-earn-brand), var(--spar-earn-brand-2));
	color: #ffffff;
}

.spar-rewards-dashboard #spar-tab-vouchers .spar-apply-to-cart-btn:focus-visible {
	outline: 2px solid var(--spar-earn-brand);
	outline-offset: 2px;
}

.spar-rewards-dashboard #spar-tab-vouchers .spar-apply-to-cart-btn[disabled] {
	opacity: 0.6;
}

.spar-rewards-dashboard #spar-tab-vouchers .spar-apply-to-cart-btn.spar-apply-success {
	background: var(--spar-earn-accent-tint);
	color: var(--spar-earn-accent-ink);
}

/* Vouchers already used (they have no Apply button): muted, with a grey dot. */
.spar-rewards-dashboard #spar-tab-vouchers .spar-points-log tbody tr:not(:has(.spar-apply-to-cart-btn)) td {
	color: var(--spar-earn-muted);
}

.spar-rewards-dashboard #spar-tab-vouchers .spar-points-log tbody tr:not(:has(.spar-apply-to-cart-btn)) td:last-child::before {
	background: var(--spar-earn-control);
}

.spar-rewards-dashboard #spar-tab-vouchers .spar-points-log tbody tr:not(:has(.spar-apply-to-cart-btn)) .spar-copy-voucher {
	border-style: solid;
	border-color: var(--spar-earn-divider);
	background: transparent;
	color: var(--spar-earn-muted);
}

/* Wide screens: the table as a card. */
@media (min-width: 769px) {
	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log {
		margin: 16px 0 0;
		overflow: hidden;
		border: 1px solid var(--spar-earn-border);
		border-radius: 14px;
		background: var(--spar-earn-surface);
		box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
		font-family: inherit;
		font-size: 14px;
	}

	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log thead {
		background: var(--spar-earn-soft);
	}

	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log th {
		padding: 11px 20px;
		border-bottom: 1px solid var(--spar-earn-divider);
		color: var(--spar-earn-muted);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.05em;
	}

	/* The column dividers reward-points.css draws in the header (visible in dark mode). */
	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log th::after,
	.spar-rewards-dashboard .spar-earn-cards .spar-referral-clicks-log table.spar-points-log th::after {
		display: none;
	}

	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log td {
		padding: 14px 20px;
		border-bottom-color: var(--spar-earn-divider);
		font-size: 14px;
		vertical-align: middle;
	}

	/* The code and status shrink to fit, so the value sits beside the code
	   and the status lines up on the right. */
	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log th:first-child,
	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log td:first-child {
		width: 1%;
		white-space: nowrap;
	}

	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log .spar-voucher-amount-col {
		width: auto;
		max-width: none;
		vertical-align: middle;
	}

	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log th:last-child,
	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log td:last-child {
		width: 1%;
		text-align: right;
	}

	/* A line as tall as the button, with the button filling it, so the status
	   text, dot and button share one centre line. */
	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log td:last-child {
		line-height: 34px;
	}

	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log td:last-child::before {
		vertical-align: middle;
	}

	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log td:last-child .spar-apply-to-cart-btn {
		vertical-align: top;
	}

	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log tbody tr,
	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log tbody tr:nth-child(even) {
		background: transparent;
	}

	.spar-rewards-dashboard #spar-tab-vouchers table.spar-points-log tbody tr:hover {
		background: var(--spar-earn-soft);
		transform: none;
	}
}

/* Phones and tablets: each voucher a small card, the code and value on top,
   the status and button beneath (account-rewards.css and reward-points.css
   stack the rows, some with !important). */
@media (max-width: 768px) {
	.spar-rewards-dashboard #spar-tab-vouchers .spar-points-log {
		margin-top: 14px;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.spar-rewards-dashboard #spar-tab-vouchers .spar-points-log tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 0 12px;
		margin-bottom: 10px;
		padding: 14px 16px;
		border: 1px solid var(--spar-earn-border) !important;
		border-radius: 14px;
		background: var(--spar-earn-surface);
		box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	}

	.spar-rewards-dashboard #spar-tab-vouchers .spar-points-log tbody td {
		min-width: 0;
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
	}

	.spar-rewards-dashboard #spar-tab-vouchers .spar-points-log .spar-voucher-amount-col {
		width: auto;
		max-width: none;
		font-size: 16px;
		text-align: right !important;
	}

	.spar-rewards-dashboard #spar-tab-vouchers .spar-points-log tbody td:last-child {
		display: flex !important;
		grid-column: 1 / -1;
		align-items: center;
		min-height: 34px;
		margin-top: 12px;
		padding-top: 12px !important;
		border-top: 1px solid var(--spar-earn-divider) !important;
	}

	.spar-rewards-dashboard #spar-tab-vouchers .spar-copy-voucher {
		max-width: 100%;
	}

	.spar-rewards-dashboard #spar-tab-vouchers .spar-apply-to-cart-btn {
		margin: 0 0 0 auto;
	}
}

/* Dark mode: dashboard-dark-mode.css restyles every points table and voucher
   code with !important (striped rows, grey cells and codes), so the voucher
   table restates its own colours there. */
.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers .spar-points-log th {
	color: var(--spar-earn-muted) !important;
	border-color: var(--spar-earn-divider) !important;
}

.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers .spar-points-log td {
	color: var(--spar-earn-text) !important;
}

.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers .spar-points-log td.spar-voucher-amount-col {
	color: var(--spar-earn-accent-ink) !important;
}

.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers .spar-points-log tbody tr:not(:has(.spar-apply-to-cart-btn)) td {
	color: var(--spar-earn-muted) !important;
}

.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers .spar-copy-voucher {
	border-color: var(--spar-earn-brand-line) !important;
	background: var(--spar-earn-brand-tint) !important;
	color: var(--spar-earn-brand-ink) !important;
}

.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers .spar-copy-voucher:hover {
	border-color: var(--spar-earn-brand) !important;
	background: var(--spar-earn-brand-tint) !important;
	color: var(--spar-earn-brand-ink) !important;
}

.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers .spar-copy-voucher .spar-copy-voucher-icon {
	color: currentColor !important;
}

.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers .spar-copy-voucher.spar-copied {
	border-color: transparent !important;
	background: var(--spar-earn-accent-tint) !important;
	color: var(--spar-earn-accent-ink) !important;
}

.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers .spar-points-log tbody tr:not(:has(.spar-apply-to-cart-btn)) .spar-copy-voucher {
	border-color: var(--spar-earn-control) !important;
	background: transparent !important;
	color: var(--spar-earn-muted) !important;
}

@media (min-width: 769px) {
	.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers table.spar-points-log {
		background: var(--spar-earn-surface) !important;
		box-shadow: none !important;
	}

	.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers table.spar-points-log thead {
		background: var(--spar-earn-soft) !important;
	}

	.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers table.spar-points-log tbody tr,
	.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers table.spar-points-log tbody tr:nth-child(even) {
		background: transparent !important;
	}

	.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers table.spar-points-log tbody tr:hover {
		background: var(--spar-earn-soft) !important;
	}
}

@media (max-width: 768px) {
	.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers .spar-points-log {
		background: transparent !important;
		box-shadow: none !important;
	}

	.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers .spar-points-log tbody tr,
	.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers .spar-points-log tbody tr:nth-child(even),
	.spar-rewards-dashboard.spar-dashboard--dark #spar-tab-vouchers .spar-points-log tbody tr:hover {
		border-color: var(--spar-earn-border) !important;
		background: var(--spar-earn-surface) !important;
	}
}