/*
 * Font note: DM Sans was the intended brand typeface. The Google Fonts @import
 * that previously loaded it was removed because the Content-Security-Policy in
 * Program.cs restricts style-src and font-src to 'self', which blocked the
 * external request at the browser level — causing fonts to silently fall back
 * anyway while also generating CSP violations in the console.
 *
 * To restore DM Sans without relaxing the CSP, self-host the woff2 files:
 *   1. Download the subset from https://fonts.google.com/specimen/DM+Sans
 *      (Axes: ital 0–1, opsz 9–40, wght 400–700; format: woff2)
 *   2. Place the files in wwwroot/fonts/
 *   3. Replace this comment block with @font-face declarations pointing to
 *      ~/fonts/dm-sans-*.woff2
 * Until then the --brand-font-* variables below fall back to system-ui, which
 * renders as San Francisco (macOS/iOS), Segoe UI (Windows), or Roboto (Android)
 * — all high-quality choices that satisfy the strict CSP as-is.
 */

/*
 * Brand CSS variables are defined in brand-tokens.css, which _LayoutLanding.cshtml
 * loads BEFORE this file.  The duplicate :root block that previously appeared here
 * has been removed — it shadowed brand-tokens.css and would have silently overridden
 * any future token changes made in the canonical file.
 *
 * All var(--brand-*) references below resolve against brand-tokens.css at runtime.
 */

.valet-landing-body {
  font-family: var(--brand-font-body);
  color: var(--brand-text);
  background: #fff;
  margin: 0;
}

.valet-landing-body h1,
.valet-landing-body h2,
.valet-landing-body h3,
.valet-landing-body .display-5,
.valet-landing-body .display-6 {
  font-family: var(--brand-font-heading);
  font-weight: 600;
  color: var(--brand-text);
}

/*
 * Headings inside a dark section defer to that section's own colour.
 *
 * The rule above names the element directly, which beats the light colour
 * .valet-hero / .valet-cta / .valet-footer pass down by inheritance -- inherited
 * values lose to any rule that matches the element. That painted the hero h1 in
 * body ink (#1a2e2a) on #134a42: a contrast ratio of 1.42:1 against the 3:1 that
 * large text needs, i.e. near-invisible.
 *
 * Fixing it here rather than with .text-white at each call site means a heading
 * added to a dark section is correct by default. Anything that sets its own
 * colour on a dark background needs to be listed here.
 */
.valet-landing-body .valet-hero h1,
.valet-landing-body .valet-hero h2,
.valet-landing-body .valet-hero h3,
.valet-landing-body .valet-hero .display-5,
.valet-landing-body .valet-hero .display-6,
.valet-landing-body .valet-cta h1,
.valet-landing-body .valet-cta h2,
.valet-landing-body .valet-cta h3,
.valet-landing-body .valet-cta .display-5,
.valet-landing-body .valet-cta .display-6,
.valet-landing-body .valet-footer h1,
.valet-landing-body .valet-footer h2,
.valet-landing-body .valet-footer h3 {
  color: inherit;
}

.valet-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  color: #fff;
  background-color: var(--brand-primary-dark);
  background-image: linear-gradient(var(--brand-hero-overlay), var(--brand-hero-overlay)),
    radial-gradient(circle at 20% 20%, rgba(244, 185, 66, 0.15), transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(27, 107, 92, 0.35), transparent 50%);
}

.valet-hero .lead {
  color: rgba(255, 255, 255, 0.92);
  max-width: 36rem;
}

.valet-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.valet-section-alt {
  background: var(--brand-surface);
}

/*
 * Deliberately does NOT set height. A blanket height:100% here silently breaks
 * any column holding more than one card: the column gets a definite height from
 * the flex row, every card then resolves 100% against it, and three stacked
 * cards each balloon to the full column height -- which is what pushed the
 * estimator's "2. Optional services" and "3. Where should we send it?" a
 * thousand pixels below section 1.
 *
 * Cards that need to match a sibling column's height opt in with Bootstrap's
 * .h-100 utility at the point of use (the landing page's how-it-works trio and
 * the two panels on the customer quote page). That keeps equal-height a
 * property of the layout that wants it rather than of the component.
 */
