/* ═══════════════════════════════════════════════════════════
   Wizmoto — Components & Page Styles
   Extracted from inline <style> blocks across all templates.
   Loaded globally via base.html after custom-fix.css.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. HEADER / NAVBAR
   Source: partials/header.html
   ───────────────────────────────────────────────────────── */
html,
body.mm-wrapper {
  overflow-x: clip !important;
}

/* Avoid forcing a custom vertical scroll context globally. */
html {
  overflow-y: auto;
}

body.mm-wrapper {
  overflow-y: visible !important;
}

/* Inner pages should use a single document scrollbar, not an inner wrapper scroll. */
body.inner-header .mobile-content-wrapper {
  overflow: visible !important;
}

.boxcar-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: #050b20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Mobile: Ensure header stays above most content except modals */
@media (max-width: 991px) {
  .boxcar-header {
    z-index: 1020;
  }
}

/* Navbar Icon Buttons */
.wiz-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: white;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  transition: opacity 0.2s;
  text-decoration: none;
  border-radius: 8px;
}

.wiz-icon-btn:hover {
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

/* Search Dropdown */
.wiz-search-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 380px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 14px;
  z-index: 1050;
}

@media (max-width: 991px) {
  .wiz-search-dropdown {
    z-index: 1050;
  }
}

.wiz-search-dropdown.open {
  display: block;
}

.wiz-search-input {
  flex: 1;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  outline: none;
  color: #050b20;
  transition: border 0.2s;
}

.wiz-search-input:focus {
  border-color: #405ff2;
}

.wiz-search-submit {
  background: #405ff2;
  border: none;
  border-radius: 10px;
  padding: 11px 16px;
  cursor: pointer;
  color: white;
  font-size: 14px;
  transition: background 0.2s;
}

.wiz-search-submit:hover {
  background: #2d47d1;
}

/* Live Search Results */
.live-search-results {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 8px;
}

.live-search-results:empty {
  display: none;
}

.live-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #050b20;
  transition: background 0.15s;
  cursor: pointer;
}

.live-search-item:hover {
  background: #f5f7ff;
}

.live-search-item img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.live-search-item .ls-info {
  flex: 1;
  min-width: 0;
}

.live-search-item .ls-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-search-item .ls-price {
  font-size: 13px;
  color: #405ff2;
  font-weight: 700;
}

.live-search-loading,
.live-search-empty {
  text-align: center;
  padding: 16px;
  color: #999;
  font-size: 13px;
}

/* Language Dropdown */
.wiz-lang-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.wiz-lang-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 180px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 6px;
  z-index: 1030;
  overflow: hidden;
}

.wiz-lang-dropdown.open {
  display: block;
}

.wiz-lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #050b20;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s;
}

.wiz-lang-option:hover {
  background: #f5f7ff;
  color: #050b20;
}
.wiz-lang-option.active {
  background: #eef1fb;
  font-weight: 600;
  color: #405ff2;
}

/* Sell Button */
.wiz-sell-btn {
  background: #405ff2;
  color: white !important;
  padding: 9px 22px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}

.wiz-sell-btn:hover {
  background: #2d47d1;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 95, 242, 0.35);
}

/* Mobile Navigation Toggle Button */
.mobile-navigation {
  display: none;
}

/* ── Lightweight Slide-in Sidebar (replaces mmenu) ─────── */
#nav-mobile {
  display: block !important; /* override .responsive-sidebar display:none — hides via transform instead */
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 85vw;
  height: 100dvh;
  background: #050b20;
  z-index: 11000;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  overscroll-behavior: contain;
  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  padding-bottom: 0;
}

/* Shadow only while open: parked off-screen it still cast a dark edge down
   the right side of every page (the footer included). */
#nav-mobile.open {
  transform: translateX(0);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
}

#nav-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10999;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

#nav-mobile-backdrop.open {
  pointer-events: auto;
}

#nav-mobile-backdrop.open {
  display: block;
  opacity: 1;
}

body.nav-open {
  overflow: hidden;
}

/* Keep mobile sidebar interaction clean: hide competing fixed bars/FABs while nav is open. */
body.nav-open .mobile-bottom-nav,
body.nav-open .support-fab,
body.nav-open .ai-fab,
body.nav-open .ai-win,
body.nav-open .ai-welcome {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Header utility classes (replacing inline styles) */
/* min-height reserves vertical space so the action row never reflows
   when icon fonts / DM Sans swap in (avoids the small header CLS). */
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.wiz-search-wrap {
  position: relative;
}
.wiz-search-form {
  display: flex;
  gap: 8px;
}
.wiz-lang-wrap {
  position: relative;
}
.wiz-user-wrap {
  position: relative;
}
.wiz-lang-arrow {
  font-size: 10px;
}
/* Fixed-width language code label so font-swap doesn't shift the row. */
.wiz-lang-label {
  display: inline-block;
  min-width: 22px;
  text-align: center;
}
.wiz-lang-check {
  margin-left: auto;
  color: #405ff2;
  font-size: 11px;
}
.wiz-signin-label {
  font-size: 13px;
}
.header-sell-wrap {
  margin-left: 4px;
}
.mobile-nav-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 10px 0;
}

@media (max-width: 1199px) {
  .boxcar-header .nav-out-bar {
    display: none !important;
  }
  .boxcar-header .right-box .btn {
    display: none !important;
  }
  .wiz-lang-wrap {
    display: none !important;
  }
  .wiz-user-wrap .wiz-lang-label {
    display: none !important;
  }
  .wiz-search-dropdown {
    width: calc(100vw - 32px) !important;
    right: -60px !important;
  }
  .mobile-navigation {
    display: block !important;
  }
}

/* ─────────────────────────────────────────────────────────
   KEYBOARD FOCUS (site-wide)
   Mouse focus shows no outline (style.css); keyboard focus gets the brand
   ring. :where() keeps this at zero specificity, so components with their
   own focus style (form fields, homepage cards) keep it.
   ───────────────────────────────────────────────────────── */
:where(:focus-visible) {
  outline: 2px solid #405ff2;
  outline-offset: 2px;
}

/* Lighter tint on the dark footer, as in the header. */
.modern-footer :focus-visible {
  outline-color: #8ea2ff;
}

/* ─────────────────────────────────────────────────────────
   2. FOOTER
   Source: partials/footer.html
   ───────────────────────────────────────────────────────── */
.modern-footer {
  background-color: #050b20;
  color: #ffffff;
  padding-top: 80px;
  font-family: inherit;
  margin-top: auto;
}

.modern-footer-top {
  padding-bottom: 60px;
}

/* The footer row uses .g-5 (3rem gutters, i.e. -1.5rem side margins) inside a
   .container with only 0.75rem padding, which pushed the page ~7–12px wider
   than the viewport on desktop. Matching padding keeps the gutters intact. */
.modern-footer .modern-footer-top {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.modern-footer .footer-logo img {
  max-height: 48px;
  margin-bottom: 24px;
  filter: brightness(0) invert(1);
}

.modern-footer p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.modern-footer h3,
.modern-footer h4 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 28px;
  position: relative;
  padding-bottom: 12px;
}

.modern-footer h3::after,
.modern-footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background-color: #405ff2;
  border-radius: 2px;
}

.modern-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.modern-footer ul li {
  margin-bottom: 14px;
}

.modern-footer ul li a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 15px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.modern-footer ul li a:hover {
  color: #405ff2;
  transform: translateX(6px);
}

.modern-footer .social-links {
  display: flex;
  gap: 12px;
}

.modern-footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  transition: all 0.3s ease;
  text-decoration: none;
}

.modern-footer .social-links a:hover {
  background-color: #405ff2;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(64, 95, 242, 0.3);
}

/* No own background or divider: the legal row sits on the footer's colour.
   The fixed AI and support buttons (and, up to 991px, the bottom nav) cover
   the end of the page, so the bottom padding keeps the legal line clear of
   them at full scroll. */
.modern-footer-bottom {
  padding: 24px 0 86px;
}

@media (max-width: 991px) {
  .modern-footer-bottom {
    padding-bottom: calc(134px + env(safe-area-inset-bottom, 0px));
  }
}

.modern-footer-bottom .copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin: 0;
}

/* Company name and VAT number wrap as whole units on narrow screens. */
.modern-footer-bottom .footer-company {
  white-space: nowrap;
}

.modern-footer-bottom .bottom-links {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: flex-end;
}

.modern-footer-bottom .bottom-links a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.modern-footer-bottom .bottom-links a:hover {
  color: #ffffff;
}

.footer-newsletter input {
  width: 100%;
  padding: 14px 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  margin-bottom: 12px;
  outline: none;
  transition: all 0.3s ease;
  font-size: 15px;
}

.footer-newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.footer-newsletter input:focus {
  border-color: #405ff2;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(64, 95, 242, 0.2);
}

.footer-newsletter button {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  background: #405ff2;
  color: white;
  border: none;
  font-weight: 700;
  font-size: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.footer-newsletter button:hover {
  background: #2d47d1;
  box-shadow: 0 6px 16px rgba(64, 95, 242, 0.3);
  transform: translateY(-2px);
}

.footer-newsletter .newsletter-msg {
  min-height: 1.4em;
  margin: 10px 0 0;
  font-size: 14px;
  color: #7ee2b0;
}

.footer-newsletter .newsletter-msg.is-error {
  color: #ffb4ab;
}

/* ─────────────────────────────────────────────────────────
   3. SUPPORT FAB WIDGET
   Source: partials/_support_widget.html
   ───────────────────────────────────────────────────────── */
.support-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 9999;
}

.support-fab-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f6df8, #405ff2);
  color: white;
  border: none;
  font-size: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(5, 11, 32, 0.18);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.support-fab-btn:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 6px 18px rgba(64, 95, 242, 0.3);
}

.support-fab .support-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 332px;
  background: white;
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  animation: supportSlideUp 0.3s ease;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.support-fab .support-menu.open {
  display: block;
}

@keyframes supportSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.support-fab .support-menu-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 16px;
  background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
  color: #050b20;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.support-fab .support-menu-header-copy {
  min-width: 0;
}

.support-fab .support-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #405ff2;
  margin-bottom: 6px;
}

.support-fab .support-menu-header h6 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.2;
}
.support-fab .support-menu-header p {
  font-size: 13px;
  margin: 0;
  color: #64748b;
  line-height: 1.45;
}

.support-fab .support-menu-close {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(64, 95, 242, 0.08);
  color: #405ff2;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.support-fab .support-menu-close:hover {
  background: rgba(64, 95, 242, 0.14);
  transform: scale(1.04);
}

.support-fab .support-menu-body {
  padding: 14px;
}

.support-fab .support-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  text-decoration: none;
  color: #050b20;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: #fff;
}

.support-fab .support-option:hover {
  background: #f8faff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.support-fab .support-option-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}

.support-fab .support-option-icon i,
#support-fab .support-option-icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
  margin: 0 !important;
  padding: 0;
  font-style: normal;
  transform: translateY(0.5px);
}

#support-fab .support-option-icon i::before {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1;
}

.support-fab .support-option.whatsapp .support-option-icon {
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
}
.support-fab .support-option.email .support-option-icon {
  background: rgba(64, 95, 242, 0.1);
  color: #405ff2;
}
.support-fab .support-option.phone .support-option-icon {
  background: rgba(255, 152, 0, 0.12);
  color: #ff9800;
}

.support-fab .support-option-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #050b20;
}

.support-fab .support-option-text small {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
  line-height: 1.35;
}

.support-fab .support-option-primary {
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  border-color: rgba(64, 95, 242, 0.14);
  box-shadow: 0 8px 20px rgba(64, 95, 242, 0.06);
}

.support-fab .support-option-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.support-fab .support-option-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.12);
  color: #168a43;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.support-fab .support-options-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 2px 12px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.support-fab .support-options-divider::before,
.support-fab .support-options-divider::after {
  content: "";
  height: 1px;
  background: rgba(148, 163, 184, 0.2);
  flex: 1;
}

.support-fab .support-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (max-width: 480px) {
  .support-fab {
    bottom: 16px;
    right: 16px;
  }
  .support-fab .support-menu {
    width: calc(100vw - 32px);
    right: -6px;
    border-radius: 20px;
  }

  .support-fab .support-menu-body {
    padding: 12px;
  }
  .support-fab .support-option {
    padding: 13px;
  }
}

/* ─────────────────────────────────────────────────────────
   4. PRICE EVALUATION BADGE
   Source: partials/_price_badge.html
   ───────────────────────────────────────────────────────── */
.price-evaluation-badge {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.06);
  /* max-width: 220px; */
  width: 100%;
  min-width: 134px;
  white-space: nowrap;
  overflow: hidden;
  /* box-shadow: 0 2px 6px rgba(0,0,0,0.08); */
  margin-bottom: 5px;
}

.price-evaluation-badge .badge-label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price-evaluation-badge .badge-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  flex: 0 0 auto;
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.price-evaluation-badge .badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

.vehicle-card-eval {
  /* placeholder container for cards without an evaluation */
}

/* Subdued neutral style for 'Not evaluated' */
.price-evaluation-badge--na {
  opacity: 0.6;
  background: rgba(245, 247, 250, 0.85);
  border-style: dashed;
  border-color: rgba(15, 23, 42, 0.06);
  color: #6b7280;
}

