/* Glass Effect */
.glass-effect {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navigation Links */
.nav-link {
  @apply text-white/80 hover:text-white transition-colors font-medium;
}

.nav-link-mobile {
  @apply text-white/80 hover:text-white transition-colors font-medium py-2;
}

/* Buttons */
.btn-primary {
  @apply bg-gradient-to-r from-purple-600 via-pink-600 to-cyan-600 text-white px-6 py-3 rounded-full font-bold hover:scale-105 transition-transform duration-300 shadow-lg;
}

.btn-secondary {
  @apply bg-white/10 text-white px-6 py-3 rounded-full font-bold hover:bg-white/20 transition-colors border border-white/20;
}

/* Sidebar Icons */
.sidebar-icon {
  @apply w-12 h-12 flex items-center justify-center rounded-2xl bg-white/10 hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 transition-all duration-300 text-white/80 hover:text-white hover:scale-110;
}

/* Bottom Menu */
.bottom-menu-item {
  @apply flex flex-col items-center justify-center text-white/70 hover:text-white transition-colors;
}

/* Game Cards */
.game-card {
  @apply glass-effect rounded-3xl p-6 hover:scale-105 transition-transform duration-300;
}

/* Stat Cards */
.stat-card {
  @apply glass-effect rounded-3xl p-8 text-center hover:border-casino-gold/50 transition-colors;
}

/* Review Cards */
.review-card {
  @apply glass-effect rounded-3xl p-6;
}

/* Feature Cards */
.feature-card {
  @apply glass-effect rounded-3xl p-8 text-center hover:border-casino-purple/50 transition-colors;
}

/* Step Cards */
.step-card {
  @apply glass-effect rounded-3xl p-8 text-center relative;
}

.step-number {
  @apply absolute -top-4 left-1/2 -translate-x-1/2 w-12 h-12 bg-gradient-to-r from-casino-purple to-casino-pink rounded-full flex items-center justify-center text-2xl font-bold;
}

/* Promo Cards */
.promo-card {
  @apply glass-effect rounded-3xl p-8 text-center hover:border-casino-cyan/50 transition-colors;
}

/* Payment Methods */
.payment-method {
  @apply flex flex-col items-center gap-2 min-w-[120px];
}

/* Provider Tags */
.provider-tag {
  @apply glass-effect px-6 py-3 rounded-full text-sm font-semibold hover:bg-white/10 transition-colors;
}

/* Calculator Input */
.calculator-input {
  @apply w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-casino-gold/50 transition-colors;
}

/* FAQ Items */
.faq-item {
  @apply glass-effect rounded-2xl overflow-hidden;
}

.faq-question {
  @apply flex items-center justify-between w-full p-6 cursor-pointer hover:bg-white/5 transition-colors font-semibold text-left;
}

.faq-answer {
  @apply px-6 pb-6 text-gray-400 leading-relaxed;
}

details[open] .faq-question i {
  transform: rotate(180deg);
}

.faq-question i {
  transition: transform 0.3s ease;
}

/* Prose Styling for Readability */
.prose-casino {
  @apply text-gray-300 leading-relaxed;
}

.prose-casino p {
  @apply mb-6 text-base leading-relaxed;
}

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

.prose-casino ul {
  @apply mb-6 space-y-2;
}

.prose-casino li {
  @apply flex items-start;
}

.prose-casino a {
  @apply text-casino-gold hover:text-casino-purple transition-colors underline;
}

.prose-casino table {
  @apply w-full mb-6;
}

.prose-casino th {
  @apply text-left font-semibold text-white;
}

.prose-casino td {
  @apply text-gray-400;
}

/* Animations */
@keyframes pulse-slow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

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

/* Marquee Animation */
.marquee-container {
  position: relative;
}

.marquee {
  animation: marquee 30s linear infinite;
}

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

/* Parallax */
.parallax {
  transition: transform 0.1s ease-out;
}

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

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

::-webkit-scrollbar-track {
  background: #0a0a0f;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #8b5cf6, #ec4899);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #7c3aed, #db2777);
}

/* Responsive Typography */
@media (max-width: 768px) {
  .prose-casino p {
    @apply text-sm;
  }
}

/* Focus Styles for Accessibility */
a:focus,
button:focus,
details:focus {
  @apply outline-none ring-2 ring-casino-gold/50 ring-offset-2 ring-offset-casino-dark;
}

/* Print Styles */
@media print {
  .glass-effect {
    background: white;
    border: 1px solid #ccc;
  }

  body {
    background: white;
    color: black;
  }
}