/* ============================================================
   MOMENTUM AUCTIONS — components
   Consumes tokens from theme.css. Mobile-first: base rules are
   phone rules; media queries scale UP.
   ============================================================ */
@import url('theme.css');

/* ══════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.container-wide { max-width: var(--container-wide); }

.section    { padding-block: var(--section-y); }
.section-sm { padding-block: clamp(32px, 5vw, 56px); }
.bg-surface { background: var(--surface); }
.bg-white   { background: var(--white); }
.bg-ink     { background: var(--ink-2); color: var(--text-on-dark); }

/* Section heading block */
.section-head { margin-bottom: var(--s-10); }
.section-head.center { text-align: center; margin-inline: auto; max-width: 660px; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--s-3);
}
.section-title { font-size: var(--fs-3xl); margin-bottom: var(--s-3); }
.section-sub   { color: var(--text-muted); font-size: var(--fs-md); max-width: 62ch; }
.bg-ink .section-title { color: #fff; }
.bg-ink .section-sub   { color: var(--text-on-dark-muted); }

/* ══════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 13px var(--s-6);
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
}
.btn:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: var(--shadow-red); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(200,16,46,.35); outline-offset: 2px; }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }

.btn-dark  { background: var(--ink-2); }
.btn-dark:hover { background: var(--ink); box-shadow: none; }

.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); transform: none; box-shadow: none; }

.btn-success { background: var(--success); } .btn-success:hover { background: #177f43; box-shadow: none; }
.btn-danger  { background: var(--danger); }  .btn-danger:hover  { background: #b21f31; box-shadow: none; }
.btn-warning { background: var(--warning); } .btn-warning:hover { background: #a97303; box-shadow: none; }

.btn-sm    { padding: 10px var(--s-4); min-height: 44px; font-size: var(--fs-sm); }
.btn-lg    { padding: 16px var(--s-8); min-height: 54px; font-size: var(--fs-md); }
.btn-block { display: flex; width: 100%; }

/* ══════════════════════════════════════════════════════
   CARDS (generic)
   ══════════════════════════════════════════════════════ */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-xs);
}
.card-pad-lg { padding: var(--s-8); }
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.card-header h2 { font-size: var(--fs-xl); }

/* ══════════════════════════════════════════════════════
   VEHICLE CARD  — the workhorse
   ══════════════════════════════════════════════════════ */
.vehicle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 560px)  { .vehicle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .vehicle-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
@media (min-width: 1200px) { .vehicle-grid { grid-template-columns: repeat(4, 1fr); } }
.vehicle-grid.cols-3 { }
@media (min-width: 1200px) { .vehicle-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.v-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  height: 100%;
}
.v-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.v-card-media {
  position: relative;
  aspect-ratio: 4 / 3;          /* stops layout shift while images load */
  background: var(--surface-2);
  overflow: hidden;
}
.v-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.v-card:hover .v-card-media img { transform: scale(1.06); }

.v-card-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-2);
  color: var(--text-soft);
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
}
.v-card-placeholder i { font-size: 2rem; opacity: .55; }
.v-card-placeholder span { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }

