/* Shared customer-facing palette, based on the supplied visual reference. */
:root {
  --primary-color: #010417;
  --secondary-color: #040e38;
  --site-bg: #010417;
  --site-panel: #061348;
  --site-blue: #2975ff;
  --site-blue-dark: #0049cc;
  --site-accent: #e4e404;
  --site-text: #ffffff;
  --site-muted: #b6c2cf;
  --site-border: #1b3474;
}
body { background-color: var(--site-bg) !important; color: var(--site-text); }
header.as-header-top, .as-running-text, .as-footer-section {
  background: var(--site-bg) !important;
  color: var(--site-text);
}
nav.as-navbar, .as-bottom-navbar, .offcanvas, .offcanvas-body,
.as-login-area-small, .as-userinfo-dropdown .dropdown-menu,
.as-modal .modal-content, .as-modal-content {
  background: var(--site-panel) !important;
  color: var(--site-text) !important;
}
nav.as-navbar { border-bottom: 1px solid var(--site-blue-dark); }
.as-running-text { border-block: 1px solid var(--site-border); }
.as-running-text span, header.as-header-top span,
header.as-header-top .as-userinfo-afterlogin a span[class^="icon-"],
.as-forget-pass, .as-footer-section a, .as-nav-link-bottom,
.as-section-title, .as-userprofile-section h2, .as-account-history-section h2,
.as-referral-section h2, .as-referral-section h3 {
  color: var(--site-blue) !important;
}
nav.as-navbar li:hover a, nav.as-navbar li.active a,
nav.as-navbar-small-home a:hover, nav.as-navbar-small-home a.active,
.as-nav-link-bottom:hover { color: var(--site-accent) !important; }
nav.as-navbar li:hover::before, nav.as-navbar li.active::before {
  background: var(--site-blue) !important;
}
.as-section-title::after {
  background: linear-gradient(90deg, var(--site-blue), var(--site-blue-dark)) !important;
}
.btn-primary, .as-login-button, .as-play-now-button,
.as-header-top .btn-secondary, .as-nav-tabs .as-nav-link.active {
  background: var(--site-panel) !important;
  border-color: var(--site-blue-dark) !important;
  color: var(--site-text) !important;
  box-shadow: none;
}
.btn-primary:hover, .as-login-button:hover, .as-header-top .btn-secondary:hover {
  background: var(--site-blue-dark) !important;
  border-color: var(--site-blue) !important;
}
.as-daftar-button, .as-header-top .btn-success {
  background: var(--site-accent) !important;
  border-color: var(--site-accent) !important;
  color: var(--site-bg) !important;
}
.as-header-top .btn-success span { color: var(--site-bg) !important; }
.as-daftar-button:hover, .as-header-top .btn-success:hover {
  background: #ffff37 !important;
  border-color: #ffff37 !important;
  color: var(--site-bg) !important;
}
.as-header-top .btn-outline-warning {
  background: transparent !important;
  border-color: var(--site-blue) !important;
  color: var(--site-text) !important;
}
.as-header-top .btn-outline-warning:hover { background: var(--site-blue-dark) !important; }
.as-form-control, .as-input-group .as-form-control,
.as-modal .form-control, .as-modal .form-select {
  background-color: var(--site-bg);
  color: var(--site-text);
  border-color: var(--site-border);
}
.as-form-control::placeholder, .as-modal .form-control::placeholder { color: var(--site-muted); }
.as-form-control:focus, .as-modal .form-control:focus {
  border-color: var(--site-blue);
  box-shadow: 0 0 0 3px rgb(41 117 255 / 20%);
}
.as-modal .modal-header, .as-modal .modal-footer {
  background: var(--site-panel) !important;
  border-color: var(--site-border) !important;
}
.as-modal .modal-title, .as-modal .as-modal-close-link { color: var(--site-text) !important; }
.as-footer-section { border-top: 1px solid var(--site-border); }
.as-footer-section small, .as-footer-section p { color: var(--site-muted); }
#lc-header { background: var(--site-panel) !important; }
#lc-btn, #lc-send:not(:disabled), #lc-restart-btn {
  background: var(--site-blue-dark) !important;
  color: var(--site-text) !important;
}
#lc-input:focus { border-color: var(--site-blue) !important; }
#lc-menu button { border-color: var(--site-blue-dark) !important; color: var(--site-blue-dark) !important; }
#lc-menu button:hover { background: #e8f0ff !important; }

