/*
 * Quote builder (merchant-quote-builder). The one place custom CSS is justified:
 * a bespoke dark pricing grid Bricks has no native element for. Colours, radii,
 * type and spacing all resolve to the site's global variables (design tokens),
 * so a token change flows straight through. Greys on dark are white at low alpha
 * because the palette has no on-dark grey scale.
 */
.m-qb {
	--qb-line: rgba(255, 255, 255, 0.18);
	--qb-panel: rgba(255, 255, 255, 0.05);
	--qb-ring: rgba(255, 255, 255, 0.12);
	--qb-grey-1: rgba(255, 255, 255, 0.9);
	--qb-grey-2: rgba(255, 255, 255, 0.62);
	--qb-grey-3: rgba(255, 255, 255, 0.42);
	font-family: var(--font-body);
	box-sizing: border-box;
}
.m-qb *, .m-qb *::before, .m-qb *::after { box-sizing: border-box; }

/* James's layout (design review slide 30, 9 Oct 2026): the heading sits on the
   white section above a rounded dark card; inside it, the line editor runs full
   width so long course titles fit (many start alike), and the quote panel sits
   below it in dark grey, so the buttons and links can be yellow. */
.m-qb--dark {
	width: 100%; /* a flex item in its section: don't shrink to the content */
	max-width: var(--container-wide);
	margin-inline: auto;
	color: var(--c-ink);
}
.m-qb--dark .m-qb-app {
	background: var(--c-ink);
	color: var(--c-surface);
	border-radius: var(--r-card);
	padding: 44px;
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
}
.m-qb--dark .m-qb-grid { display: contents; }
.m-qb--dark .m-qb-head { margin-bottom: var(--sp-6); }
.m-qb--dark .m-qb-title { color: var(--c-ink); }
.m-qb--dark .m-qb-intro { color: var(--c-ink-body); }

.m-qb--light { color: var(--c-ink); padding: var(--sp-12) 0; }
.m-qb--light { --qb-line: var(--c-border-soft); --qb-panel: var(--c-surface-muted); --qb-ring: var(--c-border-soft); --qb-grey-1: var(--c-ink); --qb-grey-2: var(--c-ink-body); --qb-grey-3: var(--c-ink-muted); }

.m-qb-head { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-10); max-width: 640px; }
.m-qb-eyebrow { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--t-xs-size); letter-spacing: 1px; text-transform: uppercase; color: var(--c-brand); }
.m-qb-title { margin: 0; font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--t-h2-size); line-height: var(--t-h2-lh); color: inherit; text-wrap: pretty; }
.m-qb-intro { margin: 0; font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); color: var(--qb-grey-2); }

.m-qb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sp-10); align-items: start; }
.m-qb-left { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

.m-qb-lines { display: flex; flex-direction: column; gap: var(--sp-3); }
.m-qb-cols { display: grid; grid-template-columns: minmax(0, 1fr) 140px 104px 112px 32px; gap: var(--sp-5); align-items: center; }
.m-qb-colhead { font-size: var(--t-body-size); color: var(--qb-grey-1); }
.m-qb-colhead > span:first-child { padding-left: var(--sp-1); }
.m-qb-right { text-align: right; }

/* Controls on the dark card are grey pills with no outline (slide 30). */
.m-qb-selectwrap { position: relative; display: flex; min-width: 0; }
.m-qb-select {
	appearance: none; -webkit-appearance: none; width: 100%; height: 48px; padding: 0 44px 0 var(--sp-5);
	border: 0; border-radius: var(--r-pill); background: var(--c-surface-on-dark);
	font-family: var(--font-body); font-size: var(--t-body-size); color: var(--c-surface); cursor: pointer; text-overflow: ellipsis;
}
.m-qb-select:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.m-qb--light .m-qb-select { background: var(--c-surface); color: var(--c-ink); box-shadow: inset 0 0 0 2px var(--qb-ring); }
.m-qb-select option { color: #000; background: #fff; }
.m-qb-caret { position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; pointer-events: none; color: var(--c-brand); }
.m-qb-caret svg { display: block; }

.m-qb-stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; height: 48px; border-radius: var(--r-pill); background: var(--c-surface-on-dark); }
.m-qb--light .m-qb-stepper { background: var(--c-surface); box-shadow: inset 0 0 0 2px var(--qb-ring); }
.m-qb-step { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-surface); font-size: 22px; line-height: 1; padding: 0; }
.m-qb-step:first-child { color: var(--qb-grey-3); }
.m-qb-step:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.m-qb-count { width: 100%; min-width: 0; border: 0; background: transparent; text-align: center; font-family: var(--font-body); font-size: var(--t-body-lg-size); color: inherit; outline: none; -moz-appearance: textfield; }
.m-qb-count::-webkit-inner-spin-button, .m-qb-count::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Band tag: small and square-cornered like the site's tags, green when a band
   applies, dim at list price. */