/* Badges over the image */
.v-card-badges {
  position: absolute; top: var(--s-3); left: var(--s-3);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
  z-index: 2;
}
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-xs);
}
.badge-live   { background: var(--live); color: #fff; }
.badge-sold   { background: var(--success); color: #fff; }
.badge-ending { background: var(--warning); color: #fff; }
.badge-count  { background: rgba(20,20,31,.82); color: #fff; }

.badge-live .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
  70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Body */
.v-card-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.v-card-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.v-card-title {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.v-card:hover .v-card-title { color: var(--red); }

.v-card-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 2px;
}
.v-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.v-card-meta i { color: var(--text-soft); font-size: .8em; }

.v-card-price {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3);
}
.v-card-price-label { font-size: var(--fs-xs); color: var(--text-soft); text-transform: uppercase; letter-spacing: .07em; }
.v-card-price-value { font-size: var(--fs-xl); font-weight: 800; color: var(--red); line-height: 1.1; }
.v-card-bids { font-size: var(--fs-xs); color: var(--text-muted); text-align: right; }

.v-card-foot { padding: 0 var(--s-5) var(--s-5); }

/* Countdown strip */
.v-card-timer {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px;
  background: var(--surface);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: var(--s-3);
}
.v-card-timer i { color: var(--red); }
.v-card-timer.urgent { background: var(--danger-tint); color: var(--danger); }
.v-card-timer.ended  { background: var(--surface-2); color: var(--text-soft); }

/* ══════════════════════════════════════════════════════
   FILTER CHIPS
   ══════════════════════════════════════════════════════ */
.chip-row {
  display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center;
}
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px var(--s-4);
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: var(--t-fast);
  white-space: nowrap;
}
.chip:hover { border-color: var(--red); color: var(--red); }
.chip.active { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.chip-n {
  background: rgba(0,0,0,.08);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-size: var(--fs-xs);
}
.chip.active .chip-n { background: rgba(255,255,255,.22); }

/* ══════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.input, .select, .textarea {
  width: 100%;
  padding: 12px var(--s-4);
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200,16,46,.13);
}
.textarea { min-height: 110px; resize: vertical; padding-top: 12px; }
.hint { font-size: var(--fs-xs); color: var(--text-soft); }

.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 700px) {
  .form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Search bar */
.search-bar {
  display: grid; grid-template-columns: 1fr; gap: var(--s-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}
/* Disclosure toggle ("More filters") — full-size touch target */
.search-bar summary {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) 0;
  cursor: pointer;
  font-weight: 700; font-size: var(--fs-sm);
  color: var(--text-muted);
  list-style: none;
}
.search-bar summary::-webkit-details-marker { display: none; }
.search-bar summary:hover { color: var(--red); }
@media (min-width: 860px) { .search-bar { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; } }

/* ══════════════════════════════════════════════════════
   ALERTS
   ══════════════════════════════════════════════════════ */
.alert {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r);
  border-left: 4px solid;
  font-size: var(--fs-base);
  margin-bottom: var(--s-5);
}
.alert i { margin-top: 2px; }
.alert-success { background: var(--success-tint); border-color: var(--success); color: #14663a; }
.alert-error, .alert-danger { background: var(--danger-tint); border-color: var(--danger); color: #8e1f2c; }
.alert-warning { background: var(--warning-tint); border-color: var(--warning); color: #7a5502; }
.alert-info    { background: var(--info-tint);    border-color: var(--info);    color: #1d5b9e; }

/* ══════════════════════════════════════════════════════
   STAT TILES
   ══════════════════════════════════════════════════════ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}
@media (min-width: 720px)  { .stat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
@media (min-width: 1080px) { .stat-grid { grid-template-columns: repeat(5, 1fr); } }

.stat {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: var(--r);
  padding: var(--s-5);
  transition: var(--t-fast);
}
.stat:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.stat-value { font-size: var(--fs-2xl); font-weight: 800; color: var(--ink); line-height: 1.1; }
.stat-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-top: 4px; }
.stat-foot  { font-size: var(--fs-xs); color: var(--text-soft); margin-top: var(--s-2); }
.stat-foot a { color: var(--red); font-weight: 700; }
.stat.accent-green  { border-top-color: var(--success); } .stat.accent-green .stat-value  { color: var(--success); }
.stat.accent-amber  { border-top-color: var(--warning); } .stat.accent-amber .stat-value  { color: var(--warning); }
.stat.accent-blue   { border-top-color: var(--info); }    .stat.accent-blue .stat-value   { color: var(--info); }

/* ══════════════════════════════════════════════════════
   TABLES  → become stacked cards on phones
   ══════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; font-size: var(--fs-base); }
.table th, .table td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--line); }
.table th {
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  white-space: nowrap;
}
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--red-tint); }
.table tr.row-selected td { background: var(--red-tint); }

@media (max-width: 768px) {
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s-3);
    margin-bottom: var(--s-3);
    box-shadow: var(--shadow-xs);
  }
  .table-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 10px var(--s-2);
    text-align: right;
  }
  .table-cards td:last-child { border-bottom: none; }
  .table-cards td::before {
    content: attr(data-label);
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-soft);
    text-align: left;
    flex: none;
  }
  .table-cards td:not([data-label]) { justify-content: flex-end; }
}

/* Status text */
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); }
.status-active, .status-live { color: var(--success); }
.status-pending, .status-inactive { color: var(--warning); }
.status-closed { color: var(--text-soft); }
.status-suspended, .status-danger { color: var(--danger); }

/* ══════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════ */
.tabs {
  display: flex; gap: var(--s-1);
  border-bottom: 2px solid var(--line);
  margin-bottom: var(--s-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 13px var(--s-5);
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: var(--t-fast);
  display: inline-flex; align-items: center; gap: 7px;
}
.tab:hover { color: var(--red); }
.tab.active { color: var(--red); border-bottom-color: var(--red); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeUp .3s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ══════════════════════════════════════════════════════
   HERO / PAGE HEADER
   ══════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%);
  color: #fff;
  padding-block: clamp(48px, 9vw, 96px);
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.page-hero.red { background: linear-gradient(135deg, var(--red) 0%, var(--red-darker) 100%); }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .eyebrow { color: rgba(255,255,255,.75); }
.page-hero h1 { color: #fff; font-size: var(--fs-4xl); margin-bottom: var(--s-3); }
.page-hero p  { color: var(--text-on-dark-muted); font-size: var(--fs-lg); max-width: 62ch; }

.hero-stats { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-8); }
.hero-stat-value { font-size: var(--fs-2xl); font-weight: 800; color: #fff; }
.hero-stat-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.6); }

/* ══════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════ */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--s-16) var(--s-5);
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.empty-state i { font-size: 3rem; color: var(--line-strong); margin-bottom: var(--s-4); display: block; }
.empty-state h3 { font-size: var(--fs-xl); margin-bottom: var(--s-2); }
.empty-state p { color: var(--text-muted); max-width: 46ch; margin: 0 auto var(--s-6); }

/* ══════════════════════════════════════════════════════
   CTA BANNER
   ══════════════════════════════════════════════════════ */
.cta-banner {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(32px, 6vw, 64px) var(--s-6);
  text-align: center;
}
.cta-banner h2 { color: #fff; font-size: var(--fs-2xl); margin-bottom: var(--s-3); }
.cta-banner p { color: var(--text-on-dark-muted); margin-bottom: var(--s-6); max-width: 56ch; margin-inline: auto; }
.cta-actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════ */
.pagination { display: flex; gap: var(--s-2); justify-content: center; align-items: center; flex-wrap: wrap; margin-top: var(--s-10); }
.page-link {
  min-width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--white);
  font-weight: 700;
  font-size: var(--fs-sm);
  transition: var(--t-fast);
}
.page-link:hover { border-color: var(--red); color: var(--red); }
.page-link.active { background: var(--red); border-color: var(--red); color: #fff; }

/* ══════════════════════════════════════════════════════
   VEHICLE DETAIL PAGE
   ══════════════════════════════════════════════════════ */
.page-header {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%);
  color: #fff;
  padding-block: var(--s-8);
  margin-bottom: var(--s-6);
}
.page-header .container { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; }
.page-title { color: #fff; font-size: var(--fs-2xl); }

/* Status strip */
.status-banner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
  box-shadow: var(--shadow-xs);
}
@media (min-width: 780px) { .status-banner { grid-template-columns: repeat(4, 1fr); } }
.status-item { text-align: center; }
.status-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); margin-bottom: 3px; }
.status-value { font-size: var(--fs-xl); font-weight: 800; color: var(--ink); }

/* Gallery */
.gallery-container {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-6);
  box-shadow: var(--shadow-xs);
}
.main-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--surface-2);
  margin-bottom: var(--s-3);
}
@media (min-width: 900px) { .main-image { aspect-ratio: 16 / 10; } }
.thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: var(--s-2);
}
.thumbnail {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  opacity: .68;
  transition: var(--t-fast);
  background: var(--surface-2);
}
.thumbnail:hover, .thumbnail.active { opacity: 1; border-color: var(--red); }

/* Bid card / panels */
.bid-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-bottom: var(--s-6);
  box-shadow: var(--shadow-xs);
}
.card-title {
  font-size: var(--fs-lg);
  margin-bottom: var(--s-5);
  display: flex; align-items: center; gap: var(--s-2);
}
.card-title i { color: var(--red); }

.bid-form { display: flex; flex-direction: column; gap: var(--s-4); }
.input-group { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.input-group:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,.13); }
.input-prefix {
  display: flex; align-items: center;
  padding: 0 var(--s-4);
  background: var(--surface);
  border-right: 1px solid var(--line);
  font-weight: 800; color: var(--text-muted);
}
.bid-input { flex: 1; border: none; outline: none; padding: 14px var(--s-4); font-size: var(--fs-lg); font-weight: 700; min-height: 52px; }

.quick-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
@media (min-width: 560px) { .quick-buttons { grid-template-columns: repeat(4, 1fr); } }
.quick-btn {
  padding: 11px var(--s-2);
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--white);
  font-weight: 700; font-size: var(--fs-sm);
  cursor: pointer; transition: var(--t-fast);
}
.quick-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }

.submit-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%;
  padding: 16px;
  min-height: 54px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: var(--fs-md); font-weight: 800;
  cursor: pointer;
  transition: var(--t-fast);
}
.submit-btn:hover { background: var(--red-dark); box-shadow: var(--shadow-red); }
.submit-btn:disabled { opacity: .55; cursor: not-allowed; }

.buy-now-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 13px var(--s-6);
  border-radius: var(--r-pill);
  background: var(--warning); color: #fff;
  font-weight: 800; border: none; cursor: pointer;
}
.buy-now-btn:hover { background: #a97303; }

/* Specs */
.specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
@media (min-width: 780px) { .specs-grid { grid-template-columns: repeat(3, 1fr); } }
.spec-item {
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: var(--s-4);
}
.spec-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); margin-bottom: 3px; }
.spec-value { font-weight: 700; color: var(--ink); }