/* Navigation selection uses a surface highlight instead of the arrow glyph. */
nav.as-navbar li:hover::before, nav.as-navbar li.active::before {
  content: none !important;
  display: none !important;
}
nav.as-navbar ul li { transition: background-color 150ms ease; }
nav.as-navbar li:hover, nav.as-navbar li.active,
nav.as-navbar-small-home a:hover, nav.as-navbar-small-home a.active {
  background-color: #16367a !important;
  border-color: transparent !important;
}
nav.as-navbar li:hover a, nav.as-navbar li.active a,
nav.as-navbar-small-home a:hover, nav.as-navbar-small-home a.active {
  color: var(--site-text) !important;
}
.finance-page .as-content-frame {
  background: var(--site-panel);
  border: 1px solid var(--site-border);
}
.finance-page .form-control, .finance-page .form-select,
.finance-page .input-group-text {
  background-color: var(--site-bg) !important;
  border-color: var(--site-border) !important;
  color: var(--site-text) !important;
}
.finance-page .form-control::placeholder { color: var(--site-muted); }
.finance-page .form-control:focus, .finance-page .form-select:focus {
  border-color: var(--site-blue) !important;
  box-shadow: 0 0 0 3px rgb(41 117 255 / 20%);
}
.finance-page .btn-outline-primary {
  color: #8ab4ff;
  border-color: var(--site-blue);
  background: transparent;
}
.finance-page .btn-outline-primary:hover, .finance-page .btn-outline-primary.active {
  background: #16367a;
  color: var(--site-text);
}
.finance-page .as-registration-submit-button {
  background: var(--site-accent) !important;
  border-color: var(--site-accent) !important;
  color: var(--site-bg) !important;
}
.finance-page .btn:disabled { opacity: .5; }
.finance-page .form-text { color: var(--site-muted); }
body .finance-page form.as-registration-form .as-input-group .as-input-group-text {
  background: var(--site-blue-dark) !important;
  border-color: var(--site-border) !important;
  color: var(--site-text) !important;
}