.m-qb-chip { justify-self: start; width: 96px; text-align: center; padding: 2px 6px; border-radius: var(--r-tag); background: var(--c-surface-on-dark); color: var(--qb-grey-3); font-size: var(--t-sm-size); line-height: var(--t-sm-lh); white-space: nowrap; }
.m-qb-chip.is-on { background: var(--c-accent-green); color: var(--c-ink); }

.m-qb-linetotal { display: flex; flex-direction: column; align-items: flex-end; }
.m-qb-total { font-family: var(--font-heading); font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); font-weight: var(--fw-bold); white-space: nowrap; }
.m-qb-remove { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; width: 32px; height: 32px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--qb-grey-3); font-size: 20px; line-height: 1; padding: 0; }
.m-qb-remove:hover { color: var(--c-surface); background: rgba(255, 255, 255, 0.08); }
.m-qb-remove:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

.m-qb-add { cursor: pointer; align-self: flex-start; border: 0; padding: 0 var(--sp-1); background: transparent; color: var(--c-brand); font-family: var(--font-body); font-size: var(--t-body-size); line-height: var(--t-body-lh); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.m-qb-add:hover { text-decoration-thickness: 2px; }
.m-qb-add:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* Bands: a range label over a small tag that switches on, like a light, when a
   line on the quote uses it. */
.m-qb-bands { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-2); }
.m-qb-band { display: flex; flex-direction: column; gap: var(--sp-1); width: 106px; }
.m-qb-band-range { font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--qb-grey-1); white-space: nowrap; }
.m-qb-band-save { padding: 2px 10px; border-radius: var(--r-tag); background: var(--c-surface-on-dark); color: var(--qb-grey-1); font-size: var(--t-sm-size); line-height: var(--t-sm-lh); text-align: center; white-space: nowrap; }
.m-qb-band.is-on .m-qb-band-save { background: var(--c-accent-green); color: var(--c-ink); }
.m-qb-fine { margin: 0; font-size: var(--t-sm-size); line-height: var(--t-sm-lh); color: var(--qb-grey-3); }

/* Panel, below the editor */
.m-qb-panel { display: flex; flex-direction: column; gap: var(--sp-4); }
.m-qb-card { border-radius: var(--r-lg); padding: var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-3); }
.m-qb-card--light { background: var(--c-surface); color: var(--c-ink); }
.m-qb-card-eyebrow { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--t-xs-size); letter-spacing: 1px; text-transform: uppercase; }
.m-qb-card-eyebrow.m-qb-muted, .m-qb-muted { color: var(--c-ink-body); }
.m-qb-card-title { font-family: var(--font-heading); font-size: var(--t-h4-size); line-height: var(--t-h4-lh); }
.m-qb-card-body { margin: 0; font-size: var(--t-sm-size); line-height: 22px; color: var(--c-ink-body); }

/* The quote: dark grey, lines and breakdown left, total and actions right. */
.m-qb-card--sum { background: var(--c-surface-on-dark); color: var(--c-surface); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: var(--sp-12); row-gap: var(--sp-8); align-items: start; }
.m-qb-sum-lines { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 400px; }
.m-qb-sum-total { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

.m-qb-line { display: flex; justify-content: space-between; gap: var(--sp-5); font-family: var(--font-body); font-size: var(--t-body-size); }
.m-qb-line--item { font-weight: var(--fw-bold); }
.m-qb-line--sep { border-top: 1px solid var(--c-border-soft); padding-top: var(--sp-3); }
.m-qb-strong { font-weight: var(--fw-demibold); white-space: nowrap; }
.m-qb-line--item .m-qb-strong { font-weight: var(--fw-bold); }
.m-qb-totals { border-top: 1px solid var(--qb-line); margin-top: var(--sp-1); padding-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--t-body-size); }
.m-qb-grand-label { font-size: var(--t-body-size); line-height: var(--t-body-lh); }
.m-qb-grand-figure { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--t-h1-size); line-height: var(--t-h1-lh); }
.m-qb-note { font-size: var(--t-body-size); line-height: var(--t-body-lh); }
.m-qb-card--light .m-qb-note { font-size: var(--t-sm-size); line-height: var(--t-sm-lh); }

