/**
 * 03Naija Auto — Enhanced UI Components
 * Premium design system: glassmorphism, micro-animations, Nigerian-green identity
 * @package naija-auto
 */

/* ================================================================
   ENHANCED DESIGN TOKENS
================================================================ */
:root {
  /* Extended palette */
  --na-green:       #00A651;
  --na-green-d:     #007A3D;
  --na-green-l:     #E6F7EE;
  --na-green-xl:    #F0FBF5;
  --na-green-glow:  rgba(0,166,81,.25);
  --na-ink:         #0D1117;
  --na-ink-2:       #1E2633;
  --na-ink-3:       #2D3748;
  --na-white:       #FFFFFF;
  --na-grey:        #5C6B7A;
  --na-grey-l:      #9BAABC;
  --na-grey-xl:     #C8D6E2;
  --na-dust:        #F4F6F9;
  --na-dust-2:      #EDF2F7;
  --na-border:      #E2E8F0;
  --na-border-d:    #CBD5E0;
  --na-amber:       #F59E0B;
  --na-amber-l:     #FEF3C7;
  --na-red:         #EF4444;
  --na-red-l:       #FEE2E2;
  --na-blue:        #2563EB;
  --na-blue-l:      #EFF6FF;
  --na-purple:      #7C3AED;
  --na-purple-l:    #F5F3FF;

  /* Radii */
  --na-r-xs:    6px;
  --na-r-sm:    8px;
  --na-r:       10px;
  --na-r-md:    14px;
  --na-r-lg:    16px;
  --na-r-xl:    20px;
  --na-r-full:  9999px;

  /* Shadows */
  --na-shadow-xs:   0 1px 3px rgba(0,0,0,.06);
  --na-shadow-sm:   0 2px 8px rgba(0,0,0,.08);
  --na-shadow:      0 4px 16px rgba(0,0,0,.10);
  --na-shadow-md:   0 8px 24px rgba(0,0,0,.12);
  --na-shadow-lg:   0 16px 48px rgba(0,0,0,.14);
  --na-shadow-xl:   0 24px 64px rgba(0,0,0,.18);
  --na-shadow-green:0 8px 32px rgba(0,166,81,.2);

  /* Typography scale */
  --na-text-xs:   11px;
  --na-text-sm:   13px;
  --na-text-base: 14px;
  --na-text-md:   16px;
  --na-text-lg:   18px;
  --na-text-xl:   22px;
  --na-text-2xl:  28px;
  --na-text-3xl:  36px;
  --na-text-4xl:  48px;

  /* Spacing */
  --na-sp-1: 4px;  --na-sp-2: 8px;  --na-sp-3: 12px; --na-sp-4: 16px;
  --na-sp-5: 20px; --na-sp-6: 24px; --na-sp-7: 28px; --na-sp-8: 32px;
  --na-sp-10:40px; --na-sp-12:48px; --na-sp-16:64px;

  /* Transitions */
  --na-ease:     cubic-bezier(.4,0,.2,1);
  --na-ease-out: cubic-bezier(0,0,.2,1);
  --na-ease-in:  cubic-bezier(.4,0,1,1);
  --na-bounce:   cubic-bezier(.34,1.56,.64,1);
  --na-t-fast:   .15s;
  --na-t-base:   .2s;
  --na-t-slow:   .35s;
}

/* ================================================================
   BASE RESET ENHANCEMENTS
================================================================ */
::selection { background: var(--na-green-l); color: var(--na-green-d); }
:focus-visible {
  outline: 2px solid var(--na-green);
  outline-offset: 3px;
  border-radius: 4px;
}
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ================================================================
   TYPOGRAPHY SYSTEM
================================================================ */
.na-display-xl { font-family: var(--na-font-d); font-size: clamp(40px,7vw,80px); font-weight: 800; line-height: 1.05; letter-spacing: -1.5px; }
.na-display-lg { font-family: var(--na-font-d); font-size: clamp(32px,5vw,56px); font-weight: 800; line-height: 1.1;  letter-spacing: -1px; }
.na-display-md { font-family: var(--na-font-d); font-size: clamp(24px,3.5vw,40px); font-weight: 800; line-height: 1.15; letter-spacing: -.5px; }
.na-heading-lg { font-family: var(--na-font-d); font-size: var(--na-text-2xl); font-weight: 800; line-height: 1.2; }
.na-heading-md { font-family: var(--na-font-d); font-size: var(--na-text-xl);  font-weight: 800; line-height: 1.3; }
.na-heading-sm { font-family: var(--na-font-d); font-size: var(--na-text-lg);  font-weight: 700; line-height: 1.4; }
.na-body-lg    { font-size: var(--na-text-md); color: var(--na-grey); line-height: 1.75; }
.na-body       { font-size: var(--na-text-base); color: var(--na-grey); line-height: 1.7; }
.na-label      { font-size: var(--na-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--na-grey); }
.na-mono       { font-family: 'Courier New', monospace; }
.na-highlight  { color: var(--na-green); }
.na-gradient-text {
  background: linear-gradient(135deg, var(--na-green) 0%, #00D68F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================================
   ENHANCED HERO
================================================================ */
.na-hero {
  background: linear-gradient(145deg, #0D1117 0%, #1a2332 40%, #0d2818 100%);
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}
.na-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(0,166,81,.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(0,214,143,.08) 0%, transparent 60%);
}
.na-hero-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: .4;
  pointer-events: none;
}
.na-hero-stat-num  { font-family: var(--na-font-d); font-size: 32px; font-weight: 800; color: var(--na-green); }
.na-hero-stat-label{ font-size: 12px; color: rgba(255,255,255,.45); margin-top: 2px; }

/* ================================================================
   GLASSMORPHISM CARD
================================================================ */
.na-glass-card {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--na-r-lg);
}
.na-glass-card-dark {
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--na-r-lg);
}

