/* STARXBOY / Teal-Gold visual theme | 2026-10-24
   Presentation only. No JS, payments, balances, progressive jackpot, or promo logic.
   Loaded after the selected tb_theme CSS by mobile and desktop header.
*/
:root {
  --sx-mint: #56ac98;
  --sx-mint-strong: #159f7e;
  --sx-mint-bright: #1cb78a;
  --sx-lime: #9aeb51;
  --sx-gold: #e3bf36;
  --sx-text: #f5f4ed;
  --sx-muted: #b6c8c0;
  --sx-dark: #050807;
  --sx-panel: #111a17;
  --sx-outline: rgba(86,172,152,.34);
}
/* GENERAL SURFACES: leave inline background images intact. */
body.mobile, body.desktop { color:var(--sx-text); background-color:var(--sx-dark)!important; }
body.mobile .full-container.layout,
body.mobile #mainContent,
body.mobile #mainContentContainer,
body.mobile .main-content,
body.mobile .content.my01 { background-color:var(--sx-dark); }
body.mobile a, body.desktop a { transition:color .18s ease,background-color .18s ease,border-color .18s ease; }
body.mobile a:hover, body.desktop a:hover { color:var(--sx-gold); }

/* MOBILE HEADER: charcoal shell and gold functional icons. */
body.mobile .top-bar,
body.mobile .top-bar .inner-header,
body.mobile .top-bar .inner-header.flex-row {
  background:#303333!important;
  background-image:none!important;
  color:var(--sx-gold)!important;
  border-bottom-color:rgba(227,191,54,.36)!important;
}
body.mobile .top-bar #btnToggleSideNav,
body.mobile .top-bar #btnToggleRSideNav,
body.mobile .top-bar #btnToggleSideNav i,
body.mobile .top-bar #btnToggleRSideNav i {
  color:var(--sx-gold)!important;
}
/* Logo image dimensions, animation and source are deliberately untouched. */