.valet-card {
  border-radius: var(--brand-radius);
  border: 1px solid rgba(26, 46, 42, 0.08);
  padding: 1.5rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(19, 74, 66, 0.06);
}

.valet-icon-pill {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 107, 92, 0.12);
  color: var(--brand-primary);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.valet-cta {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: #fff;
  border-radius: var(--brand-radius);
  padding: 3rem 2rem;
}

.valet-cta .form-control,
.valet-cta .form-select {
  border-radius: 8px;
  border: none;
}

.valet-cta .btn-primary {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--brand-text);
  font-weight: 600;
  border-radius: 8px;
}

.valet-cta .btn-primary:hover {
  filter: brightness(1.05);
  color: var(--brand-text);
}

.valet-footer {
  background: var(--brand-text);
  color: rgba(255, 255, 255, 0.85);
  padding: 2rem 0;
  font-size: 0.9rem;
}

.valet-footer a {
  color: var(--brand-secondary);
}

.valet-navbar-simple {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1rem 0;
}

.valet-brand-mark {
  font-family: var(--brand-font-heading);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
}

.valet-brand-mark:hover {
  color: #fff;
  opacity: 0.9;
}

.valet-faq .accordion-button:not(.collapsed) {
  background-color: rgba(27, 107, 92, 0.1);
  color: var(--brand-primary-dark);
}

.valet-faq .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(27, 107, 92, 0.2);
}

.text-brand-muted {
  color: var(--brand-muted) !important;
}

/*
 * CTA section subtitle text — slightly dimmed white that still passes WCAG AA.
 *
 * Bootstrap's text-white-50 (rgba(255,255,255,0.5)) renders at ≈2.64:1 on the
 * brand-primary green (#1b6b5c), well below the 4.5:1 minimum for normal text.
 * At 85% opacity the effective contrast is ≈4.59:1 on brand-primary and ≈7.16:1
 * on brand-primary-dark — both pass WCAG AA.  Used for the subtitle paragraph
 * inside .valet-cta so it remains visually subordinate to the heading while
 * meeting the accessibility floor.
 */
.valet-cta-subtitle {
  color: rgba(255, 255, 255, 0.85);
}

/*
 * Honeypot trap field — hides the input from human users while keeping it
 * reachable by bots that scan the rendered HTML.
 *
 * NOT using display:none or visibility:hidden because some bots specifically
 * skip those; an off-screen element looks legitimate to automated scanners.
 * position:absolute + large negative left keeps the element in the DOM flow
 * without occupying any visual space.  tabindex="-1" on the <input> element
 * itself is the primary guard for keyboard users.
 */
.valet-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/*
 * Eyebrow label -- small uppercase accent line above the hero H1.
 * Uses brand-secondary (amber #f4b942) for contrast against the hero's
 * dark green overlay (#134a42): contrast ratio ~10.8:1, well above AAA.
 * letter-spacing matches the section-title convention already used in
 * portal.css (.portal-sidebar-title).
 */
.valet-eyebrow {
  color: var(--brand-secondary);
  letter-spacing: 0.1em;
}

/*
 * Max-width container scoped to the brand layout grid.
 * --brand-max-width (1100px) is the canonical content boundary shared
 * across all landing sections so columns align at the same edge regardless
 * of section background (white vs. valet-section-alt).
 */
.valet-brand-container {
  max-width: var(--brand-max-width);
  margin-left: auto;
  margin-right: auto;
}

/*
 * Narrow container -- used for the FAQ accordion and the inquiry CTA card
 * where a tighter column improves readability of longer prose blocks.
 * 720px keeps lines under ~90 characters at 16px base font size.
 */
