/* =============================================
   WINNITA CASINO — LIGHT THEME STYLESHEET
   =============================================

   TABLE OF CONTENTS:
   1.  CSS Custom Properties (Theme Variables)
   2.  Reset & Base Styles
   3.  Typography (headings, body text)
   4.  Layout — Container
   5.  Header Component (#ffffff background)
   6.  Navigation Component
   7.  Hamburger Menu (mobile toggle)
   8.  Breadcrumbs Component (Schema.org)
   9.  Banner Section (hero with background images)
   10. CTA Button Component (all link to /go/)
   11. Slots Grid Section (6 per row, rounded)
   12. Main Content / Article
   13. Tables — Responsive (horizontal scroll on mobile)
   14. Banner-Text Block (text divider with CTA)
   15. Mobile Screenshots Section
   16. Footer Component (#1a3272 background)
   17. Payment Logos (footer)
   18. Media Queries — Tablet (max 1024px)
   19. Media Queries — Mobile (max 768px)
   20. Media Queries — Small Mobile (max 480px)
   ============================================= */

/* ─────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
   Light theme color palette and design tokens
   ───────────────────────────────────────────── */
:root {
  /* Theme Colors */
  --color-header:    #ffffff;         /* Header background — light theme */
  --color-footer:    #1a3272;         /* Footer background — dark brand blue */
  --color-bg:        #ffffff;         /* Page background — white */
  --color-primary:   #1a3272;         /* Primary brand blue */
  --color-accent:    #1fa94c;         /* CTA accent — green */
  --color-text:      #333333;         /* Main body text */
  --color-muted:     #666666;         /* Secondary / caption text */
  --color-border:    #e0e0e0;         /* Borders and dividers */
  --color-surface:   #f4f6f9;         /* Light background for sections */

  /* Shadows */
  --shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:       0 4px 20px rgba(0, 0, 0, 0.12);

  /* Border radius tokens */
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       20px;

  /* Transition speed */
  --transition:      0.3s ease;
}

/* ─────────────────────────────────────────────
   2. RESET & BASE STYLES
   Normalize defaults and prevent overflow issues
   ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Prevent horizontal overflow on mobile — critical for mobile layout lock */
  overflow-x: hidden;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  /* Prevent text scaling on iOS orientation change */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden;
  width: 100%;
}

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

/* Links inherit primary color */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-accent);
}

/* ─────────────────────────────────────────────
   3. TYPOGRAPHY
   Heading hierarchy supports SEO and readability.
   clamp() ensures responsive font sizing.
   ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
  line-height: 1.3;
  font-weight: 700;
}

/* H1 — main page title, largest */
h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); margin-bottom: 1.2rem; }

/* H2 — section headings */
h2 { font-size: clamp(1.3rem, 3vw, 2rem); margin: 2.5rem 0 1rem; }

/* H3 — subsection headings */
h3 { font-size: clamp(1.1rem, 2.5vw, 1.45rem); margin: 1.8rem 0 0.8rem; }

/* Paragraph spacing */
p { margin-bottom: 1rem; }

/* Lists in content */
ul, ol { list-style: none; }

/* ─────────────────────────────────────────────
   4. LAYOUT — CONTAINER
   Centered max-width wrapper with side padding
   ───────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ─────────────────────────────────────────────
   5. HEADER COMPONENT
   Sticky white header — background: #ffffff
   Stays visible as user scrolls
   ───────────────────────────────────────────── */
.site-header {
  background-color: var(--color-header); /* #ffffff — light theme */
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 12px 0;
  transition: box-shadow var(--transition);
}

/* Enhanced shadow when page is scrolled */
.site-header.scrolled {
  box-shadow: var(--shadow-md);
}

/* Flex row: logo left, nav right */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo link */
.header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.header-logo img {
  height: 52px;
  width: auto;
}

/* ─────────────────────────────────────────────
   6. NAVIGATION COMPONENT
   Horizontal nav links in the header
   ───────────────────────────────────────────── */
.main-nav ul {
  display: flex;
  gap: 4px;
  list-style: none;
  align-items: center;
  flex-wrap: wrap;
}

.main-nav a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-primary);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a:focus {
  background: var(--color-primary);
  color: #fff;
  outline: none;
}

/* CTA link in nav — gold accent */
.nav-cta {
  background: var(--color-accent) !important;
  color: #fff !important;
}

.nav-cta:hover {
  background: #178a3d !important;
}

/* ─────────────────────────────────────────────
   7. HAMBURGER MENU
   Visible only on mobile — toggles nav open/close
   ───────────────────────────────────────────── */
