/*
 * VehicleCharger.co.in — Design System CSS
 * File: assets/css/design-system.css
 *
 * Design Principles:
 * - Premium, high-trust, conversion-first
 * - Electric/green brand identity
 * - Clean whitespace, clear hierarchy
 * - Bootstrap 5 compatible (extends, not overrides)
 */

/* ─── Custom Properties (Design Tokens) ───────────────────────────────────── */
:root {
  /* Brand Colors */
  --vc-primary:       #1a56db;   /* Electric Blue */
  --vc-primary-dark:  #1344bb;
  --vc-primary-light: #eff6ff;
  --vc-accent:        #f59e0b;   /* Amber — CTAs, highlights */
  --vc-accent-dark:   #d97706;
  --vc-success:       #059669;
  --vc-danger:        #dc2626;
  --vc-warning:       #f59e0b;

  /* Neutrals */
  --vc-dark:          #0f172a;
  --vc-text:          #1e293b;
  --vc-text-muted:    #64748b;
  --vc-border:        #e2e8f0;
  --vc-bg-soft:       #f8fafc;
  --vc-bg-alt:        #f1f5f9;
  --vc-white:         #ffffff;

  /* Typography */
  --font-primary:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:     'Poppins', var(--font-primary);

  /* Spacing */
  --section-py:       80px;
  --section-py-sm:    48px;

  /* Shadows */
  --shadow-xs:        0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-sm:        0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --shadow-md:        0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:        0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-card:      0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
  --shadow-hover:     0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);

  /* Border Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(.4,0,.2,1);
  --transition-normal: 250ms cubic-bezier(.4,0,.2,1);
  --transition-slow:   350ms cubic-bezier(.4,0,.2,1);
}

/* ─── Base Typography ──────────────────────────────────────────────────────── */
body {
  font-family: var(--font-primary);
  color: var(--vc-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  color: var(--vc-dark);
}
.x-small { font-size: 0.75rem !important; }

/* ─── Announcement Bar ────────────────────────────────────────────────────── */
.vc-announcement-bar {
  background: var(--vc-dark);
  color: #e2e8f0;
  font-size: 0.8125rem;
  padding: 8px 0;
  transition: all var(--transition-fast);
}
.announcement-text strong { color: #ffffff; }
.announcement-link {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.8125rem;
  transition: color var(--transition-fast);
}
.announcement-link:hover { color: #ffffff; }

/* ─── Navbar ──────────────────────────────────────────────────────────────── */
.vc-navbar {
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow var(--transition-normal), background var(--transition-normal);
}
.vc-navbar.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.navbar-brand img { transition: transform var(--transition-fast); }
.navbar-brand:hover img { transform: scale(1.02); }

/* Search Form */
.vc-search-form {
  position: relative;
  width: clamp(300px, 40%, 560px);
}
.vc-search-cat {
  border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important;
  border-right: none;
  font-size: 0.875rem;
  max-width: 130px;
  background: var(--vc-bg-soft);
  color: var(--vc-text);
}
.vc-search-input {
  border-left: none;
  font-size: 0.875rem;
  padding-left: 12px;
}
.vc-search-btn {
  background: var(--vc-primary);
  color: #fff;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important;
  padding: 0 18px;
}
.vc-search-btn:hover { background: var(--vc-primary-dark); color: #fff; }

/* Mega Menu */
.vc-megamenu {
  min-width: 720px;
  padding: 20px;
  display: none;
  grid-template-columns: 1fr 1fr 1fr 180px;
  gap: 0;
  border: none;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
}
.vc-megamenu.show {
  display: grid !important;
}
.megamenu-col { padding: 0 16px; }
.megamenu-col + .megamenu-col { border-left: 1px solid var(--vc-border); }
.megamenu-heading { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--vc-text-muted); margin-bottom: 10px; padding-left: 12px; }
.megamenu-col .dropdown-item { border-radius: var(--radius-sm); font-size: 0.875rem; padding: 7px 12px; }
.megamenu-featured { padding-left: 16px; }
.megamenu-promo { background: var(--vc-primary-light); border-radius: var(--radius-md); padding: 16px; }
.promo-badge { display: inline-block; background: var(--vc-primary); color: #fff; font-size: 0.6875rem; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; font-weight: 600; }

/* User button */
.vc-user-btn { font-size: 0.875rem; }

/* Mobile menu */
.vc-mobile-menu { max-width: 320px; }

/* ─── Hero Section ────────────────────────────────────────────────────────── */
.vc-hero {
  position: relative;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 40%, #1a56db 100%);
  padding: 80px 0 100px;
  overflow: hidden;
}
.vc-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(26,86,219,.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(245,158,11,.15) 0%, transparent 40%);
}
.vc-hero-particles {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 40px 40px;
}
.hero-badge {
  display: inline-flex; align-items: center;
  background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.4);
  color: #fbbf24;
  font-size: 0.8125rem; font-weight: 600;
  padding: 6px 14px; border-radius: var(--radius-pill);
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 16px;
}
.hero-highlight {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-subline {
  color: #cbd5e1;
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 520px;
}
.hero-trust-row {
  display: flex; flex-wrap: wrap; gap: 16px;
}
.hero-trust-item {
  display: flex; align-items: center; gap: 6px;
  color: #94a3b8;
  font-size: 0.875rem;
}

/* Hero Search Card */
.hero-search-card {
  background: rgba(255,255,255,.98);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  box-shadow: 0 24px 48px rgba(0,0,0,.3);
  position: relative;
  z-index: 2;
}
.hero-search-title { font-size: 1.0625rem; color: var(--vc-dark); font-weight: 700; }

/* ─── Stats Bar ───────────────────────────────────────────────────────────── */
.vc-stats-bar {
  background: var(--vc-dark);
  padding: 32px 0;
}
.stats-item { padding: 0 24px; border-right: 1px solid rgba(255,255,255,.1); }
.stats-item:last-child { border-right: none; }
.stats-number {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}
.stats-label { color: #94a3b8; font-size: 0.875rem; margin-top: 4px; }

/* ─── Section Shared ──────────────────────────────────────────────────────── */
.vc-section { padding: var(--section-py) 0; }
.vc-section-alt { background: var(--vc-bg-soft); }
.section-eyebrow {
  display: inline-block;
  font-size: 0.8125rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--vc-primary);
  margin-bottom: 8px;
}
.section-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  margin-bottom: 12px;
}
.section-sub {
  color: var(--vc-text-muted);
  font-size: 1.0625rem;
  max-width: 560px;
  margin: 0 auto;
}

/* ─── Vehicle Type Cards ──────────────────────────────────────────────────── */
.vc-vehicle-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  background: var(--vc-white);
  border: 2px solid var(--vc-border);
  border-radius: var(--radius-lg);
  padding: 24px 12px;
  text-decoration: none;
  transition: all var(--transition-normal);
  text-align: center;
}
.vc-vehicle-card:hover {
  border-color: var(--vc-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  color: var(--vc-primary);
}
.vehicle-card-icon {
  width: 52px; height: 52px;
  background: var(--vc-primary-light);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  color: var(--vc-primary);
  transition: background var(--transition-normal);
}
.vc-vehicle-card:hover .vehicle-card-icon { background: var(--vc-primary); color: #fff; }
.vehicle-card-name { font-size: 0.875rem; font-weight: 600; color: var(--vc-text); }

/* ─── Charger Type Cards ──────────────────────────────────────────────────── */
.vc-type-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  border-radius: var(--radius-lg);
  padding: 24px 12px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
  text-align: center;
}
.vc-type-card--blue   { background: #eff6ff; color: #1d4ed8; }
.vc-type-card--green  { background: #f0fdf4; color: #15803d; }
.vc-type-card--purple { background: #faf5ff; color: #7c3aed; }
.vc-type-card--orange { background: #fff7ed; color: #c2410c; }
.vc-type-card--red    { background: #fef2f2; color: #dc2626; }
.vc-type-card--teal   { background: #f0fdfa; color: #0f766e; }
.vc-type-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.type-card-icon { font-size: 1.875rem; }
.type-card-name { font-size: 0.875rem; font-weight: 700; }
.type-card-arrow { font-size: 0.75rem; opacity: 0.6; }

/* ─── Product Card ────────────────────────────────────────────────────────── */
.vc-product-card {
  background: var(--vc-white);
  border: 1px solid var(--vc-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: all var(--transition-normal);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.vc-product-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: rgba(26,86,219,.2);
  transform: translateY(-3px);
}
.product-badge {
  position: absolute; top: 12px; left: 12px;
  font-size: 0.6875rem; font-weight: 700; padding: 3px 8px;
  border-radius: 4px; z-index: 2;
}
.product-badge--featured { background: #1a56db; color: #fff; }
.product-badge--new      { background: #059669; color: #fff; }
.product-badge--discount { background: #dc2626; color: #fff; top: auto; bottom: 12px; left: 12px; }
.product-image-wrap { aspect-ratio: 1; overflow: hidden; background: var(--vc-bg-soft); }
.product-image { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform var(--transition-slow); }
.vc-product-card:hover .product-image { transform: scale(1.05); }
.product-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.product-brand { font-size: 0.75rem; color: var(--vc-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.product-title { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; margin-bottom: 8px; flex: 1; }
.product-title a { color: var(--vc-dark); text-decoration: none; }
.product-title a:hover { color: var(--vc-primary); }
.product-spec-tag { font-size: 0.6875rem; background: var(--vc-primary-light); color: var(--vc-primary); padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.product-price { display: flex; align-items: baseline; gap: 8px; margin: 8px 0; }
.current-price { font-size: 1.125rem; font-weight: 800; color: var(--vc-dark); font-family: var(--font-display); }
.original-price { font-size: 0.875rem; color: var(--vc-text-muted); text-decoration: line-through; }
.product-seller { font-size: 0.75rem; color: var(--vc-text-muted); }
.product-seller a { color: var(--vc-primary); text-decoration: none; }

/* ─── Why Section Cards ───────────────────────────────────────────────────── */
.vc-why-card {
  background: var(--vc-white);
  border: 1px solid var(--vc-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all var(--transition-normal);
}
.vc-why-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.why-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.375rem;
  margin-bottom: 16px;
}
.why-icon--blue   { background: #eff6ff; color: #1d4ed8; }
.why-icon--green  { background: #f0fdf4; color: #15803d; }
.why-icon--orange { background: #fff7ed; color: #c2410c; }
.why-icon--purple { background: #faf5ff; color: #7c3aed; }
.why-title { font-size: 1.0625rem; font-weight: 700; margin-bottom: 10px; }
.why-body { color: var(--vc-text-muted); font-size: 0.9375rem; margin: 0; }

/* ─── Step Cards ──────────────────────────────────────────────────────────── */
.vc-step-card {
  background: var(--vc-white);
  border: 1px solid var(--vc-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  position: relative;
}
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--vc-primary-light);
  color: var(--vc-primary);
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.9375rem;
  margin-bottom: 14px;
}
.step-icon { font-size: 2rem; color: var(--vc-primary); margin-bottom: 12px; }
.step-title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.step-body { color: var(--vc-text-muted); font-size: 0.875rem; margin: 0; }

/* ─── Sell CTA Section ────────────────────────────────────────────────────── */
.vc-sell-cta-section {
  background: linear-gradient(135deg, #0f172a, #1e3a5f);
  padding: var(--section-py) 0;
}
.vc-sell-cta-section .section-title { color: #ffffff; }
.vc-sell-cta-section .section-sub   { color: #94a3b8; }
.sell-feature-item { color: #cbd5e1; font-size: 0.9375rem; }
.vc-sell-step-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.vc-sell-step-card h6 { color: #f1f5f9; margin-bottom: 6px; }
.vc-sell-step-card p  { color: #94a3b8; }
.sell-step-num { display: block; font-size: 2rem; font-weight: 800; color: rgba(96,165,250,.5); line-height: 1; margin-bottom: 8px; }

/* ─── Seller Card ─────────────────────────────────────────────────────────── */
.vc-seller-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  background: var(--vc-white);
  border: 1px solid var(--vc-border);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  text-decoration: none;
  transition: all var(--transition-normal);
  text-align: center;
}
.vc-seller-card:hover { box-shadow: var(--shadow-md); border-color: rgba(26,86,219,.3); transform: translateY(-2px); }
.seller-card-logo { width: 72px; height: 72px; border-radius: var(--radius-md); overflow: hidden; background: var(--vc-bg-soft); }
.seller-card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.seller-logo-placeholder { width: 100%; height: 100%; background: var(--vc-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; }
.seller-card-name { font-size: 0.9375rem; font-weight: 700; color: var(--vc-dark); }
.seller-card-meta { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--vc-text-muted); }

/* ─── Brands Grid ─────────────────────────────────────────────────────────── */
.vc-brands-section { background: var(--vc-bg-soft); }
.vc-brands-grid {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 20px;
}
.brand-logo-item {
  background: var(--vc-white);
  border: 1px solid var(--vc-border);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: center;
  min-width: 120px; height: 64px;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.brand-logo-item:hover { box-shadow: var(--shadow-sm); border-color: var(--vc-primary); transform: scale(1.04); }
.brand-logo-item img { max-height: 36px; max-width: 100px; object-fit: contain; filter: grayscale(100%); opacity: .7; transition: all var(--transition-fast); }
.brand-logo-item:hover img { filter: grayscale(0); opacity: 1; }
.brand-name-fallback { font-size: 0.875rem; font-weight: 700; color: var(--vc-text-muted); }

/* ─── FAQ Accordion ───────────────────────────────────────────────────────── */
.vc-accordion-btn {
  background: var(--vc-white);
  border: 1px solid var(--vc-border) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--vc-dark);
  padding: 14px 18px;
}
.vc-accordion-btn:not(.collapsed) {
  background: var(--vc-primary-light);
  color: var(--vc-primary);
  border-color: rgba(26,86,219,.3) !important;
}

/* ─── Newsletter Section ──────────────────────────────────────────────────── */
.vc-newsletter-section {
  background: linear-gradient(135deg, #1e3a5f, #1a56db);
}
.newsletter-icon-wrap {
  width: 56px; height: 56px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  color: var(--vc-accent);
  flex-shrink: 0;
}
.newsletter-title { color: #ffffff; font-size: 1.375rem; font-weight: 700; }
.newsletter-sub   { color: rgba(255,255,255,.8); font-size: 0.9375rem; }

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.vc-footer {
  background: var(--vc-dark);
  padding: 64px 0 0;
}
.footer-brand-link { display: inline-block; }
.footer-about { color: #94a3b8; font-size: 0.9375rem; line-height: 1.7; margin: 0; }
.footer-social { display: flex; gap: 10px; }
.footer-social-link {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8;
  text-decoration: none;
  font-size: 1rem;
  transition: all var(--transition-fast);
}
.footer-social-link:hover { background: var(--vc-primary); color: #fff; }
.footer-heading { color: #f1f5f9; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-links a { color: #94a3b8; text-decoration: none; font-size: 0.9375rem; transition: color var(--transition-fast); }
.footer-links a:hover { color: #ffffff; }
.footer-contact { display: flex; flex-direction: column; gap: 8px; }
.footer-contact-item { display: flex; align-items: center; gap: 8px; color: #94a3b8; text-decoration: none; font-size: 0.875rem; transition: color var(--transition-fast); }
.footer-contact-item i { color: var(--vc-primary); font-size: 1rem; }
.footer-contact-item:hover { color: #fff; }

/* Footer Trust Row */
.footer-trust-row {
  background: rgba(255,255,255,.05);
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 48px;
  padding: 20px 0;
}
.trust-badge { display: flex; align-items: center; gap: 8px; color: #94a3b8; font-size: 0.875rem; }
.trust-badge i { font-size: 1.25rem; }

/* Footer Bottom */
.footer-bottom {
  background: rgba(0,0,0,.3);
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-copyright { color: #64748b; font-size: 0.8125rem; margin: 0; }
.footer-bottom-links { display: flex; gap: 16px; }
.footer-bottom-links a { color: #64748b; text-decoration: none; font-size: 0.8125rem; transition: color var(--transition-fast); }
.footer-bottom-links a:hover { color: #94a3b8; }

/* ─── SEO Content ──────────────────────────────────────────────────────────── */
.vc-seo-content { padding: 48px 0; background: var(--vc-bg-soft); }
.seo-content-inner { max-width: 800px; margin: 0 auto; }
.seo-content-inner h2 { font-size: 1.375rem; color: var(--vc-dark); margin-bottom: 16px; }
.seo-content-inner p { color: var(--vc-text-muted); font-size: 0.9375rem; line-height: 1.8; }

/* ─── Filter Sidebar ──────────────────────────────────────────────────────── */
.vc-filter-sidebar { background: var(--vc-white); border: 1px solid var(--vc-border); border-radius: var(--radius-lg); }
.filter-heading { font-size: 1rem; font-weight: 700; color: var(--vc-dark); }
.filter-group { border-bottom: 1px solid var(--vc-border); padding-bottom: 14px; }
.filter-group:last-child { border-bottom: none; }
.filter-group-toggle {
  background: none; border: none; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; font-weight: 600; font-size: 0.9375rem;
  color: var(--vc-dark); cursor: pointer;
}
.filter-options { padding-top: 8px; }
.filter-options--scrollable { max-height: 180px; overflow-y: auto; }
.filter-checkbox { cursor: pointer; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--vc-primary-light); color: var(--vc-primary);
  font-size: 0.8125rem; font-weight: 600;
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.chip-remove { color: var(--vc-primary); text-decoration: none; font-weight: 700; }

/* ─── Pagination ──────────────────────────────────────────────────────────── */
.vc-pagination .page-link {
  border-radius: var(--radius-sm) !important;
  margin: 0 2px;
  border: 1px solid var(--vc-border);
  color: var(--vc-text);
}
.vc-pagination .page-item.active .page-link { background: var(--vc-primary); border-color: var(--vc-primary); }

/* ─── Seller Dashboard Cards ──────────────────────────────────────────────── */
.dash-stat-card {
  background: var(--vc-white);
  border: 1px solid var(--vc-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex; align-items: center; gap: 16px;
  transition: all var(--transition-normal);
}
.dash-stat-card:hover { box-shadow: var(--shadow-md); }
.dash-stat-card .stat-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.dash-stat-card--blue .stat-icon   { background: #eff6ff; color: #1d4ed8; }
.dash-stat-card--green .stat-icon  { background: #f0fdf4; color: #15803d; }
.dash-stat-card--orange .stat-icon { background: #fff7ed; color: #c2410c; }
.dash-stat-card--purple .stat-icon { background: #faf5ff; color: #7c3aed; }
.stat-number { font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--vc-dark); }
.stat-label  { font-size: 0.8125rem; color: var(--vc-text-muted); margin-top: 2px; }

/* Seller Nav */
.seller-sidebar { background: var(--vc-white); border: 1px solid var(--vc-border); border-radius: var(--radius-lg); overflow: hidden; }
.seller-profile-card { background: linear-gradient(135deg, var(--vc-primary), #7c3aed); padding: 24px; text-align: center; }
.seller-avatar { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.2); overflow: hidden; margin: 0 auto 12px; border: 3px solid rgba(255,255,255,.3); }
.avatar-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; color: #fff; }
.seller-profile-name { color: #fff; font-weight: 700; font-size: 1rem; }
.seller-code { color: rgba(255,255,255,.7); }
.seller-nav { padding: 8px; }
.seller-nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--vc-text); text-decoration: none; font-size: 0.9375rem; font-weight: 500; transition: all var(--transition-fast); }
.seller-nav-link:hover, .seller-nav-link.active { background: var(--vc-primary-light); color: var(--vc-primary); }
.seller-nav-link i { font-size: 1.0625rem; flex-shrink: 0; }

/* ─── Cards ───────────────────────────────────────────────────────────────── */
.vc-card { background: var(--vc-white); border: 1px solid var(--vc-border); border-radius: var(--radius-lg); overflow: hidden; }
.vc-card-header { padding: 14px 20px; border-bottom: 1px solid var(--vc-border); display: flex; justify-content: space-between; align-items: center; background: var(--vc-bg-soft); }
.vc-card-body { padding: 20px; }

/* Notification items */
.notification-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--vc-border); }
.notification-item:last-child { border-bottom: none; }

/* ─── Form Design System ──────────────────────────────────────────────────── */
.form-card {
  background: var(--vc-white);
  border: 1px solid var(--vc-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.form-card--highlight { border-color: var(--vc-primary); }
.form-card-header { background: var(--vc-bg-soft); padding: 20px 28px; border-bottom: 1px solid var(--vc-border); }
.form-card-body { padding: 24px 28px; }
.form-card-title { font-size: 1.0625rem; font-weight: 700; color: var(--vc-dark); margin: 0; display: flex; align-items: center; gap: 10px; }
.form-card-subtitle { color: var(--vc-text-muted); font-size: 0.875rem; margin: 4px 0 0; }
.step-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--vc-primary); color: #fff; border-radius: 50%; font-size: 0.8125rem; font-weight: 700; flex-shrink: 0; }
.required-label::after { content: ' *'; color: var(--vc-danger); }

/* Multi-step progress */
.vc-multistep-progress { display: flex; align-items: center; justify-content: center; gap: 0; }
.step-indicator { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.step-dot { width: 36px; height: 36px; border-radius: 50%; background: var(--vc-border); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--vc-text-muted); border: 2px solid var(--vc-border); transition: all var(--transition-normal); }
.step-indicator.active .step-dot { background: var(--vc-primary); color: #fff; border-color: var(--vc-primary); }
.step-indicator.completed .step-dot { background: var(--vc-success); color: #fff; border-color: var(--vc-success); }
.step-label { font-size: 0.75rem; font-weight: 600; color: var(--vc-text-muted); }
.step-indicator.active .step-label { color: var(--vc-primary); }
.step-line { flex: 1; height: 2px; background: var(--vc-border); min-width: 40px; }
.form-step { display: none; }
.form-step.active { display: block; }

/* Document upload cards */
.doc-upload-card { display: flex; align-items: flex-start; gap: 14px; background: var(--vc-bg-soft); border: 1px solid var(--vc-border); border-radius: var(--radius-md); padding: 16px; }
.doc-upload-card.required-doc { border-left: 3px solid var(--vc-primary); }
.doc-upload-icon { font-size: 1.5rem; color: var(--vc-primary); flex-shrink: 0; }

/* Password strength */
.password-strength { display: flex; align-items: center; gap: 8px; }
.strength-bar { height: 4px; border-radius: 2px; background: var(--vc-danger); transition: width var(--transition-normal), background var(--transition-normal); width: 0; }
.strength-label { font-size: 0.75rem; font-weight: 600; color: var(--vc-text-muted); }

/* Agreement box */
.agreement-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-md); padding: 16px; }

/* ─── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .vc-search-form { width: 100%; max-width: 400px; margin: 12px 0; order: 3; }
}
@media (max-width: 767.98px) {
  :root { --section-py: 48px; }
  .hero-headline { font-size: 1.875rem; }
  .vc-megamenu { min-width: auto; grid-template-columns: 1fr; }
  .stats-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .stats-item:last-child { border-bottom: none; }
  .vc-multistep-progress { overflow-x: auto; padding-bottom: 8px; }
}
@media (max-width: 575.98px) {
  .hero-search-card { padding: 20px; }
  .form-card-body { padding: 16px 20px; }
}

/* ─── Accessibility ────────────────────────────────────────────────────────── */
.skip-link:focus { position: fixed; top: 16px; left: 16px; z-index: 9999; }
*:focus-visible { outline: 2px solid var(--vc-primary); outline-offset: 3px; }

/* ─── Utilities ────────────────────────────────────────────────────────────── */
.object-fit-cover { object-fit: cover; }