@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&family=Sora:wght@600;700;800&display=swap');

/* ═══════════════════════════════════════════════════
   AFRICARS ENTERPRISE v3 — Design System
   Palette: Cobalt Blue + Zambian Copper Orange
   Type:    Sora (headings) / Inter (body)
   ═══════════════════════════════════════════════════ */
:root {
  /* Colour tokens */
  --clr-cobalt-900: #1a3a6b;
  --clr-cobalt-800: #1d4ed8;
  --clr-cobalt-600: #2563eb;
  --clr-cobalt-400: #60a5fa;
  --clr-cobalt-100: #dbeafe;
  --clr-cobalt-50:  #eff6ff;

  --clr-copper-600: #ea6c0a;
  --clr-copper-500: #f97316;
  --clr-copper-400: #fb923c;
  --clr-copper-100: #ffedd5;
  --clr-copper-50:  #fff7ed;

  --clr-slate-900: #0f172a;
  --clr-slate-700: #334155;
  --clr-slate-500: #64748b;
  --clr-slate-300: #cbd5e1;
  --clr-slate-100: #f1f5f9;
  --clr-slate-50:  #f8fafc;
  --clr-white:     #ffffff;

  --clr-green-600: #16a34a;
  --clr-green-100: #dcfce7;
  --clr-red-600:   #dc2626;
  --clr-red-100:   #fee2e2;
  --clr-amber-600: #d97706;
  --clr-amber-100: #fef3c7;

  /* Semantic aliases */
  --background:          var(--clr-slate-50);
  --foreground:          var(--clr-slate-700);
  --card:                var(--clr-white);
  --card-foreground:     var(--clr-slate-700);
  --border:              var(--clr-slate-300);
  --primary:             var(--clr-cobalt-600);
  --primary-foreground:  var(--clr-white);
  --secondary:           var(--clr-copper-500);
  --secondary-foreground:var(--clr-white);
  --muted:               var(--clr-slate-100);
  --muted-foreground:    var(--clr-slate-500);
  --destructive:         var(--clr-red-600);
  --ring:                var(--clr-cobalt-400);

  /* Spacing & radius */
  --radius-sm:  0.5rem;
  --radius-md:  0.875rem;
  --radius-lg:  1.25rem;
  --radius-xl:  1.75rem;
  --radius-full:9999px;

  /* Elevation */
  --shadow-xs:  0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:  0 4px 12px rgba(15,23,42,.07), 0 1px 3px rgba(15,23,42,.05);
  --shadow-md:  0 8px 24px rgba(15,23,42,.09), 0 2px 6px rgba(15,23,42,.05);
  --shadow-lg:  0 20px 48px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06);
  --shadow-xl:  0 32px 64px rgba(15,23,42,.16);

  /* Gradients */
  --grad-brand:        linear-gradient(135deg, var(--clr-cobalt-600) 0%, var(--clr-cobalt-900) 100%);
  --grad-copper:       linear-gradient(135deg, var(--clr-copper-400) 0%, var(--clr-copper-600) 100%);
  --grad-hero:         linear-gradient(165deg, var(--clr-cobalt-900) 0%, #0d2352 55%, #0a1a3d 100%);
  --grad-card-surface: linear-gradient(160deg, rgba(255,255,255,1) 0%, rgba(248,250,252,.98) 100%);

  /* Transitions */
  --ease-out:  cubic-bezier(.22,.68,0,1.2);
  --ease-in:   cubic-bezier(.55,.0,1,.45);
  --ease-std:  cubic-bezier(.4,0,.2,1);
  --dur-fast:  140ms;
  --dur-base:  220ms;
  --dur-slow:  380ms;

  /* Legacy compatibility aliases (hsl-format not needed, maps to above) */
  --shadow-card:       var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --premium-shadow-sm: var(--shadow-sm);
  --premium-shadow-md: var(--shadow-md);
  --premium-shadow-lg: var(--shadow-lg);
  --premium-radius:    var(--radius-lg);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--foreground);
  background: var(--background);
  letter-spacing: -.01em;
}
h1,h2,h3,h4,h5,h6 {
  font-family: 'Sora', 'Inter', sans-serif;
  letter-spacing: -.035em;
  line-height: 1.2;
  margin: 0 0 .5em;
  color: var(--clr-slate-900);
}
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-std), opacity var(--dur-fast) var(--ease-std); }
a:hover { color: var(--clr-copper-500); }
img { display: block; max-width: 100%; }

