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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    /* Preserve your custom variables */
    --labelText: 0, 0%, 16%;
    --rating: 47 100% 45%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 217.2 32.6% 17.5%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 210 40% 98%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 210 40% 98%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 27%;
    --input: 217.2 32.6% 27%;
    --ring: 212.7 26.8% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    /* Preserve your custom dark mode variables */
    --labelText: 216 12% 84%;
    --rating: 48 96% 53%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: 'Red Hat Display', system-ui, sans-serif;
    margin: 0;
    padding: 0;
  }
}

/* Ensure full width usage */
html, body {
  width: 100%;
  overflow-x: hidden;
}

#root {
  width: 100%;
  min-height: 100vh;
}

/* Keep your existing autofill styles */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #222;
  box-shadow: 0 0 0px 1000px #f3f4f6 inset;
  transition: background-color 5000s ease-in-out 0s;
}

@layer utilities {
  /* All your new animation keyframes and utility classes */
  @keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .animate-gradient {
    animation: gradient 15s ease infinite;
  }

  /* Rocket Animation */
  @keyframes rocket {
    0%,
    100% {
      transform: translateY(0px) rotate(0deg);
    }
    25% {
      transform: translateY(-10px) rotate(-5deg);
    }
    50% {
      transform: translateY(-20px) rotate(0deg);
    }
    75% {
      transform: translateY(-10px) rotate(5deg);
    }
  }

  .animate-rocket {
    animation: rocket 3s ease-in-out infinite;
    display: inline-block;
  }

  /* Tick Animation */
  @keyframes tick {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
      color: #3ebb9e;
    }
    100% {
      transform: scale(1);
    }
  }

  .animate-tick {
    animation: tick 2s ease-in-out infinite;
  }

  /* Typing Cursor Blink */
  @keyframes blink {
    0%,
    50% {
      opacity: 1;
    }
    51%,
    100% {
      opacity: 0;
    }
  }

  .animate-blink {
    animation: blink 1s infinite;
  }

  /* Glow Effect */
  @keyframes glow {
    0%,
    100% {
      text-shadow: 0 0 5px #45c1a4, 0 0 10px #45c1a4, 0 0 15px #45c1a4;
    }
    50% {
      text-shadow: 0 0 10px #45c1a4, 0 0 20px #45c1a4, 0 0 30px #45c1a4;
    }
  }

  .animate-glow {
    animation: glow 3s ease-in-out infinite;
  }

  /* Fade In Up */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
  }

  /* Slide In Left */
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-slideInLeft {
    animation: slideInLeft 0.8s ease-out forwards;
  }

  /* Slide In Right */
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-slideInRight {
    animation: slideInRight 0.8s ease-out forwards;
  }

  /* Slide Down */
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-slideDown {
    animation: slideDown 0.6s ease-out forwards;
  }

  /* Bounce Horizontal */
  @keyframes bounceHorizontal {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(5px);
    }
  }

  .animate-bounce-horizontal {
    animation: bounceHorizontal 1s ease-in-out infinite;
  }

  /* Slow Bounce */
  @keyframes bounceSlow {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .animate-bounce-slow {
    animation: bounceSlow 3s ease-in-out infinite;
  }

  /* Slow Spin */
  @keyframes spinSlow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .animate-spin-slow {
    animation: spinSlow 8s linear infinite;
  }

  /* PurchaseButton Styling */
  .purchase-button {
    @apply w-full font-medium py-2.5 text-sm transition-colors;
    background-color: #3ebb9e !important;
    color: white !important;
  }

  .purchase-button:hover {
    background-color: #00674f !important;
  }

  .purchase-button:disabled {
    @apply opacity-50 cursor-not-allowed;
    background-color: #9ca3af !important;
  }

  .purchase-button:disabled:hover {
    background-color: #9ca3af !important;
  }

  /* Free prompt button variant */
  .purchase-button.free {
    background-color: #059669 !important;
  }

  .purchase-button.free:hover {
    background-color: #047857 !important;
  }

  /* Loading state */
  .purchase-button.loading {
    @apply cursor-not-allowed;
    background-color: #6b7280 !important;
  }

  .purchase-button.loading:hover {
    background-color: #6b7280 !important;
  }

  /* Animation Delays */
  .animation-delay-200 {
    animation-delay: 0.2s;
  }

  .animation-delay-300 {
    animation-delay: 0.3s;
  }

  .animation-delay-400 {
    animation-delay: 0.4s;
  }

  .animation-delay-600 {
    animation-delay: 0.6s;
  }

  .animation-delay-900 {
    animation-delay: 0.9s;
  }

  /* Fade In and Fade Out Animations */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
  }
  
  .animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
  }
  
  .animate-fade-out {
    animation: fadeOut 0.5s ease-out forwards;
  }

  /* Custom Scrollbar Styling - Updated */
  .custom-scrollbar {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(62, 187, 158, 0.3) transparent;
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(62, 187, 158, 0.3);
    border-radius: 3px;
    transition: background-color 0.2s ease;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(62, 187, 158, 0.5);
  }

  /* Dark mode scrollbar */
  .dark .custom-scrollbar {
    scrollbar-color: rgba(62, 187, 158, 0.4) transparent;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(62, 187, 158, 0.4);
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(62, 187, 158, 0.6);
  }

  /* Enhanced bounce animation for the down arrow */
  @keyframes bounceDown {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0) translateX(-50%);
    }
    40% {
      transform: translateY(-10px) translateX(-50%);
    }
    60% {
      transform: translateY(-5px) translateX(-50%);
    }
  }

  .animate-bounce-down {
    animation: bounceDown 2s infinite;
  }

  /* Enhanced mobile-responsive bounce animation */
  @keyframes mobileBounceSoft {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0) translateX(-50%);
    }
    40% {
      transform: translateY(-8px) translateX(-50%);
    }
    60% {
      transform: translateY(-4px) translateX(-50%);
    }
  }

  @keyframes desktopBounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0) translateX(-50%);
    }
    40% {
      transform: translateY(-12px) translateX(-50%);
    }
    60% {
      transform: translateY(-6px) translateX(-50%);
    }
  }

  /* Apply different bounce animations based on screen size */
  @media (max-width: 640px) {
    .animate-bounce {
      animation: mobileBounceSoft 2s infinite;
    }
  }

  @media (min-width: 641px) {
    .animate-bounce {
      animation: desktopBounce 2s infinite;
    }
  }

  /* Improve touch targets for mobile */
  @media (max-width: 640px) {
    .touch-manipulation {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      /* Remove the min-width and min-height here since we're using flexbox */
    }
  }
}