@charset "utf-8";
/* CSS Document */

/* The new-vehicle showroom and the build-and-price page.
   Loaded alongside search.css, which already supplies .result-panel / .result-picture / .result-title
   - the showroom tiles are deliberately the same tiles the used lot uses, so a visitor moving between
   New and Used does not feel they have changed website. Only what differs is written here. */

/* Make filter */

.catalogue-make-filter {
	margin-bottom: 20px;
}

.catalogue-make-filter .btn {
	margin: 0 6px 6px 0;
}

/* "from" on a showroom card
   A model line spans trims, so the tile quotes the cheapest. The word carries the caveat, and it is
   deliberately quieter than the number it qualifies rather than the same weight. */

.catalogue-from {
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
	margin-right: 3px;
}

/* Model year page */

.catalogue-hero {
	margin-bottom: 20px;
}

.catalogue-hero img {
	width: 100%;
	height: auto;
}

.catalogue-copy {
	margin-bottom: 25px;
	line-height: 1.7;
}

.catalogue-spec-table th {
	width: 40%;
	font-weight: 600;
}

/* Build and price
   Sticky on a desktop so the running total stays visible while somebody scrolls the option list -
   a price that scrolls away is a price nobody is watching change. Released below the breakpoint,
   where the column is full width and stacks under the photo instead of beside it. */

.catalogue-builder {
	margin-bottom: 25px;
}

@media (min-width: 992px) {

	.catalogue-builder {
		position: sticky;
		top: 20px;
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 40px);
	}

	/* The total and the payment estimate are what a visitor is watching, so they stay in view and it is
	   the option list that scrolls when the panel is taller than the screen. Without this a tall panel
	   pins its top and the figures at the bottom are out of reach until the page itself has scrolled
	   past it. */
	.catalogue-builder > .panel-body {
		overflow-y: auto;
		flex: 1 1 auto;
		min-height: 140px;
	}

	.catalogue-builder > .panel-heading,
	.catalogue-builder > .catalogue-rule-warning,
	.catalogue-builder > .panel-footer {
		flex: 0 0 auto;
	}
}

.catalogue-builder-title {
	margin: 0;
	font-size: 18px;
}

.catalogue-build-group {
	margin-bottom: 18px;
}

.catalogue-build-group:last-child {
	margin-bottom: 0;
}

.catalogue-build-group-title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 8px;
	opacity: 0.75;
}

/* One option row.
   The whole row is the label, so the hit area is the row rather than the ten-pixel control - this
   list is used on phones more than anywhere else. */

.catalogue-option {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	font-weight: normal;
	margin: 0 0 4px;
	padding: 6px 8px;
	border-radius: 3px;
	cursor: pointer;
}

.catalogue-option:hover {
	background: rgba(0, 0, 0, 0.03);
}

/* A standard option cannot be unticked - it is part of the car. Dimmed so that reads as "included"
   rather than as "broken", and the cursor says so too. */

.catalogue-option input:disabled {
	cursor: default;
}

.catalogue-option:has(input:disabled) {
	opacity: 0.7;
	cursor: default;
}

.catalogue-option:has(input:disabled):hover {
	background: none;
}

.catalogue-option-name {
	flex: 1 1 auto;
}

.catalogue-option-price {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 0.9em;
}

/* Summary */

.catalogue-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
}

.catalogue-summary-total {
	font-weight: 700;
	font-size: 1.15em;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	margin-top: 6px;
	padding-top: 10px;
	margin-bottom: 12px;
}

/* Numbers that change as options are ticked, so they line up rather than jitter */

#catalogue-options-total,
#catalogue-grand-total {
	font-variant-numeric: tabular-nums;
}

.catalogue-disclaimer {
	font-size: 0.8em;
	opacity: 0.7;
	margin: 12px 0 0;
}

/* Rule warning
   Sits between the option list and the total, so it is read on the way to the price rather than
   after it. Hidden until a rule is actually broken - an always-present empty box reads as
   something that failed to load. */

