/* ================================================================
   style.css — YEP Kasyno Bonusy (yepkasyno-bonusy.pl)
   Dark Theme | Polish Casino Bonus Site | Fully Responsive
   ================================================================
   TABLE OF CONTENTS:
   01. CSS Custom Properties (Variables)
   02. CSS Reset & Base
   03. Utility Classes
   04. Layout — Container
   05. Animations & Keyframes
   06. Orientation Lock Overlay
   07. Site Header & Navigation
   08. Hero Banner
   09. Breadcrumbs
   10. Intro Section
   11. Bonus Cards
   12. Bonus Comparison Table
   13. Steps Section (How To)
   14. Features Section
   15. Stats Counter Section
   16. Slots Section
   17. Payment Methods
   18. FAQ Accordion
   19. Responsible Gambling
   20. Site Footer
   21. Floating CTA Button
   22. Button Components
   23. Responsive Breakpoints (Mobile-First)
   ================================================================ */


/* ================================================================
   01. CSS CUSTOM PROPERTIES (VARIABLES)
   Dark theme palette with bright yellow as the primary accent.
   ================================================================ */
:root {
  /* --- Color Palette --- */
  --color-bg-primary:      #0a0a18;   /* Deep dark navy — main background */
  --color-bg-secondary:    #12122a;   /* Slightly lighter dark — card backgrounds */
  --color-bg-card:         #1a1a35;   /* Card/panel background */
  --color-bg-elevated:     #22224a;   /* Elevated elements (dropdowns, tooltips) */

  /* --- Yellow / Gold Accent Colors (primary brand) --- */
  --color-yellow-bright:   #FFE600;   /* Brightest yellow — headlines, highlights */
  --color-yellow-primary:  #FFD700;   /* Gold — primary CTA, main accents */
  --color-yellow-dark:     #FFC107;   /* Amber — secondary accents */
  --color-yellow-deep:     #FF9800;   /* Deep orange-yellow — gradients */
  --color-yellow-glow:     rgba(255, 215, 0, 0.35); /* Yellow glow for shadows */

  /* --- Text Colors --- */
  --color-text-primary:    #FFFFFF;   /* White — main text */
  --color-text-secondary:  #C8C8E0;   /* Light purple-gray — secondary text */
  --color-text-muted:      #8888aa;   /* Muted — footnotes, labels */
  --color-text-accent:     var(--color-yellow-primary); /* Accent text */

  /* --- Semantic Colors --- */
  --color-success:         #00E676;   /* Green — positive indicators */
  --color-danger:          #FF5252;   /* Red — warnings */
  --color-info:            #40C4FF;   /* Blue — informational */

  /* --- Border Colors --- */
  --color-border:          rgba(255, 215, 0, 0.15);  /* Subtle yellow border */
  --color-border-strong:   rgba(255, 215, 0, 0.4);   /* Strong yellow border */

  /* --- Gradients --- */
  --gradient-bg:           linear-gradient(135deg, #0a0a18 0%, #12122a 50%, #1a1035 100%);
  --gradient-yellow:       linear-gradient(135deg, #FFE600, #FFD700, #FF9800);
  --gradient-card:         linear-gradient(135deg, #1a1a35, #22224a);
  --gradient-featured:     linear-gradient(135deg, #2a1f00, #1a1a00, #2a2200);
  --gradient-hero:         linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3));

  /* --- Shadows --- */
  --shadow-sm:       0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:       0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg:       0 8px 40px rgba(0,0,0,0.8);
  --shadow-yellow:   0 4px 25px rgba(255, 215, 0, 0.4);
  --shadow-yellow-lg:0 0 40px rgba(255, 215, 0, 0.25), 0 8px 40px rgba(0,0,0,0.6);

  /* --- Typography --- */
  --font-primary:    'Segoe UI', 'Roboto', 'Arial', sans-serif;
  --font-size-xs:    0.75rem;   /* 12px */
  --font-size-sm:    0.875rem;  /* 14px */
  --font-size-base:  1rem;      /* 16px */
  --font-size-md:    1.125rem;  /* 18px */
  --font-size-lg:    1.25rem;   /* 20px */
  --font-size-xl:    1.5rem;    /* 24px */
  --font-size-2xl:   1.875rem;  /* 30px */
  --font-size-3xl:   2.25rem;   /* 36px */
  --font-size-4xl:   3rem;      /* 48px */

  /* --- Spacing --- */
  --space-xs:   0.25rem;   /* 4px */
  --space-sm:   0.5rem;    /* 8px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */
  --space-4xl:  6rem;      /* 96px */

  /* --- Border Radius --- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* --- Z-index stack --- */
  --z-base:          1;
  --z-dropdown:      100;
  --z-sticky:        200;
  --z-overlay:       300;
  --z-modal:         400;
  --z-orientation:   1000;
}


/* ================================================================
   02. CSS RESET & BASE STYLES
   Normalize cross-browser differences, set box-sizing,
   and apply the dark background globally.
   ================================================================ */

/* Universal box-sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Root HTML element */
html {
  font-size: 16px;
  scroll-behavior: smooth;          /* Smooth anchor scrolling */
  -webkit-text-size-adjust: 100%;   /* Prevent font scaling on iOS rotate */
}

/* Body — main dark theme background */
body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--gradient-bg);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Images — responsive by default */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Links — base styling */
a {
  color: var(--color-yellow-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-yellow-bright);
}
a:focus-visible {
  /* High-contrast focus outline for keyboard navigation */
  outline: 3px solid var(--color-yellow-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Lists — remove default styling where needed */
ul, ol {
  list-style: none;
}

/* Headings — yellow accent for all heading levels */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 700;
}

/* Strong text — yellow highlight */
strong {
  color: var(--color-yellow-primary);
}

/* Buttons — reset browser defaults */
button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

/* Tables — remove default borders */
table {
  border-collapse: collapse;
  width: 100%;
}


/* ================================================================
   03. UTILITY CLASSES
   ================================================================ */

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Section title — shared heading style for all sections */
.section-title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  text-align: center;
  margin-bottom: var(--space-sm);
  color: var(--color-yellow-bright);
  text-shadow: 0 0 20px rgba(255, 230, 0, 0.5);
  letter-spacing: -0.02em;
}

/* Icon inside section title */
.section-title__icon {
  margin-right: var(--space-sm);
  font-size: 1.2em;
}

/* Subtitle paragraph below section titles */
.section-subtitle {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  margin-bottom: var(--space-2xl);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}


/* ================================================================
   04. LAYOUT — CONTAINER
   Max-width wrapper, centered, with responsive padding
   ================================================================ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}


/* ================================================================
   05. ANIMATIONS & KEYFRAMES
   ================================================================ */

/* Pulse animation — used on primary CTA buttons */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: var(--shadow-yellow);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.7), 0 0 80px rgba(255, 215, 0, 0.3);
  }
}