/* Live bid feed */
.live-updates { display: flex; flex-direction: column; gap: var(--s-2); max-height: 340px; overflow-y: auto; }
.bid-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--line-strong);
}
.bid-item.highlight-new { border-left-color: var(--red); background: var(--red-tint); animation: fadeUp .4s ease; }
.bid-amount { font-weight: 800; color: var(--red); }

/* ══════════════════════════════════════════════════════
   DASHBOARDS (admin + user)
   ══════════════════════════════════════════════════════ */
.welcome-banner {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(24px, 5vw, 44px);
  margin-bottom: var(--s-6);
}
.welcome-banner h1 { color: #fff; font-size: var(--fs-2xl); margin-bottom: 6px; }
.welcome-banner p  { color: var(--text-on-dark-muted); }

/* Legacy stat markup → new tiles */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}
@media (min-width: 720px)  { .stats-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
@media (min-width: 1080px) { .stats-grid { grid-template-columns: repeat(5, 1fr); } }

.stat-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: var(--r);
  padding: var(--s-5);
  text-align: left;
  transition: var(--t-fast);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.stat-number { font-size: var(--fs-2xl); font-weight: 800; color: var(--ink); line-height: 1.1; }
.stat-label  { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-top: 4px; }
.stat-card.highlight { background: linear-gradient(135deg, var(--red) 0%, var(--red-darker) 100%); border-color: transparent; }
.stat-card.highlight .stat-number, .stat-card.highlight .stat-label { color: #fff; }

/* Recent activity feed */
.recent-activity {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-bottom: var(--s-6);
  box-shadow: var(--shadow-xs);
}
.recent-activity h3 { font-size: var(--fs-lg); margin-bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-2); }
.recent-activity h3 i { color: var(--red); }
.activity-list { max-height: 330px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-2); }
.activity-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--red);
}
.activity-info { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.activity-bidder { font-weight: 800; color: var(--red); }
.activity-amount { font-weight: 800; }
.activity-time { font-size: var(--fs-xs); color: var(--text-soft); white-space: nowrap; }

/* Bulk action toolbar */
.bulk-bar {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  background: var(--red-tint);
  border: 1px solid var(--red-tint-2);
  border-radius: var(--r);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
  position: sticky;
  top: calc(var(--ticker-h) + var(--nav-h) + 4px);
  z-index: 60;
}
.bulk-count { font-weight: 800; color: var(--red); }
.bulk-spacer { flex: 1; }

/* Segment pills (user status filters) */
.seg-bar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-5); }
.seg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px var(--s-4); min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--text-muted);
  font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; transition: var(--t-fast);
}
.seg:hover { border-color: var(--red); color: var(--red); }
.seg.active { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.seg-n { background: rgba(0,0,0,.08); border-radius: var(--r-pill); padding: 1px 8px; font-size: var(--fs-xs); }
.seg.active .seg-n { background: rgba(255,255,255,.22); }

/* Checkboxes in tables */
.row-check, .user-row-check, #selectAllAuctions, #selectAllUsers {
  width: 18px; height: 18px; cursor: pointer; accent-color: var(--red);
}

/* Email Centre */
.compose-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
@media (min-width: 1000px) { .compose-grid { grid-template-columns: 1.55fr 1fr; } }

.wysiwyg-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-bottom: none;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: var(--s-2);
}
.wysiwyg-toolbar button {
  width: 36px; height: 34px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--white); color: var(--text-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: var(--t-fast);
}
.wysiwyg-toolbar button:hover { border-color: var(--red); color: var(--red); }
.wysiwyg-toolbar .sep { width: 1px; background: var(--line-strong); margin: 2px 4px; }
.wysiwyg-toolbar select, .wysiwyg-toolbar input[type=color] { width: auto; height: 34px; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }

#editor {
  min-height: 320px; max-height: 520px; overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  padding: var(--s-4); background: var(--white); line-height: 1.65;
}
#editor:focus { outline: none; border-color: var(--red); }
#previewFrame { width: 100%; height: 460px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }

.rcp-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s-3); }
.rcp-quick button {
  font-size: var(--fs-xs); padding: 7px 12px; min-height: 36px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--white); cursor: pointer; font-weight: 700; transition: var(--t-fast);
}
.rcp-quick button:hover { border-color: var(--red); color: var(--red); }
.rcp-quick .quick-inactive { border-color: var(--warning); color: #8a6100; }
.rcp-quick .quick-inactive:hover { background: var(--warning); color: #fff; }

.user-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.user-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); cursor: pointer;
}
.user-row:last-child { border-bottom: none; }
.user-row:hover { background: var(--surface); }
.user-row input { width: 16px; height: 16px; accent-color: var(--red); }
.user-row .u-name { font-weight: 700; }
.user-row .u-email { color: var(--text-soft); }

.badge-verified   { font-size: var(--fs-xs); background: var(--success-tint); color: #14663a; padding: 3px 9px; border-radius: var(--r-pill); margin-left: auto; font-weight: 700; }
.badge-unverified { font-size: var(--fs-xs); background: var(--surface-2); color: var(--text-soft); padding: 3px 9px; border-radius: var(--r-pill); margin-left: auto; font-weight: 700; }
.badge-inactive   { font-size: var(--fs-xs); background: var(--warning-tint); color: #8a6100; padding: 3px 9px; border-radius: var(--r-pill); margin-left: auto; font-weight: 800; }
.count-pill, .count-badge { background: var(--red); color: #fff; border-radius: var(--r-pill); padding: 2px 10px; font-size: var(--fs-xs); font-weight: 800; }

.send-bar {
  position: sticky; bottom: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  box-shadow: 0 -4px 16px rgba(20,20,31,.06);
  margin-top: var(--s-5);
}

.tabs2 { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); }
.tabs2 button {
  padding: 9px var(--s-4); min-height: 38px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--white); cursor: pointer; font-weight: 700; font-size: var(--fs-sm);
}
.tabs2 button.active { background: var(--red); color: #fff; border-color: var(--red); }

.bank-form label { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: 5px; }
.bank-form input, .bank-form textarea, .bank-form select {
  width: 100%; padding: 12px var(--s-4); min-height: 46px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.bank-form input:focus, .bank-form textarea:focus, .bank-form select:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,.13);
}
.form-grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.form-grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 700px) {
  .form-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .form-grid-3 { grid-template-columns: 130px 1fr 130px; align-items: end; }
}

/* Wide dashboard tables scroll inside their card on small screens
   instead of pushing the page sideways. */
