/* listing-offer.css - E-Commerce Style Vehicle Listing (DriveHaus Global Theme) */

#listing-offer-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 9999;
  background-color: transparent;
  background-image: 
    radial-gradient(circle at top left, rgba(251, 182, 73, 0.25) 0%, transparent 45%), 
    radial-gradient(circle at bottom right, rgba(26, 55, 123, 0.35) 0%, transparent 45%), 
    rgba(18, 38, 86, 0.35);
  backdrop-filter: blur(12px);
  will-change: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 40px 20px;
  animation: fadeIn 0.3s ease-out;
  font-family: var(--font-body);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.listing-modal {
  --listing-close-size: 2.75rem; /* Function: keeps the listing close button dimensions stable across viewport sizes. */
  --listing-close-top-inset: 18px; /* Function: anchors the close button to the desktop card top edge. */
  --listing-close-right-inset: 18px; /* Function: anchors the close button to the desktop card right edge. */
  --listing-bg: transparent; 
  --listing-surface: transparent; 
  --listing-border: transparent; 
  --listing-accent-soft: rgba(251, 182, 73, 0.16);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: none;
  color: #334155; /* Global text color */
  border-radius: 24px; /* Global card radius */
  width: 100%;
  max-width: 1200px;
  position: relative;
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  backface-visibility: hidden;
  will-change: auto;
}

