/*!
 * [VEHICLE-FINDER 2026-09-10] Dealer page Vehicle Finder.
 *
 * Self contained on purpose. The dealer pages have no CSS custom properties and
 * no shared stylesheet: the theme colour is echoed inline by PHP in a few
 * hundred places. So this file defines its own --llf-* variables and the widget
 * sets --llf-primary from the page config at runtime.
 *
 * It also deliberately avoids the page's own body.modal-open class. That class
 * sets pointer-events:none on every button, link, input, select and textarea on
 * the page, which would disable the finder's own form. The finder locks scroll
 * with body.llf-lock instead.
 *
 * THREE THINGS HERE WILL BITE IF THEY ARE CHANGED CARELESSLY:
 *  1. The horizontal padding belongs to .llf-inner and .llf-head-inner, not to
 *     the bars around them. That is what puts the panel title, the filter rail
 *     and the card grid on one vertical line at every width. Move it back onto
 *     .llf-head and the header is 35px out of step with the content again.
 *  2. box-sizing is declared here for everything inside .llf-overlay. These
 *     sites load Tailwind, which sets it globally, and inheriting it from the
 *     host page means the layout silently changes if a page ever drops
 *     Tailwind. Do not remove the declaration.
 *  3. .llf-band takes the width of the page container it sits in. It used to
 *     carry max-width:1180px and read as a component that missed the layout,
 *     because the dealer pages' own grid is wider than that.
 */

.llf-lock { overflow: hidden !important; }
body.llf-lock .shop-by-payment-btn,
body.llf-lock #accessibility-widget { opacity: 0 !important; pointer-events: none !important; }

/* ---------------------------------------------------------------- triggers */

/* The band sits inside the page's own container, next to the inventory grid,
   so it takes that container's width rather than inventing one of its own. A
   1180px box centred inside a 1520px grid reads as a component that missed the
   layout, which is exactly what it was. */
