/**
 * Spots marketing site — quote modal layer
 * css/quote-modal.css
 *
 * Loads AFTER css/main.css and consumes the tokens declared in
 * css/variables-s.css. Styles the #cost-Modal quote flow on getquote.php and
 * the landing pages that share it (homepage, coldchain, courier-service,
 * lorry-transport, getquote-landing-*).
 *
 * Ported from the shipper app's css/booking-shared.css (sections 3, 6, 9 and
 * 10) so a cargo tile, a dimension field and a carrier rate row read the same
 * on the marketing site as they do inside the booking flow. The .book-* class
 * names are deliberately identical to that file: a fix made in one place ports
 * to the other verbatim. Two adaptations were needed —
 *
 *   Bootstrap 4 -> 5   .input-group-append is gone, data-toggle is data-bs-*,
 *                      .custom-select is .form-select, .text-right is .text-end
 *   Font Awesome -> bootstrap-icons   fa-solid fa-* becomes bi bi-*
 *
 * The type scale is literal rather than tokenised: variables-s.css declares no
 * font-size or font-weight scale (the shipper app's variables-blue-red.css
 * does), and the values here come straight off the design. Colour, spacing,
 * radius and transition all use tokens, which do exist.
 *
 * Scoping rule
 * ------------
 * Everything is scoped under #cost-Modal. The fragments that fill it are echoed
 * by action-landing/cargo_action.php and cost_display(), which are shared by 14
 * pages — scoping to the modal is what keeps these rules off the rest of them.
 *
 * Contents:
 *   1. Shell          (.modal-content, .qm-head, .qm-crumbs)
 *   2. Step lede      (.qm-lede)
 *   3. Cargo tiles    (.book-prod)
 *   4. Chosen cargo   (.book-item-head)
 *   5. Fields         (.qm-details, .book-grid, .book-field)
 *   6. Chargeable     (.qm-chargeable)
 *   7. Loading        (.book-wait)
 *   8. Footer         (.qm-foot)
 *   9. Rates summary  (.qm-summary, .qm-rates-head)
 *  10. Carrier price  (.book-rate)
 *  11. Account band   (.qm-band)
 *  12. Responsive
 */


/* ========== 1. Shell ========== */

#cost-Modal .modal-content {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 48px rgba(11, 21, 51, 0.14);
	overflow: hidden;
}

#cost-Modal .modal-header {
	align-items: center;
	gap: var(--space-5);
	padding: 18px 28px;
	border-bottom: 1px solid var(--border);
}

/* The signature dot — one per modal, never repeated inside it */
#cost-Modal .qm-dot {
	display: block;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--spots-red);
}

#cost-Modal .modal-title {
	margin: 0;
	margin-right: auto;
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--spots-blue);
}

/*-- Crumbs --
   State is written by qmStep() in js/costgen_script.js, never by the markup:
   the panes are swapped by the existing .prod-btn / #getQuotes handlers and
   the crumbs only report which one is showing. */
#cost-Modal .qm-crumbs {
	display: flex;
	align-items: center;
	gap: 14px;
}

#cost-Modal .qm-crumb {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fog);
	transition: color var(--transition-fast);
}

#cost-Modal .qm-crumb.is-done {
	color: var(--slate);
}

#cost-Modal .qm-crumb.is-current {
	color: var(--spots-blue);
}

#cost-Modal .qm-crumb-sep {
	display: block;
	width: 18px;
	height: 1px;
	background: var(--border);
}

#cost-Modal .modal-body {
	padding: 0;
}

/* Steps 1 and 2 carry the body padding; step 3 runs its rows flush to the
   edges so each row can hold its own divider */
#cost-Modal .qm-pad {
	padding: 30px 28px 34px;
}


/* ========== 2. Step lede ========== */

#cost-Modal .qm-lede {
	max-width: 620px;
	margin-bottom: var(--space-6);
}

#cost-Modal .qm-lede h2 {
	margin: 0 0 var(--space-2);
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: var(--ls-display);
	color: var(--spots-blue);
}

