/*
 * The quote desk (T059; DES-009, DES-008, DES-010, DES-011; creative brief
 * §7 and §13, copy deck §9). This is the no-JavaScript baseline: every
 * rule here applies whether or not `src/quote-form` ever runs, so the plain
 * server-rendered form (T041, FR-052) is a designed page on its own and the
 * stepper in `enhance.css` is genuinely an enhancement.
 *
 * Registered through block.json's `style` key, so WordPress enqueues it
 * only on pages that render the block.
 *
 * Tokens: every colour, font and motion value is read from the theme's
 * `theme.json` presets with the Ledger palette's own hex as the fallback
 * (creative brief §4.1 and §13 C-03), so the block looks right both before
 * and after the theme ships those presets, and never hard-codes a colour
 * the theme cannot re-theme.
 *
 * Logical properties only (constitution VII, ADR-002): nothing here uses
 * left/right, and RTL mirrors by composition, never by `scaleX`.
 */

.qlp-quote-desk {
	--qlp-petrol-950: var( --wp--preset--color--petrol-950, #071c1b );
	--qlp-petrol-900: var( --wp--preset--color--petrol-900, #0a2726 );
	--qlp-petrol-800: var( --wp--preset--color--petrol-800, #103b3a );
	--qlp-petrol-700: var( --wp--preset--color--petrol-700, #17504e );
	--qlp-petrol-650: var( --wp--preset--color--petrol-650, #247874 );
	--qlp-petrol-100: var( --wp--preset--color--petrol-100, #e7eeed );
	--qlp-paper-50: var( --wp--preset--color--paper-50, #fbf9f5 );
	--qlp-ivory: var( --wp--preset--color--ivory, #f7f4ee );
	--qlp-paper-200: var( --wp--preset--color--paper-200, #efe9dc );
	--qlp-paper-300: var( --wp--preset--color--paper-300, #e4dccb );
	--qlp-ink: var( --wp--preset--color--ink, #16211f );
	--qlp-ink-700: var( --wp--preset--color--ink-700, #2c3a37 );
	--qlp-muted: var( --wp--preset--color--muted, #57635f );
	--qlp-muted-400: var( --wp--preset--color--muted-400, #7c8985 );
	--qlp-gold: var( --wp--preset--color--gold, #b28a53 );
	--qlp-gold-line: var( --wp--preset--color--gold-line, #a57e4a );
	--qlp-gold-700: var( --wp--preset--color--gold-700, #81633a );
	--qlp-gold-300: var( --wp--preset--color--gold-300, #d9b57f );
	--qlp-gold-tint: var( --wp--preset--color--gold-tint, #f1e7d5 );
	--qlp-error: var( --wp--preset--color--error, #8a1f2b );
	--qlp-error-tint: var( --wp--preset--color--error-tint, #f6e3e5 );
	--qlp-warning-tint: var( --wp--preset--color--warning-tint, #f3e3c2 );
	--qlp-on-dark: #f7f4ee;
	--qlp-on-dark-muted: #c9d2d0;

	--qlp-ui: var(
		--wp--preset--font-family--cairo,
		Cairo,
		"Segoe UI",
		Tahoma,
		Arial,
		sans-serif
	);
	--qlp-display: var(
		--wp--preset--font-family--source-serif-4,
		"Source Serif 4",
		ui-serif,
		Georgia,
		serif
	);
	--qlp-body: var(
		--wp--preset--font-family--source-sans-3,
		"Source Sans 3",
		system-ui,
		sans-serif
	);

	--qlp-focus: var( --qlp-petrol-800 );
	--qlp-radius: 2px;
	--qlp-sheet-pad: clamp( 20px, 1rem + 2vw, 44px );
	--qlp-rail-pad: clamp( 16px, 1.4vw, 24px );

	box-sizing: border-box;
	display: grid;
	gap: clamp( 28px, 1.5rem + 2.4vw, 56px );
	margin-block: clamp( 28px, 1.5rem + 2vw, 56px ) clamp( 40px, 2rem + 3vw, 88px );
	margin-inline: auto;
	/* The theme's page measure when the design system is present
	   (T057 `--qlp-content`), so the desk rules to the same two lines
	   as the page header, the site header and the footer; the literal
	   fallback keeps the block self-sufficient in any other theme. */
	max-inline-size: var( --qlp-content, 1180px );
}

.qlp-quote-desk *,
.qlp-quote-desk *::before,
.qlp-quote-desk *::after {
	box-sizing: border-box;
}

/*
 * The single-column states -- the confirmation and the unavailable notice
 * -- keep the narrower measure, but they start on the page's own line
 * rather than centring inside it. Centred, the sheet floated 210px in from
 * the column at 1280 with nothing to its left, while the breadcrumbs, the
 * H1, the lead, its gold rule and the footer all ruled to the same edge:
 * the one composition on the page that ignored the page's ruling, on the
 * two states a client is most likely to see.
 *
 * The desk itself keeps the page measure and stays centred with every
 * other desk, so its start edge *is* the page's line; the narrower measure
 * moves onto the sheet inside it, aligned to that start.
 */
.qlp-quote-desk--single {
	justify-items: start;
}

.qlp-quote-desk--single > .qlp-quote-sheet {
	inline-size: 100%;
	max-inline-size: 760px;
}

@media ( min-width: 1024px ) {

	.qlp-quote-desk {
		grid-template-columns: minmax( 0, 7fr ) minmax( 0, 5fr );
		align-items: start;
	}

	.qlp-quote-desk--single {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ---------------------------------------------------------------- sheet */

.qlp-quote-sheet {
	background-color: var( --qlp-paper-50 );
	border: 1px solid var( --qlp-paper-300 );
	border-radius: var( --qlp-radius );
	/*
	 * Two layers, warm, and with no hard leading row.
	 *
	 * One layer at `0 24px 48px -32px` put its densest row a single pixel
	 * under the sheet's bottom border and 156px narrower than it, so the
	 * pair read as a border plus a stray shorter grey rule rather than as
	 * a lift. The tint was petrol, which is cool against warm paper and
	 * made that row read grey. These two ramp instead: a close, very light
	 * contact shadow and a wide soft one, both on a warm umber derived
	 * from the paper family rather than from the petrol column.
	 */
	box-shadow:
		0 1px 2px -1px rgb( 74 60 40 / 8% ),
		0 18px 40px -24px rgb( 74 60 40 / 26% );
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	min-inline-size: 0;
	overflow: hidden;
	position: relative;
}

/*
 * The sheet carries no register line of its own.
 *
 * It used to: a gold hairline across its top edge. Inside the sheet's
 * padding box that line sits immediately under the sheet's own 1px paper
 * border, and the pair reads as one doubled, slightly dirty rule -- the
 * opposite of the precision a register mark exists to signal. Shortening
 * it to a segment only shortens the doubling. There is no inset that
 * avoids it, because any hairline at the edge is adjacent to the border.
 *
 * So the page keeps exactly one register line, the one closing the page
 * header above the desk, which is what brief §3 asks for: *the* gold
 * hairline ruling a composition, not one per box. The sheet is ruled by
 * its paper border and lifted by its shadow; the gold on this page is the
 * header's line, the verification marks and the required markers.
 */

.qlp-quote-sheet__body {
	min-inline-size: 0;
	padding: var( --qlp-sheet-pad );
}

/* Empty without JavaScript, and then it must not occupy a grid track. */
.qlp-quote-sheet__rail:empty {
	display: none;
}

/* ------------------------------------------------------- reassurance drawer */

.qlp-quote-aside {
	min-inline-size: 0;
}

@media ( min-width: 1024px ) {

	.qlp-quote-aside {
		position: sticky;
		inset-block-start: clamp( 16px, 2vw, 32px );
	}
}

.qlp-drawer {
	--qlp-focus: var( --qlp-gold-300 );

	background-color: var( --qlp-petrol-950 );
	border: 1px solid rgb( 36 120 116 / 45% );
	border-radius: var( --qlp-radius );
	color: var( --qlp-on-dark );
	overflow: hidden;
	position: relative;
}

.qlp-drawer__louvre {
	block-size: 100%;
	inline-size: 100%;
	inset: 0;
	pointer-events: none;
	position: absolute;
	transform: skewY( -2.2deg ) scale( 1.14 );
	transform-origin: center;
}

.qlp-drawer__in {
	display: flex;
	flex-direction: column;
	gap: clamp( 16px, 1.4vw, 24px );
	padding: clamp( 22px, 1rem + 1.8vw, 36px );
	position: relative;
	z-index: 1;
}

.qlp-drawer .qlp-drawer__heading {
	align-items: flex-start;
	color: var( --qlp-on-dark );
	display: flex;
	font-family: var( --qlp-ui );
	font-size: 1.1875rem;
	font-weight: 700;
	gap: 0.6em;
	line-height: 1.4;
	margin: 0;
}

.qlp-drawer__mark {
	block-size: 20px;
	color: var( --qlp-gold-300 );
	flex: none;
	inline-size: 20px;
	margin-block-start: 0.12em;
}

.qlp-drawer__rows {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.qlp-drawer__rows li {
	align-items: flex-start;
	border-block-start: 1px solid rgb( 36 120 116 / 38% );
	color: var( --qlp-on-dark-muted );
	display: flex;
	font-family: var( --qlp-body );
	font-size: 0.9375rem;
	gap: 0.85em;
	line-height: 1.6;
	padding-block: 13px;
}

.qlp-drawer__rows .qlp-tick {
	block-size: 8px;
	color: var( --qlp-gold-300 );
	flex: none;
	inline-size: 14px;
	margin-block-start: 0.62em;
}

.qlp-drawer__retention {
	background-color: transparent;
	border-block-start: 1px solid rgb( 36 120 116 / 38% );
	color: var( --qlp-on-dark-muted );
	font-family: var( --qlp-body );
	font-size: 0.875rem;
	line-height: 1.7;
	margin: 0;
	padding-block-start: 16px;
}

.qlp-drawer__stations-label {
	color: var( --qlp-gold-300 );
	font-family: var( --qlp-ui );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

:lang( ar ) .qlp-drawer__stations-label {
	letter-spacing: normal;
	text-transform: none;
}

.qlp-drawer__stations {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.qlp-drawer__stations li {
	align-items: baseline;
	border-block-start: 1px solid rgb( 36 120 116 / 30% );
	display: grid;
	gap: 0 1.1em;
	grid-template-columns: auto minmax( 0, 1fr );
	padding-block: 10px;
}

.qlp-drawer__stations li:first-child {
	border-block-start: 0;
}

.qlp-drawer__station-index {
	color: var( --qlp-gold-300 );
	font-family: var( --qlp-body );
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.qlp-drawer__station-name {
	color: var( --qlp-on-dark );
	font-family: var( --qlp-ui );
	font-size: 0.9375rem;
	font-weight: 600;
}

/* ------------------------------------------------------------ fieldsets */

.qlp-quote-form {
	margin: 0;
}

.qlp-quote-form__fieldset {
	border: 0;
	border-block-start: 1px solid var( --qlp-paper-300 );
	margin: 0;
	padding: 0;
	padding-block: clamp( 22px, 1rem + 1vw, 34px ) 0;
}

.qlp-quote-form__fieldset:first-of-type {
	border-block-start: 0;
	padding-block-start: 0;
}

.qlp-quote-form__legend {
	align-items: baseline;
	display: flex;
	gap: 0.9em;
	margin-block-end: clamp( 14px, 1.4vw, 22px );
	padding: 0;
}

/*
 * The step numeral is `muted` for the same reason as `.qlp-required`
 * (VR-F020): at 12px, `gold-700` clears 4.5:1 only on the palest ground
 * and with nothing else acting on it -- and something is, because the step
 * transition fades its fieldset, so during those 320ms the numeral is
 * gold-700 composited on paper-50 at partial alpha and axe measures it at
 * 4.17:1. `muted` is solid, holds 6.0:1 at rest and stays over the line
 * through the whole fade, and gold keeps to line and mark.
 */
.qlp-quote-form__legend-index {
	color: var( --qlp-muted );
	font-family: var( --qlp-body );
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.qlp-quote-form__legend-text {
	color: var( --qlp-petrol-800 );
	font-family: var( --qlp-ui );
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
}

.qlp-quote-form__fields {
	display: flex;
	flex-direction: column;
	gap: clamp( 16px, 1.4vw, 22px );
}

/* ---------------------------------------------------------------- fields */

.qlp-field {
	margin: 0;
	min-inline-size: 0;
}

.qlp-field label {
	color: var( --qlp-ink-700 );
	display: block;
	font-family: var( --qlp-ui );
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	margin-block-end: 7px;
}

.qlp-field input[type="text"],
.qlp-field input[type="email"],
.qlp-field input[type="tel"],
.qlp-field select,
.qlp-field textarea {
	background-color: var( --qlp-ivory );
	border: 1px solid var( --qlp-muted-400 );
	border-radius: var( --qlp-radius );
	color: var( --qlp-ink );
	font-family: var( --qlp-body );
	font-size: 1rem;
	inline-size: 100%;
	line-height: 1.5;
	max-inline-size: 34rem;
	min-block-size: 48px;
	padding-block: 11px;
	padding-inline: 14px;
	transition: border-color var( --qlp-motion-duration-fast, 180ms ) var( --qlp-motion-ease-out, cubic-bezier( 0.2, 0.7, 0.2, 1 ) ),
		background-color var( --qlp-motion-duration-fast, 180ms ) var( --qlp-motion-ease-out, cubic-bezier( 0.2, 0.7, 0.2, 1 ) );
}

.qlp-field textarea {
	line-height: 1.65;
	min-block-size: 8.5rem;
	resize: vertical;
}

.qlp-field select {
	appearance: none;
	padding-inline-end: 2.6rem;
}

/*
 * The select's own chevron: a background mask so it is one colour token,
 * placed on the inline end in both directions. `background-position` takes
 * no logical keyword, so the physical offset is neutralised by writing the
 * whole shorthand per direction below -- the only place in this file that
 * needs a direction selector, and it is composition placement, which the
 * brief's §9 allows.
 */
.qlp-field select {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M.8 1.2 4.5 4.8 8.2 1.2' fill='none' stroke='%2357635F' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 10px 7px;
}

[dir="rtl"] .qlp-field select {
	background-position: left 14px center;
}

.qlp-field input:hover,
.qlp-field select:hover,
.qlp-field textarea:hover {
	border-color: var( --qlp-petrol-650 );
}

.qlp-field input:focus-visible,
.qlp-field select:focus-visible,
.qlp-field textarea:focus-visible,
.qlp-quote-desk a:focus-visible,
.qlp-quote-desk button:focus-visible,
.qlp-quote-desk label:focus-visible,
.qlp-quote-desk input:focus-visible {
	border-color: var( --qlp-petrol-800 );
	outline: 2px solid var( --qlp-focus );
	outline-offset: 2px;
}

.qlp-field [aria-invalid="true"] {
	border-color: var( --qlp-error );
	border-inline-start-width: 3px;
}

/*
 * The required marker is `muted`, not gold.
 *
 * At 12px it is the smallest text in the form, and `gold-700` only clears
 * 4.5:1 on the lightest ground: solid on `paper-50` it measures 5.3:1, but
 * on the drop sheet's `paper-200` it falls to about 4.45:1 and axe fails
 * it (VR-F020). Nothing here is tinted or faded -- the token itself is too
 * light for 12px on anything but the palest paper.
 *
 * `muted` holds 5.2:1 on `paper-200` and 6.0:1 on `paper-50`, so the
 * marker reads the same wherever a field sits, and gold goes back to being
 * only line and mark, which is what the brief asks of it. The marker never
 * carried the meaning on its own in any case: the word is there, the
 * control is `required`, and the legend repeats it.
 */
.qlp-required {
	color: var( --qlp-muted );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.qlp-field-hint {
	color: var( --qlp-muted );
	font-family: var( --qlp-body );
	font-size: 0.875rem;
	line-height: 1.6;
	margin-block: 7px 0;
}

.qlp-field-error {
	color: var( --qlp-error );
	font-family: var( --qlp-ui );
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.55;
	margin-block: 7px 0;
}

/* ------------------------------------------------- the file drop sheet */

.qlp-dropsheet {
	align-items: flex-start;
	background-color: var( --qlp-paper-200 );
	border: 1px solid var( --qlp-muted-400 );
	border-radius: var( --qlp-radius );
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp( 18px, 1rem + 1vw, 28px );
	position: relative;
}

.qlp-dropsheet::before {
	background-color: var( --qlp-gold-line );
	block-size: 1px;
	content: "";
	inline-size: 48px;
	inset-block-start: -1px;
	inset-inline-start: -1px;
	position: absolute;
}

.qlp-dropsheet__glyph {
	block-size: 32px;
	color: var( --qlp-petrol-650 );
	flex: none;
	inline-size: 32px;
}

.qlp-dropsheet__invite {
	color: var( --qlp-ink-700 );
	font-family: var( --qlp-body );
	font-size: 1rem;
	line-height: 1.55;
	margin: 0;
	max-inline-size: 38ch;
}

/*
 * VR-F003: this <label> is the affordance. It is the file input's
 * programmatic label, so it is also the control's accessible name, and it
 * is translated by the plugin rather than by the browser. Clicking it
 * opens the picker with no JavaScript at all.
 */
.qlp-dropsheet__cta {
	align-items: center;
	background-color: transparent;
	border: 1px solid var( --qlp-petrol-800 );
	border-radius: var( --qlp-radius );
	color: var( --qlp-petrol-800 );
	cursor: pointer;
	display: inline-flex;
	font-family: var( --qlp-ui );
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 0.6em;
	line-height: 1.2;
	margin-block-end: 0;
	min-block-size: 44px;
	padding-block: 0.6em;
	padding-inline: 1.15em;
	transition: background-color var( --qlp-motion-duration-fast, 180ms ) var( --qlp-motion-ease-out, cubic-bezier( 0.2, 0.7, 0.2, 1 ) ),
		color var( --qlp-motion-duration-fast, 180ms ) var( --qlp-motion-ease-out, cubic-bezier( 0.2, 0.7, 0.2, 1 ) );
}

.qlp-dropsheet__cta:hover {
	background-color: var( --qlp-petrol-800 );
	color: var( --qlp-ivory );
}

/* On the hovered label the ground is `petrol-800`, where `gold-300`
   measures about 8.9:1 -- the one place the marker can be gold. */
.qlp-dropsheet__cta:hover .qlp-required {
	color: var( --qlp-gold-300 );
}

/* Focus on the native control is mirrored onto the label that names it. */
.qlp-dropsheet:has( .qlp-dropsheet__input:focus-visible ) .qlp-dropsheet__cta {
	outline: 2px solid var( --qlp-focus );
	outline-offset: 2px;
}

.qlp-dropsheet__input {
	color: var( --qlp-ink-700 );
	font-family: var( --qlp-body );
	font-size: 0.9375rem;
	inline-size: 100%;
	max-inline-size: 100%;
}

.qlp-dropsheet .qlp-field-hint {
	margin-block-start: 0;
}

/* ------------------------------------------------------- consent row */

.qlp-field--privacy {
	border-block-start: 1px solid var( --qlp-paper-300 );
	padding-block-start: clamp( 16px, 1.4vw, 22px );
}

/*
 * `.qlp-field label { display: block }` above is (0,1,1) and this was
 * (0,1,0), so the consent row was never a flex container and its `gap`
 * did nothing: the checkbox sat hard against "I have read and accept"
 * with no space at all, in both languages (VR-F019). Qualified here so it
 * wins, and the box is aligned to the first line of the label rather than
 * to the middle of a wrapped paragraph.
 */
.qlp-field label.qlp-consent {
	align-items: flex-start;
	display: flex;
	gap: 0.85em;
	margin-block-end: 0;
}

.qlp-consent__input {
	accent-color: var( --qlp-petrol-800 );
	block-size: 22px;
	flex: none;
	inline-size: 22px;
	margin: 0;
	margin-block-start: 0.15em;
}

.qlp-consent__text {
	color: var( --qlp-ink-700 );
	font-family: var( --qlp-body );
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
}

.qlp-consent__text a {
	border-block-end: 1px solid var( --qlp-gold-line );
	color: var( --qlp-petrol-800 );
	font-weight: 600;
	text-decoration: none;
}

.qlp-consent__text a:hover {
	border-block-end-color: var( --qlp-petrol-800 );
}

/* ------------------------------------------------------- submit button */

.qlp-quote-form__submit {
	align-items: center;
	background-color: var( --qlp-petrol-800 );
	border: 1px solid transparent;
	border-radius: var( --qlp-radius );
	color: var( --qlp-ivory );
	cursor: pointer;
	display: inline-flex;
	font-family: var( --qlp-ui );
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 0.6em;
	line-height: 1.2;
	margin-block-start: clamp( 22px, 1rem + 1vw, 34px );
	min-block-size: 48px;
	padding-block: 0.72em;
	padding-inline: 1.5em;
	transition: background-color var( --qlp-motion-duration-fast, 180ms ) var( --qlp-motion-ease-out, cubic-bezier( 0.2, 0.7, 0.2, 1 ) );
}

.qlp-quote-form__submit:hover {
	background-color: var( --qlp-petrol-700 );
}

.qlp-quote-form__submit:active {
	background-color: var( --qlp-petrol-900 );
}

.qlp-quote-form__submit-mark {
	block-size: 17px;
	flex: none;
	inline-size: 17px;
	opacity: 0.85;
}

/* --------------------------------------------------- notice + error sheets */

.qlp-notice-sheet {
	background-color: var( --qlp-warning-tint );
	border-inline-start: 2px solid var( --qlp-gold-line );
	border-radius: var( --qlp-radius );
	margin-block-end: clamp( 22px, 1rem + 1vw, 32px );
	padding-block: clamp( 14px, 1.2vw, 20px );
	padding-inline: clamp( 16px, 1.4vw, 24px );
}

.qlp-notice-sheet--error {
	background-color: var( --qlp-error-tint );
	border-inline-start-color: var( --qlp-error );
}

.qlp-notice-sheet__heading {
	color: var( --qlp-ink );
	font-family: var( --qlp-ui );
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

.qlp-notice-sheet__body {
	color: var( --qlp-ink-700 );
	font-family: var( --qlp-body );
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-block: 6px 0;
}

.qlp-form-errors__list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.qlp-form-errors__list li {
	border-block-start: 1px solid rgb( 138 31 43 / 22% );
	padding-block: 8px;
}

.qlp-form-errors__list li:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.qlp-form-errors__list a {
	color: var( --qlp-error );
	font-family: var( --qlp-body );
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.55;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.qlp-quote-form-unavailable {
	margin-block-end: 0;
}

/* ----------------------------------------------------------- success state */

.qlp-quote-sheet--success .qlp-quote-sheet__body {
	padding-block: clamp( 28px, 1.5rem + 2vw, 56px );
}

.qlp-quote-success {
	display: flex;
	flex-direction: column;
	gap: clamp( 16px, 1.4vw, 24px );
}

/*
 * The aligned page (brief §3): an Arabic sheet and an English sheet brought
 * into register under one gold hairline. Built from logical insets so the
 * reader's own language is the front sheet in both directions (C-07), and
 * the stack opens toward the inline end; there is no `scaleX` anywhere.
 */
.qlp-sheets {
	block-size: 112px;
	display: block;
	inline-size: 196px;
	max-inline-size: 100%;
	position: relative;
}

.qlp-sheets__back,
.qlp-sheets__front {
	background-image: repeating-linear-gradient(
		to bottom,
		var( --qlp-paper-300 ) 0,
		var( --qlp-paper-300 ) 1px,
		transparent 1px,
		transparent 11px
	);
	background-origin: content-box;
	background-repeat: repeat;
	block-size: 92px;
	border: 1px solid var( --qlp-paper-300 );
	border-radius: var( --qlp-radius );
	content: "";
	inline-size: 118px;
	padding: 14px 16px;
	position: absolute;
}

.qlp-sheets__back {
	background-color: var( --qlp-paper-200 );
	inset-block-start: 0;
	inset-inline-end: 0;
}

.qlp-sheets__front {
	background-color: var( --qlp-paper-50 );
	box-shadow: 0 16px 30px -22px rgb( 16 59 58 / 55% );
	inset-block-end: 0;
	inset-inline-start: 0;
}

.qlp-sheets__rule {
	background-color: var( --qlp-gold-line );
	block-size: 1px;
	inset-block-start: 55px;
	inset-inline: 0;
	position: absolute;
}

.qlp-quote-success__heading {
	align-items: flex-start;
	color: var( --qlp-petrol-800 );
	display: flex;
	font-size: clamp( 1.625rem, 1.3rem + 1.2vw, 2.25rem );
	font-weight: 600;
	gap: 0.5em;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0;
	text-wrap: balance;
}

:lang( ar ) .qlp-quote-success__heading {
	font-size: clamp( 1.5rem, 1.2rem + 1.1vw, 2.0625rem );
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.45;
}

.qlp-quote-success__mark {
	block-size: 24px;
	color: var( --qlp-gold-line );
	flex: none;
	inline-size: 24px;
	margin-block-start: 0.16em;
}

.qlp-quote-success__reference {
	border-block: 1px solid var( --qlp-paper-300 );
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding-block: clamp( 14px, 1.2vw, 20px );
}

.qlp-quote-success__reference-label {
	color: var( --qlp-gold-700 );
	font-family: var( --qlp-ui );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

:lang( ar ) .qlp-quote-success__reference-label {
	letter-spacing: normal;
	text-transform: none;
}

.qlp-quote-success__reference-value {
	color: var( --qlp-petrol-800 );
	font-family: var( --qlp-body );
	font-size: clamp( 1.375rem, 1.1rem + 1vw, 1.75rem );
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.qlp-quote-success__summary {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.qlp-quote-success__row {
	border-block-end: 1px solid var( --qlp-paper-300 );
	display: grid;
	gap: 2px 1.5em;
	padding-block: 11px;
}

@media ( min-width: 600px ) {

	.qlp-quote-success__row {
		grid-template-columns: 12rem minmax( 0, 1fr );
	}
}

.qlp-quote-success__row dt {
	color: var( --qlp-muted );
	font-family: var( --qlp-ui );
	font-size: 0.875rem;
	font-weight: 600;
}

.qlp-quote-success__row dd {
	color: var( --qlp-ink );
	font-family: var( --qlp-body );
	font-size: 1rem;
	margin: 0;
}

.qlp-quote-success__next {
	background-color: var( --qlp-ivory );
	border-inline-start: 2px solid var( --qlp-gold-line );
	padding-block: clamp( 14px, 1.2vw, 20px );
	padding-inline: clamp( 16px, 1.4vw, 24px );
}

.qlp-quote-success__next-label {
	color: var( --qlp-petrol-800 );
	font-family: var( --qlp-ui );
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0;
}

.qlp-quote-success__next-body {
	color: var( --qlp-ink-700 );
	font-family: var( --qlp-body );
	font-size: 1rem;
	line-height: 1.65;
	margin-block: 6px 0;
	max-inline-size: 62ch;
}

.qlp-retention-statement {
	color: var( --qlp-muted );
	font-family: var( --qlp-body );
	font-size: 0.875rem;
	line-height: 1.7;
	margin: 0;
	max-inline-size: 62ch;
}

.qlp-quote-success__home {
	margin: 0;
}

.qlp-textlink {
	align-items: center;
	border-block-end: 1px solid var( --qlp-gold-line );
	color: var( --qlp-petrol-800 );
	display: inline-flex;
	font-family: var( --qlp-ui );
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 0.5em;
	padding-block-end: 3px;
	text-decoration: none;
}

.qlp-textlink:hover {
	border-block-end-color: var( --qlp-petrol-800 );
}

/* ---------------------------------------------------------------- honeypot */

/*
 * SEC-011, S3-F007/S3-F009: visually hidden without `display: none` (some
 * bots skip fields hidden that way), and collapsed on the label and input
 * themselves, not only on the wrapper -- a bare <input> keeps its own
 * intrinsic box regardless of a clipped ancestor, so each element's own
 * bounding box has to be reduced to 1x1 for the honeypot to stay invisible
 * to a real visitor and unreachable by the keyboard.
 */
.qlp-honeypot,
.qlp-honeypot label,
.qlp-honeypot input {
	block-size: 1px;
	clip-path: inset( 50% );
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

.qlp-honeypot label,
.qlp-honeypot input {
	border: 0;
	margin: 0;
	min-block-size: 0;
	min-inline-size: 0;
	padding: 0;
}


/* ---------------------------------------------------------------------- *
 * One rule the design system cannot settle.
 *
 * This section used to hold four more, countering
 * `themes/quicklink-prime/style.css` §23 (T041): a 720 px cap on
 * `.qlp-quote-form` and `.qlp-quote-form-unavailable`, a 4 px radius on
 * `.qlp-form-errors`, and an `ivory-dark` box painted behind
 * `.qlp-retention-statement`. T057 has retired that section, so all four
 * are gone: the desk's own `.qlp-quote-form`, `.qlp-quote-form-unavailable`
 * and `.qlp-notice-sheet` rules (the error summary carries that class) now
 * stand on their own, with nothing left to out-specify.
 * ---------------------------------------------------------------------- */

/* `[hidden]` is a user-agent rule, so it loses to the class that makes the
 * submit button a flex container. The stepper hides this button on every
 * step but the last, so it has to win. */
.qlp-quote-form__submit[hidden] {
	display: none;
}

/* --- reduced-motion parity (T103; MOT-002) ------------------------------ *
 *
 * The theme carries a document-wide version of this block. The quote form
 * repeats it inside its own scope because the block ships its stylesheet
 * with itself and has to be correct in a theme that does not: under
 * `prefers-reduced-motion: reduce` nothing inside the form moves, and no
 * declaration waits before resolving to its final state.
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.qlp-quote-form,
	.qlp-quote-form *,
	.qlp-quote-form *::before,
	.qlp-quote-form *::after {
		animation-delay: 0s !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-delay: 0s !important;
		transition-duration: 0.001ms !important;
	}
}