@keyframes slideUp {
  from { transform: translateY(100vh); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

#listing-offer-root.is-closing {
  animation: fadeOut 0.3s ease-in forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.listing-modal.is-closing {
  animation: slideDown 0.3s cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
  will-change: transform;
}

/* Function: lets desktop sticky sidebar positioning track the viewport instead of being clipped by the modal shell. */
@media (min-width: 901px) {
  .listing-modal {
    overflow: visible; /* Function: allows the desktop contact section to remain sticky while the overlay scrolls. */
  }
}

@keyframes slideDown {
  from { transform: translateY(0); }
  to { transform: translateY(100vh); }
}

/* Close Button */
.listing-close {
  position: absolute;
  top: var(--listing-close-top-inset); /* Function: ties the close button to the active listing-card top anchor. */
  right: var(--listing-close-right-inset); /* Function: ties the close button to the active listing-card right anchor. */
  width: var(--listing-close-size); /* Function: reuses the modal close control size for layout reservations. */
  height: var(--listing-close-size); /* Function: reuses the modal close control size for layout reservations. */
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  z-index: 10;
  transition: background 0.2s ease, color 0.2s ease;
}

.listing-close:hover {
  background: rgba(15, 23, 42, 0.05);
  color: #0f172a;
}

/* Layout Grid */
.listing-summary {
  grid-column: 1 / -1;
  box-sizing: border-box; /* Function: keeps close-button padding inside the listing header width. */
  min-width: 0; /* Function: lets the grid header shrink inside the listing card instead of expanding past it. */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -32px -32px 0; /* Function: lets the header surface span the full desktop modal width. */
  padding: 26px 32px 20px; /* Function: creates a clean premium title band above the gallery and sidebar. */
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}

.listing-main {
  grid-column: 1;
  grid-row: 2;
  min-width: 0; /* Function: lets the mobile commerce scaler use the available column width instead of widening the modal. */
}

.listing-sidebar {
  grid-column: 2;
  grid-row: 2;
}

.listing-summary__copy {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  width: 100%;
  container-type: inline-size;
}

.listing-summary__eyebrow {
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(26, 55, 123, 0.08);
  color: #1a377b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.listing-summary__title {
  font-family: var(--font-display);
  font-size: min(clamp(1.75rem, 3.5vw, 2.75rem), 6cqi);
  font-weight: 800;
  line-height: var(--leading-heading);
  letter-spacing: -0.03em;
  color: #1a377b;
  text-transform: none;
  text-wrap: nowrap;
  white-space: nowrap;
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-summary__title--detailed {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
}

.listing-summary__meta {
  margin: 0;
  font-size: min(clamp(1rem, 1.6vw, 1.25rem), 3cqi);
  font-weight: 500;
  color: rgba(15, 24, 36, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-summary__commerce {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  width: auto;
  justify-content: flex-end;
}

.listing-summary__commerce--desktop {
  margin-right: 1.5rem;
}

.listing-summary__commerce--mobile {
  display: none; /* Hidden on desktop */
}

.listing-summary__price-block {
  display: flex; /* Function: keeps the cash price and estimate stack on the same horizontal row. */
  align-items: stretch; /* Function: gives the price and estimate stack the same vertical box. */
  justify-content: flex-end;
  gap: 0.9rem;
  text-align: right;
}

.listing-summary__price {
  display: flex; /* Function: centers the cash price inside the shared price-row height. */
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  background: linear-gradient(135deg, #1a377b 0%, #274c8c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #1a377b;
}

.listing-summary__price-details {
  display: flex; /* Function: stacks the monthly estimate and fee note inside the price-height box. */
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  gap: 0.22rem;
  min-height: 100%;
  text-align: left;
}

.listing-summary__monthly {
  margin-top: 0;
  color: #1a377b;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.listing-summary__disclaimer {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.2;
  white-space: nowrap;
}

.listing-summary__commerce--overview {
  width: 100%; /* Function: lets overview commerce use the full content width above the section title. */
  justify-content: flex-start;
  margin-bottom: 0.85rem;
}

.listing-summary__commerce--overview .listing-summary__price-block {
  justify-content: flex-start; /* Function: aligns overview pricing with the section content edge. */
  text-align: left;
}

.listing-summary__actions {
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.listing-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: max-content 1fr;
  gap: 0 40px;
  padding: 32px 32px 36px;
}

@media (max-width: 900px) {
  #listing-offer-root {
    padding: 0; /* Function: lets the mobile listing card fill the viewport from the very top edge. */
    justify-content: flex-start; /* Function: anchors the mobile listing card to the top instead of centering it vertically. */
    align-items: flex-end;
  }

  .listing-modal {
    --listing-close-size: 2.25rem; /* Function: sizes the mobile close button to fit within the compact title header. */
    --listing-close-top-inset: 6px; /* Function: keeps the mobile close button inside the white header instead of crossing the gallery edge. */
    --listing-close-right-inset: 12px; /* Function: keeps the mobile close button aligned to the card edge with thumb-friendly spacing. */
    border-radius: 0; /* Function: removes mobile sheet rounding so the listing header spans the full top width. */
    border: none;
    margin-top: auto;
    min-height: 100dvh; /* Function: keeps the mobile listing card filling the visible screen height. */
  }

  .listing-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 16px 12px 112px; /* Function: gives mobile content enough room above the fixed bottom actions. */
    gap: 16px;
  }

  .listing-summary {
    margin: -16px -12px 0; /* Function: keeps the mobile title band flush with the top and side edges. */
    padding: 14px 12px 12px; /* Function: preserves compact mobile header spacing inside the full-width band. */
  }

  .listing-main {
    grid-column: 1;
    grid-row: auto;
    order: 2;
    gap: 16px;
  }

  .listing-sidebar {
    grid-column: 1;
    grid-row: auto;
    order: 4;
  }

  .listing-summary__copy {
    grid-column: 1;
    grid-row: auto;
    order: 1;
    padding: 0 calc(var(--listing-close-size) + var(--listing-close-right-inset) + 0.75rem) 0 0; /* Function: matches the mobile title clearance to the fixed close button anchor. */
    margin-bottom: -8px;
  }

  .listing-summary__title {
    font-size: min(clamp(1.65rem, 7.1vw, 2.1rem), 8cqi);
    line-height: 1.08;
  }

  .listing-summary__title--detailed {
    font-size: clamp(1.25rem, 5vw, 1.6rem);
  }

  .listing-summary__meta {
    font-size: min(clamp(0.9rem, 3.6vw, 1rem), 4cqi);
  }

  .listing-summary__commerce--desktop {
    display: none;
  }

  .listing-summary__commerce--mobile {
    display: flex;
    box-sizing: border-box; /* Function: keeps the mobile pricing row inside the listing card when it reserves close-button space. */
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    justify-content: center; /* Function: centers the mobile pricing and calculator as one grouped row. */
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 4px 0 8px;
    padding-right: 0; /* Function: removes the mobile right inset so the full pricing row can sit visually centered. */
    overflow: visible;
    transform: scale(var(--mobile-commerce-scale, 1));
    transform-origin: center top; /* Function: keeps the scaled mobile pricing group centered on wider and narrower phones. */
  }

  .listing-summary__commerce--mobile > * {
    flex: 0 0 auto; /* Function: preserves one natural horizontal row so the mobile scaler can shrink it as a unit. */
  }

  .listing-summary__commerce--mobile.is-compact .listing-btn--mobile-calc {
    width: 48px; /* Function: keeps the compact calculator button square when text would crowd the row margins. */
    min-width: 48px;
    padding: 12px;
  }

  .listing-summary__commerce--mobile.is-compact .listing-btn__label {
    display: none; /* Function: leaves only the calculator icon visible when the mobile row needs extra side margin. */
  }

  .listing-summary__commerce--mobile.is-measuring-full .listing-btn__label {
    display: inline; /* Function: lets the scaler test the full text button width before deciding compact mode. */
  }

  .listing-summary__commerce--mobile.is-measuring-full .listing-btn--mobile-calc {
    width: auto; /* Function: restores the full button width while measuring whether compact mode is needed. */
    min-width: 0;
    padding: 12px 18px;
  }

  .listing-summary__price-block {
    margin-inline: 0; /* Function: keeps the mobile price block grouped tightly with the calculator button on wider phones. */
    justify-content: center;
    gap: 0.55rem;
    margin-top: 0.08rem;
    text-align: left;
  }

  .listing-summary__price {
    font-family: var(--font-body);
    font-size: clamp(1.75rem, 7.8vw, 2.15rem);
    letter-spacing: 0;
    line-height: 1;
  }

  .listing-summary__monthly {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 3.7vw, 1.02rem);
    letter-spacing: 0;
  }

  .listing-summary__actions {
    max-width: none;
    grid-template-columns: 1fr;
  }

  .listing-gallery {
    margin: 0 -12px; /* break out of listing-layout padding */
    width: calc(100% + 24px);
    border-radius: 0 !important;
    border-left: none;
    border-right: none;
    height: auto; /* Function: lets the mobile viewer follow the fixed gallery ratio instead of viewport height. */
  }

  .listing-gallery .image-viewer__stage {
    border-radius: 0 !important;
  }
}

/* Left Column */
.listing-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (max-width: 900px) {
  .listing-main {
    gap: 16px;
  }
}

.listing-gallery {
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  position: relative;
  border: none;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  display: flex; /* Function: makes the gallery height independent of thumbnail count. */
  aspect-ratio: 16 / 11; /* Function: keeps listing galleries the same proportion regardless of image shape. */
  height: auto; /* Function: prevents tall images from setting the viewer height. */
  max-height: 620px; /* Function: caps the desktop viewer while preserving the fixed ratio. */
  min-height: 0; /* Function: allows the image stage to shrink inside the fixed gallery shell. */
}

.listing-gallery .image-viewer {
  flex: 1 1 auto; /* Function: lets the shared image viewer fill the capped gallery shell. */
  height: 100%; /* Function: prevents thumbnail rows from increasing the listing gallery height. */
  min-height: 0; /* Function: keeps internal flex children from forcing extra vertical growth. */
  overflow: hidden; /* Function: contains image and thumbnail overflow inside the fixed viewer. */
}

.listing-gallery .image-viewer__stage {
  aspect-ratio: auto; /* Function: lets the stage use the fixed gallery shell instead of image dimensions. */
  flex: 1 1 auto; /* Function: reserves remaining vertical space for the main image. */
  min-height: 0; /* Function: prevents the main image stage from stretching the modal. */
}

.listing-gallery .image-viewer__thumb-strip {
  flex: 0 0 auto; /* Function: keeps the thumbnail controls in the fixed bottom row. */
  min-height: 0; /* Function: prevents preview controls from increasing the gallery shell. */
  padding: 0 0.25rem 0.2rem; /* Function: preserves the existing thumbnail rail breathing room. */
}

.listing-gallery .image-viewer__thumbs {
  flex: 0 0 auto; /* Function: keeps the thumbnail rail at a fixed height inside the gallery. */
  flex-wrap: nowrap; /* Function: keeps many thumbnails in one horizontal scroll row. */
  max-height: 5.4rem; /* Function: caps the thumbnail rail so extra images scroll sideways. */
  overflow-x: auto; /* Function: allows large image sets to scroll without growing vertically. */
  overflow-y: hidden; /* Function: prevents thumbnail overflow from increasing viewer height. */
}
.listing-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.listing-card-specs {
  display: grid; /* Function: places the key facts inside the listing card near the gallery instead of only in Features. */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Function: matches the reference's two-column spec rhythm on larger cards. */
  gap: 18px clamp(20px, 4vw, 44px); /* Function: keeps icons and values airy without creating a separate nested card. */
  margin: 0;
  padding: 2px 0 4px; /* Function: lets the spec block sit naturally between gallery and description. */
}

.listing-card-spec {
  display: grid; /* Function: keeps each icon and text pair aligned as a stable compact row. */
  grid-template-columns: 46px minmax(0, 1fr); /* Function: reserves a fixed icon column so labels never push icons around. */
  align-items: center; /* Function: vertically centers icons against one- or two-line values. */
  gap: 12px; /* Function: separates the circular icon from the text without wasting card width. */
  min-width: 0; /* Function: lets long engine or drivetrain values wrap inside the listing column. */
}

.listing-card-spec__icon {
  width: 46px; /* Function: keeps the icon circle consistent across all vehicle facts. */
  height: 46px; /* Function: keeps the icon circle square before border-radius turns it round. */
  border: 1.5px solid rgba(15, 24, 36, 0.82); /* Function: echoes the outlined icon treatment from the feature reference. */
  border-radius: 50%; /* Function: creates the circular icon frame used by the requested spec design. */
  display: flex; /* Function: centers the SVG glyph inside the circular frame. */
  align-items: center; /* Function: centers the SVG glyph vertically. */
  justify-content: center; /* Function: centers the SVG glyph horizontally. */
  color: #0f1824; /* Function: matches the dark listing feature icon tone. */
  background: rgba(255, 255, 255, 0.42); /* Function: gives icons subtle contrast over the modal surface. */
}

.listing-card-spec__icon-svg {
  width: 25px; /* Function: scales the line icon inside the fixed circular frame. */
  height: 25px; /* Function: keeps each line icon square and visually consistent. */
  flex: 0 0 auto; /* Function: prevents SVG glyphs from stretching in grid rows. */
}

.listing-card-spec__copy {
  display: flex; /* Function: stacks compact labels above values for quick scanning. */
  flex-direction: column; /* Function: mirrors the label-over-value pattern in the provided reference. */
  gap: 2px; /* Function: keeps each label tied closely to its value. */
  min-width: 0; /* Function: allows long values to wrap instead of widening the card. */
}

.listing-card-spec__label {
  color: #0f1824; /* Function: uses the same strong heading color as detailed feature labels. */
  font-size: clamp(0.95rem, 1.7vw, 1.08rem); /* Function: makes compact spec labels prominent without becoming section headlines. */
  font-weight: 800; /* Function: gives labels enough weight to scan like the reference. */
  line-height: 1.15; /* Function: keeps wrapped labels compact. */
}

.listing-card-spec__value {
  color: #334155; /* Function: keeps values readable while secondary to their labels. */
  font-size: clamp(0.92rem, 1.5vw, 1.04rem); /* Function: keeps spec values legible inside the listing card. */
  font-weight: 500; /* Function: separates values from bold labels without making them faint. */
  line-height: 1.25; /* Function: protects wrapped values from overlapping adjacent rows. */
  overflow-wrap: anywhere; /* Function: prevents long drivetrain or engine strings from overflowing the card. */
}

@media (max-width: 900px) {
  .listing-gallery {
    aspect-ratio: 4 / 3; /* Function: gives mobile listing galleries a shorter, consistent frame. */
    max-height: none; /* Function: keeps the mobile frame controlled by width, not viewport height. */
  }

  .listing-card-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Function: preserves two compact columns on most phones like the requested reference. */
    gap: 14px 10px; /* Function: tightens mobile spec spacing without crowding icon circles. */
    padding: 2px 0 8px; /* Function: keeps mobile specs separated from the description below. */
  }

  .listing-card-spec {
    grid-template-columns: 40px minmax(0, 1fr); /* Function: scales the mobile icon column down to fit narrow listing cards. */
    gap: 9px; /* Function: saves horizontal space while keeping icon and copy related. */
  }

  .listing-card-spec__icon {
    width: 40px; /* Function: keeps mobile icon frames compact and tappable-looking without dominating the card. */
    height: 40px; /* Function: keeps mobile icon frames square. */
  }

  .listing-card-spec__icon-svg {
    width: 22px; /* Function: scales SVG glyphs for the smaller mobile icon circle. */
    height: 22px; /* Function: keeps SVG glyphs square on mobile. */
  }

  .listing-card-spec__label {
    font-size: clamp(0.84rem, 3.4vw, 0.98rem); /* Function: keeps labels from wrapping awkwardly on phones. */
  }

  .listing-card-spec__value {
    font-size: clamp(0.82rem, 3.2vw, 0.94rem); /* Function: keeps compact values readable within two mobile columns. */
  }
}

@media (max-width: 420px) {
  .listing-card-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Function: keeps iPhone-sized listing facts in the requested two-column layout. */
    gap: 14px 8px; /* Function: preserves separation between the two compact mobile columns. */
  }

  .listing-card-spec {
    grid-template-columns: 34px minmax(0, 1fr); /* Function: frees text room while keeping the icon-and-copy layout in each column. */
    gap: 7px; /* Function: keeps icon and text connected without crowding the second column. */
  }

  .listing-card-spec__icon {
    width: 34px; /* Function: shrinks icon circles enough for two columns on narrow iPhones. */
    height: 34px; /* Function: keeps narrow-phone icon circles square. */
  }

  .listing-card-spec__icon-svg {
    width: 19px; /* Function: scales SVG glyphs for the narrow-phone icon circle. */
    height: 19px; /* Function: keeps narrow-phone SVG glyphs square. */
  }

  .listing-card-spec__label {
    font-size: clamp(0.72rem, 3.1vw, 0.88rem); /* Function: keeps labels readable while fitting two iPhone columns. */
    line-height: 1.08; /* Function: tightens wrapped labels in compact mobile cells. */
  }

  .listing-card-spec__value {
    font-size: clamp(0.72rem, 3vw, 0.86rem); /* Function: keeps values legible without forcing one-column wrapping. */
    line-height: 1.18; /* Function: keeps multi-line values compact inside each mobile cell. */
  }
}

.listing-section {
  position: relative;
  padding: 2px 0 0; /* Function: gives sections a little breathing room against the premium card surface. */
  background: transparent;
}

.listing-section + .listing-section {
  border-top: 1px solid rgba(26, 55, 123, 0.08); /* Function: separates stacked content areas without card boxing. */
  padding-top: 28px;
}

.listing-section-title {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 22px;
  color: #0f1824;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: none;
  padding-bottom: 0;
}

.listing-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.spec-item {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
}

.spec-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 6px;
  font-weight: 600;
}