#cost-Modal .qm-lede p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: var(--lh-relaxed);
	color: var(--slate);
}


/* ========== 3. Cargo tiles ========== */
/* "What are you shipping?" — action-landing/cargo_action.php echoes one tile
   per product priced on the lane. Buttons, not links: picking one swaps the
   state of the item, it does not navigate. */

#cost-Modal .book-prod {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
	gap: 14px;
}

#cost-Modal .book-prod-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: #fff;
	text-align: left;
	transition: var(--transition-fast);
}

#cost-Modal button.book-prod-tile:hover,
#cost-Modal button.book-prod-tile:focus {
	border-color: var(--spots-blue);
	box-shadow: inset 0 0 0 1px var(--spots-blue);
	outline: none;
}

/* Product photos are not square — cover the square rather than distort. The
   fallback icon inherits the same tinted plate. */
#cost-Modal .book-prod-thumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: var(--blue-50);
	font-size: 21px;
	color: var(--spots-blue);
	overflow: hidden;
}

#cost-Modal .book-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cold chain is the one service allowed to leave the blue/red palette */
#cost-Modal .book-prod-thumb--cold {
	background: rgba(14, 165, 201, 0.12);
	color: var(--cold-ice);
}

#cost-Modal .book-prod-body {
	display: block;
	width: 100%;
	min-width: 0;
}

#cost-Modal .book-prod-name {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: var(--lh-snug);
	color: var(--spots-blue);
}

#cost-Modal .book-prod-desc {
	display: block;
	margin-top: 6px;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.55;
	color: var(--slate);
}

/* The full-truckload tile carries a size select instead of a single product,
   so it is a plain div and must not react to hover like a button does */
#cost-Modal .book-prod-tile--select .form-select {
	width: 100%;
	margin-top: 10px;
	padding: 9px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--blue-ink);
}

#cost-Modal .qm-tile-badge {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--spots-blue);
	background: var(--blue-50);
	padding: 3px 8px;
	border-radius: var(--radius-sm);
}


/* ========== 4. Chosen cargo ========== */
/* The strip at the top of step 2. cargo_action.php type=product fills
   #prodChoice_<i> with the .book-item-media block for the picked product. */

#cost-Modal .book-item-head {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-4) 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface-alt);
}

#cost-Modal .book-item-media {
	display: flex;
	flex: 1 1 auto;
	gap: var(--space-3);
	min-width: 0;
}

#cost-Modal .book-item-thumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: #fff;
	font-size: 19px;
	color: var(--spots-blue);
	overflow: hidden;
}

#cost-Modal .book-item-title {
	margin: 0 0 3px;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: var(--lh-snug);
	color: var(--spots-blue);
}

#cost-Modal .book-item-desc {
	margin: 0;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.55;
	color: var(--slate);
}

/*-- Ghost button --
   "Change" here, "Edit cargo" on the rates summary. Same affordance, so one
   ruleset rather than two. */
#cost-Modal .qm-ghost {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: none;
	padding: 8px 15px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: none;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--spots-blue);
	cursor: pointer;
	transition: var(--transition-base);
}

#cost-Modal .qm-ghost:hover,
#cost-Modal .qm-ghost:focus {
	border-color: var(--spots-blue);
	background: #fff;
	outline: none;
}


/* ========== 5. Fields ========== */

#cost-Modal .qm-details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 236px;
	gap: var(--space-6);
	align-items: start;
	margin-top: var(--space-6);
}

/* The uppercase caption over each column of step 2 */
#cost-Modal .qm-eyebrow {
	margin-bottom: 14px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--slate);
}

#cost-Modal .book-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}

#cost-Modal .book-grid--compact {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The second dimension row, under the first */
#cost-Modal .qm-row-gap {
	margin-top: 14px;
}

/*-- Get quote --
   The wizard shell carries its own CTA in the footer, so the one inside the
   fragment is redundant there. The 13 landing pages that inject the same
   fragment into their own modal have no footer and still need it, which is why
   it is hidden here rather than dropped. jQuery .fadeIn() writes an inline
   display, so this has to outrank it. */