/* ================================================================
   ENHANCED SEARCH BOX
================================================================ */
.na-search-box {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px);
  border-radius: var(--na-r-xl);
  padding: 24px;
  box-shadow: var(--na-shadow-xl), 0 0 0 1px rgba(255,255,255,.5);
  max-width: 900px;
  margin: 0 auto;
}
.na-search-box-tabs {
  display: flex;
  gap: 4px;
  background: var(--na-dust);
  border-radius: var(--na-r);
  padding: 4px;
  margin-bottom: 20px;
}
.na-search-tab {
  flex: 1; padding: 8px 14px; border: none; background: transparent;
  border-radius: var(--na-r-sm); font-size: 13px; font-weight: 600;
  color: var(--na-grey); cursor: pointer; transition: all var(--na-t-base) var(--na-ease);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.na-search-tab.active {
  background: var(--na-white); color: var(--na-green);
  box-shadow: var(--na-shadow-sm);
}
.na-search-tab svg { flex-shrink: 0; }

/* ================================================================
   ENHANCED CAR CARD
================================================================ */
.na-car-card {
  background: var(--na-white);
  border: 1.5px solid var(--na-border);
  border-radius: var(--na-r-lg);
  overflow: hidden;
  transition: transform var(--na-t-base) var(--na-bounce), box-shadow var(--na-t-base) var(--na-ease), border-color var(--na-t-base);
  position: relative;
}
.na-car-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(0,166,81,.04));
  opacity: 0;
  transition: opacity var(--na-t-base);
  pointer-events: none;
  z-index: 1;
}
.na-car-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--na-shadow-md), 0 0 0 2px var(--na-green);
  border-color: var(--na-green);
}
.na-car-card:hover::before { opacity: 1; }

.na-car-img {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--na-dust) 0%, var(--na-dust-2) 100%);
  position: relative;
  overflow: hidden;
}
.na-car-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--na-t-slow) var(--na-ease);
}
.na-car-card:hover .na-car-img img { transform: scale(1.05); }

/* Sold overlay */
.na-car-card.is-sold .na-car-img::after {
  content: 'SOLD';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--na-font-d); font-size: 28px; font-weight: 800;
  color: #fff; letter-spacing: 4px;
}

/* Favourite button */
.na-car-fav {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--na-t-fast) var(--na-bounce);
  box-shadow: var(--na-shadow-sm);
}
.na-car-fav:hover { transform: scale(1.15); background: var(--na-red-l); color: var(--na-red); }
.na-car-fav.active { background: var(--na-red); color: #fff; }
.na-car-fav svg { transition: transform var(--na-t-fast) var(--na-bounce); }
.na-car-fav:hover svg { transform: scale(1.2); }

/* Image placeholder - Nigerian car silhouette */
.na-car-img-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F0F4F8 0%, #E2ECF5 100%);
  gap: 8px;
}
.na-car-img-placeholder svg { color: var(--na-grey-xl); }
.na-car-img-placeholder span { font-size: 11px; color: var(--na-grey-l); font-weight: 600; }

.na-car-body { padding: 14px 16px 16px; }
.na-car-price {
  font-family: var(--na-font-d);
  font-size: 21px;
  font-weight: 800;
  color: var(--na-green);
  margin-bottom: 4px;
  line-height: 1;
}
.na-car-name {
  font-size: 13px; font-weight: 600; color: var(--na-ink);
  margin-bottom: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.na-car-meta {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.na-car-meta-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--na-grey);
  background: var(--na-dust);
  padding: 3px 8px; border-radius: var(--na-r-full);
}
.na-car-meta-item svg { flex-shrink: 0; }
.na-car-location {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--na-grey); margin-bottom: 10px;
}
.na-car-seller {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--na-border);
}
.na-seller-av-sm {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, var(--na-green) 0%, var(--na-green-d) 100%);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.na-car-time { font-size: 11px; color: var(--na-grey-l); }

/* ================================================================
   ENHANCED BADGES
================================================================ */
.na-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; padding: 3px 9px;
  border-radius: var(--na-r-full);
  text-transform: uppercase; letter-spacing: .6px;
  line-height: 1.4;
}
.na-badge svg { flex-shrink: 0; }
.na-badge-green  { background: var(--na-green-l);  color: var(--na-green-d); }
.na-badge-amber  { background: var(--na-amber-l);  color: #92400E; }
.na-badge-blue   { background: var(--na-blue-l);   color: #1D4ED8; }
.na-badge-red    { background: var(--na-red-l);    color: #991B1B; }
.na-badge-purple { background: var(--na-purple-l); color: var(--na-purple); }
.na-badge-ink    { background: var(--na-ink);      color: #fff; }
.na-badge-outline-green { background: transparent; color: var(--na-green); border: 1.5px solid var(--na-green); }

/* Pulse badge (for "Live", "New", etc.) */
.na-badge-pulse::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
  margin-right: 4px;
  animation: naPulse 1.4s infinite;
}
@keyframes naPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.7); }
}

/* ================================================================
   ENHANCED BUTTONS
================================================================ */
.na-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 10px 22px; border-radius: var(--na-r);
  font-weight: 600; font-size: 14px; border: none; cursor: pointer;
  transition: all var(--na-t-base) var(--na-ease);
  position: relative; overflow: hidden; letter-spacing: .2px;
  text-decoration: none;
}
.na-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.12);
  opacity: 0; border-radius: inherit;
  transition: opacity var(--na-t-fast);
}
.na-btn:hover::after  { opacity: 1; }
.na-btn:active        { transform: scale(.98); }
.na-btn svg           { flex-shrink: 0; transition: transform var(--na-t-fast) var(--na-bounce); }
.na-btn:hover svg     { transform: translateX(2px); }