.valet-narrow-container {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/*
 * Section intro paragraph -- constrains the subtitle below an h2 to a
 * comfortable reading width without affecting surrounding column layout.
 * 640px yields ~70-80 characters per line at 16px, the typographic sweet spot.
 */
.valet-section-intro {
  max-width: 640px;
}

/* ==========================================================================
 * Benefits panels
 * ==========================================================================
 *
 * The two audience columns are cards rather than bare prose, matching the React
 * landing page. Each panel carries a 3px accent strip — green for the
 * operations-facing story, amber for the resident-facing one — which is what
 * ties the section into the brand palette at a glance and bookends the section
 * with the same two colours used elsewhere on the page.
 *
 * The strip sits on the BOTTOM edge deliberately: on the top edge it would
 * overdraw the panel's 1px border, which reads as a smudged corner at the 12px
 * radius. On the bottom edge it fills cleanly inside the clip.
 *
 * --valet-benefit-accent / --valet-benefit-accent-strong are re-declared on the
 * resident modifier below, so every accent in a panel (strip, icon fill, icon
 * glyph) follows from one variable instead of being repeated per rule.
 *
 * overflow:hidden keeps the strip inside the rounded corners. Padding here is
 * deliberately tighter than .valet-card so the 12px radius and the strip read as
 * one object. These rules are scoped under .valet-benefit-panel, so the base
 * .valet-card component is unaffected.
 *
 * Equal height on desktop: the panel deliberately does NOT set align-self. This
 * block sits on the plain .valet-card baseline, where the note above .valet-card
 * warns against a blanket height:100% — a column holding several cards would
 * resolve every card against the column height. That hazard does not apply here:
 * each panel is the sole child of its own .col-lg-6, so one panel per column
 * means height:100% is unambiguous. The rules below opt in only where the two
 * panels are actually side by side.
 */
.valet-benefit-panel {
  --valet-benefit-accent:        rgba(27, 107, 92, 0.12);
  --valet-benefit-accent-strong: var(--brand-primary);

  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(26, 46, 42, 0.08);
  border-radius: var(--brand-radius);
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 8px 24px rgba(19, 74, 66, 0.06);
}

/*
 * Equal-height panels, desktop only.
 *
 * Below the lg breakpoint the columns stack, and forcing equal height there would
 * pad whichever panel is shorter with a band of dead white — so the default
 * (natural content height) is the correct mobile behaviour.
 *
 * At lg and up the two .col-lg-6 boxes sit in one flex row. .row's default
 * align-items:stretch already makes the COLUMNS equal height; display:flex turns
 * each column into a flex container so its single panel stretches to fill, and
 * height:100% covers the marker block's own layout. The panels therefore match
 * each other without touching the shared .valet-card component.
 */
@media (min-width: 992px) {
  .valet-benefit-panel {
    height: 100%;
  }

  .valet-section[data-analytics-section='benefits'] .col-lg-6 {
    display: flex;
    flex-direction: column;
  }
}

.valet-benefit-panel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--valet-benefit-accent-strong);
}

.valet-benefit-panel-resident {
  --valet-benefit-accent:        rgba(244, 185, 66, 0.18);
  /*
   * --brand-secondary (#f4b942) is the resident-panel accent. It is NOT used as
   * text: the amber only fills shapes, and the glyph on top is --brand-text,
   * which is 8.64:1 on this fill. See the warning in brand-tokens.css.
   */
  --valet-benefit-accent-strong: var(--brand-secondary);
}

.valet-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.valet-benefit-item:last-child {
  margin-bottom: 0;
}

.valet-benefit-icon {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--valet-benefit-accent);
  /* --brand-primary (#1b6b5c) on rgba(27,107,92,0.12) over #fff ≈ 4.7:1 ✓ AA */
  color: var(--valet-benefit-accent-strong);
  /* Optical alignment: nudges the circle onto the first line's cap height. */
  margin-top: 0.1rem;
}

/*
 * The marker SVG inherits the panel accent via currentColor: stroke for the
 * check, fill for the sparkle. Both are set on the element in the view, so this
 * rule only has to guarantee the box does not collapse or capture pointer events.
 */
.valet-benefit-svg {
  pointer-events: none;
}

/* ==========================================================================
 * Service area
 * ==========================================================================
 *
 * Accent rule below the section heading — repeats the hero's amber-to-green
 * gradient so consecutive sections read as one brand system. Purely decorative
 * (rendered via ::after, so it is not in the accessibility tree at all).
 *
 * The heading is inset from the top by the rule's own box (4px + 0.75rem), with
 * margin-bottom restored for the paragraph beneath.
 */