/* Shimmer sweep — used on featured cards */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Glow pulse — for stat numbers and badges */
@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(255,215,0,0.5); }
  50%       { text-shadow: 0 0 30px rgba(255,215,0,0.9), 0 0 60px rgba(255,215,0,0.4); }
}

/* Slide down — for FAQ answers opening */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Float animation — for hero overlay block */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* Spin — for orientation lock icon */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Bounce in — step numbers */
@keyframes bounceIn {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Counting up animation — JS will control actual values */
@keyframes countUp {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ================================================================
   06. ORIENTATION LOCK OVERLAY
   Covers the screen on mobile landscape.
   JS toggles the 'active' class based on window.orientation.
   ================================================================ */
.orientation-lock {
  display: none;             /* Hidden by default */
  position: fixed;
  inset: 0;                  /* Cover entire viewport */
  z-index: var(--z-orientation);
  background: rgba(10, 10, 24, 0.97);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xl);
}

/* JS adds .active class to show the overlay */
.orientation-lock.active {
  display: flex;
}

/* Inner content block */
.orientation-lock__content {
  max-width: 300px;
}

/* Phone emoji */
.orientation-lock__phone {
  font-size: 4rem;
  margin-bottom: var(--space-md);
  animation: spin 3s linear infinite;
  display: inline-block;
}

/* Title text */
.orientation-lock__title {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-yellow-primary);
  margin-bottom: var(--space-sm);
}

/* Description text */
.orientation-lock__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  margin-bottom: var(--space-md);
}

/* Rotation arrow indicator */
.orientation-lock__arrow {
  font-size: 3rem;
  color: var(--color-yellow-primary);
  animation: pulse 1.5s ease infinite;
  display: inline-block;
}


/* ================================================================
   07. SITE HEADER & NAVIGATION
   Sticky header that shrinks on scroll (JS adds .scrolled class).
   ================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(10, 10, 24, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: padding var(--transition-base), box-shadow var(--transition-base);
  padding: var(--space-md) 0;
}

/* Compact header state — added by JS when scrolled */
.site-header.scrolled {
  padding: var(--space-sm) 0;
  box-shadow: 0 4px 30px rgba(0,0,0,0.8), 0 1px 0 rgba(255,215,0,0.1);
}

/* Flex row inside header */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Logo link */
.header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header__logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.3));
  transition: filter var(--transition-base);
}

.header__logo:hover img {
  filter: drop-shadow(0 0 16px rgba(255,215,0,0.7));
}

/* Age restriction badge */
.header__age-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: #fff;
  font-weight: 900;
  font-size: var(--font-size-xs);
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(255, 82, 82, 0.5);
  border: 2px solid rgba(255,255,255,0.2);
}

/* ---- Navigation ---- */
.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Nav links */
.main-nav__link {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.main-nav__link:hover,
.main-nav__link:focus-visible {
  color: var(--color-yellow-primary);
  background: rgba(255, 215, 0, 0.08);
}

/* CTA button in navigation */
.main-nav__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  background: var(--gradient-yellow);
  color: #000 !important;
  font-weight: 800;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: var(--shadow-yellow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.main-nav__cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(255,215,0,0.6);
}

/* ---- Hamburger button (mobile) ---- */
.hamburger {
  display: none;           /* Hidden on desktop */
  flex-direction: column;
  gap: 5px;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  z-index: var(--z-overlay);
}

.hamburger:hover {
  background: rgba(255,215,0,0.1);
}

/* Three lines of hamburger icon */
.hamburger__line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-yellow-primary);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* X shape when menu is open — JS adds .open class */
.hamburger.open .hamburger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open .hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.open .hamburger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ================================================================
   08. HERO BANNER
   Full-width banner with semi-transparent CTA overlay centered.
   Desktop uses banner.png; mobile uses banner-mobile.png (via <picture>).
   ================================================================ */