.na-btn-primary {
  background: linear-gradient(135deg, var(--na-green) 0%, var(--na-green-d) 100%);
  color: #fff; box-shadow: 0 4px 14px var(--na-green-glow);
}
.na-btn-primary:hover {
  background: linear-gradient(135deg, #00C060 0%, var(--na-green) 100%);
  box-shadow: 0 6px 20px var(--na-green-glow); transform: translateY(-1px);
}
.na-btn-outline {
  background: transparent; color: var(--na-green);
  border: 2px solid var(--na-green);
}
.na-btn-outline:hover { background: var(--na-green); color: #fff; }
.na-btn-ghost {
  background: var(--na-white); color: var(--na-grey);
  border: 1.5px solid var(--na-border);
  box-shadow: var(--na-shadow-xs);
}
.na-btn-ghost:hover { border-color: var(--na-green); color: var(--na-green); background: var(--na-green-xl); }
.na-btn-ink  { background: var(--na-ink); color: #fff; }
.na-btn-ink:hover { background: var(--na-ink-2); }
.na-btn-wa   { background: #25D366; color: #fff; box-shadow: 0 4px 14px rgba(37,211,102,.3); }
.na-btn-wa:hover { background: #20B958; transform: translateY(-1px); }
.na-btn-danger { background: var(--na-red); color: #fff; }
.na-btn-danger:hover { background: #DC2626; }

.na-btn-sm  { padding: 7px 15px; font-size: 12px; border-radius: var(--na-r-sm); }
.na-btn-lg  { padding: 14px 32px; font-size: 15px; border-radius: var(--na-r-md); }
.na-btn-xl  { padding: 18px 40px; font-size: 17px; border-radius: var(--na-r-md); }
.na-btn-icon {
  padding: 10px; border-radius: var(--na-r);
  background: var(--na-dust); color: var(--na-grey);
  border: 1.5px solid var(--na-border);
}
.na-btn-icon:hover { background: var(--na-green-l); color: var(--na-green); border-color: var(--na-green); }
.na-btn-icon svg { margin: 0; }

/* Loading state */
.na-btn.loading { pointer-events: none; opacity: .7; }
.na-btn.loading::before {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: naSpin .7s linear infinite;
  margin-right: 6px;
}
@keyframes naSpin { to { transform: rotate(360deg); } }

/* ================================================================
   ENHANCED FORM ELEMENTS
================================================================ */
.na-form-input {
  width: 100%; padding: 11px 14px;
  border: 2px solid var(--na-border);
  border-radius: var(--na-r);
  font-size: 14px; color: var(--na-ink);
  background: var(--na-white);
  transition: border-color var(--na-t-base), box-shadow var(--na-t-base);
  appearance: none;
}
.na-form-input:hover  { border-color: var(--na-border-d); }
.na-form-input:focus  {
  outline: none;
  border-color: var(--na-green);
  box-shadow: 0 0 0 3px var(--na-green-glow);
}
.na-form-input.error  { border-color: var(--na-red); box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.na-form-input.success{ border-color: var(--na-green); }

.na-form-input-wrap { position: relative; }
.na-form-input-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--na-grey-l); pointer-events: none;
}
.na-form-input-wrap .na-form-input { padding-left: 40px; }
.na-form-input-suffix {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--na-grey-l); pointer-events: none;
}
.na-form-input-wrap.has-suffix .na-form-input { padding-right: 48px; }

/* Custom checkbox */
.na-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; font-size: 13px;
}
.na-checkbox input[type=checkbox] { display: none; }
.na-checkbox-box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 2px solid var(--na-border);
  background: var(--na-white); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--na-t-fast);
}
.na-checkbox input:checked + .na-checkbox-box {
  background: var(--na-green); border-color: var(--na-green);
}
.na-checkbox input:checked + .na-checkbox-box svg { display: block; }
.na-checkbox-box svg { display: none; }

/* Custom radio */
.na-radio { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.na-radio input[type=radio] { display: none; }
.na-radio-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--na-border); background: var(--na-white);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: all var(--na-t-fast);
}
.na-radio input:checked + .na-radio-dot {
  border-color: var(--na-green);
}
.na-radio input:checked + .na-radio-dot::after {
  content: '';
  width: 8px; height: 8px;
  background: var(--na-green); border-radius: 50%;
}

/* Range slider */
.na-range {
  -webkit-appearance: none; width: 100%; height: 4px;
  background: var(--na-border); border-radius: 2px; outline: none;
}
.na-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px;
  background: var(--na-green); border-radius: 50%;
  cursor: pointer; box-shadow: 0 2px 8px var(--na-green-glow);
  border: 2px solid #fff; transition: transform var(--na-t-fast) var(--na-bounce);
}
.na-range::-webkit-slider-thumb:hover { transform: scale(1.15); }

/* ================================================================
   NAVIGATION ENHANCEMENTS
================================================================ */
.na-header {
  transition: box-shadow var(--na-t-base), background var(--na-t-base);
}
.na-header.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,.08);
}
.na-nav-link {
  position: relative; padding: 8px 14px;
  font-size: 14px; font-weight: 500; color: var(--na-grey);
  border-radius: var(--na-r); transition: all var(--na-t-base);
}
.na-nav-link::after {
  content: ''; position: absolute;
  bottom: 4px; left: 14px; right: 14px; height: 2px;
  background: var(--na-green); border-radius: 1px;
  transform: scaleX(0); transition: transform var(--na-t-base) var(--na-ease);
}
.na-nav-link:hover, .na-nav-link.active {
  color: var(--na-green); background: var(--na-green-xl);
}
.na-nav-link:hover::after, .na-nav-link.active::after { transform: scaleX(1); }

