/* Jio Bag - Custom Theme & Interaction Styles */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Caveat:wght@600;700&display=swap');

:root {
  --primary-forest: #1b4332;
  --primary-deep: #143628;
  --accent-emerald: #2d6a4f;
  --vibrant-green: #22c55e;
  --mint-light: #f0fdf4;
  --sage-bg: #eef6f0;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f4f8f4;
  color: #1f2937;
  overflow-x: hidden;
}

.font-script {
  font-family: 'Caveat', cursive;
}

/* Micro-interaction for Cart Badge */
@keyframes cartBounceShort {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); }
  65% { transform: scale(0.85); }
  100% { transform: scale(1); }
}

.animate-bounce-short {
  animation: cartBounceShort 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Pulse on Buy Now CTA */
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
}

.btn-pulse {
  animation: subtlePulse 2.5s infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #a7f3d0;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #34d399;
}

/* Hero plant background gradient overlay */
.hero-plant-backdrop {
  background: radial-gradient(circle at 50% 60%, rgba(34, 197, 94, 0.15) 0%, rgba(20, 83, 45, 0.4) 60%, rgba(15, 23, 42, 0.8) 100%);
}

/* Card hover glow */
.card-hover-shadow {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover-shadow:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(27, 67, 50, 0.08), 0 8px 10px -6px rgba(27, 67, 50, 0.04);
}

/* Real life comparison scale transitions */
#comparison-bag-visual {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Custom checkbox / radio styles */
input[type="radio"]:checked {
  border-color: #1b4332;
  background-color: #1b4332;
}

/* Smooth Drawer Transition */
#cart-drawer {
  transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}