.price-evaluation-badge--na .badge-label {
  color: #6b7280;
  font-weight: 600;
}

/* Dot colors are applied via inline style in _price_badge.html — one unified color per tier */

/* Label colors per tier */
.price-evaluation-badge--steal .badge-label {
  color: #15803d;
}
.price-evaluation-badge--smart .badge-label {
  color: #4d7c0f;
}
.price-evaluation-badge--fair .badge-label {
  color: #a16207;
}
.price-evaluation-badge--premium .badge-label {
  color: #c2410c;
}
.price-evaluation-badge--overpriced .badge-label {
  color: #b91c1c;
}
.price-evaluation-badge--luxury .badge-label {
  color: #b91c1c;
}

@media (max-width: 575px) {
  .vehicle-card-badge {
    top: 10px;
    right: 10px;
    max-width: calc(100% - 68px);
  }

  .price-evaluation-badge {
    min-width: 0;
    max-width: 100%;
    gap: 6px;
    padding: 7px 10px;
  }

  .price-evaluation-badge .badge-label {
    max-width: 96px;
    font-size: 12px;
  }

  .price-evaluation-badge .badge-dot {
    width: 8px;
    height: 8px;
  }
}

/* ─────────────────────────────────────────────────────────
   5. VEHICLE CARD
   Source: partials/_vehicle_card.html
   ───────────────────────────────────────────────────────── */
.vehicle-card-image {
  position: relative;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

.boxcar-listing-block .inner-box {
  position: relative;
  background: linear-gradient(165deg, #ffffff 0%, #f9fbff 100%);
  border: 1px solid rgba(12, 20, 46, 0.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 20px rgba(8, 15, 40, 0.08);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.boxcar-listing-block .inner-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.boxcar-listing-block .inner-box:hover {
  transform: translateY(-8px);
  border-color: rgba(64, 95, 242, 0.28);
  box-shadow: 0 14px 22px rgba(8, 15, 40, 0.15);
}

.vehicle-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
}

.wishlist-card-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(10, 18, 46, 0.1);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: all 0.25s ease;
  box-shadow: 0 8px 16px rgba(5, 11, 32, 0.14);
  backdrop-filter: blur(4px);
}

.wishlist-card-btn:hover {
  border-color: rgba(64, 95, 242, 0.3);
  transform: translateY(-1px);
}

.wishlist-card-btn .wishlist-icon {
  stroke: #555;
  fill: none;
  transition: all 0.3s;
}

.vehicle-card-link {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3; /* photos are mostly 4:3; box matches them exactly */
  overflow: hidden;
}

.box-car .image-box .vehicle-card-link img {
  width: 100%;
  height: 100%;
  /* 4:3 images fill perfectly; other ratios (16:9, etc.) zoom-crop to fit. */
  object-fit: cover;
  object-position: center center;
  display: block;
  background: linear-gradient(180deg, #f4f7ff 0%, #eef2fb 100%);
  transition: transform 0.4s ease;
}

.boxcar-listing-block .inner-box:hover .vehicle-card-link img {
  transform: none;
}

/* In-card image slider */
.vehicle-card-slider {
  height: 220px;
  position: relative;
}

/* Slick structural fallback for environments where slick.css is delayed/overridden. */
.vehicle-card-slider .slick-list {
  overflow: hidden;
  height: 100%;
}

.vehicle-card-slider .slick-track {
  display: flex !important;
  height: 100%;
}

.vehicle-card-slider .slick-slide {
  float: none !important;
  height: 100%;
}

.vehicle-card-slider .slick-slide > div {
  height: 100%;
}

.vehicle-card-slide,
.vehicle-card-slide .vehicle-card-link {
  height: 220px;
}

.vehicle-card-slider .slick-track,
.vehicle-card-slider .slick-list {
  height: 220px;
}

.vehicle-card-slider .slick-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(17, 24, 39, 0.14);
  z-index: 4;
  box-shadow: 0 6px 16px rgba(5, 11, 32, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vehicle-card-slider .slick-arrow:hover {
  background: #ffffff;
}

.vehicle-card-slider .slick-arrow.slick-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.vehicle-card-slider .slick-prev {
  left: 10px;
}
.vehicle-card-slider .slick-next {
  right: 10px;
}

.vehicle-card-slider .slick-prev:before,
.vehicle-card-slider .slick-next:before {
  color: #111827;
  font-size: 16px;
  font-family: inherit;
  font-weight: 700;
  line-height: 1;
  opacity: 1;
}

.vehicle-card-slider .slick-prev:before {
  content: "<";
}

.vehicle-card-slider .slick-next:before {
  content: ">";
}

.vehicle-card-slider .slick-dots {
  bottom: 8px;
}

.vehicle-card-slider .slick-dots li {
  margin: 0 2px;
}

.vehicle-card-slider .slick-dots li button:before {
  color: #fff;
  opacity: 0.6;
  font-size: 8px;
}

.vehicle-card-slider .slick-dots li.slick-active button:before {
  opacity: 1;
}

/* Image count badge */
.card-img-count {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(5, 11, 32, 0.72);
  color: white;
  padding: 6px 11px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
}

.card-img-count i {
  font-size: 12px;
}

/* Content area */
.vehicle-card-content {
  padding: 20px 20px 16px;
}

.vehicle-card-title {
  margin-bottom: 10px;
  line-height: 1.3;
  min-height: 54px;
}

.vehicle-card-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #050b20;
  font-weight: 800;
  font-size: 22px;
  text-decoration: none;
  transition: color 0.2s ease;
  letter-spacing: -0.01em;
}

.boxcar-listing-block .inner-box:hover .vehicle-card-title a {
  color: #2f4ce2;
}

.vehicle-card-price-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
  min-height: 56px;
}

.vehicle-card-price {
  margin-bottom: 0;
}

.vehicle-card-price .price-amount {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #405ff2;
}

.vehicle-card-price .price-request {
  font-size: 14px;
  color: #999;
  font-weight: 600;
}

.vehicle-card-specs {
  display: flex;
  gap: 10px 8px;
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0 0 14px;
  flex-wrap: nowrap;
  overflow: hidden;
  justify-content: flex-start;
  direction: ltr;
}

.vehicle-card-specs li {
  font-size: 12px;
  color: #4f586d;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  font-weight: 400;
  white-space: nowrap;
  min-width: 0;
}

.vehicle-card-specs li:not(.spec-eval) {
  background: #f4f7ff;
  border: 1px solid #dde6ff;
  border-radius: 999px;
  padding: 5px 10px;
}

.vehicle-card-specs li:not(.spec-eval) + li:not(.spec-eval)::before {
  content: none;
}

.vehicle-card-specs li i {
  font-size: 13px;
  color: #405ff2;
}

.vehicle-card-specs .spec-icon {
  width: 14px;
  text-align: center;
  color: #405ff2;
}

.vehicle-card-specs .spec-eval {
  margin-right: 4px;
  padding: 2px 0;
}

.vehicle-card-specs li svg {
  width: 14px;
  height: 14px;
  color: #405ff2;
  stroke: currentColor;
  flex-shrink: 0;
}

.vehicle-card-specs .badge-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 3px 0;
}

.vehicle-card-specs .badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: rgba(148, 163, 184, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.vehicle-card-specs .price-dots--steal .badge-dot {
  background: #16a34a;
}

.vehicle-card-specs .price-dots--smart .badge-dot {
  background: #84cc16;
}

.vehicle-card-specs .price-dots--fair .badge-dot {
  background: #f59e0b;
}

.vehicle-card-specs .price-dots--premium .badge-dot {
  background: #f97316;
}

.vehicle-card-specs .price-dots--overpriced .badge-dot {
  background: #ef4444;
}

.vehicle-card-specs .price-dots--luxury .badge-dot {
  background: #b91c1c;
}

.vehicle-card-specs .badge-dot.badge-dot--inactive {
  background: rgba(148, 163, 184, 0.32) !important;
  box-shadow: none;
}

@media (min-width: 992px) {
  .boxcar-listing-block .content-box .vehicle-card-specs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: 8px 6px !important;
  }

  .boxcar-listing-block .content-box .vehicle-card-specs li {
    white-space: nowrap !important;
    font-size: 11px;
    gap: 4px;
  }
}

.vehicle-card-footer {
  margin-top: 10px;
  border-top: 1px solid rgba(10, 18, 46, 0.08);
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.vehicle-card-footer a {
  color: #405ff2;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  transition:
    gap 0.2s,
    color 0.2s;
}

.vehicle-card-footer a:hover {
  gap: 10px;
  color: #2f4ce2;
}

.vehicle-card-footer a i {
  font-size: 14px;
  color: #405ff2;
}

/* ─────────────────────────────────────────────────────────
   6. AUTH PAGES (Login, Register, Forgot, Reset)
   Source: accounts/*.html
   ───────────────────────────────────────────────────────── */
.auth-section {
  padding: 110px 0 70px;
  background: linear-gradient(135deg, #f5f7ff 0%, #eef1fb 50%, #f0f4ff 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.auth-card {
  background: white;
  border-radius: 24px;
  padding: 48px 40px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  max-width: 520px;
  margin: 0 auto;
}

.auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #405ff2, #6b8aff);
}

.auth-card--narrow {
  max-width: 480px;
}

.icon-header {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #eef1fb, #d6deff);
  color: #405ff2;
}

.auth-card h2 {
  font-size: 28px;
  font-weight: 800;
  color: #050b20;
  margin-bottom: 6px;
  text-align: center;
}

.auth-card .subtitle {
  color: #888;
  font-size: 14px;
  margin-bottom: 32px;
  text-align: center;
}

.auth-card .form-group {
  margin-bottom: 18px;
}

.auth-card .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #444;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auth-card .form-group input[type="email"],
.auth-card .form-group input[type="password"],
.auth-card .form-group input[type="text"],
.auth-card .form-group input[type="tel"] {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  font-size: 14px;
  transition: all 0.25s;
  outline: none;
  font-family: inherit;
  background: #fafbfc;
}

.auth-card .form-group input:focus {
  border-color: #405ff2;
  background: white;
  box-shadow: 0 0 0 4px rgba(64, 95, 242, 0.08);
}

.auth-card .form-group .error-text {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 4px;
}

.auth-btn {
  display: block;
  width: 100%;
  padding: 15px;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: linear-gradient(135deg, #405ff2, #5a7aff);
  box-shadow: 0 8px 28px rgba(64, 95, 242, 0.25);
  letter-spacing: 0.3px;
}

.auth-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(64, 95, 242, 0.35);
}

.auth-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: #ccc;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.auth-sep::before,
.auth-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
}

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  color: #555;
  background: white;
  margin-bottom: 10px;
}

.oauth-btn:hover {
  border-color: #405ff2;
  background: #f8f9ff;
  color: #405ff2;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.oauth-btn img {
  width: 18px;
  height: 18px;
}

.auth-link {
  color: #405ff2;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.auth-link:hover {
  text-decoration: underline;
}

.remember-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  font-size: 13px;
  color: #666;
}

.remember-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.remember-row input[type="checkbox"] {
  accent-color: #405ff2;
  width: 16px;
  height: 16px;
}

.auth-footer {
  text-align: center;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
  font-size: 14px;
  color: #888;
}

/* Seller Type (register) */
.seller-type-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.seller-type-option {
  flex: 1;
  position: relative;
}
.seller-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.seller-type-option label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s;
  font-size: 13px;
  font-weight: 700;
  color: #777;
  text-align: center;
  background: #fafbfc;
}

