/* ==========================================================================
   33 CLUB - PREMIUM LUXURY CASINO REDESIGN OVERRIDES
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL & CORE THEME OVERRIDES
   -------------------------------------------------------------------------- */
:root {
  --primary-color: #FFB300 !important; /* Premium Gold */
  --secondary-color: #FF8A00 !important; /* Secondary Orange */
  --bg-color: #0A0A0A !important;
  --card-color: rgba(20, 20, 20, 0.65) !important;
  --text-color: #FFFFFF !important;
  --border-color: rgba(255, 255, 255, 0.08) !important;
  --main-color: #FFB300 !important;
  --main_gradient-color: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(90deg, #FFB300 0%, #FF8A00 100%) !important;
  --main_gradient-color2: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #FFB300 0%, #FF8A00 100%) !important;
  /* Popup / Dialog background override: white */
  --van-popup-background: #FFFFFF !important;
  --van-dialog-background: #FFFFFF !important;
  --van-action-sheet-header-background: #FFFFFF !important;
}

html, body, #app, .content, .van-tabs__content, .van-tab__panel, .allGames__container {
  background-color: #0A0A0A !important;
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  font-family: 'Inter', 'Roboto', 'Outfit', -apple-system, sans-serif !important;
}

/* Smooth typography */
h1, h2, h3, h4, h5, h6, span, p, div {
  font-family: 'Inter', 'Roboto', 'Outfit', sans-serif !important;
}

/* --------------------------------------------------------------------------
   2. HEADER & NAVIGATION BAR
   -------------------------------------------------------------------------- */
.navbar, .navbar-fixed, .van-nav-bar {
  background: rgba(10, 10, 10, 0.65) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1.5px solid rgba(255, 179, 0, 0.3) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.65) !important;
}

.navbar__content {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 0.4rem !important;
}