.spec-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f1824;
}

.listing-features-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: none;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}

.listing-features-table th,
.listing-features-table td {
  padding: 12px 16px 12px 0;
  border-bottom: none;
  text-align: left;
  vertical-align: top;
}

.listing-features-table th {
  width: 34%;
  background: transparent;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.listing-features-table td {
  color: #0f1824;
  font-size: 1rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.listing-features-table tr:last-child th,
.listing-features-table tr:last-child td {
  border-bottom: 0;
}

.listing-feature-sections {
  display: flex; /* Function: stacks feature categories in the requested Overview-to-Options order. */
  flex-direction: column; /* Function: keeps grouped sections vertically readable on desktop and mobile. */
  gap: 28px; /* Function: separates feature groups with a calmer secondary-detail rhythm. */
}

.listing-feature-group {
  min-width: 0; /* Function: lets long VIN-derived labels wrap inside the modal column. */
  margin-top: 0 !important; /* Function: overrides generic section spacing so feature groups align as one details area. */
  margin-bottom: 0; /* Function: lets the parent gap control all vertical spacing between feature groups. */
  padding-top: 22px; /* Function: gives each feature group a measured start without drawing divider lines. */
}

.listing-feature-title {
  margin-bottom: 14px; /* Function: keeps each grouped heading close to its compact rows. */
  color: #0f1824; /* Function: keeps group labels readable on the light modal surface. */
  font-size: clamp(1.05rem, 1.8vw, 1.28rem); /* Function: makes feature headings secondary to the listing title and key facts. */
  line-height: 1.2; /* Function: keeps wrapped feature headings tidy without crowding. */
  letter-spacing: 0; /* Function: avoids compressed uppercase tracking on readable feature headings. */
  text-transform: none; /* Function: keeps headings like Fuel economy in natural case. */
}

.listing-feature-grid {
  display: grid; /* Function: creates the two-column desktop lists shown in the feature reference. */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Function: keeps each feature column equal while allowing long text to wrap. */
  column-gap: clamp(22px, 4vw, 44px); /* Function: keeps desktop columns distinct without the oversized center gutter. */
  row-gap: 0; /* Function: lets row padding create the scan rhythm without divider lines. */
}

.listing-feature-item {
  display: grid; /* Function: aligns labels and values into compact detail rows. */
  grid-template-columns: minmax(126px, 0.42fr) minmax(0, 1fr); /* Function: reserves label space while protecting long values from overflow. */
  column-gap: 10px; /* Function: separates label and value without making the row feel loose. */
  align-items: start; /* Function: keeps multi-line values aligned to the first label line. */
  min-width: 0; /* Function: prevents long NHTSA field names from widening the modal. */
  margin: 0; /* Function: removes paragraph defaults so the grid controls all spacing. */
  padding: 11px 0; /* Function: gives each row enough touch and reading space without card chrome. */
  color: #0f1824; /* Function: matches the dark readable feature text tone. */
  font-size: clamp(0.9rem, 1.25vw, 1rem); /* Function: keeps secondary feature rows below headline scale. */
  line-height: 1.35; /* Function: keeps wrapped values compact and readable. */
  overflow-wrap: anywhere; /* Function: protects the layout from long VIN, package, or API labels. */
  word-break: normal; /* Function: preserves natural words while overflow-wrap handles long tokens. */
}

.listing-feature-item__label {
  color: #64748b; /* Function: makes labels quieter than values for a proper information hierarchy. */
  font-weight: 750; /* Function: keeps labels scannable without competing with the values. */
  overflow-wrap: anywhere; /* Function: allows long decoded labels to wrap inside their label column. */
}

.listing-feature-item--standalone .listing-feature-item__label {
  color: #0f1824; /* Function: makes equipped feature names read as selected features rather than muted labels. */
  font-weight: 650; /* Function: gives standalone equipment enough presence in safety and options lists. */
}

.listing-feature-item__value {
  color: #0f1824; /* Function: makes the actual vehicle value the strongest element in each detail row. */
  font-weight: 600; /* Function: gives values a clear scan target without oversized type. */
  overflow-wrap: anywhere; /* Function: wraps VINs, manufacturer names, and decoded strings within the column. */
  word-break: normal; /* Function: avoids ugly mid-word breaks unless a token has no natural break point. */
}

.listing-feature-rating {
  display: inline-flex; /* Function: keeps the NHTSA stars grouped as one compact rating value. */
  align-items: center; /* Function: aligns star glyphs with neighboring feature-row text. */
  gap: 1px; /* Function: gives each star enough separation without reading like spaced text. */
  color: #f5a623; /* Function: gives filled NHTSA stars the warm rating color users expect. */
  font-size: 1.08em; /* Function: makes star ratings legible while staying within the row scale. */
  line-height: 1; /* Function: prevents star glyphs from increasing feature-row height. */
  letter-spacing: 0; /* Function: follows the interface rule that readable glyph groups should not use negative tracking. */
  white-space: nowrap; /* Function: keeps all five rating stars on one line. */
}

.listing-feature-rating__empty {
  color: #cbd5e1; /* Function: keeps unfilled NHTSA stars visible but clearly inactive. */
}

.listing-feature-item--standalone {
  grid-template-columns: 18px minmax(0, 1fr); /* Function: reserves a small marker column for equipped-feature rows. */
  column-gap: 8px; /* Function: keeps the marker visually tied to the feature name. */
  align-items: start; /* Function: aligns the marker with the first line of wrapped feature text. */
}

.listing-feature-item--standalone::before {
  content: ""; /* Function: draws a decorative equipped-feature marker without changing test-visible text. */
  width: 7px; /* Function: sets the compact marker dot size. */
  height: 7px; /* Function: keeps the compact marker dot square before rounding. */
  margin-top: 0.48em; /* Function: aligns the marker optically with the first text line. */
  border-radius: 50%; /* Function: turns the marker into a clean bullet. */
  background: #1a377b; /* Function: connects equipped-feature rows to the listing brand accent. */
  box-shadow: 0 0 0 4px rgba(26, 55, 123, 0.08); /* Function: softens the marker so it feels polished instead of default-list-like. */
}

@media (max-width: 700px) {
  .listing-feature-sections {
    gap: 24px; /* Function: keeps stacked mobile feature groups separated without creating excess scrolling. */
  }

  .listing-feature-group {
    padding-top: 18px; /* Function: tightens grouped feature starts on narrow screens. */
  }

  .listing-feature-title {
    font-size: clamp(1.05rem, 5vw, 1.22rem); /* Function: keeps feature headings readable without becoming mobile hero text. */
    margin-bottom: 10px; /* Function: tightens the heading-to-list spacing on mobile. */
  }

  .listing-feature-grid {
    grid-template-columns: 1fr; /* Function: switches feature rows to one column when two columns would crowd values. */
    row-gap: 0; /* Function: keeps mobile rows aligned through padding and separators. */
  }

  .listing-feature-item {
    grid-template-columns: minmax(118px, 0.38fr) minmax(0, 1fr); /* Function: keeps mobile labels compact while leaving room for values. */
    padding: 10px 0; /* Function: preserves comfortable mobile row spacing without excess scroll length. */
    font-size: clamp(0.88rem, 3.6vw, 0.98rem); /* Function: keeps detail rows legible on phones. */
  }

  .listing-feature-item--standalone {
    grid-template-columns: 18px minmax(0, 1fr); /* Function: keeps standalone mobile feature rows aligned with their marker. */
  }
}

.listing-description {
  font-size: 1rem;
  line-height: 1.7;
  color: #334155;
  white-space: pre-wrap;
}

/* Right Column (Sidebar) */
.listing-sidebar {
  display: flex; /* Function: stacks the desktop contact controls and email form as one persistent sidebar section. */
  flex-direction: column; /* Function: keeps the sidebar controls in the same top-to-bottom order while sticky. */
  gap: 24px; /* Function: preserves breathing room between the CTA stack and email card. */
  position: sticky; /* Function: pins the full desktop contact section while the listing details scroll. */
  top: 24px; /* Function: leaves a consistent viewport inset above the sticky contact section. */
  align-self: start; /* Function: prevents the grid from stretching the sticky section to the left column height. */
  max-height: calc(100dvh - 48px); /* Function: keeps the whole desktop contact section inside the visible viewport. */
  overflow-y: auto; /* Function: lets unusually tall sidebar content scroll internally without leaving the viewport. */
  overscroll-behavior: contain; /* Function: keeps wheel gestures on the sticky contact section from jumping the listing page. */
  scrollbar-width: thin; /* Function: keeps any internal sidebar scrollbar visually quiet on desktop. */
}

.listing-header__title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 8px;
  color: #0f1824;
  letter-spacing: -0.02em;
}

.listing-header__subtitle {
  font-size: 1.1rem;
  color: #64748b;
  font-weight: 500;
}

.listing-pricing {
  margin-top: 8px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.pricing-amount {
  font-size: 2.75rem;
  font-weight: 800;
  color: #0f1824;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
}

.pricing-monthly {
  font-size: 1.25rem;
  color: #1a377b; /* Global primary */
  font-weight: 700;
  margin-top: 4px;
}

/* CTAs aligned to Global Design System */
.listing-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.listing-floating-actions {
  position: fixed; /* Function: pins the listing CTAs to the viewport while the modal scrolls. */
  left: 50%;
  bottom: 16px;
  z-index: 10000;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(calc(100vw - 40px), 1200px);
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16), 0 6px 18px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}

@media (max-width: 760px) { /* Function: removes paint-heavy modal glass on mobile. */
  #listing-offer-root { /* Function: targets the full-screen listing overlay. */
    backdrop-filter: none; /* Function: prevents mobile overlay blur from repainting while the modal moves. */
    -webkit-backdrop-filter: none; /* Function: disables Safari mobile overlay blur too. */
  } /* Function: ends listing overlay blur override. */

  .listing-floating-actions { /* Function: targets the sticky mobile action bar. */
    backdrop-filter: none; /* Function: keeps the action bar cheap during viewport changes. */
    -webkit-backdrop-filter: none; /* Function: keeps the action bar cheap in Safari. */
  } /* Function: ends floating action blur override. */

  .appointment-booking-modal { /* Function: targets the mobile appointment pop-up. */
    backdrop-filter: none; /* Function: avoids compositing blur during appointment modal transitions. */
    -webkit-backdrop-filter: none; /* Function: avoids Safari blur during appointment modal transitions. */
  } /* Function: ends appointment blur override. */
} /* Function: ends mobile blur override. */