.catalogue-rule-warning {
	margin: 0;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	font-size: 0.9em;
}

/* Year and trim switcher
   Above the photo and the build panel. Plain links drawn as controls, so they still work as pages
   without scripting; the active one is marked with the text colour rather than a theme colour, so
   it reads on any theme. */

.catalogue-switcher {
	margin: 0 0 25px;
}

.catalogue-switcher-row {
	margin-bottom: 16px;
}

.catalogue-switcher-row:last-child {
	margin-bottom: 0;
}

.catalogue-switcher-label {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
	opacity: 0.75;
}

.catalogue-year-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.catalogue-year-pill {
	display: block;
	padding: 6px 18px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 20px;
	color: inherit;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.catalogue-year-pill:hover,
.catalogue-year-pill:focus {
	background: rgba(0, 0, 0, 0.04);
	color: inherit;
	text-decoration: none;
}

.catalogue-year-pill.active {
	border-color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
	font-weight: 700;
}

/* One card per trim of the year being looked at. A grid rather than columns: a model line can have
   two trims or seven, and the cards should fill the row either way and wrap on a phone. */

.catalogue-trim-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.catalogue-trim-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
}

.catalogue-trim-card:hover,
.catalogue-trim-card:focus {
	background: rgba(0, 0, 0, 0.04);
	color: inherit;
	text-decoration: none;
}

.catalogue-trim-card.active {
	border-color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
}

.catalogue-trim-check {
	position: absolute;
	top: 12px;
	right: 12px;
}

.catalogue-trim-name {
	font-weight: 700;
	padding-right: 24px;
}

.catalogue-trim-price {
	font-variant-numeric: tabular-nums;
}

.catalogue-trim-spec {
	font-size: 0.85em;
	opacity: 0.7;
}

/* While another model year is being fetched: dimmed and not clickable, so a second click cannot
   land on something about to be replaced. */

.catalogue-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s;
}

/* "Include taxes"
   First thing in the summary, above the figures it changes. The whole row is the label, like an
   option row, so the hit area is the line rather than the control. */

.catalogue-tax-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	font-weight: normal;
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	cursor: pointer;
}

.catalogue-tax-toggle input {
	margin: 0;
}

/* Payment estimate
   Under the total, above the quote button. Compact: it sits in a panel that is already tall. */

.catalogue-payment {
	margin: 0 0 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.catalogue-payment-title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
	opacity: 0.75;
}

.catalogue-payment-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.catalogue-payment-control {
	flex: 1 1 120px;
	min-width: 0;
}

.catalogue-payment-control-wide {
	flex-basis: 100%;
}

.catalogue-payment-control label {
	display: block;
	font-size: 12px;
	font-weight: normal;
	margin: 0 0 2px;
	opacity: 0.75;
}

/* The figure is what the visitor came for; the rest is the small print around it. Tabular so it does not jitter as it changes. */

.catalogue-payment-amount {
	font-size: 1.6em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.catalogue-payment-suffix {
	font-size: 0.55em;
	font-weight: normal;
	opacity: 0.75;
}

.catalogue-payment-term-label {
	margin-bottom: 6px;
	opacity: 0.8;
}

.catalogue-payment-line {
	font-size: 0.9em;
	padding: 2px 0;
}

.catalogue-payment-note {
	font-size: 0.8em;
	margin-top: 6px;
	opacity: 0.75;
}

/* Cash purchase | Financing
   Two big targets side by side. The chosen one is marked with the text colour like the trim cards, so it
   reads on any theme. */

.catalogue-payment-modes {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.catalogue-payment-mode {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 7px 10px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	font-weight: normal;
	text-align: center;
	cursor: pointer;
}

.catalogue-payment-mode:hover {
	background: rgba(0, 0, 0, 0.04);
}

.catalogue-payment-mode:has(input:checked) {
	border-color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
	font-weight: 700;
}

.catalogue-payment-mode input {
	margin: 0;
}