/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --radius: 0.625rem;
  --background: oklch(0.16 0.04 25);
  --foreground: oklch(0.96 0.02 80);
  --card: oklch(0.20 0.06 25);
  --card-foreground: oklch(0.96 0.02 80);
  --primary: oklch(0.78 0.16 80);
  --primary-foreground: oklch(0.18 0.05 25);
  --secondary: oklch(0.28 0.10 25);
  --secondary-foreground: oklch(0.96 0.02 80);
  --muted: oklch(0.24 0.06 25);
  --muted-foreground: oklch(0.72 0.04 70);
  --accent: oklch(0.55 0.20 25);
  --accent-foreground: oklch(0.98 0.01 80);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.35 0.10 30);
  --input: oklch(0.28 0.08 25);
  --ring: oklch(0.78 0.16 80);
  /* Brand colors */
  --gold: oklch(0.82 0.17 85);
  --gold-bright: oklch(0.90 0.18 90);
  --gold-deep: oklch(0.62 0.15 70);
  --casino-red: oklch(0.45 0.22 25);
  --casino-red-deep: oklch(0.22 0.10 25);
  /* Gradients */
  --gradient-gold: linear-gradient(135deg, oklch(0.90 0.18 90), oklch(0.65 0.15 70));
  --gradient-red: radial-gradient(ellipse at center, oklch(0.40 0.20 25), oklch(0.12 0.05 25));
  --gradient-card: linear-gradient(180deg, oklch(0.24 0.10 25), oklch(0.16 0.06 25));
  --shadow-gold: 0 0 30px oklch(0.78 0.16 80 / 0.35);
  --header-h: 64px;
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { border-color: var(--border); }

html {
  overflow-x: clip;   /* clip instead of hidden — doesn't break position:sticky */
  max-width: 100%;
}
/* CSS fallback: neutralise the WP admin bar and its html margin-top:32px
   even if the PHP show_admin_bar(false) filter gets overridden by a plugin */
#wpadminbar { display: none !important; }
html.wp-toolbar { margin-top: 0 !important; padding-top: 0 !important; }

body {
  margin: 0;
  max-width: 100%;
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

/* Khmer language: override Poppins (including the inline body style) */
html[lang="km"] body,
html[lang="km"] button,
html[lang="km"] input,
html[lang="km"] select,
html[lang="km"] textarea {
  font-family: 'Noto Sans Khmer', ui-sans-serif, system-ui, sans-serif !important;
}

/* Khmer hero heading: line-height 0.95 clips stacked diacritics — loosen it */
html[lang="km"] .hero-slide-content h1 {
  line-height: 1.4 !important;
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
}

/* Thai hero heading: Thai vowel marks extend above/below baseline — loosen line-height */
html[lang="th"] .hero-slide-content h1 {
  line-height: 1.4 !important;
}

/* Thai hero: widen content area so heading stays on 2 lines */
html[lang="th"] .hero-slide-content {
  max-width: 68% !important;
}

img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* Prevent the hero section from ever being narrower than its grid cell */
.hero-section { width: 100%; }

/* ── Overflow containment ────────────────────────────────────── */
/* Grid items default to min-width:auto which lets content expand past viewport.
   Force min-width:0 on all direct children so 1fr stays = available space.
   Keep overflow visible so mobile full-bleed hero can escape parent bounds. */
.main-home-grid { overflow-x: visible; }
.main-home-grid > * { min-width: 0; max-width: 100%; }

/* Sections column: clamp to its own width so no child can blow it out */
.home-sections { max-width: 100%; overflow-x: hidden; }
.home-sections > * { max-width: 100%; min-width: 0; }

/* Sidebar */
.home-aside { max-width: 100%; min-width: 0; overflow-x: hidden; }

/* Game card images must fill their aspect-ratio container fully */
.games-grid img { height: 100% !important; width: 100% !important; object-fit: cover !important; }

/* Allow game cells to shrink below content min-width (prevents grid blowout) */
.games-grid > * { min-width: 0; }

/* ── Nav active line glow ───────────────────────────────────── */
.nav-active-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  left: -30%;
  right: -30%;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent 5%,
    #f59e0b 18%,
    #fef08a 44%,
    #ffffff 50%,
    #fef08a 56%,
    #f59e0b 82%,
    transparent 95%,
    transparent 100%
  );
  filter:
    drop-shadow(0 0 3px #fbbf24)
    drop-shadow(0 0 7px #f59e0b)
    drop-shadow(0 0 14px rgba(245,158,11,0.6));
}

/* ── Category icon animations ───────────────────────────────── */
@keyframes cat-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}
@keyframes cat-sway {
  0%, 100% { transform: translateY(0px) rotate(-4deg); }
  50%       { transform: translateY(-6px) rotate(4deg); }
}
@keyframes cat-pulse {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%       { transform: translateY(-5px) scale(1.1); }
}
@keyframes cat-spin-bob {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25%       { transform: translateY(-4px) rotate(-6deg); }
  75%       { transform: translateY(-4px) rotate(6deg); }
}