.card { overflow-x: auto; }
.card > table { width: 100%; font-size: var(--fs-base); }
.card > table th, .card > table td { padding: var(--s-3); text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.card > table th {
  background: var(--surface);
  font-size: var(--fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); white-space: nowrap;
}
.card > table tbody tr:hover { background: var(--red-tint); }
.card > table tr.row-selected td { background: var(--red-tint); }
@media (max-width: 900px) {
  .card > table { min-width: 720px; }   /* forces the card to scroll, not the page */
}

.action-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-small { padding: 7px var(--s-3); min-height: 36px; font-size: var(--fs-xs); border-radius: var(--r-pill); }
.btn-secondary { background: var(--ink-2); }
.btn-secondary:hover { background: var(--ink); }
.btn-logout { background: var(--text-muted); }
.auction-image { width: 64px; height: 44px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }

/* ══════════════════════════════════════════════════════
   HOMEPAGE
   ══════════════════════════════════════════════════════ */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 55%, var(--red-darker) 140%);
  color: #fff;
  padding-block: clamp(56px, 10vw, 116px);
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.hero h1 { color: #fff; font-size: var(--fs-4xl); margin-bottom: var(--s-4); max-width: 18ch; }
.hero p  { color: var(--text-on-dark-muted); font-size: var(--fs-lg); max-width: 60ch; margin-bottom: var(--s-8); }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-10);
  max-width: 760px;
}
@media (min-width: 760px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }
.hero-stat-number { font-size: var(--fs-2xl); font-weight: 800; color: #fff; line-height: 1.1; }
.hero-stat-label  { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.62); margin-top: 3px; }

/* Section headers */
.section-header { margin-bottom: var(--s-10); }
.section-header.center, .auctions-header { text-align: left; }
.section-title { font-size: var(--fs-3xl); margin-bottom: var(--s-3); }
.section-subtitle { color: var(--text-muted); font-size: var(--fs-md); max-width: 62ch; }

.auctions-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-8);
}

/* Feature cards */
.features { padding-block: var(--section-y); }
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 620px)  { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features-grid { grid-template-columns: repeat(4, 1fr); } }
.feature-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.feature-icon {
  width: 52px; height: 52px;
  border-radius: var(--r);
  background: var(--red-tint); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  margin-bottom: var(--s-4);
}
.feature-title { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.feature-desc  { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.7; }

/* Homepage auction cards (legacy markup → new look) */
.auctions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 560px)  { .auctions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .auctions-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
@media (min-width: 1200px) { .auctions-grid { grid-template-columns: repeat(4, 1fr); } }

.auction-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  height: 100%;
}
.auction-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.auction-card.expired, .auction-card.upcoming { opacity: .92; }

.auction-image-container, .auction-card > a:first-child {
  position: relative; display: block;
  aspect-ratio: 4/3;
  background: var(--surface-2);
  overflow: hidden;
}
.auction-image {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  background: var(--surface-2);
}
.auction-card:hover .auction-image { transform: scale(1.06); }

.auction-badge {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--live); color: #fff;
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  box-shadow: var(--shadow-xs);
}
.auction-card.expired .auction-badge  { background: var(--text-soft); }
.auction-card.upcoming .auction-badge { background: var(--info); }

.auction-content { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.auction-header h3 { font-size: var(--fs-md); line-height: 1.35; margin-bottom: var(--s-2); }
.auction-meta { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-muted); }
.auction-meta span { display: inline-flex; align-items: center; gap: 5px; }
.auction-meta i { color: var(--text-soft); font-size: .82em; }

.auction-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); margin-top: auto; }
.auction-stat {
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  text-align: center;
}
.stat-value { font-size: var(--fs-md); font-weight: 800; color: var(--red); }
.stat-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }

.auction-time-info {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px;
  background: var(--surface);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 700;
}
.countdown-timer { color: var(--ink-2); font-weight: 800; }
.countdown-timer.urgent { color: var(--danger); }
.current-bidder { font-size: var(--fs-xs); color: var(--text-muted); }

.auction-actions { display: flex; gap: var(--s-2); padding: 0 var(--s-5) var(--s-5); }
.btn-bid, .btn-view {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px var(--s-3);
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--fs-sm);
  cursor: pointer; transition: var(--t-fast);
  background: var(--red); color: #fff;
}
.btn-bid:hover { background: var(--red-dark); }
.btn-view { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-view:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-disabled, .btn-bid:disabled { background: var(--surface-2); color: var(--text-soft); cursor: not-allowed; pointer-events: none; }

/* Homepage "live bidding" panel */
.live-auctions { padding-block: var(--section-y); }
.live-ticker {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--s-8);
}
.ticker-header {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: 800; color: var(--ink);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.ticker-header i { color: var(--live); }
.ticker-container { display: flex; flex-direction: column; gap: var(--s-2); max-height: 320px; overflow-y: auto; }
.ticker-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  background: var(--surface);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--red);
}
.ticker-item.ticker-win { border-left-color: var(--success); background: var(--success-tint); }
.ticker-avatar {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--fs-sm);
}
.ticker-info { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.ticker-bidder { font-weight: 800; color: var(--ink); }
.ticker-vehicle { color: var(--text-muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker-amount { font-weight: 800; color: var(--red); white-space: nowrap; }
.ticker-content { display: flex; flex-direction: column; gap: var(--s-2); }

/* ══════════════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════════════ */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-12);
}
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }

.t-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex; flex-direction: column;
  transition: transform var(--t), box-shadow var(--t);
}
.t-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.t-quote { color: var(--red); font-size: 1.6rem; opacity: .22; margin-bottom: var(--s-2); }
.t-stars { color: #f5a623; margin-bottom: var(--s-3); letter-spacing: 2px; }
.t-content { color: var(--text-muted); line-height: 1.75; flex: 1; }
.t-author {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.t-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; flex: none;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.t-name { font-weight: 800; color: var(--ink); }
.t-role { font-size: var(--fs-xs); color: var(--text-soft); }

.empty { grid-column: 1/-1; text-align: center; padding: var(--s-16) var(--s-5); background: var(--white); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.empty i { font-size: 3rem; color: var(--line-strong); margin-bottom: var(--s-4); display: block; }
.empty h3 { margin-bottom: var(--s-2); }
.empty p { color: var(--text-muted); }

.cta, .cta-section {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%);
  color: #fff; text-align: center;
  padding: var(--section-y) var(--s-5);
}
.cta h2, .cta-section h2 { color: #fff; font-size: var(--fs-2xl); margin-bottom: var(--s-3); }
.cta p, .cta-section p { color: var(--text-on-dark-muted); margin-bottom: var(--s-6); }

/* Hero badge + stats (shared by testimonials / marketing heroes) */
.page-header .badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-pill);
  padding: 6px var(--s-4);
  margin-bottom: var(--s-4);
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: none; color: #fff;
}
.header-stats { display: flex; justify-content: center; gap: var(--s-10); margin-top: var(--s-8); flex-wrap: wrap; }
.header-stats .num { font-size: var(--fs-2xl); font-weight: 800; color: #fff; }
.header-stats .lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em; opacity: .75; }

/* ══════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════ */
.faq-categories { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-8); justify-content: center; }
.category-btn {
  padding: 10px var(--s-5); min-height: 42px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--white); color: var(--text-muted);
  font-weight: 700; font-size: var(--fs-sm); cursor: pointer; transition: var(--t-fast);
}
.category-btn:hover { border-color: var(--red); color: var(--red); }
.category-btn.active { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }

