/* ==========================================================================
   Theme: Palette A on top of Bootstrap 5.3 (mobile-first)
   Navy #101C2C | Blue #2563EB | Amber #F59E0B | Light grey #F8FAFC | White #FFFFFF
   ========================================================================== */

:root {
  --mp-navy: #101C2C;
  --mp-navy-soft: #16263B;
  --mp-blue: #2563EB;
  --mp-blue-dark: #1D4ED8;
  --mp-amber: #F59E0B;
  --mp-amber-dark: #D97706;
  --mp-grey: #F8FAFC;
  --mp-white: #FFFFFF;
  --mp-ink: #0F172A;
  --mp-muted: #64748B;
  --mp-line: #E2E8F0;
  --mp-radius: 0.875rem;
  --mp-shadow: 0 1px 2px rgba(16, 28, 44, .06), 0 4px 14px rgba(16, 28, 44, .06);
  --mp-shadow-lg: 0 12px 32px rgba(16, 28, 44, .16);

  /* Re-point Bootstrap's tokens at the palette */
  --bs-primary: #2563EB;
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: #2563EB;
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: #1D4ED8;
  --bs-link-hover-color-rgb: 29, 78, 216;
  --bs-body-bg: #F8FAFC;
  --bs-body-color: #0F172A;
  --bs-secondary-color: #64748B;
  --bs-border-color: #E2E8F0;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--mp-navy); letter-spacing: -.01em; }
a { text-underline-offset: .2em; }
:focus-visible { outline: 3px solid rgba(37, 99, 235, .55); outline-offset: 2px; }

.text-amber { color: var(--mp-amber) !important; }
.bg-navy { background: var(--mp-navy) !important; }

/* ---- Accessibility: skip link ------------------------------------------ */
.skip-link {
  position: absolute; left: -999px; top: .5rem; z-index: 3000;
  background: var(--mp-amber); color: var(--mp-navy); font-weight: 600;
  padding: .6rem 1rem; border-radius: .5rem; text-decoration: none;
}
.skip-link:focus { left: .5rem; }

/* ---- Buttons ----------------------------------------------------------- */
.btn { font-weight: 600; border-radius: .65rem; }
.btn-primary {
  --bs-btn-bg: var(--mp-blue); --bs-btn-border-color: var(--mp-blue);
  --bs-btn-hover-bg: var(--mp-blue-dark); --bs-btn-hover-border-color: var(--mp-blue-dark);
  --bs-btn-active-bg: #1E40AF; --bs-btn-active-border-color: #1E40AF;
  --bs-btn-disabled-bg: var(--mp-blue); --bs-btn-disabled-border-color: var(--mp-blue);
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
.btn-outline-primary {
  --bs-btn-color: var(--mp-blue); --bs-btn-border-color: var(--mp-blue);
  --bs-btn-hover-bg: var(--mp-blue); --bs-btn-hover-border-color: var(--mp-blue);
  --bs-btn-active-bg: var(--mp-blue-dark); --bs-btn-active-border-color: var(--mp-blue-dark);
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
.btn-accent {
  --bs-btn-color: var(--mp-navy); --bs-btn-bg: var(--mp-amber); --bs-btn-border-color: var(--mp-amber);
  --bs-btn-hover-color: var(--mp-navy); --bs-btn-hover-bg: #FBBF24; --bs-btn-hover-border-color: #FBBF24;
  --bs-btn-active-color: var(--mp-navy); --bs-btn-active-bg: var(--mp-amber-dark); --bs-btn-active-border-color: var(--mp-amber-dark);
  --bs-btn-disabled-color: var(--mp-navy); --bs-btn-disabled-bg: var(--mp-amber); --bs-btn-disabled-border-color: var(--mp-amber);
  --bs-btn-focus-shadow-rgb: 245, 158, 11;
}

/* ---- Forms: comfortable touch targets ---------------------------------- */
.form-control, .form-select { min-height: 2.9rem; border-radius: .65rem; border-color: #CBD5E1; }
textarea.form-control { min-height: 7rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--mp-blue); box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .18);
}
.form-text ul { padding-left: 1.1rem; margin: .25rem 0 0; }

/* ---- Navbar ------------------------------------------------------------ */
.mp-navbar { background: var(--mp-navy); transition: box-shadow .2s ease; padding-block: .6rem; }
.mp-navbar.is-scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }
.mp-navbar .navbar-brand, .footer-brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: #fff; font-weight: 700; letter-spacing: .01em; text-decoration: none;
}
.mp-navbar .navbar-brand { min-width: 0; margin-right: .5rem; flex-shrink: 1; overflow: hidden; }
.mp-navbar .navbar-brand img, .footer-brand img { width: 36px; height: 36px; flex: 0 0 auto; }
.brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-navbar .navbar-toggler { flex: 0 0 auto; }
.mp-navbar .nav-link { color: rgba(255, 255, 255, .82); font-weight: 500; padding-block: .65rem; }
.mp-navbar .nav-link:hover, .mp-navbar .nav-link:focus, .mp-navbar .nav-link.active { color: #fff; }
.mp-navbar .navbar-toggler { border-color: rgba(255, 255, 255, .3); }

/* Mobile: collapsed menu items need enough room to tap */
@media (max-width: 991.98px) {
  .mp-navbar .navbar-collapse { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: .5rem; padding-top: .5rem; }
  .mp-navbar .navbar-nav .nav-link { padding-block: .75rem; border-bottom: 1px solid rgba(255,255,255,.07); }
  .mp-navbar .navbar-nav .nav-item:last-child .nav-link { border-bottom: 0; }
  .mp-navbar .dropdown-menu { position: static; background: rgba(255,255,255,.07); border: 0; border-radius: .75rem; box-shadow: none; padding: .25rem 0; margin-top: .25rem; }
  .mp-navbar .dropdown-item { color: rgba(255,255,255,.82); padding-block: .65rem; min-height: 2.75rem; display: flex; align-items: center; }
  .mp-navbar .dropdown-item:hover, .mp-navbar .dropdown-item:focus { background: rgba(255,255,255,.1); color: #fff; }
  .mp-navbar .dropdown-divider { border-color: rgba(255,255,255,.12); }
  /* Log in / Sell buttons stack full width on mobile */
  .w-lg-auto { width: auto; }
}

@media (min-width: 992px) {
  .mp-navbar .nav-link.active { box-shadow: inset 0 -2px 0 var(--mp-amber); }
  .w-lg-auto { width: auto !important; }
}

/* ---- Hero --------------------------------------------------------------- */
.mp-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(5rem, 10vw, 7.5rem);
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(37, 99, 235, .55), transparent 60%),
    radial-gradient(620px 320px at -5% 110%, rgba(245, 158, 11, .16), transparent 60%),
    linear-gradient(180deg, var(--mp-navy) 0%, #14243A 100%);
}
.mp-hero h1 { color: #fff; font-weight: 800; font-size: clamp(1.9rem, 5.6vw, 3.3rem); line-height: 1.1; letter-spacing: -.025em; }
.mp-hero .lead { color: rgba(255, 255, 255, .78); font-size: clamp(1rem, 2.4vw, 1.2rem); }
.mp-hero-pill {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem;
  border-radius: 999px; font-size: .8rem; font-weight: 600; color: #FCD34D;
  background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .35);
}
.hero-art {
  position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  font-size: clamp(9rem, 20vw, 17rem); line-height: 1; color: rgba(255, 255, 255, .06);
  pointer-events: none;
}

/* Search card that overlaps the hero */
.mp-search-wrap { position: relative; z-index: 2; margin-top: -3.4rem; }
.mp-search {
  background: var(--mp-white); border-radius: 1rem; padding: 1rem;
  box-shadow: var(--mp-shadow-lg); border: 1px solid var(--mp-line);
}
@media (min-width: 768px) { .mp-search { padding: 1.25rem 1.5rem; } }

/* ---- Sections ----------------------------------------------------------- */
.mp-section { padding: clamp(2.25rem, 6vw, 4.25rem) 0; }
.mp-section-white { background: var(--mp-white); border-block: 1px solid var(--mp-line); }
.section-eyebrow { color: var(--mp-blue); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.section-title { font-weight: 800; font-size: clamp(1.4rem, 3.6vw, 2rem); margin-bottom: .35rem; }
.section-sub { color: var(--mp-muted); max-width: 40rem; }

.page-header { background: var(--mp-navy); color: #fff; padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.page-header h1 { color: #fff; font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.2rem); margin: 0; }
.page-header p { color: rgba(255, 255, 255, .72); margin: .35rem 0 0; }

/* ---- Chips -------------------------------------------------------------- */
.mp-chip-row { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mp-chip-row::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .mp-chip-row { flex-wrap: wrap; overflow: visible; } }
.mp-chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; flex: 0 0 auto;
  background: var(--mp-white); border: 1px solid var(--mp-line); border-radius: 999px;
  color: var(--mp-ink); text-decoration: none; font-weight: 500; font-size: .92rem; white-space: nowrap;
  transition: border-color .15s, color .15s, transform .15s;
}
.mp-chip:hover { border-color: var(--mp-blue); color: var(--mp-blue); transform: translateY(-1px); }
.mp-chip i { color: var(--mp-blue); }

/* ---- Vehicle card ------------------------------------------------------- */
.vehicle-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--mp-white); border: 1px solid var(--mp-line); border-radius: var(--mp-radius);
  overflow: hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.vehicle-card:hover { box-shadow: var(--mp-shadow-lg); transform: translateY(-3px); }
.vehicle-card .thumb {
  position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #E2E8F0, #F1F5F9); color: #94A3B8; font-size: 2.75rem;
}
.vehicle-card .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vehicle-card .price-tag {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 1;
  background: var(--mp-navy); color: #fff; padding: .3rem .65rem; border-radius: .5rem;
  font-weight: 700; font-size: .95rem;
}
.vehicle-card .featured-flag {
  position: absolute; left: .75rem; top: .75rem; z-index: 1;
  background: var(--mp-amber); color: var(--mp-navy); padding: .2rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
}
.vehicle-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; padding: 0; color: var(--mp-muted); font-size: .85rem; }
.vehicle-meta i { color: var(--mp-blue); margin-right: .2rem; }
.vehicle-card--skeleton { pointer-events: none; }
.vehicle-card--skeleton:hover { box-shadow: none; transform: none; }