/* ── Utility token classes (legacy compat) ── */
.bg-background     { background: var(--background); }
.bg-card           { background: var(--card); }
.bg-muted          { background: var(--muted); }
.text-foreground   { color: var(--foreground); }
.text-card-foreground  { color: var(--card-foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary      { color: var(--primary); }
.text-secondary    { color: var(--secondary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-secondary-foreground { color: var(--secondary-foreground); }
.border-border     { border-color: var(--border); }

/* ── Gradient helpers ── */
.gradient-brand      { background: var(--grad-brand); }
.gradient-brand-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Shadows ── */
.shadow-card       { box-shadow: var(--shadow-sm); }
.shadow-card-hover { box-shadow: var(--shadow-md); }

/* ── Radius ── */
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-lg  { border-radius: var(--radius-md); }
.rounded-xl  { border-radius: var(--radius-lg); }

/* ══════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════ */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }

main { min-height: calc(100vh - 280px); }

/* ══════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════ */
.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: .6rem .85rem;
  border: 1.5px solid var(--clr-slate-300);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--clr-slate-700);
  font-family: inherit;
  font-size: .95rem;
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-std),
    box-shadow var(--dur-fast) var(--ease-std),
    transform var(--dur-fast) var(--ease-std);
}
.input:hover, select:hover, textarea:hover { border-color: var(--clr-cobalt-400); }
.input:focus, select:focus, textarea:focus {
  border-color: var(--clr-cobalt-600);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
  transform: translateY(-1px);
}
textarea { min-height: 110px; resize: vertical; }
label { display: block; font-size: .88rem; font-weight: 600; color: var(--clr-slate-700); margin-bottom: .35rem; }

/* ══════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .55rem .9rem;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-std),
    background-color var(--dur-fast) var(--ease-std),
    opacity var(--dur-fast) var(--ease-std);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--grad-copper);
  color: var(--primary-foreground);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(249,115,22,.22);
}
.btn-primary:hover {
  box-shadow: 0 8px 24px rgba(249,115,22,.32);
  color: var(--primary-foreground);
}

.btn-brand {
  background: var(--grad-brand);
  color: var(--primary-foreground);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(37,99,235,.20);
}
.btn-brand:hover { box-shadow: 0 8px 24px rgba(37,99,235,.28); color: #fff; }

.btn-outline {
  background: var(--card);
  border-color: var(--clr-slate-300);
  color: var(--clr-slate-700);
}
.btn-outline:hover { border-color: var(--clr-cobalt-400); background: var(--clr-cobalt-50); color: var(--clr-cobalt-600); }

.btn-outline-secondary {
  background: transparent;
  border-color: var(--clr-copper-400);
  color: var(--clr-copper-500);
}
.btn-outline-secondary:hover { background: var(--clr-copper-500); color: #fff; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--foreground); }
.btn-ghost:hover { background: rgba(15,23,42,.06); }

.btn-sm  { min-height: 34px; padding: .35rem .65rem; font-size: .82rem; border-radius: var(--radius-sm); }
.btn-xs  { min-height: 28px; padding: .2rem .5rem; font-size: .78rem; border-radius: var(--radius-sm); }

/* ══════════════════════════════════════════════
   BADGES & PILLS
   ══════════════════════════════════════════════ */
.badge, .pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border-radius: var(--radius-sm);
  padding: .18rem .55rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.pill { border-radius: var(--radius-full); padding: .2rem .65rem; }