/* Dropdown mega menu */
.na-mega-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--na-white); border: 1.5px solid var(--na-border);
  border-radius: var(--na-r-lg); box-shadow: var(--na-shadow-xl);
  padding: 20px; min-width: 640px;
  opacity: 0; pointer-events: none; transform-origin: top center;
  transition: opacity var(--na-t-base), transform var(--na-t-base);
  transform: translateX(-50%) translateY(-8px) scale(.97);
}
.na-nav-item:hover .na-mega-menu,
.na-nav-item:focus-within .na-mega-menu {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0) scale(1);
}
.na-mega-col-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--na-grey); margin-bottom: 10px;
}
.na-mega-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--na-r-sm); color: var(--na-ink); font-size: 13px; font-weight: 500;
  transition: all var(--na-t-fast); text-decoration: none;
}
.na-mega-link:hover { background: var(--na-green-xl); color: var(--na-green); }
.na-mega-link-icon {
  width: 32px; height: 32px; background: var(--na-dust);
  border-radius: var(--na-r-sm); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all var(--na-t-fast);
}
.na-mega-link:hover .na-mega-link-icon {
  background: var(--na-green-l); color: var(--na-green);
}

/* ================================================================
   LIVE SEARCH ENHANCEMENTS
================================================================ */
.na-live-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--na-white); border: 1.5px solid var(--na-border);
  border-radius: var(--na-r-lg); box-shadow: var(--na-shadow-xl);
  z-index: 999; max-height: 420px; overflow-y: auto;
  display: none; animation: naDropIn .2s var(--na-ease-out);
}
.na-search-result-section { padding: 10px 14px 4px; }
.na-search-result-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--na-grey-l); margin-bottom: 4px;
}
.na-search-result-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  text-decoration: none; color: var(--na-ink); transition: background var(--na-t-fast);
  border-radius: var(--na-r-sm); margin: 2px 4px;
}
.na-search-result-item:hover { background: var(--na-green-xl); }
.na-search-result-item img {
  width: 52px; height: 38px; object-fit: cover;
  border-radius: var(--na-r-sm); flex-shrink: 0;
}
.na-search-result-thumb-placeholder {
  width: 52px; height: 38px; background: var(--na-dust);
  border-radius: var(--na-r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--na-grey-l);
}
.na-search-popular { padding: 12px 18px; }
.na-search-popular-label {
  font-size: 11px; font-weight: 700; color: var(--na-grey);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.na-search-popular-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.na-search-popular-tag {
  padding: 4px 12px; background: var(--na-dust); border-radius: var(--na-r-full);
  font-size: 12px; color: var(--na-grey); cursor: pointer; transition: all var(--na-t-fast);
  border: 1.5px solid var(--na-border);
}
.na-search-popular-tag:hover { background: var(--na-green-l); color: var(--na-green); border-color: var(--na-green); }
.na-search-footer {
  padding: 10px 14px; border-top: 1px solid var(--na-border);
  font-size: 12px; color: var(--na-grey); text-align: center;
}
.na-search-footer a { color: var(--na-green); font-weight: 600; }

/* ================================================================
   CATEGORY PILLS
================================================================ */
.na-categories { padding: 24px 0; border-bottom: 1px solid var(--na-border); background: var(--na-white); }
.na-cat-scroll { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.na-cat-scroll::-webkit-scrollbar { display: none; }
.na-cat-pill {
  display: flex; align-items: center; gap: 7px; padding: 8px 16px;
  background: var(--na-dust); border: 1.5px solid var(--na-border);
  border-radius: var(--na-r-full); font-size: 13px; font-weight: 600;
  color: var(--na-grey); white-space: nowrap; cursor: pointer;
  transition: all var(--na-t-base) var(--na-ease); flex-shrink: 0;
  text-decoration: none;
}
.na-cat-pill:hover {
  background: var(--na-green-l); color: var(--na-green);
  border-color: var(--na-green); transform: translateY(-2px);
}
.na-cat-pill.active {
  background: var(--na-green); color: #fff;
  border-color: var(--na-green);
  box-shadow: 0 4px 12px var(--na-green-glow);
}
.na-cat-pill svg { flex-shrink: 0; }

/* ================================================================
   FILTER SIDEBAR
================================================================ */
.na-filter-card { background: var(--na-white); border: 1.5px solid var(--na-border); border-radius: var(--na-r-lg); overflow: hidden; }
.na-filter-head {
  padding: 14px 18px; border-bottom: 1px solid var(--na-border);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--na-dust);
}
.na-filter-head h3 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.na-filter-section { padding: 14px 18px; border-bottom: 1px solid var(--na-border); }
.na-filter-section:last-of-type { border-bottom: none; }
.na-filter-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--na-grey); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.na-filter-option {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13px; padding: 6px 0; border-radius: var(--na-r-sm);
  transition: color var(--na-t-fast);
}
.na-filter-option:hover { color: var(--na-green); }
.na-filter-option input[type=checkbox],
.na-filter-option input[type=radio] { accent-color: var(--na-green); width: 15px; height: 15px; }
.na-filter-option-count { margin-left: auto; font-size: 11px; color: var(--na-grey-l); }

