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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900 text-white;
    background: linear-gradient(135deg, #0f172a 0%, #fe9f00 25%, #e58f00 50%, #cc7f00 75%, #fe9f00 100%);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
  }
}

@layer components {
  .btn-primary {
    @apply px-6 py-3 rounded-lg font-semibold text-white transition-all duration-300 transform hover:scale-105 hover:shadow-lg;
    background: linear-gradient(to right, #fe9f00, #e58f00);
  }
  
  .btn-primary:hover {
    background: linear-gradient(to right, #e58f00, #cc7f00);
  }
  
  .btn-secondary {
    @apply px-6 py-3 border-2 rounded-lg font-semibold transition-all duration-300;
    border-color: #fe9f00;
    color: #fe9f00;
  }
  
  .btn-secondary:hover {
    background-color: #fe9f00;
    color: white;
  }
  
  .card {
    @apply backdrop-blur-lg bg-white/10 border border-white/20 rounded-xl p-6 shadow-2xl transition-all duration-300 hover:scale-105;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  
  .card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 30px rgba(254, 159, 0, 0.2);
  }
  
  .section-title {
    @apply text-4xl md:text-6xl font-bold bg-gradient-to-r from-[#fe9f00] via-[#e58f00] to-[#fe9f00] bg-clip-text text-transparent mb-6;
  }

  /* WhatsApp Widget Styles */
  .whatsapp-widget {
    z-index: 9999;
  }

  .whatsapp-bubble {
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4), 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .whatsapp-pulse {
    animation: whatsapp-pulse 2s infinite;
  }

  @keyframes whatsapp-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(254, 159, 0, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(254, 159, 0, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(254, 159, 0, 0);
    }
  }

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

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

  /* Mobile optimizations */
  @media (max-width: 768px) {
    .whatsapp-chat-popup {
      position: fixed !important;
      bottom: 90px !important;
      right: 10px !important;
      left: 10px !important;
      width: auto !important;
      max-width: none !important;
    }

    .whatsapp-widget {
      bottom: 20px !important;
      right: 20px !important;
    }
  }
}