/**
 * FFR Kit Deposit — order summary above the submit button.
 *
 * Deliberately theme-dumb: no brand colours, no font families, no hardcoded type sizes.
 * Everything inherits from the theme or derives from currentColor, so this reads correctly
 * on any of the kit order templates without the plugin knowing anything about them.
 */

.ffr-kit-deposit {
	margin: 1.5em 0;
	padding: 1em 1.25em;
	border: 1px solid;
	border-color: color-mix( in srgb, currentColor 25%, transparent );
	border-radius: 0.25rem;
	background: color-mix( in srgb, currentColor 4%, transparent );
}

/* Older browsers without color-mix() simply get the inherited background. */
@supports not ( background: color-mix( in srgb, currentColor 4%, transparent ) ) {
	.ffr-kit-deposit {
		border-color: currentColor;
		background: transparent;
	}
}

.ffr-kit-deposit__rows {
	margin: 0;
	padding: 0;
}

.ffr-kit-deposit__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	margin: 0 0 0.5em;
}

.ffr-kit-deposit__row dt,
.ffr-kit-deposit__row dd {
	margin: 0;
}

.ffr-kit-deposit__row dd {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/* Discount row stays out of the flow until there is actually a saving to report. */
.ffr-kit-deposit__row.is-hidden {
	display: none;
}

/*
 * Subtotals sit below a rule, so the column reads as arithmetic: the rows above each rule
 * are deducted to give the row below it. The vehicle total only earns a rule when there is
 * a discount above it to be subtracted.
 */
.ffr-kit-deposit__row--balance,
.ffr-kit-deposit--has-discount .ffr-kit-deposit__row--total {
	margin-top: 0.75em;
	padding-top: 0.75em;
	border-top: 1px solid;
	border-top-color: color-mix( in srgb, currentColor 25%, transparent );
}

/* The two figures that matter most: what the car costs, and what is left to pay. */
.ffr-kit-deposit__row--balance,
.ffr-kit-deposit--has-discount .ffr-kit-deposit__row--total {
	font-weight: 700;
}

/* Deductions read as secondary to the totals they act on. */
.ffr-kit-deposit__row--discount dd,
.ffr-kit-deposit__row--deposit dd {
	opacity: 0.85;
}

.ffr-kit-deposit__note {
	margin: 0.75em 0 0;
	font-size: 0.875em;
	opacity: 0.8;
}

/* Nothing configured yet — soften the summary rather than quoting a charge. */
.ffr-kit-deposit--empty .ffr-kit-deposit__note {
	visibility: hidden;
}

@media ( max-width: 30em ) {
	.ffr-kit-deposit__row {
		flex-direction: column;
		gap: 0;
	}

	.ffr-kit-deposit__row dd {
		text-align: left;
	}
}