/* =========================================================
   APEX ARENA — academic UI-clone project stylesheet
   Mobile-first. Breakpoints: 768 / 1024 / 1440
   ========================================================= */

:root {
  /* ---- color tokens (Lotus365 brand palette, changed to black and reddish gold) ---- */
  --violet-900: #0f0b06;
  /* very dark warm black */
  --violet-700: #bd7e2b;
  /* primary accent: reddish golden / bronze */
  --violet-650: #d6973e;
  /* lighter reddish golden */
  --violet-500: #a36920;
  /* deeper copper-gold */
  --violet-100: #1c150e;
  /* dark warm background / header-block bg */

  --navy-900: #000000;
  /* pure black */
  --navy-700: #18140e;
  /* dark card/section header bg */
  --navy-600: #221c13;
  /* lighter dark element bg */

  --amber-500: #ebd08d;
  /* bright gold */
  --gold-gradient: linear-gradient(135deg, #bd7e2b 0%, #ffeaa7 50%, #9e5318 100%);
  --amber-600: #b57126;
  /* darker reddish golden */
  --orange-500: #cf7b29;
  /* reddish golden accent */
  --orange-600: #aa5a1b;
  /* deep reddish golden accent */
  --red-500: #b83a2c;
  /* red accent */
  --green-live: #e06c53;
  /* matching live indicator */

  --bg-page: #070605;
  /* deep black page background */
  --bg-card: #12100d;
  /* dark brown-black card background */
  --text-dark: #f5f0ea;
  /* light cream/white text */
  --text-muted: #a39b92;
  /* warm muted text */
  --text-faint: #706860;
  /* faint warm text */
  --border-color: #24201a;
  /* subtle dark border */
  --suspended-bg: rgba(0, 0, 0, .75);

  --radius-s: 0px;
  --radius-m: 0px;
  --radius-l: 0px;

  --shadow-card: 0 4px 20px rgba(0, 0, 0, .6);
  --shadow-pop: 0 8px 32px rgba(0, 0, 0, .8);

  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-base);
  background-color: var(--bg-page);
  background-image: url("images/bg.png");
  background-repeat: repeat;
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* icon spans use a CSS mask so they can be recolored with `color` */
.ic {
  width: 20px;
  height: 20px;
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.game-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

.game-icon-img--sm {
  width: 16px;
  height: 16px;
}

.ic-sm {
  width: 16px;
  height: 16px;
}

.rotate-down {
  transform: rotate(90deg);
}

/* =========================================================
   Demo ribbon
   ========================================================= */
.demo-ribbon {
  background: var(--navy-900);
  color: #FFD873;
  font-size: 11px;
  text-align: center;
  padding: 6px 10px;
  letter-spacing: .2px;
  position: sticky;
  top: 0;
  z-index: 60;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  background: #1d1d1d;
  /* position: sticky;x` */
  top: 24px;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  color: var(--text-dark);
}

.site-header .logo-mark {
  color: var(--text-dark);
}

.site-header .logo-accent {
  color: var(--red-500);
}

.site-header .hamburger {
  color: white;
  /* color: var(--text-dark) !important; */
}

/* =========================================================
   Secondary Navbar
   ========================================================= */
.secondary-navbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  padding: 8px 10px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.secondary-navbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.sec-nav-item {
  color: var(--amber-500);
  font-weight: 750;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sec-nav-item:hover {
  color: var(--violet-650);
}

.sec-nav-dot {
  color: var(--red-500);
  font-weight: 900;
  font-size: 16px;
  user-select: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 8px;
  max-width: 1400px;
  margin: 0 auto;
}

.icon-btn {
  background: transparent;
  border: none;
  color: #fff;
  padding: 6px;
  border-radius: var(--radius-s);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, .12);
}

.icon-btn--ghost {
  color: var(--text-dark);
}

.logo {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.logo-image {
  height: 38px;
  width: 100px;
  object-fit: cover;
  display: block;
}

.logo-mark {
  color: #fff;
}

.logo-accent {
  color: var(--amber-500);
}

.header-actions {
  display: flex;
  gap: 8px;
}

.btn {
  border: none;
  border-radius: var(--radius-s);
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 700;
  transition: transform .12s ease, opacity .12s ease, filter .12s ease;
}

.btn:hover {
  filter: brightness(1.05);
}

.btn:active {
  transform: scale(.97);
}

.btn-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .65);
}

.btn-accent {
  background: var(--gold-gradient);
  color: var(--violet-900);
}

.btn-header-login {
  background: var(--gold-gradient);
  color: var(--violet-900);
  border-radius: 0 !important;
}

.btn-header-signup {
  background: #ffffff;
  color: var(--violet-900);
  border-radius: 0 !important;
}

.btn-light {
  background: #fff;
  color: var(--text-dark);
  box-shadow: var(--shadow-card);
}

.btn-telegram {
  background: var(--navy-700);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* =========================================================
   Mobile slide menu
   ========================================================= */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}

.mobile-menu-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 30, .55);
  opacity: 0;
  transition: opacity .25s ease;
}