.hero-banner {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Banner image — covers full container */
.hero-banner__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Dark gradient overlay on top of image (for legibility) */
.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.4)  50%,
    rgba(0,0,0,0.55) 100%
  );
  z-index: 1;
}

/* Overlay wrapper — positions CTA block at center */
.hero-banner__overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-md);
  min-height: 400px;
}

/* Semi-transparent CTA block — centered on desktop and mobile */
.hero-banner__cta-block {
  background: rgba(10, 8, 30, 0.82);
  backdrop-filter: blur(16px);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-md) var(--space-xl);   /* halved vertical padding */
  text-align: center;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 0 60px rgba(255,215,0,0.2), var(--shadow-lg);
  animation: float 4s ease-in-out infinite;
}

/* "EXCLUSIVE OFFER" badge above title */
.hero-banner__badge {
  display: inline-block;
  background: var(--gradient-yellow);
  color: #000;
  font-weight: 900;
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px var(--space-sm);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-xs);  /* reduced */
  box-shadow: var(--shadow-yellow);
}

/* Main headline on banner */
.hero-banner__title {
  font-size: var(--font-size-2xl);   /* reduced from 4xl → 2xl */
  font-weight: 900;
  color: var(--color-yellow-bright);
  text-shadow: 0 0 30px rgba(255,230,0,0.8), 0 2px 10px rgba(0,0,0,0.5);
  margin-bottom: var(--space-xs);    /* reduced */
  animation: glowPulse 3s ease infinite;
}

/* Subtitle text */
.hero-banner__subtitle {
  font-size: var(--font-size-base);  /* reduced from lg → base */
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);    /* reduced */
  line-height: 1.3;
}

/* Feature list (checkmarks) */
.hero-banner__features {
  display: flex;
  flex-direction: column;
  gap: 2px;                          /* tighter gap */
  margin-bottom: var(--space-sm);    /* reduced */
  text-align: left;
  padding: 0 var(--space-sm);
}

.hero-banner__features li {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);    /* reduced from sm → xs */
  font-weight: 500;
}

/* Disclaimer text */
.hero-banner__disclaimer {
  margin-top: var(--space-xs);       /* reduced */
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  opacity: 0.8;
}

/* CTA button inside banner — compact size to fit halved block */
.hero-banner__cta-block .btn--large {
  padding: var(--space-sm) var(--space-xl);
  font-size: var(--font-size-base);
}


/* ================================================================
   09. BREADCRUMBS
   Navigation trail with schema microdata support.
   ================================================================ */
.breadcrumbs {
  padding: var(--space-lg) 0 var(--space-sm);
}

/* Ordered list displayed as a flex row */
.breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
}

/* Individual breadcrumb link */
.breadcrumbs__link {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.breadcrumbs__link:hover {
  color: var(--color-yellow-primary);
  background: rgba(255,215,0,0.06);
}

/* Separator between crumbs */
.breadcrumbs__separator {
  color: var(--color-text-muted);
  opacity: 0.5;
}

/* Active / current page crumb — no link */
.breadcrumbs__item--current span {
  color: var(--color-yellow-primary);
  font-weight: 600;
  padding: var(--space-xs) var(--space-sm);
}


/* ================================================================
   10. INTRO SECTION
   H1 heading + descriptive text + casino rating
   ================================================================ */
.intro-section {
  padding: var(--space-xl) 0 var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xl);
  align-items: start;
}

/* Main H1 title */
.intro-section__title {
  font-size: var(--font-size-3xl);
  font-weight: 900;
  color: var(--color-yellow-bright);
  margin-bottom: var(--space-md);
  text-shadow: 0 0 25px rgba(255,230,0,0.4);
}

/* Lead paragraph */
.intro-section__lead {
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  line-height: 1.7;
}

/* Body text */
.intro-section__text {
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Casino rating block — right side */
.casino-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  background: var(--gradient-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  min-width: 220px;
  text-align: center;
  box-shadow: var(--shadow-yellow-lg);
}

.casino-rating__stars {
  font-size: 1.5rem;
  letter-spacing: 2px;
  animation: glowPulse 3s ease infinite;
}

/* Numeric score */
.casino-rating__score {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  color: var(--color-yellow-bright);
}

/* Review count */
.casino-rating__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}


/* ================================================================
   11. BONUS CARDS
   4-column grid of visual bonus cards with hover effects.
   Featured card has special highlighted styling.
   ================================================================ */
.bonus-cards {
  padding: var(--space-2xl) 0;
}

/* Responsive grid — 4 columns on desktop */
.bonus-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

/* Individual bonus card */
.bonus-card {
  position: relative;
  background: var(--gradient-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  overflow: hidden;
}

/* Glowing top border accent */
.bonus-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--gradient-yellow);
  border-radius: 2px;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.bonus-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-yellow-lg);
}

.bonus-card:hover::before {
  opacity: 1;
}

/* Featured card — golden glow variant */
.bonus-card--featured {
  background: var(--gradient-featured);
  border-color: var(--color-yellow-primary);
  box-shadow: var(--shadow-yellow-lg);
}

.bonus-card--featured::before {
  opacity: 1;
}

