/* style-v2 */
#o-wrapper {
  --bg: #0b0b0b;
  --card: #1a1a1a;
  --card-2: #222;
  --yellow: #f5d000;
  --yellow-2: #ffd61a;
  --green: #2ee56d;
  --teal: #1fd6a4;
  --pink: #c44cff;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.65);
  --radius: 16px;
  --radius-sm: 12px;
  --gap: 12px;
  background: var(--bg) !important;
  color: var(--text);
  padding-bottom: 72px;
}

#o-wrapper,
.o-wrapper {
  background: var(--bg) !important;
  background-image: none !important;
}

body {
  background: #0b0b0b !important;
  background-image: none !important;
}

.main-container {
  background: transparent !important;
  min-height: auto;
}

header {
  background: var(--bg) !important;
  border: 0 !important;
  padding: 10px 14px !important;
}

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

.nav-bar,
#btn-nav {
  display: none !important;
}

.wrap-download,
.w8-app-download-banner {
  display: none !important;
}

/* Guest auth buttons — Figma Frame 771542 */
.auth-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 4px;
  border-radius: 12px;
  background: #00130d;
}

.btn-login-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 32px;
  padding: 0 16px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
}

.btn-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  height: 32px;
  padding: 0 16px;
  border-radius: 12px;
  border: 0;
  background: #fdd926;
  color: #2a2a2a !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  box-shadow: 0 0 20px rgba(253, 217, 38, 0.4);
}

.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
}

.header-user .header-welcome {
  text-align: right;
  line-height: 1.2;
  font-size: 11px;
  color: var(--muted);
}

.header-user .header-welcome strong {
  display: block;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0f3d2e;
  border: 2px solid var(--teal);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

/* .profile-login,
.btn-group-toggle {
  display: none !important;
} */

/* Home balance strip (logged in) */
.home-balance {
  padding: 4px 14px 12px;
}

.home-balance .label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 2px;
}

.home-balance .amount {
  font-size: 28px;
  font-weight: 700;
  color: #00FDB4;
  line-height: 1.15;
  letter-spacing: 0.2px;
}

.home-actions {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  margin-top: 16px;
}

.home-actions a {
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
}

.btn-withdraw {
  border: 1.5px solid var(--green);
  color: #00FDB4;
  background: transparent;
}

.btn-deposit {
  background: var(--yellow);
  color: #111 !important;
}

/* Slider — Figma 400x140 */
.home .promobanner {
  padding: 0 14px;
  margin-bottom: 12px;
  position: relative;
}

.home .promobanner .swiper {
  border-radius: 16px;
  overflow: hidden;
}

.home .promobanner img {
  width: 100%;
  display: block;
  border-radius: 16px;
  aspect-ratio: 400 / 140;
  object-fit: cover;
  background: #1a1a1a;
}

.home .swiper-pagination {
  bottom: auto !important;
  top: 8px;
  right: 12px;
  left: auto !important;
  width: auto !important;
  font-size: 11px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 8px;
  border-radius: 10px;
  z-index: 2;
}

.home .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

.home .swiper-pagination-bullet-active {
  background: var(--yellow);
}

.banner-count {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 2;
  font-size: 11px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 8px;
  border-radius: 10px;
}

/* CTA cards — Figma: full asset as card bg + text on left */
.cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 14px 14px;
}

.cta-card {
  position: relative;
  display: block;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
  color: #fff !important;
  background: #1a1a1a;
}

.cta-card .cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  pointer-events: none;
}

.cta-download {
  color: #2A2A2A !important;
}
.cta-download .cta-text strong,.cta-download .cta-text span{
  color:#2A2A2A;
}
.cta-promo {
  color: #fff !important;
}

.cta-card .cta-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 10px 12px;
  max-width: 62%;
}

.cta-card .cta-text strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.cta-card .cta-text span {
  display: block;
  font-size: 10px;
  opacity: 0.9;
  margin-top: 2px;
  line-height: 1.25;
}