.mobile-menu-overlay.is-open .mobile-menu-backdrop {
  opacity: 1;
}

.mobile-menu {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 78%;
  max-width: 300px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .28s ease;
  box-shadow: var(--shadow-pop);
}

.mobile-menu-overlay.is-open .mobile-menu {
  transform: translateX(0);
}

.mobile-menu-header {
  background: var(--violet-700);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-dark);
}

.mobile-menu-header .logo-mark {
  color: var(--text-dark);
}

.mobile-menu-header .logo-accent {
  color: var(--red-500);
}

.mobile-menu-header .icon-btn {
  color: var(--text-dark) !important;
}

.mobile-menu-header .logo {
  font-size: 18px;
}

.mobile-menu .nav-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.mobile-menu-footer {
  padding: 14px;
  border-top: 1px solid var(--border-color);
}

.mobile-menu-footer p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 8px;
}

/* shared nav-list item style (mobile menu + desktop sidebar) */
.nav-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.nav-list li:hover {
  background: var(--violet-100);
  color: var(--violet-700);
}

.nav-list li .ic {
  width: 18px;
  height: 18px;
  color: var(--violet-500);
}

.nav-list li:hover .ic {
  color: var(--violet-700);
}

.nav-list li .game-icon-img {
  width: 18px;
  height: 18px;
}

/* =========================================================
   Layout grid
   ========================================================= */
.layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar {
  display: none;
}

.betslip-rail {
  display: none;
}

/* =========================================================
   Hero carousel
   ========================================================= */
.hero-carousel {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  touch-action: pan-y;
}

.hero-slide {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  background-size: contain !important;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  background-clip: content-box !important;
}

.hero-slide--1 {
  background-image: url("images/firstsliderimages/WhatsApp Image 2026-06-21 at 4.12.36 PM.jpeg");
}

.hero-slide--2 {
  background-image: url("images/firstsliderimages/WhatsApp Image 2026-06-21 at 4.12.37 PM.jpeg");
}

.hero-slide--3 {
  background-image: url("images/firstsliderimages/WhatsApp Image 2026-06-21 at 4.12.37 PM (1).jpeg");
}

.hero-slide--4 {
  background-image: url("images/firstsliderimages/WhatsApp Image 2026-06-21 at 4.12.38 PM.jpeg");
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background .15s ease;
}

.hero-arrow:hover {
  background: rgba(0, 0, 0, .5);
}

.hero-arrow--prev {
  left: 8px;
}

.hero-arrow--next {
  right: 8px;
}

.owl-dots {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  z-index: 1000 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  padding: 2px 10px !important;
  border-radius: 20px !important;
}

.owl-dot {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  outline: none !important;
}

.owl-dot span {
  display: block !important;
  width: 14px !important;
  height: 3px !important;
  background: rgba(255, 255, 255, 0.4) !important;
  border-radius: 2px !important;
  transition: all 0.25s ease !important;
  margin: 5px 2px !important;
}