.seller-type-option input[type="radio"]:checked + label {
  border-color: #405ff2;
  background: linear-gradient(135deg, #eef1fb, #d6deff);
  color: #405ff2;
}

.seller-type-option label:hover {
  border-color: #bbb;
  background: #f5f5f5;
}
.seller-type-option label i {
  font-size: 22px;
  margin-bottom: 2px;
}

/* Alert messages (auth pages) */
.alert-msg {
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 13px;
  margin-bottom: 20px;
  font-weight: 500;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.alert-msg.alert-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.alert-msg.alert-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.alert-msg.alert-info {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

/* Forgot / Reset password helpers */
.auth-lock-icon {
  font-size: 48px;
  color: #405ff2;
}
.auth-back-link {
  text-align: center;
  margin-top: 16px;
}

/* ─────────────────────────────────────────────────────────
   7. HOME PAGE (Hero, Featured Carousel, Blog, Testimonials)
   Source: home/index.html
   ───────────────────────────────────────────────────────── */

/* Hero Search Form */
.hero-search-form {
  padding: 24px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.hero-search-form .form-group {
  flex: 1;
  margin-bottom: 0;
}

.hero-search-form .form-group label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(5, 11, 32, 0.6);
  margin-bottom: 6px;
  display: block;
  font-weight: 700;
}

.hero-search-form .form-group select,
.hero-search-form .form-group input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #050b20;
  background: white;
  outline: none;
  transition: border 0.2s;
}

.hero-search-form .form-group select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 10px;
}

.hero-search-form .form-group select:focus,
.hero-search-form .form-group input:focus {
  border-color: #405ff2;
}

.hero-search-btn {
  background: #405ff2;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(64, 95, 242, 0.3);
  height: 46px;
}

.hero-search-btn:hover {
  background: #2d47d1;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(64, 95, 242, 0.4);
}

.hero-tags {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.hero-tags a {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hero-tags a:hover {
  background: rgba(255, 255, 255, 0.25);
  color: white;
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
}

.more-filters-link {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  /* Reset native <button> chrome (this was an <a>; now a real button for a11y). */
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.more-filters-link:hover {
  color: white;
  gap: 8px;
}

/* Hero Extra Filters (collapsible).
   Uses the #id selector so the collapsed state always wins the cascade no
   matter what other stylesheet rules exist for .form-group / .hero-* . */
#hero-extra-filters.hero-extra-filters {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
#hero-extra-filters.hero-extra-filters.open {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
/* Match the extra-filter inputs/selects to the main hero search inputs
   (these sit OUTSIDE the <form>, so .hero-search-form rules don't reach them). */
.hero-extra-filters .form-group {
  flex: 1;
  margin-bottom: 0;
}

.hero-extra-filters .form-group label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 6px;
  display: block;
  font-weight: 700;
}

.hero-extra-filters .form-group input,
.hero-extra-filters .form-group select {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #050b20;
  background: #fff;
  outline: none;
  transition: border 0.2s;
}

.hero-extra-filters .form-group select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 10px;
}

.hero-extra-filters .form-group input::placeholder {
  color: rgba(5, 11, 32, 0.45);
}

.hero-extra-filters .form-group input:focus,
.hero-extra-filters .form-group select:focus {
  border-color: #405ff2;
}

/* Section Heading */
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.section-heading--center {
  justify-content: center;
}

.section-heading .view-all {
  color: #405ff2;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}

.section-heading .view-all:hover {
  gap: 10px;
}

/* Featured Carousel */
.featured-carousel {
  margin: 0 -10px;
  position: relative;
}
.featured-carousel .slick-slide {
  padding: 0 10px;
}
/* Carousel nav bar (replaces slick dots): prev · progress · count · next */
.carousel-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin: 28px auto 0;
}
.carousel-nav[hidden] {
  display: none;
}
.carousel-nav-track {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}
.carousel-nav-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: #405ff2;
  transition: width 0.3s ease;
}
.carousel-nav-count {
  min-width: 44px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #050b20;
  font-variant-numeric: tabular-nums;
}
.carousel-nav-btn {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #050b20;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s, color 0.2s, opacity 0.2s;
}
.carousel-nav-btn:hover:not(:disabled) {
  border-color: #405ff2;
  color: #405ff2;
}
.carousel-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.carousel-nav-btn:focus-visible {
  outline: 2px solid #405ff2;
  outline-offset: 3px;
}

.featured-carousel .slick-prev,
.featured-carousel .slick-next {
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.featured-carousel .slick-prev:hover,
.featured-carousel .slick-next:hover {
  border-color: #405ff2;
  color: #405ff2;
}

.featured-carousel .slick-prev {
  left: -10px;
}
.featured-carousel .slick-next {
  right: -10px;
}
.featured-carousel .slick-prev:before,
.featured-carousel .slick-next:before {
  color: #050b20;
  font-size: 20px;
  transition: color 0.3s;
}
.featured-carousel .slick-prev:hover:before,
.featured-carousel .slick-next:hover:before {
  color: #405ff2;
}

/* Brand Logo Carousel */
.brand-carousel-wrap {
  padding: 40px 0;
}
.brand-carousel {
  margin: 0 -16px;
}
.brand-carousel .slick-slide {
  padding: 0 16px;
}

.brand-logo-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: white;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  padding: 12px;
}

.brand-logo-item:hover {
  border-color: #405ff2;
  box-shadow: 0 4px 16px rgba(64, 95, 242, 0.12);
  transform: translateY(-2px);
}

.brand-logo-item img {
  max-height: 50px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(40%);
  transition: filter 0.3s;
}

.brand-logo-item:hover img {
  filter: grayscale(0%);
}

/* CTA Cards */
.cta-card.buyer {
  background: linear-gradient(135deg, #405ff2 0%, #2b40b0 100%);
  position: relative;
  overflow: hidden;
}
.cta-card.seller {
  background: linear-gradient(135deg, #050b20 0%, #111a36 100%);
  position: relative;
  overflow: hidden;
}

.cta-card::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.cta-icon {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
}

.cta-icon svg {
  width: 48px;
  height: 48px;
  color: white;
  stroke: currentColor;
}

.cta-card h3 {
  color: white;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.cta-card .cta-text {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
  font-size: 15px;
}

.cta-card .cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 28px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(4px);
}

.cta-card .cta-link:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Blog Cards */
.blog-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.blog-card .blog-img {
  height: 200px;
  overflow: hidden;
}

.blog-card .blog-img a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.blog-card .blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-img img {
  transform: scale(1.05);
}
.blog-card .blog-body {
  padding: 20px;
}
.blog-card .blog-meta {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
  display: flex;
  gap: 12px;
}

.blog-card .blog-title {
  font-size: 16px;
  font-weight: 700;
  color: #050b20;
  margin-bottom: 8px;
  line-height: 1.4;
}

.blog-card .blog-title a {
  color: inherit;
  text-decoration: none;
}
.blog-card .blog-title a:hover {
  color: #405ff2;
}
.blog-card .blog-excerpt {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* Luxury Blog Surfaces */
.lux-blog-home-section {
  background:
    radial-gradient(
      1000px 420px at 18% -20%,
      rgba(64, 95, 242, 0.18) 0%,
      rgba(64, 95, 242, 0) 62%
    ),
    linear-gradient(180deg, #f6f8ff 0%, #ffffff 68%);
}

.lux-blog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.lux-blog-head-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #304de2;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(64, 95, 242, 0.24);
  background: rgba(255, 255, 255, 0.72);
}

.lux-blog-card {
  height: 100%;
  background: linear-gradient(170deg, #ffffff 0%, #fbfcff 100%);
  border-radius: 16px;
  border: 1px solid rgba(8, 18, 46, 0.08);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(8, 16, 44, 0.08);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
  display: flex;
  flex-direction: column;
}

.lux-blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(64, 95, 242, 0.24);
  box-shadow: 0 18px 38px rgba(8, 16, 44, 0.14);
}

.lux-blog-card .lux-blog-media {
  height: 220px;
  overflow: hidden;
}

.lux-blog-card .lux-blog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.lux-blog-card:hover .lux-blog-media img {
  transform: scale(1.05);
}

.lux-blog-card .lux-blog-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lux-blog-meta {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #6b7283;
}

.lux-blog-meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lux-blog-meta i {
  color: #405ff2;
}

.lux-blog-title {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
}

.lux-blog-title a {
  color: #10162f;
  text-decoration: none;
}

.lux-blog-title a:hover {
  color: #304de2;
}

.lux-blog-excerpt {
  margin: 0;
  color: #58607a;
  font-size: 15px;
  line-height: 1.7;
}

.lux-blog-cta-wrap {
  margin-top: auto;
  padding-top: 18px;
}

.lux-blog-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #304de2;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.lux-blog-cta i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.lux-blog-cta:hover i {
  transform: translateX(3px);
}

@media (max-width: 767px) {
  .lux-blog-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .lux-blog-card .lux-blog-media {
    height: 200px;
  }
}

/* Testimonials */
.testimonial-card {
  background: white;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  text-align: center;
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.testimonial-card .avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  border: 3px solid #eef1fb;
}

.testimonial-card .avatar--placeholder {
  background: #eef1fb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #405ff2;
}

.testimonial-card .stars {
  color: #f5a623;
  font-size: 14px;
  margin-bottom: 12px;
}
.testimonial-card .stars .rating-value {
  font-size: 13px;
  color: #050b20;
  font-weight: 700;
  margin-left: 4px;
}
.testimonial-card .quote {
  font-size: 15px;
  color: #555;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 16px;
}
.testimonial-card .author-name {
  font-size: 14px;
  font-weight: 700;
  color: #050b20;
}
.testimonial-card .author-role {
  font-size: 12px;
  color: #999;
}

.testimonial-carousel {
  margin: 0 -12px;
  position: relative;
}
.testimonial-carousel .slick-slide {
  padding: 0 12px;
}
.testimonial-carousel .slick-dots li button:before {
  color: #405ff2;
}

.testimonial-carousel .slick-prev,
.testimonial-carousel .slick-next {
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.testimonial-carousel .slick-prev:hover,
.testimonial-carousel .slick-next:hover {
  border-color: #405ff2;
  color: #405ff2;
}
.testimonial-carousel .slick-prev {
  left: -10px;
}
.testimonial-carousel .slick-next {
  right: -10px;
}
.testimonial-carousel .slick-prev:before,
.testimonial-carousel .slick-next:before {
  color: #050b20;
  font-size: 20px;
  transition: color 0.3s;
}
.testimonial-carousel .slick-prev:hover:before,
.testimonial-carousel .slick-next:hover:before {
  color: #405ff2;
}

/* Why Choose — icon hover */
.why-card-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: #eef1fb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 32px;
  color: #405ff2;
  box-shadow: 0 8px 24px rgba(64, 95, 242, 0.15);
  transition: transform 0.3s ease;
}

.why-card-icon svg {
  width: 40px;
  height: 40px;
  stroke: currentColor;
  color: #405ff2;
}

.why-card:hover .why-card-icon {
  transform: translateY(-5px) scale(1.05);
}

.why-card-title {
  font-size: 17px;
  font-weight: 800;
  color: #050b20;
  margin-bottom: 10px;
  letter-spacing: -0.2px;
}

.why-card-text {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Empty state in featured */
.featured-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 20px;
}

.featured-empty h4 {
  color: #999;
}
.featured-empty p {
  color: #bbb;
}

/* Background section variant */
.wiz-section--muted {
  background: #fafafa;
}

/* Centered section heading */
.section-heading--center {
  justify-content: center;
}

/* Hero title — was an <h2> (70px/46px); now an <h1>, so it needs its own size
   or it inherits the oversized global h1. clamp keeps it responsive. */
.hero-title {
  font-weight: 800;
  letter-spacing: -1px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.15;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .hero-title {
    font-size: clamp(34px, 9vw, 46px);
    margin-bottom: 28px;
    color: #ffffff !important;
  }
}

/* Hero extra-filter labels */
.hero-filter-label {
  color: rgba(255, 255, 255, 0.7);
}

/* Why card utility classes */
.why-card-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: #eef1fb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 32px;
  color: #405ff2;
  box-shadow: 0 8px 24px rgba(64, 95, 242, 0.15);
  transition: transform 0.3s ease;
}
.why-card:hover .icon {
  transform: translateY(-5px) scale(1.05);
}
.why-card-title {
  font-size: 17px;
  font-weight: 800;
  color: #050b20;
  margin-bottom: 10px;
  letter-spacing: -0.2px;
}
.why-card-text {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* CTA text */
.cta-text {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
  font-size: 15px;
}

/* Testimonial avatar placeholder */
.avatar--placeholder {
  background: #eef1fb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #405ff2;
}

/* Rating number */
.rating-number {
  font-size: 13px;
  color: #050b20;
  font-weight: 700;
  margin-left: 4px;
}

/* ─────────────────────────────────────────────────────────
   8. INVENTORY / BROWSE PAGE
   Source: home/inventory.html
   ───────────────────────────────────────────────────────── */

/* Inventory section & title */
.inventory-section {
  padding-top: 50px;
  padding-bottom: 60px;
}
.inventory-title {
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 700;
  color: #050b20;
  margin-bottom: 28px;
}

/* Brands of a category / models of a brand, below the results
   (partials/_inventory_related.html); chips as on the homepage. */
.inventory-related {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(5, 11, 32, 0.08);
}
.inventory-related-title {
  font-size: 18px;
  font-weight: 700;
  color: #050b20;
  margin: 0 0 14px;
}
.inventory-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.inventory-related-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid rgba(5, 11, 32, 0.1);
  border-radius: 999px;
  background: #ffffff;
  color: #2b3245;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}
.inventory-related-link:hover {
  border-color: #405ff2;
  color: #405ff2;
}
.inventory-related-count {
  color: #6b7280;
  font-weight: 400;
}
.mobile-filter-count {
  background: rgba(255, 255, 255, 0.25);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
  display: none;
}

/* Filter sidebar */
.filter-sidebar {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.filter-section {
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding-bottom: 12px;
}

.filter-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.filter-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}

.filter-section-header h6 {
  font-size: 12px;
  font-weight: 800;
  color: #050b20;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.filter-section-header h6 i {
  font-size: 13px;
  color: #050b20;
}

.filter-section-header .toggle-icon {
  font-size: 10px;
  color: #999;
  transition: transform 0.2s;
}
.filter-section-header.collapsed .toggle-icon {
  transform: rotate(-90deg);
}
.filter-section-body {
  margin-top: 10px;
  transition: max-height 0.3s ease;
}
.filter-section.collapsed .filter-section-body {
  display: none;
}

.filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 180px;
  overflow-y: auto;
}

.filter-list li a,
.filter-list li label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  border-radius: 8px;
  color: #555;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}

.filter-list li a:hover,
.filter-list li a.active,
.filter-list li label:hover {
  background: #eef1fb;
  color: #405ff2;
  font-weight: 600;
}

.filter-list .count {
  background: #f0f0f0;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  color: #999;
}
.filter-list li a.active .count {
  background: #405ff2;
  color: white;
}

.filter-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
  transition: border 0.2s;
  background: white;
}

.filter-input:focus {
  border-color: #405ff2;
}
.filter-row {
  display: flex;
  gap: 8px;
}
.filter-row input,
.filter-row select {
  flex: 1;
  min-width: 0;
}

select.filter-input {
  -webkit-appearance: none;
  appearance: none;
  background: white
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  padding-right: 28px;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: #405ff2;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 8px 24px rgba(64, 95, 242, 0.25);
}

.filter-btn:hover {
  background: #2d47d1;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(64, 95, 242, 0.35);
}

.filter-btn i {
  font-size: 16px;
}

.clear-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: transparent;
  color: #666;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  margin-top: 10px;
  transition: all 0.2s;
  cursor: pointer;
}