.na-price-slider-wrap { margin-top: 8px; }
.na-price-slider-vals { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--na-green); margin-top: 8px; }
.na-filter-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.na-filter-range input { padding: 8px 10px; border: 1.5px solid var(--na-border); border-radius: var(--na-r-sm); font-size: 12px; }
.na-filter-range input:focus { outline: none; border-color: var(--na-green); }

/* ================================================================
   SECTION TITLES
================================================================ */
.na-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.na-section-title {
  font-family: var(--na-font-d); font-size: 22px; font-weight: 800; color: var(--na-ink);
  display: flex; align-items: center; gap: 8px;
}
.na-section-title span { color: var(--na-green); }
.na-section-title svg { flex-shrink: 0; }
.na-section-more {
  font-size: 13px; font-weight: 600; color: var(--na-green);
  display: flex; align-items: center; gap: 4px; transition: gap var(--na-t-fast);
}
.na-section-more:hover { gap: 8px; text-decoration: none; }
.na-section-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--na-green); margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}

/* ================================================================
   STATS / KPI CARDS
================================================================ */
.na-kpi-card {
  background: var(--na-white); border-radius: var(--na-r-lg); padding: 20px;
  border: 1.5px solid var(--na-border);
  transition: transform var(--na-t-base), box-shadow var(--na-t-base);
  position: relative; overflow: hidden;
}
.na-kpi-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--na-green) 0%, transparent 100%);
  opacity: 0; transition: opacity var(--na-t-base);
}
.na-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--na-shadow); }
.na-kpi-card:hover::after { opacity: 1; }
.na-kpi-label  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--na-grey); margin-bottom: 8px; }
.na-kpi-val    { font-family: var(--na-font-d); font-size: 28px; font-weight: 800; color: var(--na-ink); margin-bottom: 4px; }
.na-kpi-change { font-size: 12px; color: var(--na-green); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.na-kpi-change.neg { color: var(--na-red); }
.na-kpi-icon   { float: right; width: 40px; height: 40px; border-radius: var(--na-r-sm); display: flex; align-items: center; justify-content: center; }
.na-kpi-icon-green  { background: var(--na-green-l);  color: var(--na-green); }
.na-kpi-icon-amber  { background: var(--na-amber-l);  color: var(--na-amber); }
.na-kpi-icon-blue   { background: var(--na-blue-l);   color: var(--na-blue); }
.na-kpi-icon-red    { background: var(--na-red-l);    color: var(--na-red); }
.na-kpi-icon-purple { background: var(--na-purple-l); color: var(--na-purple); }

/* ================================================================
   MAKE CARDS
================================================================ */
.na-make-card {
  border: 1.5px solid var(--na-border); border-radius: var(--na-r-lg);
  padding: 20px 16px; text-align: center; text-decoration: none;
  color: var(--na-ink); transition: all var(--na-t-base) var(--na-bounce); display: block;
  background: var(--na-white);
}
.na-make-card:hover {
  border-color: var(--na-green); background: var(--na-green-xl);
  transform: translateY(-4px); box-shadow: var(--na-shadow-green);
}
.na-make-logo {
  width: 60px; height: 60px; border-radius: 50%; background: var(--na-dust);
  margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-weight: 800; font-size: 18px; color: var(--na-green);
  transition: background var(--na-t-base);
}
.na-make-card:hover .na-make-logo { background: var(--na-green-l); }
.na-make-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.na-make-name  { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.na-make-count { font-size: 11px; color: var(--na-grey-l); }

/* ================================================================
   SINGLE LISTING ENHANCEMENTS
================================================================ */
.na-spec-item {
  background: var(--na-dust); border-radius: var(--na-r);
  padding: 14px 12px; text-align: center;
  transition: all var(--na-t-base); cursor: default;
  border: 1.5px solid transparent;
}
.na-spec-item:hover { background: var(--na-green-xl); border-color: var(--na-green-l); }
.na-spec-icon {
  width: 32px; height: 32px; background: var(--na-white);
  border-radius: var(--na-r-sm); display: flex; align-items: center;
  justify-content: center; margin: 0 auto 8px; color: var(--na-green);
  box-shadow: var(--na-shadow-xs);
}
.na-spec-val { font-size: 13px; font-weight: 700; color: var(--na-ink); }
.na-spec-key { font-size: 10px; color: var(--na-grey); margin-top: 2px; text-transform: uppercase; letter-spacing: .4px; }
.na-feature-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--na-grey); padding: 4px 0; }
.na-feature-item svg { color: var(--na-green); flex-shrink: 0; }

/* Gallery */
.na-gallery-wrap {
  border-radius: var(--na-r-lg); overflow: hidden;
  border: 1.5px solid var(--na-border);
  aspect-ratio: 16/10; cursor: zoom-in; position: relative;
}
.na-gallery-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.12));
  pointer-events: none;
}
.na-gallery-main-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--na-t-slow); }
.na-gallery-wrap:hover .na-gallery-main-img { transform: scale(1.02); }
.na-thumb {
  width: 80px; height: 54px; border-radius: var(--na-r-sm);
  border: 2px solid var(--na-border); cursor: pointer; overflow: hidden;
  transition: all var(--na-t-fast);
}
.na-thumb:hover { border-color: var(--na-green-d); transform: scale(1.04); }
.na-thumb.active { border-color: var(--na-green); box-shadow: 0 0 0 2px var(--na-green-glow); }
.na-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ================================================================
   PRICING CARD (contact sidebar)
================================================================ */
.na-price-card {
  background: var(--na-white); border: 1.5px solid var(--na-border);
  border-radius: var(--na-r-lg); padding: 22px; margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.na-price-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--na-green) 0%, #00D68F 100%);
}
.na-single-price {
  font-family: var(--na-font-d); font-size: 30px; font-weight: 800;
  color: var(--na-green); margin-bottom: 4px; line-height: 1;
}
.na-contact-btns { display: flex; flex-direction: column; gap: 10px; }