.owl-dot.active span {
  width: 28px !important;
  background: #ffffff !important;
}

/* =========================================================
   Horizontal scroll rows (generic)
   ========================================================= */
.scroll-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--amber-500) rgba(255, 255, 255, 0.05);
  cursor: grab;
  user-select: none;
}

.scroll-row::-webkit-scrollbar {
  height: 5px;
}

.scroll-row::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.scroll-row::-webkit-scrollbar-thumb {
  background: var(--gold-gradient);
  border-radius: 3px;
}

.scroll-row.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* quick game tiles */
.quick-tile {
  flex: 0 0 auto;
  width: 110px;
  height: 55px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: flex-end;
  padding: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
}

.tile-content-container {
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
  width: 100%;
}

.tile-icon {
  width: 12px;
  height: 12px;
  color: #FFD200 !important;
}

.tile-label {
  font-size: 9px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-base);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

/* category tabs */
.category-tabs .scroll-row {
  display: grid;
  grid-template-rows: repeat(2, 50px);
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: 8px 12px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--amber-500) rgba(255, 255, 255, 0.05);
  cursor: grab;
  user-select: none;
}

.category-tab {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  height: 100%;
  width: 100%;
}

.tab-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 1;
}

.category-tab span {
  z-index: 2;
  font-family: var(--font-base);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
}

.tab-icon {
  width: 16px;
  height: 16px;
  color: #ffffff !important;
  z-index: 2;
}

/* providers */
.provider-chip {
  flex: 0 0 auto;
  min-width: 110px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-m);
  padding: 14px 10px;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--violet-700);
  letter-spacing: .3px;
}

/* exchange/popular game cards */
.scroll-row--cards-double {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: 140px;
  gap: 10px 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--amber-500) rgba(255, 255, 255, 0.05);
  cursor: grab;
  user-select: none;
  padding: 4px 2px 14px;
}

.scroll-row--cards-double::-webkit-scrollbar {
  height: 5px;
}

.scroll-row--cards-double::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.scroll-row--cards-double::-webkit-scrollbar-thumb {
  background: var(--gold-gradient);
  border-radius: 3px;
}

.scroll-row--cards-double.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* providers row */
.scroll-row--providers {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--amber-500) rgba(255, 255, 255, 0.05);
  cursor: grab;
  user-select: none;
  padding: 4px 2px 14px;
}

.scroll-row--providers::-webkit-scrollbar {
  height: 5px;
}

.scroll-row--providers::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.scroll-row--providers::-webkit-scrollbar-thumb {
  background: var(--gold-gradient);
  border-radius: 3px;
}

.scroll-row--providers.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.scroll-row--providers .game-card {
  flex: 0 0 auto;
  width: 140px;
}

.game-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color);
}

.game-card-img {
  aspect-ratio: 1.45 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
}