/* Center 33 Club Logo in the header middle */
.navbar__content-center {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

.navbar__content-center .headLogo {
  background-image: url('/logo.png') !important;
  width: 3.4rem !important;
  height: 1.1rem !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: drop-shadow(0 2px 8px rgba(255, 179, 0, 0.3)) !important;
}

/* Right Header Container - holds wallet card & icons */
.navbar__content-right,
.van-nav-bar__right {
  position: absolute !important;
  right: 0.32rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.3rem !important;
  width: auto !important;
}

/* Force all header right items to behave as flex children and separate them */
.navbar__content-right > *,
.van-nav-bar__right > * {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* Support and Music button containers in lottery pages */
[class*="-head-more"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.3rem !important;
  width: auto !important;
  height: auto !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[class*="-head-more"] > div {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  background-size: 0.44rem !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Absolute fallback positioning to ensure support and music buttons NEVER overlap */
.navbar__content-right > *:has(.icon-serviceCenter),
.navbar__content-right > *:has([class*="service"]),
.navbar__content-right > *:has([class*="customer"]),
.van-nav-bar__right > *:has(.icon-serviceCenter),
.van-nav-bar__right > *:has([class*="service"]),
.van-nav-bar__right > *:has([class*="customer"]),
.navbar__content-right > [class*="customer"],
.navbar__content-right > [class*="service"],
.van-nav-bar__right > [class*="customer"],
.van-nav-bar__right > [class*="service"] {
  position: absolute !important;
  right: 1.35rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  z-index: 101 !important;
}

.navbar__content-right > *:has(.icon-voice),
.navbar__content-right > *:has([class*="voice"]),
.navbar__content-right > *:has([class*="audio"]),
.van-nav-bar__right > *:has(.icon-voice),
.van-nav-bar__right > *:has([class*="voice"]),
.van-nav-bar__right > *:has([class*="audio"]),
.navbar__content-right > [class*="voice"],
.navbar__content-right > [class*="audio"],
.van-nav-bar__right > [class*="voice"],
.van-nav-bar__right > [class*="audio"] {
  position: absolute !important;
  right: 0.35rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  z-index: 101 !important;
}

/* Wallet Card styling in header */
.navbar__content-right [class*="wallet"],
.navbar__content-right [class*="balance"],
.navbar__content [class*="balance-card"],
.navbar__content-right .right,
.navbar__content-right [class*="account"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 30%), rgba(20, 20, 20, 0.65) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 179, 0, 0.25) !important;
  border-radius: 30px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.34rem !important;
  box-shadow: 0 4px 15px rgba(255, 179, 0, 0.15) !important;
}

/* Orange circular '+' deposit button in wallet card */
.navbar__content-right [class*="deposit-btn"],
.navbar__content-right [class*="plus-btn"],
.navbar__content-right .add-btn,
.navbar__content-right [class*="add"],
.navbar__content-right span[class*="plus"],
.navbar__content-right button[class*="plus"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #FFB300, #FF8A00) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 22px !important;
  box-shadow: 0 2px 8px rgba(255, 138, 0, 0.45) !important;
  transition: all 0.2s ease !important;
}

/* Circle containers for notification and profile icons */
.navbar__content-right > *:not([class*="wallet"]):not([class*="balance"]):not([class*="card"]):not([class*="right"]):not([class*="account"]):not([class*="-head-more"]),
.van-nav-bar__right > *:not([class*="wallet"]):not([class*="balance"]):not([class*="card"]):not([class*="right"]):not([class*="account"]):not([class*="-head-more"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 0.8rem !important;
  height: 0.8rem !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%), rgba(20, 20, 20, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

.navbar__content-right > *:not([class*="wallet"]):not([class*="balance"]):not([class*="card"]):not([class*="right"]):not([class*="account"]):not([class*="-head-more"]):hover,
.van-nav-bar__right > *:not([class*="wallet"]):not([class*="balance"]):not([class*="card"]):not([class*="right"]):not([class*="account"]):not([class*="-head-more"]):hover {
  border-color: #FFB300 !important;
  box-shadow: 0 0 8px rgba(255, 179, 0, 0.5) !important;
  transform: scale(1.05) !important;
}

/* Circle containers for lottery page support and voice buttons (prevents clearing background images) */
[class*="-head-more"] > div {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 0.8rem !important;
  height: 0.8rem !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background-color: rgba(20, 20, 20, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

[class*="-head-more"] > div:hover {
  border-color: #FFB300 !important;
  box-shadow: 0 0 8px rgba(255, 179, 0, 0.5) !important;
  transform: scale(1.05) !important;
}

/* Header Icons (Bell, Profile) */
.navbar__content-right svg,
.navbar__content-right .van-icon,
.navbar__content-right [class*="icon"],
.navbar__content-right .navbar-icon {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  font-size: 0.44rem !important;
  width: 0.44rem !important;
  height: 0.44rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)) !important;
  margin: 0 !important;
}

.navbar__content-right svg:hover,
.navbar__content-right .van-icon:hover {
  color: #FF8A00 !important; /* Active / hovered icon colored orange */
  fill: #FF8A00 !important;
}

/* --------------------------------------------------------------------------
   3. BANNER SLIDER
   -------------------------------------------------------------------------- */
#app .swiper_box, .van-swipe {
  border-radius: 22px !important;
  border: 1.5px solid rgba(255, 179, 0, 0.2) !important;
  background: rgba(10, 10, 10, 0.95) !important;
  box-shadow: 0 8px 30px rgba(255, 179, 0, 0.15) !important;
  overflow: hidden !important;
}

/* Swipe Indicator Dots */
.van-swipe__indicators {
  bottom: 12px !important;
}

.swiper_box .swiper-button span,
.van-swipe__indicator {
  background-color: rgba(255, 255, 255, 0.2) !important;
  opacity: 1 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  margin: 0 4px !important;
}

.swiper_box .swiper-button .active,
.van-swipe__indicator--active {
  background: #FF8A00 !important;
  width: 18px !important;
  border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   4. NOTICE BAR
   -------------------------------------------------------------------------- */
.noticeBar__container {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), rgba(10, 10, 10, 0.75) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0 0.32rem !important;
  height: 1.1rem !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Speaker icon - filtered to vivid orange */
.noticeBar__container .notice_svg,
.noticeBar__container svg,
.noticeBar__container img[class*="voice"],
.noticeBar__container [class*="speaker"] {
  filter: none !important;
  color: #FF8A00 !important;
  fill: #FF8A00 !important;
}

.noticeBar__container-body-text {
  color: #FFFFFF !important;
  font-weight: 500 !important;
  font-size: 0.28rem !important;
}

/* Gold Button inside notice bar */
.noticeBar__container button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #FFB300 0%, #FF8A00 100%) !important;
  border: none !important;
  border-radius: 20px !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
  font-size: 0.3rem !important;
  padding: 0 0.35rem !important;
  height: 0.7rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 12px rgba(255, 138, 0, 0.4) !important;
  transition: all 0.2s ease !important;
}

.noticeBar__container button::after {
  content: "\00a0\203A" !important;
  font-family: Arial, sans-serif !important;
  font-size: 0.36rem !important;
  font-weight: bold !important;
  display: inline-block !important;
  margin-left: 4px !important;
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   5. CATEGORY CARDS
   -------------------------------------------------------------------------- */
.allGames__container .tabs, .allGames__container-tabBar {
  background: transparent !important;
}

.allGames__container .tab_item, .tab_item {
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 30%), rgba(20, 20, 20, 0.65) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  position: relative;
  overflow: hidden;
}

/* Top glossy highlight reflection line */
.allGames__container .tab_item::before, .tab_item::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%) !important;
}

.allGames__container .tab_item span {
  font-size: 0.28rem !important;
  font-weight: bold !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
}

/* Hover scales category card and lifts it */
.allGames__container .tab_item:hover, .tab_item:hover {
  transform: translateY(-4px) !important;
}

/* Specific Glowing Borders & Soft shadows for Category items */
.allGames__container .tab_item:nth-child(1), .tab_item:nth-child(1) {
  border: 1px solid rgba(255, 179, 0, 0.35) !important;
  box-shadow: 0 4px 15px rgba(255, 179, 0, 0.2) !important;
}
.allGames__container .tab_item:nth-child(1):hover, .tab_item:nth-child(1):hover {
  box-shadow: 0 8px 25px rgba(255, 179, 0, 0.35) !important;
}

.allGames__container .tab_item:nth-child(2), .tab_item:nth-child(2) {
  border: 1px solid rgba(155, 72, 219, 0.35) !important;
  box-shadow: 0 4px 15px rgba(155, 72, 219, 0.2) !important;
}
.allGames__container .tab_item:nth-child(2):hover, .tab_item:nth-child(2):hover {
  box-shadow: 0 8px 25px rgba(155, 72, 219, 0.35) !important;
}

.allGames__container .tab_item:nth-child(3), .tab_item:nth-child(3) {
  border: 1px solid rgba(220, 53, 69, 0.35) !important;
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2) !important;
}
.allGames__container .tab_item:nth-child(3):hover, .tab_item:nth-child(3):hover {
  box-shadow: 0 8px 25px rgba(220, 53, 69, 0.35) !important;
}