/* ================================================================
   SELLER CARD
================================================================ */
.na-seller-card {
  background: var(--na-white); border: 1.5px solid var(--na-border);
  border-radius: var(--na-r-lg); padding: 18px;
}
.na-seller-av {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--na-green) 0%, var(--na-green-d) 100%);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 20px; overflow: hidden;
  box-shadow: 0 4px 12px var(--na-green-glow);
}
.na-seller-av img { width: 100%; height: 100%; object-fit: cover; }
.na-seller-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0; }
.na-seller-stat {
  text-align: center; padding: 10px 8px; background: var(--na-dust);
  border-radius: var(--na-r-sm); transition: background var(--na-t-fast);
}
.na-seller-stat:hover { background: var(--na-green-xl); }
.na-seller-stat-num { font-weight: 800; font-size: 17px; color: var(--na-ink); }
.na-seller-stat-key { font-size: 10px; color: var(--na-grey); margin-top: 1px; }
.na-rating-stars { display: flex; gap: 2px; }

/* ================================================================
   DASHBOARD ENHANCEMENTS
================================================================ */
.na-dashboard-wrap {
  display: grid; grid-template-columns: 264px 1fr;
  min-height: calc(100vh - 62px);
}
.na-dash-sidebar {
  background: linear-gradient(170deg, var(--na-ink) 0%, #131c2b 100%);
  position: sticky; top: 62px; height: calc(100vh - 62px); overflow-y: auto;
}
.na-dash-sidebar::-webkit-scrollbar { width: 3px; }
.na-dash-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
.na-dash-user { padding: 24px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.na-dash-user-av {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--na-green) 0%, var(--na-green-d) 100%);
  border-radius: 50%; margin-bottom: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 22px;
  box-shadow: 0 0 0 3px rgba(0,166,81,.3);
}
.na-dash-user-av img { width: 100%; height: 100%; object-fit: cover; }
.na-dash-user-name  { font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 2px; }
.na-dash-user-role  { font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 8px; }
.na-dash-user-badge { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--na-green); font-weight: 600; }
.na-dash-nav        { padding: 12px 0; }
.na-dash-nav-label  { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,.2); padding: 10px 20px 6px; }
.na-dash-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 20px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.5);
  cursor: pointer; transition: all var(--na-t-fast);
  border-left: 3px solid transparent; text-decoration: none; border-radius: 0;
}
.na-dash-nav-item:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.05); }
.na-dash-nav-item.active {
  color: #fff; background: rgba(0,166,81,.15);
  border-left-color: var(--na-green);
}
.na-dash-nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.na-dash-badge {
  margin-left: auto; background: var(--na-green); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--na-r-full);
  min-width: 20px; text-align: center;
}
.na-dash-main { background: var(--na-dust); padding: 28px; overflow-y: auto; }
.na-dash-title { font-family: var(--na-font-d); font-size: 24px; font-weight: 800; color: var(--na-ink); margin-bottom: 4px; }
.na-dash-sub   { font-size: 14px; color: var(--na-grey); margin-bottom: 24px; }
.na-dash-card  {
  background: var(--na-white); border-radius: var(--na-r-lg);
  border: 1.5px solid var(--na-border); margin-bottom: 18px;
  transition: box-shadow var(--na-t-base);
}
.na-dash-card:hover { box-shadow: var(--na-shadow-sm); }
.na-dash-card-head {
  padding: 16px 18px; border-bottom: 1px solid var(--na-border);
  display: flex; justify-content: space-between; align-items: center;
}
.na-dash-card-head h3 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.na-dash-card-body { padding: 18px; }

/* ================================================================
   AUTH PAGE
================================================================ */
.na-auth-wrap { min-height: 100vh; display: flex; align-items: stretch; }
.na-auth-visual {
  flex: 1; position: relative;
  background: linear-gradient(160deg, #0D1117 0%, #0d2818 50%, #1a3a20 100%);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 60px; overflow: hidden;
}
.na-auth-visual::before {
  content: ''; position: absolute; top: -20%; right: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,166,81,.15) 0%, transparent 70%);
}
.na-auth-visual::after {
  content: ''; position: absolute; bottom: -10%; left: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,166,81,.08) 0%, transparent 70%);
}
.na-auth-panel {
  width: 480px; background: var(--na-white);
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 48px; overflow-y: auto;
}
.na-auth-tabs {
  display: flex; background: var(--na-dust);
  border-radius: var(--na-r); padding: 4px; margin-bottom: 24px;
}
.na-auth-tab {
  flex: 1; padding: 9px; text-align: center; font-size: 13px; font-weight: 600;
  border-radius: var(--na-r-sm); cursor: pointer; transition: all var(--na-t-base);
  color: var(--na-grey); border: none; background: none;
}
.na-auth-tab.active {
  background: var(--na-white); color: var(--na-green);
  box-shadow: var(--na-shadow-sm);
}

