/* ============================================================
   CarinaBet Casino – Custom CSS
   Stahl Luxe Theme: Graphite + Electric Blue
   ============================================================ */

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  word-break: break-word;
  background-color: #0d0f12;
  color: #e8edf5;
}

/* ============================================================
   PROSE / CONTENT STYLING
   ============================================================ */

.prose-casino {
  color: #c8d0dd;
  max-width: 100%;
  font-size: 0.97rem;
  line-height: 1.75;
}

.prose-casino h1,
.prose-casino h2,
.prose-casino h3,
.prose-casino h4,
.prose-casino h5,
.prose-casino h6 {
  color: #e8edf5;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

.prose-casino h1 { font-size: 2rem; }
.prose-casino h2 { font-size: 1.5rem; color: #00c3ff; }
.prose-casino h3 { font-size: 1.25rem; color: #4fb3ff; }

.prose-casino p {
  margin-bottom: 1em;
  color: #9aa3b2;
}

.prose-casino a {
  color: #1e90ff;
  text-decoration: underline;
  transition: color 0.2s;
}

.prose-casino a:hover {
  color: #00c3ff;
}

.prose-casino ul,
.prose-casino ol {
  margin: 0.8em 0 1em 1.4em;
  color: #9aa3b2;
}

.prose-casino ul { list-style: disc; }
.prose-casino ol { list-style: decimal; }

.prose-casino li {
  margin-bottom: 0.4em;
}

.prose-casino strong {
  color: #e8edf5;
  font-weight: 700;
}

.prose-casino blockquote {
  border-left: 3px solid #1e90ff;
  margin: 1.5em 0;
  padding: 0.8em 1.2em;
  background: rgba(30, 144, 255, 0.08);
  border-radius: 0 0.5rem 0.5rem 0;
  color: #9aa3b2;
  font-style: italic;
}

.prose-casino hr {
  border-color: #2a303c;
  margin: 2em 0;
}

.prose-casino code {
  background: #1c2028;
  color: #00c3ff;
  padding: 0.15em 0.4em;
  border-radius: 0.3rem;
  font-size: 0.875em;
}

.prose-casino pre {
  background: #1c2028;
  border: 1px solid #2a303c;
  border-radius: 0.5rem;
  padding: 1.2em;
  overflow-x: auto;
  margin: 1.5em 0;
}

.prose-casino pre code {
  background: none;
  color: #e8edf5;
  padding: 0;
}

/* Prose table scroll wrapper */
.prose-casino .prose-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin: 1.5em 0;
  border-radius: 0.5rem;
}

.prose-casino .prose-table-scroll table {
  margin-top: 0;
  margin-bottom: 0;
}

/* Prose tables */
.prose-casino table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  color: #c8d0dd;
}

.prose-casino thead {
  background: #2a303c;
  color: #00c3ff;
}

.prose-casino th,
.prose-casino td {
  padding: 0.6em 0.9em;
  border: 1px solid #2a303c;
  text-align: left;
}

.prose-casino tbody tr:nth-child(even) {
  background: rgba(28, 32, 40, 0.6);
}

/* ============================================================
   GLOBAL TABLE OVERFLOW WRAPPER
   (applied to all tables via HTML wrap requirement)
   ============================================================ */

.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Payment methods table — card layout on mobile */
@media (max-width: 767px) {
  .payment-table-wrap {
    overflow: visible;
  }

  .payment-table {
    display: block;
    width: 100%;
  }

  .payment-table thead {
    display: none;
  }

  .payment-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .payment-table tbody tr {
    display: block;
    border: 1px solid #2a303c;
    border-radius: 0.75rem;
    overflow: hidden;
  }

  .payment-table td {
    display: grid;
    grid-template-columns: minmax(7.5rem, 42%) 1fr;
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid rgba(42, 48, 60, 0.6);
  }

  .payment-table td:last-child {
    border-bottom: none;
  }

  .payment-table td::before {
    content: attr(data-label);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #00c3ff;
    line-height: 1.3;
  }

  .payment-table td[data-label="Methode"] {
    display: block;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    border-bottom: 1px solid #2a303c;
    background: rgba(42, 48, 60, 0.35);
  }

  .payment-table td[data-label="Methode"]::before {
    display: none;
  }
}

@media (min-width: 768px) {
  .payment-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .payment-table {
    min-width: 44rem;
  }
}

/* ============================================================
   NAVIGATION
   ============================================================ */

#site-header {
  will-change: transform;
}

