/*!
 * Preco Quote Engine — the checkout, the request form and the catalogue filter
 * ===========================================================================
 *
 * Depends on preco-tokens.css, preco-base.css and preco-widgets.css. Read the
 * token file's header first for the specificity and naming conventions.
 *
 * One bundle for the three, because they are the same field language and a
 * site carrying one is likely to carry another. The calculator keeps its own,
 * because it brings a line grid and a modal that a checkout never needs.
 *
 * SPECIFICITY. Component rules read `.preco.preco .preco-thing` — (0,3,0).
 * A rule on a widget root reads `.preco.preco-checkout` — (0,2,0) — and wins
 * over the base root rule on source order. No `!important` in this file.
 *
 * RESPONSIVE. Verified at 320, 360, 375, 390, 414, 480, 768, 1024, 1280, 1440
 * and 1920px. The checkout is one column below 1024px with the summary after
 * the form, and two columns above it with the summary visually right while
 * staying second in the DOM.
 *
 * @package Preco\QuoteEngine
 */

/* =========================================================================
 * 1. The quote checkout
 * ========================================================================= */

.preco.preco-checkout {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-8);
	width: 100%;
	max-width: var(--preco-container-max);
	min-width: 0;
}

.preco.preco .preco-checkout__intro {
	margin-top: calc(var(--preco-space-6) * -1);
	max-width: 60ch;
	color: var(--preco-ink-muted);
}

/*
 * One column below 1024px, with the summary after the form — which is both
 * the DOM order and, at this width, the right reading order: fill the thing
 * in, then check what it covers.
 */
.preco.preco .preco-checkout__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--preco-space-9);
	align-items: start;
	min-width: 0;
}

.preco.preco .preco-checkout__form {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-7);
	min-width: 0;
}

.preco.preco .preco-checkout__summary {
	min-width: 0;
}

/*
 * Two columns from 1024px, with the summary on the right. The form stays
 * first in the DOM — source order is reading order for a keyboard or screen
 * reader — and `order` moves it visually. Specification 8.5 asks for exactly
 * this inversion.
 */
@media (min-width: 1024px) {

	.preco.preco .preco-checkout__layout {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--preco-space-11);
	}

	.preco.preco .preco-checkout__form {
		order: 1;
	}

	.preco.preco .preco-checkout__summary {
		order: 2;
		position: sticky;

		/*
		 * Clear of a theme's sticky header, and only tall enough to be
		 * useful: a summary that cannot scroll is a summary that hides its
		 * own total on a short screen.
		 */
		top: var(--preco-space-9);
		max-height: calc(100vh - var(--preco-space-14));
		overflow-y: auto;
	}
}

.preco.preco .preco-checkout__summary-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--preco-space-5);
	margin-bottom: var(--preco-space-6);
}

/* AC-35: the item count, stated where the customer is about to commit. */
.preco.preco .preco-checkout__count {
	flex: 0 0 auto;
}

.preco.preco .preco-checkout__items {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.preco.preco .preco-checkout__item {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-2);
	padding-bottom: var(--preco-space-6);
	border-bottom: 1px solid var(--preco-border);
	min-width: 0;
}

.preco.preco .preco-checkout__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.preco.preco .preco-checkout__item-name {
	font-size: var(--preco-fs-body);
	font-weight: var(--preco-fw-semibold);
	line-height: var(--preco-lh-snug);
	overflow-wrap: anywhere;
}

.preco.preco .preco-checkout__item-config {
	color: var(--preco-ink-subtle);
	font-size: var(--preco-fs-caption);
	line-height: var(--preco-lh-normal);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.preco.preco .preco-checkout__item-figures {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--preco-space-3) var(--preco-space-6);
	margin-top: var(--preco-space-2);
	font-size: var(--preco-fs-small);
}

.preco.preco .preco-checkout__item-qty,
.preco.preco .preco-checkout__item-rate {
	color: var(--preco-ink-muted);
}

.preco.preco .preco-checkout__item-total {
	margin-left: auto;
	font-weight: var(--preco-fw-semibold);
	white-space: nowrap;
}

.preco.preco .preco-checkout__totals {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-4);
	margin-top: var(--preco-space-7);
	padding-top: var(--preco-space-6);
	border-top: 1px solid var(--preco-border-strong);
}