/* ── Utility animations ─────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.animate-pulse  { animation: pulse  2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-in     { animation: fadeIn 0.5s ease forwards; }
.animate-slide  { animation: slideIn 0.3s ease forwards; }

/* ── Scroll-reveal ────────────────────────────────────────────
   Lightweight fade/slide-up triggered by IntersectionObserver (see
   lucky2u.js). Progressive enhancement: elements are visible by default
   and only get the hidden starting state once JS confirms it can animate
   them in (see .js scoping below + <noscript> fallback in header.php),
   so nothing ever disappears for no-JS users, slow connections, or crawlers. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger helpers for grids/lists revealing in sequence */
.reveal-d1 { transition-delay: 0.08s !important; }
.reveal-d2 { transition-delay: 0.16s !important; }
.reveal-d3 { transition-delay: 0.24s !important; }
.reveal-d4 { transition-delay: 0.32s !important; }
.reveal-d5 { transition-delay: 0.40s !important; }
.reveal-d6 { transition-delay: 0.48s !important; }

/* ── Motion preference ───────────────────────────────────────
   Turn off all decorative animation/transition/scroll-behaviour for
   users who've asked their OS for reduced motion — includes the
   category icon float/sway/pulse loops and the scroll-reveal transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── Concave border box ─────────────────────────────────────── */
[data-concave] { position: relative; }
[data-concave] > [data-concave-svg] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
[data-concave] > [data-concave-clip] {
  position: absolute; inset: 0; pointer-events: none;
}

/* ── Fixed header ───────────────────────────────────────────────
   Uses position:fixed (not sticky) — sticky needs a scroll/resize
   event to register its stuck offset in Chromium, so if anything
   (web fonts, external CDN scripts) reflows the page after first
   paint, the header briefly renders in-flow with a gap above it
   until the user scrolls. Fixed positioning has no such race. ── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; width: 100%;
  z-index: 100;
  border-bottom: 1px solid oklch(0.82 0.17 85 / 0.10);
  /* Solid gradient (not a see-through blur) so the header looks the same on
     every page, instead of tinting differently depending on whatever hero
     slide/background image happens to be behind it. */
  background: linear-gradient(90deg, oklch(0.22 0.11 24), oklch(0.30 0.14 25));
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 40px oklch(0.55 0.18 30 / 0.15);
}

/* Push page content below the fixed header, at all breakpoints */
body { padding-top: var(--header-h); }
/* ── Header layout ──────────────────────────────────────────── */
.header-inner {
  display: flex;
  align-items: stretch;   /* stretch so nav links can fill full header height */
  width: 100%;
  padding: 0 1.5rem;
  height: var(--header-h);
  gap: 0.75rem;
}

.header-logo {
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
  display: flex;
  align-items: center;    /* centre logo vertically within stretched row */
}
.header-logo-img { height: 3.5rem; width: auto; object-fit: contain; display: block; }

.header-nav {
  display: none;
  align-items: stretch;   /* links fill full height → active-line stays at real bottom */
  gap: clamp(0.5rem, 2vw, 2.5rem);
  margin-left: clamp(1rem, 2vw, 2.5rem);
  flex: 1;
}
.header-nav a {
  white-space: nowrap;
  font-size: clamp(11px, 1.1vw, 13px) !important;
  letter-spacing: clamp(0.02em, 0.1vw, 0.1em) !important;
}