.allGames__container .tab_item:nth-child(4), .tab_item:nth-child(4) {
  border: 1px solid rgba(224, 64, 251, 0.35) !important;
  box-shadow: 0 4px 15px rgba(224, 64, 251, 0.2) !important;
}
.allGames__container .tab_item:nth-child(4):hover, .tab_item:nth-child(4):hover {
  box-shadow: 0 8px 25px rgba(224, 64, 251, 0.35) !important;
}

.allGames__container .tab_item:nth-child(5), .tab_item:nth-child(5) {
  border: 1px solid rgba(0, 123, 255, 0.35) !important;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2) !important;
}
.allGames__container .tab_item:nth-child(5):hover, .tab_item:nth-child(5):hover {
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.35) !important;
}

.allGames__container .tab_item:nth-child(6), .tab_item:nth-child(6) {
  border: 1px solid rgba(40, 167, 69, 0.35) !important;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2) !important;
}
.allGames__container .tab_item:nth-child(6):hover, .tab_item:nth-child(6):hover {
  box-shadow: 0 8px 25px rgba(40, 167, 69, 0.35) !important;
}

.allGames__container .tab_item:nth-child(7), .tab_item:nth-child(7) {
  border: 1px solid rgba(23, 162, 184, 0.35) !important;
  box-shadow: 0 4px 15px rgba(23, 162, 184, 0.2) !important;
}
.allGames__container .tab_item:nth-child(7):hover, .tab_item:nth-child(7):hover {
  box-shadow: 0 8px 25px rgba(23, 162, 184, 0.35) !important;
}