.clear-btn:hover {
  background: #f5f7ff;
  color: #405ff2;
  border-color: #405ff2;
}

.color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid #ddd;
  vertical-align: middle;
  margin-right: 6px;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 13px;
  color: #555;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
}

.filter-checkbox:hover {
  background: #eef1fb;
  color: #405ff2;
}
.filter-checkbox input[type="checkbox"] {
  accent-color: #405ff2;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.more-filters-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  color: #405ff2;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px dashed #405ff2;
  border-radius: 10px;
  margin: 12px 0;
  transition: all 0.2s;
}

.more-filters-toggle:hover {
  background: #f0f3ff;
}
.more-filters-area {
  display: none;
}
.more-filters-area.show {
  display: block;
}

/* Toolbar */
.listing-toolbar {
  padding: 14px 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.03);
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.listing-toolbar .results-text {
  color: #666;
  font-size: 14px;
}
.listing-toolbar .results-text strong {
  color: #050b20;
  font-weight: 700;
}
.listing-toolbar .tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-select {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #050b20;
  background: white;
  outline: none;
  cursor: pointer;
  transition: border 0.2s;
}

.sort-select:focus {
  border-color: #405ff2;
}

.view-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  color: #999;
  transition: all 0.3s;
  font-size: 14px;
}

.view-btn.active {
  background: #405ff2;
  border-color: #405ff2;
  color: white;
  box-shadow: 0 4px 12px rgba(64, 95, 242, 0.2);
}

/* Active Filters Bar */
.active-filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 0;
}

.active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #eef1fb;
  color: #405ff2;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.active-filter-tag:hover {
  background: #dce3ff;
  border-color: #405ff2;
}
.active-filter-tag .remove-filter {
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  opacity: 0.7;
}
.active-filter-tag .remove-filter:hover {
  opacity: 1;
}

/* Breadcrumb */
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.page-breadcrumb a {
  color: #405ff2;
  text-decoration: none;
}
.page-breadcrumb span {
  color: #999;
}
/* The current page's name is text, not decoration: AA contrast (4.8:1). */
.page-breadcrumb [aria-current="page"] {
  color: #6b7280;
}

/* Empty state */
.empty-state {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 20px;
}
.empty-state i {
  font-size: 48px;
  color: #ddd;
  margin-bottom: 16px;
  display: block;
}
.empty-state h4 {
  color: #999;
  font-weight: 600;
  margin-bottom: 8px;
}
.empty-state a {
  color: #405ff2;
  text-decoration: none;
  font-weight: 600;
}

/* Map View */
#map-container {
  display: none;
  height: 500px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

#map-container.show {
  display: block;
}
.leaflet-popup-content {
  font-size: 13px;
  line-height: 1.4;
}
.leaflet-popup-content .map-card {
  display: flex;
  gap: 10px;
  max-width: 260px;
}
.leaflet-popup-content .map-card img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}
.leaflet-popup-content .map-card-info h6 {
  font-size: 13px;
  margin: 0 0 4px;
}
.leaflet-popup-content .map-card-info .price {
  color: #405ff2;
  font-weight: 700;
  font-size: 14px;
}

/* Mobile Filter */
.mobile-filter-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1035;
  padding: 14px 28px;
  background: #405ff2;
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(64, 95, 242, 0.35);
  cursor: pointer;
  will-change: transform;
}

.mobile-filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1090;
}
.mobile-filter-backdrop.show {
  display: block;
}

.mobile-filter-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  background: white;
  z-index: 1100;
  border-radius: 20px 20px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 20px 100px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
  will-change: transform;
}

.mobile-filter-panel.show {
  display: block;
}

.mobile-filter-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.mobile-filter-panel .panel-header h5 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.mobile-filter-panel .panel-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f5f5;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.mobile-filter-panel .apply-mobile-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: white;
  border-top: 1px solid #eee;
  z-index: 1110;
  width: 100%;
  box-sizing: border-box;
}
.mobile-filter-panel .apply-mobile-btn button {
  width: 100%;
  padding: 14px;
  background: #405ff2;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 991px) {
  .filter-sidebar-col {
    display: none;
  }
  .mobile-filter-btn {
    display: block;
  }
}

@media (min-width: 992px) {
  .mobile-filter-backdrop,
  .mobile-filter-panel {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────
   9. ADVERTISEMENT DETAIL PAGE
   Source: advertisements/advertisement-details.html
   ───────────────────────────────────────────────────────── */

/* Gallery */
.detail-gallery {
  border-radius: 14px;
  overflow: hidden;
  background: #f5f5f5;
  margin-bottom: 12px;
  position: relative;
  cursor: pointer;
}

.detail-gallery .main-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: contain;
  background: #f5f5f5;
  display: block;
}

.gallery-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.thumb-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.thumb-strip .thumb {
  width: 80px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  flex-shrink: 0;
  opacity: 0.65;
  transition: all 0.2s;
}

.thumb-strip .thumb.active,
.thumb-strip .thumb:hover {
  border-color: #405ff2;
  opacity: 1;
}
.thumb-strip .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Title Row & Actions */
.detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 20px 0 8px;
}

.detail-title {
  margin: 0;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #050b20;
}

.detail-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.detail-actions .action-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s;
  font-size: 16px;
  color: #555;
}

.detail-actions .action-btn:hover {
  border-color: #405ff2;
  color: #405ff2;
  background: #eef1fb;
}
.detail-actions .action-btn.active {
  border-color: #e74c3c;
  color: #e74c3c;
  background: #fdf0ef;
}

.detail-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.detail-meta-pills .pill {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f5f5f5;
  color: #555;
}

.pill-year {
  background: #eef1fb;
  color: #405ff2;
  font-weight: 600;
}
.pill-km {
  background: #f0fdf4;
  color: #166534;
}
.pill-fuel {
  background: #fef9c3;
  color: #854d0e;
}
.pill-trans {
  background: #fdf2f8;
  color: #9d174d;
}

/* Verified Badge */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #d1fae5;
  color: #065f46;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 10px;
  border-radius: 8px;
  margin-left: 10px;
  vertical-align: middle;
}

/* Spec Tables */
.spec-section {
  margin-bottom: 28px;
}

.spec-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #050b20;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #405ff2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.spec-section-title i {
  color: #405ff2;
}
.spec-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 14px;
}
.spec-label {
  color: #888;
  flex-shrink: 0;
  min-width: 140px;
}
.spec-value {
  color: #050b20;
  font-weight: 500;
  text-align: right;
}

/* Equipment Grid */
.equip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.equip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  padding: 6px 0;
}
@media (max-width: 576px) {
  .equip-grid {
    grid-template-columns: 1fr;
  }
}

/* Sidebar Boxes */
.sidebar-box {
  background: white;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
  margin-bottom: 24px;
}

.price-tag {
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 800;
  color: #050b20;
  line-height: 1.2;
}
.price-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.price-meta span {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.meta-green {
  background: #d4edda;
  color: #155724;
}
.meta-blue {
  background: #eef1fb;
  color: #405ff2;
}
.meta-yellow {
  background: #fff3cd;
  color: #856404;
}
/* Price location — pill chip under price in sidebar */
.price-location {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #4a5568;
  margin-top: 14px;
  background: linear-gradient(135deg, #eef1fb 0%, #f5f7ff 100%);
  border: 1px solid rgba(64, 95, 242, 0.18);
  padding: 6px 14px;
  border-radius: 24px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.price-location .fa-map-marker {
  color: #405ff2;
  font-size: 12px;
}

/* ── Seller Card ─────────────────────────────────── */
.seller-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0 8px;
}

/* Column layout when inside the detail sidebar */
.detail-sidebar .seller-block,
.side-bar .seller-block {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 24px 0 12px;
}

/* Stack seller-name, type badge, and location vertically & centered */
.detail-sidebar .seller-block > div,
.side-bar .seller-block > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Avatar */
.seller-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fff;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 3px rgba(64, 95, 242, 0.18),
    0 6px 20px rgba(64, 95, 242, 0.12);
  transition: box-shadow 0.3s;
}
.seller-avatar:hover {
  box-shadow:
    0 0 0 4px rgba(64, 95, 242, 0.28),
    0 8px 28px rgba(64, 95, 242, 0.18);
}
.seller-avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.seller-avatar.no-image {
  background: linear-gradient(135deg, #eef1fb 0%, #dce3ff 100%);
  color: #405ff2;
  font-size: 30px;
  font-weight: 800;
}

/* Seller info */
.seller-name {
  font-weight: 700;
  font-size: 16px;
  color: #050b20;
  margin-top: 12px;
  letter-spacing: -0.2px;
}
.seller-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-top: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.type-private {
  background: #eef1fb;
  color: #405ff2;
  border: 1px solid rgba(64, 95, 242, 0.15);
}
.type-dealer {
  background: #d4edda;
  color: #155724;
  border: 1px solid rgba(21, 87, 36, 0.15);
}
.type-estate {
  background: #f3e8ff;
  color: #6f42c1;
  border: 1px solid rgba(111, 66, 193, 0.15);
}

/* Seller location — pill chip */
.seller-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #4a5568;
  font-weight: 500;
  margin-top: 10px;
  background: linear-gradient(135deg, #eef1fb 0%, #f5f7ff 100%);
  border: 1px solid rgba(64, 95, 242, 0.14);
  padding: 5px 13px;
  border-radius: 20px;
  letter-spacing: 0.01em;
}
.seller-location .fa-map-marker {
  color: #405ff2;
  font-size: 11px;
}

.detail-mobile-location {
  margin-top: 10px;
}

.detail-mobile-price {
  margin-top: 10px;
}
.detail-mobile-price .price-tag {
  font-size: 28px;
  color: #405ff2;
}

.detail-actions .detail-mobile-location {
  display: inline-flex;
  align-self: center;
  margin-top: 0;
  margin-right: 2px;
  white-space: nowrap;
}

/* Contact Buttons */
.contact-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
  margin-top: 12px;
}

.btn-primary-custom {
  background: #405ff2;
  color: white;
  box-shadow: 0 8px 24px rgba(64, 95, 242, 0.25);
}
.btn-primary-custom:hover {
  background: #2d47d1;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(64, 95, 242, 0.35);
}
.btn-whatsapp {
  background: #25d366;
  color: white;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.25);
}
.btn-whatsapp:hover {
  background: #1da851;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.35);
}
.btn-outline-custom {
  background: transparent;
  color: #050b20;
  border: 2px solid #e5e7eb;
}
.btn-outline-custom:hover {
  border-color: #405ff2;
  color: #405ff2;
  background: #eef1fb;
}

/* Share Dropdown */
.share-dropdown {
  position: relative;
  display: inline-block;
}

.share-menu {
  display: none;
  position: absolute;
  top: 50px;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  z-index: 100;
  min-width: 200px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.share-menu.show {
  display: block;
}

.share-menu a,
.share-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  transition: background 0.2s;
}

.share-menu a:hover,
.share-menu button:hover {
  background: #f5f5f5;
}

/* Offer Modal */
.offer-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

.offer-modal-overlay.show {
  display: flex;
}

.offer-modal {
  background: #fff;
  border-radius: 20px;
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
}

.offer-modal h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #050b20;
}
.offer-modal .form-group {
  margin-bottom: 16px;
}
.offer-modal label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
  display: block;
}

.offer-modal input,
.offer-modal textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 14px;
  transition: border-color 0.2s;
  font-family: inherit;
}

.offer-modal input:focus,
.offer-modal textarea:focus {
  border-color: #405ff2;
  outline: none;
}

.offer-price-options {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.offer-price-options button {
  flex: 1;
  padding: 10px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.offer-price-options button:hover,
.offer-price-options button.selected {
  border-color: #405ff2;
  background: #eef1fb;
  color: #405ff2;
}

/* Map */
.map-frame {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
}

.directions-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #405ff2;
  text-decoration: none;
  margin-top: 8px;
  font-weight: 600;
}

.directions-link:hover {
  text-decoration: underline;
}

/* Related vehicles: a native swipeable row (advertisement-details.html).
   Three cards on desktop, two on tablets, and on phones one card with the
   next one peeking in. The page itself never scrolls sideways. */
.related-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  scroll-behavior: smooth;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
}

.related-carousel:focus-visible {
  outline: 2px solid #405ff2;
  outline-offset: 4px;
  border-radius: 12px;
}