.listing-floating-actions .listing-btn {
  min-height: 56px; /* Function: keeps the floating buttons easy to tap without resizing the bar. */
  padding: 14px 16px;
}

.listing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.listing-btn--primary {
  background: #FBB649; /* Global Secondary Vibrant Gold */
  color: #0f0f0f;
  border: 1px solid rgba(0,0,0,0.06);
}

.listing-btn--primary:hover {
  background: #e5a33b;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(251, 182, 73, 0.25);
}

.listing-btn--secondary {
  background: #ffffff;
  color: #1a377b; /* Global Primary Deep Navy */
  border: 1px solid rgba(15, 23, 42, 0.15);
}

.listing-btn--secondary:hover {
  background: #f8fafc;
  border-color: #1a377b;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* Function: connects the desktop calculator trigger to the expanding finance panel underneath it. */
.listing-inline-calc {
  display: grid; /* Function: stacks the trigger and calculator panel as one sidebar control. */
  width: 100%; /* Function: keeps the expanding calculator aligned with the other sidebar CTAs. */
}

/* Function: turns the desktop calculator button into the top edge of the expanded calculator surface. */
.listing-inline-calc.is-open .listing-btn--desktop-calc {
  border-bottom-color: rgba(26, 55, 123, 0.08); /* Function: softens the seam where the button meets the panel. */
  border-radius: 12px 12px 0 0; /* Function: makes the open button read as the panel header. */
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,248,253,0.9)); /* Function: gives the expanded state a subtle glass tint. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 28px rgba(15, 23, 42, 0.08); /* Function: adds depth without detaching the control from the sidebar. */
  transform: none; /* Function: keeps the expanded header anchored while the panel opens below. */
}