.allGames__container .tab_item:nth-child(8), .tab_item:nth-child(8) {
  border: 1px solid rgba(255, 138, 0, 0.35) !important;
  box-shadow: 0 4px 15px rgba(255, 138, 0, 0.2) !important;
}
.allGames__container .tab_item:nth-child(8):hover, .tab_item:nth-child(8):hover {
  box-shadow: 0 8px 25px rgba(255, 138, 0, 0.35) !important;
}

/* Category Grid Client-Side Image Overrides */
.allGames__container .tab_item:nth-child(1) img,
.tab_item:nth-child(1) img {
  content: url('/assets/png/popular-044514e1.png') !important;
}
.allGames__container .tab_item:nth-child(2) img,
.tab_item:nth-child(2) img {
  content: url('/assets/png/lottery-c0a9176b.png') !important;
}
.allGames__container .tab_item:nth-child(3) img,
.tab_item:nth-child(3) img {
  content: url('/assets/png/video-c9dce622.png') !important;
}
.allGames__container .tab_item:nth-child(4) img,
.tab_item:nth-child(4) img {
  content: url('/assets/png/slot-bf07af03.png') !important;
}
.allGames__container .tab_item:nth-child(5) img,
.tab_item:nth-child(5) img {
  content: url('/assets/png/sport-ac79bf87.png') !important;
}
.allGames__container .tab_item:nth-child(6) img,
.tab_item:nth-child(6) img {
  content: url('/assets/png/chess-9c4d1dff.png') !important;
}
.allGames__container .tab_item:nth-child(7) img,
.tab_item:nth-child(7) img {
  content: url('/assets/png/fish-a70df76d.png') !important;
}
.allGames__container .tab_item:nth-child(8) img,
.tab_item:nth-child(8) img {
  content: url('/assets/png/turntable-b345db9e.png') !important;
}

/* --------------------------------------------------------------------------
   6. LOTTERY SECTION & CARDS
   -------------------------------------------------------------------------- */
.lotteryGames__container {
  background-color: #0A0A0A !important;
}

.gamesList__container-title {
  color: #FFFFFF !important;
  font-size: 0.38rem !important;
  font-weight: bold !important;
}
.gamesList__container-title:before {
  background: #FF8A00 !important;
}

/* Lottery Cards Wrapper */
.lotterySlotItem,
.lotteryGamesList__container-item,
.gamesList__container-list__item {
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.lotterySlotItem:hover,
.lotteryGamesList__container-item:hover,
.gamesList__container-list__item:hover {
  transform: translateY(-4px) !important;
}

/* Win Go Card Override - Dark Red Glass */
.lotterySlotItem:nth-child(1),
.lotteryGamesList__container-item:nth-child(1),
.gamesList__container-list__item:nth-child(1) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 35%), rgba(50, 4, 4, 0.7) !important;
  border: 1px solid rgba(210, 56, 56, 0.35) !important;
  box-shadow: 0 8px 30px rgba(210, 56, 56, 0.25) !important;
}

/* K3 Card Override - Dark Purple Glass */
.lotterySlotItem:nth-child(2),
.lotteryGamesList__container-item:nth-child(2),
.gamesList__container-list__item:nth-child(2) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 35%), rgba(29, 3, 50, 0.7) !important;
  border: 1px solid rgba(155, 72, 219, 0.35) !important;
  box-shadow: 0 8px 30px rgba(155, 72, 219, 0.25) !important;
}

/* 5D Card Override - Dark Green Glass */
.lotterySlotItem:nth-child(3),
.lotteryGamesList__container-item:nth-child(3),
.gamesList__container-list__item:nth-child(3) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 35%), rgba(5, 36, 12, 0.7) !important;
  border: 1px solid rgba(23, 177, 94, 0.35) !important;
  box-shadow: 0 8px 30px rgba(23, 177, 94, 0.25) !important;
}

/* Typography inside Lottery Cards */
.lotterySlotItem span, .lotteryGamesList__container-item__time, .lotterySlotItem__container span {
  color: #FFFFFF !important;
}

