/* ==========================================================================
   Clear Auto Choice - Comparison Tool page-specific styles
   Covers: tools/compare.html
   - The "Your comparison list" mini-grid at the top of the page (a compact
     5-wide x 2-tall view of the up-to-10 vehicles saved via the shared
     cac_compare_vehicles_v1 localStorage list — the same list the EV
     Inventory page's "Add to Comparison" button writes to).
   - The click-to-expand detail modal that grid opens, with the same
     click-to-zoom photo behavior as the EV Inventory page's private-listing
     modal (assets/css/ev-inventory.css / inventory/ev-inventory.php).
   Uses only design tokens already defined in style.css (--ink, --slate,
   --line, --paper, --white, --accent, --radius, --confirmed*, --estimated*)
   so this file doesn't need its own copies of those.
   ========================================================================== */

.compare-mini-wrap { margin-bottom: 28px; }

.compare-mini-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* Column count tracks how many vehicles are actually saved instead of a
   fixed 10-slot grid: 1 car is one column, 2 cars two columns, and so on
   through 5; from 6 on it holds at five across and wraps to a second row
   (six is 5x2 same as ten) rather than padding the row out with a wall of
   dashed "Empty slot" placeholders. renderMiniGrid() (assets/js/compare.js)
   sets --compare-cols to that count on the grid element per render — the
   var(...,5) fallback only applies before the first render. Falls back to
   fewer columns on a narrow screen since five real columns would otherwise
   squeeze each card down to an unreadable sliver — min() keeps it from
   ever exceeding the real column count, so a 1- or 2-car list doesn't get
   stretched back out to 3 or 2 columns on mobile.

   Every track below is minmax(0, 1fr), not bare 1fr — see the long
   comment on the matching rule in ev-inventory.css. Short version: a
   bare 1fr track's minimum is "auto" (content-based), and min-width: 0
   on the card alone wasn't reliable through repeated add/remove/re-
   render cycles — two columns could still collapse to near-0 while
   their neighbors overflowed. minmax(0, 1fr) pins the track's minimum
   to 0 directly, and held up clean across a full 0-10-0 stress sweep
   where the item-level fix alone did not. */
.compare-mini-grid {
  display: grid;
  grid-template-columns: repeat(var(--compare-cols, 5), minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .compare-mini-grid { grid-template-columns: repeat(min(var(--compare-cols, 5), 3), minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .compare-mini-grid { grid-template-columns: repeat(min(var(--compare-cols, 5), 2), minmax(0, 1fr)); }
}

.compare-mini-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
  height: 100%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease;
  box-sizing: border-box;
}

.compare-mini-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Keep every comparison card in a grid row the same height. */
.compare-mini-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.compare-mini-card.is-active {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.25);
}

.compare-mini-pos {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  z-index: 1;
}

.compare-mini-card .thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  background-color: #E9ECEF;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9AA3AD;
  font-size: 22px;
  box-sizing: border-box;
}

.compare-mini-rank {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  z-index: 1;
}

.compare-mini-body {
  padding: 8px 10px 10px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
}

.compare-mini-name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
  overflow-wrap: anywhere;
}

.compare-mini-price {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin-top: auto;
}

.compare-mini-clickhint {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--accent);
  font-weight: 600;
  margin-top: 5px;
  min-height: 1.3em;
}

@media (max-width: 560px) {
  .compare-mini-grid {
    align-items: stretch;
    grid-auto-rows: auto;
  }

  .compare-mini-card {
    height: 100%;
  }

  .compare-mini-body {
    padding: 8px;
  }

  .compare-mini-name {
    font-size: 12px;
  }

  .compare-mini-price {
    font-size: 12px;
  }
}

.compare-mini-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  aspect-ratio: 16 / 12;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9AA3AD;
  font-size: 12px;
  text-align: center;
  padding: 8px;
}

/* ---------- Detail modal (click-to-expand) ---------- */
/* Same interaction pattern as the EV Inventory page's private-listing
   modal: a large photo you click to zoom (2x, then drag to pan), plus the
   vehicle's full entered details below it. Compare vehicles only ever
   carry one photo (no gallery), so there's no prev/next nav here. */
.listing-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
/* An author stylesheet's display:flex above always wins over the browser's
   built-in "hidden elements are display:none" default regardless of source
   order, so without this the overlay stayed visible and clickable on load. */
