/*
 * Summary rows. design/DESIGN-SYSTEM.md §4.16 "Summary panel (step 4)".
 *
 * Step 1 uses a single standalone row for the live per-rider price -- the figure
 * ticket 15 requires to update as the plan, the hour count and the rider count
 * change. Step 4 assembles the full panel: the five rows of design/content.json
 * -> booking.step4.summaryRows, then the three money rows ticket 23 asks for,
 * then the total.
 *
 * Those three borrow type the design already owns rather than inventing any.
 * The original price is struck at 40% white -- the pricing card's own old-price
 * treatment (DESIGN-SYSTEM.md §4.3) -- and the two reductions take the red
 * accent, so the eye reads "was this, minus this, minus this, pay that" without
 * a single new colour.
 *
 * TODO token: the 20px total label has no font-size token (tokens.css goes
 * 19px -> 22px).
 */

.sp-summary {
	padding: var(--sp-8);
	background: var(--sp-bg-deep);
	border: 1px solid var(--sp-line-strong);
	border-radius: var(--sp-radius);
}

.sp-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-5);
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var(--sp-line-faint);
}

/* ---------------------------------------- ticket 23's three money rows */

/*
 * Nothing draws these while the MVP switches are off: the checkout summary
 * prints no discount line, no voucher line and no struck-through subtotal,
 * because the server would answer zero for all three. They are kept rather
 * than deleted because switching `discounts_enabled` or `vouchers_enabled`
 * back on is meant to be one value and not a redesign — see
 * `src/Bootstrap/features.php`.
 */

/* §4.3's old price, reused: the figure the discount was taken off. */
.sp-summary__row--money[data-sp-sum-row="subtotal"] .sp-summary__v {
	color: var(--sp-text-40);
	text-decoration: line-through;
}

.sp-summary__row--money[data-sp-sum-row="discount"] .sp-summary__v,
.sp-summary__row--money[data-sp-sum-row="voucher"] .sp-summary__v {
	color: var(--sp-red);
}

/* Outside the panel (step 1): a rule above instead of below, and room to breathe. */
.sp-summary__row--standalone {
	margin-top: var(--sp-10);
	border-top: 1px solid var(--sp-line-faint);
	border-bottom: 0;
}

.sp-summary__k {
	font-size: var(--sp-fs-sm);
	color: var(--sp-text-50);
}

.sp-summary__v {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: var(--sp-fs-btn);
	text-align: right;
	color: var(--sp-text);
}

.sp-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-5);
	padding-top: var(--sp-5);
}

.sp-summary__total-k {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: 20px; /* TODO token */
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-summary__total-v {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: var(--sp-fs-3xl);
	line-height: var(--sp-lh-display);
	color: var(--sp-red);
}

.sp-summary__note {
	margin: var(--sp-1) 0 0;
	font-size: var(--sp-fs-xs);
	text-align: right;
	color: var(--sp-text-45);
}