.preco.preco .preco-checkout__totals-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--preco-space-7);
}

.preco.preco .preco-checkout__totals-label {
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
}

.preco.preco .preco-checkout__totals-value {
	font-weight: var(--preco-fw-medium);
	text-align: right;
	white-space: nowrap;
}

.preco.preco .preco-checkout__totals-row--grand {
	padding-top: var(--preco-space-4);
	border-top: 1px solid var(--preco-border);
}

.preco.preco .preco-checkout__totals-row--grand .preco-checkout__totals-label {
	color: var(--preco-ink);
	font-size: var(--preco-fs-body);
	font-weight: var(--preco-fw-semibold);
}

.preco.preco .preco-checkout__totals-row--grand .preco-checkout__totals-value {
	color: var(--preco-brand-primary);
	font-size: var(--preco-fs-h3);
	font-weight: var(--preco-fw-bold);
}

.preco.preco .preco-checkout__edit {
	display: inline-flex;
	align-items: center;
	min-height: var(--preco-tap-min);
	margin-top: var(--preco-space-5);
	font-size: var(--preco-fs-small);
}

/* The sentence that says what the quotation will cover. */
.preco.preco .preco-checkout__covers {
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
	line-height: var(--preco-lh-relaxed);
}

.preco.preco .preco-checkout__empty {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-6);
	align-items: center;
	padding: var(--preco-space-12) var(--preco-space-7);
	text-align: center;
	background-color: var(--preco-surface-sunken);
	border: 1px solid var(--preco-border);
	border-radius: var(--preco-radius-md);
}

/* =========================================================================
 * 2. The request form
 *
 * Single column at every width, per specification 8.6 — it is a short form
 * and a second column would only make the fields narrower.
 * ========================================================================= */

.preco.preco-request {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-8);
	width: 100%;
	max-width: var(--preco-container-narrow);
	min-width: 0;
}

.preco.preco .preco-request__intro {
	margin-top: calc(var(--preco-space-6) * -1);
	color: var(--preco-ink-muted);
}

.preco.preco .preco-request__form {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-7);
	min-width: 0;
}

.preco.preco .preco-request__actions {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-5);
	align-items: stretch;
}

/*
 * The two actions are genuinely alternatives, so the separator says so
 * rather than leaving them stacked as if one followed the other.
 */
.preco.preco .preco-request__or {
	align-self: center;
	color: var(--preco-ink-subtle);
	font-size: var(--preco-fs-small);
	text-transform: lowercase;
}

/* =========================================================================
 * 3. The confirmation both forms share
 * ========================================================================= */

.preco.preco .preco-form-success {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-7);
}

.preco.preco .preco-form-success__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--preco-space-5);
}

/* =========================================================================
 * 4. The catalogue filter
 * ========================================================================= */

.preco.preco-filter {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-6);
	width: 100%;
	max-width: var(--preco-container-max);
	min-width: 0;
}

/*
 * Stacked below 480px, per the phase brief, with the count below the
 * controls so it stays visible rather than being pushed off by a wrapping
 * row.
 */
.preco.preco .preco-filter__controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--preco-space-5);
	align-items: end;
}

@media (min-width: 480px) {

	.preco.preco .preco-filter__controls {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		gap: var(--preco-space-6);
	}
}

.preco.preco .preco-filter__field {
	min-width: 0;
}

.preco.preco .preco-filter__actions {
	display: flex;
	gap: var(--preco-space-4);
	align-items: center;
}

.preco.preco .preco-filter__count {
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
	font-weight: var(--preco-fw-medium);
}

.preco.preco .preco-filter__count:empty {
	display: none;
}

.preco.preco .preco-filter__empty {
	display: flex;
	flex-direction: column;
	gap: var(--preco-space-5);
	align-items: flex-start;
	padding: var(--preco-space-9) var(--preco-space-7);
	background-color: var(--preco-surface-sunken);
	border: 1px solid var(--preco-border);
	border-radius: var(--preco-radius-md);
}

.preco.preco .preco-filter__empty .preco-body {
	max-width: 56ch;
	color: var(--preco-ink-muted);
}