/* ============================================================
   Custom Styles — 7 Days Kids Mobile Detox Challenge
   Tailwind handles most styling; this file is for overrides,
   animations, and things Tailwind CDN can't do inline.
   ============================================================ */

/* ---- Smooth Scrolling ---- */
html {
  scroll-behavior: smooth;
}

/* ---- Body defaults ---- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- CTA Button Pulse Animation ---- */
.cta-button {
  position: relative;
  animation: ctaPulse 2.5s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% {
    box-shadow: 0 10px 40px rgba(255, 107, 0, 0.35);
  }
  50% {
    box-shadow: 0 10px 60px rgba(255, 107, 0, 0.55);
  }
}

/* ---- Hero Yellow CTA Glow ---- */
.cta-button-hero {
  position: relative;
  animation: heroCtaGlow 2.5s ease-in-out infinite;
}

@keyframes heroCtaGlow {
  0%, 100% {
    box-shadow: 0 8px 30px rgba(255, 214, 10, 0.2), 0 0 0 0 rgba(255, 214, 10, 0);
  }
  50% {
    box-shadow: 0 8px 50px rgba(255, 214, 10, 0.35), 0 0 0 8px rgba(255, 214, 10, 0.05);
  }
}

/* ---- Slow Bounce for Price Badge ---- */
.animate-bounce-slow {
  animation: bounceSlow 3s ease-in-out infinite;
}

/* ---- FREE Stamp Badge (Seal / Starburst) ---- */
.free-stamp {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #DC2626;
  color: #fff;
  font-weight: 900;
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  clip-path: polygon(
    50% 0%, 63% 6%, 75% 2%, 82% 14%, 98% 18%,
    94% 32%, 100% 46%, 96% 58%, 100% 72%,
    90% 78%, 82% 94%, 68% 90%, 54% 100%,
    42% 92%, 28% 98%, 22% 84%, 6% 82%,
    8% 68%, 0% 54%, 6% 42%, 0% 28%,
    10% 22%, 18% 6%, 32% 10%, 44% 0%
  );
  transform: rotate(-12deg);
  z-index: 2;
  animation: stampPop 2.5s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  filter: drop-shadow(0 2px 4px rgba(220, 38, 38, 0.4));
}

@keyframes stampPop {
  0%, 100% {
    transform: rotate(-12deg) scale(1);
    filter: drop-shadow(0 2px 4px rgba(220, 38, 38, 0.4));
  }
  50% {
    transform: rotate(-12deg) scale(1.08);
    filter: drop-shadow(0 4px 12px rgba(220, 38, 38, 0.6));
  }
}

/* ---- Language Selector Fade In ---- */
.animate-fadeIn {
  animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceSlow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ---- Day Cards staggered entrance ---- */
.day-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.day-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Bonus Cards hover lift ---- */
.bonus-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease;
}

.bonus-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.bonus-card:hover {
  transform: translateY(-4px);
}

/* ---- Sticky CTA slide-up transition ---- */
#sticky-cta {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#sticky-cta.show {
  transform: translateY(0);
}

/* ---- WhatsApp button responsive positioning ---- */
@media (min-width: 768px) {
  #whatsapp-float {
    bottom: 24px !important;
  }
}

/* ---- Strikethrough price styling ---- */
.line-through {
  text-decoration-thickness: 2px;
}

/* ---- Focus styles for accessibility ---- */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #FF6B00;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Selection color ---- */
::selection {
  background-color: #FF6B00;
  color: #fff;
}

/* ---- Reduce motion for accessibility ---- */
@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;
  }
}

/* ---- Print styles ---- */
@media print {
  #sticky-cta,
  #whatsapp-float {
    display: none !important;
  }
}

/* ---- FAQ Accordion ---- */
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  background-color: #FF6B00;
}

.faq-item.open .faq-chevron svg {
  color: white;
}

.faq-item.open > button {
  background-color: #F9FAFB;
}

.faq-item.open {
  border-color: #FF6B00;
}