/* "BEST" ribbon on featured card */
.bonus-card__ribbon {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: var(--gradient-yellow);
  color: #000;
  font-size: var(--font-size-xs);
  font-weight: 900;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-yellow);
  animation: glowPulse 2.5s ease infinite;
}

/* Large emoji icon */
.bonus-card__icon {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255,215,0,0.5));
}

/* Card title */
.bonus-card__title {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-text-primary);
}

/* Main bonus amount — large number + unit */
.bonus-card__amount {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  color: var(--color-yellow-bright);
  text-shadow: 0 0 15px rgba(255,230,0,0.5);
  line-height: 1.1;
}

.bonus-card__amount span {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-yellow-dark);
}

/* Free spins subtitle */
.bonus-card__spins {
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-yellow-dark);
}

/* Detail list inside card */
.bonus-card__details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
}

.bonus-card__details li {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
}

.detail-label {
  color: var(--color-text-muted);
}

.detail-value {
  color: var(--color-text-primary);
  font-weight: 600;
}


/* ================================================================
   12. BONUS COMPARISON TABLE
   Mobile: horizontal scroll wrapper. Extra small screens: card layout.
   ================================================================ */
.bonus-table-section {
  padding: var(--space-2xl) 0;
}

/* Horizontal scroll wrapper — prevents table overflow on mobile */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  /* Subtle scroll indicator on right */
  background: linear-gradient(to right, var(--color-bg-card) 80%, rgba(255,215,0,0.03));
}

/* Main table element */
.bonus-table {
  min-width: 700px; /* Force horizontal scroll on small screens */
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Table header */
.bonus-table thead tr {
  background: linear-gradient(90deg, #1a1a00, #2a2200, #1a1a00);
  border-bottom: 2px solid var(--color-yellow-primary);
}

.bonus-table thead th {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: 800;
  color: var(--color-yellow-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Table body rows */
.bonus-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.bonus-table tbody tr:hover {
  background: rgba(255, 215, 0, 0.04);
}

.bonus-table tbody tr:last-child {
  border-bottom: none;
}

/* Table cells */
.bonus-table td {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  vertical-align: middle;
  white-space: nowrap;
}

/* Featured row — golden highlight */
.bonus-table__row--featured td {
  background: rgba(255, 215, 0, 0.04);
}

/* TOP badge in table */
.table-badge {
  display: inline-block;
  background: var(--gradient-yellow);
  color: #000;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-right: var(--space-xs);
  vertical-align: middle;
}

/* Highlighted amount text */
.table-highlight {
  color: var(--color-yellow-primary);
  font-weight: 700;
}

/* Free spins badge */
.spins-badge {
  display: inline-block;
  background: rgba(0, 230, 118, 0.15);
  border: 1px solid rgba(0, 230, 118, 0.3);
  color: var(--color-success);
  font-weight: 700;
  font-size: var(--font-size-xs);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

/* Table footnote */
.table-footnote {
  margin-top: var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}


/* ================================================================
   13. STEPS SECTION (HOW TO CLAIM)
   3 steps with numbers, icons, connecting arrows.
   ================================================================ */
.steps-section {
  padding: var(--space-2xl) 0;
}

/* Grid: 3 cards + 2 connectors */
.steps-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Individual step card */
.step-card {
  background: var(--gradient-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  flex: 1;
  min-width: 200px;
  max-width: 260px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
}

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-yellow);
  border-color: var(--color-border-strong);
}

/* Step number circle */
.step-card__number {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--gradient-yellow);
  color: #000;
  font-size: var(--font-size-xl);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  box-shadow: var(--shadow-yellow);
  animation: bounceIn 0.5s ease;
}

/* Step icon */
.step-card__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
}

/* Step title */
.step-card__title {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-yellow-primary);
  margin-bottom: var(--space-sm);
}

/* Step description */
.step-card__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* Arrow connector between steps */
.steps-connector {
  font-size: 2rem;
  color: var(--color-yellow-primary);
  font-weight: 900;
  opacity: 0.6;
  flex-shrink: 0;
}

/* CTA below steps */
.steps-section__cta {
  text-align: center;
  margin-top: var(--space-2xl);
}


/* ================================================================
   14. FEATURES SECTION (WHY YEP CASINO)
   6-card grid highlighting casino advantages.
   ================================================================ */
.features-section {
  padding: var(--space-2xl) 0;
}

/* 3-column grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* Feature card */
.feature-card {
  background: var(--gradient-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  overflow: hidden;
}

/* Hover accent line at top */
.feature-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-yellow);
  transform: scaleX(0);
  transition: transform var(--transition-base);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-yellow);
}

.feature-card:hover::after {
  transform: scaleX(1);
}

/* Feature icon */
.feature-card__icon {
  font-size: 2.8rem;
  margin-bottom: var(--space-md);
  display: block;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.4));
}

/* Feature title */
.feature-card__title {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-yellow-primary);
  margin-bottom: var(--space-sm);
}

/* Feature description */
.feature-card__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}


/* ================================================================
   15. STATS COUNTER SECTION
   4 animated number counters that count up when in viewport.
   Numbers are animated by IntersectionObserver in script.js.
   ================================================================ */
.stats-section {
  padding: var(--space-2xl) 0;
  margin: var(--space-2xl) 0;
}

/* Highlight band background */
.stats-section {
  background: linear-gradient(135deg, #1a1500, #0d0d00, #1a1500);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-md);
  box-shadow: 0 0 60px rgba(255,215,0,0.08);
}

/* Grid of 4 stat items */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  text-align: center;
}