.related-carousel__item {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

/* The shared card carries Bootstrap column widths; here it fills its slot. */
.related-carousel__item .box-car {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.related-nav {
  display: flex;
  gap: 8px;
}

.related-nav[hidden] {
  display: none;
}

.related-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  background: #fff;
  color: #405ff2;
  font-size: 18px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.related-nav__btn:hover:not(:disabled) {
  border-color: #405ff2;
  background: #eef1ff;
}

.related-nav__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.related-nav__btn:focus-visible {
  outline: 2px solid #405ff2;
  outline-offset: 2px;
}

@media (max-width: 991.98px) {
  .related-carousel__item {
    flex-basis: calc((100% - 20px) / 2);
  }
}

@media (max-width: 575.98px) {
  .related-carousel {
    gap: 12px;
  }

  .related-carousel__item {
    flex-basis: 82%;
  }
}

/* Detail page section */
.detail-section {
  padding-top: 32px;
  padding-bottom: 44px;
}

/* Listing detail, compact: spec rows sit two to a row, and the headings and
   gaps lose their inherited oversized line heights. All content stays. */
.spec-section {
  margin-bottom: 20px;
}

.spec-section-title {
  line-height: 1.3;
  margin-bottom: 8px;
  padding-bottom: 6px;
}

.spec-section:has(> .spec-row) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}

.spec-section:has(> .spec-row) > .spec-section-title {
  grid-column: 1 / -1;
  justify-self: start;
}

/* The phones-only Pricing & Sales block carries Bootstrap's d-block
   (display: block !important); it is hidden from 992px up (d-lg-none). */
@media (max-width: 991.98px) {
  .spec-section.d-block:has(> .spec-row) {
    display: grid !important;
  }
}

.spec-row {
  padding: 7px 0;
  line-height: 1.4;
}

/* #888 was 3.5:1 on white; on phones the label is the cell heading. */
.spec-label {
  min-width: 0;
  color: #6b7280;
}

@media (max-width: 575.98px) {
  .detail-section {
    padding-top: 16px;
    padding-bottom: 28px;
  }

  .spec-section {
    margin-bottom: 16px;
  }

  .spec-section:has(> .spec-row) {
    column-gap: 16px;
  }

  /* Phone cells: label above value, two cells per row. */
  .spec-row {
    flex-direction: column;
    gap: 1px;
    padding: 6px 0;
  }

  .spec-label {
    font-size: 12px;
  }

  .spec-value {
    text-align: left;
  }

  .equip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
  }

  .equip-item {
    font-size: 13px;
    padding: 4px 0;
  }

  .sidebar-box {
    padding: 20px !important;
    margin-bottom: 16px;
  }
}

/* Share menu icons */
.share-icon {
  width: 18px;
  display: inline-block;
  text-align: center;
}
.share-icon-fb {
  color: #1877f2;
}
.share-icon-tw {
  color: #1da1f2;
}
.share-icon-wa {
  color: #25d366;
}
.share-icon-link {
  color: #555;
}

/* Color dot inline (small) */
.color-dot-sm {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid #ddd;
  vertical-align: middle;
  margin-right: 4px;
}

/* Spec value modifiers */
.text-metallic {
  color: #888;
}
.text-available {
  color: #00b67a;
}
.spec-value--bold {
  font-weight: 700;
  color: #050b20;
}
.spec-value--primary {
  color: #405ff2;
}
.spec-value--warning {
  color: #856404;
}

/* Description block */
.ad-description {
  color: #555;
  line-height: 1.8;
  font-size: 15px;
}

/* Equipment check icon */
.equip-check {
  color: #00b67a;
  font-size: 11px;
  flex-shrink: 0;
}

/* Related section */
.related-section {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid #eee;
}
.related-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.related-title {
  font-size: clamp(18px, 3vw, 20px);
  font-weight: 700;
  color: #050b20;
  margin: 0;
}

/* Sidebar sticky */
.sidebar-sticky {
  position: sticky;
  top: 100px;
}

/* Sidebar spec row small */
.spec-row--sm {
  font-size: 13px;
}

/* Location box */
.location-label {
  font-size: 14px;
  font-weight: 600;
  color: #050b20;
  margin-bottom: 12px;
}
.location-text {
  color: #666;
  font-size: 14px;
  margin: 0 0 12px;
}

/* Map */
.map-frame {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  height: 180px;
}
.map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Sidebar compact */
.sidebar-box--compact {
  padding: 16px 28px;
}

/* Source meta */
.source-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #aaa;
}
.source-link {
  font-size: 12px;
  color: #405ff2;
  margin-top: 4px;
  display: inline-block;
}

/* Offer modal header & close */
.offer-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.offer-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: #aaa;
  cursor: pointer;
  padding: 4px;
}

/* ─────────────────────────────────────────────────────────
   10. DASHBOARD
   Source: dashboard/base.html, create/edit/my-advertisements
   ───────────────────────────────────────────────────────── */

/* Dashboard layout */
.dashboard-section {
  padding: 110px 0 70px;
  background: #f8f9fa;
  min-height: 100vh;
}

.dashboard-nav li.active a {
  color: #405ff2;
  font-weight: 600;
}
.dashboard-nav li a {
  display: block;
  padding: 10px 0;
  color: #555;
  text-decoration: none;
  transition: 0.3s;
}
.dashboard-nav li a:hover {
  color: #405ff2;
}
.dashboard-nav li {
  border-bottom: 1px solid #eee;
  padding: 5px 0;
}
.dashboard-nav li:last-child {
  border-bottom: none;
}

.side-bar {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.dashboard-section .right-box {
  background: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.provider-avatar-wrapper {
  position: relative;
  display: inline-block;
}

/* Dashboard avatar */
.dash-avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 3px solid #eee;
}
.dash-avatar-placeholder {
  width: 100px;
  height: 100px;
  background: #eee;
  font-size: 36px;
  color: #aaa;
  margin: 0 auto;
}

/* Dashboard sort select */
.dash-sort-select {
  width: auto;
  border: none;
  background: #f8f9fa;
  font-weight: 600;
}

/* Dashboard listing placeholder */
.listing-img-placeholder {
  width: 100px;
  height: 75px;
  background: #eee;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
}

.listing-img-placeholder i {
  font-size: 24px;
}

.listing-img-placeholder svg {
  width: 32px;
  height: 32px;
  color: #aaa;
  stroke: currentColor;
}

/* Empty state */
.empty-state-icon {
  font-size: 48px;
  color: #ddd;
}

.empty-state-icon[class*="svg"],
.empty-state-icon svg {
  width: 64px;
  height: 64px;
  color: #ddd;
  stroke: currentColor;
}

/* Cancel button */
.btn-cancel {
  border-radius: 8px;
}

/* Dashboard Forms (create/edit ad) */
.form-section {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #eee;
  margin-bottom: 25px;
}

.form-section h5 {
  color: #050b20;
  font-weight: 700;
  border-bottom: 2px solid #f5f5f5;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.form-section .form-label {
  font-size: 13px;
  font-weight: 600;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.form-section .form-control,
.form-section .form-select {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 12px 15px;
  font-size: 14px;
  box-shadow: none;
  transition: 0.3s;
  background: #fafbfc;
}

.form-section .form-control:focus,
.form-section .form-select:focus {
  border-color: #405ff2;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(64, 95, 242, 0.1);
}

.form-section .error-text {
  color: #dc3545;
  font-size: 12px;
  margin-top: 5px;
}

/* Checkboxes */
.form-section .form-check {
  margin-bottom: 10px;
}
.form-section .form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.form-section .form-check-label {
  font-size: 14px;
  color: #555;
}

/* Multi-select equipment list */
#div_id_equipments {
  /* max-height: 220px; */
  overflow: hidden; /* collapsed by default; JS toggles */
  padding: 18px;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(12, 34, 60, 0.04);
}

#div_id_equipments .equipment-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  align-items: start;
}

#div_id_equipments .equipment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid rgba(14, 30, 60, 0.04);
  margin: 0; /* grid gap handles spacing */
  position: relative;
  min-height: 56px;
  gap: 12px;
}

#div_id_equipments .form-check-input {
  margin-right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid #e6e9ef;
  vertical-align: middle;
}

#div_id_equipments .form-check-label {
  font-size: 14px;
  color: #263238;
}

#div_id_equipments .form-check-input:checked {
  background: #405ff2;
  border-color: #405ff2;
}

#div_id_equipments .show-more-equipment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  background: transparent;
  border: none;
  color: #405ff2;
  cursor: pointer;
  font-weight: 600;
}

/* iOS-style toggle switch for equipment items */
#div_id_equipments .equipment-item {
  position: relative;
}

/* layout: two-column grid with each item a flex row so content and switch align correctly */
#div_id_equipments .equipment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* label takes remaining space */
#div_id_equipments .equipment-item label.equipment-label,
#div_id_equipments .equipment-item label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0 12px;
  font-size: 14px;
  color: #263238;
  cursor: pointer;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

/* visually hide native checkbox but keep it accessible to screen readers and keyboard */
#div_id_equipments .equipment-item input[type="checkbox"] {
  position: absolute !important;
  left: -9999px !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  opacity: 1 !important;
}

/* switch control aligned on the right, non-absolute so it doesn't escape flow */
#div_id_equipments .switch {
  position: relative;
  flex: 0 0 44px;
  height: 26px;
  border-radius: 13px;
  background: #eef4ff;
  transition: background 0.18s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: inline-block;
}

#div_id_equipments .switch .switch-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(12, 34, 60, 0.12);
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* checked state: when input is checked, move knob and change background */
#div_id_equipments .equipment-item input[type="checkbox"]:checked ~ .switch,
#div_id_equipments .equipment-item input[type="checkbox"]:checked + .switch {
  background: #405ff2;
}

#div_id_equipments
  .equipment-item
  input[type="checkbox"]:checked
  ~ .switch
  .switch-slider,
#div_id_equipments
  .equipment-item
  input[type="checkbox"]:checked
  + .switch
  .switch-slider {
  transform: translateX(18px);
}

#div_id_equipments .equipment-item:hover {
  box-shadow: 0 6px 14px rgba(12, 34, 60, 0.03);
}

#div_id_equipments .show-more-equipment.expanded i {
  transform: rotate(180deg);
}

/* Image Upload UI */
.image-upload-wrap {
  border: 2px dashed #cfd4d9;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  background: #f8f9fa;
  cursor: pointer;
  transition: 0.3s;
  margin-bottom: 20px;
}

.image-upload-wrap:hover {
  border-color: #405ff2;
  background: #f0f4ff;
}
.image-upload-wrap i {
  font-size: 40px;
  color: #aab;
  margin-bottom: 15px;
}
.image-upload-wrap p {
  margin: 0;
  color: #555;
  font-weight: 500;
}
.image-upload-wrap small {
  color: #888;
  font-size: 12px;
}

#preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

.image-preview-item {
  width: 150px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ddd;
}

.image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-item .remove-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  border: none;
}

/* My Advertisements Table */
.my-listing-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  margin-top: 20px;
}

.my-listing-table th {
  padding: 15px;
  color: #6c757d;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  background: #fff;
  border-bottom: 2px solid #eee;
}

.my-listing-table td {
  padding: 15px;
  vertical-align: middle;
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.my-listing-table td:first-child {
  border-left: 1px solid #eee;
  border-radius: 10px 0 0 10px;
}
.my-listing-table td:last-child {
  border-right: 1px solid #eee;
  border-radius: 0 10px 10px 0;
}

.shop-cart-product {
  display: flex;
  align-items: center;
  gap: 15px;
}
.shop-product-cart-img img {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border-radius: 8px;
}
.shop-product-cart-info h6 {
  margin: 0 0 5px;
  font-weight: 700;
}
.shop-product-cart-info h6 a {
  color: #050b20;
  text-decoration: none;
}
.shop-product-cart-info h6 a:hover {
  color: #405ff2;
}
.shop-product-cart-info p {
  margin: 0 0 5px;
  font-size: 13px;
  color: #888;
}
.shop-product-cart-info .price {
  font-weight: 700;
  color: #050b20;
}

.my-listing-table .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  margin-right: 5px;
  transition: 0.3s;
  color: #fff;
  text-decoration: none;
}

.my-listing-table .action-btn.edit {
  background: #f8f9fa;
  border: 1px solid #ddd;
  color: #555;
}
.my-listing-table .action-btn.edit:hover {
  background: #405ff2;
  color: #fff;
  border-color: #405ff2;
}
.my-listing-table .action-btn.remove {
  background: #f8f9fa;
  border: 1px solid #ddd;
  color: #dc3545;
}
.my-listing-table .action-btn.remove:hover {
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

/* Dashboard Filter Bar */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #eee;
}

.search-box {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 5px 15px;
  border: 1px solid #eee;
  width: 300px;
}

.search-box input {
  border: none;
  background: transparent;
  padding: 8px;
  width: 100%;
  outline: none;
  font-size: 14px;
}
.search-box i {
  color: #888;
}

