/* ll-vehicle.css  [VDETAIL 2026-09-20]
   The vehicle card shows less and the vehicle popup shows everything.

   THE CARD. Owner, 2026-09-20: a card carrying nine spec pills is a lot to
   take in at a glance. The card now carries the photograph, the title, the
   stock number and mileage, the price and the buttons. The pills are still
   rendered (the popup reads them) but never shown.

   THE POPUP. The whole vehicle on the left, the Get the Best Price form on
   the right, already open, so a shopper never has to go looking for the way
   to ask. Under 900px the two stack: vehicle first, form under it. */

.inventory-card .inv-info-grid { display: none !important; }
.inventory-card .inventory-image-wrap,
.inventory-card .inv-title { cursor: pointer; }
.inventory-card .inv-details-line { margin-bottom: 0.35rem; }

/* The row that says there is more: the condition and an invitation. */
.llvd-more {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0.15rem 0 0.85rem;
  padding: 0.5rem 0.2rem 0.5rem 0;
  border: 0;
  border-top: 1px solid #edf1f5;
  border-bottom: 1px solid #edf1f5;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: #22303f;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.llvd-more .llvd-cond {
  flex: none;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: var(--llvd-primary, #111);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.llvd-more .llvd-more-t { flex: 1 1 auto; }
.llvd-more .llvd-more-n { flex: none; color: #6b7a8c; font-weight: 600; font-size: 0.82rem; }
.llvd-more svg { flex: none; width: 18px; height: 18px; color: var(--llvd-primary, #111); transition: transform 0.18s ease; }
@media (hover: hover) { .llvd-more:hover svg { transform: translateX(3px); } }

/* ------------------------------------------------------------ the popup */

.llvd, .llvd * { box-sizing: border-box; }
.llvd {
  position: fixed;
  inset: 0;
  z-index: 9999;          /* over the corner buttons (chat 9990, calendar 9999), under the page's own modals (10000): Make an Offer opens on top of this */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: 'Maven Pro', Arial, sans-serif;
  color: #0f172a;
}
.llvd-back {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 24, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: llvd-fade 0.22s ease;
}
.llvd-panel {
  position: relative;
  width: min(1060px, 100%);
  max-height: 92vh;
  max-height: 92dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: llvd-rise 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes llvd-fade { from { opacity: 0; } }
@keyframes llvd-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } }

.llvd-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #1f2937;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.llvd-x:hover { background: #fff; }

/* left: the vehicle */
.llvd-main {
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.26) transparent;
}
.llvd-main::-webkit-scrollbar { width: 8px; }
.llvd-main::-webkit-scrollbar-track { background: transparent; margin: 16px 0; }
.llvd-main::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.22); border-radius: 99px; border: 2px solid #fff; }
.llvd-shot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #eef2f6;
}
/* [2026-09-20] Feed photographs are 4:3 lot shots and a fair share carry a
   banner or bar baked along an edge; a plain cover crop can leave a sliver of
   it at the foot of the frame. The picture is zoomed a touch and sat a little
   low in the frame, the same cut the Vehicle Finder and the offer cards use,
   so the frame is always all car. */
.llvd-shot { overflow: hidden; }
.llvd-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 56%; display: block; transform: scale(1.12); transform-origin: center 56%; }
.llvd-price, .llvd-pay {
  position: absolute;
  bottom: 14px;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  font-weight: 800;
  line-height: 1.05;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.llvd-price { right: 14px; font-size: 1.15rem; }
.llvd-pay { left: 14px; font-size: 1rem; display: flex; flex-direction: column; }
.llvd-pay small { font-size: 0.68rem; font-weight: 600; opacity: 0.85; letter-spacing: 0.02em; }

.llvd-body { padding: 1.15rem 1.4rem 1.4rem; }
.llvd-title {
  margin: 0 0 0.35rem;
  font-size: 1.55rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding-right: 1rem;
}
.llvd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #4b5a6b;
}
.llvd-meta .llvd-cond {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--llvd-primary, #111);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.llvd-meta b { color: #0f172a; font-weight: 800; }

.llvd-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.4rem;
  margin: 0 0 1.1rem;
  padding: 0;
}
.llvd-spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid #edf1f5;
  font-size: 0.93rem;
}
.llvd-spec dt { margin: 0; color: #6b7a8c; font-weight: 600; white-space: nowrap; }
.llvd-spec dd { margin: 0; color: #0f172a; font-weight: 800; text-align: right; overflow-wrap: anywhere; }

.llvd-actions { display: flex; gap: 0.6rem; margin-top: 0.2rem; }
.llvd-btn {
  flex: 1 1 0;
  min-height: 46px;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  border: 2px solid var(--llvd-primary, #111);
  background: #fff;
  color: var(--llvd-primary, #111);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.llvd-btn:hover { background: var(--llvd-primary, #111); color: #fff; }
.llvd-btn:active { transform: scale(0.98); }
.llvd-note { margin: 0.9rem 0 0; font-size: 0.78rem; line-height: 1.45; color: #6b7a8c; }

/* right: the form, already open */
.llvd-side {
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
  border-left: 1px solid #e6ebf1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.26) transparent;
}
.llvd-side::-webkit-scrollbar { width: 8px; }
.llvd-side::-webkit-scrollbar-track { background: transparent; margin: 16px 0; }
.llvd-side::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.22); border-radius: 99px; border: 2px solid #f5f7fa; }
/* The form sits in the middle of its column: the same air above and below,
   whatever height the vehicle beside it gives the popup. Auto margins, not
   justify-content, so a column shorter than the form still scrolls from the
   top instead of clipping the heading. */
.llvd-formwrap { margin: auto 0; }
.llvd-form { padding: 1.5rem 1.35rem 1.35rem; }
.llvd-form h3 { margin: 0 0 0.3rem; font-size: 1.32rem; font-weight: 800; letter-spacing: -0.01em; }
.llvd-form .llvd-lead { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.45; color: #4b5a6b; font-weight: 500; }
.llvd-field { margin-bottom: 0.75rem; }
.llvd-field label { display: block; margin-bottom: 0.3rem; font-size: 0.82rem; font-weight: 700; color: #334155; }
.llvd-field label .llvd-req { color: #dc2626; }
.llvd-field input, .llvd-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid #d5dce5;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: #0f172a;
}
.llvd-field input:focus, .llvd-field textarea:focus { outline: none; border-color: var(--llvd-primary, #111); box-shadow: 0 0 0 3px var(--llvd-primary-wash, rgba(0, 0, 0, 0.08)); }
.llvd-field input.is-bad, .llvd-field textarea.is-bad { border-color: #dc2626; }
.llvd-choice label { margin-bottom: 0.4rem; }
.llvd-pills { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.llvd-pill {
  flex: 1 1 auto;
  min-height: 42px;
  padding: 0.55rem 0.8rem;
  border: 1.5px solid #d5dce5;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.llvd-pill:hover { border-color: var(--llvd-primary, #111); }
.llvd-pill:active { transform: scale(0.97); }
.llvd-pill.is-on { background: var(--llvd-primary, #111); border-color: var(--llvd-primary, #111); color: #fff; }
.llvd-err { display: none; margin: 0.3rem 0 0; font-size: 0.8rem; font-weight: 700; color: #b91c1c; }
.llvd-err.is-on { display: block; }
.llvd-submit {
  width: 100%;
  min-height: 50px;
  margin-top: 0.4rem;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 12px;
  background: var(--llvd-primary, #111);
  color: #fff;
  font: inherit;
  font-size: 1.04rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px var(--llvd-primary, rgba(0, 0, 0, 0.5));
  transition: transform 0.12s ease, filter 0.15s ease;
}
.llvd-submit:hover { filter: brightness(1.08); }
.llvd-submit:active { transform: scale(0.985); }
.llvd-submit[disabled] { opacity: 0.7; cursor: default; }
.llvd-fine { margin: 0.75rem 0 0; font-size: 0.74rem; line-height: 1.45; color: #6b7a8c; text-align: center; }

/* the form's own success state */
.llvd-done { display: none; padding: 2.2rem 1.35rem; text-align: center; }
.llvd-done.is-on { display: block; }
.llvd-done .llvd-tick {
  width: 58px; height: 58px; margin: 0 auto 0.9rem;
  border-radius: 50%; background: #16a34a; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.llvd-done .llvd-tick svg { width: 30px; height: 30px; }
.llvd-done h3 { margin: 0 0 0.4rem; font-size: 1.3rem; font-weight: 800; }
.llvd-done p { margin: 0; font-size: 0.94rem; line-height: 1.5; color: #4b5a6b; }

/* The corner buttons (calendar, accessibility, chat) step aside while the
   vehicle is open; on a phone they sat over the form's fine print. */
body.llvd-open .ll-visit-fab, body.llvo-open .ll-visit-fab,
body.llvd-open .accessibility-trigger, body.llvo-open .accessibility-trigger,
body.llvd-open .accessibility-widget, body.llvo-open .accessibility-widget,
body.llvd-open .lldc-launcher, body.llvo-open .lldc-launcher,
body.llvd-open .lldc-nudge, body.llvo-open .lldc-nudge,
body.llvd-open #lldc-boot, body.llvo-open #lldc-boot { visibility: hidden !important; pointer-events: none !important; }

/* ------------------------------------------------------------ phones */
@media (max-width: 899px) {
  .llvd { padding: 0; align-items: flex-end; }
  .llvd-panel {
    display: block;
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .llvd-main, .llvd-side { overflow: visible; }
  .llvd-side { border-left: 0; border-top: 1px solid #e6ebf1; }
  .llvd-shot { aspect-ratio: 16 / 10; }
  .llvd-body { padding: 1rem 1.1rem 1.2rem; }
  .llvd-title { font-size: 1.32rem; }
  .llvd-specs { grid-template-columns: 1fr; }
  .llvd-form { padding: 1.3rem 1.1rem 2.2rem; }
  .llvd-x { top: 10px; right: 10px; }
}
@media (max-width: 480px) {
  .llvd-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .llvd-back, .llvd-panel { animation: none; }
}


/* ------------------------------------------------------ make an offer
   The same sheet the Vehicle Finder draws (its llf-* rules, mirrored), so
   the two Make an Offer doors look and behave as one. */
.llvo, .llvo * { box-sizing: border-box; }
.llvo {
  position: fixed;
  inset: 0;
  z-index: 10002;          /* over the vehicle popup and over the page's modals */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.2rem;
  opacity: 0;
  transition: opacity 0.16s ease;
  font-family: 'Maven Pro', Arial, sans-serif;
  color: #0f172a;
}
.llvo.llvo-on { opacity: 1; }
.llvo-back { position: absolute; inset: 0; background: rgba(8, 15, 26, 0.58); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.llvo-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.42);
  padding: 1.35rem 1.35rem 1.5rem;
  transform: translateY(12px) scale(0.99);
  transition: transform 0.18s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.26) transparent;
}
.llvo.llvo-on .llvo-panel { transform: none; }
.llvo-panel::-webkit-scrollbar { width: 8px; }
.llvo-panel::-webkit-scrollbar-track { background: transparent; margin: 16px 0; }
.llvo-panel::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.22); border-radius: 99px; border: 2px solid #fff; }
.llvo-grip { display: none; }
.llvo-x {
  position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: #eef2f7; color: #475569; display: flex; align-items: center; justify-content: center;
}
.llvo-x:hover, .llvo-x:focus { background: #e2e8f0; color: #0f172a; }
.llvo-head { padding-right: 2.6rem; margin-bottom: 0.95rem; }
.llvo-head h3 { margin: 0; font-size: 1.25rem; font-weight: 800; color: #0f172a; line-height: 1.25; }
.llvo-head p { margin: 0.3rem 0 0; font-size: 0.92rem; color: #64748b; line-height: 1.5; }
.llvo-alert { display: none; border-radius: 10px; padding: 0.8rem 1rem; font-size: 0.94rem; margin-bottom: 0.9rem; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.llvo-alert.llvo-on { display: block; }
.llvo-picked { display: flex; gap: 0.8rem; align-items: center; border: 1px solid #e2e8f0; border-radius: 12px; padding: 0.7rem; margin-bottom: 0.95rem; overflow: hidden; }
.llvo-picked img { width: 86px; height: 65px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; background: #e2e8f0; }
.llvo-picked-meta { min-width: 0; }
.llvo-ptitle { font-size: 1.02rem; font-weight: 800; color: #0f172a; line-height: 1.3; }
.llvo-ptrim { font-size: 0.85rem; color: #64748b; }
.llvo-pprice { font-size: 1.18rem; font-weight: 800; color: var(--llvd-primary, #111); }
.llvo-form { display: flex; flex-direction: column; gap: 0.85rem; }
.llvo-offer { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 0.95rem 0.9rem 0.85rem; }
.llvo-offer-q h4 { margin: 0 0 0.7rem; font-size: 0.98rem; font-weight: 800; color: #0f172a; line-height: 1.35; }
.llvo-choices { display: grid; gap: 0.5rem; }
.llvo-choice {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: flex-start; gap: 0.6rem;
  width: 100%; text-align: left;
  padding: 0.7rem 0.8rem;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 11px;
  cursor: pointer; font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.llvo-choice:hover { border-color: #cbd5e1; }
.llvo-choice:focus-visible { outline: none; border-color: var(--llvd-primary, #111); box-shadow: 0 0 0 3px var(--llvd-primary-wash, rgba(0, 0, 0, 0.13)); }
.llvo-choice.llvo-on { border-color: var(--llvd-primary, #111); background: var(--llvd-primary-wash, rgba(0, 0, 0, 0.13)); }
.llvo-choice-dot { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.llvo-choice.llvo-on .llvo-choice-dot { border-color: var(--llvd-primary, #111); box-shadow: 0 0 0 4px var(--llvd-primary, #111) inset; }
.llvo-choice-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.llvo-choice-title { font-size: 0.92rem; font-weight: 700; color: #0f172a; line-height: 1.3; }
.llvo-choice-note { font-size: 0.78rem; color: #64748b; line-height: 1.35; }
.llvo-offer-panel { display: none; margin-top: 0.8rem; }
.llvo-offer-panel.llvo-on { display: block; }
.llvo-offer-panel .llvo-fine { margin-top: 0.5rem; }
.llvo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 0.75rem; }
.llvo-row-one { grid-template-columns: 1fr; }
.llvo-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.llvo-field label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #64748b; }
.llvo-field input { width: 100%; height: 46px; padding: 0 0.75rem; font: inherit; font-size: 1rem; color: #0f172a; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; appearance: none; -webkit-appearance: none; }
.llvo-field textarea { width: 100%; min-height: 84px; padding: 0.7rem 0.75rem; font: inherit; font-size: 1rem; color: #0f172a; border: 1px solid #cbd5e1; border-radius: 10px; resize: vertical; }
.llvo-field input:focus, .llvo-field textarea:focus { outline: none; border-color: var(--llvd-primary, #111); box-shadow: 0 0 0 3px var(--llvd-primary-wash, rgba(0, 0, 0, 0.13)); }
.llvo-field.llvo-bad input { border-color: #dc2626; }
.llvo-err { font-size: 0.8rem; color: #dc2626; display: none; }
.llvo-field.llvo-bad .llvo-err { display: block; }
.llvo-err-block { display: none; margin-top: 0.6rem; font-weight: 600; }
.llvo-err-block.llvo-on { display: block; }
.llvo-btn { width: 100%; margin-top: 0.5rem; border: 0; cursor: pointer; border-radius: 10px; font: inherit; font-weight: 700; font-size: 1.02rem; padding: 0.95rem; background: var(--llvd-primary, #111); color: #fff; transition: filter 0.15s ease; }
.llvo-btn:hover, .llvo-btn:focus { filter: brightness(1.08); }
.llvo-btn[disabled] { opacity: 0.6; cursor: default; }
.llvo-fine { font-size: 0.82rem; color: #64748b; text-align: center; margin-top: 0.75rem; line-height: 1.5; }
.llvo-done { display: none; text-align: center; padding: 0.6rem 0 0.2rem; }
.llvo-done.llvo-on { display: block; }
.llvo-done-mark { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 0.9rem; background: #dcfce7; color: #16a34a; display: flex; align-items: center; justify-content: center; }
.llvo-done h3 { margin: 0 0 0.45rem; font-size: 1.3rem; font-weight: 800; color: #0f172a; }
.llvo-done p { margin: 0 0 0.6rem; color: #475569; font-size: 0.98rem; line-height: 1.55; }
.llvo-done .llvo-btn { margin-top: 1rem; }
@media (max-width: 640px) {
  .llvo { padding: 0; align-items: flex-end; }
  .llvo-panel { max-width: none; max-height: 94vh; max-height: 94dvh; border-radius: 18px 18px 0 0; padding: 1.1rem 1rem 1.6rem; transform: translateY(24px); }
  .llvo-grip { display: block; width: 44px; height: 5px; border-radius: 99px; background: #cbd5e1; margin: 0 auto 0.85rem; }
  .llvo-x { top: 0.95rem; }
  .llvo-field input { height: 44px; font-size: 0.95rem; }
  .llvo-field label { font-size: 0.72rem; }
  .llvo-offer { padding: 0.8rem 0.75rem 0.75rem; }
}
@media (prefers-reduced-motion: reduce) { .llvo, .llvo-panel, .llvo-choice { transition: none; } }