/* Individual stat item */
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

/* The large counter number */
.stat-item__number {
  font-size: var(--font-size-4xl);
  font-weight: 900;
  color: var(--color-yellow-bright);
  text-shadow: 0 0 30px rgba(255,230,0,0.7);
  line-height: 1;
  animation: glowPulse 3s ease infinite;
  display: inline-block;
}

/* Suffix after number ("+", "FS", "h", "PLN") */
.stat-item__suffix {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-yellow-dark);
  margin-top: -var(--space-xs);
}

/* Label below number */
.stat-item__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ================================================================
   16. SLOTS SECTION
   Responsive grid of slot game cards.
   Each card reveals a "Play" overlay on hover.
   ================================================================ */
.slots-section {
  padding: var(--space-2xl) 0;
}

/* 4-column grid — adapts to 2 on mobile */
.slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

/* Slot card wrapper */
.slot-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.slot-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-yellow-lg);
}

/* Link wraps entire card */
.slot-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Image wrapper — needed for overlay */
.slot-card__image-wrapper {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Slot thumbnail image */
.slot-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.slot-card:hover .slot-card__image {
  transform: scale(1.1);
}

/* Hover overlay with play button */
.slot-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.slot-card:hover .slot-card__overlay {
  opacity: 1;
}

/* Play button inside overlay */
.slot-card__play-btn {
  background: var(--gradient-yellow);
  color: #000;
  font-weight: 900;
  font-size: var(--font-size-base);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-yellow);
  transform: scale(0.9);
  transition: transform var(--transition-fast);
}

.slot-card:hover .slot-card__play-btn {
  transform: scale(1);
}

/* Info block below slot image */
.slot-card__info {
  padding: var(--space-sm) var(--space-md);
}

/* Slot title */
.slot-card__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* RTP indicator */
.slot-card__rtp {
  font-size: var(--font-size-xs);
  color: var(--color-success);
  font-weight: 600;
}

/* "View all" CTA below slots grid */
.slots-section__cta {
  text-align: center;
}


/* ================================================================
   17. PAYMENT METHODS
   Responsive grid of payment provider logos.
   ================================================================ */
.payments-section {
  padding: var(--space-2xl) 0;
}

/* Grid: 4-8 columns depending on screen */
.payments-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-md);
}

/* Individual payment item */
.payment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-sm);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: default;
}

.payment-item:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-yellow);
}

/* Payment logo image */
.payment-item img {
  width: 60px;
  height: 36px;
  object-fit: contain;
  filter: brightness(0.85) saturate(0.9);
  transition: filter var(--transition-fast);
}

.payment-item:hover img {
  filter: brightness(1) saturate(1);
}

/* Payment method name */
.payment-item span {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}


/* ================================================================
   18. FAQ ACCORDION
   Each item has a toggle button + collapsible answer panel.
   JS handles aria-expanded and hidden attribute toggling.
   ================================================================ */
.faq-section {
  padding: var(--space-2xl) 0;
}

/* FAQ list wrapper */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 860px;
  margin: 0 auto;
}

/* FAQ item card */
.faq-item {
  background: var(--gradient-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-item:hover {
  border-color: var(--color-border-strong);
}

/* Open state — highlighted */
.faq-item.open {
  border-color: var(--color-yellow-primary);
  box-shadow: 0 0 20px rgba(255,215,0,0.1);
}

/* Question button — full-width clickable toggle */
.faq-item__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text-primary);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.faq-item__question:hover {
  color: var(--color-yellow-primary);
  background: rgba(255,215,0,0.04);
}

/* +/- toggle icon */
.faq-item__icon {
  font-size: var(--font-size-xl);
  font-weight: 300;
  color: var(--color-yellow-primary);
  flex-shrink: 0;
  transition: transform var(--transition-base);
  line-height: 1;
}

/* Rotate icon when expanded */
.faq-item.open .faq-item__icon {
  transform: rotate(45deg);
}

/* Answer content — hidden by default (HTML hidden attr) */
.faq-item__answer {
  padding: 0 var(--space-xl) var(--space-lg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.7;
  animation: slideDown var(--transition-base) ease;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

/* Remove hidden attribute display via CSS when JS removes it */
.faq-item__answer:not([hidden]) {
  display: block;
}


/* ================================================================
   19. RESPONSIBLE GAMBLING SECTION
   Mandatory disclaimer with warning styling.
   ================================================================ */
.responsible-gambling {
  padding: var(--space-2xl) 0;
  margin: var(--space-lg) 0;
}

/* Inner block with amber/orange warning tone */
.responsible-gambling__inner {
  background: linear-gradient(135deg, rgba(255,152,0,0.06), rgba(10,10,24,0.9));
  border: 1px solid rgba(255, 152, 0, 0.25);
  border-left: 4px solid #FF9800;
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
}

/* Warning title */
.responsible-gambling__title {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: #FF9800;
  margin-bottom: var(--space-md);
}

/* Warning text */
.responsible-gambling__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Organisation links row */
.responsible-gambling__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* Individual RG link */
.rg-link {
  color: var(--color-info);
  font-weight: 600;
  font-size: var(--font-size-sm);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid rgba(64, 196, 255, 0.3);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.rg-link:hover {
  background: rgba(64, 196, 255, 0.1);
  border-color: var(--color-info);
  color: var(--color-info);
}

/* Badge row */
.responsible-gambling__badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Individual badge pill */
.rg-badge {
  display: inline-block;
  background: rgba(255, 152, 0, 0.12);
  border: 1px solid rgba(255, 152, 0, 0.3);
  color: #FF9800;
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}


/* ================================================================
   20. SITE FOOTER
   4-column grid on desktop, stacked on mobile.
   ================================================================ */
.site-footer {
  background: #060612;
  border-top: 1px solid var(--color-border);
  padding: var(--space-3xl) 0 var(--space-xl);
  margin-top: var(--space-2xl);
}

/* 4-column footer grid */
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

/* About column */
.footer__about-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin-top: var(--space-md);
}

.footer__geo {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin-top: var(--space-sm);
}

/* Footer logo */
.footer__logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}

.footer__logo:hover {
  opacity: 1;
}

/* Column heading */
.footer__col-title {
  font-size: var(--font-size-sm);
  font-weight: 800;
  color: var(--color-yellow-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-md);
}

/* Footer nav list */
.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__link {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
  display: inline-block;
}

.footer__link:hover {
  color: var(--color-yellow-primary);
  padding-left: var(--space-xs);
}

/* Footer CTA column */
.footer__cta-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-md);
}