.game-card-info {
  background: var(--bg-card);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.game-card-title {
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  font-family: var(--font-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-card-sub {
  color: var(--amber-500);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: var(--font-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #ffffff;
  color: var(--orange-500);
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

.bar--dark .bar-icon {
  color: var(--violet-700);
}

/* =========================================================
   Promo banners
   ========================================================= */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
  padding: 4px 2px;
}

.promo-banner {
  width: 100%;
  aspect-ratio: 4.3 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.promo-banner:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.promo-banner-title {
  display: none;
}

.promo-banner--aviator {
  background-image: url("images/img/aviator.c945eef2.gif");
}

.promo-banner--mines {
  background-image: url("images/img/mines.51d0b312.gif");
}

.promo-banner--fungames {
  background-image: url("images/img/fungames.2c3754ec.gif");
}

.promo-banner--colorprediction {
  background-image: url("images/img/color-pridiction.79d759ce.gif");
}

/* =========================================================
   Section bars
   ========================================================= */
.bar {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radius-s);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bar--dark {
  background: var(--navy-700);
}

.bar--accent {
  background: var(--orange-500);
}

/* =========================================================
   Inplay / sport blocks
   ========================================================= */
.inplay-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sport-block {
  background: #ffffff;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--amber-500) rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e5e7;
}

.sport-block::-webkit-scrollbar {
  height: 4px;
}

.sport-block::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.sport-block::-webkit-scrollbar-thumb {
  background: var(--gold-gradient);
  border-radius: 2px;
}

.sport-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fbfbfa;
  padding: 9px 12px;
  min-width: 520px;
  border-bottom: 1px solid #e5e5e7;
}

.sport-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #1d1c00;
}

.sport-name .ic {
  width: 18px;
  height: 18px;
  color: #bd7e2b;
}

.col-headers {
  display: flex;
  gap: 4px;
  width: 250px;
  flex-shrink: 0;
}

.col-headers span {
  font-size: 10.5px;
  font-weight: 800;
  width: 38px;
  text-align: center;
  color: #666666;
}

.col-headers span.hdr-back {
  color: #0d47a1;
}

.col-headers span.hdr-lay {
  color: #c2185b;
}

.match-list {
  display: flex;
  flex-direction: column;
}

.match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-top: 1px solid #f0f0f2;
  gap: 12px;
  position: relative;
  min-width: 520px;
  background: #ffffff;
}

.match-info {
  min-width: 0;
  flex: 1;
}

.match-teams {
  font-size: 13px;
  font-weight: 700;
  color: #1d1c00;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-teams .ic {
  width: 14px;
  height: 14px;
  color: var(--red-500);
}

.match-time {
  font-size: 11px;
  color: #666666;
  margin-top: 3px;
}

.odds-cols {
  display: flex;
  gap: 4px;
  width: 250px;
  flex-shrink: 0;
}

.odd-cell {
  width: 38px;
  height: 42px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s ease;
}

.odd-cell:active {
  transform: scale(0.95);
}

.odd-cell .odd-value {
  font-size: 11px;
  font-weight: 800;
  color: inherit;
  line-height: 1.1;
}

.odd-cell .odd-vol {
  font-size: 8px;
  font-weight: 600;
  color: inherit;
  opacity: 0.7;
  line-height: 1.1;
  margin-top: 2px;
}

/* Back Cells (first 3) */
.odd-cell.is-back {
  color: #0d47a1;
  background-color: #E2EEFE;
  border-color: #B3D4FF;
}

.odd-cell.is-back:hover {
  background-color: #D2E4FD;
}

/* Lay Cells (next 3) */
.odd-cell.is-lay {
  color: #c2185b;
  background-color: #FCE4E6;
  border-color: #F8BBD0;
}

.odd-cell.is-lay:hover {
  background-color: #FAD2D6;
}

/* Empty Cells */
.odd-cell.is-empty {
  color: #888888;
  background-color: #F2F4F7;
  border-color: #E2E8F0;
  cursor: default;
}

.odd-cell.is-empty:active {
  transform: none;
}

.odd-cell.is-empty .odd-value {
  color: #888888;
  font-weight: 600;
}

/* Suspended Row overlay */
.match-row.is-suspended .odds-cols {
  position: relative;
}

.match-row.is-suspended .odds-cols::after {
  content: "SUSPENDED";
  position: absolute;
  inset: 0;
  background-color: #8E9AA4;
  border: 1px solid #7A8690;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.match-row.is-suspended .odd-cell {
  background-color: #8E9AA4 !important;
  border-color: #7A8690 !important;
  cursor: default;
}

.match-row.is-suspended .odd-cell:active {
  transform: none;
}

.match-row.is-suspended .odd-value,
.match-row.is-suspended .odd-vol {
  visibility: hidden;
}

/* =========================================================
   Game grid (popular games)
   ========================================================= */
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* =========================================================
   Upcoming bar
   ========================================================= */
.upcoming-bar {
  background: var(--gold-gradient);
  color: var(--violet-900);
  border: none;
  border-radius: var(--radius-m);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  width: 100%;
}

/* =========================================================
   Betslip rail (desktop only, see media query)
   ========================================================= */
/* =========================================================
   Credit Box & Details Dropdown
   ========================================================= */
.credit-box-container {
  margin-bottom: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 0;
  overflow: hidden;
}

.credit-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--violet-700);
  color: #fff;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.credit-box .chevron-icon {
  transition: transform 0.2s ease;
}