.m-qb-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); padding-top: var(--sp-3); width: 100%; max-width: 320px; }
.m-qb-btn { cursor: pointer; width: 100%; height: 48px; border: 0; border-radius: var(--r-pill); font-family: var(--font-body); font-size: var(--t-body-size); font-weight: var(--fw-regular); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.m-qb-btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.m-qb-btn--dark { background: var(--c-ink); color: var(--c-surface); }
.m-qb-btn--gold { background: var(--c-brand); color: var(--c-brand-ink); }
.m-qb-btn--gold:hover { background: var(--c-brand-hover); }
.m-qb-btn--outline { background: transparent; box-shadow: inset 0 0 0 2px var(--c-brand); color: var(--c-surface); }
.m-qb-card--light .m-qb-btn--outline { box-shadow: inset 0 0 0 2px var(--c-ink); color: var(--c-ink); }
.m-qb-btn[disabled] { opacity: 0.6; cursor: default; }
.m-qb-textlink { display: block; white-space: nowrap; font-family: var(--font-body); font-size: var(--t-body-size); color: var(--c-brand); padding-top: var(--sp-1); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.m-qb-textlink:hover { text-decoration-thickness: 2px; }
.m-qb-textbtn { cursor: pointer; border: 0; background: transparent; color: var(--c-ink-body); font-family: var(--font-body); font-size: var(--t-sm-size); font-weight: var(--fw-demibold); height: 32px; }

/* The details and done steps take the panel's full width: two columns of
   fields, with headings, notes and actions across both. */
.m-qb-card--light { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-6); }
.m-qb-card--light > :not(.m-qb-field) { grid-column: 1 / -1; }
.m-qb-card--light .m-qb-actions { max-width: 360px; }

.m-qb-field { display: flex; flex-direction: column; gap: 6px; }
.m-qb-label { font-family: var(--font-body); font-size: var(--t-sm-size); color: var(--c-ink-body); }
.m-qb-input { width: 100%; height: var(--field-height); padding: 0 14px; border: 0; border-radius: var(--r-sharp); background: var(--c-surface); box-shadow: inset 0 0 0 2px var(--c-border-soft); font-family: var(--font-body); font-size: var(--t-body-size); color: var(--c-ink); }
.m-qb-input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.m-qb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.m-qb-error { margin: 0; color: var(--c-error); font-size: var(--t-sm-size); }

.m-qb-donehead { display: flex; align-items: center; gap: var(--sp-3); }
.m-qb-donehead > div { display: flex; flex-direction: column; gap: 2px; }
.m-qb-tick { width: 48px; height: 48px; border-radius: 24px; background: var(--c-accent-green); display: flex; align-items: center; justify-content: center; color: var(--c-ink); flex-shrink: 0; }
.m-qb-recap { background: var(--c-surface-muted); border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm-size); }

.m-qb-turnstile { display: flex; justify-content: flex-end; margin-top: var(--sp-5); min-height: 65px; }
@media (max-width: 991px) { .m-qb-turnstile { justify-content: flex-start; } }
.m-qb-loading { padding: var(--sp-8) 0; color: var(--qb-grey-3); font-size: var(--t-sm-size); }
.m-qb-noscript { color: var(--qb-grey-2); }

/* Tablet / mobile */
@media (max-width: 991px) {
	.m-qb--dark .m-qb-app { padding: var(--sp-8) var(--sp-5); border-radius: var(--r-lg); gap: var(--sp-6); }
	.m-qb-colhead { display: none; }
	/* Compact two-row card: the course on a row of its own, full width, so long
	   titles fit; then stepper, band, price and remove. */
	.m-qb-row {
		grid-template-columns: auto auto minmax(0, 1fr) auto;
		grid-template-areas:
			"select  select select select"
			"stepper chip   total  remove";
		gap: var(--sp-2) var(--sp-3);
		padding-bottom: var(--sp-3);
		border-bottom: 1px solid var(--qb-line);
		align-items: center;
	}
	.m-qb-selectwrap { grid-area: select; }
	.m-qb-remove { grid-area: remove; justify-self: end; }
	.m-qb-stepper { grid-area: stepper; width: 132px; height: 44px; }
	.m-qb-chip { grid-area: chip; }
	.m-qb-linetotal { grid-area: total; }
	.m-qb-select { height: 44px; }
	.m-qb-card { padding: var(--sp-6) var(--sp-5); }
	.m-qb-card--sum { grid-template-columns: minmax(0, 1fr); }
	.m-qb-sum-lines { max-width: none; }
	.m-qb-actions { max-width: none; }
	.m-qb-textlink { white-space: normal; }
	.m-qb-grand-figure { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); }
	.m-qb-card--light { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.m-qb-title { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); }
	.m-qb-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "select select" "stepper total" "chip remove"; }
	.m-qb-stepper { justify-self: start; }
}