/*
 * Professional responsive UI layer for /mobile.
 * Loaded last, after global.css, active color theme, custom.css,
 * and responsive-shell.css.
 *
 * Scope: presentation only. It does not change routing, database,
 * authentication, balance, callback, or game-launch logic.
 */

:root {
  --wv-shell-width: 480px;
  --wv-safe-bottom: env(safe-area-inset-bottom, 0px);
  --wv-space-1: 4px;
  --wv-space-2: 8px;
  --wv-space-3: 12px;
  --wv-space-4: 16px;
  --wv-space-5: 20px;
  --wv-radius-sm: 9px;
  --wv-radius-md: 13px;
  --wv-radius-lg: 18px;
  --wv-border: rgba(255, 255, 255, 0.10);
  --wv-border-strong: rgba(255, 255, 255, 0.17);
  --wv-surface: rgba(255, 255, 255, 0.035);
  --wv-surface-strong: rgba(10, 8, 18, 0.34);
  --wv-text-muted: rgba(255, 255, 255, 0.72);
  --wv-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.18);
  --wv-shadow-md: 0 18px 42px rgba(0, 0, 0, 0.26);
  --wv-control-height: 42px;
  --alert-success: #86d66f;
  --alert-error: #ef6b6b;
  --alert-warning: #f3b34c;
  --alert-info: #4da3ff;
  --alert-question: #7f8cff;
}

/* SweetAlert icons: ring and symbol use the same solid status color. */
body.mobile-site .swal2-icon.swal2-success,
body.mobile-site .swal2-icon.swal2-success .swal2-success-ring {
  border-color: var(--alert-success) !important;
  color: var(--alert-success) !important;
}

body.mobile-site .swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: var(--alert-success) !important;
}

body.mobile-site .swal2-icon.swal2-error {
  border-color: var(--alert-error) !important;
  color: var(--alert-error) !important;
}

body.mobile-site .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--alert-error) !important;
}

body.mobile-site .swal2-icon.swal2-warning {
  border-color: var(--alert-warning) !important;
  color: var(--alert-warning) !important;
}

body.mobile-site .swal2-icon.swal2-info {
  border-color: var(--alert-info) !important;
  color: var(--alert-info) !important;
}

body.mobile-site .swal2-icon.swal2-question {
  border-color: var(--alert-question) !important;
  color: var(--alert-question) !important;
}

body.mobile-site .sweet-alert .sa-icon.sa-success,
body.mobile-site .sweet-alert .sa-icon.sa-success .sa-placeholder {
  border-color: var(--alert-success) !important;
}

body.mobile-site .sweet-alert .sa-icon.sa-success .sa-line {
  background-color: var(--alert-success) !important;
}

/* Professional home information: concise, theme-aware and responsive. */
body.mobile-site .home .mobile__seo {
  padding-top: 18px;
  padding-bottom: 24px;
}

body.mobile-site .home .mobile__seo .seo-mobile {
  padding: clamp(18px, 2.4vw, 30px) !important;
  overflow: hidden;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-lg);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--primary-color) 16%, transparent),
      color-mix(in srgb, var(--background-page) 94%, #000)
    ) !important;
  box-shadow: var(--wv-shadow-sm);
}