.faq-list { display: flex; flex-direction: column; gap: var(--s-3); max-width: 860px; margin-inline: auto; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: var(--t-fast);
}
.faq-item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  min-height: 56px;
  cursor: pointer; font-weight: 700; color: var(--ink);
}
.faq-toggle { color: var(--red); transition: transform var(--t-fast); flex: none; }
.faq-item.active .faq-toggle { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.active .faq-answer { max-height: 600px; }
.faq-answer-content { padding: 0 var(--s-5) var(--s-5); color: var(--text-muted); line-height: 1.75; }
.category-tag {
  display: inline-block; font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--red); margin-bottom: 4px;
}
.search-box { max-width: 560px; margin: 0 auto var(--s-8); }

/* ══════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════ */
.contact-wrapper { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
@media (min-width: 900px) { .contact-wrapper { grid-template-columns: 1fr 1.15fr; gap: var(--s-8); } }

.contact-info, .contact-form, .hours-section, .map-section {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-xs);
}
.info-item { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.info-item:last-child { border-bottom: none; }
.info-icon {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-sm);
  background: var(--red-tint); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-md);
}
.info-content { font-size: var(--fs-sm); color: var(--text-muted); }
.info-content strong, .info-content h3 { display: block; color: var(--ink); font-weight: 800; margin-bottom: 2px; font-size: var(--fs-base); }

.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-4); }
.form-group label { font-size: var(--fs-sm); font-weight: 700; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px var(--s-4); min-height: 46px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,.13);
}
.form-group textarea { min-height: 130px; resize: vertical; }

.hours-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.hours-item:last-child { border-bottom: none; }
.hours-day { font-weight: 700; }
.hours-time { color: var(--text-muted); }
.map-placeholder {
  aspect-ratio: 16/9; border-radius: var(--r);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-soft);
}

/* ══════════════════════════════════════════════════════
   MARKETING PAGES (about / team / careers / financing /
   preauction / auction-guide)
   ══════════════════════════════════════════════════════ */
/* Simple page header used by the marketing pages */
.header {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%);
  color: #fff;
  text-align: center;
  padding: clamp(48px, 8vw, 84px) var(--s-5);
  margin-bottom: var(--s-10);
}
.header h1 { color: #fff; font-size: var(--fs-4xl); margin-bottom: var(--s-3); }
.header p  { color: var(--text-on-dark-muted); font-size: var(--fs-lg); max-width: 62ch; margin-inline: auto; }

/* Generic content card */
.content-card, .guide-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 4vw, 40px);
  margin-bottom: var(--s-6);
  box-shadow: var(--shadow-xs);
}
.content-card h2, .guide-card h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
}
.content-card h2 i, .guide-card h2 i { color: var(--red); }
.content-card h3, .guide-card h3 { font-size: var(--fs-lg); margin: var(--s-6) 0 var(--s-3); }
.content-card p, .guide-card p { color: var(--text-muted); margin-bottom: var(--s-4); }
.content-card ul, .guide-card ul { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-4); }
.content-card li, .guide-card li {
  position: relative;
  padding-left: var(--s-6);
  color: var(--text-muted);
  line-height: 1.7;
}
.content-card li::before, .guide-card li::before {
  content: '';
  position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
}
.guide-card ol { counter-reset: g; display: flex; flex-direction: column; gap: var(--s-3); }
.guide-card ol li { counter-increment: g; padding-left: var(--s-8); }
.guide-card ol li::before {
  content: counter(g);
  top: 0; width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--red); color: #fff;
  font-size: var(--fs-xs); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* Callout boxes */
.highlight-box, .warning-box, .example-box {
  border-radius: var(--r);
  padding: var(--s-5);
  margin: var(--s-5) 0;
  border-left: 4px solid;
}
.highlight-box { background: var(--red-tint);     border-color: var(--red); }
.warning-box   { background: var(--warning-tint); border-color: var(--warning); color: #7a5502; }
.example-box   { background: var(--surface);      border-color: var(--ink-2); }
.highlight-box p:last-child, .warning-box p:last-child { margin-bottom: 0; }
.example-box h4 { font-size: var(--fs-md); margin-bottom: var(--s-4); }

/* Calculation table (auction guide) */
.calculation { display: flex; flex-direction: column; gap: 0; }
.calculation-row {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-base);
}
.calculation-row:last-child {
  border-bottom: none;
  border-top: 2px solid var(--ink);
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--red);
}

/* Card grids shared by values / options / steps / jobs */
.values-grid, .option-grid, .steps-grid, .jobs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-8);
}
@media (min-width: 620px) {
  .values-grid, .option-grid, .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .values-grid, .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .option-grid { grid-template-columns: repeat(3, 1fr); }
}

.value-card, .option-card, .step-card, .job-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.value-card:hover, .option-card:hover, .step-card:hover, .job-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.value-card h3, .option-card h3, .step-card h3, .job-item h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.value-card p, .option-card p, .step-card p, .job-item p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.7; }

.value-icon, .option-icon {
  width: 52px; height: 52px;
  border-radius: var(--r);
  background: var(--red-tint); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  margin-bottom: var(--s-4);
}
.step-number {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--fs-lg);
  margin-bottom: var(--s-4);
}
.job-item { display: flex; flex-direction: column; gap: var(--s-3); }

/* Team */
.team-section { padding-block: var(--s-8); }
.team-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5);
}
@media (min-width: 720px)  { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1050px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.team-member {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-4);
  text-align: center;
  transition: transform var(--t), box-shadow var(--t);
}
.team-member:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.team-member h3 { font-size: var(--fs-md); margin-bottom: 2px; }
.team-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--s-4);
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xl); font-weight: 800;
}
.position { color: var(--red); font-size: var(--fs-sm); font-weight: 700; }

/* Application form (careers) */
.application-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 4vw, 40px);
  box-shadow: var(--shadow-xs);
}

/* ══════════════════════════════════════════════════════
   AUTH PAGES (login / register)
   ══════════════════════════════════════════════════════ */
.login-container, .register-container {
  max-width: 460px;
  margin: clamp(32px, 7vw, 72px) auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(24px, 5vw, 44px);
  box-shadow: var(--shadow);
}
.login-container .logo, .register-container .logo {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-2); margin-bottom: var(--s-6); text-align: center;
}
.logo-icon {
  width: 60px; height: 60px;
  border-radius: var(--r);
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.login-container h1, .register-container h1,
.login-container h2, .register-container h2 { font-size: var(--fs-2xl); text-align: center; margin-bottom: var(--s-2); }

.input-with-icon { position: relative; }
.input-with-icon input { padding-left: 44px !important; }
.input-with-icon > i:first-of-type {
  position: absolute; left: var(--s-4); top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft); pointer-events: none;
}
.password-toggle {
  position: absolute; right: var(--s-4); top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--text-soft); cursor: pointer;
  padding: var(--s-2);
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.password-toggle:hover { color: var(--red); }

