/* ==========================================================================
   Tiers, Volume Pricing Table (storefront)
   Themeable, accessible, Core-Web-Vitals-native styles.
   No layout shift (space is reserved), no FOUC, graceful in any WC theme.
   The deepest-discount tier is given a spotlight so the saving reads at a glance.
   ========================================================================== */

.tiers-pricing-table {
	/* Themeable tokens, override these in your theme to restyle the table. */
	--tiers-radius: 12px;
	--tiers-border: rgba(0, 0, 0, 0.1);
	--tiers-border-soft: rgba(0, 0, 0, 0.06);
	--tiers-head-bg: rgba(0, 0, 0, 0.035);
	--tiers-row-hover: rgba(0, 0, 0, 0.03);
	--tiers-muted: #5a5a5a;
	--tiers-accent: #0f766e;        /* deep teal, value you can trust, not a default blue */
	--tiers-accent-ink: #0b5852;
	--tiers-accent-bg: rgba(15, 118, 110, 0.07);
	--tiers-accent-bg-strong: rgba(15, 118, 110, 0.12);
	--tiers-pad-block: 0.62em;
	--tiers-pad-inline: 0.9em;
	--tiers-gap: clamp(0.75rem, 2vw, 1.25rem);

	margin-block: 1em 1.25em;
	font-size: 0.9em;
	container-type: inline-size;
}

.tiers-pricing-table__heading {
	margin: 0 0 0.5em;
	font-weight: 600;
	font-size: clamp(0.95rem, 0.9rem + 0.5vw, 1.1rem);
	line-height: 1.3;
}

.tiers-pricing-table table {
	width: 100%;
	border-collapse: separate;     /* lets the spotlight row carry its own rail + radius */
	border-spacing: 0;
	border: 1px solid var(--tiers-border);
	border-radius: var(--tiers-radius);
	overflow: hidden;
}

.tiers-pricing-table thead {
	background: var(--tiers-head-bg);
}

.tiers-pricing-table th,
.tiers-pricing-table td {
	padding-block: var(--tiers-pad-block);
	padding-inline: var(--tiers-pad-inline);
	text-align: start;
	border-bottom: 1px solid var(--tiers-border-soft);
	/* Reserve a stable line box so async price formatting cannot shift rows. */
	min-height: 1.5em;
	vertical-align: middle;
}

.tiers-pricing-table th {
	font-weight: 600;
	font-size: 0.82em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tiers-muted);
}

.tiers-pricing-table tbody tr:last-child td {
	border-bottom: none;
}

.tiers-pricing-table tbody tr:hover {
	background: var(--tiers-row-hover);
}

.tiers-pricing-table .tiers-discount {
	font-weight: 600;
	color: var(--tiers-accent);
}

.tiers-pricing-table .tiers-price .amount,
.tiers-pricing-table .amount {
	font-weight: 600;
	font-variant-numeric: tabular-nums;   /* prices align column-wise */
}

/* --------------------------------------------------------------------------
   The one moment that matters: the best (deepest-discount) tier.
   It lifts out of the table, accent rail on the leading edge, tinted fill,
   and the price set in the accent ink, so the saving is unmistakable.
   -------------------------------------------------------------------------- */
.tiers-pricing-table tbody tr.is-best-tier > td {
	background: var(--tiers-accent-bg);
	border-bottom-color: transparent;
}

.tiers-pricing-table tbody tr.is-best-tier > td:first-child {
	position: relative;
	box-shadow: inset 3px 0 0 0 var(--tiers-accent);   /* the price-break rail */
	border-start-start-radius: calc(var(--tiers-radius) - 4px);
	border-end-start-radius: calc(var(--tiers-radius) - 4px);
}

.tiers-pricing-table tbody tr.is-best-tier:hover > td {
	background: var(--tiers-accent-bg-strong);
}

.tiers-pricing-table tbody tr.is-best-tier .tiers-price .amount {
	color: var(--tiers-accent-ink);
	font-weight: 700;
}

/* A quiet downward mark on the best price: it has hit its floor. */
.tiers-pricing-table tbody tr.is-best-tier .tiers-price::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-inline-end: 0.4em;
	border-inline: 0.32em solid transparent;
	border-top: 0.36em solid var(--tiers-accent);
	vertical-align: middle;
}

.tiers-pricing-table .tiers-best-badge {
	display: inline-block;
	margin-inline-start: 0.45em;
	padding: 0.1em 0.55em;
	border-radius: 999px;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #fff;
	background: var(--tiers-accent);
	vertical-align: middle;
}

.tiers-pricing-table__empty {
	margin: 0;
	padding: var(--tiers-pad-block) var(--tiers-pad-inline);
	border: 1px dashed var(--tiers-border);
	border-radius: var(--tiers-radius);
	color: var(--tiers-muted);
	font-size: 0.95em;
}

/* Per-line "You save" note in the cart. */
.tiers-cart-savings {
	display: inline-block;
	margin-block-start: 0.25em;
	color: var(--tiers-accent);
	font-weight: 600;
}

/* Narrow containers: tighten padding; keep the rail + badge (they carry the value). */
@container (max-width: 22rem) {
	.tiers-pricing-table th,
	.tiers-pricing-table td {
		padding-inline: 0.62em;
	}

	.tiers-pricing-table th {
		font-size: 0.76em;
		letter-spacing: 0.02em;
	}
}

/* Dark mode, only when the visitor prefers it. */
@media (prefers-color-scheme: dark) {
	.tiers-pricing-table {
		--tiers-border: rgba(255, 255, 255, 0.16);
		--tiers-border-soft: rgba(255, 255, 255, 0.1);
		--tiers-head-bg: rgba(255, 255, 255, 0.06);
		--tiers-row-hover: rgba(255, 255, 255, 0.05);
		--tiers-muted: #a8a8a8;
		--tiers-accent: #2dd4bf;
		--tiers-accent-ink: #5eead4;
		--tiers-accent-bg: rgba(45, 212, 191, 0.1);
		--tiers-accent-bg-strong: rgba(45, 212, 191, 0.16);
	}
}

/* Tasteful transitions, motion-safe only. */
@media (prefers-reduced-motion: no-preference) {
	.tiers-pricing-table tbody tr {
		transition: background-color 0.18s ease;
	}
}