/* Dashboard Mobile Card Layout */
@media (max-width: 767px) {
  #div_id_equipments .equipment-list {
    grid-template-columns: 1fr;
  }
  #div_id_equipments .equipment-item {
    width: 100%;
  }
  .search-box {
    width: 100%;
  }

  .my-listing-table table,
  .my-listing-table thead,
  .my-listing-table tbody,
  .my-listing-table th,
  .my-listing-table td,
  .my-listing-table tr {
    display: block;
    width: 100%;
  }

  .my-listing-table thead {
    display: none;
  }

  .my-listing-table tbody .advertisement-item {
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
    background: #fff;
    padding: 15px;
  }

  .my-listing-table td {
    border: none !important;
    padding: 5px 0;
    border-radius: 0 !important;
  }
  .shop-cart-product {
    flex-direction: column;
    align-items: flex-start;
  }
  .shop-product-cart-img img {
    width: 100%;
    height: 200px;
  }

  .my-listing-table tbody .advertisement-item td[data-label] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5 !important;
  }

  .my-listing-table tbody .advertisement-item td[data-label]:before {
    content: attr(data-label);
    font-weight: 600;
    color: #888;
  }

  .my-listing-table tbody .advertisement-item td:last-child {
    border-bottom: none !important;
    padding-top: 15px;
    text-align: center;
  }
}

/* ─────────────────────────────────────────────────────────
   11. BLOG DETAIL PAGE
   Source: blog/blog-details.html
   ───────────────────────────────────────────────────────── */
.rating-list .list li i.gray {
  color: #ccc;
}
.Reply-sec .list li i {
  color: #ccc;
  cursor: pointer;
}
.Reply-sec .list li.hovered i,
.list li.selected i {
  color: #ffb400;
}

/* ─────────────────────────────────────────────────────────
   12. DASHBOARD PROFILE / MESSAGES
   Source: dashboard-profile, provider-profile, provider-messages
   ───────────────────────────────────────────────────────── */

/* Provider profile avatar (100×100 variant) */
.provider-avatar img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

/* Public seller profile (accounts/provider-profile.html): seller card in a
   sidebar, listings in a grid that uses the remaining width. The theme's
   card, form and review rules are scoped to other pages' sections, so the
   pieces this page needs are restated here. */
.provider-profile-section {
  padding-bottom: 60px;
  /* Sticky header height (125px from 992px, 85px from 1200px) + 24px. */
  --provider-sticky-top: 149px;
}

.provider-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 992px) {
  .provider-profile-layout {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  }
}

@media (min-width: 1200px) {
  .provider-profile-section {
    --provider-sticky-top: 109px;
  }

  .provider-profile-layout {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  }
}

/* The seller card follows the listings while there is room for all of it. */
@media (min-width: 992px) and (min-height: 640px) {
  .provider-profile-aside .side-bar {
    position: sticky;
    top: var(--provider-sticky-top);
  }
}

.provider-profile-section .contact-box {
  padding: 28px 24px;
}

.provider-profile-section .info-list {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  display: grid;
  gap: 8px;
  font-size: 15px;
}

.provider-profile-section .info-list i {
  width: 18px;
  margin-right: 6px;
  text-align: center;
  color: #405ff2;
}

.provider-profile-main .right-box > .title {
  margin-bottom: 20px;
}

.provider-listings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}

.provider-listings .car-block-three {
  margin: 0;
}

.provider-listings-empty {
  grid-column: 1 / -1;
  margin: 0;
}

/* Reviews */
.provider-profile-section .reviews .content-box {
  border: 1px solid rgba(10, 18, 46, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #fff;
}

.provider-profile-section .auther-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.provider-profile-section .auther-name > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #405ff2;
  color: #fff;
  font-weight: 700;
}

/* The seller's name is the page h1; same size as the h4 it replaced. */
.provider-profile-section .contact-box h1.name {
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--line-height-heading-small);
  letter-spacing: 0.15px;
}

.provider-profile-section .auther-name .name {
  margin: 0;
}

/* ── Reviews: list and form, shared by the seller profile and blog articles.
   The theme styles .form_boxes only inside other pages' sections, which left
   these fields borderless and white on white. ── */
.reviews .rating-list .list {
  display: flex;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 8px 0;
}

.review-form .Reply-sec .title {
  margin-bottom: 12px;
}

.review-form .list-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-weight: 500;
}

.review-form .star-rating-input {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.review-form .star-rating-btn {
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.review-form .review-rating-error {
  flex-basis: 100%;
  margin: 0;
  color: #c62828;
  font-size: 14px;
  font-weight: 500;
}

.review-form .form_boxes {
  margin-top: 16px;
}

.review-form .form_boxes label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #050b20;
}

.review-form .form_boxes input,
.review-form .form_boxes textarea {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #050b20;
  font: inherit;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.review-form .form_boxes textarea {
  min-height: 140px;
  overflow: auto;
  resize: vertical;
}

.review-form .form_boxes input:focus,
.review-form .form_boxes textarea:focus {
  border-color: #405ff2;
  box-shadow: 0 0 0 4px rgba(64, 95, 242, 0.12);
  /* Transparent, so the focus ring still shows in forced-colors mode. */
  outline: 2px solid transparent;
}

.review-form .form-submit {
  margin-top: 20px;
}

/* Blog article: the theme draws a box around each label + field there
   (".blog-section-five .right-box-two form .form_boxes"). The review form
   uses the bordered fields above instead, as on the seller profile. */
.blog-section-five .right-box-two form.review-form .form_boxes {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  margin-bottom: 0;
}

.blog-section-five .right-box-two form.review-form .form_boxes label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #050b20;
}

.blog-section-five .right-box-two form.review-form .form_boxes textarea {
  height: auto;
}

/* Conversation list */
.conversation-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.conversation-preview {
  font-size: 13px;
  color: #666;
}

/* Chat area */
.chat-area {
  border: 1px solid #eee;
  border-radius: 8px;
  height: 400px;
  display: flex;
  flex-direction: column;
}
.chat-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.chat-messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}
.chat-input {
  padding: 15px;
  border-top: 1px solid #eee;
}

/* Message bubbles */
.message-received,
.message-sent {
  margin-bottom: 15px;
}

.message-bubble {
  padding: 10px 15px;
  border-radius: 12px;
  display: inline-block;
  max-width: 80%;
}
.message-bubble--received {
  background: #f4f4f4;
}
.message-bubble--sent {
  background: #405ff2;
  color: white;
}

/* Wishlist card */
.wishlist-image-box {
  position: relative;
}
.wishlist-remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wishlist-heart {
  color: #ff4444;
}

/* My-ads listing thumbnail */
.listing-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

/* Filter list scrollable */
.filter-list--scroll {
  max-height: 220px;
}

/* Filter empty state */
.filter-empty-msg {
  padding: 8px;
  color: #999;
  font-size: 12px;
}

/* Pagination row */
.pagination-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.pagination-row .page-num {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #050b20;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.pagination-row .page-num:hover {
  border-color: #405ff2;
  color: #405ff2;
  background: #eef1fb;
}

.pagination-row .page-num.active {
  background: #405ff2;
  border-color: #405ff2;
  color: #fff;
  box-shadow: 0 6px 14px rgba(64, 95, 242, 0.25);
}

.page-info {
  text-align: center;
  margin-top: 8px;
  color: #666;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE UI/UX IMPROVEMENTS
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   MOBILE BOTTOM NAVIGATION BAR
   ───────────────────────────────────────────────────────── */
.mobile-bottom-nav {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
  z-index: 1040;
  align-items: stretch;
  justify-content: space-around;
  will-change: transform;
  contain: layout style paint;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 56px;
  text-decoration: none;
  /* Darkened from #888 (~3.5:1, failed WCAG AA) to meet contrast on white. */
  color: #4b5563;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  gap: 3px;
  transition: color 0.2s;
  padding: 4px 0;
  position: relative;
}

.mobile-nav-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: #405ff2;
  border-radius: 0 0 4px 4px;
  transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mobile-nav-item.active::before {
  width: 32px;
}

.mobile-nav-item.active {
  color: #405ff2;
}

.mobile-nav-item:hover {
  color: #405ff2;
  text-decoration: none;
}

.mobile-nav-icon {
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s;
}

.mobile-nav-item.active .mobile-nav-icon {
  transform: translateY(-1px);
}

.mobile-nav-label {
  font-size: 10px;
  line-height: 1;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Content wrapper: add bottom padding on mobile so content isn't hidden behind the nav */
@media (max-width: 991px) {
  .mobile-bottom-nav {
    display: flex !important;
  }

  .mobile-content-wrapper {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }

  /* Ensure body doesn't overflow horizontally on mobile */
  body {
    overflow-x: hidden;
  }

  .modern-footer {
    margin-bottom: 0;
  }

  /* Prevent content from scrolling behind bottom nav */
  main,
  .boxcar-wrapper {
    position: relative;
    z-index: 1;
  }
}

/* ─────────────────────────────────────────────────────────
   MOBILE BACK BUTTON BAR
   Shown on every inner page (mobile only), just under the
   sticky header. Hidden on desktop and on the home page.
   ───────────────────────────────────────────────────────── */
.mobile-back-bar {
  display: none; /* hidden on desktop */
}

@media (max-width: 991px) {
  .mobile-back-bar {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1019; /* just under the header (1020) */
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 6px 12px;
  }

  .mobile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #050b20;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 10px 6px 4px;
    border-radius: 8px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-back-btn:hover,
  .mobile-back-btn:active {
    color: #405ff2;
    background: rgba(64, 95, 242, 0.06);
    text-decoration: none;
  }

  .mobile-back-icon {
    font-size: 20px;
    line-height: 1;
  }

  .mobile-back-label {
    line-height: 1;
  }
}

/* ─────────────────────────────────────────────────────────
   TOUCH TARGET FIXES — minimum 44×44px on mobile
   ───────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .wiz-icon-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Fix search dropdown overflow on mobile */
  .wiz-search-dropdown {
    width: calc(100vw - 24px) !important;
    right: 0 !important;
    left: auto !important;
    max-width: 420px;
  }
}

/* On very small screens, anchor search to left edge */
@media (max-width: 480px) {
  .wiz-search-dropdown {
    right: auto !important;
    left: -50vw !important;
    width: calc(100vw - 16px) !important;
    max-width: none;
  }
}

/* ─────────────────────────────────────────────────────────
   FAB REPOSITIONING — account for bottom nav on mobile
   ───────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  /* Support FAB: move up above bottom nav, ensure proper z-index */
  .support-fab {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    z-index: 1055;
  }

  .support-fab-btn {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }

  /* AI chat FAB: move up above bottom nav */
  .ai-fab {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    z-index: 1055;
  }

  /* AI chat window: align to left, clear bottom nav */
  .ai-win {
    left: 8px;
    bottom: calc(136px + env(safe-area-inset-bottom, 0px));
    z-index: 1045;
  }

  /* Welcome toast */
  .ai-welcome {
    left: 8px;
    bottom: calc(136px + env(safe-area-inset-bottom, 0px));
    z-index: 1045;
  }
}

@media (max-width: 480px) {
  /* Full-screen chat on very small phones — but above bottom nav */
  .ai-win {
    width: calc(100vw - 16px);
    left: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 80px - env(safe-area-inset-bottom, 0px));
    max-height: none;
    border-radius: 14px;
  }
}

/* ─────────────────────────────────────────────────────────
   MOBILE FILTER BUTTON — inventory page
   ───────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .mobile-filter-btn {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 8px 24px rgba(64, 95, 242, 0.35);
    font-size: 13px;
    padding: 12px 24px;
  }

  .mobile-filter-panel {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-filter-panel .apply-mobile-btn {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* ─────────────────────────────────────────────────────────
   VEHICLE CARD GRID — 2-column for 480px–768px range
   ───────────────────────────────────────────────────────── */
@media (min-width: 480px) and (max-width: 767px) {
  .vehicle-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .featured-grid,
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  /* In 2-column, restore list mode to single column */
  .vehicle-grid.list-mode {
    grid-template-columns: 1fr;
  }
}

/* Compact card image on small phones */
@media (max-width: 400px) {
  .box-car .content-box {
    padding: 10px 12px 10px !important;
  }
  .box-car .content-box .title a,
  .vehicle-card-title a {
    font-size: 13px;
  }
}

/* Vehicle card mobile refinements */
@media (max-width: 767px) {
  .boxcar-listing-block .inner-box {
    border-radius: 16px;
  }

  .vehicle-card-slider,
  .vehicle-card-slide,
  .vehicle-card-slider .slick-track,
  .vehicle-card-slider .slick-list {
    height: auto;
  }

  .vehicle-card-content {
    padding: 14px 14px 12px;
  }

  .vehicle-card-title {
    min-height: auto;
    margin-bottom: 6px;
  }

  .vehicle-card-title a {
    font-size: 16px;
  }

  .vehicle-card-price .price-amount {
    font-size: 18px;
    letter-spacing: -0.6px;
  }

  .vehicle-card-specs {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 8px 6px;
    margin-bottom: 12px;
    justify-content: flex-start;
    direction: ltr;
  }

  .vehicle-card-specs li:not(.spec-eval) + li:not(.spec-eval)::before {
    content: none;
  }

  .vehicle-card-specs li {
    font-size: 10px;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 400;
    white-space: nowrap;
  }

  .vehicle-card-specs li:not(.spec-eval) {
    padding: 4px 8px;
    border: 1px solid #dde6ff;
    background: #f4f7ff;
    border-radius: 999px;
  }

  .vehicle-card-specs .spec-icon {
    width: 14px;
  }

  .vehicle-card-specs .spec-eval {
    width: auto;
    margin-right: 2px;
    margin-bottom: 0;
  }

  .vehicle-card-specs .badge-dots {
    gap: 4px;
    padding: 0;
  }

  .vehicle-card-specs .badge-dot {
    width: 8px;
    height: 8px;
  }

  .vehicle-card-slider .slick-arrow {
    display: none !important;
  }

  .vehicle-card-slider .slick-dots {
    bottom: 6px;
  }

  .vehicle-card-slider .slick-dots li button:before {
    font-size: 7px;
  }

  .card-img-count {
    font-size: 11px;
    padding: 4px 8px;
  }
}