/* ================================================================
   VALUATION WIDGET
================================================================ */
.na-valuation-widget {
  background: linear-gradient(135deg, var(--na-green) 0%, var(--na-green-d) 100%);
  border-radius: var(--na-r-xl); padding: 28px; color: #fff;
  position: relative; overflow: hidden;
}
.na-valuation-widget::before {
  content: ''; position: absolute; top: -60%; right: -20%;
  width: 300px; height: 300px;
  background: rgba(255,255,255,.08); border-radius: 50%;
}
.na-val-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  position: relative; z-index: 1;
}
.na-val-icon {
  width: 52px; height: 52px; background: rgba(255,255,255,.15);
  border-radius: var(--na-r-md); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; backdrop-filter: blur(8px);
}
.na-val-header h3 { font-family: var(--na-font-d); font-size: 20px; font-weight: 800; margin-bottom: 2px; }
.na-val-header p  { font-size: 13px; color: rgba(255,255,255,.7); }
.na-val-form { position: relative; z-index: 1; }
.na-val-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.na-val-form .na-form-input {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2);
  color: #fff; backdrop-filter: blur(8px);
}
.na-val-form .na-form-input::placeholder { color: rgba(255,255,255,.5); }
.na-val-form .na-form-input:focus { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.18); box-shadow: none; }
.na-val-form .na-form-label { color: rgba(255,255,255,.8); }
.na-val-result {
  margin-top: 20px; background: rgba(255,255,255,.12);
  border-radius: var(--na-r-lg); padding: 20px;
  backdrop-filter: blur(8px); position: relative; z-index: 1;
}
.na-val-range {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 12px 0;
}
.na-val-price {
  font-family: var(--na-font-d); font-weight: 800;
  color: rgba(255,255,255,.9); text-align: center;
}
.na-val-price-main { font-size: 32px; }
.na-val-price-sub  { font-size: 16px; }
.na-val-bar {
  flex: 1; height: 6px; background: rgba(255,255,255,.2); border-radius: 3px; overflow: hidden;
}
.na-val-bar-fill { height: 100%; background: rgba(255,255,255,.7); width: 60%; border-radius: 3px; }

/* ================================================================
   INSPECTION BOOKING
================================================================ */
.na-inspect-wrap { margin-top: 12px; }
.na-inspect-card {
  background: var(--na-green-xl); border: 1.5px solid var(--na-green-l);
  border-radius: var(--na-r-lg); padding: 20px;
}
.na-inspect-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.na-inspect-header h3 { font-size: 15px; font-weight: 700; color: var(--na-green-d); }

/* ================================================================
   VIN CARD
================================================================ */
.na-vin-card {
  background: var(--na-dust); border: 1.5px solid var(--na-border);
  border-radius: var(--na-r-lg); padding: 18px; margin: 16px 0;
}
.na-vin-number {
  font-family: 'Courier New', monospace; font-size: 18px; font-weight: 700;
  color: var(--na-ink); background: var(--na-white);
  border: 1.5px solid var(--na-border); border-radius: var(--na-r-sm);
  padding: 12px 16px; letter-spacing: 3px; text-align: center;
}

/* ================================================================
   REVIEWS
================================================================ */
.na-review-form { background: var(--na-dust); border-radius: var(--na-r-lg); padding: 18px; }
.na-star-picker { display: flex; gap: 4px; }
.na-star-btn { transition: transform var(--na-t-fast) var(--na-bounce); }
.na-star-btn:hover { transform: scale(1.2); }

/* ================================================================
   COMPARE WIDGET / BAR
================================================================ */
.na-compare-bar {
  position: fixed; bottom: 64px; left: 0; right: 0;
  background: var(--na-ink);
  border-top: 2px solid var(--na-green);
  padding: 12px 20px; display: flex;
  align-items: center; justify-content: space-between;
  z-index: 800; box-shadow: 0 -4px 20px rgba(0,0,0,.2);
  animation: naSlideUp .3s var(--na-ease-out);
}
@keyframes naSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.na-compare-bar-cars { display: flex; gap: 10px; align-items: center; }
.na-compare-bar-slot {
  width: 52px; height: 38px; border-radius: var(--na-r-sm);
  border: 2px dashed rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.na-compare-bar-slot img { width: 100%; height: 100%; object-fit: cover; }
.na-compare-bar-slot.empty { color: rgba(255,255,255,.2); }
.na-compare-bar-remove {
  position: absolute; top: 1px; right: 1px;
  width: 14px; height: 14px; background: var(--na-red);
  border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px;
}

/* ================================================================
   NEARBY MAP PLACEHOLDER
================================================================ */
.na-map-placeholder {
  background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%);
  border-radius: var(--na-r-lg); height: 240px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px; color: var(--na-blue);
  border: 1.5px solid #c6d5f5;
}
.na-map-placeholder svg { opacity: .5; }

/* ================================================================
   PRICE ALERTS
================================================================ */
.na-price-alert-btn.active {
  border-color: var(--na-amber) !important;
  color: var(--na-amber) !important;
  background: var(--na-amber-l) !important;
}

/* ================================================================
   RECENTLY VIEWED
================================================================ */
.na-recently-viewed { padding: 32px 0; border-top: 1px solid var(--na-border); }

/* ================================================================
   FLOATING ACTION BUTTON (WhatsApp)
================================================================ */
.na-wa-fab {
  position: fixed; bottom: 84px; right: 20px; width: 54px; height: 54px;
  background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 900; text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.15);
  transition: all var(--na-t-base) var(--na-bounce);
}
.na-wa-fab:hover { transform: scale(1.1) rotate(-5deg); box-shadow: 0 8px 32px rgba(37,211,102,.5); }
.na-wa-fab::before {
  content: ''; position: absolute;
  inset: -4px; border-radius: 50%;
  border: 2px solid rgba(37,211,102,.3);
  animation: naRipple 2s infinite;
}
@keyframes naRipple {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Back-to-top */
#na-back-to-top {
  position: fixed; bottom: 148px; right: 20px; width: 40px; height: 40px;
  background: var(--na-ink-2); color: #fff; border: none; border-radius: 50%;
  cursor: pointer; font-size: 18px; z-index: 800; opacity: 0;
  transition: opacity var(--na-t-base), transform var(--na-t-base) var(--na-bounce);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--na-shadow);
}
#na-back-to-top:hover { transform: scale(1.1) translateY(-2px); background: var(--na-green); }