.header-cta {
  display: flex;
  align-items: center;    /* centre CTA buttons vertically */
  gap: 0.75rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Desktop: show nav, hide hamburger */
@media (min-width: 1280px) {
  .header-nav { display: flex; }
  .mobile-menu-btn { display: none !important; }
  .header-cta { display: flex; }
}

/* ── Hamburger button ───────────────────────────────────────── */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  align-self: center;     /* vertically centre inside the stretched header row */
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 1.5px solid oklch(0.82 0.17 85 / 0.40);
  border-radius: 0.375rem;
  color: oklch(0.96 0.02 80);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.mobile-menu-btn:hover { border-color: var(--gold); color: var(--gold); }
.mobile-menu-btn .icon-close { display: none; }
.mobile-menu-btn.is-open .icon-ham   { display: none; }
.mobile-menu-btn.is-open .icon-close { display: block; }

/* ── Mobile drawer ──────────────────────────────────────────── */
.mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--header-h);
  z-index: 99;
}
.mobile-drawer.is-open { display: block; }


.mobile-nav-panel {
  position: absolute;
  inset: 0;                /* full width & full height of the drawer */
  background: oklch(0.13 0.07 22);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mobile-nav-list { list-style: none; margin: 0; padding: 0.75rem 0 0; }
.mobile-nav-list li a {
  display: block;
  padding: 1rem 1.5rem;
  color: rgba(255,255,255,0.80);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;             /* centred text */
  border-bottom: 1px solid oklch(0.82 0.17 85 / 0.08);
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.mobile-nav-list li a:hover,
.mobile-nav-list li.current-menu-item > a {
  background: oklch(0.18 0.08 22);
  color: var(--gold);
}

.mobile-nav-footer {
  padding: 1.25rem 1.5rem 2rem;
  margin-top: auto;
  border-top: 1px solid oklch(0.82 0.17 85 / 0.10);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.mobile-cta-btn {
  display: block !important;
  text-align: center !important;
  padding: 0.875rem 1rem !important;
  font-size: 14px !important;
  letter-spacing: 0.12em !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* ── Gold button ────────────────────────────────────────────── */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 0.25rem; font-weight: 700;
  color: oklch(0.18 0.05 25);
  background-image: var(--gradient-gold);
  box-shadow: var(--shadow-gold);
  transition: filter 0.15s;
  cursor: pointer; border: none;
}
.btn-gold:hover { filter: brightness(1.1); }
.btn-gold:active { transform: scale(0.95); }

.btn-gold-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 0.25rem; font-weight: 700;
  border: 2px solid var(--gold);
  color: var(--gold); background: transparent;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.btn-gold-outline:hover {
  background: var(--gold);
  color: oklch(0.18 0.05 25);
}

/* ── Lucide icon sizing helpers ─────────────────────────────── */
[data-lucide] { display: inline-block; vertical-align: middle; }
.icon-xs  [data-lucide], [data-lucide].icon-xs  { width: 0.75rem;  height: 0.75rem;  }
.icon-sm  [data-lucide], [data-lucide].icon-sm  { width: 0.875rem; height: 0.875rem; }
.icon-md  [data-lucide], [data-lucide].icon-md  { width: 1rem;     height: 1rem;     }
.icon-lg  [data-lucide], [data-lucide].icon-lg  { width: 1.25rem;  height: 1.25rem;  }
.icon-xl  [data-lucide], [data-lucide].icon-xl  { width: 1.5rem;   height: 1.5rem;   }
.icon-2xl [data-lucide], [data-lucide].icon-2xl { width: 2rem;     height: 2rem;     }

/* ── Line-clamp ─────────────────────────────────────────────── */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* ── Scrollbar styling ──────────────────────────────────────── */
/* Desktop: thin custom scrollbar */
@media (min-width: 640px) {
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: oklch(0.14 0.05 22); }
  ::-webkit-scrollbar-thumb { background: oklch(0.35 0.10 28); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: oklch(0.45 0.12 32); }
}
/* Mobile: overlay scrollbar so it doesn't eat into layout width */
@media (max-width: 639px) {
  ::-webkit-scrollbar { display: none; width: 0; height: 0; }
  * { scrollbar-width: none; -ms-overflow-style: none; }
}

/* ── Responsive layouts ─────────────────────────────────────── */

/* Home page main grid */
@media (min-width: 1280px) { .main-home-grid { grid-template-columns: 1fr 320px !important; } }
@media (max-width: 1279px) { .home-aside { display: none !important; } }

/* Popular games grid */
@media (min-width: 640px)  { .games-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 768px)  { .games-grid { grid-template-columns: repeat(6, 1fr) !important; } }

/* Trust strip */
.trust-item:last-child { border-right: none !important; }

/* Hero heading line-height (0.95 inline) is tuned for Latin text, where ascenders/
   descenders eat into that space. CJK glyphs fill the full em box, so the same value
   makes the two title lines look like they're touching — give CJK more breathing room. */
html[lang^="zh"] .hero-slide-content h1 { line-height: 1.3 !important; }

/* VIP benefits grid */
@media (min-width: 768px)  { .benefits-grid { grid-template-columns: repeat(3, 1fr) !important; } }

/* VIP tiers grid */
@media (min-width: 768px)  { .tiers-grid { grid-template-columns: repeat(4, 1fr) !important; } }

/* VIP steps grid */
@media (max-width: 640px)  { .steps-grid { grid-template-columns: 1fr !important; } }

/* Support grid (VIP & Promotions) */
@media (max-width: 640px)  { .support-grid-sm { grid-template-columns: 1fr !important; } }

/* Left sidebar (casino / sports / slots / lottery) */
@media (min-width: 1280px) { .left-sidebar-xl { display: flex !important; } }

/* Sticky, not fixed — it must stop within its own container so it doesn't
   float over the footer once the page finishes scrolling past it. */
.left-sidebar-xl {
  position: sticky !important;
  top: var(--header-h) !important;
  max-height: calc(100vh - var(--header-h)) !important;
  align-self: flex-start !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: oklch(0.45 0.10 28 / 0.5) transparent;
}
.left-sidebar-xl::-webkit-scrollbar { display: none; }
.left-sidebar-xl { -ms-overflow-style: none; scrollbar-width: none; }

/* Prevent flex children from shrinking — sidebar must scroll, not squeeze its cards */
.left-sidebar-xl > * { flex-shrink: 0; }

/* Casino / slots / lottery cards grid */
@media (min-width: 640px)  { .casino-cards-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1280px) { .casino-cards-grid { grid-template-columns: repeat(3, 1fr) !important; } }

/* 4-col trust grid (casino / slots / lottery) */
@media (min-width: 768px)  { .trust4-grid { grid-template-columns: repeat(4, 1fr) !important; } }

/* Right sidebar */
@media (min-width: 1024px) { .right-sidebar-lg { display: flex !important; } }

/* Card row layout (sports / slots / lottery cards) */
.card-sm-row { flex-direction: column !important; }
@media (min-width: 640px)  { .card-sm-row { flex-direction: row !important; } }
.card-logo-w { border-radius: 1.25rem 1.25rem 0 0 !important; overflow: hidden !important; }
@media (min-width: 640px)  { .card-logo-w { width: 16rem !important; min-height: 160px !important; border-radius: 1.25rem !important; overflow: hidden !important; margin: 0.75rem !important; } }
@media (min-width: 640px) {
  .card-logo-w img {
    position: absolute !important;
    top: 0 !important; right: 0 !important;
    bottom: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: contain !important;
    border-radius: 1.25rem !important;
  }
}

/* Sports trust grid */
@media (min-width: 640px)  { .trust-grid-sm { grid-template-columns: repeat(4, 1fr) !important; } }

/* Footer grid — mobile-first, stacks then expands */
.footer-grid { grid-template-columns: 1fr !important; }
@media (min-width: 640px)  { .footer-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 768px)  { .footer-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 768px) and (max-width: 1023px) { .footer-grid > div:last-child { grid-column: span 2; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 320px !important; } }

/* Promotions grid */
@media (min-width: 768px)  { .promos-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 900px)  { .promos-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1440px) { .promos-grid { grid-template-columns: repeat(4, 1fr) !important; } }

/* Contact page */
@media (min-width: 1024px) { .contact-main-grid { grid-template-columns: 1fr 300px !important; } }
@media (min-width: 1024px) { .contact-form-col  { border-bottom: none !important; border-right: 1px solid oklch(0.22 0.07 26 / 0.4) !important; } }
@media (min-width: 640px)  { .contact-name-email-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (min-width: 640px)  { .quick-help-grid { grid-template-columns: repeat(3,1fr) !important; } }
/* Input placeholder colour */
.contact-input::placeholder { color: rgba(255,255,255,0.25); }

/* Category strip hover */
.cat-item .cat-img  { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4)); transition: filter 0.15s ease; }
.cat-item:hover .cat-img  { filter: drop-shadow(0 0 8px oklch(0.82 0.18 80 / 0.7)); }
.cat-item .cat-label       { transition: color 0.15s ease; }
.cat-item:hover .cat-label { color: var(--gold); }

/* ══════════════════════════════════════════════════════════════
   Homepage — responsive
   ══════════════════════════════════════════════════════════════ */

/* ── Scrollbar hide utility ──────────────────────────────────── */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }

/* ── Feature strip: hide scrollbar, allow horizontal scroll ──── */
#hero-feature-strip { scrollbar-width: none; }
#hero-feature-strip::-webkit-scrollbar { display: none; }

/* ═══════════════ MOBILE  < 640px ═══════════════════════════════ */
@media (max-width: 639px) {

  /* Hero: full-width, simple bottom fade */
  .hero-section {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    left: auto !important;
    transform: none !important;
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  /* Hero text slide — natural height, no extra bottom padding needed */
  [data-slide][data-type="text"] {
    padding: 1.75rem 1.25rem 1.25rem !important;
    min-height: 0 !important;
    align-items: flex-start !important;
  }

  /* Hero slide content: full-width, above the background */
  .hero-slide-content {
    max-width: 100% !important;
    position: relative !important;
    z-index: 11 !important;
  }

  /* Hero h1 */
  [data-slide][data-type="text"] h1 {
    font-size: clamp(1.6rem, 7.5vw, 2.25rem) !important;
    margin-top: 0.5rem !important;
    line-height: 1.05 !important;
  }

  /* Hero: turn img panel into a dimmed full-bleed background */
  .hero-img-panel {
    display: block !important;
    width: 100% !important;
    opacity: 0.18 !important;
  }
  .hero-img-panel img {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* Hero banner slide */
  [data-slide][data-type="banner"] { height: 220px !important; }

  /* Dots: flow naturally below slide content (no absolute positioning) */
  .hero-dots {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    justify-content: center !important;
    padding: 0.625rem 0 0.5rem !important;
  }

  /* Categories: compact icons, horizontal scroll, hide text labels */
  .home-cats-strip { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none; }
  .home-cats-strip::-webkit-scrollbar { display: none; }
  .home-cats-strip > a { flex-shrink: 0 !important; min-width: 56px !important; padding: 0.75rem 0 !important; }
  .home-cats-strip .cat-img { height: 2.5rem !important; width: 2.5rem !important; }
  .home-cats-strip .cat-label { display: none !important; }

  /* Partners: full scroll row */
  .home-partners-section  { padding: 0.75rem 1rem !important; overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .home-partners-section::-webkit-scrollbar { display: none; }
  .home-partners-label    { display: none !important; }
  .home-partners-divider  { display: none !important; }
  .home-partners-logos    { flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 1.25rem !important; }
  .home-partners-logos img { height: 1.75rem !important; }

  /* Games: 2 columns */
  .games-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Trust strip: 2-col, wrapped text */
  .trust-strip-section { grid-template-columns: repeat(2, 1fr) !important; }
  .trust-item { justify-content: flex-start !important; padding: 0.75rem 0.625rem !important; gap: 0.5rem !important; }
  .trust-item:nth-child(even) { border-right: none !important; }
  .trust-item div div { white-space: normal !important; word-break: break-word !important; }

  /* Sidebar */
  .home-aside { padding: 0 1rem 1.5rem !important; }

  /* Sections below hero */
  .home-sections { padding: 0.75rem 0.75rem 1.25rem !important; }

  /* Extra compact header logo on very small screens */
  .header-logo-img { height: 2rem !important; }
}

/* ═══════════════ TABLET  640px – 1279px ════════════════════════ */
@media (min-width: 640px) and (max-width: 1279px) {

  /* Remove fixed min-height so hero section shrinks to its content */
  .hero-section { min-height: 0 !important; }

  /* Hero text slide */
  [data-slide][data-type="text"] {
    padding: 2rem 2.5rem 1.5rem !important;
    min-height: 0 !important;
  }
  .hero-slide-content { max-width: 65% !important; }
  .hero-img-panel     { width: 50% !important; }

  /* Hero banner slide */
  [data-slide][data-type="banner"] { height: 300px !important; }

  /* Dots: flow naturally below slide */
  .hero-dots {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    justify-content: center !important;
    padding: 0.625rem 0 0.5rem !important;
  }

  /* Trust strip: 3 columns */
  .trust-strip-section { grid-template-columns: repeat(3, 1fr) !important; }
  .trust-item:nth-child(3) { border-right: none !important; }

  /* Sidebar: equal padding */
  .home-aside { padding: 0 1rem 1.5rem !important; }

  /* Partners logos: wrap & distribute */
  .home-partners-logos { flex-wrap: wrap !important; gap: 1rem !important; justify-content: center !important; }
}

/* ═══════════════ DESKTOP  ≥ 1024px ═════════════════════════════ */
@media (min-width: 1024px) {
  /* Sidebar: restore original right-rail padding */
  .home-aside { padding: 1rem 1.5rem 1.5rem 0.25rem !important; }
}

/* ═══════════════ MOBILE + TABLET  ≤ 1023px ════════════════════ */
@media (max-width: 1279px) {

  /* Shrink header height */
  :root { --header-h: 56px; }

  .site-header { max-width: 100% !important; box-sizing: border-box !important; }

  /* Tighter header inner padding */
  .header-inner { padding: 0 0.875rem !important; }

  /* Smaller logo */
  .header-logo-img { height: 2.25rem !important; }

  /* Tighter CTA gap */
  .header-cta { gap: 0.5rem !important; }

  /* Hide all header CTA buttons — both are in the hamburger menu */
  .header-cta { display: none !important; }

  /* Show hamburger — auto margin moves to logo so lang+hamburger sit together on the right */
  .mobile-menu-btn { display: flex !important; margin-left: 0 !important; }
  .header-logo { margin-right: auto !important; }

  /* Footer: compact padding on columns */
  .footer-grid > div { padding: 1.25rem 1rem !important; }

  /* ── Feature strip: flow below dots, full-width scrollable strip ── */
  /* Allow hero section to not clip the strip */
  .hero-section {
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  #hero-feature-strip {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-left: 0.5rem !important;
  }
  .hero-features-list { flex-shrink: 0 !important; }
  /* Each feature item */
  .hero-features-list > div {
    padding: 0.5rem 0.75rem !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
  }
  /* Icon circle */
  .hero-features-list > div > div:first-child {
    width: 2rem !important;
    height: 2rem !important;
    flex-shrink: 0 !important;
  }
  /* Title text */
  .hero-features-list > div > div:last-child > div:first-child {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  /* Subtitle text */
  .hero-features-list > div > div:last-child > div:last-child {
    font-size: 10px !important;
    white-space: nowrap !important;
  }
}

/* ══ Feature strip: 2×2 grid on mobile ══════════════════════════════════
   MUST be after the ≤1023px block — same !important specificity means
   last source position wins, so these mobile overrides take effect.      */
@media (max-width: 639px) {
  #hero-feature-strip {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    padding-left: 0 !important;
  }
  .hero-features-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
  }
  /* Remove inline left-borders; re-apply as dividers between columns/rows */
  .hero-features-list > div {
    border-left: none !important;
    padding: 0.625rem 0.75rem !important;
    gap: 0.4rem !important;
  }
  .hero-features-list > div:nth-child(even) {
    border-left: 1px solid rgba(255,255,255,0.12) !important;
  }
  .hero-features-list > div:nth-child(n+3) {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
  }
}

/* ══ Contact form: prevent select dropdown from overflowing viewport ════ */
@media (max-width: 1279px) {
  select {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ══ Platform list header: search box full-width when wrapped on mobile ═
   Applies to sports, casino, slots, lottery pages.                       */
@media (max-width: 639px) {
  .platform-list-header {
    gap: 0.5rem !important;
  }
  .platform-search-box {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .platform-search-box input {
    width: 100% !important;
    flex: 1 !important;
  }
}

/* ══ Footer: 2-column compact layout on mobile ══════════════════════════
   Brand spans full width; the 3 link columns + payment sit in 2 cols.
   MUST be after the ≤1023px block so these !important rules take effect. */
@media (max-width: 639px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Brand section — full width, centered */
  .footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
    padding: 1.25rem 1rem 0.875rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  /* Center the social icons row */
  .footer-grid > div:first-child > div {
    justify-content: center !important;
  }
  /* All other sections — tighter padding to reduce waste */
  .footer-grid > div:not(:first-child) {
    padding: 0.875rem 0.875rem !important;
  }
  /* Payment icons: keep 3-col inner grid, let it shrink to fit half-width */
  .footer-grid > div:last-child {
    padding-top: 0.875rem !important;
  }
}

/* ══ Platform cards: larger logo image on mobile ════════════════════════ */
@media (max-width: 639px) {
  .card-logo-w {
    min-height: 260px !important;
  }
  /* Fill the entire logo area like desktop does, but with contain */
  .card-logo-w img {
    position: absolute !important;
    inset: 1rem !important;
    width: calc(100% - 2rem) !important;
    height: calc(100% - 2rem) !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: contain !important;
  }
}

/* ══ "Other platforms" grid cards: logo-only on mobile ══════════════════
   Hides the name+arrow div; logo panel expands to fill the whole card.   */
@media (max-width: 639px) {
  /* 3 columns — avoids orphan with 5 items, fits more logos per screen */
  .other-books-grid,
  .other-cards-grid,
  .other-slots-grid,
  .other-lottery-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }
  .other-card-name { display: none !important; }
  .other-card-logo {
    width: 100% !important;
    height: 80px !important;
    border-right: none !important;
    border-radius: 0 !important;
  }
  .other-card-logo img {
    width: 88% !important;
    height: 78% !important;
    object-fit: contain !important;
  }
}

/* ══ Platform detail page: bigger logo on mobile ════════════════════════
   Image fills full card width at natural proportional height.
   No fixed min-height = no empty space above/below the logo.            */
@media (max-width: 639px) {
  .detail-logo-box {
    min-height: 0 !important;
    height: auto !important;
    padding: 0.25rem !important;
    align-items: stretch !important;
  }
  .detail-logo-box img {
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 0.75rem !important;
  }
}

/* ══ Desktop safety: neutralise any leaked admin-bar margin, keep header offset ═ */
@media (min-width: 1280px) {
  html { margin-top: 0 !important; padding-top: 0 !important; }
  body { padding-top: var(--header-h) !important; margin-top: 0 !important; }
}

/* ══ Remove top gap on hero listing pages — match homepage's zero-gap edge-to-edge start ═
   Scoped to .page-hero-main (casino/sports/slots/lottery/promotions listing pages, which
   have a full-bleed hero banner right after the sidebar). Detail pages reuse the same
   .left-sidebar-xl sidebar but start with a breadcrumb, not a hero, so they must keep
   their normal 1rem top padding — hence the class scope instead of a blanket sibling rule.
   .right-sidebar-lg is excluded: its widgets (Hot Promotions, QR support, etc.) are
   rounded/bordered boxes, never full-bleed, so it always keeps its normal top padding. */
@media (min-width: 1280px) {
  /* .left-sidebar-xl keeps its normal 1rem padding (incl. top) — only the hero/main content goes edge-to-edge */
  .left-sidebar-xl + main.page-hero-main { padding-top: 0 !important; }
}

/* ══ Screenshots grid: 2-column on mobile (all detail pages) ═══════════ */
@media (max-width: 639px) {
  .screenshots-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
}

/* ══ VIP tiers table: scrollable on mobile ══════════════════════════════ */
@media (max-width: 639px) {
  .vip-tiers-scroll {
    border-radius: 0.75rem;
  }
}

/* ══ WPML Language Switcher ════════════════════════════════════════════ */
.lang-switcher {
  position: relative;
  display: flex;
  align-items: center;
}
.lang-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  border-radius: 0.4rem;
  padding: 0.35rem 0.6rem;
  font-size: 11px;
  font-weight: 700;
  color: oklch(0.90 0.04 80);
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: color 0.15s;
}
.lang-switcher-btn:hover {
  color: var(--gold);
}
.lang-flag {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.lang-chevron {
  opacity: 0.6;
  transition: transform 0.2s;
}
.lang-switcher.is-open .lang-chevron {
  transform: rotate(180deg);
}
.lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 160px;
  background: oklch(0.17 0.06 22);
  border: 1px solid oklch(0.30 0.10 28 / 0.5);
  border-radius: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.5);
  z-index: 9999;
}
.lang-switcher.is-open .lang-dropdown {
  display: block;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  font-size: 12px;
  color: oklch(0.82 0.04 80);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.lang-option:hover,
.lang-option.is-active {
  background: oklch(0.22 0.07 26);
  color: var(--gold);
}
@media (max-width: 639px) {
  .lang-switcher { display: flex; }
  .lang-switcher-btn { padding: 0.3rem 0.45rem; gap: 0.25rem; border: none !important; background: none !important; }
  .lang-code { display: none; }
  .lang-chevron { display: none; }
  .mobile-menu-btn { border: none !important; }
}

/* ── Sports bonus strip — narrow screens ───────────────────────────────── */
@media (max-width: 480px) {
  .sp-bonus-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  .sp-bonus-icon {
    align-self: center;
  }
  .sp-bonus-text {
    width: 100%;
    text-align: center;
  }
  .sp-bonus-text > div:first-child {
    font-size: 12px !important;
    white-space: normal !important;
    word-break: break-word;
  }
  .sp-bonus-cta {
    width: 100%;
    display: block;
  }
  .sp-bonus-cta .btn-gold {
    width: 100% !important;
    justify-content: center;
    padding: 0.625rem 1rem !important;
  }
}

/* ── Mobile drawer language row ─────────────────────────────────────────── */
.mobile-lang-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
  justify-content: center;
}
.mobile-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.4rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: oklch(0.75 0.04 80);
  background: oklch(0.20 0.06 22);
  border: 1px solid oklch(0.30 0.10 28 / 0.5);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.mobile-lang-btn.is-active,
.mobile-lang-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}


/* Khmer script: letter-spacing and word-spacing must be 0 or characters break */
:lang(km), :lang(km) * {
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

/* Thai language: IBM Plex Sans Thai font */
html[lang="th"] body,
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select,
html[lang="th"] textarea {
  font-family: 'IBM Plex Sans Thai', ui-sans-serif, system-ui, sans-serif !important;
}

/* Thai script: letter-spacing breaks glyph stacking — reset to 0 */
:lang(th), :lang(th) * {
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

/* Chinese language: Noto Serif SC */
html[lang="zh"] body,
html[lang="zh"] button,
html[lang="zh"] input,
html[lang="zh"] select,
html[lang="zh"] textarea {
  font-family: 'Noto Serif SC', serif !important;
}

/* Vietnamese language: Google Sans Flex */
html[lang="vi"] body,
html[lang="vi"] button,
html[lang="vi"] input,
html[lang="vi"] select,
html[lang="vi"] textarea {
  font-family: 'Google Sans Flex', ui-sans-serif, system-ui, sans-serif !important;
}