/* Function: reveals the desktop calculator as an inline sidebar expansion instead of a full-screen layer. */
.listing-inline-calc__panel {
  box-sizing: border-box; /* Function: keeps padding and borders inside the sidebar width. */
  width: 100%; /* Function: aligns the calculator panel with the button width. */
  margin-top: 16px; /* Function: visually separates the panel from the expanded button. */
  padding: 0; /* Function: creates compact breathing room inside the sidebar calculator. */
  border: none; /* Function: removes internal borders for cleaner look. */
  border-radius: 0; /* Function: removes rounded corners on inner panel. */
  background: transparent;
  box-shadow: none;
  animation: listingInlineCalcReveal 0.22s ease-out; /* Function: makes the calculator expansion feel connected to the button tap. */
  overflow: hidden; /* Function: prevents the reveal animation from exposing clipped form edges. */
}

/* Function: animates the desktop finance panel from the calculator button's bottom edge. */
@keyframes listingInlineCalcReveal {
  from {
    opacity: 0; /* Function: starts the inline calculator hidden. */
    transform: translateY(-8px); /* Function: makes the panel appear to expand from the trigger. */
    clip-path: inset(0 0 100% 0); /* Function: clips the form until the reveal finishes. */
  }
  to {
    opacity: 1; /* Function: completes the inline calculator reveal. */
    transform: translateY(0); /* Function: restores the panel to its anchored sidebar position. */
    clip-path: inset(0); /* Function: exposes the full calculator panel. */
  }
}

/* Function: compacts the reusable payment calculator when it lives inside the listing sidebar. */
.listing-inline-calc__panel form.payment-form {
  width: 100%; /* Function: lets the calculator use the sidebar panel width instead of the standalone modal max width. */
  gap: 12px; /* Function: tightens the calculator rhythm for the desktop sidebar. */
  margin: 0; /* Function: removes standalone calculator centering inside the inline panel. */
}

/* Function: aligns the inline calculator intro with the sidebar's compact reading pattern. */
.listing-inline-calc__panel .payment-form__header {
  gap: 4px; /* Function: reduces header height so the email form stays close below the expanded calculator. */
  text-align: left; /* Function: aligns calculator copy with the sidebar controls. */
}

/* Function: keeps the inline calculator label on DriveHaus navy instead of generic blue. */
.listing-inline-calc__panel .payment-form__eyebrow {
  color: rgba(26, 55, 123, 0.82); /* Function: ties the calculator eyebrow to the listing card brand color. */
}

/* Function: sizes the inline calculator title for a sidebar panel. */
.listing-inline-calc__panel .payment-form__title {
  color: #10214f; /* Function: keeps the inline title in the same navy family as listing pricing. */
  font-size: 1.08rem; /* Function: avoids oversized heading text inside the narrow sidebar. */
  line-height: 1.15; /* Function: keeps the compact title from pushing the panel too tall. */
}

/* Function: hides the long calculator intro in the sidebar where space is constrained. */
.listing-inline-calc__panel .payment-form__intro {
  display: none; /* Function: keeps the inline expansion focused on the calculator controls. */
}

/* Function: restyles the finance result summary for the narrower inline panel. */
.listing-inline-calc__panel .payment-form__summary {
  gap: 0.7rem; /* Function: tightens result rows while preserving scanability. */
  padding: 1rem; /* Function: reduces the standalone calculator summary padding for sidebar use. */
  border-radius: 14px; /* Function: matches the tighter radius language of the listing card controls. */
  background: linear-gradient(140deg, #1a377b, #254a96 62%, #fbb649 160%); /* Function: uses navy first with a restrained gold tail as the brand accent. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 12px 24px rgba(26, 55, 123, 0.18); /* Function: gives the estimate block premium depth without becoming heavy. */
}

/* Function: keeps secondary finance stats readable inside the inline summary. */
.listing-inline-calc__panel .payment-form__summary .payment-form__stat:not(.payment-form__stat--primary) {
  grid-template-columns: minmax(0, 1fr) auto; /* Function: keeps secondary totals compact while labels still get the flexible space. */
  gap: 0.45rem; /* Function: separates labels from values without making the summary taller. */
}

/* Function: aligns stacked inline finance totals with their labels. */
.listing-inline-calc__panel .payment-form__summary .payment-form__stat:not(.payment-form__stat--primary) .payment-form__stat-value {
  justify-self: end; /* Function: keeps secondary totals aligned to the finance summary's right edge. */
  font-size: 0.95rem; /* Function: scales secondary totals below the primary monthly estimate. */
  text-align: right; /* Function: keeps wrapped secondary totals visually anchored. */
}

/* Function: scales the primary inline estimate for the sidebar width. */
.listing-inline-calc__panel .payment-form__stat--primary .payment-form__stat-value {
  font-size: clamp(1.55rem, 2.6vw, 1.9rem); /* Function: keeps the monthly result prominent without overflowing. */
}

/* Function: tightens the inline calculator input stack. */
.listing-inline-calc__panel .payment-form__fields {
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Function: lets desktop sidebar inputs use a compact two-column calculator layout. */
  gap: 0.75rem 0.65rem; /* Function: reduces vertical distance between finance inputs in the sidebar. */
}

/* Function: prevents compact inline calculator fields from widening the sidebar. */
.listing-inline-calc__panel .payment-form__field {
  min-width: 0; /* Function: lets labels and inputs shrink inside the two-column sidebar grid. */
}

/* Function: makes inline calculator labels proportional to the compact controls. */
.listing-inline-calc__panel .payment-form__label {
  font-size: 0.85rem; /* Function: keeps labels readable without taking headline space. */
}

/* Function: adapts inline calculator inputs to the sidebar panel. */
.listing-inline-calc__panel .payment-form__control input {
  min-width: 0; /* Function: keeps number inputs from forcing horizontal overflow inside the two-column grid. */
  padding: 0.64rem 0.72rem 0.64rem 2rem; /* Function: preserves prefix clearance while reducing control height. */
  border-radius: 12px; /* Function: aligns input corners with listing CTA corners. */
  background: rgba(255, 255, 255, 0.78); /* Function: keeps inputs readable over the glass panel. */
}

/* Function: pulls the dollar prefix closer inside the compact inline inputs. */
.listing-inline-calc__panel .payment-form__prefix {
  left: 0.78rem; /* Function: matches the reduced inline input padding. */
}

/* Function: keeps inline calculator helper text from overwhelming the sidebar. */
.listing-inline-calc__panel .payment-form__hint {
  display: none; /* Function: removes helper copy so the inline desktop calculator stays compact. */
}

/* Function: compacts the quick down-payment selector inside the inline panel. */
.listing-inline-calc__panel .payment-form__quick {
  gap: 0.55rem; /* Function: keeps quick options close to their label. */
  padding: 0.85rem; /* Function: reduces standalone quick-option padding for sidebar use. */
  border-radius: 14px; /* Function: mirrors the inline summary and input corner scale. */
  background: rgba(255, 255, 255, 0.54); /* Function: gives quick options a readable glass surface. */
  border-color: rgba(26, 55, 123, 0.16); /* Function: replaces generic blue with the listing navy border. */
}

/* Function: keeps inline quick-option labels proportional to the compact calculator body. */
.listing-inline-calc__panel .payment-form__quick-label {
  font-size: 0.85rem; /* Function: prevents the quick selector label from feeling heavier than the inputs. */
}

/* Function: keeps quick-option chips compact in the desktop sidebar calculator. */
.listing-inline-calc__panel .payment-form__chip {
  padding: 0.42rem 0.75rem; /* Function: prevents chip rows from becoming too tall in the sidebar. */
  border-color: rgba(26, 55, 123, 0.28); /* Function: keeps chip borders on brand. */
}

/* Function: colors selected quick-option chips with the listing card palette. */
.listing-inline-calc__panel .payment-form__chip.is-active {
  background: rgba(251, 182, 73, 0.24); /* Function: uses restrained gold to mark the active down-payment shortcut. */
  border-color: rgba(251, 182, 73, 0.62); /* Function: strengthens the active chip without adding another hue. */
  color: #10214f; /* Function: keeps active chip text readable on the gold tint. */
}

/* Function: keeps the inline calculator disclaimer compact and calm. */
.listing-inline-calc__panel .payment-form__note {
  margin: 0; /* Function: removes browser paragraph margin from the inline calculator note. */
  text-align: left; /* Function: aligns the disclaimer with the sidebar form rhythm. */
}

@media (max-width: 900px) {
  .listing-inline-calc {
    display: none; /* Function: removes the desktop inline calculator shell when mobile uses the full-screen calculator. */
  }

  .listing-btn--desktop-contact {
    display: none; /* Function: prevents duplicate contact CTAs when the mobile floating bar is active. */
  }

  .listing-floating-actions {
    display: grid; /* Function: enables the persistent bottom CTA bar only on mobile listing modals. */
    bottom: 0;
    width: 100%;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-right: none;
    border-bottom: none;
    border-left: none;
    border-radius: 18px 18px 0 0;
  }

  .listing-floating-actions .listing-btn {
    min-height: 52px; /* Function: preserves a comfortable mobile tap target in the two-column bar. */
    padding: 12px 10px;
    font-size: 0.95rem;
  }

  .listing-btn--desktop-calc {
    display: none;
  }

  .listing-btn--mobile-calc {
    width: auto;
    padding: 12px 18px;
    font-size: 1.05rem;
    min-height: 48px;
  }

  .listing-btn--mobile-calc .listing-btn__icon {
    width: 1.15em; /* Function: gives the inline calculator SVG a stable visual size in the mobile button. */
    height: 1.15em; /* Function: keeps the calculator SVG square as the button font size changes. */
    flex: 0 0 auto; /* Function: prevents the calculator SVG from stretching inside the compact button. */
    line-height: 1; /* Function: keeps the calculator icon centered in both full and compact button states. */
  }
}

/* Contact Form */
.listing-contact-box {
  background: rgba(255, 255, 255, 0.82);
  padding: 28px;
  border-radius: 16px;
  border: 1px solid var(--listing-border);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255,255,255,0.78);
}