.valet-service-area h2 {
  position: relative;
  padding-top: 1.5rem;
}

.valet-service-area h2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-secondary) 0%, var(--brand-primary) 100%);
}

/*
 * Footprint pills.
 *
 * The amber is kept here rather than the React build's original soft green wash
 * because this section already alternates to --brand-surface: the solid amber
 * reads as a deliberate accent against it, and --brand-text (#1a2e2a) on
 * --brand-secondary (#f4b942) is 7.63:1 — comfortably AAA.
 *
 * That green wash was 10% --brand-primary over #f6f8f7, with #1b6b5c text on
 * top, which measures only ≈4.05:1 and fails WCAG 1.4.3 for normal text. The
 * React pills were corrected to match this amber treatment rather than this
 * rule being copied from them.
 *
 * Sized as substantial chips rather than Bootstrap's default .badge pill (0.75em
 * text at 0.35em/0.65em padding — small and easily scrolled past).
 *
 * NOTE ON THE MARKUP: these pills deliberately no longer carry Bootstrap's
 * .badge / .bg-secondary / .fs-6 / .fw-normal / .m-1 utilities. Every Bootstrap
 * utility in 5.x is emitted with !important (verified in the shipped
 * bootstrap.min.css), so those classes would have beaten these declarations no
 * matter how specific the selector — .fs-6 would have pinned the font size and
 * .m-1 the margin. Styling the pill wholly in one place is both simpler and the
 * only way to keep it !important-free, which is the convention this file
 * follows. Only .list-unstyled is kept on the <ul>, since it removes the list
 * markers or padding that would otherwise have to be restated here.
 */
.valet-area-badge {
  display: inline-block;
  min-width: 7rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--brand-secondary);
  color: var(--brand-text);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  border: 1px solid rgba(26, 46, 42, 0.08);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(19, 74, 66, 0.08);
}

/*
 * The list is not centred by default, so it is centred here to match the heading
 * and intro copy above it. Flex lets the pills wrap onto as many rows as the
 * viewport needs while staying centred as a group.
 */
.valet-area-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 2rem;
}

/*
 * Chip gutters. Spacing sits on the <li> rather than on the pill itself so that
 * wrapped rows do not end up with a doubled gap between them.
 */
.valet-area-list li {
  margin: 0.375rem;
}

/*
 * Region labels ("In Austin" / "Surrounding cities") carry Bootstrap's .mb-2,
 * which reads as cramped directly above a row of tall pills.
 */
.valet-service-area h3.h6 {
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}

/*
 * The intro paragraph sits directly above the pills, so its gap is closed up a
 * little — the pills should read as the section's visual anchor rather than as
 * an afterthought below the copy.
 */
.valet-service-area-intro {
  margin-bottom: 1.5rem;
}

/*
 * Small-viewport pill sizing.
 *
 * The desktop 7rem minimum is wider than two pills plus their gutters fit on a
 * 360px screen, so leaving it in place would drop most cities onto their own
 * line and waste the space the larger treatment was meant to use. Narrowing the
 * minimum and the horizontal padding lets two sit per row without shrinking the
 * text below a comfortable size.
 */
@media (max-width: 575.98px) {
  .valet-area-badge {
    min-width: 6rem;
    padding: 0.625rem 1rem;
    font-size: 0.95rem;
  }

  .valet-area-list li {
    margin: 0.25rem;
  }
}

/*
 * The section CTA is Bootstrap's .btn-outline-primary, which brand-tokens.css
 * already overrides to brand green with a filled hover state (5.96:1 both ways).
 * No additional rule is needed — and none should be added — because a
 * .valet-service-area-cta duplicate would only drift from that token override.
 */

/*
 * Thank-you confirmation page layout.
 * .valet-thankyou gives the section a generous minimum height so the short
 * confirmation message does not sit in a cramped sliver above the footer.
 * .valet-thankyou-content stretches to full column width so text-center
 * alignment applies uniformly to all child elements.
 */
