/**
 * Modern Stats Section Styles
 * Animated counters with StrongBody design system
 */

.stats-section {
  padding: var(--space-15) 0;
  background: linear-gradient(135deg,
    var(--color-bg-primary) 0%,
    var(--color-bg-secondary) 100%);
    position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(25, 131, 97, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(251, 55, 46, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

/* ===== STATS GRID ===== */

.stats-grid {
  position: relative;
  z-index: 2;
    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ===== STAT ITEMS ===== */

.stat-item {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
    text-align: center;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-primary);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  animation: slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.stat-item:nth-child(1) { animation-delay: 0.1s; }
.stat-item:nth-child(2) { animation-delay: 0.2s; }
.stat-item:nth-child(3) { animation-delay: 0.3s; }
.stat-item:nth-child(4) { animation-delay: 0.4s; }

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--color-primary-500),
    var(--color-green-seller-600),
    var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-normal);
}

.stat-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-border-hover);
}

.stat-item:hover::before {
  transform: scaleX(1);
}

/* ===== STAT NUMBER ===== */

.stat-number {
  font-size: clamp(var(--text-4xl), 8vw, var(--text-5xl));
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  color: var(--color-primary-500);
  margin-bottom: var(--space-3);
  position: relative;
  display: inline-block;
    }
    
.stat-number::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--color-primary-500),
    var(--color-green-seller-600));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-normal);
    }
    
.stat-item:hover .stat-number::after {
  transform: scaleX(1);
    }

/* ===== STAT LABEL ===== */
    
.stat-label {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  position: relative;
  z-index: 2;
    }

/* ===== STAT DESCRIPTION ===== */
    
.stat-description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
  position: relative;
  z-index: 2;
}

/* ===== ANIMATED COUNTERS ===== */

/* Counter animation for numbers */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.counter[data-target] {
  animation: countUp 2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

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

/* ===== ICONS ===== */

.stat-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  color: var(--color-primary-500);
  position: relative;
  z-index: 2;
}

.stat-icon svg {
  width: 100%;
  height: 100%;
}

/* ===== DECORATIVE ELEMENTS ===== */

.stat-decoration {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg,
    rgba(25, 131, 97, 0.1),
    rgba(251, 55, 46, 0.1));
  border-radius: 50%;
  opacity: 0.6;
  animation: pulse 4s ease-in-out infinite;
}

.stat-decoration-2 {
  position: absolute;
  bottom: -10px;
  left: -10px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg,
    rgba(0, 162, 240, 0.1),
    rgba(25, 131, 97, 0.1));
  border-radius: var(--radius-xl);
  opacity: 0.4;
  animation: pulse 6s ease-in-out infinite reverse;
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 1024px) {
  .stats-section {
    padding: var(--space-12) 0;
    }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    padding: 0 var(--space-4);
  }

  .stat-item {
    padding: var(--space-6);
  }

  .stat-number {
    font-size: clamp(var(--text-3xl), 10vw, var(--text-4xl));
  }
}

@media (max-width: 768px) {
  .stats-section {
    padding: var(--space-10) 0;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: 0 var(--space-4);
  }

  .stat-item {
    padding: var(--space-6);
    text-align: center;
  }

  .stat-number {
    font-size: clamp(var(--text-2xl), 12vw, var(--text-3xl));
    margin-bottom: var(--space-2);
  }

  .stat-label {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
  }

  .stat-description {
    font-size: var(--text-sm);
  }

  .stat-decoration,
  .stat-decoration-2 {
    display: none;
  }
}

@media (max-width: 640px) {
  .stats-section {
    padding: var(--space-8) 0;
    }
    
  .stats-grid {
    padding: 0 var(--space-3);
  }

  .stat-item {
    padding: var(--space-5);
  }

  .stat-number {
    font-size: clamp(var(--text-xl), 15vw, var(--text-2xl));
  }

  .stat-label {
    font-size: var(--text-base);
  }

  .stat-description {
    font-size: var(--text-sm);
    line-height: var(--line-height-normal);
    }
}

/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {
  .stat-item,
  .counter,
  .stat-decoration,
  .stat-decoration-2 {
    animation: none !important;
    }
    
  .stat-item:hover {
        transform: none;
    }
    
  .stat-number::after {
    display: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .stat-item {
    border-width: 2px;
    border-color: var(--color-text-primary);
  }

  .stat-number {
    color: var(--color-text-primary);
  }
}

/* ===== DARK MODE ===== */

/* Force dark mode override */
:root.force-dark .stats-section,
:root.force-dark .stats-section {
  background: linear-gradient(135deg,
    var(--color-bg-primary) 0%,
    var(--color-bg-secondary) 100%);
}

:root.force-dark .stat-item,
:root.force-dark .stat-item {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-primary);
}

:root.force-dark .stat-item:hover,
:root.force-dark .stat-item:hover {
  border-color: var(--color-border-hover);
}

:root.force-dark .stat-number,
:root.force-dark .stat-number {
  color: var(--color-accent);
}

:root.force-dark .stat-label,
:root.force-dark .stat-label {
  color: var(--color-text-primary);
}

:root.force-dark .stat-description,
:root.force-dark .stat-description {
  color: var(--color-text-secondary);
}

:root.force-dark .section-title,
:root.force-dark .section-title {
  color: var(--color-text-primary);
}

:root.force-dark .section-description,
:root.force-dark .section-description {
  color: var(--color-text-secondary);
}

@media (prefers-color-scheme: dark) {
  .stats-section {
    background: linear-gradient(135deg,
      var(--color-bg-primary) 0%,
      var(--color-bg-secondary) 100%);
  }

  .stat-item {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
  }

  .stat-item:hover {
    border-color: var(--color-border-hover);
  }

  .stat-number {
    color: var(--color-accent);
    }

  .stat-label {
    color: var(--color-text-primary);
  }

  .stat-description {
    color: var(--color-text-secondary);
  }

  .section-title {
    color: var(--color-text-primary);
  }

  .section-description {
    color: var(--color-text-secondary);
  }
}

/* ===== PERFORMANCE ===== */

.stat-item {
  will-change: transform;
}

/* ===== PRINT STYLES ===== */

@media print {
  .stats-section {
        background: white !important;
    padding: 40px 0;
    }
    
  .stat-item {
        box-shadow: none;
    border: 2px solid #000;
        break-inside: avoid;
    }
    
  .stat-decoration,
  .stat-decoration-2 {
    display: none;
    }
}