.badge-primary, .pill-brand { background: var(--grad-brand); color: #fff; }
.badge-muted, .pill-muted  { background: var(--muted); color: var(--foreground); }
.badge-success, .pill-success { background: var(--clr-green-100); color: var(--clr-green-600); }
.badge-warning, .pill-warning { background: var(--clr-amber-100); color: var(--clr-amber-600); }
.badge-danger               { background: var(--clr-red-100); color: var(--clr-red-600); }
.badge-condition            { color: #fff; }
.badge-new                  { background: var(--clr-cobalt-600); }
.badge-used                 { background: var(--clr-slate-500); }

/* ══════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════ */
.card, .section-card, .stat-card {
  background: var(--grad-card-surface);
  border: 1px solid rgba(203,213,225,.6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.card::before, .section-card::before, .stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-cobalt-600) 0%, var(--clr-copper-500) 100%);
  opacity: .85;
}
.section-card { padding: 1.25rem; }
.section-card h2 { margin-top: 0; }

/* ══════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════ */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th, .table td { padding: .75rem 1rem; text-align: left; }
.table thead th {
  background: rgba(37,99,235,.07);
  color: var(--clr-slate-700);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(203,213,225,.5);
}
.table tbody td { border-bottom: 1px solid rgba(203,213,225,.35); color: var(--foreground); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--dur-fast) var(--ease-std); }
.table tbody tr:hover { background: rgba(37,99,235,.04); }

/* ══════════════════════════════════════════════
   PROGRESS
   ══════════════════════════════════════════════ */
.progress { width: 100%; height: 8px; border-radius: var(--radius-full); background: var(--muted); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--grad-brand); border-radius: var(--radius-full); transition: width .5s var(--ease-std); }

/* ══════════════════════════════════════════════
   DASHBOARD KPI
   ══════════════════════════════════════════════ */
.kpi-label  { color: var(--muted-foreground); font-size: .82rem; font-weight: 600; }
.kpi-value  { font-size: 2rem; font-weight: 900; color: var(--clr-slate-900); margin-top: .15rem; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1rem; }
.metric-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.metric-tile {
  padding: 1.1rem 1.25rem;
  background: var(--grad-card-surface);
  border: 1px solid rgba(203,213,225,.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.metric-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-cobalt-600) 0%, var(--clr-copper-500) 100%);
}
.metric-tile .num { font-size: 1.55rem; font-weight: 900; color: var(--clr-slate-900); }
.metric-tile .cap { font-size: .8rem; color: var(--muted-foreground); margin-top: .2rem; }
@media (max-width: 780px) { .metric-strip { grid-template-columns: 1fr; } }

/* Risk colours */
.risk-high   { background: var(--clr-red-100); color: var(--clr-red-600); }
.risk-medium { background: var(--clr-amber-100); color: var(--clr-amber-600); }
.risk-low    { background: var(--clr-green-100); color: var(--clr-green-600); }