/* ================================================================
   TOAST
================================================================ */
.na-toast-container { position: fixed; top: 80px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.na-toast {
  background: var(--na-white); border: 1.5px solid var(--na-border);
  border-radius: var(--na-r); padding: 12px 16px;
  box-shadow: var(--na-shadow-md); display: flex; align-items: center;
  gap: 10px; font-size: 14px; min-width: 260px;
  pointer-events: auto; animation: naSlideIn .3s var(--na-ease-out);
}
.na-toast-success { border-left: 4px solid var(--na-green); }
.na-toast-error   { border-left: 4px solid var(--na-red); }
.na-toast-info    { border-left: 4px solid var(--na-blue); }
.na-toast-warning { border-left: 4px solid var(--na-amber); }
@keyframes naSlideIn  { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes naFadeOut  { to { opacity: 0; transform: translateX(110%); } }
@keyframes naDropIn   { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ================================================================
   MODAL
================================================================ */
.na-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none; transition: opacity var(--na-t-base);
}
.na-modal-overlay.open { opacity: 1; pointer-events: all; }
.na-modal {
  background: var(--na-white); border-radius: var(--na-r-xl);
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  transform: scale(.94) translateY(8px);
  transition: transform var(--na-t-base) var(--na-ease-out), opacity var(--na-t-base);
  box-shadow: var(--na-shadow-xl);
}
.na-modal-overlay.open .na-modal { transform: scale(1) translateY(0); }
.na-modal-head {
  padding: 20px 22px; border-bottom: 1px solid var(--na-border);
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; background: var(--na-white); z-index: 1;
  border-radius: var(--na-r-xl) var(--na-r-xl) 0 0;
}
.na-modal-head h3 { font-weight: 700; font-size: 16px; }
.na-modal-close {
  background: var(--na-dust); border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: var(--na-grey);
  transition: all var(--na-t-fast);
}
.na-modal-close:hover { background: var(--na-red-l); color: var(--na-red); }
.na-modal-body { padding: 22px; }
.na-modal-foot { padding: 16px 22px; border-top: 1px solid var(--na-border); display: flex; gap: 10px; justify-content: flex-end; }

/* ================================================================
   ENHANCED MOBILE STYLES
================================================================ */
.na-mobile-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
  border-top: 1px solid var(--na-border); z-index: 1000; padding: 8px 4px 10px;
  display: none; box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
.na-mobile-nav-inner { display: flex; justify-content: space-around; }
.na-mobile-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: var(--na-grey-l);
  cursor: pointer; padding: 6px 10px; border-radius: var(--na-r);
  transition: all var(--na-t-base); text-decoration: none; min-width: 56px;
}
.na-mobile-nav-item.active, .na-mobile-nav-item:hover { color: var(--na-green); }
.na-mobile-nav-item.active svg { filter: drop-shadow(0 2px 6px rgba(0,166,81,.3)); }
.na-mobile-nav-item svg { width: 22px; height: 22px; }
.na-mobile-nav-post { background: var(--na-green); color: #fff !important; border-radius: var(--na-r-full); padding: 8px 14px !important; box-shadow: var(--na-shadow-green); }

/* ================================================================
   ANIMATIONS
================================================================ */
@keyframes naFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes naFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes naScale  { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.na-anim-up { animation: naFadeUp .5s var(--na-ease-out) both; }
.na-anim-in { animation: naFadeIn .4s var(--na-ease-out) both; }
.na-delay-1 { animation-delay: .1s; }
.na-delay-2 { animation-delay: .2s; }
.na-delay-3 { animation-delay: .3s; }

/* ================================================================
   PRINT STYLES
================================================================ */
@media print {
  .na-header, .na-mobile-nav, .na-wa-fab, #na-back-to-top,
  .na-contact-btns, .na-dash-sidebar, .na-compare-bar { display: none !important; }
  .na-single-layout { grid-template-columns: 1fr; }
  .na-price-card, .na-seller-card { box-shadow: none; }
}

/* ================================================================
   ACCESSIBILITY
================================================================ */
.na-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
@media (prefers-color-scheme: dark) {
  /* future dark mode hook */
}

/* ================================================================
   RESPONSIVE ADDITIONS
================================================================ */
@media (max-width: 1024px) {
  .na-val-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .na-mobile-nav { display: block; }
  body { padding-bottom: 60px; }
  .na-wa-fab { bottom: 134px; }
  #na-back-to-top { bottom: 180px; }
  .na-compare-bar { bottom: 60px; }
  .na-auth-visual { display: none; }
  .na-auth-panel { width: 100%; padding: 36px 20px; }
  .na-dashboard-wrap { grid-template-columns: 1fr; }
  .na-dash-sidebar { display: none; }
  .na-kpi-row { grid-template-columns: 1fr 1fr; }
  .na-cars-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .na-specs-grid { grid-template-columns: repeat(2,1fr); }
  .na-single-layout { grid-template-columns: 1fr; }
  .na-listing-layout { grid-template-columns: 1fr; }
  .na-filter-panel { display: none; }
  .na-features-list { grid-template-columns: 1fr; }
  .na-val-grid { grid-template-columns: 1fr; }
  .na-mega-menu { min-width: auto; width: 95vw; }
}
@media (max-width: 480px) {
  .na-cars-grid { grid-template-columns: 1fr; }
  .na-kpi-row   { grid-template-columns: 1fr 1fr; }
  .na-pricing-grid { grid-template-columns: 1fr; }
}