.divider {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-6) 0;
  color: var(--text-soft); font-size: var(--fs-sm);
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.auth0-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%; padding: 13px;
  min-height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--white);
  font-weight: 700; cursor: pointer;
  transition: var(--t-fast);
}
.auth0-btn:hover { background: var(--surface); border-color: var(--ink); }

.register-link, .login-link {
  text-align: center; margin-top: var(--s-5);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.register-link a, .login-link a { color: var(--red); font-weight: 700; }
.loading { opacity: .6; pointer-events: none; }

/* ══════════════════════════════════════════════════════
   ADMIN SCREENS (users / bids / manage / edit / buy-now)
   ══════════════════════════════════════════════════════ */
.page-title {
  font-size: var(--fs-2xl);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.page-title i { color: var(--red); }

/* Cards used as page sections */
.filters-card, .users-card, .bids-card, .form-card, .stats-card, .form-container {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 28px);
  margin-bottom: var(--s-6);
  box-shadow: var(--shadow-xs);
}
.users-card, .bids-card { overflow-x: auto; }

.filters-grid, .form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 640px)  { .filters-grid, .form-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .filters-grid { grid-template-columns: repeat(4, 1fr); } .form-grid { grid-template-columns: repeat(3, 1fr); } }

.filter-group, .form-group { display: flex; flex-direction: column; gap: 6px; }
.filter-group label, .form-group label { font-size: var(--fs-sm); font-weight: 700; }
.filter-group select, .filter-group input,
.form-group select, .form-group input, .form-group textarea {
  width: 100%; padding: 11px var(--s-4); min-height: 46px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--white);
}
.filter-group select:focus, .filter-group input:focus,
.form-group select:focus, .form-group input:focus, .form-group textarea:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,.13);
}
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 700px) { .form-row { grid-template-columns: repeat(2, 1fr); } }
.form-section { margin-bottom: var(--s-8); }
.form-section h3 { font-size: var(--fs-lg); margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.required { color: var(--red); }

/* Person cells (users / bids tables) */
.user-info, .bidder-info { display: flex; align-items: center; gap: var(--s-3); }
.user-avatar, .bidder-avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--fs-sm);
}
.user-details, .bidder-details { min-width: 0; }
.user-name, .bidder-name, .auction-name { font-weight: 700; color: var(--ink); }
.user-email, .bidder-email, .user-phone, .bid-time {
  font-size: var(--fs-xs); color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis;
}
.bid-amount { font-weight: 800; color: var(--red); }
.auction-details, .auction-info, .bid-info { display: flex; align-items: center; gap: var(--s-3); }

/* Badges */
.role-badge, .status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--surface-2); color: var(--text-muted);
}
.status-badge.status-active,  .role-badge.role-admin  { background: var(--success-tint); color: #14663a; }
.status-badge.status-inactive { background: var(--warning-tint); color: #8a6100; }
.status-badge.status-suspended{ background: var(--danger-tint);  color: #8e1f2c; }

/* Button variants used by admin screens */
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); }
.export-buttons { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* Stats blocks on manage/edit */
.stat-item { text-align: center; padding: var(--s-4); background: var(--surface); border-radius: var(--r-sm); }
.stats-card .stat-item + .stat-item { margin-top: 0; }
.timer-display {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  background: var(--ink-2); color: #fff;
  border-radius: var(--r); padding: var(--s-4);
  margin-bottom: var(--s-5);
}
.timer-value { font-size: var(--fs-xl); font-weight: 800; }
.locked-banner {
  background: var(--warning-tint);
  border-left: 4px solid var(--warning);
  border-radius: var(--r);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
  color: #7a5502;
}

/* Image gallery manager */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s-3);
}
.gallery-item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Modal */
.modal {
  display: none;
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(20,20,31,.55);
  padding: var(--s-5);
  overflow-y: auto;
}
.modal.show, .modal[style*="block"] { display: block; }
.modal-content {
  background: var(--white);
  border-radius: var(--r-lg);
  max-width: 560px;
  margin: 6vh auto;
  padding: var(--s-6);
  box-shadow: var(--shadow-lg);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.modal-title { font-size: var(--fs-xl); }
.modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 1.4rem; color: var(--text-soft);
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { color: var(--red); }
.modal-form { display: flex; flex-direction: column; gap: var(--s-4); }
.modal-actions { display: flex; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--s-4); }

/* Buy-now / purchase flow */
.payment-options { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 620px) { .payment-options { grid-template-columns: repeat(2, 1fr); } }
.payment-option {
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  padding: var(--s-4);
  cursor: pointer;
  transition: var(--t-fast);
}
.payment-option:hover, .payment-option.selected { border-color: var(--red); background: var(--red-tint); }
.file-upload-area {
  border: 2px dashed var(--line-strong);
  border-radius: var(--r);
  padding: var(--s-8) var(--s-5);
  text-align: center;
  cursor: pointer;
  transition: var(--t-fast);
  color: var(--text-muted);
}
.file-upload-area:hover { border-color: var(--red); background: var(--red-tint); }
.file-name { font-size: var(--fs-sm); color: var(--success); font-weight: 700; margin-top: var(--s-2); }
.info-box { background: var(--info-tint); border-left: 4px solid var(--info); border-radius: var(--r); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); color: #1d5b9e; }
.price-highlight, .amount { font-size: var(--fs-2xl); font-weight: 800; color: var(--red); }
.vehicle-preview { display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin-bottom: var(--s-6); }
@media (min-width: 700px) { .vehicle-preview { grid-template-columns: 260px 1fr; } }
.vehicle-image { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); background: var(--surface-2); }
.vehicle-details { display: flex; flex-direction: column; gap: var(--s-2); }
.detail-row { display: flex; justify-content: space-between; gap: var(--s-4); padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--text-soft); }
.detail-value { font-weight: 700; }
.btn-group { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════
   SEARCH / FILTER PARTIAL  (search-filter.php)
   ══════════════════════════════════════════════════════ */
.search-section {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--s-6);
}
.search-filter-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); align-items: end; }
@media (min-width: 720px)  { .search-filter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .search-filter-grid { grid-template-columns: 2fr 1fr 1fr auto; } }
.btn-search { min-height: 46px; }

.sort-group {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.sort-group label { font-weight: 700; font-size: var(--fs-sm); display: flex; align-items: center; gap: 6px; }
.sort-group select {
  padding: 9px var(--s-3); min-height: 44px; min-width: 180px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--white);
}