/* ══════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════ */
@keyframes fadeUp   { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes floaty   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes shimmer  { to { background-position: 200% center; } }

.animate-fade-in { animation: fadeUp .35s var(--ease-std) both; }
.floaty          { animation: floaty 7s ease-in-out infinite; }

.js-reveal             { opacity:0; transform:translateY(12px); }
.js-reveal.is-in       { opacity:1; transform:translateY(0); transition: opacity .5s var(--ease-std), transform .5s var(--ease-std); }

.hover-lift { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-std); }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══════════════════════════════════════════════
   SITE HEADER
   ══════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--grad-hero);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 24px rgba(13,35,82,.28);
  backdrop-filter: blur(10px);
}
.site-header .container { padding-block: .85rem; }
.site-header a,
.site-header .btn-ghost,
.site-header .btn-outline,
.site-header .site-tagline,
.site-header .site-brand  { color: rgba(255,255,255,.92); }
.site-header a:hover       { color: var(--clr-copper-400); }
.site-header .btn-outline  {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.92);
}
.site-header .btn-outline:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.site-header .btn-ghost:hover { background: rgba(255,255,255,.12); }
.site-header .input {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.site-header .input::placeholder { color: rgba(255,255,255,.55); }
.site-header .input:focus {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
  color: #fff;
}
.site-header select.input option { background: var(--clr-cobalt-900); color: #fff; }

.site-logo   { width: auto; height: 62px; max-width: min(280px,45vw); object-fit: contain; }
.site-brand  { display: flex; flex-direction: column; text-decoration: none; gap: .2rem; }
.site-tagline{ color: rgba(255,255,255,.6); font-size: .78rem; margin-top: .1rem; font-weight: 500; letter-spacing: .02em; }

/* ══════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════ */
.africar-hero {
  position: relative;
  background:
    linear-gradient(165deg, rgba(13,35,82,.88) 0%, rgba(10,26,61,.92) 60%, rgba(8,20,50,.95) 100%),
    url('./hero-bg.jpg') center/cover no-repeat;
  overflow: hidden;
}
.africar-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(to top, var(--background), transparent);
}
.africar-hero .container { position: relative; z-index: 1; }

.africar-hero h1 { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.25); font-size: clamp(2.2rem, 5vw, 4rem); }
.africar-hero-copy { color: rgba(255,255,255,.72); max-width: 720px; margin-inline: auto; font-size: clamp(1rem, 2vw, 1.2rem); }

/* Search panel */
.africar-search-panel {
  background: rgba(255,255,255,.97);
  padding: 1.25rem;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.1);
  border: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(4px);
  margin-bottom: 1.75rem;
}
.africar-search-panel .input,
.africar-search-panel select { background: var(--card); border-color: var(--clr-slate-300); color: var(--clr-slate-700); }
.africar-search-panel .btn-primary { background: var(--grad-copper); color: #fff; }

/* Condition toggles */
.africar-condition-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0 auto .85rem;
}
.africar-condition-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: .88rem;
  color: var(--clr-slate-700);
  background: var(--card);
  border: 1.5px solid var(--clr-slate-300);
  box-shadow: var(--shadow-xs);
  transition: all var(--dur-fast) var(--ease-std);
}
.africar-condition-pill.is-active {
  background: var(--clr-cobalt-50);
  color: var(--clr-cobalt-600);
  border-color: var(--clr-cobalt-400);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.africar-condition-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); color: var(--clr-cobalt-600); }

/* Action strip */
.africar-action-strip {
  display: flex;
  justify-content: center;
  gap: .85rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  margin: 1.5rem 0 0;
}
.africar-action-item {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.3rem;
  border-radius: var(--radius-full);
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  font-weight: 600;
  font-size: .9rem;
  transition: all var(--dur-base) var(--ease-std);
}
.africar-action-item svg, .africar-action-item i { color: var(--clr-copper-400); }
.africar-action-item:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.2); }

