/* ============================================================
   AUCTION LIST CARD — V2 (DEVICE-SPECIFIC PARTIALS)

   Two scoped class trees, one per device-class partial:
     .lcv2m  → mobile  (vertical stack, big banner image)
     .lcv2d  → desktop (3-zone horizontal: gallery / content / price+actions)

   Each tree is independent — no @media gymnastics fighting one tree
   of HTML across breakpoints. Server-side selection via the `browser`
   gem in ApplicationHelper#auction_card_partial.

   Tablets currently route to the desktop partial. If a dedicated tablet
   layout is later wanted, add a `.lcv2t` tree alongside.
   ============================================================ */

/* Shared list-container behaviour for both variants */
.cars-list .car-item.car-item-v2 {
  width: 100%;
  max-width: 100%;
  flex: none;
}

/* ============================================================
   ───── MOBILE (.lcv2m) ─────
   Vertical stack:
     [ gallery banner (4:3) ]
     [ title + chip ]
     [ subtitle ]
     [ specs ]
     [ data grid 2-col ]
     [ price ]
     [ actions ]
   ============================================================ */
.lcv2m {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.lcv2m:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

/* Gallery banner */
.lcv2m-gallery {
  position: relative;
}
.lcv2m-gallery .list-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.lcv2m-gallery .list-image .list-image-main,
.lcv2m-gallery .list-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Re-show overlays on the full-width banner (parent v1 rules hide
   them at narrow tablet widths). */
.lcv2m-gallery .list-image .list-image-watermark,
.lcv2m-gallery .list-image .list-image-media-btn,
.lcv2m-gallery .list-image .list-image-nav,
.lcv2m-gallery .list-image::after {
  display: inline-flex;
}
.lcv2m-gallery .list-image .list-image-watermark { display: inline-block; }
.lcv2m-gallery .list-image::after { display: block; }
/* Touch-friendly nav arrows */
.lcv2m-gallery .list-image .list-image-nav {
  opacity: 1;
  pointer-events: auto;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
}
.lcv2m-gallery .list-image .list-image-nav:active {
  background: rgba(0, 0, 0, 0.65);
}

/* Overlay timer chip — top-center on mobile/tablet (between the
   site badge top-left and the image counter top-right). Sits above
   the photo's typical horizon so it doesn't cover the car's body. */
.lcv2m-overlay-time {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.78);
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(4px);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lcv2m-overlay-time small {
  font-weight: 500;
  color: #64748b;
  margin-right: 0.1rem;
  font-size: 0.78em;
}
.lcv2m-overlay-time--live { color: #b91c1c; }
.lcv2m-overlay-time--live i { color: #dc2626; }
.lcv2m-overlay-time--pending { color: #1d4ed8; }
.lcv2m-overlay-time--pending i { color: #2563eb; }
.lcv2m-overlay-time--ended,
.lcv2m-overlay-time--secondary { color: #475569; }

/* Body */
.lcv2m-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem 0.85rem;
}

/* Header: title + chip + subtitle */
.lcv2m-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title    chip"
    "subtitle subtitle";
  align-items: center;
  gap: 0.15rem 0.5rem;
}
.lcv2m-title {
  grid-area: title;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e3a8a;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lcv2m:hover .lcv2m-title { color: #1d4ed8; }
.lcv2m-subtitle {
  grid-area: subtitle;
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: 0.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcv2m-chip {
  grid-area: chip;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.15;
  align-self: center;
}
.lcv2m-chip-title-clean          { background: #15803d; color: #fff; }
.lcv2m-chip-title-salvage        { background: #475569; color: #fff; }
.lcv2m-chip-title-rebuilt        { background: #d97706; color: #fff; }
.lcv2m-chip-title-non_repairable { background: #b91c1c; color: #fff; }
.lcv2m-chip-title-parts_only     { background: #525252; color: #fff; }
.lcv2m-chip-title-flood          { background: #1d4ed8; color: #fff; }
.lcv2m-chip-title-bill_of_sale   { background: #475569; color: #fff; }
.lcv2m-chip-title-mso            { background: #0e7490; color: #fff; }
.lcv2m-chip-title-other          { background: #94a3b8; color: #fff; }

/* Top tag row (mobile) — sits between title and specs. Matches the
   .lcv2m-chip salvage/clean chip in terms of geometry (border-radius,
   padding, font-size, weight) so they read as a coherent strip of
   context labels rather than mixed pill/chip styles. Colour palette
   shifted: Insurance is the preferred seller (green tone), salvage
   chip is now neutral slate, no more yellow-on-yellow look. */
.lcv2m-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0 0;
}
.lcv2m-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.lcv2m-tag--auction-type {
  background: #4f46e5; color: #fff;
}
.lcv2m-tag--virtual {
  background: #7c3aed; color: #fff;
}
/* Seller-type — Insurance is the PREFERRED seller (positive green),
   not the legacy yellow-on-yellow. */
.lcv2m-tag--seller.seller-type-insurance {
  background: #15803d; color: #fff;
}
.lcv2m-tag--seller.seller-type-dealer {
  background: #1d4ed8; color: #fff;
}
.lcv2m-tag--seller.seller-type-rental {
  background: #0f766e; color: #fff;
}
.lcv2m-tag--seller.seller-type-financial {
  background: #475569; color: #fff;
}
.lcv2m-tag--seller.seller-type-broker {
  background: #c2410c; color: #fff;
}
.lcv2m-tag--seller.seller-type-private {
  background: #075985; color: #fff;
}
.lcv2m-tag--seller.seller-type-default {
  background: #64748b; color: #fff;
}

/* Specs row */
.lcv2m-specs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.15rem 0.7rem;
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.4;
  overflow-x: auto;
  scrollbar-width: none;
}
.lcv2m-specs::-webkit-scrollbar { display: none; }
.lcv2m-spec {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.lcv2m-spec i { color: #94a3b8; font-size: 0.95em; }
.lcv2m-spec--keys-yes,
.lcv2m-spec--keys-yes i { color: #15803d; }
.lcv2m-spec--keys-no,
.lcv2m-spec--keys-no i { color: #b91c1c; }
.lcv2m-key-no-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
}
.lcv2m-key-no-stack .lcv2m-key-cross {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4em;
  color: #b91c1c;
}

/* Data grid */
.lcv2m-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.85rem;
  row-gap: 0.4rem;
  font-size: 0.84rem;
  line-height: 1.3;
}
.lcv2m-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lcv2m-cell-label {
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lcv2m-cell-value {
  font-size: 0.86rem;
  color: #0f172a;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcv2m-cell-value--status-run_drive  { color: #15803d; }
.lcv2m-cell-value--status-starts     { color: #1d4ed8; }
.lcv2m-cell-value--status-stationary { color: #475569; }
.lcv2m-cell-value--status-pending    { color: #b45309; }
.lcv2m-cell-value--damage            { color: #b91c1c; }

/* Reserve price — small label+value line shown ABOVE the main price
   bar when the lot has both a current bid and a reserve. */
.lcv2m-price-secondary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid #f1f5f9;
}
.lcv2m-price-secondary-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  font-weight: 600;
}
.lcv2m-price-secondary-value {
  font-size: 0.85rem;
  color: #0f172a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lcv2m-price-secondary-locked {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.78rem; color: #1d4ed8; text-decoration: none;
}
.lcv2m-price-secondary-locked:hover { text-decoration: underline; }
/* When the secondary line is present, the main price bar's own
   border-top would draw a second hairline. Drop it so the two rows
   read as one block. */
.lcv2m-price-secondary + .lcv2m-price-bar { border-top: none; padding-top: 0.25rem; }

/* Price bar — single-row label+value */
.lcv2m-price-bar {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-top: 0.55rem;
  border-top: 1px solid #f1f5f9;
}
.lcv2m-price-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  font-weight: 700;
  flex-shrink: 0;
}
.lcv2m-price-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.lcv2m-price-locked {
  font-size: 0.85rem;
  color: #64748b;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
}
.lcv2m-price-locked:hover { color: #2563eb; text-decoration: underline; }
.lcv2m-price-bar--final .lcv2m-price-value   { color: #15803d; }
.lcv2m-price-bar--final .lcv2m-price-label   { color: #15803d; }
.lcv2m-price-bar--ended .lcv2m-price-label   { color: #b91c1c; }
.lcv2m-price-bar--neutral .lcv2m-price-label { color: #94a3b8; }
.lcv2m-price-bar--reserve .lcv2m-price-value { color: #1d4ed8; }
.lcv2m-price-bar--reserve .lcv2m-price-label { color: #1d4ed8; }

/* Actions row */
.lcv2m-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.15rem;
}
.lcv2m-action-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.75rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  min-height: 48px;
  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.lcv2m-action-btn:active { transform: translateY(1px); }
.lcv2m-action-btn--bid {
  background: #16a34a;
  color: #fff;
  border: 1px solid #16a34a;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.18);
}
.lcv2m-action-btn--bid:hover {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}
.lcv2m-action-btn--buy {
  background: #fff;
  color: #1d4ed8;
  border: 1px solid #1d4ed8;
}
.lcv2m-action-btn--buy:hover {
  background: #eff6ff;
  color: #1e40af;
  border-color: #1e40af;
}
.lcv2m-action-btn--buy .lcv2m-action-sep {
  color: currentColor;
  opacity: 0.4;
  font-weight: 400;
}
.lcv2m-action-btn--buy .lcv2m-action-price {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Landing carousel cells are narrow (~300–320px) — too tight to fit the
   bid button beside the long "Pirkti Dabar | $price" buy-now button, so
   the price spilled out past the button's right edge (its nowrap content
   overflowed the flex-shrunk box). In the carousel, stack the actions
   vertically (same as the desktop rail) so each button spans the full
   cell width and the price always stays inside its holder. The regular
   mobile list card is wide enough for the side-by-side row, so this is
   scoped to the carousel only. */
.lcaro .lcaro-cell .lcv2m-actions {
  flex-direction: column;
}

/* ============================================================
   ───── DESKTOP (.lcv2d) ─────
   3-zone horizontal grid:
     [ gallery (260×184) | content (header/specs/data) | rail (price/actions/seller) ]
   ============================================================ */
.lcv2d {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  margin-bottom: 0.85rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) minmax(220px, 260px);
  cursor: pointer;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
  max-width: 1500px;
  /* All grid cells stretch to row height by default. The gallery
     stretches with them via align-self:stretch on the gallery cell
     + the inner image filling 100% of that height. min-height keeps
     a sensible floor for low-content cards. */
  align-items: stretch;
  min-height: 184px;
}
.lcv2d:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

/* Gallery (zone 1).
   The image must NEVER crop sideways — auction photos are typically
   4:3 with the car centered, and cropping the sides amputates part
   of the vehicle. The gallery container holds a 4:3 aspect-ratio
   image area. If the card column gets taller than that area
   (because content+rail extend), pad the rest with the same fill
   color rather than stretch the image. object-fit: cover at 4:3 in
   a 4:3 box means no cropping for typical photos. */
.lcv2d-gallery {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background: #f1f5f9;
}
.lcv2d-gallery .list-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  position: relative;
  flex: 0 0 auto;
}
.lcv2d-gallery .list-image .list-image-main,
.lcv2d-gallery .list-image > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay time chip — bottom-center, translucent */
.lcv2d-overlay-time {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.78);
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(4px);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lcv2d-overlay-time small {
  font-weight: 500; color: #64748b;
  margin-right: 0.1rem; font-size: 0.78em;
}
.lcv2d-overlay-time--live { color: #b91c1c; }
.lcv2d-overlay-time--live i { color: #dc2626; }
.lcv2d-overlay-time--pending { color: #1d4ed8; }
.lcv2d-overlay-time--pending i { color: #2563eb; }
.lcv2d-overlay-time--ended,
.lcv2d-overlay-time--secondary { color: #475569; }

/* Content (zone 2) */
.lcv2d-content {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.15rem;
  min-width: 0;
}

.lcv2d-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.lcv2d-title {
  flex: 0 1 auto;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e3a8a;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.lcv2d:hover .lcv2d-title { color: #1d4ed8; }
.lcv2d-subtitle {
  flex: 1 0 100%;
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcv2d-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.15;
}
.lcv2d-chip-title-clean          { background: #15803d; color: #fff; }
.lcv2d-chip-title-salvage        { background: #475569; color: #fff; }
.lcv2d-chip-title-rebuilt        { background: #d97706; color: #fff; }
.lcv2d-chip-title-non_repairable { background: #b91c1c; color: #fff; }
.lcv2d-chip-title-parts_only     { background: #525252; color: #fff; }
.lcv2d-chip-title-flood          { background: #1d4ed8; color: #fff; }
.lcv2d-chip-title-bill_of_sale   { background: #475569; color: #fff; }
.lcv2d-chip-title-mso            { background: #0e7490; color: #fff; }
.lcv2d-chip-title-other          { background: #94a3b8; color: #fff; }

/* Top tags (desktop) — sit inline in the header alongside the
   salvage/clean title chip so the row reads as one strip of context
   labels. Geometry matches .lcv2d-chip (border-radius, padding, font
   size/weight). Insurance leads positive (green) since it's the
   preferred seller — never yellow-on-yellow again. */
.lcv2d-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.lcv2d-tag--auction-type {
  background: #4f46e5; color: #fff;
}
.lcv2d-tag--virtual {
  background: #7c3aed; color: #fff;
}
.lcv2d-tag--seller.seller-type-insurance {
  background: #15803d; color: #fff;
}
.lcv2d-tag--seller.seller-type-dealer {
  background: #1d4ed8; color: #fff;
}
.lcv2d-tag--seller.seller-type-rental {
  background: #0f766e; color: #fff;
}
.lcv2d-tag--seller.seller-type-financial {
  background: #475569; color: #fff;
}
.lcv2d-tag--seller.seller-type-broker {
  background: #c2410c; color: #fff;
}
.lcv2d-tag--seller.seller-type-private {
  background: #075985; color: #fff;
}
.lcv2d-tag--seller.seller-type-default {
  background: #64748b; color: #fff;
}

.lcv2d-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.85rem;
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.4;
}
.lcv2d-spec {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lcv2d-spec i { color: #94a3b8; font-size: 0.95em; }
.lcv2d-spec--keys-yes,
.lcv2d-spec--keys-yes i { color: #15803d; }
.lcv2d-spec--keys-no,
.lcv2d-spec--keys-no i { color: #b91c1c; }
.lcv2d-key-no-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
}
.lcv2d-key-no-stack .lcv2d-key-cross {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4em;
  color: #b91c1c;
}

.lcv2d-data {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(180px, 240px);
  column-gap: 1rem;
  row-gap: 0.4rem;
  font-size: 0.84rem;
  line-height: 1.3;
}
.lcv2d-cell { display: flex; flex-direction: column; min-width: 0; }
.lcv2d-cell-label {
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lcv2d-cell-value {
  font-size: 0.86rem;
  color: #0f172a;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcv2d-cell-value--status-run_drive  { color: #15803d; }
.lcv2d-cell-value--status-starts     { color: #1d4ed8; }
.lcv2d-cell-value--status-stationary { color: #475569; }
.lcv2d-cell-value--status-pending    { color: #b45309; }
.lcv2d-cell-value--damage            { color: #b91c1c; }

/* Rail (zone 3) — countdown + price + actions + seller, right-aligned */
.lcv2d-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
  padding: 1rem 1.15rem 1rem 0;
  border-left: 1px solid #f1f5f9;
  margin-left: 0.5rem;
  padding-left: 1.15rem;
  text-align: right;
}

/* Rail countdown — sits at the top of the rail, anchors urgency */
.lcv2d-rail-time {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lcv2d-rail-time i { font-size: 1.05em; }
.lcv2d-rail-time-label { color: #475569; font-weight: 600; }
.lcv2d-rail-time-value {
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.lcv2d-rail-time-value small {
  font-weight: 500;
  color: #94a3b8;
  margin-right: 0.15rem;
  font-size: 0.78em;
}
.lcv2d-rail-time--live i { color: #dc2626; }
.lcv2d-rail-time--live .lcv2d-rail-time-value { color: #b91c1c; }
.lcv2d-rail-time--pending i { color: #2563eb; }
.lcv2d-rail-time--pending .lcv2d-rail-time-label { color: #1d4ed8; }
.lcv2d-rail-time--ended i { color: #6b7280; }
.lcv2d-rail-time--ended .lcv2d-rail-time-label { color: #6b7280; }
.lcv2d-rail-time--secondary i { color: #94a3b8; }
.lcv2d-rail-time--secondary .lcv2d-rail-time-value { color: #475569; }

/* Reserve line — small label+value shown ABOVE the main price bar
   when the lot has both a current bid and a reserve. Sits on the
   right rail aligned with the main price bar. */
.lcv2d-price-secondary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  line-height: 1.15;
}
.lcv2d-price-secondary-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  font-weight: 600;
}
.lcv2d-price-secondary-value {
  font-size: 0.95rem;
  color: #475569;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lcv2d-price-secondary-locked {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.85rem; color: #1d4ed8; text-decoration: none;
}
.lcv2d-price-secondary-locked:hover { text-decoration: underline; }

.lcv2d-price-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}
.lcv2d-price-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  font-weight: 700;
}
.lcv2d-price-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.lcv2d-price-locked {
  font-size: 0.85rem;
  color: #64748b;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
}
.lcv2d-price-bar--final .lcv2d-price-value   { color: #15803d; }
.lcv2d-price-bar--final .lcv2d-price-label   { color: #15803d; }
.lcv2d-price-bar--ended .lcv2d-price-label   { color: #b91c1c; }
.lcv2d-price-bar--neutral .lcv2d-price-label { color: #94a3b8; }
.lcv2d-price-bar--reserve .lcv2d-price-value { color: #1d4ed8; }
.lcv2d-price-bar--reserve .lcv2d-price-label { color: #1d4ed8; }

.lcv2d-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.1rem;
}
.lcv2d-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.lcv2d-action-btn:active { transform: translateY(1px); }
.lcv2d-action-btn--bid {
  background: #16a34a; color: #fff; border: 1px solid #16a34a;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.18);
}
.lcv2d-action-btn--bid:hover {
  background: #15803d; border-color: #15803d; color: #fff;
}
.lcv2d-action-btn--buy {
  background: #fff; color: #1d4ed8; border: 1px solid #1d4ed8;
}
.lcv2d-action-btn--buy:hover {
  background: #eff6ff; color: #1e40af; border-color: #1e40af;
}
.lcv2d-action-btn--buy .lcv2d-action-sep {
  color: currentColor; opacity: 0.4; font-weight: 400;
}
.lcv2d-action-btn--buy .lcv2d-action-price {
  font-weight: 800; font-variant-numeric: tabular-nums;
}

.lcv2d-rail .seller-type-badge {
  font-size: 0.7rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-weight: 700;
  margin-top: auto;
}

/* Wider screens — bigger gallery + larger title (single column up to
   1080p; multi-column kicks in only on QHD/4K where cards have real
   horizontal room to breathe). 1080p stays single-column because two
   ~960px cards is too tight for the 3-zone layout. */
@media (min-width: 1400px) {
  .lcv2d {
    grid-template-columns: 280px minmax(0, 1fr) minmax(220px, 280px);
  }
  .lcv2d-title { font-size: 1.18rem; }
  .lcv2d-price-value { font-size: 1.6rem; }
}
@media (min-width: 1920px) {
  .lcv2d {
    grid-template-columns: 320px minmax(0, 1fr) minmax(240px, 300px);
  }
  .lcv2d-title { font-size: 1.22rem; }
  .lcv2d-price-value { font-size: 1.7rem; }
}

/* Anything BIGGER than 1080p gets 2 cards per row. 1080p (=1920px)
   stays single column (not enough horizontal real estate for two
   3-zone cards). */
@media (min-width: 1921px) {
  .cars-list.cars-list:has(.lcv2d) {
    display: grid !important;
    flex-direction: row !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.9rem !important;
  }
  .lcv2d {
    max-width: none;
    margin-bottom: 0;
    grid-template-columns: 280px minmax(0, 1fr) minmax(220px, 280px);
  }
}