body.mobile-site .home .wv-home-information {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  color: var(--page-text, var(--primary-text, #fff));
}

body.mobile-site .home .wv-home-information > h1 {
  margin: 0 0 10px;
  color: var(--page-text, var(--primary-text, #fff)) !important;
  font-size: clamp(22px, 2.1vw, 31px) !important;
  line-height: 1.25;
  text-align: center;
}

body.mobile-site .home .wv-home-information > p {
  max-width: 820px;
  margin: 0 auto 22px;
  color: var(--wv-text-muted) !important;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}

body.mobile-site .home .wv-home-information__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body.mobile-site .home .wv-home-information__grid > section {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-md);
  background:
    linear-gradient(
      150deg,
      color-mix(in srgb, var(--primary-color) 20%, transparent),
      rgba(0, 0, 0, 0.16)
    ) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

body.mobile-site .home .wv-home-information__grid h2,
body.mobile-site .home .wv-home-information__notice h2 {
  margin: 0 0 8px;
  color: var(--secondary-color, var(--page-text, #fff)) !important;
  font-size: 17px !important;
  line-height: 1.35;
}

body.mobile-site .home .wv-home-information__grid p,
body.mobile-site .home .wv-home-information__notice p {
  margin: 0;
  color: var(--wv-text-muted) !important;
  font-size: 14px;
  line-height: 1.65;
}

body.mobile-site .home .wv-home-information__notice {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--secondary-color) 38%, transparent);
  border-radius: var(--wv-radius-md);
  background: color-mix(in srgb, var(--secondary-color) 9%, transparent);
}

@media screen and (max-width: 767px) {
  body.mobile-site .home .mobile__seo {
    padding-top: 12px;
    padding-bottom: 18px;
  }

  body.mobile-site .home .mobile__seo .seo-mobile {
    padding: 16px 14px !important;
    border-radius: 14px;
  }

  body.mobile-site .home .wv-home-information > h1 {
    font-size: 20px !important;
    text-align: left;
  }

  body.mobile-site .home .wv-home-information > p {
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
  }

  body.mobile-site .home .wv-home-information__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body.mobile-site .home .wv-home-information__grid > section,
  body.mobile-site .home .wv-home-information__notice {
    padding: 14px;
  }

  body.mobile-site .home .wv-home-information__grid h2,
  body.mobile-site .home .wv-home-information__notice h2 {
    font-size: 15px !important;
  }

  body.mobile-site .home .wv-home-information__grid p,
  body.mobile-site .home .wv-home-information__notice p {
    font-size: 13px;
    line-height: 1.6;
  }
}

/* Promotion listing: one full-width, uncropped banner per row. */
body.mobile-site.page-promosi .promo .promo__list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 20px !important;
  width: 100%;
}

body.mobile-site.page-promosi .promo .promo__list > a {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  color: var(--primary-text, #fff);
  text-decoration: none;
}

body.mobile-site.page-promosi .promo .promo__list .list-item {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  width: 100%;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-md);
  background: rgba(0, 0, 0, 0.12);
  box-shadow: var(--wv-shadow-sm);
}

body.mobile-site.page-promosi .promo .promo__list .item-image {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: auto !important;
  background: rgba(0, 0, 0, 0.14);
}

body.mobile-site.page-promosi .promo .promo__list .item-image img,
body.mobile-site.page-promosi .promo .promo__list .item-image img[style] {
  display: block;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

body.mobile-site.page-promosi .promo .promo__list .item-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 16px 18px;
}

body.mobile-site.page-promosi .promo .promo__list .item-context h6 {
  min-width: 0;
  margin: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  color: var(--secondary-color);
  font-size: 16px;
  line-height: 1.45;
}

body.mobile-site.page-promosi .promo .promo__list .item-context .btn-custom {
  flex: 0 0 auto;
  width: auto;
  min-width: 180px;
  margin: 0 !important;
}

@media screen and (max-width: 480px) {
  body.mobile-site.page-promosi .promo .promo__list {
    gap: 14px !important;
  }

  body.mobile-site.page-promosi .promo .promo__list .item-context {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 13px;
  }

  body.mobile-site.page-promosi .promo .promo__list .item-context h6 {
    font-size: 14px;
  }

  body.mobile-site.page-promosi .promo .promo__list .item-context .btn-custom {
    width: 100%;
    min-width: 0;
  }
}

/* Smooth guest login actions: keep both buttons in one cohesive palette. */
body.mobile-site .footer-mobile__login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
}

/* Guest footer: keep the page visible around the login actions. */
body.mobile-site:not(.is-authenticated) .footer-mobile {
  background: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible;
  pointer-events: none;
}

body.mobile-site.is-guest .footer-mobile__login {
  pointer-events: none;
}

body.mobile-site .footer-mobile__login button {
  box-sizing: border-box;
  flex: 1 1 0;
  width: auto !important;
  min-height: 48px !important;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 14px;
  color: var(--primary-text, #fff) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: filter 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}

body.mobile-site .footer-mobile__login .login-button {
  background:
    linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.08)),
    var(--primary-color, #4f3695) !important;
  color: var(--primary-text, #fff) !important;
}

body.mobile-site .footer-mobile__login .register-button {
  background:
    linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.08)),
    var(--secondary-color, #b29cff) !important;
  color: var(--secondary-text, #111) !important;
}

body.mobile-site .footer-mobile__login button:hover,
body.mobile-site .footer-mobile__login button:focus {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

@media screen and (max-width: 768px) {
  body.mobile-site.is-guest .footer-mobile {
    width: calc(100% - 16px) !important;
    max-width: 560px !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) !important;
  }

  body.mobile-site .footer-mobile__login {
    gap: 8px;
    width: 100%;
    padding: 0;
  }

  body.mobile-site .footer-mobile__login button {
    min-height: 46px !important;
    border-radius: 13px;
    font-size: 14px;
  }
}

@media screen and (min-width: 769px) {
  body.mobile-site.is-guest .footer-mobile {
    width: min(calc(100% - 32px), 1120px) !important;
    max-width: 1120px !important;
    left: 50% !important;
    right: auto !important;
    bottom: 14px;
    transform: translateX(-50%) !important;
  }

  body.mobile-site.is-guest .footer-mobile__login {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.mobile-site.is-guest .footer-mobile__login button {
    min-height: 50px !important;
  }
}

/* Keep legacy page panels synchronized with the theme selected in admin. */
body.mobile-site .component-tab-content,
body.mobile-site .memo__container,
body.mobile-site .bonus-content,
body.mobile-site .transaksi-formulir,
body.mobile-site .promo__container,
body.mobile-site .news__container,
body.mobile-site .contact-us__content,
body.mobile-site .help__content,
body.mobile-site .register__container,
body.mobile-site .profile__container {
  background: var(--background-page, #11131b) !important;
  color: var(--page-text, var(--primary-text, #fff)) !important;
}

/* Mobile header: make the website logo easier to read without touching desktop. */
@media screen and (max-width: 768px) {
  body.mobile-site .header-mobile__top .mobile-logo {
    width: 175px;
    max-width: 46%;
  }

  body.mobile-site .header-mobile__top .mobile-logo img {
    width: 100% !important;
    height: 36px !important;
  }
}

@media screen and (max-width: 360px) {
  body.mobile-site .header-mobile__top .mobile-logo {
    width: 155px;
    max-width: 50%;
  }

  body.mobile-site .header-mobile__top .mobile-logo img {
    height: 34px !important;
  }
}

/* Provider search: the white input is the only visible search surface. */
body.mobile-site .slot-game .slot-game__container .slot-game__search-cont .game-search {
  position: relative;
  display: flex;
  width: 100% !important;
  min-width: 0;
  height: 42px;
  padding: 0 !important;
  align-items: center;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none !important;
  transition: none;
}

body.mobile-site .slot-game .slot-game__container .slot-game__search-cont .game-search .form-control-sm {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  height: 42px;
  padding: 8px 48px 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 999px;
  outline: none !important;
  background: #fff !important;
  color: #2b2b2b !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

body.mobile-site .slot-game .slot-game__container .slot-game__search-cont .game-search .form-control-sm::placeholder {
  color: #777;
  opacity: 1;
}

body.mobile-site .slot-game .slot-game__container .slot-game__search-cont .game-search .search-btn {
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: 2;
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  margin: 0;
  transform: translateY(-50%);
}

body.mobile-site .slot-game .slot-game__container .slot-game__search-cont .game-search .search-btn i {
  color: #333 !important;
  font-size: 20px;
}

@media screen and (max-width: 768px) {
  body.mobile-site .slot-game .slot-game__container .slot-game__search-cont .game-search,
  body.mobile-site .slot-game .slot-game__container .slot-game__search-cont .game-search .form-control-sm {
    height: 36px;
  }

  body.mobile-site .slot-game .slot-game__container .slot-game__search-cont .game-search .form-control-sm {
    padding: 7px 42px 7px 14px;
    font-size: 13px;
  }

  body.mobile-site .slot-game .slot-game__container .slot-game__search-cont .game-search .search-btn {
    right: 10px;
    width: 24px;
    height: 24px;
  }

  body.mobile-site .slot-game .slot-game__container .slot-game__search-cont .game-search .search-btn i {
    font-size: 17px;
  }
}

/* Desktop jackpot: preserve the source artwork ratio and enlarge the value panel. */
@media screen and (min-width: 769px) {
  body.mobile-site .home .home__jackpot .jackpot-background {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1512 / 285;
    background-size: 100% 100%;
    background-position: center;
  }

  body.mobile-site .home .home__jackpot .jackpot-background .jackpot-wrapper {
    min-width: clamp(430px, 28vw, 560px);
    margin-right: clamp(24px, 4vw, 64px);
    padding: clamp(18px, 1.3vw, 28px);
  }

  body.mobile-site .home .home__jackpot .jackpot-background .jackpot-wrapper h1 {
    margin-bottom: 12px;
    font-size: clamp(24px, 2.1vw, 34px);
    line-height: 1.15;
    white-space: nowrap;
  }

  body.mobile-site .home .home__jackpot .jackpot-background .jackpot-wrapper .wrapper-amount {
    font-size: clamp(26px, 2vw, 34px);
    line-height: 1.15;
    white-space: nowrap;
  }
}

html {
  scroll-behavior: smooth;
}

body.mobile-site {
  color: var(--navbar-text, #fff);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.mobile-site #main-route,
body.mobile-site .main-content {
  color: var(--page-text, var(--primary-text, #fff));
}

body.mobile-site #main-route h1,
body.mobile-site #main-route h2,
body.mobile-site #main-route h3,
body.mobile-site #main-route h4,
body.mobile-site #main-route h5,
body.mobile-site #main-route h6 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  font-weight: 800;
  line-height: 1.3;
}

body.mobile-site #main-route p,
body.mobile-site #main-route li {
  line-height: 1.6;
}

body.mobile-site,
body.mobile-site #main-route,
body.mobile-site .main-content,
body.mobile-site .container,
body.mobile-site .row,
body.mobile-site [class*="col-"] {
  min-width: 0;
}

body.mobile-site a,
body.mobile-site button,
body.mobile-site input,
body.mobile-site select,
body.mobile-site textarea {
  -webkit-tap-highlight-color: transparent;
}

body.mobile-site a:focus-visible,
body.mobile-site button:focus-visible,
body.mobile-site input:focus-visible,
body.mobile-site select:focus-visible,
body.mobile-site textarea:focus-visible {
  outline: 2px solid var(--secondary-color, #b29cff);
  outline-offset: 2px;
}

body.mobile-site img,
body.mobile-site video,
body.mobile-site iframe {
  max-width: 100%;
}

body.mobile-site .main-content {
  min-height: calc(100vh - 180px);
  padding-top: 12px;
  padding-bottom: calc(92px + var(--wv-safe-bottom));
}

body.mobile-site .main-content > .container,
body.mobile-site #main-route > .container {
  width: 100%;
  padding-right: 10px;
  padding-left: 10px;
}

/* Header and primary category navigation */
body.mobile-site .header-mobile {
  border-bottom: 1px solid var(--wv-border);
  background: var(--navbar-color, #15101f);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

body.mobile-site .header-mobile__marquee {
  min-height: 34px;
  padding-top: 7px;
}

body.mobile-site .header-mobile__marquee .marquee {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mobile-site .header-mobile__top {
  min-height: 58px;
}

body.mobile-site .header-mobile__top .mobile-logo img {
  object-fit: contain;
}

body.mobile-site .header-mobile__nav {
  padding-top: 7px;
  padding-bottom: 10px;
}

body.mobile-site .header-mobile-swiper {
  overflow: hidden;
}

body.mobile-site .header-mobile-swiper .swiper-wrapper {
  align-items: center;
}

body.mobile-site .header-mobile__nav .swiper-slide {
  width: auto !important;
  max-width: max-content !important;
}

body.mobile-site .header-mobile__nav .header-mobile__item {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: transform .16s ease, border-color .16s ease, filter .16s ease;
}

body.mobile-site .header-mobile__nav a:hover .header-mobile__item {
  transform: translateY(-1px);
  border-color: var(--wv-border-strong);
  filter: brightness(1.06);
}

body.page-slot #header-mobile-item-slot,
body.page-livegame #header-mobile-item-livegames,
body.page-livegames #header-mobile-item-livegames,
body.page-casino #header-mobile-item-casino,
body.page-sport #header-mobile-item-sportsbook,
body.page-lottery #header-mobile-item-lottery,
body.page-poker #header-mobile-item-poker,
body.page-arcade #header-mobile-item-arcade {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), var(--wv-shadow-sm);
  filter: brightness(1.08);
}

/* Bottom navigation */
body.mobile-site .footer-mobile {
  overflow: hidden;
  border-top: 1px solid var(--wv-border);
  background: var(--primary-color, #4f3695);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.30);
}

body.mobile-site .footer-mobile__nav {
  min-height: 66px;
  padding-bottom: var(--wv-safe-bottom);
}

body.mobile-site .footer-mobile__nav .nav-link {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 8px 2px 7px;
}

body.mobile-site .footer-mobile__nav .nav-link.active {
  background: rgba(255, 255, 255, 0.05);
}

body.mobile-site .footer-mobile__nav .nav-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mobile-site .footer-chat {
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
}

/* Shared page framing */
body.mobile-site .page-header {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-md);
  background: var(--wv-surface-strong);
  color: var(--navbar-text, #fff);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  box-shadow: var(--wv-shadow-sm);
}

body.mobile-site .breadcrumb-container {
  margin: 0 0 10px;
}

body.mobile-site .breadcrumb-list {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 8px 10px;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-sm);
  background: rgba(0, 0, 0, 0.20);
  scrollbar-width: none;
}

body.mobile-site .breadcrumb-list::-webkit-scrollbar {
  display: none;
}

body.mobile-site .breadcrumb-item,
body.mobile-site .breadcrumb-link {
  white-space: nowrap;
}

body.mobile-site .component-tab-content,
body.mobile-site .register__container,
body.mobile-site .profile__container,
body.mobile-site .promo__container,
body.mobile-site .news__container,
body.mobile-site .contact-us__content,
body.mobile-site .help__content,
body.mobile-site .transaksi-formulir,
body.mobile-site .bonus-content,
body.mobile-site .memo__container {
  min-width: 0;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-lg);
  background: var(--primary-color, #4f3695);
  box-shadow: var(--wv-shadow-md);
}

/* Tabs */
body.mobile-site .component-tabs,
body.mobile-site .profile__tab .nav,
body.mobile-site .help__content .nav-pills {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  overflow-x: auto;
  border: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body.mobile-site .component-tabs::-webkit-scrollbar,
body.mobile-site .profile__tab .nav::-webkit-scrollbar,
body.mobile-site .help__content .nav-pills::-webkit-scrollbar {
  display: none;
}

body.mobile-site .component-tabs .nav-item {
  flex: 1 0 auto;
  min-width: min(150px, 42vw);
  margin: 0;
}

body.mobile-site .component-tabs .nav-link,
body.mobile-site .profile__tab .nav-link,
body.mobile-site .help__content .nav-link {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 !important;
  padding: 10px 12px;
  border: 1px solid var(--wv-border);
  border-radius: 999px;
  color: var(--navbar-text, #fff);
  background: var(--third-color, rgba(255, 255, 255, 0.08));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: transform .16s ease, filter .16s ease;
}

body.mobile-site .component-tabs .nav-link.active,
body.mobile-site .profile__tab .nav-link.active,
body.mobile-site .help__content .nav-link.active {
  color: var(--secondary-text, #111);
  background: var(--secondary-color, #b29cff);
  filter: brightness(1.03);
  box-shadow: var(--wv-shadow-sm);
}

body.mobile-site .component-tabs .nav-link:hover,
body.mobile-site .profile__tab .nav-link:hover,
body.mobile-site .help__content .nav-link:hover {
  transform: translateY(-1px);
}

body.mobile-site .component-tab-content {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 14px;
  overflow: visible !important;
}

/* Forms */
body.mobile-site form,
body.mobile-site .form-group,
body.mobile-site .input-group,
body.mobile-site .select2-container {
  min-width: 0;
  max-width: 100%;
}

body.mobile-site label,
body.mobile-site .item-title,
body.mobile-site .form-title {
  margin-bottom: 6px;
  color: var(--navbar-text, #fff);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

body.mobile-site input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.mobile-site select,
body.mobile-site textarea,
body.mobile-site .form-control,
body.mobile-site .input-custom,
body.mobile-site .custom-selection,
body.mobile-site .select2-selection {
  width: 100%;
  min-height: var(--wv-control-height);
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--wv-radius-sm) !important;
  outline: 0;
  color: #17131f;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
}

body.mobile-site textarea,
body.mobile-site textarea.form-control {
  min-height: 110px;
  resize: vertical;
}

body.mobile-site .input-custom::placeholder,
body.mobile-site input::placeholder,
body.mobile-site textarea::placeholder {
  color: #7a7f89 !important;
  opacity: 1;
}

body.mobile-site .btn-custom,
body.mobile-site .btn-custom-sm,
body.mobile-site button:not(.close):not(.swiper-button-next):not(.swiper-button-prev) {
  min-height: 40px;
  border-radius: var(--wv-radius-sm);
}

body.mobile-site .btn-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 15px;
  font-weight: 800;
  line-height: 1.2;
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

body.mobile-site .btn-custom:disabled,
body.mobile-site .btn-custom.disabled,
body.mobile-site button:disabled,
body.mobile-site input[type="submit"]:disabled {
  cursor: not-allowed;
  filter: grayscale(0.25);
  opacity: 0.58;
}

/* Tables and DataTables */
body.mobile-site .table-dataTable,
body.mobile-site .table-responsive,
body.mobile-site .dataTables_wrapper {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.mobile-site .table-dataTable,
body.mobile-site .table-responsive {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: var(--wv-radius-md);
  -webkit-overflow-scrolling: touch;
}

body.mobile-site table,
body.mobile-site table.dataTable {
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0;
  color: var(--page-text, var(--primary-text, #fff));
  background: var(--background-page, #11131b);
}

body.mobile-site table thead th,
body.mobile-site table.dataTable thead th {
  padding: 11px 10px !important;
  border-color: var(--wv-border-strong) !important;
  color: var(--primary-text, #fff);
  background:
    linear-gradient(rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.07)),
    var(--primary-color, #4f3695);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  vertical-align: middle;
}

body.mobile-site table tbody td,
body.mobile-site table.dataTable tbody td {
  padding: 11px 10px !important;
  border-color: var(--wv-border) !important;
  color: var(--page-text, var(--primary-text, #fff));
  font-size: 12px;
  line-height: 1.4;
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/*
 * Keep table values readable on every browser.  In particular, Safari and
 * Chromium must not split short labels (for example "Selesai"), currency,
 * dates, bank names, or usernames into individual letters.
 */
body.mobile-site table thead th,
body.mobile-site table.dataTable thead th,
body.mobile-site table tbody td,
body.mobile-site table.dataTable tbody td {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

@media screen and (max-width: 768px) {
  /* Compact mobile table: full width, no horizontal scrolling. */
  body.mobile-site .table-dataTable,
  body.mobile-site .table-dataTable .dataTables_wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.mobile-site .table-dataTable table,
  body.mobile-site .table-dataTable table.dataTable {
    display: table;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-collapse: collapse !important;
    background: var(--background-page, #0b132b) !important;
  }

  body.mobile-site .table-dataTable table thead {
    display: table-header-group;
  }

  body.mobile-site .table-dataTable table tbody {
    display: table-row-group;
  }

  body.mobile-site .table-dataTable table tbody tr {
    display: table-row;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none;
  }

  body.mobile-site .table-dataTable table thead th,
  body.mobile-site .table-dataTable table.dataTable thead th,
  body.mobile-site .table-dataTable table tbody td,
  body.mobile-site .table-dataTable table.dataTable tbody td {
    display: table-cell !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px 5px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-size: clamp(8px, 2.35vw, 11px) !important;
    line-height: 1.3;
    text-align: left !important;
    vertical-align: middle;
  }

  body.mobile-site .table-dataTable table thead th,
  body.mobile-site .table-dataTable table.dataTable thead th {
    font-weight: 800;
  }

  body.mobile-site .table-dataTable table tbody td::before {
    display: none !important;
    content: none !important;
  }

  body.mobile-site .table-dataTable .mobile-table-value {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  body.mobile-site #promoHistory th:nth-child(1),
  body.mobile-site #promoHistory td:nth-child(1) {
    width: 7% !important;
    text-align: center !important;
  }

  body.mobile-site #promoHistory th:nth-child(2),
  body.mobile-site #promoHistory td:nth-child(2) {
    width: 28% !important;
  }

  body.mobile-site #promoHistory th:nth-child(3),
  body.mobile-site #promoHistory td:nth-child(3) {
    width: 18% !important;
  }

  body.mobile-site #promoHistory th:nth-child(4),
  body.mobile-site #promoHistory td:nth-child(4) {
    width: 32% !important;
  }

  body.mobile-site #promoHistory th:nth-child(5),
  body.mobile-site #promoHistory td:nth-child(5) {
    width: 15% !important;
    white-space: nowrap !important;
  }

  body.mobile-site #promoHistory td:nth-child(3) .mobile-table-value {
    white-space: nowrap;
  }

  body.mobile-site .bonus .component-tab-content,
  body.mobile-site .bonus-content {
    padding: 8px !important;
  }

  body.mobile-site .bonus-content > .table-dataTable {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body.mobile-site .table-dataTable td.dataTables_empty {
    display: table-cell !important;
    min-height: 0;
    padding: 18px 10px !important;
    text-align: center !important;
  }

  body.mobile-site .table-dataTable td.dataTables_empty::before {
    display: none;
  }
}

body.mobile-site .dataTables_length,
body.mobile-site .dataTables_filter {
  float: none !important;
  width: 100%;
  margin: 0 0 10px;
  color: var(--page-text, var(--primary-text, #fff));
}

body.mobile-site td.dataTables_empty,
body.mobile-site .slot-game-list > div[style*="text-align:center"],
body.mobile-site .game-list-container > div[style*="text-align:center"] {
  width: 100%;
  min-height: 110px;
  padding: 24px 16px !important;
  border: 1px dashed var(--wv-border-strong);
  border-radius: var(--wv-radius-md);
  color: var(--wv-text-muted) !important;
  background: rgba(255, 255, 255, 0.025);
  font-size: 13px;
  line-height: 1.6;
  text-align: center !important;
}

body.mobile-site .slot-game-list > div[style*="text-align:center"],
body.mobile-site .game-list-container > div[style*="text-align:center"] {
  grid-column: 1 / -1;
}

body.mobile-site .dataTables_length label,
body.mobile-site .dataTables_filter label {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

body.mobile-site .dataTables_length select {
  width: 76px !important;
  min-height: 38px !important;
}

body.mobile-site .dataTables_filter input {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  min-height: 38px !important;
}

body.mobile-site .dataTables_info,
body.mobile-site .dataTables_paginate {
  float: none !important;
  width: 100%;
  margin-top: 12px;
  padding: 0 !important;
  text-align: center;
}

body.mobile-site .dataTables_paginate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

body.mobile-site .dataTables_paginate .paginate_button {
  min-width: 34px;
  min-height: 34px;
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 1px solid var(--wv-border) !important;
  border-radius: 8px !important;
  color: var(--navbar-text, #fff) !important;
  background: rgba(0, 0, 0, 0.16) !important;
}

body.mobile-site .dataTables_paginate .paginate_button.current,
body.mobile-site .dataTables_paginate .paginate_button:hover {
  color: var(--secondary-text, #111) !important;
  background: var(--secondary-color, #b29cff) !important;
}

/* Home */
body.mobile-site .home .home__slider .swiper-container {
  border: 1px solid var(--wv-border);
  box-shadow: var(--wv-shadow-md);
}

body.mobile-site .home .home__slider .swiper-slide img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center;
}

/* Home promotion slider: use the full card width and keep the banner ratio. */
body.mobile-site .home .mobile__games--slot .home__slider,
body.mobile-site .home .mobile__games--slot .home__slider > .container,
body.mobile-site .home .mobile__games--slot #main_menu_outer_container,
body.mobile-site .home .mobile__games--slot #main_menu_outer_container > main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

body.mobile-site .home .mobile__games--slot .home__slider .swiper-container {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden;
  background: transparent;
}

body.mobile-site .home .mobile__games--slot .home__slider .swiper-wrapper,
body.mobile-site .home .mobile__games--slot .home__slider .swiper-slide,
body.mobile-site .home .mobile__games--slot .home__slider .swiper-slide > a {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

body.mobile-site .home .mobile__games--slot .home__slider .swiper-slide > a {
  display: block;
}

body.mobile-site .home .mobile__games--slot .home__slider .swiper-slide img,
body.mobile-site .home .mobile__games--slot .home__slider .swiper-slide img[style] {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  animation: none !important;
  transform: none !important;
}

body.mobile-site .home .home__jackpot {
  padding-top: 10px;
}

body.mobile-site .home .mobile__games {
  margin-top: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body.mobile-site .home .games-container__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

body.mobile-site .home .games-title {
  min-width: 0;
}

body.mobile-site .home .games-title h6 {
  overflow: hidden;
  margin: 0;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mobile-site .home .games-action {
  flex: 0 0 auto;
}

body.mobile-site .home .oroplay-home-provider-track {
  padding-bottom: 8px;
}

body.mobile-site .home .oroplay-home-provider-card {
  border-radius: var(--wv-radius-md);
}

body.mobile-site .home .oroplay-home-provider-image {
  border-radius: var(--wv-radius-md);
}

/* Provider list and game catalog */
body.mobile-site .game .game__list,
body.mobile-site .slot-game__container {
  min-width: 0;
}

body.mobile-site .game-list-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px !important;
  align-items: start;
  width: 100%;
}

body.mobile-site .game-list-container .game-holder {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.mobile-site .game-list-container .game-holder > a {
  display: block;
  width: 100%;
  text-decoration: none;
}

body.mobile-site .game-list-container .game-img {
  width: 100% !important;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--wv-radius-md);
  background: transparent !important;
  box-shadow: none !important;
}

body.mobile-site .game-list-container .game-img > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  background: transparent;
}

body.mobile-site .game-list-container .hover-play {
  border-radius: var(--wv-radius-md);
}

/* OROPLAY provider cards: consistent artwork with an always-visible title. */
body.mobile-site .game .game__list .game-list-container .game-holder {
  overflow: hidden;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-md);
  background: var(--background-page, #11131b) !important;
  box-shadow: var(--wv-shadow-sm);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body.mobile-site .game .game__list .game-list-container .game-holder > a {
  display: flex;
  height: 100%;
  flex-direction: column;
}

body.mobile-site .game .game__list .game-list-container .game-holder .game-bottom {
  display: none !important;
}

body.mobile-site .game .game__list .game-list-container .game-holder .game-img {
  display: flex;
  width: 100% !important;
  height: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  aspect-ratio: auto !important;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.025) !important;
}

body.mobile-site .game .game__list .game-list-container .game-holder .game-img > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  flex: 0 0 auto;
  aspect-ratio: 2 / 3;
  object-fit: contain !important;
  object-position: center;
  background: transparent !important;
}

body.mobile-site .game .game__list .game-list-container .game-holder .hover-play {
  position: static !important;
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  min-height: 46px;
  flex: 1 1 auto;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 0 !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.08)),
    var(--primary-color, #4f3695) !important;
  opacity: 1 !important;
  transform: none !important;
}

body.mobile-site .game .game__list .game-list-container .game-holder .hover-play h6 {
  position: static !important;
  display: -webkit-box;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  color: var(--primary-text, #fff) !important;
  background: transparent !important;
  border-radius: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  white-space: normal;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.mobile-site .game .game__list .game-list-container .game-holder .hover-play .fas {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 0 0 2px;
  border-radius: 50%;
  color: var(--secondary-text, #111) !important;
  background: var(--secondary-color, #b29cff) !important;
  font-size: 11px;
}

@media (hover: hover) and (pointer: fine) {
  body.mobile-site .game .game__list .game-list-container .game-holder:hover {
    border-color: var(--secondary-color, #b29cff);
    box-shadow: var(--wv-shadow-md);
    transform: translateY(-2px);
  }
}

@media screen and (max-width: 480px) {
  body.mobile-site .game .game__list .game-list-container .game-holder .hover-play {
    min-height: 42px;
    padding: 7px;
  }

  body.mobile-site .game .game__list .game-list-container .game-holder .hover-play h6 {
    font-size: 10.5px;
  }

  body.mobile-site .game .game__list .game-list-container .game-holder .hover-play .fas {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    font-size: 10px;
  }
}

body.mobile-site .slot-game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-md);
  background: var(--wv-surface-strong);
}

body.mobile-site .slot-game-header h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mobile-site .slot-game__search-cont {
  flex: 0 1 190px;
  min-width: 110px;
}

body.mobile-site .game-search {
  display: flex;
  width: 100% !important;
  align-items: center;
}

body.mobile-site .game-search .form-control-sm {
  min-width: 0;
}

body.mobile-site .slot-game-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  width: 100%;
}

body.mobile-site .slot-game-item {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

body.mobile-site .slot-game-item > a {
  display: flex !important;
  position: relative;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-md);
  background: var(--background-page, #11131b) !important;
  box-shadow: var(--wv-shadow-sm);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body.mobile-site .slot-game-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--wv-border);
  background: rgba(255, 255, 255, 0.025);
}

body.mobile-site .slot-game-img img,
body.mobile-site .slot-game-img img[style] {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center;
  background: transparent;
}

body.mobile-site .slot-game-item .games-bottom {
  display: flex;
  min-height: 58px;
  flex: 1 1 auto;
  align-items: center;
  padding: 8px 9px !important;
  color: var(--primary-text, #fff);
  background:
    linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.08)),
    var(--primary-color, #4f3695) !important;
}

body.mobile-site .slot-game-item .bottom-info .name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--primary-text, #fff) !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.mobile-site .slot-game-item .slot-game-tag.hot {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--secondary-text, #111) !important;
  background: var(--secondary-color, #b29cff) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.20);
}

body.mobile-site .slot-game-item .slot-game-tag.hot .info {
  color: inherit !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

body.mobile-site .slot-game-item .wv-game-status-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  display: none;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50px;
  color: #fff;
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
  pointer-events: none;
}

body.mobile-site .slot-game-item .wv-game-status-badge.is-visible {
  display: block;
}

body.mobile-site .slot-game-item .hover-play {
  pointer-events: none;
}

body.mobile-site .slot-game-item .hover-play .fas {
  color: var(--secondary-text, #111) !important;
  background: var(--secondary-color, #b29cff) !important;
}

body.mobile-site .slot-game-item .progress.baradjust {
  height: 18px;
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

body.mobile-site .slot-game-item .progress-bar.bg-info {
  color: var(--secondary-text, #111) !important;
  background-color: var(--secondary-color, #b29cff) !important;
  font-size: 9px;
  font-weight: 800;
}

@media (hover: hover) and (pointer: fine) {
  body.mobile-site .slot-game-item > a:hover {
    border-color: var(--secondary-color, #b29cff);
    box-shadow: var(--wv-shadow-md);
    transform: translateY(-2px);
  }
}

@media screen and (max-width: 480px) {
  body.mobile-site .slot-game-item .games-bottom {
    min-height: 54px;
    padding: 7px 8px !important;
  }

  body.mobile-site .slot-game-item .bottom-info .name {
    font-size: 11px;
  }

  body.mobile-site .slot-game-item .slot-game-tag.hot .info,
  body.mobile-site .slot-game-item .progress-bar.bg-info {
    font-size: 8px;
  }
}

/* Transactions */
body.mobile-site .transaksi .component-tabs .nav-item {
  min-width: 145px;
}

body.mobile-site .transaksi .component-tab-content {
  padding: 12px;
}

body.mobile-site .transaksi .transaksi-grid {
  margin-right: -6px;
  margin-left: -6px;
}

body.mobile-site .transaksi .transaksi-grid > [class*="col-"] {
  padding-right: 6px;
  padding-left: 6px;
}

body.mobile-site .transaksi .page-form,
body.mobile-site .transaksi .transaksi-note,
body.mobile-site .transaksi .withdraw-form {
  overflow: hidden;
  border-radius: var(--wv-radius-md);
}

body.mobile-site .transaksi .page-form__header,
body.mobile-site .transaksi .form-header {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 800;
}

body.mobile-site .transaksi .page-form__content,
body.mobile-site .transaksi .formulir-form {
  padding: 12px;
}

body.mobile-site .transaksi .payment-item,
body.mobile-site .transaksi .payment-item[style] {
  width: 102px !important;
  min-width: 102px !important;
  margin-right: 10px !important;
  border-radius: var(--wv-radius-sm);
}

body.mobile-site .transaksi .payment-icon img {
  max-height: 42px;
  object-fit: contain;
}

body.mobile-site .transaksi #qrisResult img {
  display: block;
  width: min(260px, 100%);
  height: auto;
  margin: 0 auto;
  border-radius: var(--wv-radius-md);
}

/* Transaction page: neutral surfaces with accents from the active admin theme. */
body.mobile-site.page-transaksi .transaksi .component-tab-content {
  color: var(--page-text, var(--primary-text, #fff)) !important;
  background: var(--background-page, #11131b) !important;
  border: 1px solid var(--wv-border);
  box-shadow: var(--wv-shadow-md);
}

body.mobile-site.page-transaksi .transaksi .transaksi-formulir,
body.mobile-site.page-transaksi .transaksi .page-form,
body.mobile-site.page-transaksi .transaksi .transaksi-info,
body.mobile-site.page-transaksi .transaksi .transaksi-table-bottom .bottom-holder {
  color: var(--page-text, var(--primary-text, #fff)) !important;
  background: var(--background-page, #11131b) !important;
  border: 1px solid var(--wv-border);
  box-shadow: var(--wv-shadow-sm);
}

body.mobile-site.page-transaksi .transaksi .page-form__header,
body.mobile-site.page-transaksi .transaksi .transaksi-info .info-header {
  padding: 12px 16px;
  color: var(--primary-text, #fff) !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.08)),
    var(--primary-color, #4f3695) !important;
  border-bottom: 1px solid var(--wv-border);
  font-size: 14px;
  font-weight: 800;
}

body.mobile-site.page-transaksi .transaksi .page-form__content,
body.mobile-site.page-transaksi .transaksi .transaksi-info .info-content {
  color: var(--page-text, var(--primary-text, #fff)) !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

body.mobile-site.page-transaksi .transaksi .page-form__content > form > .transaksi-formulir,
body.mobile-site.page-transaksi .transaksi .page-form__content .transaksi-formulir.flip-card {
  padding: 0;
  background: transparent !important;
  border: 0;
  box-shadow: none;
}

body.mobile-site.page-transaksi .transaksi .form-group,
body.mobile-site.page-transaksi .transaksi .form-group label {
  color: var(--page-text, var(--primary-text, #fff)) !important;
}

body.mobile-site.page-transaksi .transaksi .payment-item,
body.mobile-site.page-transaksi .transaksi .payment-item[style] {
  overflow: hidden;
  border: 1px solid var(--wv-border);
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none;
}

body.mobile-site.page-transaksi .transaksi .bankOption .card.bg-light {
  color: var(--page-text, var(--primary-text, #fff)) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-sm);
  box-shadow: none;
}

body.mobile-site.page-transaksi .transaksi input[type="file"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-sm);
  color: var(--page-text, var(--primary-text, #fff));
  background: rgba(255, 255, 255, 0.045);
}

body.mobile-site.page-transaksi .transaksi #qrisResult {
  padding: 16px;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-md);
  background: rgba(255, 255, 255, 0.035);
}

body.mobile-site.page-transaksi .transaksi #qrisResult .text-white {
  color: var(--page-text, var(--primary-text, #fff)) !important;
}

/* Profile */
body.mobile-site .profile__container {
  padding: 12px;
}

body.mobile-site .profile__tab > .row {
  margin-right: 0;
  margin-left: 0;
}

body.mobile-site .profile__tab > .row > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

body.mobile-site .profile__tab .nav {
  flex-direction: row !important;
  margin-bottom: 12px;
}

body.mobile-site .profile__tab .nav-link {
  flex: 1 0 auto;
  min-width: 140px;
}

body.mobile-site .profile-tab__holder,
body.mobile-site .my-account__holder {
  min-width: 0;
  border-radius: var(--wv-radius-md);
}

body.mobile-site .profile-item,
body.mobile-site .profile-status {
  height: 100%;
  padding: 10px;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-sm);
  background: rgba(0, 0, 0, 0.10);
}

/* Registration */
body.mobile-site .register__container {
  padding: 14px;
}

body.mobile-site .register .register__note,
body.mobile-site .register .register__notemail {
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-md);
}

body.mobile-site .register .form-group .row {
  row-gap: 7px;
}

body.mobile-site .register .form-group [class*="col-lg-4"],
body.mobile-site .register .form-group [class*="col-lg-8"] {
  max-width: 100%;
  flex: 0 0 100%;
}

body.mobile-site .register .cap-img {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}

body.mobile-site .register .cap-img img {
  max-height: 42px;
  border-radius: 6px;
}

/* Registration page: structured desktop form and comfortable mobile flow. */
body.mobile-site.page-daftar .register .register__container {
  width: 100%;
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
  padding: 20px 24px 24px;
  color: var(--page-text, var(--primary-text, #fff)) !important;
  background: var(--background-page, #11131b) !important;
  border: 1px solid var(--wv-border);
  box-shadow: var(--wv-shadow-md);
  text-align: left;
}

body.mobile-site.page-daftar .register .page-header {
  color: var(--primary-text, #fff) !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.08)),
    var(--primary-color, #4f3695) !important;
  border-color: var(--wv-border-strong);
  font-size: 17px;
}

body.mobile-site.page-daftar .register .register-form {
  width: 100%;
  max-width: 820px;
  margin: 14px auto 0;
}

body.mobile-site.page-daftar .register .register__note,
body.mobile-site.page-daftar .register .register__notemail {
  margin: 0 0 16px;
  padding: 12px 14px;
  color: var(--page-text, var(--primary-text, #fff));
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--wv-border);
  border-left: 4px solid var(--secondary-color, #b29cff);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
}

body.mobile-site.page-daftar .register .register__note .note__head {
  margin-bottom: 3px;
  color: var(--secondary-color, #b29cff);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

body.mobile-site.page-daftar .register .form-group {
  margin-bottom: 14px;
}

body.mobile-site.page-daftar .register .form-group > .row {
  align-items: center;
  row-gap: 7px;
}

body.mobile-site.page-daftar .register .form-group label {
  margin-bottom: 0;
  color: var(--page-text, var(--primary-text, #fff)) !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

body.mobile-site.page-daftar .register input.form-control,
body.mobile-site.page-daftar .register select.form-control {
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 11px;
  color: #24262d !important;
  background: #fff !important;
}

body.mobile-site.page-daftar .register input.form-control::placeholder {
  color: #7a7f89 !important;
  opacity: 1;
}

body.mobile-site.page-daftar .register input.form-control:focus,
body.mobile-site.page-daftar .register select.form-control:focus {
  border-color: var(--secondary-color, #b29cff) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.10);
  outline: 0;
}

body.mobile-site.page-daftar .register input.form-control[readonly] {
  color: #626773 !important;
  background: #eef0f4 !important;
}

body.mobile-site.page-daftar .register .input-group-text {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--primary-color, #4f3695);
  border-radius: 11px 0 0 11px !important;
  color: var(--primary-text, #fff);
  background: var(--primary-color, #4f3695);
  font-size: 14px;
  font-weight: 800;
}

body.mobile-site.page-daftar .register .input-group > .form-control {
  border-radius: 0 11px 11px 0;
}

/* Keep the +62 prefix and phone field on one line at every viewport. */
body.mobile-site.page-daftar .register #phoneInput .input-group {
  display: flex !important;
  width: 100%;
  flex-wrap: nowrap !important;
  align-items: stretch;
}

body.mobile-site.page-daftar .register #phoneInput .input-group-prepend {
  display: flex;
  flex: 0 0 auto;
  width: auto;
  margin-right: -1px;
}

body.mobile-site.page-daftar .register #phoneInput .input-group-text {
  width: auto !important;
  min-width: 58px;
  height: 46px;
  justify-content: center;
  white-space: nowrap;
  border-radius: 11px 0 0 11px !important;
}

body.mobile-site.page-daftar .register #phoneInput #phone.form-control {
  flex: 1 1 0 !important;
  width: 1% !important;
  min-width: 0 !important;
  max-width: none !important;
  border-radius: 0 11px 11px 0 !important;
}

body.mobile-site.page-daftar .register .cap-img {
  display: block;
}

body.mobile-site.page-daftar .register .cap-content {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
}

body.mobile-site.page-daftar .register .cap-img img {
  width: auto;
  max-width: calc(100% - 50px);
  height: 44px;
  max-height: 44px;
  border: 1px solid var(--wv-border);
  border-radius: 8px !important;
  object-fit: contain;
}

body.mobile-site.page-daftar .register #reloadCaptcha {
  display: inline-flex;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--secondary-color, #b29cff);
  border-radius: 10px;
  color: var(--secondary-text, #111);
  background: var(--secondary-color, #b29cff);
}

body.mobile-site.page-daftar .register .register-terms {
  display: block;
  margin: 4px 0 2px;
  padding: 12px 14px;
  border: 1px solid var(--wv-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}

body.mobile-site.page-daftar .register .register-terms span {
  margin-left: 0;
}

body.mobile-site.page-daftar .register .register-terms a {
  color: var(--secondary-color, #b29cff) !important;
  font-weight: 800;
}

body.mobile-site.page-daftar .register .button-submit {
  display: block;
  width: min(100%, 380px);
  min-height: 48px;
  margin: 18px auto 0;
  border-radius: 12px;
  color: var(--secondary-text, #111) !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.08)),
    var(--secondary-color, #b29cff) !important;
  font-size: 15px;
  font-weight: 800;
}

@media screen and (min-width: 769px) {
  body.mobile-site.page-daftar .register .form-group > .row > .col-lg-4 {
    max-width: 33.333333%;
    flex: 0 0 33.333333%;
  }

  body.mobile-site.page-daftar .register .form-group > .row > .col-lg-8 {
    max-width: 66.666667%;
    flex: 0 0 66.666667%;
  }
}

@media screen and (max-width: 768px) {
  body.mobile-site.page-daftar .register .register__container {
    padding: 12px;
  }

  body.mobile-site.page-daftar .register .page-header {
    font-size: 15px;
  }

  body.mobile-site.page-daftar .register .form-group label {
    margin-bottom: 2px;
  }

  body.mobile-site.page-daftar .register .form-group > .row > [class*="col-lg-"] {
    max-width: 100%;
    flex: 0 0 100%;
  }

  body.mobile-site.page-daftar .register .button-submit {
    width: 100%;
  }
}

/* Bonus and referral */
body.mobile-site .bonus .component-tab-content,
body.mobile-site .transaksi .component-tab-content {
  min-height: 0 !important;
}

body.mobile-site .bonus-content,
body.mobile-site .transaksi-formulir {
  padding: 12px;
}

body.mobile-site .bonus-header,
body.mobile-site .transaksi .form-title {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 800;
}

/* Promotions and events */
body.mobile-site .promo__container,
body.mobile-site .news__container {
  padding: 12px;
}

body.mobile-site .promo__list,
body.mobile-site .news-list {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 12px;
}

body.mobile-site .promo__list .list-item,
body.mobile-site .news-list .list-item,
body.mobile-site .news-list .list-item[style] {
  display: grid;
  grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  margin: 0 !important;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-md);
  background: rgba(0, 0, 0, 0.12);
  box-shadow: var(--wv-shadow-sm);
}

body.mobile-site .promo__list .item-image,
body.mobile-site .news-list .item-image {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--wv-radius-sm);
}

body.mobile-site .promo__list .item-image img,
body.mobile-site .news-list .item-image img,
body.mobile-site .news-list .item-image img[style] {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 110px;
  object-fit: cover;
}

body.mobile-site .promo__list .item-context,
body.mobile-site .news-list .item-context {
  min-width: 0;
}

body.mobile-site .promo__list h6,
body.mobile-site .news-list h6 {
  margin: 0 0 8px;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  font-size: 13px;
  line-height: 1.4;
}

body.mobile-site .news-list .content-event {
  max-height: 250px;
  overflow: auto;
  padding-right: 4px;
}

body.mobile-site .news-list .button-detail-event {
  width: 100%;
  min-height: 38px;
  margin: 5px 0;
  text-align: left;
}

/* Help */
body.mobile-site .help__content {
  padding: 12px;
}

body.mobile-site .help__content > .row {
  margin-right: 0;
  margin-left: 0;
}

body.mobile-site .help__content > .row > [class*="col-"] {
  max-width: 100%;
  flex: 0 0 100%;
  padding-right: 0;
  padding-left: 0;
}

body.mobile-site .help__content .nav-pills {
  flex-direction: row !important;
}

body.mobile-site .help__content .nav-pills .nav-link {
  flex: 0 0 auto;
}

body.mobile-site .help__content .tab-content {
  width: 100%;
  min-width: 0;
  margin-top: 10px;
}

body.mobile-site .help-accordion .card {
  overflow: hidden;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-sm);
  background: rgba(0, 0, 0, 0.12);
}

body.mobile-site .help-accordion .card + .card {
  margin-top: 8px;
}

body.mobile-site .help-accordion .card-body {
  overflow-wrap: anywhere;
}

body.mobile-site .help-accordion .card-body img {
  height: auto !important;
}

/* Contact */
body.mobile-site .contact-us__content {
  padding: 12px;
}

body.mobile-site .contact-us__content > .row {
  margin-right: -5px;
  margin-left: -5px;
}

body.mobile-site .contact-us__content > .row > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

body.mobile-site .contact-us__item {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-md);
  background: rgba(0, 0, 0, 0.12);
}

body.mobile-site .contact-us__item .item-content {
  padding: 12px;
}

/* Memo: final guard against old fixed heights/widths */
body.mobile-site .memo .component-tab-content,
body.mobile-site .memo .table-dataTable,
body.mobile-site .memo .dataTables_wrapper {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body.mobile-site .memo table.dataTable {
  width: 100% !important;
  table-layout: fixed;
}

/* Modals and embedded content */
body.mobile-site .modal {
  padding-right: 0 !important;
}

body.mobile-site .modal-dialog {
  width: calc(100% - 24px);
  max-width: 460px;
  margin: 12px auto;
}

body.mobile-site .modal-content {
  overflow: hidden;
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-lg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
}

body.mobile-site .modal-header,
body.mobile-site .modal-body,
body.mobile-site .modal-footer {
  min-width: 0;
}

body.mobile-site .modal iframe,
body.mobile-site .modal iframe[height] {
  display: block;
  width: 100% !important;
  height: min(72vh, 720px) !important;
  border: 0;
}

body.mobile-site .modal .close {
  z-index: 2;
}

/* Login modal: compact, theme-aware, and comfortable on mobile. */
body.mobile-site #loginModal .modal-dialog {
  width: calc(100% - 24px);
  max-width: 440px;
  margin: clamp(20px, 8vh, 72px) auto;
}

body.mobile-site #loginModal .modal-content {
  position: relative;
  overflow: hidden;
  color: var(--page-text, var(--primary-text, #fff)) !important;
  background: var(--background-page, #11131b) !important;
  border: 1px solid var(--wv-border-strong) !important;
  border-radius: 18px !important;
  box-shadow: 0 26px 74px rgba(0, 0, 0, 0.48);
}

body.mobile-site #loginModal .modal-content .close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: var(--secondary-text, #111) !important;
  background: var(--secondary-color, #b29cff) !important;
  opacity: 1;
  box-shadow: var(--wv-shadow-sm);
}

body.mobile-site #loginModal .modal-content .close i {
  font-size: 13px;
}

body.mobile-site #loginModal .modal-header {
  justify-content: center;
  padding: 24px 58px 12px;
  border-bottom: 0;
}

body.mobile-site #loginModal .modal-title {
  margin: 0;
  color: var(--secondary-color, #b29cff) !important;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

body.mobile-site #loginModal .modal-body {
  padding: 8px 28px 26px;
}

body.mobile-site #loginModal .form-item {
  margin-bottom: 16px;
}

body.mobile-site #loginModal .form-item .item-title {
  margin-bottom: 7px;
  color: var(--page-text, var(--primary-text, #fff)) !important;
  font-size: 13px;
  font-weight: 700;
}

body.mobile-site #loginModal .input-custom,
body.mobile-site #loginModal .form-control {
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  color: #24262d !important;
  background: #fff !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
}

body.mobile-site #loginModal .input-custom::placeholder,
body.mobile-site #loginModal .form-control::placeholder {
  color: #7a7f89 !important;
  opacity: 1;
}

body.mobile-site #loginModal .input-custom:focus,
body.mobile-site #loginModal .form-control:focus {
  border-color: var(--secondary-color, #b29cff) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.10);
  outline: 0;
}

body.mobile-site #loginModal .form-button {
  display: flex;
  margin-top: 8px;
}

body.mobile-site #loginModal .form-button .btn-custom {
  width: 100%;
  min-height: 48px;
  margin: 0;
  border-radius: 12px;
  color: var(--secondary-text, #111) !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.08)),
    var(--secondary-color, #b29cff) !important;
  font-size: 15px;
  font-weight: 800;
}

body.mobile-site #loginModal .form-register {
  padding-top: 20px;
  color: var(--page-text, var(--primary-text, #fff));
  font-size: 13px;
  text-align: center;
}

body.mobile-site #loginModal .form-register a {
  color: var(--secondary-color, #b29cff) !important;
  font-weight: 800;
}

@media screen and (max-width: 480px) {
  body.mobile-site #loginModal .modal-dialog {
    width: calc(100% - 20px);
    margin: 18px auto;
  }

  body.mobile-site #loginModal .modal-header {
    padding: 22px 52px 10px;
  }

  body.mobile-site #loginModal .modal-title {
    font-size: 21px;
  }

  body.mobile-site #loginModal .modal-body {
    padding: 8px 18px 22px;
  }
}

/* SEO content should never force horizontal overflow. */
body.mobile-site .seo-mobile,
body.mobile-site .seo-mob-content,
body.mobile-site .seo-content {
  max-width: 100%;
  overflow-wrap: anywhere;
}

body.mobile-site .seo-mob-content img,
body.mobile-site .seo-content img {
  height: auto !important;
}

/* Mobile refinements */
@media screen and (max-width: 480px) {
  :root {
    --wv-control-height: 40px;
  }

  body.mobile-site .main-content {
    padding-top: 9px;
  }

  body.mobile-site .page-header {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 15px;
  }

  body.mobile-site .component-tab-content,
  body.mobile-site .register__container,
  body.mobile-site .profile__container,
  body.mobile-site .promo__container,
  body.mobile-site .news__container,
  body.mobile-site .contact-us__content,
  body.mobile-site .help__content {
    border-radius: 14px;
  }

  body.mobile-site .component-tabs .nav-item {
    min-width: 132px;
  }

  body.mobile-site .component-tabs .nav-link,
  body.mobile-site .profile__tab .nav-link,
  body.mobile-site .help__content .nav-link {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 11px;
  }

  body.mobile-site table thead th,
  body.mobile-site table.dataTable thead th,
  body.mobile-site table tbody td,
  body.mobile-site table.dataTable tbody td {
    padding: 9px 7px !important;
    font-size: 10.5px;
  }

  body.mobile-site .game-list-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
  }

  body.mobile-site .slot-game-header {
    align-items: stretch;
    flex-direction: column;
  }

  body.mobile-site .slot-game__search-cont {
    width: 100%;
    flex-basis: auto;
  }

  body.mobile-site .promo__list .list-item,
  body.mobile-site .news-list .list-item,
  body.mobile-site .news-list .list-item[style] {
    grid-template-columns: 1fr;
  }

  body.mobile-site .promo__list .item-image img,
  body.mobile-site .news-list .item-image img,
  body.mobile-site .news-list .item-image img[style] {
    aspect-ratio: 16 / 7;
    min-height: 0;
  }

  body.mobile-site .contact-us__content > .row > [class*="col-"] {
    max-width: 100%;
    flex: 0 0 100%;
  }
}

@media screen and (max-width: 359px) {
  body.mobile-site .header-mobile__nav .header-mobile__item {
    padding-right: 9px;
    padding-left: 9px;
    font-size: 10px;
  }

  body.mobile-site .game-list-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mobile-site .slot-game-list {
    gap: 8px !important;
  }

  body.mobile-site .footer-mobile__nav .nav-label {
    font-size: 9px;
  }
}

/* Desktop intentionally mirrors the mobile application shell. */
@media screen and (min-width: 769px) {
  html {
    background-color: #090a10 !important;
    background-image:
      radial-gradient(circle at 50% 0%, rgba(89, 48, 160, 0.18), transparent 46%),
      linear-gradient(180deg, #0b0a11 0%, #111019 48%, #08090d 100%) !important;
    background-attachment: fixed !important;
  }

  body.mobile-site {
    width: min(100%, var(--wv-shell-width)) !important;
    max-width: var(--wv-shell-width) !important;
    margin: 0 auto !important;
    background: var(--navbar-color, #111) !important;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.04),
      0 22px 70px rgba(0, 0, 0, 0.55) !important;
  }

  body.mobile-site .header-mobile,
  body.mobile-site #main-route,
  body.mobile-site .main-content,
  body.mobile-site .container {
    max-width: 100% !important;
  }

  body.mobile-site .footer-mobile {
    width: min(100vw, var(--wv-shell-width)) !important;
    max-width: var(--wv-shell-width) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  body.mobile-site .footer-chat {
    right: max(14px, calc((100vw - var(--wv-shell-width)) / 2 + 14px)) !important;
  }

  body.mobile-site .sidenav {
    width: min(100vw, var(--wv-shell-width)) !important;
    max-width: var(--wv-shell-width) !important;
  }

  body.mobile-site .sidenav.sidenav-open {
    right: max(0px, calc((100vw - var(--wv-shell-width)) / 2)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mobile-site *,
  body.mobile-site *::before,
  body.mobile-site *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
 * DESKTOP FULL-WIDTH MODE — V2
 * Desktop uses the available monitor width while mobile
 * behavior below 769px remains unchanged.
 * This block intentionally comes last to override the former
 * 480px centered phone-shell rules.
 * ======================================================= */
@media screen and (min-width: 769px) {
  :root {
    --wv-desktop-content: 1320px;
    --wv-desktop-header: 1440px;
    --wv-desktop-hero: 1500px;
  }

  html {
    width: 100%;
    min-width: 769px;
    background-color: #090a10 !important;
    background-image:
      radial-gradient(
        circle at 12% 0%,
        rgba(111, 65, 205, 0.16) 0,
        transparent 38%
      ),
      radial-gradient(
        circle at 88% 4%,
        rgba(44, 103, 201, 0.11) 0,
        transparent 34%
      ),
      linear-gradient(
        180deg,
        #0a0a10 0%,
        #11101a 46%,
        #08090d 100%
      ) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
  }

  body.mobile-site {
    width: 100% !important;
    max-width: none !important;
    min-width: 769px !important;
    min-height: 100vh;
    margin: 0 !important;
    overflow-x: hidden;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.mobile-site #main-route,
  body.mobile-site .main-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.mobile-site .main-content {
    min-height: calc(100vh - 210px);
    padding-top: 18px;
    padding-bottom: 104px;
  }

  body.mobile-site .container {
    width: 100% !important;
    max-width: var(--wv-desktop-content) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 20px;
    padding-left: 20px;
  }

  /* Full-width desktop header with centered content. */
  body.mobile-site .header-mobile {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background:
      linear-gradient(
        180deg,
        rgba(22, 12, 38, 0.99) 0%,
        rgba(34, 12, 57, 0.98) 100%
      ) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.34);
  }

  body.mobile-site .header-mobile__marquee,
  body.mobile-site .header-mobile__top,
  body.mobile-site .header-mobile__nav {
    width: 100% !important;
    max-width: var(--wv-desktop-header) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.mobile-site .header-mobile__marquee {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 5px 24px 0;
  }

  body.mobile-site .header-mobile__marquee .marquee {
    flex: 1 1 auto;
    width: auto;
    font-size: 12px;
  }

  body.mobile-site .header-mobile__top {
    min-height: 62px;
    padding: 6px 24px 4px;
  }

  body.mobile-site .header-mobile__top .mobile-logo {
    width: 250px;
    max-width: 32%;
  }

  body.mobile-site .header-mobile__top .mobile-logo img {
    width: 100% !important;
    height: 46px !important;
    max-height: 46px;
  }

  body.mobile-site .header-mobile__top .mobile-help,
  body.mobile-site .header-mobile__top .mobile-right .mobile-menu .mobile-menu--line {
    width: 40px;
    height: 40px;
    padding: 9px;
  }

  body.mobile-site .header-mobile__top .mobile-balance {
    max-width: 180px;
    min-height: 40px;
    padding: 5px 6px 5px 13px;
  }

  body.mobile-site .header-mobile__top .mobile-balance .wallet-amount {
    max-width: 132px;
    font-size: 12px;
  }

  body.mobile-site .header-mobile__nav {
    padding: 5px 24px 10px;
  }

  body.mobile-site .header-mobile-swiper {
    width: 100%;
    overflow: hidden;
  }

  body.mobile-site .header-mobile-swiper .swiper-wrapper {
    align-items: center;
    justify-content: flex-start;
  }

  body.mobile-site .header-mobile__nav .header-mobile__item {
    min-height: 38px;
    padding: 7px 14px;
    gap: 7px;
    font-size: 12px;
  }

  body.mobile-site .header-mobile__nav .header-mobile__item img {
    width: 18px;
    height: 18px;
  }

  /* Desktop hero and home sections. */
  body.mobile-site .home .home__slider {
    padding-top: 4px;
  }

  body.mobile-site .home .home__slider .container {
    max-width: var(--wv-desktop-hero) !important;
  }

  body.mobile-site .home .home__slider .swiper-container {
    border-radius: 18px;
  }

  body.mobile-site .home .home__slider .swiper-slide img {
    display: block;
    width: 100% !important;
    height: clamp(300px, 32vw, 520px) !important;
    max-height: 520px !important;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }

  body.mobile-site .home .home__jackpot .jackpot-background {
    min-height: 150px;
    border-radius: 18px;
  }

  body.mobile-site .home .mobile__games {
    margin-top: 18px;
    padding: 16px 0;
  }

  body.mobile-site .home .games-container__header {
    margin-bottom: 12px;
  }

  body.mobile-site .home .games-title h6 {
    font-size: 16px;
  }

  body.mobile-site .home .mobile-games-list {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px !important;
    width: 100%;
    overflow: visible !important;
  }

  body.mobile-site .home .mobile-games-list .games-holder {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.mobile-site .home .mobile-games-list .games-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 13px;
  }

  body.mobile-site .home .mobile-games-list .games-img img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  body.mobile-site .home .mobile-games-list .games-name {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.3;
  }

  /* Keep all home providers in one horizontal slider. */
  body.mobile-site .home .oroplay-home-provider-track {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(138px, 158px) !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    width: 100%;
    padding: 10px 2px 14px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-site .home .oroplay-home-provider-card {
    scroll-snap-align: start;
  }

  /* Provider catalog and game catalog use desktop grids. */
  body.mobile-site .game-list-container {
    grid-template-columns:
      repeat(auto-fill, minmax(185px, 1fr)) !important;
    gap: 18px !important;
  }

  body.mobile-site .slot-game-list {
    grid-template-columns:
      repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 16px !important;
  }

  body.mobile-site .slot-game-header {
    padding: 15px 17px;
  }

  body.mobile-site .slot-game-header h3 {
    font-size: 21px;
  }

  body.mobile-site .slot-game__search-cont {
    flex-basis: 300px;
  }

  /* General page panels receive desktop breathing room. */
  body.mobile-site .component-tab-content,
  body.mobile-site .register__container,
  body.mobile-site .profile__container,
  body.mobile-site .promo__container,
  body.mobile-site .news__container,
  body.mobile-site .contact-us__content,
  body.mobile-site .help__content,
  body.mobile-site .transaksi-formulir,
  body.mobile-site .bonus-content,
  body.mobile-site .memo__container {
    width: 100%;
    max-width: 100%;
  }

  body.mobile-site .register__container {
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
  }

  body.mobile-site .contact-us__content,
  body.mobile-site .help__content,
  body.mobile-site .profile__container,
  body.mobile-site .transaksi .component-tab-content,
  body.mobile-site .bonus .component-tab-content {
    padding: 22px;
  }

  body.mobile-site .table-responsive,
  body.mobile-site .table-dataTable,
  body.mobile-site .dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.mobile-site table,
  body.mobile-site table.dataTable {
    width: 100% !important;
  }

  /* Full-width fixed footer with centered desktop content. */
  body.mobile-site .footer-mobile {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0;
    transform: none !important;
    background: var(--primary-color, #4f3695) !important;
  }

  body.mobile-site .footer-mobile__nav,
  body.mobile-site .footer-mobile__login {
    width: 100% !important;
    max-width: var(--wv-desktop-content) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.mobile-site .footer-mobile__nav {
    min-height: 72px;
  }

  body.mobile-site .footer-mobile__nav .nav-link {
    padding: 9px 4px 8px;
  }

  body.mobile-site .footer-mobile__nav .nav-label {
    font-size: 12px;
  }

  body.mobile-site .footer-chat {
    right: 24px !important;
    bottom: 88px;
  }

  body.mobile-site .sidenav {
    width: min(420px, 100vw) !important;
    max-width: 420px !important;
  }

  body.mobile-site .sidenav.sidenav-open {
    right: 0 !important;
  }
}

@media screen and (min-width: 1440px) {
  :root {
    --wv-desktop-content: 1440px;
    --wv-desktop-header: 1520px;
    --wv-desktop-hero: 1560px;
  }

  body.mobile-site .home .mobile-games-list {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  body.mobile-site .game-list-container {
    grid-template-columns:
      repeat(auto-fill, minmax(195px, 1fr)) !important;
  }

  body.mobile-site .slot-game-list {
    grid-template-columns:
      repeat(auto-fill, minmax(205px, 1fr)) !important;
  }

  body.mobile-site .header-mobile-swiper .swiper-wrapper {
    justify-content: center;
  }
}

/* =========================================================
 * DESKTOP BACKGROUND — DARK PREMIUM GRAPHITE-PURPLE V3
 * Removes the bright corridor artwork on desktop and gives
 * every content section a restrained premium surface.
 * Mobile below 769px remains unchanged.
 * ======================================================= */
@media screen and (min-width: 769px) {
  html {
    background-color: #090a10 !important;
    background-image:
      radial-gradient(
        circle at 16% 7%,
        rgba(116, 72, 205, 0.16) 0%,
        rgba(116, 72, 205, 0.05) 25%,
        transparent 43%
      ),
      radial-gradient(
        circle at 86% 10%,
        rgba(52, 97, 190, 0.10) 0%,
        rgba(52, 97, 190, 0.03) 24%,
        transparent 40%
      ),
      linear-gradient(
        180deg,
        #090a10 0%,
        #12101b 48%,
        #08090e 100%
      ) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
  }

  /*
   * Theme files previously injected a large neon background
   * into body/main-content. These rules remove that artwork.
   */
  body.mobile-site,
  body.mobile-site #main-route,
  body.mobile-site .main-content,
  body.mobile-site .home {
    background-color: transparent !important;
    background-image: none !important;
    background-attachment: scroll !important;
  }

  body.mobile-site #main-route {
    position: relative;
    isolation: isolate;
  }

  body.mobile-site #main-route::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.012) 0%,
        transparent 24%
      );
  }

  /* Premium header surface. */
  body.mobile-site .header-mobile {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.035) 0%,
        rgba(0, 0, 0, 0.10) 100%
      ),
      var(--navbar-color, #15101f) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow:
      0 12px 34px rgba(0, 0, 0, 0.38),
      inset 0 -1px 0 rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* Hero remains the focus, while the page itself stays calm. */
  body.mobile-site .home .home__slider {
    background: transparent !important;
  }

  body.mobile-site .home .home__slider .swiper-container {
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: #101119;
    box-shadow:
      0 24px 58px rgba(0, 0, 0, 0.34),
      0 0 0 1px rgba(255, 255, 255, 0.018);
  }

  /* Jackpot block gets its own dark glass panel. */
  body.mobile-site .home .home__jackpot {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background:
      linear-gradient(
        180deg,
        rgba(24, 20, 36, 0.92) 0%,
        rgba(15, 14, 23, 0.94) 100%
      ) !important;
    box-shadow:
      0 18px 44px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.025);
  }

  body.mobile-site .home .home__jackpot .jackpot-background {
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow:
      inset 0 0 0 999px rgba(8, 8, 14, 0.22),
      0 14px 34px rgba(0, 0, 0, 0.24);
  }

  /* All game/provider sections use the same professional surface. */
  body.mobile-site .home .mobile__games {
    width: calc(100% - 40px);
    max-width: var(--wv-desktop-content);
    margin: 18px auto !important;
    padding: 18px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 18px;
    background:
      linear-gradient(
        180deg,
        rgba(25, 19, 40, 0.94) 0%,
        rgba(15, 14, 24, 0.95) 100%
      ) !important;
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.025);
  }

  body.mobile-site .home .mobile__games::before,
  body.mobile-site .home .mobile__games::after {
    content: none !important;
  }

  body.mobile-site .home .mobile__games .games-container,
  body.mobile-site .home .mobile__games .mobile-games-list,
  body.mobile-site .home .mobile__games .oroplay-home-provider-track {
    background: transparent !important;
  }

  body.mobile-site .home .games-container__header {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  body.mobile-site .home .games-action a,
  body.mobile-site .home .games-action button {
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
  }

  /* Prevent any theme color from creating bright white strips. */
  body.mobile-site .home section,
  body.mobile-site .home .container,
  body.mobile-site .home .games-container {
    background-image: none !important;
  }

  /* SEO/promo text also sits on a dark restrained panel. */
  body.mobile-site .home .home__seo,
  body.mobile-site .home .seo-content,
  body.mobile-site .home .seo-mobile {
    background-color: transparent !important;
    background-image: none !important;
  }

  body.mobile-site .home .home__seo > .container,
  body.mobile-site .home .seo-content,
  body.mobile-site .home .seo-mobile {
    border-radius: 18px;
    background:
      linear-gradient(
        180deg,
        rgba(20, 17, 31, 0.92) 0%,
        rgba(13, 12, 20, 0.94) 100%
      ) !important;
  }

  /* Footer follows the same premium direction. */
  body.mobile-site .footer-mobile {
    background:
      linear-gradient(
        180deg,
        rgba(24, 17, 39, 0.98) 0%,
        rgba(14, 12, 23, 0.99) 100%
      ) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}