@media (max-width: 480px) {
  .vehicle-card-slider,
  .vehicle-card-slide,
  .vehicle-card-slider .slick-track,
  .vehicle-card-slider .slick-list {
    height: auto;
  }

  .vehicle-card-content {
    padding: 12px 12px 10px;
  }

  .vehicle-card-footer {
    padding-top: 12px;
  }

  .vehicle-card-footer a {
    font-size: 14px;
  }
}

/* ─────────────────────────────────────────────────────────
   HERO SEARCH FORM — tablet layout (iPad, 1024px etc.)
   ───────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .boxcar-banner-section-v1 .banner-content h2 {
    font-size: 52px;
    margin-bottom: 32px;
  }

  .hero-search-form {
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px;
  }

  .hero-search-form .form-group {
    flex: 1 1 calc(50% - 12px);
    min-width: 0;
  }

  .hero-search-btn {
    width: 100%;
    justify-content: center;
    flex: 1 1 100%;
  }

  .hero-extra-filters.open {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero-tags {
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────
   HERO SEARCH FORM — stack on phones
   ───────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .hero-search-form {
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px;
  }

  .hero-search-form .form-group {
    width: 100% !important;
    min-width: 0 !important;
    flex: none;
  }

  .hero-search-btn {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    font-size: 14px;
  }

  .hero-extra-filters.open {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .hero-tags {
    gap: 6px;
    justify-content: flex-start;
  }

  .hero-tags a {
    padding: 7px 14px;
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .hero-extra-filters.open {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────
   MOBILE HEADER SIDEBAR — modern style update
   ───────────────────────────────────────────────────────── */
.responsive-sidebar {
  background: #050b20;
}

.responsive-sidebar ul {
  padding: 12px 0;
  margin: 0;
  list-style: none;
}

.responsive-sidebar ul li a,
.responsive-sidebar ul li button.no-close {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
  min-height: 52px;
  /* button reset (this toggle was an <a>; now a button for a11y) */
  width: 100%;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.responsive-sidebar ul li a i,
.responsive-sidebar ul li button.no-close i {
  width: 20px;
  text-align: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.responsive-sidebar ul li a:hover,
.responsive-sidebar ul li button.no-close:hover {
  background: rgba(255, 255, 255, 0.07);
  color: white;
}

.responsive-sidebar ul li a:hover i,
.responsive-sidebar ul li button.no-close:hover i {
  color: #405ff2;
}

.mobile-nav-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 6px 0 !important;
  height: 0 !important;
  padding: 0 !important;
}

/* Mobile Language Switcher */
.mobile-lang-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background: rgba(0, 0, 0, 0.2);
}

.mobile-lang-dropdown.show {
  max-height: 150px;
}

.mobile-lang-dropdown a {
  padding: 10px 24px 10px 48px !important;
  font-size: 14px !important;
  min-height: 44px !important;
}

.mobile-lang-dropdown a .fa-check {
  margin-left: auto;
  color: #405ff2;
}

.mobile-lang-dropdown a.active {
  color: #fff !important;
}

/* Sidebar brand strip */
.sidebar-brand {
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
}

.sidebar-brand .sidebar-logo {
  max-height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Accent sell link in sidebar.
   Lightened from #405FF2 (3.84:1 on the #050b20 sidebar — fails WCAG AA)
   to #6B86FF (~5.3:1) so the text meets the 4.5:1 contrast threshold. */
.responsive-sidebar ul li a.sidebar-sell-link {
  color: #6b86ff;
  font-weight: 700;
}

.responsive-sidebar ul li a.sidebar-sell-link i {
  color: #6b86ff;
}

/* Logout link in sidebar */
.responsive-sidebar ul li a.sidebar-logout {
  color: rgba(255, 99, 99, 0.85);
}

.responsive-sidebar ul li a.sidebar-logout i {
  color: rgba(255, 99, 99, 0.7);
}

/* ─────────────────────────────────────────────────────────
   FOOTER — mobile layout improvements
   ───────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .modern-footer {
    padding-top: 48px;
  }

  .modern-footer-top {
    padding-bottom: 36px;
  }

  .modern-footer h3,
  .modern-footer h4 {
    font-size: 15px;
    margin-bottom: 16px;
  }

  .modern-footer p {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .modern-footer ul li {
    margin-bottom: 10px;
  }

  .modern-footer ul li a {
    font-size: 14px;
  }

  .modern-footer .social-links {
    gap: 8px;
  }

  .modern-footer .social-links a {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .footer-newsletter input {
    padding: 12px 16px;
    font-size: 14px;
  }

  .footer-newsletter button {
    padding: 12px;
    font-size: 14px;
  }

  .modern-footer-bottom {
    /* Bottom: clear of the bottom nav and floating buttons (see above). */
    padding: 16px 0 calc(134px + env(safe-area-inset-bottom, 0px));
  }

  .modern-footer-bottom .bottom-links {
    gap: 16px;
    justify-content: center;
    margin-top: 8px;
  }

  .modern-footer-bottom .copyright {
    font-size: 13px;
  }
}

/* Below the desktop layout: the link lists sit two to a row (footer.html
   col-6) and the stacked sections lose their desktop-sized gaps. */
@media (max-width: 991.98px) {
  .modern-footer {
    padding-top: 32px;
  }

  .modern-footer .modern-footer-top {
    padding-bottom: 20px;
  }

  .modern-footer .modern-footer-top > .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
  }

  .modern-footer .logo {
    margin-bottom: 12px !important;
  }

  .modern-footer .logo a {
    display: inline-block;
  }

  .modern-footer p {
    line-height: 1.55;
    margin-bottom: 12px;
  }

  .modern-footer h3,
  .modern-footer h4 {
    line-height: 1.3;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .modern-footer h3::after,
  .modern-footer h4::after {
    width: 32px;
    height: 2px;
  }

  .modern-footer ul li {
    margin-bottom: 0;
  }

  /* 32px rows: still a comfortable touch target. */
  .modern-footer ul li a {
    padding: 6px 0;
    line-height: 20px;
  }

  .modern-footer-bottom {
    padding-top: 12px;
  }
}

/* ─────────────────────────────────────────────────────────
   LISTING TOOLBAR — improved mobile layout
   ───────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .listing-toolbar {
    padding: 12px 14px;
    gap: 8px;
  }

  .listing-toolbar .results-text {
    font-size: 13px;
    width: 100%;
  }

  .listing-toolbar .tools {
    width: 100%;
    justify-content: space-between;
  }

  .sort-select {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    padding: 9px 12px;
  }

  .view-btn {
    min-width: 40px;
    min-height: 40px;
  }
}

/* ─────────────────────────────────────────────────────────
   SECTION HEADINGS — fluid on very small phones
   ───────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .section-heading h2,
  h2.title {
    font-size: 22px;
  }

  .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
  }
}

/* ─────────────────────────────────────────────────────────
   AUTH PAGES — mobile padding improvements
   ───────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .auth-card {
    padding: 32px 20px;
    border-radius: 20px;
  }

  .auth-card h2 {
    font-size: 24px;
  }

  .auth-section {
    padding: 90px 0 80px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* ─────────────────────────────────────────────────────────
   DETAIL PAGE — mobile improvements
   ───────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .detail-title-row {
    flex-direction: column;
    gap: 12px;
  }

  .detail-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .detail-actions .detail-mobile-location {
    margin-bottom: 4px;
  }

  .detail-actions .share-menu {
    left: 0;
    right: auto;
  }

  .thumb-strip .thumb {
    width: 64px;
    height: 46px;
  }
}

/* END MOBILE IMPROVEMENTS */

/* ─────────────────────────────────────────────────────────
   SEARCHABLE SELECT WIDGET
   Styles for the searchable vehicle model dropdown
   ───────────────────────────────────────────────────────── */

.searchable-select-wrapper {
  position: relative;
  width: 100%;
}

.searchable-select-input {
  border: 1px solid #e6e9ef;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.searchable-select-input:focus {
  border-color: #405ff2;
  outline: none;
  box-shadow: 0 0 0 3px rgba(64, 95, 242, 0.1);
}

.searchable-select-wrapper .form-control {
  margin-top: 0;
}

/* Make select height consistent with input */
.searchable-select-wrapper select.form-control {
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ─────────────────────────────────────────────────────────
   HOME HERO — COMPACT BAND + SMALLER SEARCH PANEL
   The hero was a 100vh section with its content absolutely centred
   by a translate(-50%, -50%) hack, so the fold was entirely banner
   and the listings below it were never visible on arrival. It is now
   a normal flex band whose height comes from clamped padding, and
   the search panel inside it is narrower with tighter controls.
   ───────────────────────────────────────────────────────── */
.boxcar-banner-section-v1 {
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: clamp(64px, 11vh, 120px) 0 clamp(48px, 8vh, 88px);
}

/* Legibility over a photographic background: the image alone left the
   sub-text and the panel edge low-contrast at the top and bottom. */
.boxcar-banner-section-v1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(5, 11, 32, 0.74) 0%,
    rgba(5, 11, 32, 0.4) 42%,
    rgba(5, 11, 32, 0.78) 100%
  );
  pointer-events: none;
}

.boxcar-banner-section-v1 > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.boxcar-banner-section-v1 .banner-content {
  position: static;
  transform: none;
  -webkit-transform: none;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}

.boxcar-banner-section-v1 .hero-title {
  font-size: clamp(30px, 3.4vw, 44px);
  margin-bottom: 22px;
}

/* Live match count between the search and the shortcut tags. */
.hero-result-count {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  letter-spacing: 0.2px;
}

.hero-result-count strong {
  color: #ffffff;
  font-weight: 700;
}

.hero-search-form {
  padding: 14px;
  gap: 10px;
  border-radius: 16px;
}