.llf-band {
  margin: 2rem 0 0.5rem;
  max-width: none;
  border-radius: 18px;
  padding: 1.6rem 1.5rem;
  background: linear-gradient(135deg, var(--llf-primary, #005c90) 0%, var(--llf-primary-dark, #00405f) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
}
.llf-band-copy { flex: 1 1 320px; min-width: 260px; }
.llf-band h2 {
  margin: 0 0 0.35rem;
  font-size: 1.4rem;
  line-height: 1.25;
  font-weight: 800;
  color: #fff;
}
.llf-band p { margin: 0; font-size: 1rem; line-height: 1.5; color: rgba(255,255,255,0.92); }
.llf-band-btn {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  background: #fff;
  color: var(--llf-primary, #005c90);
  font-weight: 800;
  font-size: 1.02rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.llf-band-btn:hover, .llf-band-btn:focus { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28); }

.llf-empty-cta {
  display: block;
  margin: 0.9rem auto 0;
  border: 0;
  cursor: pointer;
  background: var(--llf-primary, #005c90);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
}

@media (max-width: 640px) {
  .llf-band { padding: 1.3rem 1.1rem; text-align: center; justify-content: center; }
  .llf-band h2 { font-size: 1.2rem; }
  .llf-band-btn { width: 100%; }
}

/* ----------------------------------------------------------------- overlay */

/* The finder is a full screen surface, not a floating dialog. A shopper who
   opens it should feel they moved to a page of this dealership's site and be
   able to work inside it exactly the way they work on the page behind it: the
   header stays put, the content underneath it is the only thing that scrolls,
   and nothing of the old page shows through at any width. */
.llf-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483000;      /* above the page chrome and the Tawk bubble */
  background: #f2f5fa;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.18s ease;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* The dynamic unit keeps the panel exactly one screen tall while a phone
   browser slides its address bar in and out, so the grid never sits under a
   toolbar and the page never gains a second scrollbar. */
@supports (height: 100dvh) {
  .llf-overlay { height: 100dvh; }
}
.llf-overlay.llf-on { opacity: 1; }

.llf-shell {
  width: 100%;
  max-width: none;
  height: 100%;
  background: #f2f5fa;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The only scrolling region. Chaining is contained so a flick at the end of the
   results never starts scrolling the dealer page underneath. */
.llf-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* One column, shared by the header and everything under it. The horizontal
   padding lives inside the column rather than on the bar around it, so the
   title, the filter card and the grid all start on the same vertical line at
   any width. Border-box is declared here rather than inherited from the page:
   these four sites style their own with Tailwind, and the widget must not
   depend on that. */
.llf-overlay, .llf-overlay *, .llf-overlay *::before, .llf-overlay *::after,
.llf-band, .llf-band *, .llf-empty-cta { box-sizing: border-box; }

.llf-inner, .llf-head-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: clamp(1.1rem, 4vw, 2.2rem);
  padding-right: clamp(1.1rem, 4vw, 2.2rem);
}

.llf-head {
  background: linear-gradient(135deg, var(--llf-primary, #005c90) 0%, var(--llf-primary-dark, #00405f) 100%);
  color: #fff;
  padding: 1.35rem 0;
  flex: 0 0 auto;
  box-shadow: 0 2px 14px rgba(2, 6, 23, 0.18);
  z-index: 2;
}
.llf-head-inner { position: relative; }
.llf-head-inner h2, .llf-head-inner p { padding-right: 3.4rem; }
.llf-head h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1.25; }
.llf-head p { margin: 0.3rem 0 0; font-size: 0.95rem; color: rgba(255,255,255,0.9); line-height: 1.45; }
.llf-close {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: clamp(1.1rem, 4vw, 2.2rem);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,0.16);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.llf-close:hover, .llf-close:focus { background: rgba(255,255,255,0.3); }

.llf-body { padding-top: 1.4rem; padding-bottom: 3rem; }

/* -------------------------------------------------------- search page layout */

/* Filters in a column of their own, results beside them. The rail sticks to
   the top of the scrolling region, so a shopper twenty cards down still has
   their ZIP, radius, make and price in front of them and can change any of
   them without scrolling back to the top. */
.llf-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
.llf-results { min-width: 0; }

@media (min-width: 901px) {
  .llf-layout { grid-template-columns: 304px minmax(0, 1fr); }
  .llf-rail {
    position: sticky;
    top: 0.9rem;
    /* A rail taller than the screen scrolls inside itself rather than pushing
       the sticky box past the bottom edge, which is what strands the search
       button on a laptop once every filter is open. */
    max-height: calc(100vh - 8.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .llf-rail .llf-controls { margin-bottom: 0; }
  .llf-rail .llf-actions { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .llf-rail .llf-actions .llf-btn { width: 100%; }
  .llf-rail .llf-link { text-align: left; }
  /* Three to a row against the rail. Four would drop each card under 230px and
     the vehicle in the photo stops being the thing you notice first. */
  .llf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@supports (height: 100dvh) {
  @media (min-width: 901px) {
    .llf-rail { max-height: calc(100dvh - 8.5rem); }
  }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .llf-layout { grid-template-columns: 268px minmax(0, 1fr); }
  .llf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ brand picker */

/* The card that leads the rail. Same shell as the filter card under it so the
   two read as one column rather than two competing panels. */
.llf-pick {
  background: #fff;
  border-radius: 16px;
  padding: 1.1rem 1.1rem 0.85rem;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
  margin-bottom: 1.1rem;
}
.llf-pick-head { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.8rem; }
.llf-pick-head h4 {
  margin: 0; font-size: 0.95rem; font-weight: 800; color: #0f172a; letter-spacing: -0.01em;
}
.llf-pick-note {
  font-size: 0.78rem; color: #64748b; font-weight: 600;
  /* Two lines of ticked brand names and no more. A shopper with nine brands on
     would otherwise push the whole grid off the bottom of the rail. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.llf-brands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* The gap carries the tick, which overhangs the top right corner of a
     selected tile. Tighter than this and a tick sits on its neighbour. */
  gap: 0.65rem 0.6rem;
  padding-top: 6px;
  padding-right: 6px;
}

/* One mark. The tile is the target, not the logo, so the whole thing is the
   button and a thumb has 88 x 78 to land on. */
.llf-brand {
  -webkit-appearance: none; appearance: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3rem;
  min-height: 84px;
  padding: 0.5rem 0.25rem 0.45rem;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  color: #334155;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.llf-brand:hover { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); transform: translateY(-1px); }
.llf-brand:focus-visible {
  outline: none;
  border-color: var(--llf-primary, #005c90);
  box-shadow: 0 0 0 3px var(--llf-primary-soft, rgba(0, 92, 144, 0.16));
}
.llf-brand.llf-on {
  border-color: var(--llf-primary, #005c90);
  background: var(--llf-primary-soft, rgba(0, 92, 144, 0.16));
  box-shadow: 0 0 0 1px var(--llf-primary, #005c90) inset;
}

.llf-brand-art {
  display: flex; align-items: center; justify-content: center;
  height: 30px; width: 100%;
}
/* Never squashed. The mark keeps its own ratio inside the box it is given,
   which is why both dimensions are capped rather than set. */
.llf-brand-art img {
  max-width: 100%;
  max-height: 30px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* The tile for a marque we hold no mark for. Set as a mark rather than dressed
   up as one, so a full grid reads as deliberate instead of half loaded. */
.llf-brand-word {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em;
  text-transform: uppercase; color: #94a3b8; text-align: center; line-height: 1.15;
}
.llf-brand.llf-on .llf-brand-word { color: var(--llf-primary-dark, #00405f); }
.llf-brand-name {
  font-size: 0.7rem; font-weight: 700; color: #475569; text-align: center;
  line-height: 1.15; width: 100%;
  /* Two lines, not one with a cut through it. The tile is 88px and
     "Mercedes-Benz" does not fit on a line of it, so a single line rendered
     "Mercedes-B..." which is the same trailing-off this release exists to get
     rid of. Wrapping is free here because the tile has the height for it. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.llf-brand.llf-on .llf-brand-name { color: var(--llf-primary-dark, #00405f); }

/* The tick that says this one is on. Sits over the corner of the tile so it
   never takes room from the mark, and it is the only part of the selected
   state that does not depend on the dealership's own colour being light
   enough to read against. */
.llf-brand { position: relative; }
.llf-brand-tick {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--llf-primary, #005c90);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
}
.llf-brand-tick svg { width: 12px; height: 12px; display: block; }
.llf-brand.llf-on .llf-brand-tick { display: flex; }

.llf-pick-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.9rem;
  margin-top: 0.8rem;
}
.llf-link-sm { font-size: 0.84rem; }
.llf-link-clear { color: #64748b; }

.llf-hint { font-size: 0.74rem; color: #94a3b8; line-height: 1.3; }
.llf-hint:empty { display: none; }

/* ------------------------------------------------------------ offer block */

.llf-offer {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0.95rem 0.9rem 0.85rem;
  margin-bottom: 0.3rem;
}
.llf-offer-q h4 {
  margin: 0 0 0.7rem; font-size: 0.98rem; font-weight: 800; color: #0f172a; line-height: 1.35;
}
.llf-choices { display: grid; gap: 0.5rem; }

/* A choice is a card, not a radio dot with a label beside it. The whole card is
   the target, which on a phone is the difference between one tap and three. */
.llf-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;
}
.llf-choice:hover { border-color: #cbd5e1; }
.llf-choice:focus-visible {
  outline: none;
  border-color: var(--llf-primary, #005c90);
  box-shadow: 0 0 0 3px var(--llf-primary-soft, rgba(0, 92, 144, 0.16));
}
.llf-choice.llf-on {
  border-color: var(--llf-primary, #005c90);
  background: var(--llf-primary-soft, rgba(0, 92, 144, 0.16));
}
.llf-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;
}
.llf-choice.llf-on .llf-choice-dot {
  border-color: var(--llf-primary, #005c90);
  box-shadow: 0 0 0 4px var(--llf-primary, #005c90) inset;
}
.llf-choice-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.llf-choice-title { font-size: 0.92rem; font-weight: 700; color: #0f172a; line-height: 1.3; }
.llf-choice-note { font-size: 0.78rem; color: #64748b; line-height: 1.35; }

/* Neither panel exists until the question is answered. */
.llf-offer-panel { display: none; margin-top: 0.8rem; }
.llf-offer-panel.llf-on { display: block; }
.llf-offer-panel .llf-fine { margin-top: 0.5rem; }

.llf-err-block { display: none; margin-top: 0.6rem; font-weight: 600; }
.llf-err-block.llf-on { display: block; }

/* ----------------------------------------------------------------- filters */

.llf-controls {
  background: #fff;
  border-radius: 16px;
  padding: 1.1rem 1.1rem 0.9rem;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
  margin-bottom: 1.1rem;
}
.llf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 0.75rem; }
.llf-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.llf-field label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #64748b; }
.llf-field input, .llf-field select {
  width: 100%;
  height: 46px;
  padding: 0 0.75rem;
  font-size: 1rem;
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
}
.llf-field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 18px;
  padding-right: 2rem;
}
.llf-field input:focus, .llf-field select:focus {
  outline: none;
  border-color: var(--llf-primary, #005c90);
  box-shadow: 0 0 0 3px var(--llf-primary-soft, rgba(0, 92, 144, 0.16));
}
.llf-field.llf-bad input, .llf-field.llf-bad select { border-color: #dc2626; }
.llf-err { font-size: 0.8rem; color: #dc2626; display: none; }
.llf-field.llf-bad .llf-err { display: block; }

.llf-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.9rem; flex-wrap: wrap; }
.llf-btn {
  border: 0;
  cursor: pointer;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.82rem 1.6rem;
  background: var(--llf-primary, #005c90);
  color: #fff;
  transition: filter 0.15s ease;
}
.llf-btn:hover, .llf-btn:focus { filter: brightness(1.08); }
.llf-btn[disabled] { opacity: 0.6; cursor: default; }
.llf-btn-ghost { background: transparent; color: var(--llf-primary, #005c90); border: 1px solid #cbd5e1; }
/* A vehicle already asked about in this visit. Still a button, because sending
   again with a note about a trade has to stay possible; it just stops reading
   as an unanswered call to action. */
.llf-btn-sent {
  background: #eef6ee;
  color: #166534;
  box-shadow: inset 0 0 0 1px #bbe3c4;
}
.llf-btn-sent:hover, .llf-btn-sent:focus { filter: none; background: #e3f1e6; }
.llf-btn-ghost:hover, .llf-btn-ghost:focus { background: #f1f5f9; filter: none; }
.llf-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--llf-primary, #005c90); font-weight: 700; font-size: 0.94rem; text-decoration: underline;
}
.llf-more-wrap { display: none; margin-top: 0.75rem; }
.llf-more-wrap.llf-on { display: block; }

/* ----------------------------------------------------------------- results */

.llf-status { font-size: 0.98rem; color: #475569; margin: 0 0 0.85rem; min-height: 1.2rem; }
.llf-status strong { color: #0f172a; }

.llf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.llf-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.llf-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14); }
.llf-photo { position: relative; aspect-ratio: 4 / 3; background: #e2e8f0; overflow: hidden; }
/* Listing photos come from the store currently holding the car, and many carry
   that store's name, address, phone and website burned into a band along the
   top or bottom edge. Redacting the dealer fields server side counts for nothing
   if a shopper can read the competitor straight off the picture. Two things
   handle it together: a zoom crop that takes about eleven percent off every
   side, and an opaque footer band across the bottom carrying our own
   availability line, which is where these watermarks almost always sit. The
   band is real design rather than a patch: it puts the reassurance on the
   photo and gives the card back a line of height. */
.llf-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.52);
  transform-origin: center center;
}
.llf-photo-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem 0.7rem 0.55rem;
  background: linear-gradient(to top, rgba(6, 12, 22, 0.96) 0%, rgba(6, 12, 22, 0.94) 52%, rgba(6, 12, 22, 0.78) 74%, rgba(6, 12, 22, 0) 100%);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.3;
}
.llf-photo-foot svg { flex: 0 0 auto; color: #4ade80; }
/* The lighter twin along the top edge, where a dealer group's name is the other
   place these watermarks land. It doubles as the ground the New and Certified
   tags sit on, so it reads as depth rather than as a patch. */
.llf-photo::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(6, 12, 22, 0.92) 0%, rgba(6, 12, 22, 0.82) 40%, rgba(6, 12, 22, 0.45) 70%, rgba(6, 12, 22, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.llf-tag { z-index: 2; }
.llf-photo .llf-noimg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 0.86rem; font-weight: 600; text-align: center; padding: 0 1rem;
}
.llf-tag {
  position: absolute; top: 0.6rem; left: 0.6rem;
  background: rgba(15, 23, 42, 0.82); color: #fff;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.28rem 0.6rem; border-radius: 999px;
}
.llf-card-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.llf-title { font-size: 1.02rem; font-weight: 800; color: #0f172a; line-height: 1.3; }
.llf-trim { font-size: 0.88rem; color: #64748b; margin-top: -0.25rem; }
.llf-price { font-size: 1.18rem; font-weight: 800; color: var(--llf-primary, #005c90); }
.llf-specs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.llf-spec { background: #f1f5f9; color: #475569; font-size: 0.76rem; font-weight: 600; padding: 0.22rem 0.5rem; border-radius: 6px; }
.llf-card-acts { margin-top: auto; display: grid; gap: 0.4rem; }
.llf-card .llf-btn { width: 100%; padding: 0.72rem 1rem; font-size: 0.95rem; }
.llf-card-acts .llf-btn { margin-top: 0; }
/* The second ask is the quieter of the two. Availability is what most shoppers
   came for and it keeps the solid button; the offer sits under it as an outline
   so both are obviously available without either shouting over the other. */
.llf-btn-offer {
  background: #fff;
  color: var(--llf-primary, #005c90);
  border: 1.5px solid var(--llf-primary, #005c90);
}
.llf-btn-offer:hover, .llf-btn-offer:focus {
  filter: none;
  background: var(--llf-primary-soft, rgba(0, 92, 144, 0.16));
}
.llf-btn-offer.llf-btn-sent { border-color: #bfe0c6; }

.llf-skel { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(15,23,42,0.06); }
.llf-skel .llf-photo { background: linear-gradient(90deg, #e8edf3 25%, #f1f5f9 37%, #e8edf3 63%); background-size: 400% 100%; animation: llf-shimmer 1.2s ease infinite; }
.llf-skel-line { height: 12px; margin: 0.75rem 1rem 0; border-radius: 6px; background: linear-gradient(90deg, #e8edf3 25%, #f1f5f9 37%, #e8edf3 63%); background-size: 400% 100%; animation: llf-shimmer 1.2s ease infinite; }
.llf-skel-line.llf-short { width: 55%; margin-bottom: 1rem; }
@keyframes llf-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.llf-note {
  /* The empty state is a message, not a card, so it spans the whole grid
     rather than sitting in the first of three columns. */
  grid-column: 1 / -1;
  background: #fff; border-radius: 14px; padding: 2rem 1.5rem; text-align: center;
  color: #475569; font-size: 1rem; line-height: 1.6; box-shadow: 0 2px 10px rgba(15,23,42,0.07);
}
.llf-note strong { display: block; color: #0f172a; font-size: 1.1rem; margin-bottom: 0.4rem; }
.llf-note .llf-btn { margin-top: 1rem; }

.llf-loadmore { display: flex; justify-content: center; margin-top: 1.2rem; }

/* ----------------------------------------------------------------- request */

/* The panel is a whole screen now, so a short form pinned to the top edge
   leaves the lower half empty. Auto margins centre it when there is room and
   compute to zero the moment the form is taller than the screen, so nothing
   ever ends up out of reach. */
.llf-body.llf-centered { display: flex; flex-direction: column; min-height: 100%; }
.llf-body.llf-centered > .llf-req,
.llf-body.llf-centered > .llf-done { margin-top: auto; margin-bottom: auto; }

.llf-req { max-width: 720px; margin: 0 auto; }
.llf-picked {
  background: #fff; border-radius: 14px; padding: 1rem; margin-bottom: 1rem;
  display: flex; gap: 1rem; align-items: center; box-shadow: 0 2px 10px rgba(15,23,42,0.07);
}
.llf-picked img { width: 108px; height: 81px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; background: #e2e8f0; }
.llf-picked { overflow: hidden; }
.llf-picked-meta { min-width: 0; }
.llf-form { background: #fff; border-radius: 16px; padding: 1.2rem; box-shadow: 0 2px 10px rgba(15,23,42,0.07); }
.llf-form .llf-row { margin-bottom: 0.75rem; }
/* The one field that is still asked on its own, on the tell-us-what-you-want
   path, takes the full width of the form. */
.llf-row-one { grid-template-columns: 1fr; }
.llf-form textarea {
  width: 100%; min-height: 84px; padding: 0.7rem 0.75rem; font-size: 1rem; color: #0f172a;
  border: 1px solid #cbd5e1; border-radius: 10px; font-family: inherit; resize: vertical;
}
.llf-form textarea:focus { outline: none; border-color: var(--llf-primary, #005c90); box-shadow: 0 0 0 3px var(--llf-primary-soft, rgba(0,92,144,0.16)); }
.llf-req .llf-btn { width: 100%; margin-top: 0.4rem; padding: 1rem; font-size: 1.05rem; }
.llf-fine { font-size: 0.82rem; color: #64748b; text-align: center; margin-top: 0.75rem; line-height: 1.5; }
.llf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ lead lightbox */

/* The ask opens over the results instead of replacing them, so the shopper
   never loses their place in the grid and can ask about a second vehicle
   without scrolling back to find it. */
.llf-lb {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.2rem;
  opacity: 0;
  transition: opacity 0.16s ease;
}
.llf-lb.llf-on { opacity: 1; }
.llf-lb-back {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(8, 15, 26, 0.58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.llf-lb-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;
}
.llf-lb.llf-on .llf-lb-panel { transform: none; }
.llf-lb-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: #eef2f7;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.llf-lb-close:hover, .llf-lb-close:focus { background: #e2e8f0; color: #0f172a; }
.llf-lb-head { padding-right: 2.6rem; margin-bottom: 0.95rem; }
.llf-lb-head h3 { margin: 0; font-size: 1.25rem; font-weight: 800; color: #0f172a; line-height: 1.25; }
.llf-lb-head p { margin: 0.3rem 0 0; font-size: 0.92rem; color: #64748b; line-height: 1.5; }
/* Inside the lightbox the form is already on white, so it drops the card it
   wears out on the results page. */
.llf-lb-body .llf-form { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.llf-lb-body .llf-picked { box-shadow: none; border: 1px solid #e2e8f0; padding: 0.7rem; margin-bottom: 0.95rem; }
.llf-lb-body .llf-picked img { width: 86px; height: 65px; }
.llf-lb-body .llf-form .llf-btn { width: 100%; margin-top: 0.5rem; padding: 0.95rem; font-size: 1.02rem; }
.llf-lb-done { text-align: center; padding: 0.6rem 0 0.2rem; }
.llf-lb-done h3 { margin: 0 0 0.45rem; font-size: 1.3rem; font-weight: 800; color: #0f172a; }
.llf-lb-done p { margin: 0 0 0.6rem; color: #475569; font-size: 0.98rem; line-height: 1.55; }
.llf-lb-done .llf-call { display: inline-block; margin: 0.4rem 0 0.2rem; }
.llf-lb-done .llf-btn { display: block; width: 100%; margin-top: 1rem; }
.llf-lb-done .llf-done-mark { width: 62px; height: 62px; margin-bottom: 0.9rem; }
/* The results hold their place while the lightbox is up. */
.llf-frozen { overflow: hidden !important; }

.llf-alert { border-radius: 10px; padding: 0.8rem 1rem; font-size: 0.94rem; margin-bottom: 0.9rem; display: none; }
.llf-alert.llf-on { display: block; }
.llf-alert-bad { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.llf-done { text-align: center; max-width: 560px; margin: 1.5rem auto; }
.llf-done-mark {
  width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 1.1rem;
  background: #dcfce7; color: #16a34a; display: flex; align-items: center; justify-content: center;
}
.llf-done h3 { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 800; color: #0f172a; }
.llf-done p { margin: 0 0 0.5rem; color: #475569; font-size: 1.02rem; line-height: 1.6; }
.llf-done .llf-call {
  display: inline-block; margin-top: 0.9rem; background: var(--llf-primary, #005c90); color: #fff;
  font-weight: 800; font-size: 1.08rem; padding: 0.9rem 1.8rem; border-radius: 999px; text-decoration: none;
}

@media (max-width: 640px) {
  .llf-layout { gap: 0.9rem; }
  .llf-inner, .llf-head-inner { padding-left: 0.9rem; padding-right: 0.9rem; }
  .llf-body { padding-top: 0.9rem; padding-bottom: 2.4rem; }
  .llf-head { padding: 0.95rem 0; }
  .llf-head-inner h2, .llf-head-inner p { padding-right: 3rem; }
  .llf-close { right: 0.9rem; }
  .llf-head h2 { font-size: 1.15rem; }
  .llf-head p { font-size: 0.87rem; }
  /* Once the shopper starts working the results, the strapline has done its
     job and the screen is worth more than the sentence. The title stays, so
     they always know where they are. */
  .llf-shell.llf-scrolled .llf-head p {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
  }
  .llf-head p { max-height: 3.4rem; opacity: 1; transition: max-height 0.18s ease, opacity 0.18s ease, margin-top 0.18s ease; }
  .llf-close { width: 38px; height: 38px; }
  .llf-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; }
  .llf-picked img { width: 84px; height: 63px; }
  /* Two columns rather than one. At 390px the default 165px track cannot fit a
     pair once the body and card padding are taken out, so the whole filter set
     stacked into a full screen of its own and results started below the fold. */
  .llf-controls { padding: 0.9rem 0.8rem 0.8rem; }
  .llf-row { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 0.6rem; }
  .llf-field label { font-size: 0.72rem; }
  .llf-field input, .llf-field select { height: 44px; font-size: 0.95rem; }
  .llf-actions .llf-btn { flex: 1 1 100%; }
  /* Two cards to a row means roughly 160px of usable card width, so the card
     type steps down with it and the request button stays on one line. */
  .llf-card-body { padding: 0.7rem 0.7rem 0.8rem; gap: 0.35rem; }
  .llf-title { font-size: 0.9rem; }
  .llf-trim { font-size: 0.78rem; }
  .llf-price { font-size: 1rem; }
  .llf-spec { font-size: 0.68rem; padding: 0.18rem 0.4rem; }
  .llf-card .llf-btn { font-size: 0.82rem; padding: 0.62rem 0.4rem; }
  .llf-card-acts { gap: 0.35rem; }
  /* Four to a row on a phone. Three tiles at 132px each would put a single
     mark on a line of its own and the grid stops reading as a grid. */
  .llf-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
  .llf-brand { min-height: 68px; padding: 0.4rem 0.15rem 0.35rem; }
  .llf-brand-art, .llf-brand-art img { height: 24px; max-height: 24px; }
  .llf-brand-name { font-size: 0.62rem; }
  .llf-pick { padding: 0.9rem 0.8rem 0.75rem; }
  .llf-photo-foot { font-size: 0.7rem; padding: 1.75rem 0.5rem 0.45rem; gap: 0.25rem; }
}

@media (max-width: 640px) {
  /* On a phone it rises from the bottom, which is where a thumb already is and
     what every native app does with a short form like this. */
  .llf-lb { padding: 0; align-items: flex-end; }
  .llf-lb-panel {
    max-width: none;
    max-height: 94%;
    border-radius: 20px 20px 0 0;
    padding: 1.1rem 1rem 1.3rem;
    transform: translateY(100%);
    transition: transform 0.22s ease;
  }
  /* [SHEET 2026-09-18] The same grab handle every other panel on a dealer page
     carries, so the Vehicle Finder's ask does not read as a different piece of
     software from the one behind it. */
  .llf-lb-panel { padding-top: 1.5rem; }
  .llf-lb-panel::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 42px;
    height: 4px;
    margin-left: -21px;
    border-radius: 99px;
    background: rgba(15, 23, 42, 0.16);
    pointer-events: none;
    z-index: 3;
  }
  .llf-lb-head h3 { font-size: 1.15rem; }
  .llf-lb-body .llf-row { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .llf-lb-body .llf-row-one { grid-template-columns: 1fr; }
  .llf-offer { padding: 0.8rem 0.75rem 0.75rem; }
  .llf-offer-q h4 { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .llf-overlay, .llf-shell, .llf-card, .llf-band-btn, .llf-head p,
  .llf-lb, .llf-lb-panel, .llf-brand, .llf-choice { transition: none; }
  .llf-brand:hover { transform: none; }
  .llf-lb-panel { transform: none; }
  .llf-skel .llf-photo, .llf-skel-line { animation: none; }
}