/* Footer disclaimer */
.footer__disclaimer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-xl);
  text-align: center;
}

.footer__disclaimer p {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Copyright line */
.footer__copyright {
  color: rgba(136, 136, 170, 0.6) !important;
  font-size: 0.7rem !important;
}


/* ================================================================
   21. FLOATING CTA BUTTON
   Fixed bottom-right button. Appears after scrolling 300px.
   JS toggles .visible class based on scroll position.
   ================================================================ */
.floating-cta {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  z-index: var(--z-modal);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

/* Visible state — added by JS */
.floating-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Button itself */
.floating-cta__btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--gradient-yellow);
  color: #000 !important;
  font-weight: 900;
  font-size: var(--font-size-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-yellow-lg);
  white-space: nowrap;
  animation: pulse 2.5s ease infinite;
  text-decoration: none;
}

.floating-cta__btn:hover {
  transform: scale(1.05);
  animation: none;
  box-shadow: 0 0 50px rgba(255,215,0,0.7);
}


/* ================================================================
   22. BUTTON COMPONENTS
   Reusable button variants used across all sections.
   ================================================================ */

/* Base button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  font-family: inherit;
  font-weight: 800;
  font-size: var(--font-size-base);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
  border: none;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 3px solid var(--color-yellow-bright);
  outline-offset: 3px;
}

/* Primary — yellow/gold filled button */
.btn--primary {
  background: var(--gradient-yellow);
  color: #000 !important;
  box-shadow: var(--shadow-yellow);
}

.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 35px rgba(255,215,0,0.6);
  filter: brightness(1.05);
  color: #000;
}

/* Secondary — outlined yellow button */
.btn--secondary {
  background: transparent;
  color: var(--color-yellow-primary) !important;
  border: 2px solid var(--color-yellow-primary);
  box-shadow: inset 0 0 0 0 var(--color-yellow-primary);
}

.btn--secondary:hover {
  background: rgba(255,215,0,0.1);
  transform: translateY(-3px);
  box-shadow: var(--shadow-yellow);
  color: var(--color-yellow-bright);
}

/* Large size modifier */
.btn--large {
  padding: var(--space-md) var(--space-2xl);
  font-size: var(--font-size-lg);
}

/* Full width modifier */
.btn--full {
  width: 100%;
}

/* Table cell button — compact */
.btn--table {
  background: var(--gradient-yellow);
  color: #000 !important;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 900;
  box-shadow: var(--shadow-yellow);
  white-space: nowrap;
  transition: transform var(--transition-fast);
}

.btn--table:hover {
  transform: scale(1.05);
  color: #000;
}

/* Pulse animation modifier — for primary CTA buttons */
.btn--pulse {
  animation: pulse 2.5s ease-in-out infinite;
}

.btn--pulse:hover {
  animation: none;
}


/* ================================================================
   23-A. INFO TABLE (Casino overview table above article)
   ================================================================ */
.info-table-section {
  padding: var(--space-xl) 0 var(--space-2xl);
}

/* Make the two-column info table more compact */
.info-table thead th { width: 50%; }
.info-table td       { white-space: normal; }


/* ================================================================
   23-B. CONTENT ARTICLE
   Full SEO long-form article with casino details.
   Uses a max-width column for readability.
   ================================================================ */
.content-article {
  padding: var(--space-xl) 0;
}

/* Individual section within the article */
.ca-section {
  background: var(--gradient-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-2xl);
  margin-bottom: var(--space-xl);
  position: relative;
  overflow: hidden;
}

/* Subtle yellow left border accent */
.ca-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gradient-yellow);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* Body text inside article */
.ca-section p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.ca-section p:last-child {
  margin-bottom: 0;
}

/* H2 heading inside article */
.ca-h2 {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  color: var(--color-yellow-bright);
  margin-bottom: var(--space-lg);
  text-shadow: 0 0 15px rgba(255,230,0,0.3);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

/* H3 heading inside article */
.ca-h3 {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-yellow-dark);
  margin: var(--space-xl) 0 var(--space-md);
}