#cost-Modal.qm-wizard #quote_div {
	display: none !important;
}

#cost-Modal .book-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

#cost-Modal .book-field > label {
	margin: 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--blue-ink);
}

#cost-Modal .book-field .form-control,
#cost-Modal .book-field .form-select {
	height: auto;
	padding: 11px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--blue-ink);
	background-color: #fff;
}

#cost-Modal .book-field .form-control:focus,
#cost-Modal .book-field .form-select:focus {
	border-color: var(--spots-blue);
	box-shadow: none;
	outline: none;
}

/* Bootstrap 5 has no .input-group-append — the addon is a sibling of the
   input and the radii are split across the pair */
#cost-Modal .book-field .input-group .form-control {
	border-right: none;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
}

#cost-Modal .book-field .input-group-text {
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	background: var(--surface-alt);
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--slate);
}

/* "Others" reveals a free-text unit under the handling-unit select */
#cost-Modal .book-unit-other {
	margin: 0;
}

#cost-Modal .book-unit-other:not(:empty) {
	margin-top: var(--space-2);
}

#cost-Modal .book-unit-other .form-control {
	padding: 8px 10px;
	font-size: 13px;
}

/* Validation and hints that belong to the row, not to one field */
#cost-Modal .book-grid-note {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-4) 0 0;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--slate);
}

#cost-Modal .book-grid-note i {
	color: var(--spots-blue);
}


/* ========== 6. Chargeable ========== */
/* The rail beside the fields. volWeight() writes #tVolume_<i> and #tWeight_<i>
   straight into it — the ids are the contract, this only moves them. */

#cost-Modal .qm-chargeable {
	padding: 20px;
	border-radius: var(--radius-md);
	background: var(--blue-50);
}

#cost-Modal .qm-chargeable .qm-eyebrow {
	margin-bottom: var(--space-4);
	color: var(--spots-blue);
}

#cost-Modal .qm-charge-term {
	margin: 0 0 3px;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--slate);
}

#cost-Modal .qm-charge-value {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: var(--ls-display);
	line-height: var(--lh-tight);
	color: var(--spots-blue);
}

/* Holds its height before volWeight() has run, so the rail does not jump the
   first time a dimension is typed */
#cost-Modal .qm-charge-value:empty::before {
	content: "\2014";
	color: var(--blue-200);
}

#cost-Modal .qm-charge-rule {
	height: 1px;
	margin: var(--space-4) 0;
	background: var(--border);
}

#cost-Modal .qm-charge-foot {
	margin: 0;
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 1.55;
	color: var(--slate);
}


/* ========== 7. Loading ========== */

#cost-Modal .book-wait {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5) 28px;
}

#cost-Modal .book-wait p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--spots-blue);
}

#cost-Modal .book-wait .spinner-border {
	color: var(--spots-blue);
}


/* ========== 8. Footer ========== */

#cost-Modal .qm-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding: 22px 28px;
	border-top: 1px solid var(--border);
}

#cost-Modal .qm-foot-note {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--slate);
}

#cost-Modal .qm-foot-note i {
	color: var(--spots-blue);
}

/* The one accent button in the modal */
#cost-Modal .qm-cta {
	padding: 13px 30px;
	border: none;
	border-radius: var(--radius-md);
	background: var(--spots-red);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: opacity var(--transition-base);
}

#cost-Modal .qm-cta:hover,
#cost-Modal .qm-cta:focus {
	opacity: 0.88;
	color: #fff;
	outline: none;
}

#cost-Modal .qm-cta:disabled {
	opacity: 0.45;
	cursor: default;
}


/* ========== 9. Rates summary ========== */

#cost-Modal .qm-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding: 20px 28px;
	background: var(--surface-alt);
	border-bottom: 1px solid var(--border);
}

#cost-Modal .qm-summary-facts {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

#cost-Modal .qm-fact {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--blue-ink);
	white-space: nowrap;
}

#cost-Modal .qm-fact i {
	color: var(--spots-blue);
}