.listing-contact-box h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #0f1824;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  background: #ffffff;
}

.form-input:focus {
  outline: none;
  border-color: #1a377b;
  box-shadow: 0 0 0 4px rgba(26, 55, 123, 0.1);
}

textarea.form-input {
  resize: vertical;
  min-height: 100px;
}

.form-submit {
  background: #1a377b; /* Deep navy */
  color: white;
  border: none;
  padding: 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 8px;
}

.form-submit:hover {
  background: #112559;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(26, 55, 123, 0.25);
}

/* Function: frames the custom appointment booking controls inside the listing sidebar. */
.appointment-booking {
  --appointment-navy: #1a377b; /* Function: reuses the DriveHaus primary blue inside the scheduler. */
  --appointment-ink: #0f1824; /* Function: keeps scheduler headings aligned with listing copy. */
  --appointment-muted: #526174; /* Function: keeps helper text secondary but readable. */
  position: relative; /* Function: anchors the reused listing close button to the booking card corner. */
  box-sizing: border-box; /* Function: keeps popup padding inside the booking card width. */
  width: 100%; /* Function: lets the booking card fill the sheet without creating side overflow. */
  margin: 0; /* Function: overrides the global section margin that created large top and bottom blanks. */
  display: flex; /* Function: stacks scheduler sections in the narrow sidebar. */
  flex-direction: column; /* Function: keeps date, slots, and form in reading order. */
  gap: 12px; /* Function: follows the tighter finance calculator field rhythm. */
  padding: 24px; /* Function: gives the standalone scheduler balanced desktop dialog spacing. */
  border: 1px solid #e5e7eb; /* Function: matches the finance calculator card boundary. */
  border-radius: 12px; /* Function: reuses the finance calculator panel radius. */
  background: #ffffff; /* Function: keeps the scheduler on the same clean finance surface. */
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16); /* Function: gives desktop popup depth without a bottom-sheet feel. */
  font-family: var(--font-body);
}

/* Function: keeps the desktop inline booking panel aligned with the sidebar rhythm. */
.appointment-booking-inline {
  display: block; /* Function: lets the booking panel occupy one full sidebar row. */
  width: 100%; /* Function: aligns the scheduler with the other sidebar cards. */
}

/* Function: aligns the booking title and close control. */
.appointment-booking__header {
  display: flex; /* Function: places copy and close button on one row. */
  align-items: flex-start; /* Function: keeps the close button aligned with the title. */
  justify-content: space-between; /* Function: pushes the close control to the far edge. */
  gap: 14px; /* Function: prevents title text from touching the close control. */
  min-height: var(--listing-close-size); /* Function: reserves the same corner height as the listing card close button. */
  padding-right: calc(var(--listing-close-size) + 12px); /* Function: prevents heading text from sitting under the absolute close button. */
}

/* Function: lets the title block shrink beside the reserved close-button lane. */
.appointment-booking__header > div {
  min-width: 0; /* Function: prevents long vehicle names from forcing the close button out of place. */
}

/* Function: sizes the booking heading for a sidebar panel. */
.appointment-booking__header h3 {
  margin: 0 0 5px; /* Function: removes default heading spacing while keeping a small subtitle gap. */
  color: var(--appointment-ink); /* Function: matches listing modal heading text. */
  font-family: var(--font-display); /* Function: uses the site display face. */
  font-size: 1.25rem; /* Function: keeps the scheduler heading aligned with contact card headings. */
  font-weight: 700;
  line-height: 1.18; /* Function: keeps the title compact inside the sidebar. */
  letter-spacing: 0; /* Function: follows the modal typography rules. */
}

/* Function: styles booking helper copy. */
.appointment-booking__header p,
.appointment-booking__hint,
.appointment-booking__status,
.appointment-booking--sent p {
  margin: 0; /* Function: lets the panel gap control vertical rhythm. */
  color: var(--appointment-muted); /* Function: keeps supporting copy secondary. */
  font-size: 0.94rem; /* Function: fits helper text in the sidebar. */
  line-height: 1.5; /* Function: keeps wrapped text readable. */
}

/* Function: makes the vehicle subtitle feel like listing context instead of another headline. */
.appointment-booking__header p {
  color: rgba(15, 24, 36, 0.62); /* Function: keeps the vehicle title secondary to the booking action. */
  font-weight: 650; /* Function: makes the listing context scannable. */
}

/* Function: lets the scheduler reuse the listing-card close button at the same top-right card anchor. */
.appointment-booking__close.listing-close {
  position: absolute; /* Function: removes the close button from the title row so it cannot overlap the heading. */
  top: var(--listing-close-top-inset); /* Function: matches the listing card close button top anchor. */
  right: var(--listing-close-right-inset); /* Function: matches the listing card close button right anchor. */
  flex: none; /* Function: prevents flex sizing from changing the reused listing close button. */
  margin: 0; /* Function: removes the prior header-flow offset that pushed the button over the title. */
}

/* Function: keeps the reused close button from lifting away from the compact scheduler header. */
.appointment-booking__close.listing-close:hover {
  transform: none; /* Function: leaves hover feedback to the shared listing close color and surface treatment. */
}

/* Function: keeps each booking field to one finance-style icon-and-control row. */
.appointment-booking__field {
  display: block; /* Function: lets the shared control wrapper own field spacing. */
  margin: 0; /* Function: removes generic sell-form field margins so the card height follows the booking gap. */
  color: var(--appointment-ink); /* Function: keeps the label readable. */
  font-size: 0.94rem; /* Function: keeps field labels compact. */
  font-weight: 600; /* Function: matches other strong modal labels. */
}