/* Category chips — Figma: 32px Game Icon + label */
.cat-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 4px 14px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cat-scroll::-webkit-scrollbar {
  display: none;
}

.cat-item {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.cat-item img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex: 0 0 32px;
  border-radius: .5rem;
  background: #2a2a2a;
}

.cat-item span {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

/* Popular games */
.section-block {
  padding: 0 14px 18px;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #fff;
}

/* Figma: tiles are complete 192x122 / 122x122 art — do not double-wrap */
.popular-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.popular-item {
  position: relative;
  display: block;
  text-decoration: none !important;
  color: #fff !important;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 0;
  line-height: 0;
}

.popular-item.lg {
  grid-column: span 3;
  aspect-ratio: 192 / 122;
}

.popular-item.sm {
  grid-column: span 2;
  aspect-ratio: 1 / 1;
}

.popular-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  filter: none;
  max-width: none;
}

.popular-item span {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 1;
  display: inline-block;
  max-width: calc(100% - 12px);
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Why play / features */
.why-section {
  padding: 8px 14px 18px;
}

.why-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 14px;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.feature-card {
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
}

.feature-card img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin-bottom: 8px;
}

.feature-card h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.feature-card p {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  line-height: 1.35;
}

/* Providers */
.providers-grid {
  display: none;
}

/* Figma: 8 logos per lane + horizontal auto-scroll */
.providers-wrap {
  padding: 0 0 18px;
  overflow: hidden;
}

.providers-lane {
  overflow: hidden;
  margin-bottom: 8px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.providers-lane-inner {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: providers-marquee 28s linear infinite;
}

.providers-lane:nth-child(even) .providers-lane-inner {
  animation-direction: reverse;
  animation-duration: 32s;
}

.providers-lane-inner img {
  width: 88px;
  height: 52px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(46, 229, 109, 0.06);
  flex: 0 0 auto;
}

@keyframes providers-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Promo register strip — Figma banner8$ graphic (400×96) */
.promo-strip {
  display: block;
  margin: 0 14px 16px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  text-decoration: none !important;
  line-height: 0;
}

.promo-strip-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 512 / 123;
  object-fit: cover;
}

/* About / brand block */
.about-block {
  padding: 0 14px 16px;
}

.about-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 12px;
}

.about-media {
  border-radius: 16px;
  overflow: hidden;
  background: #151515;
}

.about-media img {
  width: 100%;
  display: block;
  aspect-ratio: 400 / 500;
  object-fit: cover;
}

/* Quick action horizontal cards (Join us / Deposit / Withdraw / How to play) */
.quick-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 14px 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.quick-scroll::-webkit-scrollbar {
  display: none;
}

.quick-card {
  flex: 0 0 78%;
  max-width: 326px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none !important;
  color: #fff !important;
}

.quick-card img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 40px;
}

.quick-card strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.quick-card span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.3;
}

.license-box {
  margin: 0 14px 18px;
  padding: 16px;
  border-radius: 14px;
  background-color: #2A2A2A;
  background: linear-gradient(90deg, rgba(0, 255, 161, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  text-align: center;
}

.license-box .section-title {
  font-size: 16px;
  margin: 0 0 10px;
}

.license-box p {
  margin: 0 auto 12px;
  max-width: 280px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.license-box a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 15px;
  border: 1px solid #057B59;
  color: #00FDB4 !important;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none !important;
}

.footer-block {
  max-width: 310px;
  margin: 0 auto 24px;
  padding: 0 14px;
  text-align: center;
}

.footer-block .section-title {
  margin: 0 0 12px;
  text-align: center;
}

.footer-desc {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}

.social-row,
.pay-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0 0 8px;
}

.social-row a,
.pay-row img {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: contain;
  display: block;
  background: transparent;
  border-radius: 12px;
  padding: 0;
}

.social-row a {
  overflow: hidden;
}

.social-row a img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.footer-legal {
  max-width: 310px;
  margin: 0 auto;
  padding: 0 14px 24px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.45;
  text-align: center;
}

.footer-legal a {
  color: #fff !important;
  text-decoration: underline !important;
}

/* Hide legacy home blocks inside new UI home */
.home .main-banner,
.home .main-icon-list,
.home .main-video-section,
.home .main-desc-section,
.home .main-social-section,
.home .model-home,
.home .home-popup-icon {
  display: none !important;
}

/* Footer nav */
footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: #121212 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}

.footer-nav ul {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  margin: 0;
  padding: 0 4px;
  list-style: none;
}

.footer-nav li {
  flex: 1;
  text-align: center;
}

.footer-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  font-size: 10px;
  font-weight: 600;
}