#cost-Modal .qm-summary .qm-ghost {
	background: #fff;
}

#cost-Modal .qm-rates-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	padding: 24px 28px 8px;
}

#cost-Modal .qm-rates-head h2 {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: var(--ls-display);
	color: var(--spots-blue);
}

#cost-Modal .qm-rates-head span {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--slate);
}

/* cost_display() writes the rows straight into #price */
#cost-Modal #price {
	display: block;
	padding: var(--space-4) 28px var(--space-6);
}

/* The no-service and upstream-timeout strings land in the same node */
#cost-Modal .qm-price-message {
	padding: var(--space-6) 0;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: var(--lh-relaxed);
	color: var(--slate);
	text-align: center;
}


/* ========== 10. Carrier price ========== */
/* cost_display() in action-landing/functions/functions.php writes one
   .book-rate per carrier, cheapest first. Deliberately no highlighted row: the
   price column already carries the ordering, and singling one carrier out reads
   as a recommendation the rate engine is not making. */

#cost-Modal .book-rate {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) 232px;
	gap: var(--space-6);
	align-items: start;
	padding: 20px 22px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: #fff;
}

#cost-Modal .book-rate + .book-rate {
	margin-top: var(--space-3);
}

#cost-Modal .book-rate-brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

/* Carrier marks are wildly different shapes — contain rather than cover, so a
   wide wordmark is not cropped to its middle */
#cost-Modal .book-rate-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 4px;
	border-radius: var(--radius-md);
	background: var(--blue-50);
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 700;
	color: var(--spots-blue);
	overflow: hidden;
}

#cost-Modal .book-rate-logo .book-thumb-img {
	object-fit: contain;
}

#cost-Modal .book-rate-name {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--blue-ink);
}

#cost-Modal .book-rate-mode {
	margin: 0;
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--fog);
}

#cost-Modal .book-rate-body {
	min-width: 0;
}

/*-- Terms --
   Liability, lead time and service charges, one line each. The legacy markup
   painted these green, which read as reassurance on what is mostly a liability
   disclaimer. */
#cost-Modal .book-rate-terms {
	margin: 0;
	padding: 0;
	list-style: none;
}

#cost-Modal .book-rate-terms li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: var(--lh-normal);
	color: var(--slate);
}

#cost-Modal .book-rate-terms li + li {
	margin-top: 6px;
}

#cost-Modal .book-rate-terms li i {
	flex: none;
	margin-top: 3px;
	font-size: 14px;
	color: var(--fog);
}

/* Lead time is the one term a shipper actually decides on */
#cost-Modal .book-rate-terms li.is-lead {
	color: var(--blue-ink);
}

#cost-Modal .book-rate-terms li.is-lead i {
	color: var(--spots-blue);
}

#cost-Modal .book-rate-toggle {
	margin-top: var(--space-3);
	padding: 0;
	border: none;
	background: none;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--spots-blue);
	cursor: pointer;
}

#cost-Modal .book-rate-toggle i {
	font-size: 10px;
	transition: transform var(--transition-fast);
}

#cost-Modal .book-rate-toggle[aria-expanded="true"] i {
	transform: rotate(180deg);
}

#cost-Modal .book-rate-detail {
	margin-top: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface-alt);
}

#cost-Modal .book-rate-detail p {
	margin: 0 0 var(--space-2);
	font-family: var(--font-body);
	font-size: 12px;
	line-height: var(--lh-normal);
	color: var(--slate);
}

#cost-Modal .book-rate-minimum {
	font-weight: 600;
	color: var(--blue-ink);
}

#cost-Modal .book-rate-lines {
	margin: 0 0 var(--space-3);
	padding-left: 1.1rem;
	font-family: var(--font-body);
	font-size: 12px;
	line-height: var(--lh-normal);
	color: var(--slate);
}

#cost-Modal .book-rate-table {
	width: 100%;
	margin: 0;
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--blue-ink);
}

#cost-Modal .book-rate-table th {
	padding: 0 0 6px;
	border: 0;
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--slate);
}