.nav-link.active {
  color: #00c3ff;
  background: rgba(30, 144, 255, 0.1);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary {
  background: linear-gradient(135deg, #1e90ff 0%, #00c3ff 100%);
  color: #fff;
  font-weight: 700;
  border-radius: 0.75rem;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(30, 144, 255, 0.4);
}

.btn-primary:hover {
  box-shadow: 0 0 40px rgba(30, 144, 255, 0.6);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: #4fb3ff;
  border: 2px solid #1e90ff;
  font-weight: 700;
  border-radius: 0.75rem;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary:hover {
  background: rgba(30, 144, 255, 0.15);
  border-color: #4fb3ff;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.hero-section {
  position: relative;
  min-height: 100vh;
}

/* ============================================================
   GAME CARDS
   ============================================================ */

.game-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.game-card:hover {
  transform: translateY(-4px);
}

/* ============================================================
   PROVIDER WORD CLOUD
   ============================================================ */

.provider-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.provider-tag {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 0.4rem;
  background: rgba(30, 144, 255, 0.08);
  border: 1px solid rgba(30, 144, 255, 0.2);
  color: #9aa3b2;
  transition: all 0.2s ease;
  line-height: 1.4;
  word-break: keep-all;
}

.provider-tag:nth-child(3n+1) { color: #4fb3ff; border-color: rgba(79, 179, 255, 0.3); }
.provider-tag:nth-child(3n+2) { color: #00c3ff; border-color: rgba(0, 195, 255, 0.3); }
.provider-tag:nth-child(3n+3) { color: #9aa3b2; border-color: rgba(154, 163, 178, 0.2); }

.provider-tag:hover {
  background: rgba(30, 144, 255, 0.2);
  color: #e8edf5;
  transform: scale(1.05);
}

/* ============================================================
   STEP CARDS
   ============================================================ */

.step-card {
  position: relative;
}

.step-badge {
  background: linear-gradient(135deg, #1e90ff 0%, #00c3ff 100%);
  box-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */

.faq-item {
  transition: border-color 0.2s ease;
}

.faq-item:hover {
  border-color: rgba(30, 144, 255, 0.4);
}

.faq-trigger {
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
}

.faq-answer {
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MARQUEE ANIMATION
   ============================================================ */

.marquee-track {
  display: flex;
  animation: marquee-scroll 28s linear infinite;
  width: max-content;
}

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

.marquee-track:hover {
  animation-play-state: paused;
}

/* ============================================================
   PARALLAX EFFECT
   ============================================================ */

@media (min-width: 768px) {
  .parallax-bg {
    background-attachment: fixed;
  }
}

/* ============================================================
   CARD GRADIENT
   ============================================================ */

.bg-card-gradient {
  background: linear-gradient(145deg, #1c2028, #2a303c);
}

.bg-blue-glow {
  background: linear-gradient(135deg, #1e90ff 0%, #00c3ff 100%);
}

/* ============================================================
   SECTION DIVIDERS / GLOW LINES
   ============================================================ */

.glow-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #1e90ff, transparent);
  opacity: 0.5;
  width: 100%;
  margin: 0;
}

/* ============================================================
   REVIEW BLOCKS
   ============================================================ */

.review-block {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.review-block:hover {
  box-shadow: 0 0 30px rgba(30, 144, 255, 0.15);
}

/* ============================================================
   PROMO CARDS
   ============================================================ */

.promo-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.promo-card:hover {
  transform: translateY(-3px);
}

/* ============================================================
   MOBILE MENU
   ============================================================ */

#mobile-menu {
  transition: opacity 0.2s ease;
}

/* ============================================================
   SCROLLBAR STYLING (Webkit)
   ============================================================ */

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

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

::-webkit-scrollbar-thumb {
  background: #2a303c;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #1e90ff;
}

/* ============================================================
   UTILITY
   ============================================================ */

.text-shadow-blue {
  text-shadow: 0 0 20px rgba(30, 144, 255, 0.6);
}

.border-glow-blue {
  box-shadow: 0 0 0 1px rgba(30, 144, 255, 0.4);
}

/* Ensure images don't overflow their containers */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent layout shifts on load */
.aspect-\[3\/4\] {
  aspect-ratio: 3 / 4;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #1e90ff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Smooth transitions for interactive elements */
a, button {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}