/* ==========================================================================
   Quote request page: one screen, in order. The list, the delivery area
   under the indicative total, the contact block, the bridge, the button.
   ========================================================================== */

.furniture-hero--quote {
	padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.furniture-hero--quote .product-configurator__crumbs {
	margin-bottom: var(--space-4);
}

.quote-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.quote-page__grid--sent {
	grid-template-columns: minmax(0, 40rem);
}

.quote-page__summary {
	position: sticky;
	top: 6rem;
}

.quote-summary__items {
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
	border-top: 1px solid var(--color-line);
}

.quote-summary__item {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--color-line);
}

.quote-summary__item-main {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.6rem;
}

.quote-summary__item-qty {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--color-muted);
	padding-top: 0.2rem;
}

.quote-summary__item-title {
	font-family: var(--font-heading);
	font-size: 0.98rem;
	font-weight: 500;
	color: var(--color-ink);
}

.quote-summary__item-options {
	grid-column: 2;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--color-muted);
}

/* The build in pictures takes the second column, under the words, the same
   way the options line above it does. Left to find its own place it lands in
   the quantity column and squeezes to nothing. */
.quote-summary__item-main > .build-tiles {
	grid-column: 2;
}

/* The built counter's plan drawing rides its summary item, the same
   capture the PDF and the emails print. */
.quote-summary__item-plan {
	grid-column: 2;
	width: 100%;
	max-width: 320px;
	margin-top: 8px;
	border: 1px solid var(--color-line);
	background: #fff;
}

.quote-summary__item-price {
	font-family: var(--font-heading);
	font-size: 0.95rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--color-ink);
}

.quote-summary__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem var(--space-3);
	padding-top: 1rem;
}

.quote-summary__total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.5rem;
}

/* The one caveat, a sentence under the total, quiet. */
.quote-summary__caveat {
	flex-basis: 100%;
	margin: 0.3rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--color-muted);
}

.quote-summary__total-label,
.quote-summary__total-note {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.quote-summary__total-value {
	font-family: var(--font-heading);
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--color-ink);
}


.quote-summary__edit {
	white-space: nowrap;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-deep);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.quote-summary__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	margin-top: var(--space-4);
	padding: clamp(1.4rem, 3vw, 2rem);
	background: var(--color-card);
}

.quote-summary__empty-title {
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--color-ink);
}

.quote-summary__empty-copy {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--color-muted);
}

.quote-summary__empty[hidden],
.quote-summary__foot[hidden] {
	display: none;
}

.quote-page__form .enquiry-form {
	margin-top: var(--space-4);
}

.quote-form__consent-label {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--color-text);
	cursor: pointer;
}

.quote-form__consent-label input {
	margin-top: 0.3rem;
	width: 1rem;
	height: 1rem;
	accent-color: var(--color-ink);
}

.quote-form button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.quote-form__success {
	max-width: 40rem;
}

.quote-form__success p + p {
	margin-top: var(--space-3);
}

/* The submitted lines repeated on the confirmation, pairs included. */
.quote-form__confirm-items {
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
}

.quote-form__confirm-items li + li {
	margin-top: var(--space-1);
}

@media (max-width: 900px) {
	.quote-page__grid {
		grid-template-columns: 1fr;
	}

	.quote-page__summary {
		position: static;
	}
}


/* One screen: a single centred flow replaces the two column grid. */
.quote-page__flow {
	max-width: 46rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(1.8rem, 3.5vw, 2.6rem);
}

.quote-page__flow .quote-page__summary {
	position: static;
	top: auto;
}

.quote-delivery {
	margin-top: clamp(1rem, 2vw, 1.4rem);
	padding-top: clamp(1rem, 2vw, 1.4rem);
	border-top: 1px solid var(--color-line);
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.quote-delivery__select select {
	width: 100%;
}

.quote-delivery__estimate {
	margin: 0;
	font-size: 0.92rem;
	color: var(--color-text);
}

.quote-delivery__method {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	color: var(--color-muted);
}

.quote-form__upload-reveal {
	background: none;
	border: 0;
	padding: 0;
	font-size: 0.9rem;
	color: var(--color-accent-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.quote-form__bridge {
	padding-top: 0.4rem;
	border-top: 1px solid var(--color-line);
}

.quote-summary__repriced {
	margin: 0.6rem 0 0;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	color: var(--color-accent-deep);
}

/* The submit never looks dead: the pressed button quietly pulses while
   the request is on its way, and a calm line appears if it is slow. */
[data-quote-submit].is-sending {
	opacity: 0.75;
	cursor: progress;
	animation: quote-sending 1.6s ease-in-out infinite;
}

@keyframes quote-sending {
	0%, 100% { opacity: 0.75; }
	50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
	[data-quote-submit].is-sending { animation: none; }
}

.quote-form__slow {
	margin-top: var(--space-2);
	font-size: 0.85rem;
	color: var(--color-muted);
}

/* The confirmation is the page: one thin check drawn in at the top,
   the quote number under it, restrained and certain. */
.quote-form__success-check {
	color: var(--color-ink);
	margin-bottom: var(--space-2);
}

.quote-form__success-ring {
	stroke-dasharray: 183;
	stroke-dashoffset: 183;
	animation: quote-done-draw 700ms ease-out 150ms forwards;
}

.quote-form__success-tick {
	stroke-dasharray: 34;
	stroke-dashoffset: 34;
	animation: quote-done-draw 420ms ease-out 700ms forwards;
}

@media (prefers-reduced-motion: reduce) {
	.quote-form__success-ring,
	.quote-form__success-tick {
		animation: none;
		stroke-dashoffset: 0;
	}
}

@keyframes quote-done-draw {
	to { stroke-dashoffset: 0; }
}

.quote-form__success-number {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent-deep);
	margin: var(--space-1) 0 0;
}

.quote-form__success-call {
	font-size: 0.85rem;
	color: var(--color-muted);
}

.quote-form__success-call a {
	color: inherit;
}

/* The same note on the last screen before send, where the buyer checks
   the list against what they already own. */
.quote-summary__item-note {
	grid-column: 2;
	margin-top: 0.25rem;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--color-muted);
	font-style: italic;
}

/* Order again. One job on the page, so it takes the section rhythm and
   nothing else. */
.reorder__gone {
	max-width: 46rem;
	margin-bottom: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--color-line);
}

.reorder__gone-list {
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
}

.reorder__gone-list li {
	padding: 0.45rem 0;
	font-family: var(--font-heading);
	font-size: 1rem;
	color: var(--color-ink);
	border-bottom: 1px solid var(--color-line);
}

.reorder__gone-note {
	margin-top: 1rem;
	max-width: 34rem;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--color-muted);
}

.reorder__status {
	font-size: 0.95rem;
	color: var(--color-muted);
}

.reorder__manual {
	margin-top: 1.6rem;
}

/* Two fields and a button, at the width a pair of fields wants rather
   than the full container. */
.reorder-form {
	max-width: 42rem;
}