/* Hero stats */
.africar-hero-stats { position: relative; z-index: 1; color: rgba(255,255,255,.9); }
.hero-stat { min-width: 150px; padding: .5rem .75rem; }
.hero-stat span:first-child { color: #fff; font-family: 'Sora', sans-serif; }
.hero-stat span:last-child { display: block; margin-top: .15rem; color: rgba(255,255,255,.65); font-size: .82rem; }

/* Hero chips */
.hero-chip {
  display: inline-flex;
  align-items: center;
  padding: .38rem .85rem;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.2);
  font-size: .8rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* ══════════════════════════════════════════════
   CAR CARD (market-card)
   ══════════════════════════════════════════════ */
.market-card, .bg-card.rounded-lg.overflow-hidden {
  background: var(--grad-card-surface);
  border: 1px solid rgba(203,213,225,.55);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-std);
  display: flex;
  flex-direction: column;
}
.market-card:hover, .bg-card.rounded-lg.overflow-hidden:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Card image */
.market-card .cover img,
.bg-card.rounded-lg.overflow-hidden .relative img {
  transition: transform .6s var(--ease-std);
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.market-card:hover .cover img,
.bg-card.rounded-lg.overflow-hidden:hover .relative img { transform: scale(1.04); }

/* Card body */
.market-card .meta, .bg-card.rounded-lg.overflow-hidden > .p-5 {
  padding: 1.1rem 1.15rem 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.market-card .price, .bg-card.rounded-lg.overflow-hidden .text-2xl {
  font-family: 'Sora', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--clr-copper-600);
}

/* ══════════════════════════════════════════════
   GALLERY (car detail page)
   ══════════════════════════════════════════════ */
.gallery-slide          { display: none; }
.gallery-slide.is-active{ display: block; }
.gallery-thumb {
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: .65;
  transition: opacity var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.gallery-thumb.is-active { opacity: 1; box-shadow: 0 0 0 3px var(--clr-cobalt-400); }
.gallery-thumb img       { transition: transform .25s var(--ease-std); border-radius: var(--radius-sm); }
.gallery-thumb:hover img { transform: scale(1.04); opacity: 1; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; width: 44px; height: 44px; border-radius: var(--radius-full);
  background: rgba(0,0,0,.5); color: #fff; font-size: 1.5rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: background var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std);
}
.gallery-nav:hover { background: rgba(0,0,0,.7); transform: translateY(-50%) scale(1.06); }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }

/* ══════════════════════════════════════════════
   ADMIN SHELL
   ══════════════════════════════════════════════ */
.page-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-hero h1 { margin: 0; }
.page-hero p  { margin: .35rem 0 0; }

.admin-shell-nav {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
  padding: .75rem;
  background: var(--grad-card-surface);
  border: 1px solid rgba(203,213,225,.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 42px;
  padding: .65rem .95rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--clr-slate-300);
  text-decoration: none;
  color: var(--clr-slate-700);
  background: var(--card);
  font-weight: 600;
  font-size: .9rem;
  transition: all var(--dur-fast) var(--ease-std);
}
.admin-tab:hover { transform: translateY(-1px); border-color: var(--clr-cobalt-400); color: var(--clr-cobalt-600); background: var(--clr-cobalt-50); }
.admin-tab.is-active {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(37,99,235,.22);
}

.admin-grid { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 1.25rem; }
@media (max-width: 980px) { .admin-grid { grid-template-columns: 1fr; } }

.admin-sidebar-card, .admin-main-card {
  background: var(--grad-card-surface);
  border: 1px solid rgba(203,213,225,.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.admin-sidebar-card::before, .admin-main-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-cobalt-600) 0%, var(--clr-copper-500) 100%);
}
.admin-sidebar-card { padding: 1rem; }
.admin-main-card    { padding: 1.25rem; }

.admin-side-list    { display: grid; gap: .7rem; }
.admin-side-list .item {
  padding: .85rem .9rem;
  border-radius: var(--radius-md);
  background: var(--muted);
  border: 1px solid rgba(203,213,225,.4);
}
.admin-side-list .label { font-size: .78rem; color: var(--muted-foreground); margin-bottom: .25rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

.admin-hero   { border-radius: var(--radius-xl); }
.sticky-card  { position: sticky; top: 88px; }

/* Admin stats */
.admin-stat {
  background: var(--grad-card-surface);
  border: 1px solid rgba(203,213,225,.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-out);
}
.admin-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-cobalt-600) 0%, var(--clr-copper-500) 100%);
}
.admin-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ══════════════════════════════════════════════
   FLASH MESSAGES
   ══════════════════════════════════════════════ */
