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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply font-body text-neutral-900 bg-brand-cream;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-display text-neutral-700;
  }
}

@layer utilities {
  .focus-visible-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-rose focus-visible:ring-offset-2;
  }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Custom CSS required by PRD */
.btn-wa-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 50;
  animation: pulse-wa 2s infinite;
}

@keyframes pulse-wa {
  0% { transform: scale(1); box-shadow: 0 8px 25px rgba(37,211,102,0.45); }
  50% { transform: scale(1.05); box-shadow: 0 8px 30px rgba(37,211,102,0.6); }
  100% { transform: scale(1); box-shadow: 0 8px 25px rgba(37,211,102,0.45); }
}

/* Slide panels for Cart & Modals */
.slide-panel {
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-panel.open {
  transform: translateX(0);
}

.modal-fade {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-fade.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-content-scale {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.modal-fade.open .modal-content-scale {
  transform: scale(1);
}

/* FAQ Accordion */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.active .faq-content {
  max-height: 500px; /* arbitrary max height for transition */
}

/* Hide scrollbar on filter pills (mobile) */
.filter-scroll::-webkit-scrollbar {
  display: none;
}
.filter-scroll {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Spin animation for loading state */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.loading-spinner {
  animation: spin-slow 1s linear infinite;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}