.listing-modal-overlay[hidden] { display: none; }
.listing-modal {
  background: var(--white);
  border-radius: var(--radius);
  max-width: 720px;
  width: 95vw;
  max-height: 95vh;
  overflow-y: auto;
  position: relative;
}
.listing-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
}
.listing-modal .photo {
  width: 100%;
  max-height: 60vh;
  min-height: 160px;
  background-color: #E9ECEF;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.listing-modal .photo img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  cursor: zoom-in;
  transition: transform 0.2s ease-out;
}
.listing-modal .photo img.zoomed { cursor: grab; touch-action: none; }
.listing-modal .photo img.zoomed:active { cursor: grabbing; }
.listing-modal .photo .zoom-hint {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 10px;
  pointer-events: none;
}
.listing-modal .photo .no-photo-label { color: #9AA3AD; font-size: 14px; }

/* Prev/next arrows move between DIFFERENT vehicles in the comparison list
   (see navigateCompareModal in compare.js) — not photos within one
   listing, since a compare vehicle only ever has the one photo. Same
   visual language as the EV Inventory page's per-listing photo nav. */
.listing-modal .photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.listing-modal .photo-nav:hover { background: rgba(0, 0, 0, 0.7); }
.listing-modal .photo-nav.prev { left: 12px; }
.listing-modal .photo-nav.next { right: 12px; }
.listing-modal .photo-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 10px;
  z-index: 3;
}

.listing-modal-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.compare-modal-tag { font-size: 12px; color: var(--accent); font-weight: 600; }
.compare-modal-title { margin: 4px 0 0; font-size: 18px; font-weight: 700; }
.compare-modal-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.compare-modal-price { font-size: 22px; font-weight: 700; }

/* Score card — Clear Auto Choice's own composite score, rank, and financing
   figures, shown ONLY inside the expanded detail modal, and deliberately
   set apart (tinted background, colored border) from the plain-white
   listing facts around it — the price row above and the discount/range/
   source grid below are what the dealer or listing published; everything
   inside this card is this tool's own calculation, never the seller's. */
.compare-modal-scorecard {
  margin: 4px 0 6px;
  padding: 12px 14px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: rgba(29, 78, 216, 0.06);
}
.compare-modal-scorecard-source {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 4px;
}
.compare-modal-scorecard-rank {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}
.compare-modal-scorecard-rankof {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate);
  margin-left: 6px;
}
.compare-modal-scorecard-explain {
  font-size: 12.5px;
  color: var(--slate);
  line-height: 1.45;
  margin: 4px 0 10px;
}
.compare-modal-score-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 4px;
}
.compare-modal-score-track {
  width: 100%;
  height: 10px;
  border-radius: 6px;
  background: #E9ECEF;
  overflow: hidden;
}
.compare-modal-score-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--accent);
  transition: width 0.2s ease;
}
.compare-modal-scorecard-finance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(29, 78, 216, 0.25);
}
.compare-modal-scorecard-financing-link {
  margin-top: 10px;
  text-align: right;
}
.compare-modal-scorecard-financing-link a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.compare-modal-scorecard-financing-link a:hover {
  text-decoration: underline;
}

.compare-modal-meta { font-size: 13px; color: var(--slate); }
.compare-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.compare-modal-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate); margin-bottom: 2px; }
.compare-modal-field-value { font-size: 13.5px; font-weight: 600; }

/* Itemized "what made up this total" lines under Total cost through
   payoff in the modal's scorecard — plain-language, not-bolded, so the
   headline total stays the thing your eye lands on first but the receipt
   behind it is never more than a glance away. */
.compare-modal-cost-breakdown {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--slate);
  line-height: 1.5;
}
.compare-modal-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Comparison page only: increase mini-card height substantially. */
.compare-mini-grid > .compare-mini-card {
  min-height: 420px;
}

.compare-mini-grid > .compare-mini-card .thumb {
  aspect-ratio: auto;
  height: 240px;
  min-height: 240px;
  flex: 0 0 240px;
}

.compare-mini-grid > .compare-mini-card .compare-mini-body {
  flex: 1 0 auto;
  min-height: 160px;
  display: flex;
  flex-direction: column;
}


/* Comparison cards: use the full available width for vehicle pictures. */
.compare-mini-grid > .compare-mini-card .thumb {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}


/* Match the Top Picks / Matches for You card sizing approach. */
.compare-mini-grid > .compare-mini-card {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.compare-mini-grid > .compare-mini-card .thumb {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.compare-mini-grid > .compare-mini-card .compare-mini-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}



/* Comparison cards: readable vehicle specifications. */
.compare-mini-specs {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.35;
}

.compare-mini-specs > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.compare-mini-specs > div > span {
  color: var(--slate);
  font-size: 10px;
}

.compare-mini-specs > div > strong {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.compare-mini-estimated {
  display: inline-block;
  color: var(--estimated, #8a5a00);
  font-size: 10px;
  font-weight: 700;
}