/* H3 used as card title (no top margin) */
.ca-h3--card {
  margin-top: var(--space-sm);
}

/* H4 heading */
.ca-h4 {
  font-size: var(--font-size-base);
  font-weight: 800;
  color: var(--color-yellow-primary);
  margin-bottom: var(--space-sm);
}

/* Ordered list */
.ca-ol {
  list-style: none;
  counter-reset: ca-counter;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

.ca-ol li {
  counter-increment: ca-counter;
  display: flex;
  gap: var(--space-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.7;
  align-items: flex-start;
}

/* Number circle */
.ca-ol li::before {
  content: counter(ca-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--gradient-yellow);
  color: #000;
  font-weight: 900;
  font-size: var(--font-size-xs);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Compact ordered list */
.ca-ol--compact li {
  font-size: var(--font-size-sm);
}
.ca-ol--compact li::before {
  min-width: 22px;
  height: 22px;
  font-size: 0.65rem;
}

/* Unordered list */
.ca-ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

.ca-ul li {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.7;
  padding-left: var(--space-sm);
  border-left: 2px solid rgba(255,215,0,0.2);
  transition: border-color var(--transition-fast);
}

.ca-ul li:hover {
  border-left-color: var(--color-yellow-primary);
  color: var(--color-text-primary);
}

/* Highlighted list with yellow bullets */
.ca-ul--highlight li {
  background: rgba(255,215,0,0.05);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-yellow-primary);
  font-size: var(--font-size-md);
  font-weight: 600;
}

/* Checkmark list */
.ca-ul--checkmarks li::before {
  content: '✅ ';
}
.ca-ul--checkmarks li {
  border-left: none;
  padding-left: 0;
}

/* Highlighted info box (e.g. wagering conditions) */
.ca-highlight-box {
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-lg) 0;
}

.ca-highlight-box .ca-ul {
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

/* Promo code box */
.ca-code-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  background: linear-gradient(135deg, #1a1500, #2a2200);
  border: 2px dashed var(--color-yellow-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin: var(--space-lg) 0;
  text-align: center;
  box-shadow: 0 0 30px rgba(255,215,0,0.1);
}

.ca-code-box__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* The actual promo code — large, yellow, monospace */
.ca-code-box__code {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--font-size-3xl);
  font-weight: 900;
  color: var(--color-yellow-bright);
  letter-spacing: 0.15em;
  text-shadow: 0 0 20px rgba(255,230,0,0.7);
  animation: glowPulse 2.5s ease infinite;
  background: rgba(255,230,0,0.08);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,215,0,0.3);
}

.ca-code-box__value {
  color: var(--color-success);
  font-weight: 700;
  font-size: var(--font-size-lg);
}

/* Inline CTA (centered button row) */
.ca-cta-inline {
  text-align: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

/* Games category grid — 2×2 */
.ca-games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

/* Individual game category card */
.ca-game-cat {
  background: rgba(255, 215, 0, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ca-game-cat:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-yellow);
}

/* Category icon */
.ca-game-cat__icon {
  font-size: 2.2rem;
  margin-bottom: var(--space-sm);
}

/* Small example game names */
.ca-game-examples {
  font-size: var(--font-size-xs) !important;
  color: var(--color-text-muted) !important;
  margin-top: var(--space-xs) !important;
  font-style: italic;
}

/* Mobile app cards — 2-column */
.ca-app-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.ca-app-card {
  background: rgba(255, 215, 0, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.ca-app-card__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
}

/* Security / trust badges row */
.ca-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.ca-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid var(--color-border-strong);
  color: var(--color-yellow-primary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
}


/* ================================================================
   23. RESPONSIVE BREAKPOINTS
   Mobile-first approach. Largest → smallest.
   ================================================================ */

/* ---- Large Desktop (1200px+) — default styles above apply ---- */

/* ---- Medium Desktop / Tablet (max 1024px) ---- */
@media (max-width: 1024px) {

  /* Reduce font sizes */
  .hero-banner__title    { font-size: var(--font-size-3xl); }
  .intro-section__title  { font-size: var(--font-size-2xl); }
  .section-title         { font-size: var(--font-size-xl); }
  .stat-item__number     { font-size: var(--font-size-3xl); }

  /* Intro: stack vertically */
  .intro-section {
    grid-template-columns: 1fr;
  }
  .casino-rating {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Bonus cards: 2 columns */
  .bonus-cards__grid { grid-template-columns: repeat(2, 1fr); }

  /* Features: 2 columns */
  .features-grid { grid-template-columns: repeat(2, 1fr); }

  /* Slots: 3 columns */
  .slots-grid { grid-template-columns: repeat(3, 1fr); }

  /* Stats: 2 columns */
  .stats-grid { grid-template-columns: repeat(2, 2fr); }

  /* Payments: 4 columns */
  .payments-grid { grid-template-columns: repeat(4, 1fr); }

  /* Footer: 2 columns */
  .footer__grid { grid-template-columns: 1fr 1fr; }

}

/* ---- Tablet (max 768px) ---- */
@media (max-width: 768px) {

  /* Show hamburger, hide full nav */
  .hamburger { display: flex; }

  /* Nav hidden by default on mobile, shown when .open */
  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 85vw);
    height: 100dvh;
    background: rgba(10, 10, 24, 0.98);
    backdrop-filter: blur(20px);
    border-left: 1px solid var(--color-border-strong);
    padding: 80px var(--space-xl) var(--space-xl);
    transition: right var(--transition-slow);
    z-index: var(--z-overlay);
    overflow-y: auto;
  }

  /* Open state — JS adds .open to both hamburger and nav */
  .main-nav.open {
    right: 0;
    box-shadow: -10px 0 40px rgba(0,0,0,0.8);
  }

  /* Vertical nav list on mobile */
  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
  }

  .main-nav__link {
    font-size: var(--font-size-base);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-bottom: 1px solid var(--color-border);
  }

  .main-nav__cta-btn {
    justify-content: center;
    margin-top: var(--space-md);
    padding: var(--space-md);
    font-size: var(--font-size-base);
  }

  /* Hero banner */
  .hero-banner        { min-height: 520px; }
  .hero-banner__title { font-size: var(--font-size-2xl); }
  .hero-banner__cta-block {
    padding: var(--space-sm) var(--space-md);
    max-width: 340px;
    animation: none; /* Disable float on mobile for perf */
  }
  .hero-banner__features {
    padding: 0;
  }

  /* Bonus cards: 1 column on mobile */
  .bonus-cards__grid { grid-template-columns: 1fr; }

  /* Steps: stack vertically */
  .steps-grid { flex-direction: column; align-items: center; }
  .steps-connector { transform: rotate(90deg); }

  /* Features: 1 column on mobile */
  .features-grid { grid-template-columns: 1fr; }

  /* Stats: 2 columns */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Slots: 2 columns on tablet */
  .slots-grid { grid-template-columns: repeat(2, 1fr); }

  /* Payments: 3 columns */
  .payments-grid { grid-template-columns: repeat(3, 1fr); }

  /* Footer: stacked */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Floating CTA: smaller on mobile */
  .floating-cta {
    bottom: var(--space-md);
    right: var(--space-md);
  }

  .floating-cta__btn {
    font-size: var(--font-size-xs);
    padding: var(--space-sm) var(--space-md);
  }

  /* Content article: reduce padding on tablet */
  .ca-section { padding: var(--space-xl) var(--space-lg); }
  .ca-games-grid  { grid-template-columns: 1fr; }
  .ca-app-cards   { grid-template-columns: 1fr; }

  /* Table: enable card-layout on mobile via data-label */
  .bonus-table,
  .bonus-table thead,
  .bonus-table tbody,
  .bonus-table th,
  .bonus-table td,
  .bonus-table tr {
    display: block;
  }

  /* Hide table header on very small screens */
  .bonus-table thead {
    position: absolute;
    top: -9999px;
    left: -9999px;
    visibility: hidden;
  }

  /* Row becomes a card */
  .bonus-table__row {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    padding: var(--space-md);
  }

  .bonus-table__row--featured {
    border-color: var(--color-yellow-primary);
  }

  /* Each cell gets a label from data-label attribute */
  .bonus-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
    white-space: normal;
    font-size: var(--font-size-sm);
  }

  .bonus-table td:last-child {
    border-bottom: none;
    padding-top: var(--space-sm);
    justify-content: center;
  }

  /* Label generated from data-label */
  .bonus-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--color-yellow-dark);
    min-width: 120px;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Table wrapper: remove min-width so it's not needed */
  .bonus-table { min-width: unset; }

}