.hero-search-form .form-group label {
  font-size: 10px;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.hero-search-form .form-group select,
.hero-search-form .form-group input {
  padding: 8px 10px !important;
  font-size: 13px;
  border-radius: 10px;
}

.hero-search-form .form-group select {
  padding-right: 30px !important;
  background-position: right 10px center;
}

.hero-search-btn {
  height: 38px;
  padding: 8px 22px;
  font-size: 14px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(64, 95, 242, 0.28);
}

.hero-search-btn:hover {
  box-shadow: 0 8px 22px rgba(64, 95, 242, 0.36);
}

.hero-tags {
  margin-top: 10px;
}

.hero-tags a,
.more-filters-link {
  padding: 6px 16px;
  font-size: 12px;
}

@media (max-width: 991px) {
  .boxcar-banner-section-v1 .banner-content {
    max-width: none;
  }
  /* style.css gives every `section > .container` 120px top and bottom,
     which stacked on the hero's own padding and left ~200px of empty
     banner above the title and below the tags on phones. */
  .boxcar-banner-section-v1 > .container {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Phones: fixed padding, since vh-based values grow with tall screens. */
@media (max-width: 767px) {
  .boxcar-banner-section-v1 {
    padding: 36px 0 32px;
  }
}

/* ─────────────────────────────────────────────────────────
   HOME — FEATURED ADS AS A TWO-ROW CAROUSEL
   Slick `rows: 2` wraps every slide in an extra div per row, which
   drops the flex/height rules the single-row markup relied on.
   ───────────────────────────────────────────────────────── */
.featured-carousel .slick-slide > div {
  margin-bottom: 24px;
}

.featured-carousel .slick-slide > div:last-child {
  margin-bottom: 0;
}

.featured-carousel .slick-slide .box-car {
  height: 100%;
}

/* ─────────────────────────────────────────────────────────
   NAVBAR — LAYOUT, STATES, RESPONSIVENESS
   The theme laid the header out with a floated menu pushed off the
   logo by a fixed `margin-left: 230px`, which wasted ~230px of the
   bar and forced the whole nav to disappear below 1200px. This block
   makes the bar a flex row that gives its space to the menu, and adds
   a middle tier so tablets keep a real navbar instead of only a
   hamburger.
   ───────────────────────────────────────────────────────── */

.boxcar-header {
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.boxcar-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.boxcar-header .c-box {
  gap: 12px;
}

.header-style-v1 .header-inner .c-box .logo-inner .logo {
  margin-right: 0;
}

.boxcar-header .c-box .nav-out-bar {
  margin-left: 24px;
  margin-right: auto;
  min-width: 0;
}

/* Flex row instead of floats: no clearfix quirks, and the items stay on
   one line while the bar shrinks. */
.main-menu .navigation {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  padding-left: 0;
  list-style: none;
}

.main-menu .navigation > li {
  float: none;
  margin: 0;
}

.boxcar-header .navigation > li > a {
  position: relative;
  border-radius: 8px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.boxcar-header .navigation > li > a:hover,
.boxcar-header .navigation > li > a:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* Current page: full-strength label plus an underline that lines up with
   the bottom of the header row. */
.boxcar-header .navigation > li.current > a {
  color: #ffffff;
  font-weight: 700 !important;
}

.boxcar-header .navigation > li.current > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: #6b86ff;
}

/* "New" pill on the Collaborations link — was an inline style. */
.nav-link-badged {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-badge {
  background: #405ff2;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Keyboard focus is invisible on a dark bar without this. */
.boxcar-header a:focus-visible,
.boxcar-header button:focus-visible,
.responsive-sidebar a:focus-visible,
.responsive-sidebar button:focus-visible {
  outline: 2px solid #8ea2ff;
  outline-offset: 2px;
  border-radius: 8px;
}

.wiz-sell-btn:focus-visible {
  outline-offset: 3px;
}

/* Long display names must not stretch the header or wrap it to two lines. */
.wiz-user-wrap .wiz-lang-label {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  text-align: left;
}

.wiz-lang-dropdown {
  min-width: 200px;
  width: auto;
}

.wiz-lang-arrow {
  transition: transform 0.2s ease;
}

.wiz-icon-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
}

.wiz-icon-btn[aria-expanded="true"] .wiz-lang-arrow {
  transform: rotate(180deg);
}

/* Mobile sidebar: a visible way out, not just backdrop/Escape. */
.sidebar-brand {
  justify-content: space-between;
  gap: 12px;
}

.sidebar-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.sidebar-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Tablet tier (992–1199px): the bar keeps a real menu, dropping only the
   two shortcuts that Browse already covers. */
@media (max-width: 1199px) {
  .boxcar-header .c-box .nav-out-bar {
    margin-left: 12px;
  }
  .boxcar-header .nav-out-bar {
    display: block !important;
  }
  .boxcar-header .right-box .btn {
    display: block !important;
  }
  .wiz-lang-wrap {
    display: block !important;
  }
  .nav-optional {
    display: none;
  }
  .mobile-navigation {
    display: none !important;
  }
}

/* Below 992px the theme already hides .main-menu, so this is where the
   hamburger and the slide-in sidebar take over. */
@media (max-width: 991px) {
  .boxcar-header .nav-out-bar,
  .boxcar-header .right-box .btn,
  .wiz-lang-wrap {
    display: none !important;
  }
  .wiz-user-wrap .wiz-lang-label {
    display: none !important;
  }
  .mobile-navigation {
    display: block !important;
  }
  .mobile-navigation a {
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
  }
  .header-actions {
    gap: 2px;
  }
}

/* The search panel is anchored to a button near the right edge, so on
   narrow screens pin it to the viewport instead of nudging it with
   negative offsets that can push it off-screen. */
@media (max-width: 767px) {
  .wiz-search-dropdown {
    position: fixed;
    top: 68px;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none;
  }
}

/* ─────────────────────────────────────────────────────────
   HOMEPAGE POLISH
   Section rhythm, the trust strip, equal-height cards and the
   reduced-motion behaviour the three autoplaying carousels need.
   ───────────────────────────────────────────────────────── */

/* Section headings can now carry a subtitle, so the title side is its own
   flex child and the row wraps instead of squeezing the "View all" link. */
.section-heading {
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: flex-end;
  margin-bottom: 28px;
}

.section-heading-text {
  min-width: 0;
}

.section-heading--center .section-heading-text {
  text-align: center;
}

.section-subtitle {
  margin: 6px 0 0;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.5;
  max-width: 62ch;
}

.section-heading--center .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.section-heading .view-all {
  margin-bottom: 4px;
  white-space: nowrap;
}

/* ── Trust strip ────────────────────────────────────────── */
.trust-strip {
  background: #ffffff;
  border-bottom: 1px solid rgba(5, 11, 32, 0.06);
  padding: 22px 0;
}

.trust-strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.trust-stat {
  text-align: center;
  position: relative;
}

.trust-stat + .trust-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 30px;
  width: 1px;
  background: rgba(5, 11, 32, 0.08);
}

.trust-stat-value {
  display: block;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  color: #050b20;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.trust-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6b7280;
}

@media (max-width: 575px) {
  .trust-strip-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 12px;
  }
  /* With two per row the vertical rules land in the wrong places. */
  .trust-stat + .trust-stat::before {
    display: none;
  }
}

/* ── Equal-height cards in the Bootstrap rows ───────────── */
.why-card,
.cta-card,
.lux-blog-card {
  height: 100%;
}

.lux-blog-card {
  display: flex;
  flex-direction: column;
}

.lux-blog-card .lux-blog-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Pin the "Read article" link to the bottom so cards with shorter
   excerpts still line their CTAs up across the row. */
.lux-blog-cta-wrap {
  margin-top: auto;
}

.cta-card {
  display: flex;
  flex-direction: column;
}

.cta-card .cta-link {
  margin-top: auto;
}

.cta-icon i {
  color: #ffffff;
  font-size: 36px;
}

/* ── Carousel controls ──────────────────────────────────── */
/* The arrows sat at -10px, overlapping the first and last card on narrow
   viewports where the container padding is only 16px. */
@media (max-width: 991px) {
  .featured-carousel .slick-prev,
  .featured-carousel .slick-next {
    display: none !important;
  }
}

.featured-carousel .slick-prev:focus-visible,
.featured-carousel .slick-next:focus-visible,
.brand-logo-item:focus-visible,
.view-all:focus-visible,
.lux-blog-head-link:focus-visible {
  outline: 2px solid #405ff2;
  outline-offset: 3px;
}

/* ── Reduced motion ─────────────────────────────────────── */
/* Three carousels autoplay and every block animates in on scroll. Honour
   the OS setting: keep the content, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .wow,
  .animated {
    animation: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .brand-logo-item:hover,
  .why-card:hover .icon,
  .wiz-sell-btn:hover,
  .hero-search-btn:hover,
  .hero-tags a:hover {
    transform: none !important;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────
   BROWSE PAGE — LOADING, ERROR AND CONTROL STATES
   ───────────────────────────────────────────────────────── */

/* Screen-reader-only text (no such utility existed in this codebase). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Filtering swapped the grid's contents with no feedback at all. The results
   now fade and lock while a request is in flight. */
.vehicle-grid {
  position: relative;
  transition: opacity 0.18s ease;
}

.vehicle-grid.is-loading {
  opacity: 0.45;
  pointer-events: none;
}

.vehicle-grid.is-loading::after {
  content: "";
  position: absolute;
  top: 48px;
  left: 50%;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border: 3px solid rgba(64, 95, 242, 0.2);
  border-top-color: #405ff2;
  border-radius: 50%;
  animation: vehicle-grid-spin 0.7s linear infinite;
}

@keyframes vehicle-grid-spin {
  to { transform: rotate(360deg); }
}

/* A failed fetch used to log to the console and leave stale results on
   screen; now it says so and offers a retry. */
.grid-error i {
  color: #e0a800;
}

.grid-retry-btn {
  margin-top: 14px;
  background: #405ff2;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.grid-retry-btn:hover {
  background: #2d47d1;
}

#map-container.is-loading {
  position: relative;
  background: #f1f3f9;
}

#map-container.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(64, 95, 242, 0.2);
  border-top-color: #405ff2;
  border-radius: 50%;
  animation: vehicle-grid-spin 0.7s linear infinite;
}

/* The chips are real <button>s now (they were click-only <span>s), so the
   inherited button chrome needs resetting. */
.active-filter-tag {
  font-family: inherit;
  line-height: 1.4;
}

.active-filter-tag--clear {
  background: #fdecec;
  color: #e04444;
}

.active-filter-tag--clear:hover {
  background: #fbdada;
  border-color: #e04444;
}

.active-filter-tag:focus-visible,
.view-btn:focus-visible,
.sort-select:focus-visible,
.mobile-filter-btn:focus-visible,
.panel-close:focus-visible,
.grid-retry-btn:focus-visible {
  outline: 2px solid #405ff2;
  outline-offset: 2px;
}

.view-btn[aria-pressed="true"] {
  border-color: #405ff2;
}

/* Grid / List / Map: one group, exactly one button pressed. */
.view-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Inventory "Load more": a real link to the next result page (crawlable),
   which the inventory script appends in place. */
.load-more-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 48px;
  padding: 0 28px;
  border: 2px solid #405ff2;
  border-radius: 12px;
  background: #fff;
  color: #405ff2;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.load-more-btn:hover {
  background: #eef1ff;
  color: #2f4bd9;
}

.load-more-btn:focus-visible {
  outline: 2px solid #405ff2;
  outline-offset: 3px;
}

.load-more-btn[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.7;
}

@media (max-width: 576px) {
  .load-more-btn {
    width: 100%;
    min-width: 0;
  }
}

.mobile-filter-panel:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .vehicle-grid.is-loading::after,
  #map-container.is-loading::after {
    animation-duration: 1.4s;
  }
}

/* ─────────────────────────────────────────────────────────
   BROWSE FILTERS SIDEBAR
   Section headers are real <button>s now (they were click-only
   <div>s), the sidebar follows the results on desktop, and a
   section that holds an active filter says so while collapsed.
   ───────────────────────────────────────────────────────── */

/* Follow the results instead of scrolling away on long result pages.
   The sidebar scrolls internally once it is taller than the viewport. */
@media (min-width: 992px) {
  .filter-sidebar {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(5, 11, 32, 0.18) transparent;
  }

  .filter-sidebar::-webkit-scrollbar {
    width: 8px;
  }

  .filter-sidebar::-webkit-scrollbar-thumb {
    background: rgba(5, 11, 32, 0.16);
    border-radius: 8px;
  }
}

/* Reset the native button chrome the headers inherited. */
.filter-section-header {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  gap: 8px;
  border-radius: 8px;
}

.filter-section-header:hover h6 {
  color: #405ff2;
}

.filter-section-header:focus-visible {
  outline: 2px solid #405ff2;
  outline-offset: 2px;
}

/* The flag sits between the title and the chevron and only shows when the
   section is narrowing results. */
.filter-section-flag {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #405ff2;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.filter-section.has-active-filter .filter-section-flag {
  opacity: 1;
  transform: scale(1);
}

.filter-section.has-active-filter h6 {
  color: #405ff2;
}

/* Colour swatches became buttons. */
.filter-list-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: none;
  background: none;
  border-radius: 8px;
  color: #555;
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.filter-list-btn:hover,
.filter-list-btn.active {
  background: #eef1fb;
  color: #405ff2;
  font-weight: 600;
}

.filter-list-btn:focus-visible,
.filter-checkbox:focus-within {
  outline: 2px solid #405ff2;
  outline-offset: 2px;
  border-radius: 8px;
}

.equipment-search {
  margin-bottom: 8px;
}

.filter-list--scroll {
  max-height: 200px;
}

/* "More filters" was a click-only <div>. */
.more-filters-toggle {
  width: 100%;
  font: inherit;
  cursor: pointer;
}

.more-filters-toggle:focus-visible {
  outline: 2px solid #405ff2;
  outline-offset: 2px;
}

.filter-btn:focus-visible,
.clear-btn:focus-visible,
.filter-input:focus-visible {
  outline: 2px solid #405ff2;
  outline-offset: 2px;
}

/* The colour dot needs a visible edge for pale or white paint codes. */
.color-dot {
  box-shadow: inset 0 0 0 1px rgba(5, 11, 32, 0.15);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────
   GUIDE LINKS — core/marketplace pages linking into the blog
   (partials/_guide_links.html)
   ───────────────────────────────────────────────────────── */
.guide-links {
  margin: 0 0 24px;
}

.guide-links-title {
  font-size: 16px;
  font-weight: 700;
  color: #050b20;
  margin: 0 0 12px;
}

.guide-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.guide-links-list a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #050b20;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.guide-links-list a:hover,
.guide-links-list a:focus-visible {
  border-color: #405ff2;
  color: #405ff2;
}

.guide-links-list i {
  color: #405ff2;
  margin-top: 3px;
}

/* End-of-article marketplace CTA (blog/blog-details.html) */
.article-cta {
  margin: 40px 0 8px;
  padding: 28px;
  border-radius: 16px;
  background: #f5f7ff;
  border: 1px solid #e0e6ff;
}

.article-cta-title {
  font-size: 20px;
  font-weight: 700;
  color: #050b20;
  margin: 0 0 8px;
}

.article-cta-text {
  color: #4b5563;
  margin: 0 0 18px;
}

.article-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Model result pages for the models the article names (content.article_links) */
.article-cta-models {
  margin: 0 0 18px;
}

.article-cta-models-title {
  font-size: 15px;
  font-weight: 600;
  color: #050b20;
  margin: 0 0 10px;
}

.article-cta-models .guide-links-list a {
  background: #ffffff;
}

.article-cta-models-count {
  color: #6b7280;
  font-weight: 400;
}

.article-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #405ff2;
  transition: background-color 0.2s, color 0.2s;
}

.article-cta-btn--primary {
  background: #405ff2;
  color: #ffffff;
}

.article-cta-btn--primary:hover {
  background: #2d47d1;
  color: #ffffff;
}

.article-cta-btn--secondary {
  background: #ffffff;
  color: #405ff2;
}

.article-cta-btn--secondary:hover {
  background: #eef1ff;
  color: #405ff2;
}

@media (max-width: 576px) {
  .article-cta {
    padding: 20px;
  }
  .article-cta-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}