.filter-tags {
  display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center;
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.filter-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px var(--s-4); min-height: 40px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--white); color: var(--text-muted);
  font-size: var(--fs-sm); font-weight: 600;
}
.filter-tag button {
  background: none; border: none; cursor: pointer;
  color: var(--red); font-weight: 800; font-size: var(--fs-md);
  line-height: 1; padding: 0; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.filter-tag button:hover { background: var(--red); color: #fff; }
.filter-tag.clear-all { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.filter-tag.clear-all:hover { background: var(--red-dark); }

/* Autocomplete */
.search-with-suggestions { position: relative; }
.search-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  max-height: 320px; overflow-y: auto;
  z-index: 1200;
  display: none;
}
.search-suggestions.show { display: block; }
.search-suggestion-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 11px var(--s-4);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.search-suggestion-item:last-child { border-bottom: none; }
.search-suggestion-item:hover, .search-suggestion-item.active { background: var(--red-tint); }
.sugg-name { font-weight: 700; font-size: var(--fs-sm); }
.sugg-meta { font-size: var(--fs-xs); color: var(--text-soft); }
.sugg-badge {
  margin-left: auto; flex: none;
  font-size: var(--fs-xs); font-weight: 800;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-muted);
}
.search-suggestions-empty { padding: var(--s-5); text-align: center; color: var(--text-soft); font-size: var(--fs-sm); }

/* ══════════════════════════════════════════════════════
   LISTING EXTRAS (upcoming-auctions)
   ══════════════════════════════════════════════════════ */
.auctions-section { padding-block: var(--section-y); }
.auction-image-container { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--surface-2); }
.auction-stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
.auction-time {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px; background: var(--surface); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 700;
}
.results-count {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 9px var(--s-5);
  font-weight: 700; font-size: var(--fs-sm); color: var(--text-muted);
}
.stats-bar {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6);
  box-shadow: var(--shadow-xs); margin-bottom: var(--s-8);
}
.stats-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (min-width: 860px) { .stats-container { grid-template-columns: repeat(4, 1fr); } }

.no-results {
  grid-column: 1/-1; text-align: center;
  padding: var(--s-16) var(--s-5);
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.no-results-icon { font-size: 3rem; color: var(--line-strong); margin-bottom: var(--s-4); }
.no-results h3 { margin-bottom: var(--s-2); }
.no-results p { color: var(--text-muted); max-width: 46ch; margin: 0 auto var(--s-6); }
.pagination-container { display: flex; gap: var(--s-2); justify-content: center; align-items: center; flex-wrap: wrap; margin-top: var(--s-10); }

/* ══════════════════════════════════════════════════════
   BIDDER REGISTRATION PANEL
   ══════════════════════════════════════════════════════ */
.reg-panel { margin-bottom: var(--s-6); border-top: 3px solid var(--red); }
.reg-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5);
}
.reg-title { font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--s-2); margin-bottom: 4px; }
.reg-title i { color: var(--red); }
.reg-blurb { color: var(--text-muted); font-size: var(--fs-sm); max-width: 60ch; }

.reg-badge {
  flex: none;
  padding: 7px var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface-2); color: var(--text-muted);
  white-space: nowrap;
}
.reg-badge.tone-success { background: var(--success-tint); color: #14663a; }
.reg-badge.tone-warning { background: var(--warning-tint); color: #7a5502; }
.reg-badge.tone-info    { background: var(--info-tint);    color: #1d5b9e; }
.reg-badge.tone-danger  { background: var(--danger-tint);  color: #8e1f2c; }

/* Step tracker */
.reg-steps {
  display: grid; grid-template-columns: 1fr; gap: var(--s-2);
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  background: var(--surface);
  border-radius: var(--r);
}
@media (min-width: 780px) { .reg-steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-3); } }
.reg-step { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-soft); }
.reg-step-dot {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-soft);
  font-size: var(--fs-xs); font-weight: 800;
}
.reg-step.is-done  { color: var(--text); }
.reg-step.is-done .reg-step-dot { background: var(--success); color: #fff; }
.reg-step.is-current { color: var(--red); font-weight: 700; }
.reg-step.is-current .reg-step-dot { background: var(--red); color: #fff; box-shadow: 0 0 0 4px rgba(200,16,46,.15); }

/* Two-column action area */
.reg-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 820px) { .reg-grid { grid-template-columns: repeat(2, 1fr); } }
.reg-box {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.reg-box h4 { font-size: var(--fs-base); display: flex; align-items: center; gap: var(--s-2); }
.reg-num {
  width: 22px; height: 22px; flex: none;
  border-radius: 50%; background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 800;
}
.reg-box .btn { margin-top: auto; }

/* Banking details readout */
.bank-box { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border-radius: var(--r-sm); padding: var(--s-4); }
.bank-box > div { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); }
.bank-box span { color: var(--text-soft); }

/* File chooser */
.pop-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r);
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
  transition: var(--t-fast);
}
.pop-drop:hover { border-color: var(--red); background: var(--red-tint); color: var(--red); }
.pop-drop i { font-size: 1.6rem; }
.pop-drop.has-file { border-color: var(--success); background: var(--success-tint); color: #14663a; border-style: solid; }

/* Verified state */
.reg-verified {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  background: var(--success-tint);
  border-radius: var(--r);
  padding: var(--s-5);
}
.reg-verified-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: #14663a; }
.reg-verified-number { font-size: var(--fs-2xl); font-weight: 800; color: #14663a; line-height: 1.1; }

.reg-foot {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--text-muted);
  display: flex; align-items: flex-start; gap: var(--s-2);
}
.reg-foot i { color: var(--success); margin-top: 3px; }

/* ══════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════ */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.wrap    { flex-wrap: wrap; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); }
.between { justify-content: space-between; }
.center-x { justify-content: center; }
.grow { flex: 1; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-red { color: var(--red); }
.mt-2{margin-top:var(--s-2)}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}
.mb-2{margin-bottom:var(--s-2)}.mb-4{margin-bottom:var(--s-4)}.mb-6{margin-bottom:var(--s-6)}.mb-8{margin-bottom:var(--s-8)}
.hide { display: none !important; }
@media (max-width: 768px) { .hide-mobile { display: none !important; } }
@media (min-width: 769px) { .hide-desktop { display: none !important; } }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ══════════════════════════════════════════════════════
   SITE HEADER (moved from nav.php)
   ══════════════════════════════════════════════════════ */
/* ===================== Momentum shared header ===================== */
#siteHeader {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#siteHeader .nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    gap: 16px;
    position: relative;
}
#siteHeader .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex: none;
}
#siteHeader .logo img { height: 52px; width: auto; display: block; }

#siteHeader .nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#siteHeader .nav-links > a,
#siteHeader .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #2a2a2a;
    font-weight: 600;
    font-size: 15px;
    padding: 9px 12px;
    border-radius: 6px;
    transition: color .2s, background .2s;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
}
#siteHeader .nav-links > a:hover,
#siteHeader .dropdown:hover .dropdown-toggle,
#siteHeader .nav-links > a.active {
    color: #c8102e;
    background: rgba(200,16,46,0.07);
}

/* Dropdown caret (dependency-free) */
#siteHeader .dd-arrow {
    display: inline-block;
    width: 0; height: 0;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .2s;
}
#siteHeader .dropdown { position: relative; }
#siteHeader .dropdown:hover .dd-arrow,
#siteHeader .dropdown.active .dd-arrow { transform: rotate(180deg); }