/* ---- Small Mobile (max 480px) ---- */
@media (max-width: 480px) {

  /* Tighten container padding */
  .container { padding: 0 var(--space-sm); }

  /* Hero title */
  .hero-banner__title     { font-size: var(--font-size-xl); }
  .hero-banner__subtitle  { font-size: var(--font-size-base); }

  /* Section titles */
  .section-title    { font-size: var(--font-size-lg); }
  .section-subtitle { font-size: var(--font-size-sm); }

  /* Slots: 2 columns on small mobile */
  .slots-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }

  /* Payments: 3 columns */
  .payments-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }

  /* Stats: 2×2 grid */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }

  /* Bonus cards: single column */
  .bonus-cards__grid { grid-template-columns: 1fr; }

  /* Buttons */
  .btn--large { font-size: var(--font-size-base); padding: var(--space-md) var(--space-xl); }

  /* Header logo height */
  .header__logo img { height: 36px; }

  /* Banner CTA block */
  .hero-banner__cta-block { padding: var(--space-lg) var(--space-sm); }
  .hero-banner__features  { padding: 0; }

  /* Content article: full-width narrow mobile */
  .ca-section { padding: var(--space-lg) var(--space-md); }
  .ca-h2 { font-size: var(--font-size-xl); }
  .ca-code-box__code { font-size: var(--font-size-xl); }
  .ca-badges { justify-content: center; }

  /* Step card full width */
  .step-card { min-width: unset; max-width: 100%; width: 100%; }

  /* FAQ */
  .faq-item__question { padding: var(--space-md); font-size: var(--font-size-base); }
  .faq-item__answer   { padding: var(--space-md); }

}

/* ---- Orientation: Mobile Landscape detection ----
   The actual overlay is controlled by JS, but also add
   CSS-level hint styles for landscape on narrow screens.
   ================================================================ */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {
  /* The JS-driven overlay (#orientationLock) will activate.
     Ensure body doesn't scroll behind it. */
  body.orientation-locked {
    overflow: hidden;
  }
}