/* =========================================================
   JET SUPPLY — QUOTE RAIL
   Homepage trip request form. Markup: parts/quote-rail.php
   (shell) + assets/js/quote-rail.js (rows). Data and strings:
   inc/quote-rail.php.

   Ported from the approved design. All colour via var(--*)
   tokens or color-mix over them — no hexes (rule 2).

   The panel is translucent over the hero photograph, so its
   legibility depends on the scrim parts/hero.php draws. If the
   hero image is ever swapped for something pale, re-check the
   label contrast before shipping it.
   ========================================================= */

/* The hero must not clip the rail: the typeahead and calendar panels are
   absolutely positioned out of their cell, and hero.css sets overflow: hidden.
   z-index 5 keeps the rail above the sections below it while staying under the
   site header's 10, so a dropdown can never paint over the navigation. */
.hero.hero--has-image {
	overflow: visible;
	z-index: 5;
}

.qr {
	grid-column: 1 / -1;
	align-self: end;
	margin-top: var(--s-7);
	position: relative;
	background: color-mix( in srgb, var(--c-navy-900) 52%, transparent );
	backdrop-filter: blur( 18px );
	-webkit-backdrop-filter: blur( 18px );
	border: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 16%, transparent );
}

.qr .ico {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	stroke-width: 1.3;
	fill: none;
	stroke-linecap: square;
	flex: none;
}

/* ---------- Trip-type segmented control ---------- */

.qr__seg {
	display: flex;
	gap: var(--s-1);
	padding: var(--s-3) var(--s-4);
	border-bottom: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 12%, transparent );
}

.qr__seg button {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--ff-sans);
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	color: color-mix( in srgb, var(--c-ivory) 60%, transparent );
	padding: 9px 16px;
	background: none;
	border: 0;
	cursor: pointer;
}

.qr__seg button[aria-pressed="true"] {
	background: color-mix( in srgb, var(--c-ivory) 14%, transparent );
	color: var(--c-ivory);
}

/* ---------- Rows ---------- */

.qr__row {
	display: grid;
	grid-template-columns: 1.2fr 1.2fr 0.9fr minmax( 172px, 0.7fr ) auto;
}

.qr__row--return {
	grid-template-columns: 1.1fr 1.1fr 0.8fr 0.8fr minmax( 172px, 0.65fr ) auto;
}

.qr__row--leg {
	display: grid;
	grid-template-columns: 30px 1.15fr 1.15fr 0.85fr minmax( 160px, 0.8fr );
	border-top: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 10%, transparent );
}

.qr__row--leg.has-rm {
	grid-template-columns: 30px 1.15fr 1.15fr 0.85fr minmax( 160px, 0.8fr ) 44px;
}

.qr__body > .qr__row--leg:first-child { border-top: 0; }

/* ---------- Cells ---------- */

.qr__cell {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 13px 20px 15px;
	border-right: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 12%, transparent );
	min-width: 0;
}

.qr__cell:last-child { border-right: 0; }

.qr__cell--pax { align-items: center; }
.qr__cell--pax .qr__lbl { display: flex; align-items: center; justify-content: center; gap: 8px; }
.qr__cell--pax .qr__step { justify-content: center; }
.qr__cell--pax .qr__lbl .ico { margin: 0; width: 15px; height: 15px; }

.qr__cell--cta { padding: 10px; }
.qr__cell--cta .qr__cta { height: 100%; width: 100%; }

.qr__cell .ico { margin-top: 2px; color: var(--c-silver); }

/* The label/field column inside a cell. min-width: 0 is load-bearing — without
   it a long airport name blows the grid column out. */
.qr__cell-body {
	min-width: 0;
	flex: 1;
}

.qr__lbl {
	display: block;
	font-family: var(--ff-sans);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: color-mix( in srgb, var(--c-silver) 80%, transparent );
	margin: 0 0 var(--s-2);
}

.qr__in {
	background: none;
	border: 0;
	outline: none;
	font-family: var(--ff-sans);
	font-size: 1rem;
	font-weight: 500;
	color: var(--c-ivory);
	width: 100%;
	padding: 0;
	color-scheme: dark;
}

.qr__in::placeholder {
	color: color-mix( in srgb, var(--c-ivory) 48%, transparent );
	font-weight: 400;
}