.menu-toggle {
  display: none;                     /* Hidden on desktop */
  background: none;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  color: var(--color-primary);
  font-size: 1.2rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────────────────────────
   8. BREADCRUMBS COMPONENT
   Schema.org BreadcrumbList markup for SEO
   ───────────────────────────────────────────── */
.breadcrumbs {
  background: var(--color-surface);
  padding: 10px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  align-items: center;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Chevron separator between items */
.breadcrumbs li:not(:last-child)::after {
  content: "›";
  color: var(--color-muted);
  font-size: 1.1rem;
  line-height: 1;
}

.breadcrumbs a {
  color: var(--color-primary);
  font-weight: 500;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* Current page — last item, not a link */
.breadcrumbs li:last-child span {
  color: var(--color-text);
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   9. BANNER SECTION
   Full-width hero banner with background images.
   Desktop:  img/baner/baner.webp
   Mobile:   img/baner/baner-mob.webp (overridden in media query)
   CTA block: semi-transparent overlay, left on desktop
   ───────────────────────────────────────────── */
.banner {
  position: relative;
  min-height: 540px;
  /* Desktop banner image */
  background-image: url('img/baner/baner.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  /* CTA aligned to LEFT on desktop */
  justify-content: flex-start;
  padding: 50px 40px;
}

/* ── Semi-transparent CTA block on banner ──
   Positioned on the LEFT (desktop).
   Uses backdrop-filter for glass-morphism effect.  */
.banner-cta {
  background: rgba(26, 50, 114, 0.82);  /* Semi-transparent primary blue */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: 40px 44px;
  max-width: 440px;
  color: #fff;
  text-align: left;
}

.banner-cta .cta-tagline {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: 8px;
  font-weight: 700;
}

.banner-cta h2 {
  color: #fff;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  margin: 0 0 10px;
  line-height: 1.2;
}

.banner-cta .cta-bonus {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 24px;
  font-weight: 500;
}

/* ─────────────────────────────────────────────
   10. CTA BUTTON COMPONENT
   All buttons on site point to /go/ per spec
   ───────────────────────────────────────────── */
.btn-cta {
  display: inline-block;
  background: var(--color-accent);   /* Gold accent color */
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 34px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  text-align: center;
  cursor: pointer;
  border: none;
}

.btn-cta:hover {
  background: #178a3d;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(31, 169, 76, 0.4);
}

.btn-cta:focus {
  outline: 3px solid rgba(31, 169, 76, 0.6);
  outline-offset: 2px;
}

/* Large CTA variant */
.btn-cta--lg {
  padding: 16px 44px;
  font-size: 1.1rem;
}

/* ─────────────────────────────────────────────
   11. SLOTS GRID SECTION
   12 images displayed 6 per row.
   Per spec: do NOT reduce image size.
   Rounded corners on images.
   Mobile: horizontal scroll to preserve 6-per-row.
   ───────────────────────────────────────────── */
.slots-section {
  padding: 56px 0;
  background: var(--color-surface);
}

.slots-section .section-header {
  text-align: center;
  margin-bottom: 32px;
}

.slots-section .section-header h2 {
  margin: 0 0 8px;
}

.slots-section .section-header p {
  color: var(--color-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* Overflow wrapper — no horizontal scroll needed with 1fr grid */
.slots-grid-wrapper {
  width: 100%;
}

/* CSS Grid: exactly 6 equal columns, images scale to fit.
   Produces 2 rows of 6 on desktop (12 images total).      */
.slots-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 equal columns, scale to container */
  gap: 12px;
  padding: 4px 0;
}

/* Slot card wrapper — hover effect and rounded corners */
.slot-card {
  border-radius: var(--radius-md);   /* Rounded corners */
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  display: block;
}

.slot-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Slot image — fills its grid cell, maintains aspect ratio */
.slot-card img {
  display: block;
  width: 100%;        /* Scale to fit the column width */
  height: auto;       /* Preserve aspect ratio */
  border-radius: var(--radius-md);
}

/* ─────────────────────────────────────────────
   12. MAIN CONTENT / ARTICLE
   Wrapper for the article text content
   ───────────────────────────────────────────── */
.main-content {
  padding: 64px 0;
}

/* Narrower column for article text readability */
.content-body {
  max-width: 880px;
  margin: 0 auto;
}

/* Content lists — use disc bullets */
.content-body ul {
  list-style: disc;
  padding-left: 26px;
  margin-bottom: 1.2rem;
}

.content-body ul li {
  margin-bottom: 8px;
}

/* Space between FAQ items */
.faq-item {
  margin-bottom: 2rem;
}

/* ─────────────────────────────────────────────
   13. TABLES — RESPONSIVE
   Wrapped in .table-wrapper for horizontal scroll.
   First data row styled as header for visual clarity.
   ───────────────────────────────────────────── */

/* Scrollable table container — prevents table breaking on mobile */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0 2rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

table {
  width: 100%;
  min-width: 480px;        /* Minimum width triggers scroll on mobile */
  border-collapse: collapse;
  font-size: 0.95rem;
  background: #fff;
}

table td,
table th {
  padding: 12px 18px;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

/* Alternating row shading for readability */
table tbody tr:nth-child(even) {
  background: var(--color-surface);
}

table tbody tr:hover {
  background: rgba(26, 50, 114, 0.04);
  transition: background var(--transition);
}

/* First column — bold label */
table tbody td:first-child {
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

/* Header row (first row in bonus table) */
.table-header td {
  background: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 700;
  border-color: var(--color-primary) !important;
}

/* ─────────────────────────────────────────────
   14. BANNER-TEXT BLOCK
   Decorative image divider inside the article.
   Background: img/baner-text/text-cta.webp
   Semi-transparent CTA block on LEFT side.
   ───────────────────────────────────────────── */
.baner-text-block {
  position: relative;
  margin: 3.5rem 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 240px;
  display: flex;
  align-items: center;
}

/* Background image fills the block */
.baner-text-block .baner-text-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Semi-transparent CTA overlay — LEFT side of the image */
.baner-text-cta {
  position: relative;
  z-index: 1;
  background: rgba(26, 50, 114, 0.82);   /* Same semi-transparent brand blue */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  padding: 30px 36px;
  border-radius: var(--radius-md);
  margin: 24px;
  max-width: 360px;
  /* Align to left side */
  margin-right: auto;
  margin-left: 28px;
}

.baner-text-cta h3 {
  color: #fff;
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.baner-text-cta p {
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 18px;
  font-size: 0.95rem;
}

/* ─────────────────────────────────────────────
   15. MOBILE SCREENSHOTS SECTION
   Three smartphone screenshots placed side by side.
   Near end of article text (per spec).
   Slightly reduced from full size to fit nicely.
   ───────────────────────────────────────────── */
.mobile-screenshots {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: flex-start;
  margin: 3rem 0 2rem;
}

/* Each screenshot — moderately sized (not full natural, slightly reduced) */
.mobile-screenshots .screenshot {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  width: calc(33.33% - 12px);
  max-width: 200px;
  min-width: 110px;
  height: auto;
  flex: 1;
  object-fit: contain;
}

/* ─────────────────────────────────────────────
   16. FOOTER COMPONENT
   Dark brand blue (#1a3272) background.
   Contains logo, nav links, pay logos, copyright.
   ───────────────────────────────────────────── */
.site-footer {
  background-color: var(--color-footer); /* #1a3272 — dark brand blue */
  color: rgba(255, 255, 255, 0.82);
  padding: 56px 0 28px;
}

/* Top area: logo + description + nav columns */
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 44px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Footer logo — inverted to white */
.footer-brand .footer-logo img {
  height: 48px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 16px;
}

.footer-description {
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* Footer navigation columns */
.footer-nav h4 {
  color: #fff;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.footer-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  transition: color var(--transition);
}

.footer-nav a:hover {
  color: #fff;
}

/* ─────────────────────────────────────────────
   17. PAYMENT LOGOS SECTION (in footer)
   All payment method icons from img/pay/ folder.
   White background cards for logo visibility.
   ───────────────────────────────────────────── */
.pay-logos-section {
  margin-bottom: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pay-logos-section h4 {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}

/* Wrapping flex row — logos wrap to multiple rows */
.pay-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Individual payment logo pill */
.pay-logo {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition);
  cursor: default;
}

.pay-logo:hover {
  background: #fff;
  transform: translateY(-1px);
}

.pay-logo img {
  height: 26px;
  width: auto;
  display: block;
}

/* Footer bottom — copyright and disclaimer */
.footer-bottom {
  padding-top: 24px;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.7;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
}

.footer-bottom a:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* ─────────────────────────────────────────────
   18. MEDIA QUERIES — TABLET (max 1024px)
   Adjust layout for medium-sized screens
   ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Reduce banner CTA padding */
  .banner-cta {
    max-width: 400px;
    padding: 32px 36px;
    margin-left: 24px;
  }

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

/* ─────────────────────────────────────────────
   19. MEDIA QUERIES — MOBILE (max 768px)
   Full mobile layout adjustments.
   Screen is FIXED (locked to viewport width).
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ── SCREEN FIX: Lock to viewport, prevent side-scroll ── */
  html,
  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  /* ── HEADER: Hamburger layout ── */
  .site-header .container {
    flex-wrap: wrap;
    position: relative;
  }

  /* Show hamburger button */
  .menu-toggle {
    display: flex;
  }

  /* ── MOBILE NAV: collapsed by default, shown when .is-open ── */
  .main-nav {
    display: none;
    width: 100%;
    padding: 8px 0 12px;
    border-top: 1px solid var(--color-border);
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 2px;
  }

  .main-nav a {
    display: block;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
  }

  /* ── MOBILE BANNER ──
     Switch background to mobile image.
     Center the CTA block on mobile.    */
  .banner {
    background-image: url('img/baner/baner-mob.webp'); /* Mobile banner image */
    min-height: 480px;
    justify-content: center;    /* Center horizontally on mobile */
    align-items: center;
    padding: 30px 16px;
  }

  .banner-cta {
    margin-left: 0;
    text-align: center;          /* Center text on mobile */
    max-width: 92%;
    width: 92%;
  }

  /* ── TABLE WRAPPER: full-width, no overflow ── */
  .table-wrapper {
    overflow: hidden;
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    margin-left: 0;
    margin-right: 0;
    box-shadow: none;
  }

  /* Reset all table elements to block so we control layout manually */
  table,
  table tbody,
  table tbody tr,
  table tbody td {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* ── TABLE TYPE 1: .table-scheda (2 columns) ──
     Each row is a flex row: [label left, blue bg] [value right, white bg].
     The label column is narrower; the value stretches to fill the rest.   */
  .table-scheda tbody tr {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
  }

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

  /* Left cell — label, dark blue background, fixed compact width */
  .table-scheda tbody td:first-child {
    width: 44%;
    max-width: 44%;
    min-width: 0;
    flex-shrink: 0;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    border: none;
    border-right: 2px solid rgba(255, 255, 255, 0.15);
    white-space: normal;
    word-break: break-word;
  }

  /* Right cell — value, white background, takes remaining space */
  .table-scheda tbody td:last-child {
    flex: 1;
    min-width: 0;
    background: #fff;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    border: none;
    font-size: 0.9rem;
    word-break: break-word;
  }

  /* ── TABLE TYPE 2: .table-bonus (4 columns) ──
     First cell of each data row = full-width blue header (row name).
     Cells 2–4 each display as a [label | value] flex row using data-label.
     The original header row (.table-header) is hidden — labels come from
     data-label attributes instead.                                         */

  /* Hide the column-header row on mobile — redundant with data-labels */
  .table-bonus tbody tr.table-header {
    display: none;
  }

  /* Data rows: first cell = full-width blue header bar */
  .table-bonus tbody tr {
    margin-bottom: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .table-bonus tbody tr:last-child {
    margin-bottom: 0;
  }

  .table-bonus tbody td:first-child {
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    padding: 10px 14px;
    border-bottom: none;
  }

  /* Cells 2–4: flex row showing column label on the left, value on the right */
  .table-bonus tbody td[data-label] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 9px 14px;
    border-top: 1px solid var(--color-border);
    gap: 0;
  }

  /* Column label text injected from data-label attribute */
  .table-bonus tbody td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.85rem;
    /* Fixed narrow column for the label */
    min-width: 110px;
    max-width: 110px;
    flex-shrink: 0;
    padding-right: 10px;
  }

  /* The cell value sits to the right of the label */
  .table-bonus tbody td[data-label] > * ,
  .table-bonus tbody td[data-label] {
    color: var(--color-text);
  }

  /* ── SLOTS: 2 columns on mobile ── */
  .slots-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* ── BANER-TEXT: center CTA on mobile ── */
  .baner-text-cta {
    margin: 16px auto;
    max-width: calc(100% - 32px);
    text-align: center;
  }

  /* ── MOBILE SCREENSHOTS: allow side-scroll if needed ── */
  .mobile-screenshots {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 10px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-screenshots .screenshot {
    min-width: 110px;
    width: calc(30vw);
    max-width: 160px;
    flex-shrink: 0;
  }

  /* ── FOOTER: single column ── */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* ── MAIN CONTENT: reduce vertical padding ── */
  .main-content {
    padding: 40px 0;
  }

  .slots-section {
    padding: 36px 0;
  }
}

/* ─────────────────────────────────────────────
   20. MEDIA QUERIES — SMALL MOBILE (max 480px)
   Fine-tuning for very small screens
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .banner {
    min-height: 400px;
    padding: 24px 12px;
  }

  .banner-cta {
    padding: 22px 22px;
    max-width: 96%;
    width: 96%;
  }

  .banner-cta h2 {
    font-size: 1.3rem;
  }

  .btn-cta {
    padding: 12px 26px;
    font-size: 0.95rem;
    width: 100%;
  }

  .baner-text-block {
    min-height: 200px;
  }

  .baner-text-cta {
    padding: 20px 22px;
  }
}