/* Kitty Network - Kawaii Pastel Custom Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  --bg-kawaii: #FFF0F5;
  --primary-pink: #FFB7C5;
  --mint-green: #B5EAD7;
  --lavender-purple: #C7CEEA;
  --pastel-yellow: #FFF3B0;
  --text-main: #4A3E4D;
  --text-muted: #7E6C80;
  --card-bg: rgba(255, 255, 255, 0.92);
}

body {
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-kawaii);
  color: var(--text-main);
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Baloo 2', cursive, 'Quicksand', sans-serif;
}

/* Floating Animation for decorative emojis (🐾🐟🧶) */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-16px) rotate(5deg);
  }
}

@keyframes float-reverse {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(16px) rotate(-6deg);
  }
}

@keyframes wiggle-float {
  0%, 100% {
    transform: translateY(-8px) rotate(0deg);
  }
  25% {
    transform: translateY(-12px) rotate(-2deg);
  }
  75% {
    transform: translateY(-12px) rotate(2deg);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-reverse 4.5s ease-in-out infinite;
  animation-delay: 1s;
}

.animate-float-slow {
  animation: float 5.2s ease-in-out infinite;
  animation-delay: 2s;
}

/* 24px rounded card with pastel soft shadow and hover wiggle+float */
.kitty-card {
  border-radius: 24px;
  background-color: var(--card-bg);
  box-shadow: 0 10px 30px -5px rgba(255, 183, 197, 0.35), 0 4px 12px -2px rgba(199, 206, 234, 0.25);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.kitty-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 35px -8px rgba(255, 183, 197, 0.5), 0 8px 20px -3px rgba(181, 234, 215, 0.35);
  animation: wiggle-float 1.2s ease-in-out infinite alternate;
}

/* Capsule sticky nav */
.capsule-nav {
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 30px rgba(255, 183, 197, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.95);
}

/* Custom Soft Buttons */
.btn-primary-kawaii {
  background: linear-gradient(135deg, #FFB7C5 0%, #FFA8B8 100%);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(255, 183, 197, 0.55);
  transition: all 0.25s ease;
  border-radius: 9999px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary-kawaii:hover {
  background: linear-gradient(135deg, #FFA8B8 0%, #FF97A8 100%);
  box-shadow: 0 12px 25px rgba(255, 183, 197, 0.7);
  transform: translateY(-2px);
}

.btn-secondary-kawaii {
  background: linear-gradient(135deg, #B5EAD7 0%, #99DEC3 100%);
  color: #2F594A;
  box-shadow: 0 8px 20px rgba(181, 234, 215, 0.5);
  transition: all 0.25s ease;
  border-radius: 9999px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary-kawaii:hover {
  background: linear-gradient(135deg, #99DEC3 0%, #85D4B5 100%);
  box-shadow: 0 12px 25px rgba(181, 234, 215, 0.65);
  transform: translateY(-2px);
}

.btn-lavender-kawaii {
  background: linear-gradient(135deg, #C7CEEA 0%, #B7C0E4 100%);
  color: #3C4566;
  box-shadow: 0 8px 20px rgba(199, 206, 234, 0.5);
  transition: all 0.25s ease;
  border-radius: 9999px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-lavender-kawaii:hover {
  background: linear-gradient(135deg, #B7C0E4 0%, #A4AFDD 100%);
  box-shadow: 0 12px 25px rgba(199, 206, 234, 0.65);
  transform: translateY(-2px);
}

/* Wave Dividers */
.wave-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave-divider svg {
  display: block;
  width: calc(100% + 1.3px);
  height: 52px;
}

/* FAQ Details Custom Styling */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] summary .faq-icon {
  transform: rotate(180deg);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .wave-divider svg {
    height: 32px;
  }
}