.qr__in:focus-visible { box-shadow: 0 1px 0 0 var(--c-silver); }

.qr__cell.qr-err { box-shadow: inset 0 -2px 0 0 var(--c-error); }

/* ---------- Actions ---------- */

.qr__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--ff-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	background: var(--c-ivory);
	color: var(--c-navy-900);
	padding: 16px 30px;
	border: 0;
	cursor: pointer;
}

.qr__cta:hover { background: var(--c-paper); }

.qr__step { display: flex; align-items: center; gap: 10px; white-space: nowrap; }

.qr__step button {
	width: 24px;
	height: 24px;
	border: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 35%, transparent );
	background: none;
	color: var(--c-ivory);
	font-size: 0.9375rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.qr__step output {
	font-family: var(--ff-sans);
	font-size: 1rem;
	font-weight: 500;
	color: var(--c-ivory);
	min-width: 22px;
	text-align: center;
}

.qr__legnum {
	font-family: var(--ff-sans);
	font-size: 0.78rem;
	color: var(--c-silver-dim);
	padding: 17px 0 0 12px;
}

.qr__rm {
	background: none;
	border: 0;
	color: color-mix( in srgb, var(--c-ivory) 45%, transparent );
	cursor: pointer;
	font-size: 1.05rem;
	padding: 13px 0 0;
}

.qr__rm:hover { color: var(--c-ivory); }

.qr__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-5);
	padding: var(--s-3) var(--s-4);
	border-top: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 12%, transparent );
}

.qr__add {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	font-family: var(--ff-sans);
	font-size: 0.84rem;
	color: var(--c-silver);
	cursor: pointer;
	padding: 8px 0;
}

.qr__add:hover { color: var(--c-ivory); }

.qr__reassure {
	position: absolute;
	right: 2px;
	bottom: -32px;
	margin: 0;
	font-family: var(--ff-sans);
	font-size: 0.8125rem;
	color: color-mix( in srgb, var(--c-ivory) 78%, transparent );
}

.qr__msg {
	position: absolute;
	left: 2px;
	bottom: -32px;
	margin: 0;
	font-family: var(--ff-sans);
	font-size: 0.8125rem;
	color: color-mix( in srgb, var(--c-error) 30%, var(--c-ivory) );
	text-shadow: 0 1px 8px color-mix( in srgb, var(--c-navy-900) 60%, transparent );
}

/* ---------- Typeahead panel ---------- */

.qr__dd {
	position: absolute;
	left: -1px;
	right: -1px;
	top: calc( 100% + 2px );
	z-index: 40;
	background: linear-gradient(
		180deg,
		color-mix( in srgb, var(--c-ivory) 9%, color-mix( in srgb, var(--c-navy-900) 95%, transparent ) ),
		color-mix( in srgb, var(--c-navy-900) 95%, transparent ) 55%
	);
	backdrop-filter: blur( 64px ) saturate( 1.8 ) brightness( 1.25 );
	-webkit-backdrop-filter: blur( 64px ) saturate( 1.8 ) brightness( 1.25 );
	border: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 24%, transparent );
	box-shadow:
		inset 0 1px 0 color-mix( in srgb, var(--c-ivory) 18%, transparent ),
		var(--sh-modal);
}

.qr__dd-scroll { max-height: 296px; overflow: auto; }

.qr__dd button {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--ff-sans);
	font-size: 0.9rem;
	color: var(--c-ivory);
	padding: 11px 16px;
}

.qr__dd button:hover { background: color-mix( in srgb, var(--c-ivory) 10%, transparent ); }

.qr__dd button.qr__dd-a {
	padding-left: 32px;
	font-weight: 400;
	color: color-mix( in srgb, var(--c-ivory) 85%, transparent );
}

.qr__dd button code {
	font-family: var(--ff-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--c-silver);
}

.qr__dd button small {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--c-silver-dim);
}

/* Opens upward when there is not enough room below the cell. */
.qr__dd--up { top: auto; bottom: calc( 100% + 2px ); }

.qr__dd-empty {
	font-family: var(--ff-sans);
	font-size: 0.84rem;
	color: var(--c-silver-dim);
	padding: 12px 16px;
	margin: 0;
}

