/* public/css/components/badge.css */

.product-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 1;
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-featured {
  background: #fbbf24;
  color: #78350f;
}

.badge-sale {
  background: #ef4444;
  color: white;
}

.badge-out-of-stock {
  background: #6b7280;
  color: white;
}

.badge-low-stock {
  background: #f59e0b;
  color: white;
}

.badge-warning {
  background: #fbbf24;
  color: #78350f;
}

.badge-info {
  background: #3b82f6;
  color: white;
}

.badge-primary {
  background: #6366f1;
  color: white;
}

.badge-success {
  background: #22c55e;
  color: white;
}

.badge-danger {
  background: #ef4444;
  color: white;
}

.badge-secondary {
  background: #6b7280;
  color: white;
}

@media (max-width: 768px) {
  .product-badges {
    top: 0.625rem;
    left: 0.625rem;
    gap: 0.375rem;
  }

  .badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .product-badges {
    top: 0.5rem;
    left: 0.5rem;
  }

  .badge {
    font-size: 0.65rem;
  }
}