/* Function: mirrors the finance calculator input wrapper while adding an icon prefix. */
.appointment-booking__field-control {
  display: grid; /* Function: reserves a stable icon column beside the field. */
  grid-template-columns: 48px minmax(0, 1fr); /* Function: matches finance prefix controls without crowding input text. */
  align-items: center; /* Function: vertically centers icons and entered values. */
  min-height: 52px; /* Function: reuses the finance calculator field height. */
  border: 1px solid #d1d5db; /* Function: matches finance calculator input borders. */
  border-radius: 6px; /* Function: matches finance calculator field radius. */
  background: #ffffff; /* Function: keeps the field surface consistent with finance inputs. */
  overflow: hidden; /* Function: keeps native date/select controls inside the shared border. */
  transition: border-color 0.16s ease, box-shadow 0.16s ease; /* Function: smooths the shared focus state. */
}

/* Function: shows only the requested icon in the field prefix column. */
.appointment-booking__field-icon {
  display: inline-flex; /* Function: centers the SVG inside the fixed prefix column. */
  align-items: center; /* Function: vertically centers the icon path. */
  justify-content: center; /* Function: horizontally centers the icon path. */
  width: 100%; /* Function: lets the icon sit in the whole prefix lane. */
  min-width: 0; /* Function: prevents the prefix from widening the control. */
  color: var(--appointment-navy); /* Function: ties icon color to the scheduler action color. */
}

/* Function: keeps appointment prefix SVGs visually aligned with finance field text. */
.appointment-booking__field-icon svg {
  width: 20px; /* Function: gives field icons enough presence without replacing labels with large badges. */
  height: 20px; /* Function: keeps field icons square. */
}

/* Function: lets focus on nested controls style the finance-like wrapper. */
.appointment-booking__field-control:focus-within {
  border-color: rgba(26, 55, 123, 0.5); /* Function: highlights the active booking field through the shared border. */
  box-shadow: 0 0 0 4px rgba(26, 55, 123, 0.1); /* Function: creates one focus halo around icon and input together. */
}

/* Function: makes booking inputs live inside the shared finance-style field shell. */
.appointment-booking__field input,
.appointment-booking .form-input {
  width: 100%; /* Function: lets the date input fill the sidebar. */
  box-sizing: border-box; /* Function: prevents padding from widening the field. */
  min-height: 52px; /* Function: keeps the date control substantial without becoming oversized. */
  padding: 0 14px 0 0; /* Function: leaves the icon prefix as the left inset. */
  border: 0; /* Function: lets the wrapper own the finance-style border. */
  border-radius: 0; /* Function: avoids nested rounded boxes inside the shared field. */
  background: transparent; /* Function: keeps the wrapper as the only visible surface. */
  color: var(--appointment-navy); /* Function: matches finance calculator entered values. */
  font: inherit; /* Function: inherits site typography. */
  font-size: 16px; /* Function: keeps mobile browsers from zooming the booking fields. */
  font-weight: 600; /* Function: mirrors finance calculator number field weight. */
  text-align: left; /* Function: keeps native date values aligned with the typed booking fields. */
  box-shadow: none; /* Function: gives the date field a subtle recessed control surface. */
  outline: none; /* Function: uses the wrapper focus ring instead of nested browser chrome. */
}

/* Function: overrides iPhone Safari's centered native date value inside the booking field. */
.appointment-booking__field input[type="date"]::-webkit-date-and-time-value {
  text-align: left; /* Function: makes the rendered date sit like the name, email, and phone text. */
}

/* Function: gives the time dropdown the same finance-style shell as the other fields. */
.appointment-booking__time-select {
  width: 100%; /* Function: lets the time dropdown fill the sidebar. */
  box-sizing: border-box; /* Function: prevents padding from widening the field. */
  min-height: 52px; /* Function: keeps the time control aligned with other fields. */
  padding: 0 36px 0 0; /* Function: keeps the native dropdown arrow from overlapping text. */
  border: 0; /* Function: lets the wrapper own the finance-style border. */
  border-radius: 0; /* Function: avoids a second control shape inside the field shell. */
  background: transparent; /* Function: keeps the wrapper as the only visible field surface. */
  color: var(--appointment-navy); /* Function: matches finance calculator input values. */
  font: inherit; /* Function: inherits site typography. */
  font-size: 16px;
  font-weight: 600; /* Function: mirrors finance calculator value weight. */
  cursor: pointer; /* Function: signals the time control opens a menu. */
  box-shadow: none; /* Function: gives the dropdown a subtle recessed control surface. */
  outline: none; /* Function: uses the wrapper focus ring instead of nested browser chrome. */
}

/* Function: dims the time dropdown when no slots can be selected. */
.appointment-booking__time-select:disabled {
  cursor: not-allowed; /* Function: communicates that no time can be chosen yet. */
  color: rgba(15, 24, 36, 0.44); /* Function: keeps disabled text subdued. */
  background: transparent; /* Function: keeps disabled fields inside the same shared shell. */
}

/* Function: keeps the native calendar icon crisp and balanced. */
.appointment-booking__field input::-webkit-calendar-picker-indicator {
  cursor: pointer; /* Function: signals the calendar icon is interactive. */
  opacity: 0.72; /* Function: softens the native icon so it fits the form. */
}

/* Function: holds loading, empty, and error copy below the time dropdown. */
.appointment-booking__messages {
  display: block; /* Function: gives scheduler messages normal document flow. */
  margin-top: -6px; /* Function: keeps messages visually attached to the time field. */
}

/* Function: removes empty message containers from the layout. */
.appointment-booking__messages:empty {
  display: none; /* Function: avoids a phantom gap when slots load successfully. */
}

/* Function: lets loading and empty slot messages span the grid. */
.appointment-booking__hint,
.appointment-booking__status {
  width: 100%; /* Function: keeps scheduler messages aligned to the form fields. */
}

/* Function: stacks required customer fields for booking verification. */
.appointment-booking__form {
  display: flex; /* Function: stacks customer inputs vertically. */
  flex-direction: column; /* Function: keeps the booking form compact in the sidebar. */
  gap: 10px; /* Function: keeps required fields grouped tightly under the slot selection. */
}

/* Function: softens placeholder text without losing readability. */
.appointment-booking .form-input::placeholder {
  color: rgba(15, 24, 36, 0.46); /* Function: separates placeholders from entered values. */
  opacity: 1; /* Function: keeps placeholder tone consistent across browsers. */
}