/* Section heading over each half of the list — our lanes, then worldwide
   results. Carries .qr__dd-empty too, so it degrades to a plain muted line
   rather than to nothing if this rule is ever missing. */
.qr__dd-group {
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: color-mix( in srgb, var(--c-silver) 70%, transparent );
	padding: 12px 16px 6px;
}

/* ---------- Calendar panel ---------- */

.qr__cal { padding: 12px; min-width: 270px; max-height: none; }

.qr__cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 2px 4px 12px;
}

.qr__cal-nav { display: flex; gap: 6px; }

.qr__cal-head strong {
	font-family: var(--ff-serif);
	font-weight: 400;
	font-size: 1rem;
	color: var(--c-ivory);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.qr__cal-head button {
	background: none;
	border: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 28%, transparent );
	color: var(--c-silver);
	cursor: pointer;
	font-size: 0.95rem;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
}

.qr__cal-head button:hover {
	color: var(--c-ivory);
	border-color: color-mix( in srgb, var(--c-ivory) 55%, transparent );
}

.qr__cal-grid { display: grid; grid-template-columns: repeat( 7, 1fr ); gap: 2px; }

.qr__cal-grid span {
	font-family: var(--ff-sans);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	color: var(--c-silver-dim);
	text-align: center;
	padding: 4px 0;
	text-transform: uppercase;
}

.qr__cal-grid button {
	width: 100%;
	height: 31px;
	background: none;
	border: 0;
	color: var(--c-ivory);
	font-family: var(--ff-sans);
	font-size: 0.8rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.qr__cal-grid button:hover { background: color-mix( in srgb, var(--c-ivory) 12%, transparent ); }

.qr__cal-grid button[disabled] {
	color: color-mix( in srgb, var(--c-ivory) 25%, transparent );
	cursor: default;
	background: none;
}

.qr__cal-grid button.on { background: var(--c-ivory); color: var(--c-navy-900); }

/* ---------- Confirmation ---------- */

.qr__done { padding: var(--s-7) var(--s-6); text-align: center; }

.qr__done h3 {
	font-family: var(--ff-serif);
	font-weight: 400;
	font-size: var(--fs-h4);
	color: var(--c-ivory);
	margin: 0 0 var(--s-3);
}

.qr__done p {
	font-family: var(--ff-sans);
	font-size: 0.9375rem;
	color: color-mix( in srgb, var(--c-ivory) 75%, transparent );
	margin: 0 0 var(--s-5);
}

.qr__done button {
	background: none;
	border: 0;
	border-bottom: var(--bw-hair) solid var(--c-silver);
	color: var(--c-ivory);
	font-family: var(--ff-sans);
	font-size: 0.9375rem;
	padding: 0 0 3px;
	cursor: pointer;
}

/* ---------- Mobile, <= 1023px ---------- */

@media ( max-width: 1023px ) {
	.qr { margin-top: var(--s-7); }

	.qr__row,
	.qr__row--return { grid-template-columns: 1fr 1fr; }

	.qr__row .qr__cell--cta { grid-column: 1 / -1; }

	.qr__row--return .qr__cell--cta { grid-column: auto; align-items: center; }
	.qr__row--return .qr__cell--cta .qr__cta { margin: auto; }

	.qr__row--return .qr__cell--cta .qr__cta,
	.qr__foot .qr__cta {
		height: auto;
		width: auto;
		white-space: nowrap;
		padding: 12px 16px;
		font-size: 0.875rem;
	}

	.qr__row--leg,
	.qr__row--leg.has-rm { grid-template-columns: 1fr 1fr; }

	.qr__row--leg .qr__legnum { grid-row: 1; grid-column: 1 / -1; padding: 16px 20px 0; }
	.qr__row--leg.has-rm .qr__legnum { grid-column: 1 / 2; }

	.qr__row--leg .qr__rm {
		grid-row: 1;
		grid-column: 2 / 3;
		justify-self: end;
		padding: 12px 20px 0 0;
	}

	.qr__row--leg .qr__cell { border-top: 0; }

	.qr__cell {
		border-right: 0;
		border-top: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 10%, transparent );
	}

	.qr__reassure,
	.qr__msg { position: static; padding: var(--s-3) var(--s-4); }
}