.finance-page .as-table {
  --bs-table-bg: var(--site-panel);
  --bs-table-color: var(--site-text);
  --bs-table-border-color: var(--site-border);
  --bs-table-striped-bg: #0c2059;
  --bs-table-striped-color: var(--site-text);
  --bs-table-hover-bg: #16367a;
  --bs-table-hover-color: var(--site-text);
  color: var(--site-text);
  border-color: var(--site-border);
}
.finance-page .as-table thead th {
  background: var(--site-bg) !important;
  color: var(--site-text);
  border-color: var(--site-border);
}
.finance-page .as-table td { border-color: var(--site-border); }
.finance-page .pagination .page-link {
  background: var(--site-bg);
  color: var(--site-muted);
  border-color: var(--site-border);
}
.finance-page .pagination .active .page-link,
.finance-page .pagination .page-link:hover {
  background: #16367a;
  color: var(--site-text);
}
.finance-page .as-content-frame > h1 {
  color: var(--site-text) !important;
}
/* Uniform footprint for the generated category artwork on both menus. */
nav.as-navbar .menu-item .icon-wrapper img,
nav.as-navbar .menu-item > a > img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  padding: 0;
  margin: 0 auto 6px;
}
nav.as-navbar-small-home a img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  padding: 0;
}
/* Game catalog surfaces, provider filters and search share the site palette. */
.single-row-section .single-row-sec-frame {
  background: var(--site-panel) !important;
  border: 1px solid var(--site-border);
}
.single-row-section .single-row-sec-frame h1 { color: var(--site-text) !important; }
.single-row-section .as-gameprovider-selection .as-gameprovider-element a {
  background: var(--site-bg) !important;
  color: var(--site-text) !important;
  border: 1px solid var(--site-border) !important;
  border-radius: 8px;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.single-row-section .as-gameprovider-selection .as-gameprovider-element a:hover,
.single-row-section .as-gameprovider-selection .as-gameprovider-element a.active {
  background: #16367a !important;
  border-color: var(--site-blue) !important;
}
.single-row-section .as-gameprovider-selection .as-provider-name {
  color: var(--site-text) !important;
}
.single-row-section .as-game-choice .input-group-text {
  background: var(--site-blue-dark) !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
}
.single-row-section .as-game-choice .form-select,
.single-row-section .as-game-choice .form-control {
  background-color: var(--site-bg) !important;
  color: var(--site-text) !important;
  border: 1px solid var(--site-border) !important;
}
.single-row-section .as-game-choice .form-control::placeholder { color: var(--site-muted); }
.single-row-section .as-game-choice .form-control:focus,
.single-row-section .as-game-choice .form-select:focus {
  border-color: var(--site-blue) !important;
  box-shadow: 0 0 0 3px rgb(41 117 255 / 20%);
}
.single-row-section .as-slot-inner-section a.as-slot-image {
  background: var(--site-bg) !important;
  color: var(--site-text) !important;
  border: 1px solid var(--site-border);
  border-radius: 12px;
  overflow: hidden;
}
.single-row-section .as-slot-inner-section a.as-slot-image:hover {
  border-color: var(--site-blue);
  background: #0c2059 !important;
}
.single-row-section .as-slot-inner-section a.as-slot-image h2 { color: var(--site-text) !important; }
.single-row-section .as-slot-inner-section a.as-slot-image h3 { color: var(--site-muted) !important; }
.single-row-section .as-badge-hot {
  background: var(--site-accent) !important;
  color: var(--site-bg) !important;
  box-shadow: 0 2px 6px rgb(228 228 4 / 20%) !important;
}
.single-row-section .as-slider-btn,
.single-row-section #scrollTopBtn {
  background: var(--site-blue-dark) !important;
  color: var(--site-text) !important;
}
.single-row-section .search-clear,
.single-row-section #gameSearchNoResult { color: var(--site-muted) !important; }
.single-row-section .skeleton-img, .single-row-section .skeleton-text {
  background-image: linear-gradient(90deg, #061348 25%, #16367a 50%, #061348 75%) !important;
}
/* Keep the scroll-to-top control on the left, clear of livechat. */
#scrollTopBtn {
  left: 16px;
  right: auto !important;
}
.as-footer-section a.as-back-to-top {
  left: 16px;
  right: auto !important;
}
/* Home catalog: shared section headers and reusable game/provider cards. */
.home-catalog-panel {
  padding: 24px;
  background: linear-gradient(135deg, #061348, #040e38);
  border: 1px solid var(--site-border);
  border-radius: 18px;
}
.home-catalog-heading, .home-catalog-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.home-catalog-heading { justify-content: space-between; margin-bottom: 20px; }
.home-catalog-title { min-width: 0; }
.home-catalog-title > img { object-fit: contain; flex-shrink: 0; }
.home-catalog-title h2 {
  margin: 0;
  color: var(--site-text);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .2px;
}
.home-catalog-link {
  color: var(--site-accent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.home-catalog-link:hover { color: #ffff76; }
.home-catalog-link span { margin-left: 5px; }
.home-provider-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  background: #16367a;
  border: 1px solid #2975ff66;
  border-radius: 8px;
  color: #b6d0ff;
  font-size: 12px;
  font-weight: 600;
}
.home-popular-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #2975ff #010417;
}
.home-game-card { flex: 0 0 calc((100% - 80px) / 6); min-width: 145px; scroll-snap-align: start; }
.home-provider-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.home-game-card, .home-provider-card {
  min-width: 0;
  background: var(--site-bg);
  border: 1px solid var(--site-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.home-game-card a, .home-provider-card a { display: block; height: 100%; color: inherit; text-decoration: none; }
.home-game-card:hover, .home-provider-card:not(.is-maintenance):hover {
  background: #0c2059;
  border-color: var(--site-blue);
  transform: translateY(-3px);
}
.home-catalog a:focus-visible, .home-popular-track:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: -3px;
}
.home-game-art, .home-provider-art { position: relative; overflow: hidden; background: var(--site-panel); }
.home-game-art img, .home-provider-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.home-card-caption { padding: 12px; text-align: left; }
.home-card-caption h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--site-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-card-caption p { margin: 5px 0 0; font-size: 10px; line-height: 1.4; color: var(--site-muted); }
.home-provider-action { display: block; margin-top: 6px; font-size: 10px; color: #8ab4ff; }
.home-provider-action > span { float: right; color: var(--site-accent); }
.home-provider-card.is-maintenance .home-provider-art img { filter: grayscale(1); opacity: .45; }
.home-provider-card.is-maintenance .home-provider-action { color: var(--site-muted); }
.home-maintenance-label {
  position: absolute;
  inset: auto 8px 8px;
  padding: 5px;
  background: #010417e6;
  border: 1px solid #b6c2cf55;
  border-radius: 6px;
  text-align: center;
  font-size: 10px;
  color: var(--site-muted);
}
@media (max-width: 991px) {
  .home-provider-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-game-card { flex-basis: calc((100% - 48px) / 4); }
}
@media (max-width: 575px) {
  .home-catalog-panel { padding: 14px; border-radius: 14px; }
  .home-catalog-heading { gap: 8px; margin-bottom: 14px; }
  .home-catalog-title { gap: 7px; }
  .home-catalog-title > img { width: 30px; height: 30px; }
  .home-catalog-title h2 { font-size: 15px; }
  .home-catalog-link { font-size: 10px; }
  .home-provider-count { min-width: 20px; height: 20px; font-size: 10px; }
  .home-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .home-popular-track { gap: 12px; }
  .home-game-card { flex-basis: 44%; min-width: 125px; }
  .home-card-caption { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-game-card, .home-provider-card { transition: none; }
}

/* Match the gap on both sides of the jackpot, without the catalog's mt-4. */
.progressive-jackpot + .home-catalog,
.progressive-jackpot + .as-slot-section {
  margin-top: 16px !important;
}
/* Typography: readable UI, distinctive section headings, digital jackpot. */
:root {
  --site-font: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --site-heading-font: 'Rajdhani', 'Sora', sans-serif;
}
body { font-family: var(--site-font) !important; }
button, input, select, textarea, .btn, .form-control, .form-select,
.menu-list, .menu-item, .dropdown-items li a,
.horizontal-scroll-wrapper > div a, .as-nav-link-bottom,
#lc-wrap, #lc-wrap textarea, #lc-wrap button {
  font-family: var(--site-font) !important;
}
.menu-item, .as-provider-name, .game-title,
.home-card-caption h3, .as-slot-image h2, .as-slot-image h3 {
  font-family: var(--site-font) !important;
  font-weight: 500;
}
.home-catalog-title h2, .as-section-title,
.finance-page .as-content-frame > h1,
.single-row-sec-frame > h1, .as-content-frame > h2 {
  font-family: var(--site-heading-font) !important;
  font-weight: 700;
  letter-spacing: .4px;
  line-height: 1.2;
}
.home-catalog-title h2 { font-size: 26px; }
.finance-page .as-content-frame > h1 { font-size: 28px; }
.home-card-caption h3 { font-weight: 600; }
#jackpot-number { font-family: 'Orbitron', monospace !important; font-weight: 700; }
.finance-page, .as-userinfo-afterlogin, .as-user-credit-info,
.as-credit-in, .as-credit-out, .as-last-credit, #jackpot-number {
  font-variant-numeric: tabular-nums lining-nums;
}
@media (max-width: 575px) {
  .home-catalog-title h2 { font-size: 21px; }
  .finance-page .as-content-frame > h1 { font-size: 24px; }
}
/* Compact desktop header: brand, account, balance and primary action in one row. */
.desktop-header { border-bottom: 1px solid var(--site-border); }
.desktop-header-row { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.desktop-brand { display: block; flex-shrink: 0; }
.desktop-brand img { display: block; width: 220px; height: 52px; object-fit: contain; }
.desktop-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; }
.desktop-utilities { display: flex; align-items: center; gap: 4px; padding-right: 10px; border-right: 1px solid var(--site-border); }
.desktop-utilities a, .desktop-utilities button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 36px; padding: 0; border: 0;
  border-radius: 8px; background: transparent; color: var(--site-muted);
  text-decoration: none;
}
.desktop-utilities a:hover, .desktop-utilities button:hover { background: #16367a; }
.desktop-account-toggle { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--site-text); font-size: 12px; padding: 10px 0; }
.desktop-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.desktop-account .dropdown-menu { background: var(--site-panel); border: 1px solid var(--site-border); border-radius: 12px; padding: 6px; min-width: 210px; }
.desktop-account .dropdown-item { color: var(--site-text); font-size: 12px; padding: 10px 12px; border-radius: 6px; }
.desktop-account .dropdown-item:hover, .desktop-account .dropdown-item:focus { background: #16367a; color: var(--site-text); }
.desktop-account .dropdown-divider { border-color: var(--site-border); }
.desktop-account .desktop-logout { color: #ff9d9d; }
.desktop-balance { display: flex; align-items: center; gap: 8px; border: 1px solid var(--site-border); border-radius: 9px; padding: 10px 12px; background: var(--site-panel); white-space: nowrap; }
.desktop-balance a { color: var(--site-text); text-decoration: none; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.desktop-balance button { background: none; border: 0; color: #8ab4ff; font-size: 11px; padding: 0; }
.desktop-header .desktop-withdraw, .desktop-header .desktop-deposit { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 18px; border-radius: 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.desktop-header .desktop-withdraw { border: 1px solid var(--site-blue); color: var(--site-text); background: transparent; }
.desktop-header .desktop-withdraw:hover { background: #16367a; }
.desktop-header .desktop-deposit { border: 1px solid var(--site-accent); background: var(--site-accent); color: var(--site-bg); }
header.desktop-header .desktop-deposit span { color: var(--site-bg) !important; }
.desktop-header .desktop-deposit:hover { background: #ffff37; }
@media (min-width: 768px) and (max-width: 991px) {
  .desktop-header-row { gap: 12px; min-height: 72px; }
  .desktop-brand img { width: 170px; height: 44px; }
  .desktop-header-actions { gap: 8px; }
  .desktop-utilities { gap: 0; padding-right: 6px; }
  .desktop-utilities a, .desktop-utilities button { width: 26px; }
  .desktop-account-name { max-width: 80px; }
  .desktop-balance { padding: 9px 8px; }
  .desktop-header .desktop-withdraw, .desktop-header .desktop-deposit { padding: 0 10px; }
}
.desktop-account { position: relative; }
.desktop-account summary { cursor: pointer; list-style: none; }
.desktop-account summary::-webkit-details-marker { display: none; }
.desktop-account[open] > .dropdown-menu { display: block; right: 0; left: auto; top: calc(100% + 8px); }
header.desktop-header .desktop-account-name { color: var(--site-text) !important; }
/* Compact category navigation to match the single-row desktop header. */
@media (min-width: 768px) {
  nav.as-navbar { padding-top: 0; padding-bottom: 0; }
  nav.as-navbar .menu-wrapper { padding: 12px 0; }
  nav.as-navbar .menu-list { gap: 20px; align-items: center; }
  nav.as-navbar .menu-list > .menu-item { padding: 5px 14px; border-radius: 8px; }
  nav.as-navbar .menu-item .icon-wrapper img,
  nav.as-navbar .menu-item > a > img {
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
  }
  nav.as-navbar .menu-item { font-size: 12px; line-height: 1.4; }
}
@media (min-width: 768px) and (max-width: 991px) {
  nav.as-navbar .menu-list { gap: 4px; }
  nav.as-navbar .menu-list > .menu-item { padding-inline: 9px; }
}
/* Direct menu links and wrapped category labels use the same text weight. */
nav.as-navbar .menu-list > .menu-item > a,
nav.as-navbar .menu-list > .menu-item .icon-wrapper {
  font-family: var(--site-font) !important;
  font-weight: 500 !important;
}
nav.as-navbar .menu-list > .menu-item > a > span:not([class]),
nav.as-navbar .menu-list > .menu-item .icon-wrapper > span:not([class]) {
  font-weight: 500 !important;
}
/* Payment and contact panels share the same restrained navy/blue surfaces. */
.payment-contact-section { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }
.payment-contact-panel { min-width: 0; padding: 24px; background: linear-gradient(135deg, #061348, #040e38); border: 1px solid var(--site-border); border-radius: 18px; }
.payment-contact-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.payment-contact-symbol { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid #2975ff66; background: #16367a; border-radius: 12px; color: var(--site-accent); font-size: 18px; }
.payment-contact-heading h2 { font-family: var(--site-heading-font); font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--site-text); margin: 0 0 4px; }
.payment-contact-heading p { color: var(--site-muted); font-size: 10px; line-height: 1.5; margin: 0; }
.payment-method-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.payment-method { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 58px; gap: 5px; padding: 8px 4px; border: 1px solid var(--site-border); background: var(--site-bg); border-radius: 9px; text-decoration: none; }
.payment-method-name { color: var(--site-text); font-size: 10px; font-weight: 600; letter-spacing: .2px; }
.payment-method-type { color: var(--site-muted); font-size: 9px; }
.payment-method.is-qris { background: #16367a; border-color: var(--site-blue); }
.payment-method.is-qris .payment-method-name { color: var(--site-accent); }
a.payment-method:hover { background: #16367a; border-color: var(--site-blue); }
.payment-method-note { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; color: var(--site-muted); font-size: 10px; line-height: 1.5; }
.payment-method-note i { color: #8ab4ff; }
.contact-channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.contact-channel { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px; border: 1px solid var(--site-border); border-radius: 10px; background: var(--site-bg); color: var(--site-text); font-size: 11px; font-weight: 500; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease; }
.contact-channel-symbol { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: #102759; color: #8ab4ff; font-size: 17px; }
.contact-channel-arrow { margin-left: auto; color: var(--site-accent); }
.contact-channel:hover { background: #16367a; border-color: var(--site-blue); color: var(--site-text); }
.contact-channel:hover .contact-channel-symbol { color: var(--site-accent); }
.payment-contact-section a:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; }
@media (max-width: 991px) {
  .payment-contact-section { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .payment-contact-section { gap: 16px; }
  .payment-contact-panel { padding: 16px; border-radius: 14px; }
  .payment-contact-heading { margin-bottom: 16px; }
  .payment-contact-heading h2 { font-size: 23px; }
  .payment-method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .contact-channel { gap: 8px; padding: 10px; font-size: 10px; }
  .contact-channel-symbol { width: 26px; height: 26px; }
}
/* Provider directory and footer complete the shared navy surface system. */
.provider-directory-panel { padding: 24px; background: linear-gradient(135deg, #061348, #040e38); border: 1px solid var(--site-border); border-radius: 18px; }
.provider-logo-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.provider-logo-card { min-width: 0; padding: 14px 8px 10px; background: var(--site-bg); border: 1px solid var(--site-border); border-radius: 10px; transition: background-color 160ms ease, border-color 160ms ease; }
.provider-logo-card:hover { background: #102759; border-color: var(--site-blue); }
.provider-logo-art { height: 44px; display: flex; justify-content: center; align-items: center; }
.provider-logo-art img { display: block; width: 100%; max-width: 112px; height: 40px; object-fit: contain; }
.provider-logo-card p { margin: 9px 0 0; font-size: 9px; line-height: 1.5; text-align: center; color: var(--site-muted); overflow-wrap: anywhere; }
footer.site-footer { background: #040e38 !important; border-top: 1px solid var(--site-border); padding: 20px 0; margin-top: 28px; }
.site-footer-row { display: flex; align-items: center; gap: 18px; }
.site-footer-top { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--site-border); border-radius: 9px; background: #102759; color: #8ab4ff; font-size: 13px; }
.site-footer-top:hover { background: #16367a; color: var(--site-accent); border-color: var(--site-blue); }
.site-footer-copyright { flex: 1; margin: 0; font-size: 10px; line-height: 1.8; color: var(--site-muted); }
.site-footer-copyright span { color: #8c9eb9; }
.site-footer-badges { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.site-footer-badges > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--site-border); border-radius: 7px; color: #8ab4ff; font-size: 10px; font-weight: 600; }
.site-footer-top:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; }
@media (max-width: 991px) { .provider-logo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 575px) {
  .provider-directory-panel { padding: 16px; border-radius: 14px; }
  .provider-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .provider-logo-card { padding: 10px 6px; }
  .provider-logo-card p { font-size: 8px; }
  .provider-logo-art { height: 36px; }
  .provider-logo-art img { height: 32px; }
  footer.site-footer { padding: 16px 0 88px; }
  .site-footer-row { flex-wrap: wrap; gap: 12px; }
  .site-footer-badges { margin-left: auto; }
  .site-footer-copyright { flex-basis: 100%; order: 3; text-align: center; }
}
footer.site-footer .site-footer-copyright,
footer.site-footer .site-footer-copyright span {
  font-size: 10px;
  font-family: var(--site-font);
}
/* Member bank page matches the deposit and withdrawal form surfaces. */
.member-bank-page .middle-part { padding: 0; }
.member-bank-page .bank-layout { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.8fr); gap: 20px; margin: 0; }
.member-bank-page .bank-layout > .bank-form-panel,
.member-bank-page .bank-layout > .bank-list-panel {
  width: auto; min-width: 0; margin-top: 0 !important; padding: 20px;
  border: 1px solid var(--site-border); border-radius: 12px; background: var(--site-bg);
}
.member-bank-page .as-account-history-section h2 { font-family: var(--site-heading-font); font-size: 23px; font-weight: 700; color: var(--site-text) !important; margin: 0 0 16px; border-bottom: 1px solid var(--site-border); }
.member-bank-page .as-form-label { color: var(--site-muted); font-size: 11px; }
.member-bank-page .as-form-label .icon-asterisk { color: var(--site-accent); font-size: 7px; }
.member-bank-page .form-control, .member-bank-page .form-select { min-height: 42px; font-size: 12px; }
.member-bank-page .form-control[readonly] { background: #0c2059 !important; color: var(--site-muted) !important; }
.member-bank-page .bank-add-button { width: 100%; min-height: 44px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.member-bank-page .as-history-table { margin: 0; font-size: 11px; font-variant-numeric: tabular-nums; }
.member-bank-page .as-history-table th { padding: 12px 10px; background: var(--site-panel) !important; color: var(--site-text) !important; border-color: var(--site-border) !important; font-size: 10px; font-weight: 600; }
.member-bank-page .as-history-table td { padding: 14px 10px; background: var(--site-bg) !important; color: var(--site-muted) !important; border-color: var(--site-border) !important; }
.member-bank-page .as-history-table tbody tr:hover td { background: #102759 !important; }
.member-bank-page .ttt-modal-content, .member-bank-page .ttt-modal-header,
.member-bank-page .ttt-modal-body, .member-bank-page .ttt-modal-footer { background: var(--site-panel); color: var(--site-text); border-color: var(--site-border); }
@media (max-width: 991px) {
  .member-bank-page .bank-layout { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 575px) {
  .member-bank-page .bank-layout > .bank-form-panel,
  .member-bank-page .bank-layout > .bank-list-panel { padding: 14px; }
}
/* Mobile drawer: readable navy surfaces and one consistent active state. */
#igamingslidemenu { background: var(--site-bg) !important; color: var(--site-text); width: min(340px, 90vw); border-left: 1px solid var(--site-border); }
#igamingslidemenu .as-offcanvas-header { background: var(--site-panel) !important; border-bottom: 1px solid var(--site-border); padding: 18px; gap: 16px; }
#igamingslidemenu .as-offcanvas-header img { width: 170px; height: 42px; object-fit: contain; margin: 0; }
#igamingslidemenu .as-offcanvas-body { padding: 14px !important; background: var(--site-bg) !important; }
#igamingslidemenu .time-container { display: block; margin-bottom: 12px; font-size: 10px; line-height: 1.6; color: var(--site-muted); }
#igamingslidemenu .as-accordion-item { background: transparent !important; border: 0; margin-bottom: 7px; }
#igamingslidemenu .as-accordion-button,
#igamingslidemenu .as-sidebar-mainmenu > a {
  min-height: 48px; padding: 10px 12px; border: 1px solid var(--site-border); border-radius: 10px !important;
  background: var(--site-panel) !important; color: var(--site-text) !important;
  font-family: var(--site-font); font-size: 12px; font-weight: 500;
  box-shadow: none; text-decoration: none; align-items: center;
}
#igamingslidemenu .as-sidebar-mainmenu { background: transparent !important; border-radius: 10px; }
#igamingslidemenu .as-accordion-button img,
#igamingslidemenu .as-sidebar-mainmenu img.as-offcanvas-image { width: 30px; height: 30px; object-fit: contain; }
#igamingslidemenu .as-accordion-button span,
#igamingslidemenu .as-sidebar-mainmenu a span { color: #8ab4ff; font-size: 17px; }
#igamingslidemenu .as-sidebar-mainmenu .as-download-word { color: var(--site-text); font-size: 12px; }
#igamingslidemenu .as-accordion-button::after {
  content: ''; width: 7px; height: 7px; flex: 0 0 7px;
  background: none; border-right: 2px solid #8ab4ff; border-bottom: 2px solid #8ab4ff;
  transform: rotate(45deg); margin-right: 3px;
}
#igamingslidemenu .as-accordion-button:not(.collapsed)::after { transform: rotate(225deg); }
#igamingslidemenu .as-accordion-button:not(.collapsed),
#igamingslidemenu .as-sidebar-mainmenu > a.active {
  background: #16367a !important; border-color: var(--site-blue); border-left: 3px solid var(--site-blue);
  color: var(--site-text) !important;
}
#igamingslidemenu .as-accordion-body { padding: 8px 0 4px 12px; background: transparent !important; gap: 5px; }
#igamingslidemenu a.as-offcanvas-sub-menu { padding: 10px 12px; border-radius: 8px; font-size: 11px; font-weight: 400; color: var(--site-muted); border-left: 2px solid transparent; }
#igamingslidemenu a.as-offcanvas-sub-menu:hover,
#igamingslidemenu a.as-offcanvas-sub-menu.active { color: var(--site-text); background: #16367a; border-left-color: var(--site-blue); }
#igamingslidemenu .as-logout-button.btn-success { background: var(--site-accent) !important; border: 1px solid var(--site-accent); border-radius: 10px; min-height: 46px; align-items: center; padding: 10px 12px; color: var(--site-bg) !important; font-size: 12px; font-weight: 600; }
#igamingslidemenu .as-logout-button.btn-success span { color: var(--site-bg); }
#igamingslidemenu .as-sidebar-mainmenu > .btn-danger { background: #291c39 !important; border-color: #634261; color: #ffadad !important; }
#igamingslidemenu .as-sidebar-mainmenu > .btn-danger span { color: #ffadad; }
#igamingslidemenu .as-close-button { background: #16367a; border: 1px solid var(--site-border); border-radius: 8px; width: 30px; height: 30px; padding: 0; }
#igamingslidemenu .as-close-button::before { color: var(--site-text); }
.as-menu-afterlogin-wrapper .as-menu-afterlogin-section .as-menu-afterlogin-item a.active,
.as-bottom-navbar .nav-link.active,
.as-navbar-small-home a.active { background: #16367a !important; color: var(--site-text) !important; border-color: var(--site-blue) !important; border-radius: 8px; }
.as-menu-afterlogin-wrapper .as-menu-afterlogin-section .as-menu-afterlogin-item a.active { padding: 6px 10px; }
.as-bottom-navbar .nav-link.active { box-shadow: inset 0 3px var(--site-blue); }
/* Mobile footer navigation: consistent line icons and blue active indicators. */
.mobile-bottom-nav {
  background: #040e38;
  border-top: 1px solid var(--site-border);
  padding: 7px 12px calc(7px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgb(1 4 23 / 30%);
  z-index: 1030;
}
.mobile-bottom-nav > ul { list-style: none; display: flex; align-items: stretch; gap: 6px; max-width: 560px; padding: 0; margin: 0 auto; }
.mobile-bottom-nav > ul > li { flex: 1; min-width: 0; }
.mobile-bottom-link { display: flex; width: 100%; min-height: 54px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 10px; background: transparent; color: #9caecb; font-family: var(--site-font); text-decoration: none; padding: 4px 8px; }
.mobile-bottom-icon-frame { display: flex; align-items: center; justify-content: center; width: 38px; height: 28px; border-radius: 8px; }
.mobile-nav-icon { display: block; width: 23px; height: 23px; flex-shrink: 0; }
.mobile-bottom-label { font-size: 10px; font-weight: 500; line-height: 1.4; }
.mobile-bottom-link.active { background: #102759; color: var(--site-text); }
.mobile-bottom-link.active .mobile-bottom-icon-frame { background: #16367a; color: #8ab4ff; }
.mobile-bottom-link:hover { background: #102759; color: var(--site-text); }
.mobile-bottom-link:focus-visible { outline: 2px solid var(--site-blue); outline-offset: -2px; }
@media (max-width: 767px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
/* Promotion and bonus pages: replace legacy bronze, purple and green surfaces. */
.promotion-page .promotion-list-section > .col {
  display: flex; flex-direction: column; padding-top: 0; padding-bottom: 0;
}
.promotion-page .as-promotion-head {
  background: var(--site-bg) !important;
  border: 1px solid var(--site-border); border-bottom: 0; border-radius: 12px 12px 0 0;
  padding: 16px !important;
}
.promotion-page .as-promotion-head h3 {
  font-family: var(--site-heading-font); font-size: 22px; font-weight: 700; line-height: 1.3;
  color: var(--site-text) !important; text-align: left;
}
.promotion-page .as-promotion-head h4 { color: var(--site-muted); font-size: 10px; line-height: 1.5; text-align: left; }
.promotion-page .promotion-list-section > .col > img { width: 100%; height: auto; border-inline: 1px solid var(--site-border); }
.promotion-page .as-promotion-footer {
  flex: 1; align-items: center; background: var(--site-bg) !important;
  padding: 14px !important; border: 1px solid var(--site-border); border-top: 0; border-radius: 0 0 12px 12px;
}
.promotion-page .as-promotion-footer .btn,
.promotion-page .modal-footer .btn { min-height: 40px; border-radius: 8px; font-size: 12px; }
.promotion-page .btn-outline-info { background: transparent; color: #8ab4ff; border-color: var(--site-blue); }
.promotion-page .btn-outline-info:hover { background: #16367a; color: var(--site-text); }
.promotion-page .as-promotion-footer .btn-primary,
.promotion-page .modal-footer .btn-primary {
  background: var(--site-accent) !important; border-color: var(--site-accent) !important; color: var(--site-bg) !important;
}
.promotion-page .as-promotion-footer .btn-primary span,
.promotion-page .modal-footer .btn-primary span { color: var(--site-bg) !important; }
.promotion-page .as-promotion-footer button:disabled { background: #102759 !important; border-color: var(--site-border); color: var(--site-muted); }
.promotion-page .modal-body, .promotion-page .modal-body h3 { color: var(--site-muted); }
.promotion-page .modal-body .promo-name { color: var(--site-text) !important; }
.promotion-page .modal-body hr { border-color: var(--site-border); }
.promotion-page .alert-info { background: #102759; color: var(--site-text); border-color: var(--site-blue); }
.bonus-page #bonusTab { border-bottom: 1px solid var(--site-border); padding-bottom: 14px; gap: 8px; }
.bonus-page #bonusTab .nav-link { background: var(--site-bg); color: var(--site-muted); border: 1px solid var(--site-border); border-radius: 8px !important; font-size: 12px !important; }
.bonus-page #bonusTab .nav-link.active,
.bonus-page #bonusTab .nav-link:hover { background: #16367a; border-color: var(--site-blue); color: var(--site-text); }
.bonus-page .card { background: var(--site-bg) !important; border: 1px solid var(--site-border) !important; color: var(--site-text); }
.bonus-page .card h6 { color: var(--site-text); }
.bonus-page .badge { background: #16367a !important; color: #dce8ff !important; border: 1px solid #2975ff66; font-weight: 500; }
.bonus-page .btn-claim-auto, .bonus-page .btn-claim-self, .bonus-page .btn-claim-bonus {
  background: var(--site-accent) !important; color: var(--site-bg) !important; border: 1px solid var(--site-accent) !important;
  border-radius: 8px !important; min-height: 36px; font-weight: 600;
}
.bonus-page .btn-claim-auto:disabled, .bonus-page .btn-claim-self:disabled,
.bonus-page .btn-claim-bonus:disabled { opacity: .5; }
.bonus-page #tab-promo a.btn { background: #102759 !important; color: #dce8ff !important; border: 1px solid var(--site-blue); border-radius: 8px !important; }
.bonus-page #tab-history > div { border-bottom-color: var(--site-border) !important; }
.bonus-page .text-end { font-variant-numeric: tabular-nums; }
@media (max-width: 575px) {
  .bonus-page #bonusTab .nav-link { padding: 7px 10px !important; font-size: 10px !important; }
  .bonus-page .card-body > .d-flex { gap: 12px; flex-wrap: wrap; }
  .bonus-page .card-body > .d-flex > .text-end { margin-left: auto; }
}
/* Information page: shared tabs, readable content and dark data tables. */
.information-page .information-content > h1 {
  font-family: var(--site-heading-font); font-size: 28px; font-weight: 700;
  color: var(--site-text); text-align: center; margin: 0 0 24px; padding: 0;
}
.information-page .as-nav-tabs {
  display: flex; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--site-border);
}
.information-page .as-nav-tabs .as-nav-link,
.information-page .as-nav-tabs-second-level .nav-link {
  background: var(--site-bg); border: 1px solid var(--site-border);
  color: var(--site-muted); border-radius: 8px; padding: 9px 16px; font-size: 12px; font-weight: 500;
}
.information-page .as-nav-tabs .as-nav-link.active,
.information-page .as-nav-tabs .as-nav-link:hover,
.information-page .as-nav-tabs-second-level .nav-link.active,
.information-page .as-nav-tabs-second-level .nav-link:hover {
  background: #16367a !important; border: 1px solid var(--site-blue) !important; color: var(--site-text) !important;
}
.information-page .as-tab-content > .tab-pane {
  background: var(--site-bg); color: var(--site-muted); border: 1px solid var(--site-border);
  border-radius: 12px; padding: 24px; font-size: 12px; line-height: 1.9;
}
.information-page .as-tab-content ol.as-information-list { margin-bottom: 0; padding-left: 24px; }
.information-page .as-tab-content ol.as-information-list > li { color: var(--site-text); font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.information-page .as-tab-content ol.as-information-list > li::marker { color: #8ab4ff; }
.information-page .as-tab-content ol.as-information-list p,
.information-page .as-tab-content ol.as-information-list ul li { color: var(--site-muted); font-size: 12px; font-weight: 400; line-height: 1.9; }
.information-page .as-nav-tabs-second-level { justify-content: flex-start !important; gap: 8px; margin-bottom: 22px; padding: 0; }
.information-page .as-nav-tabs-second-level > li { background: transparent; }
.information-page .howtoplay-section h4,
.information-page .howtoplay-subtitle,
.information-page .howtoplay-subtitle1 { color: var(--site-text); font-family: var(--site-heading-font); font-weight: 700; font-size: 22px; }
.information-page .howtoplay-section img { max-width: 100%; height: auto; border-radius: 8px; }
.information-page .howtoplay-section a { color: #8ab4ff; }
.information-page .howtoplaytable { display: block; max-width: 100%; overflow-x: auto; color: var(--site-muted); border-color: var(--site-border); font-size: 11px; }
.information-page .howtoplaytable td, .information-page .howtoplaytable th { padding: 8px 10px; background: var(--site-bg); border-color: var(--site-border); }
.information-page .howtoplaytable th { background: var(--site-panel); color: var(--site-text); }
@media (max-width: 575px) {
  .information-page .as-tab-content > .tab-pane { padding: 16px; }
  .information-page .information-content > h1 { font-size: 24px; }
  .information-page .as-nav-tabs-second-level .nav-link { font-size: 10px; padding: 8px 11px; }
}