#cost-Modal .book-rate-table td {
	padding: 6px 0;
	border-top: 1px solid var(--border);
	vertical-align: top;
}

#cost-Modal .book-rate-table td:last-child,
#cost-Modal .book-rate-table th:last-child {
	text-align: right;
	white-space: nowrap;
}

/*-- Price and CTA --*/
#cost-Modal .book-rate-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	text-align: right;
}

#cost-Modal .book-price {
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: var(--ls-display);
	line-height: 1;
	color: var(--spots-blue);
}

/* Freight / documentation split, where customs charges apply */
#cost-Modal .book-rate-breakdown {
	width: 100%;
	margin: 0;
}

#cost-Modal .book-rate-breakdown > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
}

#cost-Modal .book-rate-breakdown dt {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--slate);
}

#cost-Modal .book-rate-breakdown dd {
	margin: 0;
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--blue-ink);
}

/* Every row's CTA is the outline variant — see the section note on why no row
   is filled in */
#cost-Modal .book-rate .book {
	padding: 11px 22px;
	border: 1px solid var(--spots-blue);
	border-radius: var(--radius-md);
	background: #fff;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--spots-blue);
	cursor: pointer;
	transition: var(--transition-base);
}

#cost-Modal .book-rate .book:hover,
#cost-Modal .book-rate .book:focus {
	background: var(--blue-50);
	outline: none;
}

#cost-Modal .book-rate-help {
	margin: 0;
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--slate);
}

#cost-Modal .book-rate-help i {
	color: var(--on-time-green);
}

/* Inherits the global red anchor colour otherwise, which puts an accent-red
   link in every row alongside the one CTA meant to carry it */
#cost-Modal .book-rate-help a {
	font-weight: 600;
	color: var(--spots-blue);
	text-decoration: none;
}

#cost-Modal .book-rate-help a:hover {
	color: var(--blue-500);
}


/* ========== 11. Account band ========== */

#cost-Modal .qm-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding: 20px 28px;
	background: var(--blue-ink);
}

#cost-Modal .qm-band-title {
	margin: 0 0 3px;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

#cost-Modal .qm-band-sub {
	margin: 0;
	font-family: var(--font-body);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.72);
}

#cost-Modal .qm-band-actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}

#cost-Modal .qm-band-ghost {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 11px 18px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: border-color var(--transition-base);
}

#cost-Modal .qm-band-ghost:hover {
	border-color: #fff;
	color: #fff;
}

#cost-Modal .qm-band-solid {
	padding: 12px 22px;
	border-radius: var(--radius-md);
	background: #fff;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--spots-blue);
	text-decoration: none;
}

#cost-Modal .qm-band-solid:hover {
	color: var(--blue-500);
}


/* ========== 12. Responsive ========== */

@media (max-width: 991px) {

	/* The crumbs duplicate what the lede already says, and they are the first
	   thing to cost the header its single line */
	#cost-Modal .qm-crumbs {
		display: none;
	}

	#cost-Modal .book-rate {
		grid-template-columns: 150px minmax(0, 1fr);
	}

	#cost-Modal .book-rate-aside {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: wrap;
		padding-top: var(--space-4);
		border-top: 1px solid var(--border);
	}

	#cost-Modal .book-rate-breakdown {
		width: auto;
	}
}

@media (max-width: 860px) {

	#cost-Modal .qm-details {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 575px) {

	#cost-Modal .modal-header,
	#cost-Modal .qm-summary,
	#cost-Modal .qm-rates-head,
	#cost-Modal .qm-foot,
	#cost-Modal .qm-band,
	#cost-Modal .book-wait {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}

	#cost-Modal .qm-pad {
		padding: var(--space-5) var(--space-4) var(--space-6);
	}

	#cost-Modal #price {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}

	#cost-Modal .book-grid--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#cost-Modal .book-rate {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4);
	}

	#cost-Modal .qm-lede h2 {
		font-size: 22px;
	}

	#cost-Modal .qm-foot {
		gap: var(--space-3);
	}

	#cost-Modal .qm-cta {
		width: 100%;
	}
}