.flash-msg {
  padding: .75rem 1rem;
  border-radius: var(--radius-md);
  font-size: .9rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.flash-msg-info    { background: var(--clr-cobalt-50); border-color: var(--clr-cobalt-100); color: var(--clr-cobalt-600); }
.flash-msg-success { background: var(--clr-green-100); color: var(--clr-green-600); }
.flash-msg-error   { background: var(--clr-red-100); color: var(--clr-red-600); }

/* ══════════════════════════════════════════════
   SURFACE / FILTER PANELS
   ══════════════════════════════════════════════ */
.surface-panel, .filter-panel, .table-wrap {
  background: var(--grad-card-surface);
  border: 1px solid rgba(203,213,225,.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.filter-panel  { padding: 1rem 1.25rem; }
.table-wrap    { overflow: hidden; }
.table-wrap .table { margin: 0; }

.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .85rem 1.1rem;
  background: var(--grad-card-surface);
  border: 1px solid rgba(203,213,225,.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: 1rem;
}

/* Empty states */
.premium-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--muted-foreground);
  background: var(--card);
  border: 1.5px dashed var(--clr-slate-300);
  border-radius: var(--radius-lg);
}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.footer-brand {
  background: var(--grad-hero);
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 4rem;
}
.footer-logo    { width: auto; max-width: min(280px,65vw); max-height: 90px; height: auto; }
.footer-brand-row { display: flex; align-items: center; }
.footer-copy, .footer-meta { color: rgba(255,255,255,.65); }
.footer-brand h3  { color: rgba(255,255,255,.9); }
.footer-brand li, .footer-brand span, .footer-brand p, .footer-brand a { color: rgba(255,255,255,.65); }
.footer-brand a:hover { color: var(--clr-copper-400); }

/* Section decoration */
.section-divider {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--clr-cobalt-600), var(--clr-copper-500));
  margin: .65rem 0 0;
}
h2 .section-divider { margin-inline: 0; }

/* ══════════════════════════════════════════════
   NAV LINKS
   ══════════════════════════════════════════════ */
.nav-link { text-decoration: none; font-weight: 600; }

/* ══════════════════════════════════════════════
   COMPARE FEATURE
   ══════════════════════════════════════════════ */
.compare-toggle-btn.is-active {
  background: var(--clr-cobalt-50);
  border-color: var(--clr-cobalt-400);
  color: var(--clr-cobalt-600);
  font-weight: 700;
}
.compare-toggle-btn.is-active .compare-toggle-icon { color: var(--clr-cobalt-600); }

.compare-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--grad-hero);
  border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 -8px 30px rgba(13,35,82,.28);
  animation: compareBarIn .25s var(--ease-out) both;
}
@keyframes compareBarIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
.compare-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: .85rem;
}
.compare-bar-left {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  font-size: .9rem;
}
.compare-bar-left strong { font-size: 1.1rem; }
.compare-bar-right { display: flex; align-items: center; gap: .6rem; }
.compare-bar .btn-ghost { color: rgba(255,255,255,.8); }
.compare-bar .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 480px) {
  .compare-bar-inner { justify-content: center; text-align: center; }
}

/* ══════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { font-size: 14px; }
  .container { padding-inline: .85rem; }
  .site-logo  { height: 52px; max-width: 65vw; }
  .site-header-search { display: none !important; }
  .africar-condition-toggle { width: 100%; }
  .africar-condition-pill   { flex: 1 1 100%; }
  .section-card::before, .admin-main-card::before,
  .admin-sidebar-card::before, .stat-card::before,
  .admin-stat::before, .metric-tile::before { height: 2px; }
}
@media (max-width: 640px) {
  .results-toolbar { align-items: flex-start; }
  .hero-stat { flex: 1 1 calc(50% - .5rem); }
}
@media (max-width: 480px) {
  .africar-action-strip { gap: .6rem; }
  .africar-action-item  { padding: .75rem 1rem; }
}

/* ══════════════════════════════════════════════
   ENTERPRISE v3 DASHBOARD HELPERS
   ══════════════════════════════════════════════ */
.badge-condition { color: #fff; }

/* section grid */
.section-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 768px) { .section-grid { grid-template-columns: 1fr; } }

/* legacy btn size alias */
.btn-sm { padding: .4rem .7rem; font-size: .84rem; border-radius: var(--radius-sm); min-height: 34px; }