/* ==========================================================================
   Car Dealer (_cd) — compare vehicles (Ppt\_cd\Compare + assets/js/cd-compare.js)
   Design tokens only, so every car design (light or dark) re-skins it.
   ========================================================================== */

/* ---- The Compare control --------------------------------------------------- */
.ppt-cmp-tog{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--ppt-font-body,inherit);font-size:12.5px;font-weight:700;line-height:1;
  color:var(--ppt-ink,#1e293b);
  transition:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease;
}
.ppt-cmp-tog:focus-visible{outline:2px solid var(--ppt-brand,#2563eb);outline-offset:2px;}
.ppt-cmp-tog-box{
  flex:none;width:15px;height:15px;border-radius:4px;display:grid;place-items:center;
  border:1.6px solid color-mix(in srgb,var(--ppt-ink,#1e293b) 45%,transparent);
  background:var(--ppt-surface,#fff);
}
.ppt-cmp-tog.is-on .ppt-cmp-tog-box{background:var(--ppt-brand,#2563eb);border-color:var(--ppt-brand,#2563eb);}
.ppt-cmp-tog.is-on .ppt-cmp-tog-box::after{
  content:"";width:4px;height:8px;margin-top:-2px;transform:rotate(45deg);
  border:solid var(--ppt-brand-ink,#fff);border-width:0 2px 2px 0;
}

/* On a card's photo (search results): bottom-left, opposite the save heart. The overlay
   it sits in (.ppt-lc-favwrap) is pointer-events:none, so the pill takes clicks back. */
.ppt-cmp-tog--card{
  position:absolute;left:12px;bottom:12px;pointer-events:auto;z-index:4;
  padding:8px 11px;border:0;border-radius:999px;
  background:color-mix(in srgb,var(--ppt-surface,#fff) 92%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(15,23,42,.16);
}
.ppt-cmp-tog--card:hover{background:var(--ppt-surface,#fff);}
.ppt-cmp-tog--card.is-on{background:var(--ppt-brand,#2563eb);color:var(--ppt-brand-ink,#fff);}
.ppt-cmp-tog--card.is-on .ppt-cmp-tog-box{background:var(--ppt-brand-ink,#fff);border-color:var(--ppt-brand-ink,#fff);}
.ppt-cmp-tog--card.is-on .ppt-cmp-tog-box::after{border-color:var(--ppt-brand,#2563eb);}
/* Search in "compare mode": the pills ask to be noticed. */
.ppt-cmp-mode .ppt-cmp-tog--card:not(.is-on){box-shadow:0 0 0 2px var(--ppt-brand,#2563eb),0 2px 10px rgba(15,23,42,.2);}
/* The overlay that carries the pill mirrors the card's photo — the same geometry as the
   heart's overlay, which it reuses. Only the pill's own corner changes. */
.ppt-lc-cmpwrap{z-index:4;}

/* Veloce inventory cards: the design's own "Compare" corner, now a real control. */
.ppt-cmp-tog--vl{position:absolute;top:13px;right:13px;z-index:2;font-family:var(--ppt-font-mono,inherit);font-size:11px;font-weight:600;
  color:var(--ppt-ink);background:color-mix(in srgb,var(--ppt-bg,#fff) 60%,transparent);border:1px solid var(--ppt-line);padding:6px 10px;border-radius:6px;}
.ppt-cmp-tog--vl .ppt-cmp-tog-box{width:14px;height:14px;background:transparent;border-color:var(--ppt-muted,currentColor);}
.ppt-cmp-tog--vl.is-on{border-color:var(--ppt-brand,#2563eb);}

/* In the single page's sidebar box: a full-width row like the box's other actions. */
.ppt-cmp-tog--box{
  width:100%;gap:11px;padding:11px 13px;text-align:start;
  border:1.5px solid var(--ppt-line,#e2e8f0);border-radius:11px;
  background:var(--ppt-surface,#fff);font-size:13.5px;
}
.ppt-cmp-tog--box:hover{border-color:var(--ppt-brand,#2563eb);}
.ppt-cmp-tog-ic{display:inline-flex;flex:none;}
.ppt-cmp-tog-ic svg{width:20px;height:20px;}
.ppt-cmp-tog--box.is-on{border-color:var(--ppt-brand,#2563eb);color:var(--ppt-brand,#2563eb);
  background:color-mix(in srgb,var(--ppt-brand,#2563eb) 8%,var(--ppt-surface,#fff));}

/* ---- Search-page instructions (compare mode) ------------------------------ */
.ppt-cmp-banner{
  display:flex;align-items:flex-start;gap:14px;margin:0 0 20px;padding:16px 18px;
  border:1.5px solid color-mix(in srgb,var(--ppt-brand,#2563eb) 45%,transparent);
  border-radius:var(--ppt-radius,14px);
  background:color-mix(in srgb,var(--ppt-brand,#2563eb) 8%,var(--ppt-surface,#fff));
  color:var(--ppt-ink,#1e293b);font-family:var(--ppt-font-body,inherit);
}
.ppt-cmp-banner[hidden]{display:none;}
.ppt-cmp-banner-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  background:var(--ppt-brand,#2563eb);color:var(--ppt-brand-ink,#fff);}
.ppt-cmp-banner-txt{flex:1;min-width:0;font-size:14px;line-height:1.5;}
.ppt-cmp-banner-txt strong{display:block;font-size:15.5px;font-family:var(--ppt-font-display,inherit);margin-bottom:4px;}
.ppt-cmp-banner-txt ol{margin:0;padding-inline-start:20px;color:var(--ppt-ink-2,#475569);}
.ppt-cmp-banner-x{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:transparent;
  color:var(--ppt-ink-2,#475569);font-size:22px;line-height:1;cursor:pointer;}
.ppt-cmp-banner-x:hover{background:color-mix(in srgb,var(--ppt-ink,#1e293b) 8%,transparent);}

/* ---- The tray ---------------------------------------------------------------- */
.ppt-cmp-tray{
  position:fixed;left:50%;transform:translateX(-50%);z-index:9990;
  bottom:calc(14px + var(--ppt-mnav-h,0px));
  width:min(980px,calc(100% - 24px));
  font-family:var(--ppt-font-body,inherit);color:var(--ppt-ink,#1e293b);
}
.ppt-cmp-tray[hidden]{display:none;}
.ppt-cmp-tray-in{
  display:flex;align-items:center;gap:14px;padding:10px 12px 10px 18px;
  background:var(--ppt-surface,#fff);border:1px solid var(--ppt-line,#e2e8f0);border-radius:16px;
  box-shadow:0 14px 40px rgba(15,23,42,.24);
}
.ppt-cmp-tray.is-pulse .ppt-cmp-tray-in{animation:pptCmpPulse .45s ease;}
@keyframes pptCmpPulse{0%{transform:scale(1)}40%{transform:scale(1.015)}100%{transform:scale(1)}}
.ppt-cmp-tray-head{flex:none;display:flex;flex-direction:column;gap:2px;}
.ppt-cmp-tray-t{font-size:14px;font-family:var(--ppt-font-display,inherit);}
.ppt-cmp-tray-n{font-size:12px;color:var(--ppt-ink-2,#64748b);white-space:nowrap;}
.ppt-cmp-tray-list{flex:1;min-width:0;display:flex;gap:8px;margin:0;padding:0;list-style:none;overflow:hidden;}
.ppt-cmp-chip{
  display:flex;align-items:center;gap:8px;min-width:0;max-width:210px;padding:4px 4px 4px 4px;
  border:1px solid var(--ppt-line,#e2e8f0);border-radius:10px;background:var(--ppt-surface-2,transparent);
}
.ppt-cmp-chip img{flex:none;width:44px;height:32px;object-fit:cover;border-radius:6px;display:block;}
.ppt-cmp-chip-n{flex:1;min-width:0;font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ppt-cmp-chip-x{flex:none;width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:var(--ppt-ink-2,#64748b);
  font-size:17px;line-height:1;cursor:pointer;}
.ppt-cmp-chip-x:hover{background:color-mix(in srgb,var(--ppt-ink,#1e293b) 9%,transparent);color:var(--ppt-ink,#1e293b);}
.ppt-cmp-tray-acts{flex:none;display:flex;align-items:center;gap:6px;}
.ppt-cmp-tray-clear{border:0;background:transparent;color:var(--ppt-ink-2,#64748b);font-size:13px;font-weight:600;
  padding:10px 10px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.ppt-cmp-tray-go,.ppt-cmp-btn{
  display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:11px;
  background:var(--ppt-brand,#2563eb);color:var(--ppt-brand-ink,#fff);font-size:14px;font-weight:700;
  text-decoration:none;white-space:nowrap;
}
.ppt-cmp-tray-go:hover,.ppt-cmp-btn:hover{filter:brightness(1.07);color:var(--ppt-brand-ink,#fff);}
.ppt-cmp-tray-go.is-off{opacity:.55;cursor:not-allowed;}
.ppt-cmp-tray-note{
  margin:8px auto 0;width:max-content;max-width:100%;padding:8px 14px;border-radius:10px;
  background:var(--ppt-ink,#0f172a);color:var(--ppt-surface,#fff);font-size:13px;text-align:center;
}
.ppt-cmp-tray-note[hidden]{display:none;}
/* Room under the page for the tray, so it never covers the last row or the footer. */
html.ppt-cmp-has-tray body{padding-bottom:calc(96px + var(--ppt-mnav-h,0px)) !important;}
/* Other things pinned to the bottom corners (social-proof pop-ups, toasts, the chat
   launcher) step up above the tray instead of covering it. */
html.ppt-cmp-has-tray .ppt-sp-stack,
html.ppt-cmp-has-tray .ppt-toast-stack,
html.ppt-cmp-has-tray .ppt-nc,
html.ppt-cmp-has-tray .ppt-mgr{bottom:calc(104px + var(--ppt-mnav-h,0px)) !important;}

@media (max-width:640px){
  .ppt-cmp-banner{padding:14px;}
  .ppt-cmp-banner-ic{display:none;}
  .ppt-cmp-tray-in{gap:10px;padding:10px 10px 10px 14px;}
  .ppt-cmp-tray-list{display:none;}
  .ppt-cmp-tray-head{flex:1;min-width:0;}
  .ppt-cmp-tray-go{padding:10px 14px;}
}

/* ---- /compare/ ------------------------------------------------------------------ */
.ppt-cmp-page{padding:40px 0 64px;font-family:var(--ppt-font-body,inherit);color:var(--ppt-ink,#1e293b);}
.ppt-cmp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.ppt-cmp-h{margin:0;font-family:var(--ppt-font-display,inherit);font-size:clamp(26px,3.4vw,38px);font-weight:800;color:var(--ppt-ink,#1e293b);}
.ppt-cmp-sub{margin:6px 0 0;color:var(--ppt-ink-2,#64748b);font-size:14.5px;}
.ppt-cmp-back{font-size:14px;font-weight:700;color:var(--ppt-brand,#2563eb);text-decoration:none;}
.ppt-cmp-back:hover{text-decoration:underline;}

.ppt-cmp-empty{max-width:520px;margin:30px auto;padding:36px 28px;text-align:center;
  border:1px dashed var(--ppt-line,#cbd5e1);border-radius:var(--ppt-radius,16px);background:var(--ppt-surface,#fff);}
.ppt-cmp-empty-h{margin:0 0 8px;font-size:20px;font-family:var(--ppt-font-display,inherit);color:var(--ppt-ink,#1e293b);}
.ppt-cmp-empty-txt{margin:0 0 18px;color:var(--ppt-ink-2,#64748b);}

.ppt-cmp-bar{display:flex;justify-content:flex-end;margin-bottom:10px;}
.ppt-cmp-diff{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;cursor:pointer;}
.ppt-cmp-diff input{width:17px;height:17px;accent-color:var(--ppt-brand,#2563eb);}

/* The table scrolls inside its own box on a narrow screen — never the page. */
.ppt-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ppt-line,#e2e8f0);
  border-radius:var(--ppt-radius,16px);background:var(--ppt-surface,#fff);}
.ppt-cmp-table{width:100%;min-width:calc(150px + var(--ppt-cmp-cols,3) * 190px);border-collapse:separate;border-spacing:0;table-layout:fixed;}
.ppt-cmp-table th,.ppt-cmp-table td{padding:13px 16px;border-bottom:1px solid var(--ppt-line,#e2e8f0);text-align:start;vertical-align:top;font-size:14.5px;}
.ppt-cmp-table tbody tr:last-child th,.ppt-cmp-table tbody tr:last-child td{border-bottom:0;}
.ppt-cmp-table thead th{vertical-align:top;}
.ppt-cmp-table tbody th{width:150px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ppt-ink-2,#64748b);}
/* Row labels stay put while the vehicles scroll sideways. */
.ppt-cmp-table tbody th,.ppt-cmp-corner{position:sticky;left:0;z-index:2;background:var(--ppt-surface,#fff);}
.ppt-cmp-corner{width:150px;z-index:3;}
@media (max-width:640px){
  .ppt-cmp-table{min-width:calc(100px + var(--ppt-cmp-cols,3) * 170px);}
  .ppt-cmp-corner,.ppt-cmp-table tbody th{width:100px;}
  .ppt-cmp-table th,.ppt-cmp-table td{padding:12px;}
}
.ppt-cmp-table tbody tr.is-diff td{font-weight:600;}
.ppt-cmp-table td.is-none{color:var(--ppt-ink-2,#94a3b8);}
.ppt-cmp-table tbody tr:nth-child(even) td,.ppt-cmp-table tbody tr:nth-child(even) th{
  background:color-mix(in srgb,var(--ppt-ink,#1e293b) 3%,var(--ppt-surface,#fff));}

.ppt-cmp-car{position:relative;font-weight:400;}
.ppt-cmp-car-media{display:block;margin-bottom:10px;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--ppt-surface-2,#f1f5f9);}
.ppt-cmp-car-media img{width:100%;height:100%;object-fit:cover;display:block;}
.ppt-cmp-car-name{display:block;font-size:16px;font-weight:800;line-height:1.3;color:var(--ppt-ink,#1e293b);text-decoration:none;
  font-family:var(--ppt-font-display,inherit);}
a.ppt-cmp-car-name:hover{color:var(--ppt-brand,#2563eb);}
.ppt-cmp-car-go{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;color:var(--ppt-brand,#2563eb);text-decoration:none;}
.ppt-cmp-car-go:hover{text-decoration:underline;}
.ppt-cmp-car-x{position:absolute;top:20px;right:22px;z-index:1;width:30px;height:30px;border:0;border-radius:50%;
  background:color-mix(in srgb,#0b0f17 60%,transparent);color:#fff;font-size:19px;line-height:1;cursor:pointer;}
.ppt-cmp-car-x:hover{background:#b42318;}
.ppt-cmp-price{display:block;font-size:18px;font-weight:800;color:var(--ppt-ink,#1e293b);}
.ppt-cmp-was{display:block;font-size:13px;color:var(--ppt-ink-2,#64748b);font-weight:500;}

.ppt-cmp-add{vertical-align:middle !important;}
.ppt-cmp-add-a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:4/3;
  border:1.5px dashed var(--ppt-line,#cbd5e1);border-radius:10px;color:var(--ppt-ink-2,#64748b);
  font-size:14px;font-weight:700;text-decoration:none;}
.ppt-cmp-add-a:hover{border-color:var(--ppt-brand,#2563eb);color:var(--ppt-brand,#2563eb);}
.ppt-cmp-add-plus{font-size:28px;line-height:1;}