.credit-details {
  display: none;
  padding: 12px 14px;
  background: var(--bg-card);
}

.credit-details.is-open {
  display: block;
}

.credit-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  border-bottom: 1px solid var(--border-color);
}

.credit-detail-row:last-child {
  border-bottom: none;
}

.credit-detail-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .2s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .2s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: var(--violet-700);
}

input:checked+.slider:before {
  transform: translateX(18px);
}

.betslip-tabs {
  display: flex;
  gap: 0px;
  margin-bottom: 10px;
}

.betslip-tab {
  flex: 1;
  border: none;
  background: var(--navy-700);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 13px;
  padding: 10px;
  border-radius: 0 !important;
}

.betslip-tab.is-active {
  background: var(--gold-gradient);
  color: #000000;
}

.betslip-empty {
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-m);
  padding: 24px 14px;
  text-align: center;
}

.betslip-empty p {
  font-weight: 700;
  margin: 0 0 4px;
  font-size: 13px;
}

.betslip-empty span {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: #000000;
  color: #9CA3AF;
  padding: 36px 20px;
  margin-top: 24px;
  border-top: 1px solid #111;
}

.app-download {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.btn-download-app {
  background: #ffffff;
  color: #000000;
  padding: 10px 24px;
  border-radius: 30px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border: none;
}

.btn-download-app:hover {
  background: #f3f4f6;
  transform: scale(1.02);
}

.download-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.app-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #374151;
}

.app-icons .ic {
  width: 13px;
  height: 13px;
  color: #374151;
}

.footer-license {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 960px;
  margin: 0 auto 28px;
  flex-wrap: wrap;
}

.gaming-curacao-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.gaming-curacao-logo img {
  height: 38px;
  object-fit: contain;
}

.license-text {
  flex: 1;
  font-size: 10.5px;
  line-height: 1.5;
  color: #9CA3AF;
  margin: 0;
  min-width: 280px;
  text-align: left;
}