/* Timer Badges inside Lottery Cards */
.lotteryGamesList__container-item__time,
.lotterySlotItem [class*="time"],
.gamesList__container-list__item [class*="time"] {
  font-size: 0.24rem !important;
  font-weight: bold !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.lotterySlotItem:nth-child(1) [class*="time"],
.lotteryGamesList__container-item:nth-child(1) [class*="time"],
.gamesList__container-list__item:nth-child(1) [class*="time"] {
  background: #D23838 !important;
}

.lotterySlotItem:nth-child(2) [class*="time"],
.lotteryGamesList__container-item:nth-child(2) [class*="time"],
.gamesList__container-list__item:nth-child(2) [class*="time"] {
  background: #9B48DB !important;
}

.lotterySlotItem:nth-child(3) [class*="time"],
.lotteryGamesList__container-item:nth-child(3) [class*="time"],
.gamesList__container-list__item:nth-child(3) [class*="time"] {
  background: #17B15E !important;
}

/* Homepage Lottery List Cards Image Overrides */
.lotterySlotItem:nth-child(1) img,
.lotteryGamesList__container-item:nth-child(1) img,
.gamesList__container-list__item:nth-child(1) img {
  content: url('/assets/png/lottery_wingo.png') !important;
  width: auto !important;
  height: 100% !important;
}
.lotterySlotItem:nth-child(2) img,
.lotteryGamesList__container-item:nth-child(2) img,
.gamesList__container-list__item:nth-child(2) img {
  content: url('/assets/png/lottery_k3.png') !important;
  width: auto !important;
  height: 100% !important;
}
.lotterySlotItem:nth-child(3) img,
.lotteryGamesList__container-item:nth-child(3) img,
.gamesList__container-list__item:nth-child(3) img {
  content: url('/assets/png/lottery_5d.png') !important;
  width: auto !important;
  height: 100% !important;
}

/* 3D Glossy Sphere Results Balls */
.green-color,
.red-color,
.violet-color,
.big-color,
.small-color,
.van-tag--green,
.van-tag--danger,
.van-tag--primary,
[class*="ball"],
[class*="circle"]:not(.van-circle):not(.van-circle__text),
.ball,
.circle:not(.van-circle):not(.van-circle__text) {
  border-radius: 50% !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-family: 'Bahnschrift', 'Inter', sans-serif !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  box-shadow: inset -4px -4px 12px rgba(0, 0, 0, 0.5), 
              inset 4px 4px 12px rgba(255, 255, 255, 0.45), 
              0 6px 15px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.green-color {
  background: radial-gradient(circle at 35% 35%, #2eff94 0%, #17b15e 40%, #08552b 100%) !important;
}
.red-color {
  background: radial-gradient(circle at 35% 35%, #ff6b6b 0%, #d23838 40%, #681111 100%) !important;
}
.violet-color {
  background: radial-gradient(circle at 35% 35%, #dfa5ff 0%, #9b48db 40%, #4a1575 100%) !important;
}
.big-color {
  background: radial-gradient(circle at 35% 35%, #ffb85c 0%, #ff8a00 40%, #8c4300 100%) !important;
}
.small-color {
  background: radial-gradient(circle at 35% 35%, #5cadff 0%, #007bff 40%, #003c80 100%) !important;
}

/* --------------------------------------------------------------------------
   7. BOTTOM NAVIGATION BAR
   -------------------------------------------------------------------------- */
.tabbar__container {
  background: rgba(10, 10, 10, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  background-image: none !important;
  border-top: 1.5px solid rgba(255, 179, 0, 0.2) !important;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6) !important;
  height: 1.73rem !important;
}

.tabbar__container-item {
  color: #BDBDBD !important; /* Secondary text gray */
}

.tabbar__container-item.active {
  color: #FFB300 !important; /* Active text color gold */
  background: radial-gradient(circle at center, rgba(255, 138, 0, 0.15) 0%, transparent 70%) !important;
  text-shadow: 0 0 12px rgba(255, 138, 0, 0.6) !important;
}

.tabbar__container-item.active i,
.tabbar__container-item.active .van-icon,
.tabbar__container-item.active svg,
.tabbar__container-item.active svg path,
.tabbar__container-item.active img {
  color: #FFB300 !important;
  fill: #FFB300 !important;
}

.tabbar__container-item svg path {
  fill: #BDBDBD !important;
}

.tabbar__container-item.active svg path {
  fill: #FFB300 !important;
}

/* Floating Center Button (Promotion, 3rd Tab Item) styling */
.tabbar__container-item:nth-of-type(3) .promotionBg {
  background: rgba(10, 10, 10, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 179, 0, 0.3) !important;
  box-shadow: 0 -4px 20px rgba(255, 138, 0, 0.4) !important;
  width: 1.55rem !important;
  height: 1.55rem !important;
  bottom: 0.58rem !important;
  border-radius: 50% !important;
  z-index: 2 !important;
}

.tabbar__container-item:nth-of-type(3) .promotionBg::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #FFB300 0%, #FF8A00 100%) !important;
  width: 1.36rem !important;
  height: 1.36rem !important;
  border-radius: 50% !important;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

/* 33 Logo Shield inside Center button */
.tabbar__container-item:nth-of-type(3) svg {
  width: 0.95rem !important;
  height: 0.95rem !important;
  top: -0.42rem !important;
  z-index: 3 !important;
}

.tabbar__container-item:nth-of-type(3) svg path {
  display: none !important;
}

/* Insert inline custom SVG of 33 Shield Logo */
.tabbar__container-item:nth-of-type(3) svg {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'><defs><linearGradient id='goldGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%23FFE57F'/><stop offset='50%25' stop-color='%23FFC107'/><stop offset='100%25' stop-color='%23FF8F00'/></linearGradient></defs><path d='M24 4L8 10V22C8 32.5 16 41 24 44C32 41 40 32.5 40 22V10L24 4Z' fill='rgba(0,0,0,0.6)' stroke='url(%23goldGrad)' stroke-width='3.5' stroke-linejoin='round'/><text x='24' y='30' font-family='Arial Black, Impact, sans-serif' font-weight='900' font-size='18' fill='url(%23goldGrad)' text-anchor='middle'>33</text></svg>") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* --------------------------------------------------------------------------
   8. PREMIUM BUTTONS & INTERACTIONS
   -------------------------------------------------------------------------- */
.van-button {
  border-radius: 30px !important;
  font-weight: bold !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Gold Gradient buttons */
.van-button--primary,
.van-button--danger,
.van-button--warning,
.cg-default.van-button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #FFB300 0%, #FF8A00 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(255, 138, 0, 0.35) !important;
}

.van-button:hover,
button:hover {
  filter: brightness(1.15) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 20px rgba(255, 138, 0, 0.5) !important;
}

.van-button:active,
button:active {
  transform: translateY(0.5px) scale(0.96) !important;
  box-shadow: 0 2px 8px rgba(255, 138, 0, 0.3) !important;
  filter: brightness(0.95) !important;
}

/* --------------------------------------------------------------------------
   9. POPUPS, MODALS, DIALOGS
   -------------------------------------------------------------------------- */
.van-popup:not([class*="WinningTip"]):not([class*="Winning"]), 
.van-dialog:not([class*="WinningTip"]):not([class*="Winning"]), 
.van-action-sheet, .van-modal, .dialog:not([class*="WinningTip"]), .popup:not([class*="WinningTip"]), .modal {
  background-color: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1.5px solid rgba(255, 179, 0, 0.35) !important;
  border-radius: 20px !important;
  color: #1A1A1A !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
}



.van-dialog__header {
  color: #1A1A1A !important;
  font-weight: bold !important;
  font-size: 0.4rem !important;
}
.van-dialog__content, .van-dialog__message {
  color: #333333 !important;
  font-size: 0.34rem !important;
}
.van-dialog__footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(245, 245, 245, 0.9) !important;
}
.van-dialog__confirm, .van-dialog__confirm:active {
  color: #FF8A00 !important;
  background: transparent !important;
  font-weight: bold !important;
}
.van-dialog__cancel, .van-dialog__cancel:active {
  color: #888888 !important;
  background: transparent !important;
}
.van-hairline--top::after, .van-hairline--bottom::after, .van-hairline--left::after, .van-hairline--right::after, .van-hairline--surround::after {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
/* Popup text elements should be dark on white background (excluding winning popups) */
.van-popup:not([class*="WinningTip"]):not([class*="Winning"]) p, 
.van-popup:not([class*="WinningTip"]):not([class*="Winning"]) span, 
.van-popup:not([class*="WinningTip"]):not([class*="Winning"]) div,
.van-dialog:not([class*="WinningTip"]):not([class*="Winning"]) p, 
.van-dialog:not([class*="WinningTip"]):not([class*="Winning"]) span, 
.van-dialog:not([class*="WinningTip"]):not([class*="Winning"]) div,
.van-action-sheet p, .van-action-sheet span, .van-action-sheet div {
  color: #1A1A1A !important;
}
/* Popup title text & header banner overrides */
.promptHeader, 
.prompt-dialog .promptHeader,
.van-dialog .promptHeader,
.van-popup .promptHeader {
  background: linear-gradient(90deg, #FFB300 0%, #FF8A00 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
}
.promptHeader *,
.prompt-dialog .promptHeader *,
.van-dialog .promptHeader * {
  color: #FFFFFF !important;
}

/* dialog-wrapper inner content (33 CLUB Updates popup body) */
.dialog-wrapper {
  background: #FFFFFF !important;
}
.dialog-wrapper .dialog-title {
  color: #1A1A1A !important;
}
.dialog-wrapper .dialog-tips,
.dialog-wrapper .dialog-para,
.dialog-wrapper .dialog-content {
  color: #444444 !important;
}
.dialog-wrapper .dialog-content {
  color: #666666 !important;
}

/* --------------------------------------------------------------------------
   10. INPUTS & FORMS
   -------------------------------------------------------------------------- */
.van-cell, .van-cell-group, .van-field, input, select, textarea {
  background: rgba(20, 20, 20, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}
.van-cell-group {
  background: transparent !important;
  border: none !important;
}
.van-cell::after {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.van-field__control, input, select, textarea {
  color: #FFFFFF !important;
}
.van-field__control::placeholder, input::placeholder, textarea::placeholder {
  color: #BDBDBD !important;
  opacity: 0.7 !important;
}
.van-field__label {
  color: #FFB300 !important;
}
.van-cell:focus-within, input:focus, select:focus, textarea:focus {
  border-color: #FFB300 !important;
  box-shadow: 0 0 10px rgba(255, 179, 0, 0.25) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   11. TABS & TOASTS
   -------------------------------------------------------------------------- */
.van-tabs__nav {
  background-color: rgba(20, 20, 20, 0.65) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.van-tab {
  color: #BDBDBD !important;
}
.van-tab--active {
  color: #FFB300 !important;
  font-weight: bold !important;
}
.van-tabs__line {
  background: linear-gradient(90deg, #FFB300 0%, #FF8A00 100%) !important;
}

.van-toast {
  background-color: rgba(20, 20, 20, 0.9) !important;
  border: 1px solid rgba(255, 179, 0, 0.3) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 20px rgba(255, 179, 0, 0.25) !important;
  backdrop-filter: blur(10px) !important;
}

/* --------------------------------------------------------------------------
   12. WALLET UI & DEPOSIT/WITHDRAW
   -------------------------------------------------------------------------- */
.wallet-user__info, .wallet-card, .wallet-balance, .balance-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 30%), rgba(20, 20, 20, 0.65) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 179, 0, 0.25) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}
.wallet-user__info * {
  color: #FFFFFF !important;
}
.wallet-card [class*="title"], .wallet-card [class*="label"] {
  color: #FFB300 !important;
}
.wallet-card .balance-num, .wallet-card [class*="amount"] {
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2) !important;
}

.payment-channel__item, .channel-card, .recharge-type__item, .select-item {
  background: rgba(20, 20, 20, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  transition: all 0.2s ease !important;
}
.payment-channel__item.active, .channel-card.active, .recharge-type__item.active, .select-item.active,
.payment-channel__item--active, .recharge-type__item--active {
  border-color: #FF8A00 !important;
  background: linear-gradient(135deg, rgba(255, 138, 0, 0.15) 0%, rgba(20, 20, 20, 0.8) 100%) !important;
  box-shadow: 0 0 15px rgba(255, 138, 0, 0.35) !important;
}
.payment-channel__item * {
  color: #FFFFFF !important;
}

.recharge-warn, .withdraw-warn, .warning-box, .notice-box {
  background: rgba(255, 138, 0, 0.05) !important;
  border: 1px solid rgba(255, 138, 0, 0.2) !important;
  border-radius: 12px !important;
  color: #FFB300 !important;
}

/* --------------------------------------------------------------------------
   13. PROMOTION & PROFILE ITEMS
   -------------------------------------------------------------------------- */
.promotion-header, .promotion-summary, .team-stats {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 30%), rgba(20, 20, 20, 0.65) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 179, 0, 0.25) !important;
  border-radius: 18px !important;
}
.promotion-summary * {
  color: #FFFFFF !important;
}
.promotion-summary [class*="label"] {
  color: #FFB300 !important;
}

.profile-header {
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.8) 0%, #0A0A0A 100%) !important;
  border-bottom: 1.5px solid #FF8A00 !important;
}
.menu-list__item, .settings-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}
.menu-list__item * {
  color: #FFFFFF !important;
}
.menu-list__item:active {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* --------------------------------------------------------------------------
   14. HISTORY & BET TABLES
   -------------------------------------------------------------------------- */
.history-item, .record-item, .order-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), rgba(20, 20, 20, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
  padding: 12px !important;
  color: #FFFFFF !important;
}
.history-item * {
  color: #FFFFFF !important;
}
.history-item .win-status, .record-item .win {
  color: #17B15E !important;
}
.history-item .lose-status, .record-item .lose {
  color: #D23838 !important;
}

/* VIP Level cards */
.vip-card, .vip-level-box {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 30%), rgba(20, 20, 20, 0.65) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1.5px solid rgba(255, 179, 0, 0.25) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}
.vip-progress-bar {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
}
.vip-progress-bar__inner {
  background: linear-gradient(90deg, #FFB300 0%, #FF8A00 100%) !important;
  border-radius: 10px !important;
}

/* Period indicators */
.period-box, .game-time-box {
  background: rgba(20, 20, 20, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
}

/* HTML bet history tables */
table {
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  width: 100% !important;
}
th {
  color: #FFB300 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 10px !important;
  border: none !important;
  font-size: 0.32rem !important;
}
tr {
  background: transparent !important;
}
td {
  padding: 12px 10px !important;
  border: none !important;
}
tbody tr {
  background: transparent !important;
}
tbody tr td:first-child {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}
tbody tr td:last-child {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}
tbody tr td {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(20, 20, 20, 0.65) !important;
  color: #FFFFFF !important;
  transition: all 0.25s ease !important;
}
tbody tr:hover td {
  background: rgba(30, 30, 30, 0.75) !important;
}

/* Period selection buttons and betting grids */
.bet-btn, .bet-button {
  border-radius: 8px !important;
  font-weight: bold !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}
.bet-btn--green, .green-color {
  background: linear-gradient(135deg, #17b15e 0%, #0d6d39 100%) !important;
  box-shadow: 0 0 10px rgba(23, 177, 94, 0.4) !important;
}
.bet-btn--violet, .violet-color {
  background: linear-gradient(135deg, #9b48db 0%, #602192 100%) !important;
  box-shadow: 0 0 10px rgba(155, 72, 219, 0.4) !important;
}
.bet-btn--red, .red-color {
  background: linear-gradient(135deg, #d23838 0%, #871c1c 100%) !important;
  box-shadow: 0 0 10px rgba(210, 56, 56, 0.4) !important;
}
.bet-btn--big, .big-color {
  background: linear-gradient(135deg, #ff8a00 0%, #c46200 100%) !important;
}
.bet-btn--small, .small-color {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}

/* Force progress circles text centering and glass theme */
.wallet-container-content .container .progressBars {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 24px !important;
  padding: 0.5rem 0.2rem !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}
.van-circle {
  position: relative !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 70%) !important;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
}
.van-circle__text {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  font-family: 'Inter', sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}