@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  scroll-behavior: smooth;
  font-family: 'Poppins', sans-serif;
}

article,
div,
section {
  scroll-margin-top: 50px;
}

.product-card {
  transition: all 0.3s ease;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.price-tag {
  background: linear-gradient(135deg, #f37d71 0%, #e55d50 100%);
}
.stock-badge {
  animation: pulse 2s infinite;
}
.wholesale-badge {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.package-container {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
.package-card {
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.package-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
.package-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #f37d71, #39bed5, #64c9a5);
  z-index: 1;
}
.savings-circle {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 4px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.package-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.bundle-items {
  background: linear-gradient(135deg, #fef3c7 0%, #fffae6 100%);
  border-left: 4px solid #f59e0b;
}
.price-section {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}
.cta-button {
  background: linear-gradient(135deg, #f37d71 0%, #e55d50 100%);
  transform: perspective(1000px) rotateX(0deg);
  transition: all 0.3s ease;
}
.cta-button:hover {
  transform: perspective(1000px) rotateX(-5deg);
  box-shadow: 0 10px 20px rgba(243, 125, 113, 0.3);
}