.payment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.payment-chip {
  background: #000000;
  border: 1px solid #222222;
  color: #ffffff;
  padding: 8px 16px;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 0 !important;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.payment-chip:hover {
  border-color: #444444;
}

.footer-bottom {
  text-align: center;
  font-size: 10.5px;
  color: #4E665A;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* =========================================================
   Floating action buttons
   ========================================================= */
.fab {
  position: fixed;
  right: 14px;
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  box-shadow: var(--shadow-pop);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}

.fab:hover {
  transform: scale(1.06);
}

.fab--chat {
  bottom: 70px;
  background: var(--gold-gradient);
  color: var(--violet-900);
}

.fab--top {
  bottom: 14px;
  background: #fff;
  color: var(--violet-700);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.fab--top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* =========================================================
   MEDIA QUERIES
   ========================================================= */
.secondary-navbar {
  display: none !important;
}

/* ---- ≥375px small refinements ---- */
@media (min-width:375px) {

  .secondary-navbar {
    display: block !important;
  }

  .hero-title {
    font-size: 26px;
  }

  .game-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- ≥414px ---- */
@media (min-width:414px) {
  .quick-tile {
    width: 78px;
  }
}

/* ---- ≥768px : tablet ---- */
@media (min-width:768px) {
  .layout {
    padding: 16px;
    gap: 18px;
  }

  .header-inner {
    padding: 12px 20px;
  }

  .logo {
    font-size: 40px;
  }

  .hero-carousel {
    overflow: hidden;
  }

  .hero-slide {
    aspect-ratio: 2.85 / 1 !important;
    box-sizing: border-box;
    padding: 0 6px;
  }

  .promo-pair {
    gap: 16px;
  }

  .promo-card {
    min-height: 130px;
    padding: 20px;
  }

  .promo-card-text h3 {
    font-size: 22px;
  }

  .game-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  .quick-tile {
    width: 88px;
  }

  .category-tabs .scroll-row {
    grid-template-rows: repeat(2, 56px);
    grid-auto-columns: 280px;
    gap: 10px 14px;
  }

  .scroll-row--cards-double {
    grid-auto-columns: 160px;
    gap: 12px 14px;
  }

  .scroll-row--providers .game-card {
    width: 160px;
  }

  .sport-name {
    font-size: 14px;
  }

  .match-teams {
    font-size: 13.5px;
  }

  .odds-cols {
    width: 330px;
    gap: 5px;
  }

  .odd-cell {
    width: 50px;
    height: 44px;
  }

  .col-headers {
    width: 330px;
    gap: 5px;
  }

  .col-headers span {
    width: 50px;
    font-size: 11.5px;
  }

  .site-footer {
    padding: 36px 24px;
  }

  .promo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .promo-banner {
    width: 100%;
    aspect-ratio: 4.3 / 1;
    height: auto;
  }

  .sport-block-header,
  .match-row {
    min-width: auto;
  }
}

/* ---- ≥1024px : desktop with sidebar + betslip rail ---- */
@media (min-width:1024px) {
  .logo-image {
    height: 58px;
    width: 140px;
    object-fit: cover;
    display: block;
  }

  .hero-slide {
    position: relative;
    aspect-ratio: 2.85 / 1;
    padding: 0px 10px !important;
    background-size: contain !important;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    background-clip: content-box !important;
  }

  .demo-ribbon {
    font-size: 12px;
  }

  .layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 270px;
    align-items: start;
    gap: 16px;
    padding: 18px;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    /* position:sticky; */
    /* top:96px; */
  }

  .sidebar .nav-list {
    flex: 1;
  }

  .sidebar .nav-list li {
    font-size: 13px;
    padding: 10px 14px;
  }

  .sidebar-cta {
    padding: 12px;
    border-top: 1px solid var(--border-color);
  }

  .sidebar-cta p {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 0 8px;
  }

  .betslip-rail {
    display: block;
    /* position: sticky; */
    /* top: 96px; */
  }

  .hamburger {
    display: none;
  }

  .game-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .hero-content {
    max-width: 48%;
  }

  .hero-title {
    font-size: 34px;
  }
}

/* ---- ≥1440px : large desktop ---- */
@media (min-width:1440px) {
  .layout {
    grid-template-columns: 240px minmax(0, 1fr) 300px;
    gap: 20px;
  }

  .hero-slide {
    padding: 0px 10px !important;
    min-height: 140px !important;
    background-clip: content-box !important;
    /* margin: 10px; */
  }

  .hero-title {
    font-size: 38px;
  }

  .hero-sub {
    font-size: 14px;
    max-width: 340px;
  }

  .game-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }
}

/* =========================================================
   Static Icon Classes (URL encoded SVGs)
   ========================================================= */
.ic-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
}

.ic-close {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

.ic-telegram {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 2 2 11l7 3 12-10-9 10v6l3-4 5 4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 2 2 11l7 3 12-10-9 10v6l3-4 5 4Z'/%3E%3C/svg%3E");
}

.ic-chevron-left {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

.ic-chevron-right {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

.ic-chevron-down {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.ic-chevron-up {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
}

.ic-live {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14'/%3E%3C/svg%3E");
}

.ic-android {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v8a5 5 0 0 0 10 0V7a5 5 0 0 0-5-5z'/%3E%3Cline x1='9' y1='2' x2='7' y2='4'/%3E%3Cline x1='15' y1='2' x2='17' y2='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v8a5 5 0 0 0 10 0V7a5 5 0 0 0-5-5z'/%3E%3Cline x1='9' y1='2' x2='7' y2='4'/%3E%3Cline x1='15' y1='2' x2='17' y2='4'/%3E%3C/svg%3E");
}

.ic-apple {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 2a4 4 0 0 1 4 4c0 2-2 4-4 4S8 8 8 6a4 4 0 0 1 4-4zm0 8v8a3 3 0 0 1-3 3H6v-6a3 3 0 0 1 3-3h3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 2a4 4 0 0 1 4 4c0 2-2 4-4 4S8 8 8 6a4 4 0 0 1 4-4zm0 8v8a3 3 0 0 1-3 3H6v-6a3 3 0 0 1 3-3h3z'/%3E%3C/svg%3E");
}

.ic-chat {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.ic-arrow-up {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E");
}

.ic-info {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

.ic-whatsapp {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}

/* WhatsApp Nav Item & FAB support styles */
.nav-whatsapp-item {
  color: #005C3F !important;
  font-weight: 750 !important;
  background: #E6F5EF !important;
  border-top: 1px solid #D0E6DD;
  border-bottom: 1px solid #D0E6DD;
}

.nav-whatsapp-item .ic {
  color: #aa4b2b !important;
}

.fab--whatsapp {
  left: 14px;
  bottom: 24px;
  background: var(--gold-gradient);
  color: var(--violet-900);
  width: 50px;
  height: 50px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-pop);
}

.fab--whatsapp:hover {
  background: var(--gold-gradient);
  filter: brightness(1.1);
}

.fab--whatsapp::before {
  content: "24x7 SUPPORT";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--violet-900);
  color: #ffffff;
  font-size: 7px;
  font-weight: 900;
  white-space: nowrap;
  padding: 2px 4px;
  border-radius: 0px;
  border: 1px solid #2BAA6A;
}

/* =========================================================
   Lotus365 Premium Footer Styles
   ========================================================= */
.site-footer {
  background-color: #000000;
  color: #ffffff;
  padding: 30px 16px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-base);
  border-top: 1px solid #111111;
}

/* App Download Pill Button */
.app-download {
  margin-bottom: 28px;
}

.btn-download-app {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: none;
  border-radius: 30px !important;
  padding: 6px 24px !important;
  font-family: var(--font-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.btn-download-app:hover {
  transform: scale(1.03);
  opacity: 0.95;
}

.download-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.2;
}

.app-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  margin-top: 2px;
  color: #000000;
}

.app-icons .ic {
  width: 12px;
  height: 12px;
  background-color: #000000;
}

/* Footer License Section */
.footer-license {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 1000px;
  width: 100%;
  padding: 24px 0;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.gaming-curacao-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  user-select: none;
}

.license-badge-art {
  background: linear-gradient(135deg, #00b4db 0%, #0083b0 30%, #ec008c 60%, #e65c00 85%, #f5af19 100%);
  width: 60px;
  height: 52px;
  border-radius: 40% 60% 50% 50% / 50% 60% 40% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.license-badge-text {
  font-size: 18px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  text-shadow: 1px 1.5px 3px rgba(0, 0, 0, 0.4);
}

.gaming-curacao-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.gc-main {
  font-size: 10px;
  font-weight: 700;
  color: #777777;
  letter-spacing: 1.5px;
  line-height: 1;
}

.gc-sub {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.license-text {
  flex: 1;
  min-width: 280px;
  font-size: 11px;
  line-height: 1.5;
  color: #999999;
  text-align: left;
  margin: 0;
}

/* Payment Chips Row */
.payment-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 1000px;
  margin-bottom: 24px;
}

.payment-chip {
  background-color: #000000;
  border: 1px solid #222222;
  color: #ffffff;
  padding: 6px 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  user-select: none;
}

.payment-chip:hover {
  border-color: #444444;
  background-color: #111111;
}

/* Bottom Copyright Bar */
.footer-bottom {
  font-size: 11px;
  color: #555555;
  margin: 0;
  letter-spacing: 0.2px;
}

/* FAB override for circular icons */
.fab {
  border-radius: 50% !important;
}

/* Responsive adjustment for license block */
@media (max-width: 767px) {
  .footer-license {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .license-text {
    text-align: center;
  }

  .gaming-curacao-text {
    text-align: center;
    align-items: center;
  }
}