/* WALLET STRIP: color only, not balance or refresh interaction. */
body.mobile .wallet-bal {
  background:#034c3b!important;
  background-image:linear-gradient(90deg,#034e3c,#06674e)!important;
  border-bottom:1px solid rgba(227,191,54,.2);
}
body.mobile .wallet-bal .balance-txt,
body.mobile .wallet-bal .btn-refresh-wallet,
body.mobile .wallet-bal .btn-refresh-wallet i,
body.mobile .wallet-bal .i-dollar { color:#e7f8dd!important; }
body.mobile .wallet-bal .btn-refresh-wallet:focus-visible {
  outline:2px solid var(--sx-gold);
  outline-offset:2px;
}

/* HOME: login/register, announcement and category shortcuts. */
body.mobile .btns-log .btn.btn-tertiery {
  background:#f0f2ed!important; color:#252b29!important;
  border-color:#f0f2ed!important;
}
body.mobile .btns-log .btn.btn-accent {
  background:var(--sx-lime)!important;
  border-color:var(--sx-lime)!important;
  color:#173a2e!important;
}
body.mobile .ann-wrapper { background:#060b08!important; color:var(--sx-text)!important; }
body.mobile .ann-wrapper i { color:var(--sx-gold)!important; }
body.mobile .scroll-wrapper[_home],
body.mobile .scroll-wrapper .slider-content {
  background:linear-gradient(110deg,#5aaa98,#579e88)!important;
}
body.mobile .scroll-wrapper[_home] .btn-box,
body.mobile .scroll-wrapper[_home] .btn-box div,
body.mobile .scroll-wrapper[_home] .btn-box i {
  color:#f4fffb!important;
}
body.mobile .scroll-wrapper[_home] .btn-box { border-right-color:rgba(255,255,255,.12)!important; }
/* Keep the animated jackpot image, overlay, counter and target progress untouched. */

/* LEFT SIDEBAR: teal navigation similar to the supplied reference. */
body.mobile #sideNav,
body.mobile #sideNav .nav-content,
body.mobile #sideNav .side-nav-items,
body.mobile #sideNav .nav-item,
body.mobile #sideNav .nav-item>.navlink {
  background:#5ba793!important;
  background-image:none!important;
  color:#fff!important;
}
body.mobile #sideNav .nav-item>.navlink {
  border-bottom:1px solid rgba(255,255,255,.15)!important;
}
body.mobile #sideNav .nav-item>.navlink i,
body.mobile #sideNav .nav-title { color:#fff!important; }
body.mobile #sideNav .nav-item>.navlink:hover,
body.mobile #sideNav .nav-item>.navlink.active {
  background:#248c72!important;
  color:#fff!important;
}
body.mobile #sideNav .nav-item-content,
body.mobile #sideNav .nav-item-content .navlink { background:#173f34!important; }

/* FIXED BOTTOM BAR: teal with bright readable icons.
   Central DANA control keeps its own shape, position and click behavior. */
body.mobile .mobilesite-footer .menu-bottom .navbar-inverse.navbar-fixed-bottom,
body.mobile .menu-bottom .navbar-inverse {
  background:#159d80!important;
  background-image:linear-gradient(90deg,#087d69,#5db6a1,#087d69)!important;
  border-top:1px solid rgba(227,191,54,.28)!important;
}
body.mobile .mobilesite-footer .footericon-single>a,
body.mobile .mobilesite-footer .footericon-single>a>i,
body.mobile .mobilesite-footer .footericon-single>a>div {
  color:#f5fffb!important;
}
body.mobile .mobilesite-footer .footericon-single>a.footer-funds i {
  background:linear-gradient(145deg,#f2d34d,#d5a513)!important;
  color:#fff!important;
}
body.mobile .mobilesite-footer #fundshover_menu,
body.mobile .mobilesite-footer #fundshover_menu li,
body.mobile .mobilesite-footer #fundshover_menu a { background:#15362d!important; color:#fff!important; }

/* ACCOUNT: deposit/withdraw/history tabs, panels and text. */
body.mobile .acc.container-wrapper,
body.mobile .acc.container-wrapper .container-box,
body.mobile .acc.container-wrapper .content,
body.mobile .acc.container-wrapper .deposit,
body.mobile .acc.container-wrapper .withdrawal,
body.mobile .acc.container-wrapper .history { background-color:var(--sx-dark)!important; }
body.mobile .account_menu,
body.mobile .account_menu .mdc-tab-bar,
body.mobile .acc .head-content { background:#080c0a!important; }
body.mobile .account_menu .mdc-tab,
body.mobile .account_menu .mdc-tab__text-label { color:#dfdcd1!important; }
body.mobile .account_menu .mdc-tab[aria-selected="true"],
body.mobile .account_menu .mdc-tab[aria-selected="true"] .mdc-tab__text-label,
body.mobile .account_menu .mdc-tab[data-active="accountdeposit"]:hover {
  color:var(--sx-gold)!important;
}
body.mobile .account_menu .mdc-tab-indicator__content,
body.mobile .account_menu .mdc-tab-indicator__content--underline {
  border-color:var(--sx-gold)!important;
  background-color:var(--sx-gold)!important;
}
body.mobile .acc .container-box label,
body.mobile .acc .container-box h1,
body.mobile .acc .container-box h2,
body.mobile .acc .container-box h3,
body.mobile .acc .container-box h4 { color:var(--sx-text); }

/* INPUTS: color changes only; do not change validation, sizes or layout. */
body.mobile .form-control:not([type="hidden"]),
body.mobile .input-container input,
body.mobile .input-container select,
body.mobile .input-container textarea,
body.mobile .acc input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.mobile .acc select,
body.mobile .acc textarea {
  background-color:#0e1211!important;
  border-color:rgba(227,191,54,.72)!important;
  color:#fafbf7!important;
}
body.mobile input::placeholder, body.mobile textarea::placeholder { color:#abb6b0; opacity:1; }
body.mobile input:focus, body.mobile select:focus, body.mobile textarea:focus {
  border-color:var(--sx-mint)!important;
  outline-color:var(--sx-mint)!important;
  box-shadow:0 0 0 2px rgba(86,172,152,.19)!important;
}
body.mobile .modal-content,
body.mobile .modal-dialog .modal-content,
body.mobile #r-side-bar { background:#2d3230!important; color:#f7f7f2!important; }
body.mobile .modal-content .modal-header,
body.mobile .modal-content .modal-footer { border-color:rgba(255,255,255,.15)!important; }
body.mobile .modal-content .btn.btn-primary,
body.mobile .modal-content .btn.btn-success,
body.mobile .modal-content button[type="submit"] {
  background:#168467!important;
  border-color:#168467!important;
  color:#fff!important;
}
body.mobile .btn-success,
body.mobile .btn-primary { background-color:#12896e; border-color:#12896e; color:#fff; }
body.mobile .btn-primary:hover,
body.mobile .btn-success:hover { background-color:#0d725b; border-color:#0d725b; }

/* DESKTOP: match accent palette, keep structure responsive. */
body.desktop .top_navbar,
body.desktop .top_navbar .header-wrapper,
body.desktop #masthead { background:#303333!important; color:var(--sx-text); }
body.desktop .top_navbar i,
body.desktop .top_navbar a:hover { color:var(--sx-gold)!important; }
body.desktop .btn.btn-accent,
body.desktop .btn.btn-primary,
body.desktop .btn.btn-success {
  background:#168f73!important; border-color:#168f73!important; color:#fff!important;
}
body.desktop .btn.btn-tertiery { background:#f0f2ed!important; color:#252b29!important; }
body.desktop .form-control:focus { border-color:var(--sx-mint)!important; box-shadow:0 0 0 2px rgba(86,172,152,.19)!important; }
@media (prefers-reduced-motion:reduce) {
  body.mobile a,body.desktop a { transition:none; }
}