/* Custom animations and styling for GoKong Casino */

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

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(147, 51, 234, 0.6);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes tilt {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  75% {
    transform: rotate(-1deg);
  }
}

/* Animation classes */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

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

.animate-marquee {
  animation: marquee 20s linear infinite;
}

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

/* Custom gradient backgrounds */
.bg-kong-gradient {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1b69 50%, #000000 100%);
}

.bg-purple-gradient {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

/* Custom button styles */

.btn-primary {
  background-color: #7c3aed;
  color: #fff;
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s;
  transform: none;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #6d28d9;
  transform: scale(1.05);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  border: 2px solid #7c3aed;
  color: #7c3aed;
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
}
.btn-secondary:hover, .btn-secondary:focus {
  background: #7c3aed;
  color: #fff;
}

/* Prose styling for readability */
.prose {
  @apply text-gray-300 leading-relaxed;
}

.prose h2 {
  @apply text-2xl font-bold text-white mb-4;
}

.prose h3 {
  @apply text-xl font-semibold text-purple-400 mb-3;
}

.prose p {
  @apply mb-4 text-gray-300;
}

.prose ul {
  @apply list-disc list-inside mb-4 text-gray-300;
}

.prose li {
  @apply mb-2;
}

/* Custom card styles */
.game-card {
  @apply bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-purple-500/20 transition-all duration-300 transform hover:scale-105;
}

.promo-card {
  @apply bg-gradient-to-br from-purple-600 to-purple-800 rounded-lg p-6 text-white shadow-lg;
}

/* Sticky sidebar */
.sidebar-sticky {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 80px;
}

/* Mobile burger menu */
.burger-menu {
  @apply fixed inset-0 bg-black bg-opacity-95 z-50 flex flex-col items-center justify-center space-y-8;
}

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

/* Focus states for accessibility */
.focus-visible:focus {
  @apply outline-none ring-2 ring-purple-500 ring-offset-2 ring-offset-gray-900;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: #7c3aed;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a855f7;
}

/* Bonus calculator styles */
.calculator-input {
  @apply bg-gray-800 border border-gray-600 rounded-lg px-4 py-2 text-white focus:border-purple-500 focus:outline-none;
}

/* Payment method icons */
.payment-icon {
  @apply w-12 h-8 bg-gray-700 rounded flex items-center justify-center text-gray-300;
}

/* Stats tiles */
.stat-tile {
  @apply bg-gray-800 rounded-lg p-6 text-center border border-gray-700 hover:border-purple-500 transition-colors duration-300;
}

/* FAQ accordion */
.faq-item {
  @apply border-b border-gray-700 last:border-b-0;
}

.faq-question {
  @apply w-full text-left py-4 px-0 text-white font-semibold hover:text-purple-400 transition-colors duration-200;
}

.faq-answer {
  @apply pb-4 text-gray-300 prose;
}

/* Back to top button */
.back-to-top {
  @apply fixed bottom-6 right-6 bg-purple-600 hover:bg-purple-700 text-white p-3 rounded-full shadow-lg transition-all duration-300 transform hover:scale-110 z-50;
}

/* Responsive utilities */
@media (max-width: 1023px) {
  .sidebar-sticky {
    display: none;
  }
}

/* King Kong themed elements */
.kong-shadow {
  box-shadow: 0 10px 30px rgba(147, 51, 234, 0.3);
}

.kong-border {
  border: 2px solid rgba(147, 51, 234, 0.5);
}

/* Trustpilot-style badge */
.trust-badge {
  @apply bg-green-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2;
}

.star-rating {
  @apply flex items-center space-x-1 text-yellow-400;
}