/* ---- Feature + steps ---------------------------------------------------- */
.feature-card {
  height: 100%; background: var(--mp-white); border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius); padding: 1.35rem; box-shadow: var(--mp-shadow);
}
.feature-icon {
  width: 3rem; height: 3rem; border-radius: .9rem; display: grid; place-items: center;
  background: rgba(37, 99, 235, .1); color: var(--mp-blue); font-size: 1.4rem; margin-bottom: .9rem;
}
.step-number {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--mp-amber); color: var(--mp-navy); font-weight: 800;
}

/* ---- CTA band ----------------------------------------------------------- */
.mp-cta {
  color: #fff; border-radius: 1.25rem; padding: clamp(1.75rem, 5vw, 3rem);
  background: linear-gradient(135deg, var(--mp-blue) 0%, #1E40AF 100%);
  box-shadow: var(--mp-shadow-lg);
}
.mp-cta h2 { color: #fff; font-weight: 800; }
.mp-cta p { color: rgba(255, 255, 255, .85); }

/* ---- Auth + generic cards ----------------------------------------------- */
.auth-card {
  max-width: 540px; margin-inline: auto; background: var(--mp-white);
  border: 1px solid var(--mp-line); border-radius: 1rem; box-shadow: var(--mp-shadow);
  padding: clamp(1.25rem, 4vw, 2.25rem);
}
.surface-card {
  background: var(--mp-white); border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius); box-shadow: var(--mp-shadow);
}
.stat-card { padding: 1.1rem 1.2rem; height: 100%; }
.stat-card .stat-value { font-size: 1.9rem; font-weight: 800; color: var(--mp-navy); line-height: 1.1; }
.stat-card .stat-label { color: var(--mp-muted); font-size: .85rem; }
.stat-card .stat-icon {
  width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: grid; place-items: center;
  background: rgba(245, 158, 11, .16); color: var(--mp-amber-dark); font-size: 1.2rem;
}
.filter-panel { background: var(--mp-white); border: 1px solid var(--mp-line); border-radius: var(--mp-radius); padding: 1.1rem; }
.spec-list dt { color: var(--mp-muted); font-weight: 500; }
.spec-list dd { font-weight: 600; margin-bottom: .6rem; }
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state i { font-size: 2.5rem; color: #94A3B8; }
.notification-item.unread { border-left: 4px solid var(--mp-amber); background: #FFFBEB; }

/* ---- Footer ------------------------------------------------------------- */
.mp-footer { background: var(--mp-navy); color: rgba(255, 255, 255, .72); }
.mp-footer h6 { color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; margin-bottom: 1rem; }
.mp-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.mp-footer a:hover, .mp-footer a:focus { color: #fff; text-decoration: underline; }
.mp-footer ul { list-style: none; padding: 0; margin: 0; }
.mp-footer li { margin-bottom: .5rem; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem; }
.footer-social a {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: rgba(255, 255, 255, .08); margin-right: .4rem;
}
.footer-social a:hover { background: var(--mp-amber); color: var(--mp-navy); text-decoration: none; }

/* ---- Back to top -------------------------------------------------------- */
.back-to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1030; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: var(--mp-amber); color: var(--mp-navy); font-size: 1.1rem;
  box-shadow: var(--mp-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }

/* ---- Pagination --------------------------------------------------------- */
.pagination { --bs-pagination-active-bg: var(--mp-blue); --bs-pagination-active-border-color: var(--mp-blue); --bs-pagination-color: var(--mp-blue); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Listings (stage 3) ---- */
.vehicle-card .thumb-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; color:#94a3b8; font-size:2.5rem; }
.vehicle-card .thumb-empty small { font-size:.75rem; }
.vehicle-card .photo-count { position:absolute; right:.6rem; top:.6rem; background:rgba(16,28,44,.78); color:#fff; font-size:.75rem; padding:.15rem .5rem; border-radius:999px; }
.chip { display:inline-block; font-size:.75rem; padding:.15rem .55rem; border-radius:999px; background:#eef2f7; color:var(--mp-navy,#101C2C); border:1px solid #e2e8f0; text-decoration:none; }
.chip-accent { background:#fff7e6; border-color:#fde3a7; color:#92600a; }
.chip-filter { font-size:.85rem; padding:.3rem .8rem; }
.chip-filter.active { background:var(--mp-navy,#101C2C); color:#fff; border-color:var(--mp-navy,#101C2C); }
.status-badge { display:inline-block; font-size:.72rem; font-weight:700; padding:.15rem .6rem; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; background:#e2e8f0; color:#334155; }
.status-draft { background:#e2e8f0; color:#334155; }
.status-pending { background:#fef3c7; color:#92400e; }
.status-approved { background:#dcfce7; color:#166534; }
.status-rejected { background:#fee2e2; color:#991b1b; }
.status-suspended { background:#ffe4e6; color:#9f1239; }
.status-sold { background:#dbeafe; color:#1e40af; }
.status-expired { background:#f1f5f9; color:#64748b; }
.slot-meter { display:flex; gap:.4rem; }
.slot-meter span { width:2.5rem; height:.6rem; border-radius:999px; background:#e2e8f0; }
.slot-meter span.used { background:var(--mp-blue,#2563EB); }
.listing-row { display:flex; gap:1rem; }
.listing-thumb { flex:0 0 96px; height:72px; border-radius:.5rem; overflow:hidden; background:#eef2f7; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:1.5rem; }
.listing-thumb img { width:100%; height:100%; object-fit:cover; }
.min-w-0 { min-width:0; }
@media (max-width:575.98px){ .listing-row { flex-direction:column; } .listing-thumb { flex-basis:auto; width:100%; height:150px; } }
.commission-box { margin-top:1rem; padding:1rem; border-radius:.75rem; background:#fff7e6; border:1px solid #fde3a7; }
.commission-amount { font-size:1.5rem; font-weight:800; color:var(--mp-navy,#101C2C); }
.photo-tile { position:relative; aspect-ratio:4/3; border-radius:.5rem; overflow:hidden; background:#eef2f7; border:2px solid transparent; }
.photo-tile.is-cover { border-color:var(--mp-amber,#F59E0B); }
.photo-tile img { width:100%; height:100%; object-fit:cover; }
.cover-flag { position:absolute; left:.4rem; top:.4rem; background:var(--mp-amber,#F59E0B); color:#101C2C; font-size:.7rem; font-weight:700; padding:.1rem .45rem; border-radius:999px; }
/* Gallery */
.gallery-stage { position:relative; border-radius:.75rem; overflow:hidden; background:#0b1320; aspect-ratio:4/3; }
.gallery-main-link { display:block; height:100%; cursor:zoom-in; }
.gallery-main { width:100%; height:100%; object-fit:contain; display:block; }
.gallery-nav { position:absolute; top:50%; transform:translateY(-50%); border:0; width:2.6rem; height:2.6rem; border-radius:50%; background:rgba(255,255,255,.88); color:#101C2C; }
.gallery-prev { left:.6rem; } .gallery-next { right:.6rem; }
.gallery-counter { position:absolute; right:.6rem; bottom:.6rem; background:rgba(16,28,44,.78); color:#fff; font-size:.8rem; padding:.15rem .6rem; border-radius:999px; }
.gallery-thumbs { display:flex; gap:.5rem; margin:.6rem 0 0; padding:0 0 .25rem; overflow-x:auto; }
.gallery-thumbs a { display:block; width:96px; height:72px; border-radius:.5rem; overflow:hidden; border:2px solid transparent; opacity:.75; }
.gallery-thumbs a.active { border-color:var(--mp-blue,#2563EB); opacity:1; }
.gallery-thumbs img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-dialog { border:0; padding:0; background:transparent; max-width:96vw; max-height:96vh; }
.gallery-dialog::backdrop { background:rgba(0,0,0,.85); }
.gallery-dialog img { max-width:96vw; max-height:92vh; display:block; margin:auto; }
.gallery-close { position:absolute; right:.5rem; top:.5rem; line-height:1; }

/* ---- Search and filters (stage 4) ---- */
.results-toolbar { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.results-count { color:var(--mp-muted,#64748b); }
.results-count strong { color:var(--mp-navy,#101C2C); }
.sort-box { min-width:11rem; }
.active-filters { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.filter-chip { display:inline-flex; align-items:center; min-height:2.25rem; padding:.25rem .75rem; border-radius:999px; background:#e8f0fe; color:#1e40af; border:1px solid #c7d7fb; font-size:.875rem; text-decoration:none; }
.filter-chip:hover, .filter-chip:focus-visible { background:#dbe7fd; }
.filter-group { border:0; padding:0; margin:0 0 1.25rem; min-width:0; }
.filter-group legend { float:none; width:auto; font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--mp-muted,#64748b); margin-bottom:.6rem; padding:0; }
.filter-panel .form-control, .filter-panel .form-select { min-height:2.75rem; }
.filter-actions { display:flex; gap:.5rem; position:sticky; bottom:0; background:#fff; padding:.75rem 0; margin-top:.5rem; border-top:1px solid #e2e8f0; z-index:1; }
@media (min-width:992px) {
  .filter-panel { position:sticky; top:5rem; max-height:calc(100vh - 6rem); overflow-y:auto; }
  .filter-actions { position:static; border-top:0; }
}
@media (max-width:991.98px) {
  #filterDrawer { --bs-offcanvas-width: min(92vw, 380px); }
  .filter-panel { border:0; padding:0; }
}
@media (max-width:575.98px) { .sort-box { flex:1 1 100%; margin-left:0 !important; } }
@media (min-width:992px) { .filter-actions .btn { flex:1 1 auto; } }

/* ---- Enquiries and commission (stage 5) ---- */
.btn-whatsapp { background:#25D366; border-color:#25D366; color:#073b1d; font-weight:700; }
.btn-whatsapp:hover, .btn-whatsapp:focus-visible { background:#1fb858; border-color:#1fb858; color:#052e16; }
.status-awaiting_seller { background:#fef3c7; color:#92400e; }
.status-confirmed, .status-paid { background:#dcfce7; color:#166534; }
.status-disputed, .status-flagged { background:#fee2e2; color:#991b1b; }
.status-needs_review { background:#ffedd5; color:#9a3412; }
.status-closed, .status-waived { background:#f1f5f9; color:#475569; }
.contact-bar { position:fixed; left:0; right:0; bottom:0; z-index:1030; padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid #e2e8f0; box-shadow:0 -4px 12px rgba(16,28,44,.08); }
@media (max-width:991.98px) { body { padding-bottom:4.5rem; } }

/* Stage 6: safety notice, safety guide, reports */
.status-open, .status-reviewing { background:#fef3c7; color:#92400e; }
.status-resolved { background:#dcfce7; color:#166534; }
.status-dismissed { background:#e2e8f0; color:#334155; }
.safety-notice { background:#fffbeb; border-bottom:1px solid #fde68a; color:#78350f; }
.safety-notice .btn-link { color:#78350f; }
.safety-guide h2 { scroll-margin-top: 5rem; }
.safety-toc a { text-decoration:none; }
.safety-redflag { border-left:4px solid #dc2626; background:#fef2f2; }
.safety-check li { margin-bottom:.35rem; }
@media print { .safety-notice, .navbar, footer, .back-to-top, .contact-bar, .safety-toc { display:none !important; } }

/* ======================================================================
   Stage 9: frontend design pass
   ====================================================================== */
.text-white-75 { color: rgba(255,255,255,.78); }
.text-amber { color: var(--mp-amber); }
@media (min-width: 1700px) { .container { max-width: 1560px; } }
.btn { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
.btn-sm { min-height: 2.25rem; }
.btn-accent { background: var(--mp-amber); border-color: var(--mp-amber); color: var(--mp-navy); font-weight: 700; }
.btn-accent:hover, .btn-accent:focus-visible { background: #fbbf24; border-color: #fbbf24; color: var(--mp-navy); }
:focus-visible { outline: 3px solid var(--mp-amber); outline-offset: 2px; }
.form-control, .form-select { min-height: 2.75rem; }
.form-control:focus, .form-select:focus { border-color: var(--mp-blue); box-shadow: 0 0 0 .25rem rgba(37,99,235,.22); }
.form-check-input { width: 1.25em; height: 1.25em; }
.link-more { display: inline-flex; align-items: center; min-height: 2.75rem; }
footer a, .footer-bottom a, main p a, main li a:not(.btn):not(.mp-chip):not(.nav-link) { text-underline-offset: 2px; }
.mp-footer ul a, .footer-bottom a { display: inline-block; padding: .3rem 0; min-height: 2rem; }

/* Minimum text sizes */
.featured-flag, .status-badge, .chip, .vehicle-card .photo-count, .vehicle-card .thumb-empty small, .badge { font-size: .8rem !important; }

/* Hero slideshow */
.mp-hero-show { position: relative; color: #fff; background: var(--mp-navy); overflow: hidden; min-height: 34rem; display: flex; align-items: center; }
.mp-hero-carousel, .mp-hero-carousel .carousel-inner, .mp-hero-carousel .carousel-item { position: absolute; inset: 0; height: 100%; }
.hero-slide-img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,28,44,.92) 0%, rgba(16,28,44,.72) 45%, rgba(16,28,44,.25) 100%); }
@media (max-width: 767.98px) { .hero-shade { background: linear-gradient(180deg, rgba(16,28,44,.88), rgba(16,28,44,.78)); } .mp-hero-show { min-height: 0; } }
.hero-content { position: relative; z-index: 2; padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6rem); }
.hero-content h1 { font-weight: 800; font-size: clamp(2rem, 5.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.025em; color: #fff; }
.hero-content .lead { color: rgba(255,255,255,.85); font-size: clamp(1rem, 2.4vw, 1.25rem); max-width: 40rem; }
.hero-search { background: #fff; border-radius: 1rem; padding: .85rem; box-shadow: var(--mp-shadow-lg); }
.hero-search .form-label { color: var(--mp-navy); font-weight: 600; font-size: .875rem; margin-bottom: .25rem; }
.hero-search .btn { min-height: 3rem; }
.hero-controls { position: absolute; z-index: 3; left: 0; right: 0; bottom: .9rem; display: flex; align-items: center; justify-content: center; gap: .75rem; }
.hero-ctl { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(16,28,44,.6); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.hero-ctl:hover { background: var(--mp-blue); }
.hero-dots { position: static; margin: 0; }
.hero-dots [data-bs-target] { width: 2.75rem; height: 1.5rem; background-color: transparent; background-clip: content-box; border: 0; border-block: .6rem solid transparent; opacity: .55; padding: 0; margin: 0; }
.hero-dots [data-bs-target].active { opacity: 1; background-color: var(--mp-amber); }
@media (prefers-reduced-motion: reduce) { .carousel-fade .carousel-item { transition: none; } }

/* Trust strip */
.mp-trust { background: #fff; border-bottom: 1px solid var(--mp-line); padding: 1.1rem 0; }
.mp-trust li { display: flex; align-items: center; gap: .65rem; color: var(--mp-ink); }
.mp-trust i { font-size: 1.5rem; color: var(--mp-blue); }
.mp-trust strong { color: var(--mp-navy); }

/* Make and location tiles */
.make-tile, .loc-tile { display: flex; background: #fff; border: 1px solid var(--mp-line); border-radius: .85rem; text-decoration: none; color: var(--mp-navy); transition: transform .15s, box-shadow .15s, border-color .15s; }
.make-tile { flex-direction: column; align-items: center; text-align: center; padding: 1rem .5rem; gap: .15rem; min-height: 6.5rem; }
.make-tile i { font-size: 1.5rem; color: var(--mp-blue); }
.make-tile .name { font-weight: 700; }
.make-tile .count, .loc-tile .count { color: var(--mp-muted); font-size: .85rem; }
.loc-tile { justify-content: space-between; align-items: center; padding: .85rem 1rem; min-height: 3.25rem; font-weight: 600; }
.loc-tile i { color: var(--mp-amber-dark, #B45309); }
.loc-tile .count { background: var(--mp-grey); border-radius: 999px; padding: .1rem .55rem; }
.make-tile:hover, .loc-tile:hover, .make-tile:focus-visible, .loc-tile:focus-visible { border-color: var(--mp-blue); box-shadow: var(--mp-shadow); transform: translateY(-2px); color: var(--mp-navy); }
@media (prefers-reduced-motion: reduce) { .make-tile, .loc-tile, .vehicle-card { transition: none; transform: none !important; } }

/* Safety section */
.mp-safety { background: linear-gradient(180deg, var(--mp-navy), #14243A); color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.mp-safety .section-title { color: #fff; }
.safety-card { height: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 1rem; padding: 1.15rem; }
.safety-card i { font-size: 1.6rem; color: var(--mp-amber); }
.safety-card h3 { font-size: 1.05rem; color: #fff; margin: .5rem 0 .25rem; }
.safety-card p { margin: 0; color: rgba(255,255,255,.78); font-size: .95rem; }

/* Vehicle cards */
.vehicle-card img { width: 100%; height: 100%; object-fit: cover; }
.vehicle-card .thumb { aspect-ratio: 4 / 3; }
.vehicle-card:focus-within { outline: 3px solid var(--mp-amber); outline-offset: 2px; }
.vehicle-card--skeleton .thumb { background: linear-gradient(100deg, #e2e8f0 30%, #f1f5f9 50%, #e2e8f0 70%); background-size: 200% 100%; animation: mp-shimmer 1.4s infinite linear; }
@keyframes mp-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .vehicle-card--skeleton .thumb { animation: none; } }

/* Gallery: keep thumbs scrollable, big targets */
.gallery-thumbs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.gallery-thumbs button { flex: 0 0 5rem; min-height: 3.75rem; }

/* Validation feedback */
.invalid-feedback { font-size: .9rem; }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: #dc2626; }
.field-error-summary { border-left: 4px solid #dc2626; }

/* Confirmation dialog + loading state */
.btn.is-loading { pointer-events: none; opacity: .85; }

/* Dashboards: tables become stacked cards on phones */
@media (max-width: 575.98px) {
  .table-stack thead { display: none; }
  .table-stack tr { display: block; border: 1px solid var(--mp-line); border-radius: .75rem; margin-bottom: .75rem; padding: .5rem .75rem; background: #fff; }
  .table-stack td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3rem 0; text-align: right; }
  .table-stack td::before { content: attr(data-label); font-weight: 600; color: var(--mp-muted); text-align: left; }
}
.nav-link, .navbar .btn { min-height: 2.75rem; display: flex; align-items: center; }

/* Stage 10: footer link columns (internal links to the province and body-type pages) */
.footer-cols { columns: 2; column-gap: 1.25rem; padding-left: 0; list-style: none; }
.footer-cols li { break-inside: avoid; }