/* Marquee Feature Strip Styling */
.feature-strip {
  background: linear-gradient(90deg, #012169 0%, #c8102e 100%);
  color: #fff;
  padding: 0.75rem 0;
  font-size: 1.15rem;
  font-weight: 600;
  border-radius: 0.75rem;
  margin: 2rem auto 0 auto;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10);
  overflow: hidden;
  max-width: 1200px;
}
.animate-marquee {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 24s linear infinite;
  min-width: 100%;
}
/* Custom animations and styling for Jackpot Spins */

/* Keyframe animations */
@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);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* Animation classes */
.animate-marquee {
  animation: marquee 20s linear infinite;
}

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

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

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

.shimmer {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  background-size: 200px 100%;
  animation: shimmer 2s infinite;
}

/* UK-themed colors and styling */
.uk-red {
  background-color: #c8102e;
}
.uk-blue {
  background-color: #012169;
}
.uk-white {
  background-color: #ffffff;
}

/* Custom button styles */
.btn-primary {
  @apply bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105;
}

.btn-secondary {
  @apply bg-blue-800 hover:bg-blue-900 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300;
}

/* Bonus badge styling */
.bonus-badge {
  @apply bg-gradient-to-r from-yellow-400 to-yellow-600 text-black font-bold p-4 rounded-xl shadow-lg transform rotate-3;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Game card styling */
.game-card {
  @apply bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105;
}

/* Trustpilot styling */
.trustpilot-card {
  @apply bg-green-50 border-l-4 border-green-500 p-6 rounded-lg;
}

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

.prose h2 {
  @apply text-2xl font-bold text-gray-900 mb-4 mt-8;
}

.prose h3 {
  @apply text-xl font-semibold text-gray-800 mb-3 mt-6;
}

.prose p {
  @apply mb-4 text-base leading-7;
}

.prose ul {
  @apply list-disc list-inside mb-4 space-y-2;
}

.prose table {
  @apply w-full border-collapse border border-gray-300 mb-6;
}

.prose th {
  @apply bg-gray-100 border border-gray-300 px-4 py-2 font-semibold text-left;
}

.prose td {
  @apply border border-gray-300 px-4 py-2;
}

/* Mobile navigation */
.mobile-menu {
  @apply fixed inset-0 bg-white z-50 transform transition-transform duration-300;
}

.mobile-menu.hidden {
  @apply translate-x-full;
}

/* Sticky navigation */
.sticky-nav {
  @apply sticky top-0 z-40 bg-white shadow-md;
}

/* Feature strip styling */
.feature-strip {
  @apply overflow-hidden whitespace-nowrap bg-blue-800 text-white py-2;
}

/* Calculator styling */
.calculator-island {
  @apply bg-white rounded-xl shadow-lg p-6 border border-gray-200;
}

/* FAQ styling */
.faq-item {
  @apply border-b border-gray-200 py-4;
}

.faq-question {
  @apply font-semibold text-gray-900 cursor-pointer flex justify-between items-center;
}

.faq-answer {
  @apply mt-2 text-gray-700 hidden;
}

.faq-answer.active {
  @apply block;
}

/* Responsive utilities */
@media (max-width: 1024px) {
  .desktop-nav {
    @apply hidden;
  }

  .mobile-nav {
    @apply block;
  }
}

@media (min-width: 1024px) {
  .desktop-nav {
    @apply block;
  }

  .mobile-nav {
    @apply hidden;
  }
}

/* Container max-width */
.container-custom {
  @apply max-w-screen-xl mx-auto px-4;
}

/* Grid responsive utilities */
.grid-games {
  @apply grid grid-cols-2 md:grid-cols-3 gap-4;
}

.grid-stats {
  @apply grid grid-cols-2 md:grid-cols-4 gap-4;
}

/* Union Jack pattern background */
.union-jack-bg {
  background-image: linear-gradient(45deg, #c8102e 25%, transparent 25%),
    linear-gradient(-45deg, #c8102e 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c8102e 75%),
    linear-gradient(-45deg, transparent 75%, #c8102e 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  opacity: 0.1;
}