.footer-nav a img,
.footer-nav a svg {
  width: 24px;
  height: 24px;
}
footer .footer-nav li a span{
  color:rgba(255, 255, 255, 0.75);
}
footer .footer-nav a.active {
  color: var(--yellow) !important;
}

.footer-nav .nav-menu img {
  width: 28px;
  height: 28px;
}
/* Menu page */
.menu-page {
  padding: 12px 14px 24px;
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #1a1a1a;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 600;
}

.menu-item.full {
  width: 100%;
}

.menu-item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.menu-logout {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 14px;
  background: transparent;
}

/* Profile / center */
.profile-page .top-balance-info-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px 14px 16px !important;
  justify-content: stretch !important;
  background: transparent;
}

.profile-page .top-balance-info-wrapper > div .text-sm {
  color: var(--muted) !important;
  text-transform: none !important;
  font-size: 12px !important;
}

.profile-page .top-balance-info-title {
  color: var(--teal) !important;
  font-size: 15px !important;
  font-weight: 700;
}

.profile-page .my-profile {
  padding: 0 10px 20px;
}

.profile-page .my-profile .d-flex {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 10px !important;
  justify-content: stretch !important;
}

.profile-page .card.card-primary {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  margin: 0 !important;
  width: 100% !important;
  min-height: 96px;
  display: flex!important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}

.profile-page .card.card-primary a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  text-decoration: none !important;
  width: 100%;
}

.profile-page .card.card-primary img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-bottom: 8px;
}

.profile-page .card.card-primary .text-white {
  font-size: 11px !important;
  text-align: center;
  line-height: 1.25;
}

/* Promotion page */
.content-promo-page {
  padding: 8px 0 24px !important;
  background: transparent !important;
}

.content-promo-page .main-game-logo {
  display: none !important;
}

.content-promo-page .option-switcher {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 14px 12px;
  scrollbar-width: none;
  border: 0 !important;
}

.content-promo-page .option-switcher::-webkit-scrollbar {
  display: none;
}

.content-promo-page .option-switcher-tab {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.content-promo-page .option-switcher-tab.active {
  background: var(--yellow);
  color: #111;
  border-color: var(--yellow);
}

.content-promo-page .promo-list {
  padding: 0 14px !important;
}

.content-promo-page .promotion-container {
  margin-bottom: 12px;
  background: #151515;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.content-promo-page .promotion-image-wrapper img {
  width: 100%;
  display: block;
  border-radius: 0;
}

.content-promo-page .promotion-right-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 10px 12px 12px !important;
}

.content-promo-page .promotion-btn-group {
  display: flex;
  gap: 8px;
}

.content-promo-page .btn-promo-more,
.content-promo-page .btn-promo-apply {
  flex: 1;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
}

.content-promo-page .btn-promo-more {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff !important;
}

.content-promo-page .btn-promo-apply {
  background: var(--yellow);
  color: #111 !important;
  border: 0;
}

.content-promo-page .promo-popup .popup {
  background: #121212;
  color: #fff;
}

/* Running text */
.running,
.marquee,
.announcement {
  background: transparent !important;
}

/* Side drawer muted under new UI (use Menu tab instead) */
#drawer_menu .side-menu-wrapper,
body #drawer_menu .side-menu-content-wrapper .border-wrapper {
  border-radius: 12px;
}
.option-switcher .option-switcher-tab span{
  color: #fff;
}