.valet-thankyou {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.valet-thankyou-content {
  width: 100%;
}

/*
 * Required-field asterisk inside inquiry form labels.
 *
 * The subtitle text reads "Fields marked with * are required". This class
 * makes that statement true by rendering the asterisk in brand-secondary
 * (amber #f4b942) so it stands out from the white label text without
 * relying on color alone (the <abbr title="required"> provides a tooltip
 * for users who cannot distinguish colors).
 *
 * Contrast on the CTA gradient background:
 *   #f4b942 on --brand-primary (#1b6b5c) → 5.69:1  ✓ AA pass
 *   #f4b942 on --brand-primary-dark (#134a42) → 9.18:1  ✓ AAA pass
 *
 * text-decoration: none removes the default dotted underline that browsers
 * apply to <abbr> elements; font-style: normal cancels any italic inheritance.
 * The <abbr title="required"> tooltip conveys meaning to assistive technology
 * independently of color.
 */
.valet-required-asterisk {
  color: var(--brand-secondary);
  text-decoration: none;
  font-style: normal;
}

/* ==========================================================================
 * Public / auth page shell — used by _Layout.cshtml
 * ==========================================================================
 *
 * _Layout serves the pages that sit between the landing page and the portal:
 * the six Account views (Login, Register, ForgotPassword,
 * ForgotPasswordConfirmation, ResetPassword, AccessDenied) plus Privacy and
 * Error.  These previously rendered on the stock `dotnet new mvc` scaffold —
 * white Bootstrap navbar, template footer, no brand typography — which made
 * the sign-in page look like a different product from both the landing page
 * and the portal it leads into.
 *
 * The classes below give _Layout the landing page's visual language while
 * reusing its existing tokens and typography rather than restating them:
 * _Layout puts `valet-landing-body` on <body> for the font stack and heading
 * rules, and adds `valet-app-shell` for the sticky-footer column that the
 * landing page (which ends in a tall CTA) does not need.
 *
 * All styling here is class-based with no inline style="" attributes, because
 * Program.cs sends `style-src 'self'` with no 'unsafe-inline'.
 */

/*
 * Sticky-footer column.  Kept separate from .valet-landing-body so the landing
 * page's own flow is untouched — Home/Index and ThankYou never get this class.
 * Short pages (AccessDenied, ForgotPasswordConfirmation) would otherwise leave
 * the footer floating in the middle of a tall viewport.
 */
.valet-app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.valet-app-shell .valet-page {
  flex: 1 0 auto;
}

.valet-app-shell .valet-footer {
  flex-shrink: 0;
}

/*
 * Solid brand header.
 *
 * Distinct from .valet-navbar-simple, which is position:absolute and overlays
 * the landing hero — that only works over the hero's dark overlay and would be
 * invisible on these light pages.  This variant is a solid bar in
 * --brand-primary-dark, the same surface as the portal topbar
 * (portal.css: --portal-sidebar-bg), so the header reads as one continuous
 * brand element from landing hero -> sign-in -> dashboard.
 *
 * Contrast: #fff on --brand-primary-dark (#134a42) -> 7.91:1  AAA pass
 * (figure from brand-tokens.css).
 */
.valet-topbar {
  background-color: var(--brand-primary-dark);
  padding: 0.75rem 0;
}

/*
 * Header nav links.
 *
 * #cfd9e3 on --brand-primary-dark (#134a42) -> ~7.0:1  AAA pass for normal
 * text.  Reuses the exact value portal.css already uses for .portal-nav-link
 * on the identical background, so the two headers stay in step.
 */
.valet-topbar-link {
  color: #cfd9e3;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
}

.valet-topbar-link:hover,
.valet-topbar-link:focus {
  color: #fff;
}

/*
 * The signed-in user's name in the header — present but visually subordinate
 * to the actionable links beside it.
 *
 * #a8bcc9 on #134a42 -> 5.38:1  AA pass.  Same value as
 * portal.css .portal-topbar-meta, which solves this exact problem; Bootstrap's
 * text-white-50 fails AA here at ~3.78:1.
 */
.valet-topbar-meta {
  color: #a8bcc9;
}

/*
 * Content area.  --brand-surface (rather than white) is what visually separates
 * the card from the page and matches --portal-bg, so the surface tone carries
 * across the sign-in boundary into the portal.
 */
.valet-page {
  background-color: var(--brand-surface);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/*
 * Auth card — the centered panel holding the sign-in and registration forms.
 * Mirrors .valet-card's radius, border and shadow so an auth form reads as the
 * same component as the feature cards on the landing page, just centered and
 * width-capped.
 *
 * 27rem (~432px) fits the single-column forms (Login, ForgotPassword,
 * ResetPassword) at a comfortable measure. Register, which is a two-column
 * grid, opts into .valet-auth-card-wide instead.
 */
.valet-auth-card {
  background: #fff;
  border-radius: var(--brand-radius);
  border: 1px solid rgba(26, 46, 42, 0.08);
  box-shadow: 0 8px 24px rgba(19, 74, 66, 0.06);
  padding: 2rem;
  width: 100%;
  max-width: 27rem;
  margin-left: auto;
  margin-right: auto;
}

/* Wider variant for the Register form's two-column field grid. */
.valet-auth-card-wide {
  max-width: 44rem;
}

/*
 * Prose card for Privacy and Error — same surface treatment as the auth card
 * but sized for long-form reading.  720px matches .valet-narrow-container,
 * keeping lines under ~90 characters at a 16px base.
 */
.valet-content-card {
  background: #fff;
  border-radius: var(--brand-radius);
  border: 1px solid rgba(26, 46, 42, 0.08);
  box-shadow: 0 8px 24px rgba(19, 74, 66, 0.06);
  padding: 2.5rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.valet-content-card h1 {
  font-family: var(--brand-font-heading);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

@media (max-width: 575.98px) {
  .valet-page {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .valet-auth-card,
  .valet-content-card {
    padding: 1.5rem;
  }
}

/* ===========================================================================
 * Quote estimator (/Quote) and customer quote page (/Quote/View/{token}).
 *
 * All rules live here rather than in style="" attributes because the CSP sets
 * style-src 'self' — inline styles are blocked outright.
 * =========================================================================== */

/*
 * Shorter hero for the estimator. The full 72vh .valet-hero is right for the
 * landing page but on a page whose whole point is the form below it, pushing
 * the inputs off the first screen costs conversions.
 */
.valet-hero-compact {
  min-height: auto;
}

/* Clears the fixed brand bar on pages that open straight into content. */
.valet-section-topspace {
  padding-top: 7rem;
}

/*
 * Live estimate panel. Sticky on wide viewports so the figure stays visible while
 * the prospect works down the form; static below the lg breakpoint, where the panel
 * sits under the inputs and sticking it would trap the viewport.
 */
.quote-summary {
  position: sticky;
  top: 1.5rem;
}

@media (max-width: 991.98px) {
  .quote-summary {
    position: static;
  }
}

/*
 * Dimmed while a live estimate is in flight. Kept subtle deliberately — the request
 * usually completes inside 250 ms, and a heavier treatment reads as an error.
 * The transition is suppressed under prefers-reduced-motion below.
 */
.quote-summary-loading {
  opacity: 0.55;
  transition: opacity 0.15s ease-in-out;
}

.quote-summary-figure {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.quote-summary-amount {
  font-family: var(--brand-font-heading);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-primary);
}

.quote-summary-period {
  color: var(--brand-muted);
  font-size: 0.95rem;
}

.quote-summary-note {
  color: var(--brand-muted);
  font-size: 0.875rem;
  margin-top: 0.5rem;
  min-height: 1.25rem; /* reserve the line so the panel doesn't jump when a message appears */
}

/* --- Itemised breakdown --------------------------------------------------- */

.quote-breakdown {
  border-top: 1px solid rgba(26, 46, 42, 0.08);
}

.quote-breakdown-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(26, 46, 42, 0.06);
}

.quote-breakdown-label {
  color: var(--brand-text);
}

.quote-breakdown-amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* keeps the amount column from shuffling as digits change */
}

/* Working shown under the line; spans both columns. */
.quote-breakdown-detail {
  grid-column: 1 / -1;
  color: var(--brand-muted);
  font-size: 0.8125rem;
}

.quote-breakdown-discount .quote-breakdown-amount {
  color: var(--brand-primary);
}

@media (prefers-reduced-motion: reduce) {
  .quote-summary-loading {
    transition: none;
  }
}