/* Function: makes the booking submit button feel primary but not oversized. */
.appointment-booking__submit {
  min-height: 54px; /* Function: keeps the main booking action thumb-friendly. */
  margin-top: 2px; /* Function: tightens the gap above the button. */
  border-radius: 12px; /* Function: matches the refined scheduler controls. */
  border: none;
  background: var(--appointment-navy); /* Function: applies the DriveHaus primary action style as a solid color. */
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 8px 20px rgba(26, 55, 123, 0.2); /* Function: gives the primary action depth. */
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Function: polishes the enabled booking button hover state. */
.appointment-booking__submit:not(:disabled):hover {
  background: #112559; /* Function: gives hover feedback without leaving the brand family. */
  box-shadow: 0 16px 30px rgba(26, 55, 123, 0.25); /* Function: lifts the enabled action. */
}

/* Function: shows disabled submit state clearly. */
.appointment-booking__submit:disabled {
  cursor: not-allowed; /* Function: communicates that a slot is required first. */
  background: rgba(26, 55, 123, 0.5); /* Function: visually dims disabled booking. */
  transform: none; /* Function: prevents hover movement while disabled. */
  box-shadow: none; /* Function: removes active elevation while disabled. */
}

/* Function: frames booking status messages with a calm system style. */
.appointment-booking__status {
  padding: 11px 13px; /* Function: separates status copy from the panel edge. */
  border: 1px solid rgba(26, 55, 123, 0.08); /* Function: keeps status messages framed without adding hard edges. */
  border-radius: 12px; /* Function: matches the scheduler control radius. */
  background: rgba(248, 250, 252, 0.86); /* Function: keeps status copy readable on a soft system surface. */
}

/* Function: highlights selected slot details after email submission. */
.appointment-booking__selected {
  padding: 12px 14px; /* Function: frames the held appointment time. */
  border-radius: 12px; /* Function: matches panel controls. */
  background: #f8fafc; /* Function: keeps selected time readable on the same filled surface. */
  color: var(--appointment-ink) !important; /* Function: overrides secondary paragraph tone for the confirmed detail. */
  font-weight: 800; /* Function: makes the held time clear. */
  border: 1px solid rgba(26, 55, 123, 0.08); /* Function: makes the selected appointment detail intentional without heaviness. */
}

/* Function: dims the listing view while the booking dialog is open. */
.appointment-booking-modal {
  position: fixed; /* Function: pins the booking dialog layer to the viewport. */
  inset: 0; /* Function: covers the full viewport behind the dialog. */
  z-index: 10030; /* Function: places the booking sheet above the listing modal and floating actions. */
  display: flex; /* Function: aligns the sheet without extra wrapper markup. */
  align-items: center; /* Function: centers the desktop dialog instead of anchoring it like a sheet. */
  justify-content: center; /* Function: centers the dialog horizontally on desktop. */
  padding: clamp(12px, 2.5vh, 24px) 20px; /* Function: keeps only a tight viewport margin around the content-sized popup. */
  overflow: hidden; /* Function: prevents the backdrop layer from becoming an internal scroll area. */
  background: rgba(15, 23, 42, 0.28); /* Function: creates focus without using a gradient. */
  backdrop-filter: blur(6px); /* Function: softens the listing behind the booking action. */
  animation: appointmentBackdropIn 0.22s ease-out; /* Function: fades the backdrop in with the sheet. */
}

/* Function: renders the desktop scheduler as a centered popup window. */
.appointment-booking-sheet {
  --listing-close-size: 2.75rem; /* Function: supplies the listing close button size outside the listing modal portal. */
  --listing-close-top-inset: 18px; /* Function: supplies the listing close button top anchor outside the listing modal portal. */
  --listing-close-right-inset: 18px; /* Function: supplies the listing close button right anchor outside the listing modal portal. */
  position: relative; /* Function: scopes popup-level effects without affecting the fixed backdrop. */
  width: min(100%, 460px); /* Function: keeps the desktop popup compact like a finance form panel. */
  height: fit-content; /* Function: lets the popup hug the scheduler instead of stretching into extra top and bottom whitespace. */
  min-height: 0; /* Function: prevents inherited dialog constraints from creating blank vertical margins. */
  max-height: none; /* Function: keeps the popup from turning into a capped scroll container. */
  overflow: visible; /* Function: keeps the booking area itself non-scrollable. */
  overscroll-behavior: contain; /* Function: prevents pointer gestures from dragging the listing behind it. */
  border-radius: 12px; /* Function: matches finance calculator panels on desktop. */
  background: #ffffff; /* Function: keeps the booking card clean and gradient-free. */
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.26); /* Function: gives the desktop popup clear modal elevation. */
  animation: appointmentDialogIn 0.16s ease-out; /* Function: fades the popup in without the jittery scale-and-slide motion. */
}

/* Function: removes nested-card styling when the scheduler lives inside the popup shell. */
.appointment-booking-sheet .appointment-booking {
  padding: 24px; /* Function: keeps desktop popup spacing tight after removing global section margins. */
  min-height: 0; /* Function: removes extra vertical blank space from the popup content box. */
  justify-content: flex-start; /* Function: anchors scheduler content to the top padding instead of centering it vertically. */
  border: none; /* Function: avoids a card-inside-card border on mobile. */
  border-radius: 0; /* Function: lets the sheet shell own the popup shape. */
  background: transparent; /* Function: keeps the sheet as one clean surface. */
  box-shadow: none; /* Function: removes nested elevation inside the popup card. */
}

/* Function: fades the sheet backdrop into view. */
@keyframes appointmentBackdropIn {
  from { opacity: 0; } /* Function: starts with the listing unobscured. */
  to { opacity: 1; } /* Function: finishes with the focus backdrop visible. */
}

/* Function: scales the desktop appointment popup into place without a bottom-sheet movement. */
@keyframes appointmentDialogIn {
  from { opacity: 0; } /* Function: starts with the popup transparent to avoid layout jitter. */
  to { opacity: 1; } /* Function: finishes with the popup fully visible without movement. */
}

/* Function: slides the mobile booking sheet up from the viewport edge. */
@keyframes appointmentSheetUp {
  from { transform: translateY(100%); } /* Function: starts the card below the viewport. */
  to { transform: translateY(0); } /* Function: lands the card at the bottom edge. */
}

/* Function: keeps the scheduler polished on mobile modal layouts. */
@media (max-width: 900px) {
  .appointment-booking-modal {
    align-items: center; /* Function: applies the same content-sized centered popup treatment on mobile. */
    padding: 10px; /* Function: keeps a small mobile viewport margin without adding card whitespace. */
  }

  .appointment-booking-sheet {
    --listing-close-size: 2.25rem; /* Function: matches the mobile listing card close button size. */
    --listing-close-top-inset: 10px; /* Function: keeps the mobile close button inside the popup corner. */
    --listing-close-right-inset: 10px; /* Function: keeps the mobile close button aligned to the popup edge. */
    width: min(calc(100vw - 20px), 520px); /* Function: keeps the mobile popup full-width with a fixed viewport inset. */
    max-height: none; /* Function: prevents the mobile booking card from becoming a scrollable bottom sheet. */
    overflow: visible; /* Function: keeps the mobile booking area itself non-scrollable. */
    border-radius: 20px; /* Function: keeps every mobile popup corner rounded like the desktop card. */
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22); /* Function: separates the centered mobile popup from the listing. */
    animation: appointmentDialogIn 0.16s ease-out; /* Function: uses the same non-jittery fade as desktop. */
  }

  .appointment-booking-sheet .appointment-booking {
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); /* Function: tightens mobile top and bottom spacing while preserving safe-area room. */
  }

  .appointment-booking {
    gap: 10px; /* Function: keeps the mobile popup short enough to avoid internal scrolling. */
    padding: 18px; /* Function: fits inline fallback scheduler comfortably on smaller screens. */
    border-radius: 18px; /* Function: keeps inline fallback scheduler softly rounded. */
  }

  .appointment-booking__header {
    min-height: var(--listing-close-size); /* Function: matches the shorter mobile listing close button height. */
    padding-right: calc(var(--listing-close-size) + 8px); /* Function: protects mobile title text from the corner close button. */
  }

  .appointment-booking__header h3 {
    font-size: 1.2rem; /* Function: keeps mobile booking heading compact. */
  }

  .appointment-booking__field-control {
    grid-template-columns: 42px minmax(0, 1fr); /* Function: tightens the mobile icon lane to reduce popup width pressure. */
    min-height: 48px; /* Function: shortens mobile fields so the popup does not need an internal scroll. */
  }

  .appointment-booking__field input,
  .appointment-booking .form-input,
  .appointment-booking__time-select {
    min-height: 48px; /* Function: matches the tighter mobile field shell height. */
  }

  .appointment-booking__submit {
    min-height: 50px; /* Function: keeps the mobile action thumb-friendly without making the popup too tall. */
  }
}

/* Calculator Popup Overlay */
.calc-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #ffffff;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  padding: 40px;
  box-sizing: border-box;
  overflow-y: auto;
  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.calc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e8f1f8;
  max-width: 540px;
  width: 100%;
  margin-inline: auto;
}

.calc-header h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: #0f1824;
}

.calc-close {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 1.25rem;
  cursor: pointer;
  color: #334155;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.calc-close:hover {
  background: #e8f1f8;
  color: #1a377b;
  transform: scale(1.05);
}

/* Hide tawk widget when listing modal is open */
body:has(#listing-offer-root) .tawk-mobile {
  display: none !important;
}


@media (max-width: 900px) {
  .calc-overlay {
    padding: 24px 16px;
  }
}