#siteHeader .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    border-radius: 10px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 1001;
}
#siteHeader .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#siteHeader .dropdown-menu a {
    display: block;
    padding: 10px 18px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s, color .15s, padding-left .15s;
}
#siteHeader .dropdown-menu a:hover,
#siteHeader .dropdown-menu a.active {
    background: rgba(200,16,46,0.06);
    color: #c8102e;
    padding-left: 22px;
}

/* Auth area */
#siteHeader .nav-auth {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}
#siteHeader .user-name {
    color: #555;
    font-weight: 600;
    font-size: 14px;
    padding: 7px 12px;
    background: #f2f2f2;
    border-radius: 6px;
    white-space: nowrap;
}
/* !important throughout: individual pages define their own .btn rules
   (several use `color:#fff !important`) which would otherwise make the
   outlined Login button white-on-white and effectively invisible. */
#siteHeader .nav-auth .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 6px;
    background: #c8102e !important;
    color: #fff !important;
    border: 1px solid #c8102e !important;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s;
    font-family: inherit;
    transform: none !important;
    box-shadow: none !important;
}
#siteHeader .nav-auth .btn:hover { background: #a00d25 !important; border-color: #a00d25 !important; }

/* Outlined (Login / Logout) — dark text on white, always legible */
#siteHeader .nav-auth .btn-outline {
    background: #fff !important;
    color: #1a1a2e !important;
    border: 1px solid #c9ced6 !important;
}
#siteHeader .nav-auth .btn-outline:hover {
    background: #1a1a2e !important;
    color: #fff !important;
    border-color: #1a1a2e !important;
}

/* Solid dark (Dashboard) */
#siteHeader .nav-auth .btn-dark {
    background: #1a1a2e !important;
    color: #fff !important;
    border-color: #1a1a2e !important;
}
#siteHeader .nav-auth .btn-dark:hover { background: #000 !important; border-color: #000 !important; }

/* Hamburger */
#siteHeader .menu-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    /* 44x44 minimum touch target */
    width: 44px;
    height: 44px;
    padding: 0;
    flex: none;
}
#siteHeader .menu-toggle span {
    width: 26px;
    height: 3px;
    background: #1a1a2e;
    border-radius: 2px;
    transition: .3s;
}

/* ===================== Mobile ===================== */
@media (max-width: 992px) {
    #siteHeader .menu-toggle { display: flex; }
    #siteHeader .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        padding: 8px 0 14px;
        box-shadow: 0 14px 24px rgba(0,0,0,0.12);
        border-top: 1px solid #f0f0f0;
        display: none;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
    #siteHeader .nav-links.active { display: flex; }
    #siteHeader .nav-links > a,
    #siteHeader .dropdown-toggle {
        width: 100%;
        padding: 13px 22px;
        border-radius: 0;
        font-size: 15px;
        justify-content: space-between;
    }
    #siteHeader .dropdown { width: 100%; }
    #siteHeader .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        display: none;
        background: #fafafa;
    }
    #siteHeader .dropdown.active .dropdown-menu { display: block; }
    #siteHeader .dropdown-menu a { padding: 11px 34px; }
    #siteHeader .nav-auth {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px 22px 0;
        width: 100%;
    }
    #siteHeader .nav-auth .btn,
    #siteHeader .user-name { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════
   LIVE TICKER (moved from live_ticker.php)
   ══════════════════════════════════════════════════════ */
    /* Push page content down and keep sticky navs below the fixed ticker */
    body { padding-top: 40px !important; }
    nav, .navbar, header.site-header { top: 40px !important; }

    .mom-ticker {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 40px;
        background: #0a0a0a;
        color: #fff;
        z-index: 2500;
        display: flex;
        align-items: center;
        overflow: hidden;
        border-bottom: 2px solid #c8102e;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 14px;
    }
    .mom-ticker-label {
        flex: none;
        display: flex;
        align-items: center;
        gap: 7px;
        height: 100%;
        padding: 0 16px;
        background: #c8102e;
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        z-index: 2;
        white-space: nowrap;
    }
    .mom-ticker-label .pulse {
        width: 8px; height: 8px; border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 0 rgba(255,255,255,0.6);
        animation: mom-pulse 1.6s infinite;
    }
    @keyframes mom-pulse {
        0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
        70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
        100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    }
    .mom-ticker-viewport {
        flex: 1;
        overflow: hidden;
        position: relative;
        height: 100%;
    }
    .mom-ticker-track {
        display: inline-flex;
        align-items: center;
        height: 100%;
        white-space: nowrap;
        will-change: transform;
        animation: mom-ticker-scroll 60s linear infinite;
    }
    .mom-ticker:hover .mom-ticker-track { animation-play-state: paused; }
    .mom-ticker-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 28px;
        border-right: 1px solid rgba(255,255,255,0.08);
    }
    @keyframes mom-ticker-scroll {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }
    @media (prefers-reduced-motion: reduce) {
        .mom-ticker-track { animation: none; overflow-x: auto; }
    }
    @media (max-width: 600px) {
        .mom-ticker, .mom-ticker { font-size: 13px; }
        .mom-ticker-label span.txt { display: none; } /* keep just the dot on tiny screens */
        .mom-ticker-label { padding: 0 12px; }
    }

/* ============================================================
   MOBILE FIXES — appended 15 Oct 2026
   ------------------------------------------------------------
   main.css is otherwise mobile-first (min-width queries), so
   this block is deliberately last: it only ever narrows down
   onto small screens and never touches the desktop layout.
   ============================================================ */

@media (max-width: 767px) {

    /* ── iOS zoom-on-focus ───────────────────────────────────
       Safari on iPhone zooms the whole page in whenever a form
       control it focuses is under 16px, and it does not zoom
       back out. Every control on the site was 15px, so tapping
       the search box, the contact form or the bid amount threw
       the layout sideways mid-task. 16px is the threshold, not
       a style choice — don't lower it. */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea,
    .input,
    .form-control {
        font-size: 16px !important;
    }

    /* Comfortable height for anything typed into on a phone. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
    select,
    .input,
    .form-control {
        min-height: 44px;
    }

    /* ── Tap targets ─────────────────────────────────────────
       Vehicle titles in the listing grid rendered 20px tall,
       which is under the 24px WCAG 2.5.8 floor and awkward with
       a thumb. Padding (not font-size) grows the hit area so the
       card's visual rhythm is unchanged. */
    .vehicle-card a,
    .auction-card a,
    .card-title a,
    .vehicle-title a,
    h3 a {
        display: inline-block;
        padding-block: 6px;
    }

    /* Buttons and pagination get a full thumb-sized target. */
    .btn,
    button,
    input[type="submit"],
    .pagination a,
    .pagination span {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ── Tables ──────────────────────────────────────────────
       Bid history and spec tables are wider than a phone. Let
       them scroll inside their own box instead of stretching
       the page and creating a sideways scroll. */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Long unbroken strings ───────────────────────────────
       VINs, registration numbers and email addresses otherwise
       push the layout wider than the screen. */
    body {
        overflow-wrap: break-word;
    }
}