/* =========================================================
   GUDANG80 UNIVERSAL THEME SWITCHER
   Ten palettes are controlled by tb_web.warna.
   Loaded AFTER the legacy template so the selected palette
   replaces the default colors across the frontend.
   ========================================================= */

body[class*="theme-"]{
  --theme-bg:#0b0f16;
  --theme-bg2:#121a26;
  --theme-card:#111824;
  --theme-card2:#182233;
  --theme-primary:#d4af37;
  --theme-primary2:#ffd54a;
  --theme-accent:#fff0a6;
  --theme-text:#ffffff;
  --theme-muted:#aeb8c7;
  --theme-border:rgba(255,255,255,.10);
  --theme-gradient:linear-gradient(180deg,#fff9d7 0%,#ffe58a 15%,#ffd54a 35%,#ffbf00 55%,#d89a00 75%,#8c5b00 100%);

  --header-color:var(--theme-bg)!important;
  --navbar-color:var(--theme-gradient)!important;
  --primary-color:var(--theme-gradient)!important;
  --secondary-color:var(--theme-primary2)!important;
  --lottery-color:var(--theme-card)!important;
  --footer-color:var(--theme-bg)!important;
  --header-text:var(--theme-text)!important;
  --navbar-text:#111!important;
  --jackpot-text:#111!important;
  --primary-text:var(--theme-text)!important;
  --secondary-text:var(--theme-text)!important;
  --lottery-text:var(--theme-text)!important;
  --footer-text:var(--theme-text)!important;
  --c-white:#fff!important;
  --c-black:var(--theme-bg)!important;
  --c-grey:var(--theme-card)!important;
  --page-text:var(--theme-text)!important;
  --background-page:var(--theme-bg)!important;
  --fixwin-bg:var(--theme-bg)!important;
  --fixwin-bg2:var(--theme-bg2)!important;
  --fixwin-card:var(--theme-card)!important;
  --fixwin-gold:var(--theme-primary)!important;
  --fixwin-gold2:var(--theme-primary2)!important;
  --fixwin-text:var(--theme-text)!important;
  --fixwin-border:var(--theme-border)!important;
  --gold1:var(--theme-accent)!important;
  --gold2:var(--theme-primary2)!important;
  --gold3:var(--theme-primary)!important;
}

/* 1. ABU - HITAM / GOLD */
body.theme-abu-hitam{
  --theme-bg:#090b10;
  --theme-bg2:#111722;
  --theme-card:#11151d;
  --theme-card2:#1a202b;
  --theme-primary:#d4af37;
  --theme-primary2:#ffd54a;
  --theme-accent:#fff2a8;
  --theme-muted:#9da8b8;
  --theme-gradient:linear-gradient(180deg,#fff9d7 0%,#ffe58a 15%,#ffd54a 35%,#ffbf00 55%,#d89a00 75%,#8c5b00 100%);
}

/* 2. MERAH - KUNING / RUBY GOLD */
body.theme-merah-kuning{
  --theme-bg:#110609;
  --theme-bg2:#1d0a10;
  --theme-card:#210d13;
  --theme-card2:#30111a;
  --theme-primary:#e52b3f;
  --theme-primary2:#ffd24a;
  --theme-accent:#fff0a0;
  --theme-muted:#d5aeb5;
  --theme-gradient:linear-gradient(180deg,#fff1a8 0%,#ffd24a 18%,#f0a400 40%,#d62f3f 68%,#7f1224 100%);
}

/* 3. BIRU - KUNING / ROYAL BLUE GOLD */
body.theme-biru-kuning{
  --theme-bg:#050b18;
  --theme-bg2:#0a1530;
  --theme-card:#0d1b35;
  --theme-card2:#13264a;
  --theme-primary:#287cff;
  --theme-primary2:#ffd54a;
  --theme-accent:#b9d9ff;
  --theme-muted:#aabbd6;
  --theme-gradient:linear-gradient(180deg,#fff5bd 0%,#ffd54a 22%,#e9a800 48%,#287cff 72%,#12336e 100%);
}

/* 4. VOIDHEX NEON / MAGENTA VIOLET */
body.theme-voidhex-neon{
  --theme-bg:#05020d;
  --theme-bg2:#100720;
  --theme-card:#120a21;
  --theme-card2:#1d1035;
  --theme-primary:#d946ef;
  --theme-primary2:#ff4fd8;
  --theme-accent:#c4b5fd;
  --theme-muted:#bdb0d0;
  --theme-gradient:linear-gradient(180deg,#ff9be9 0%,#ff4fd8 20%,#d946ef 42%,#7c3aed 70%,#312e81 100%);
}

/* 5. EMERALD - GOLD */
body.theme-emerald-gold{
  --theme-bg:#03100c;
  --theme-bg2:#062018;
  --theme-card:#08261c;
  --theme-card2:#0d3527;
  --theme-primary:#19c37d;
  --theme-primary2:#f5c84c;
  --theme-accent:#b9ffe0;
  --theme-muted:#9fc8b7;
  --theme-gradient:linear-gradient(180deg,#fff4ad 0%,#f5c84c 24%,#b8860b 46%,#19c37d 72%,#075a42 100%);
}

/* 6. ROYAL PURPLE - CYAN */
body.theme-royal-purple{
  --theme-bg:#080516;
  --theme-bg2:#130b2b;
  --theme-card:#170e32;
  --theme-card2:#211346;
  --theme-primary:#9b5cff;
  --theme-primary2:#38e8ff;
  --theme-accent:#d9c2ff;
  --theme-muted:#b9add1;
  --theme-gradient:linear-gradient(180deg,#e6d5ff 0%,#a970ff 24%,#8b5cf6 48%,#38e8ff 74%,#116b85 100%);
}


/* 7. ORANGE FIRE / BLACK */
body.theme-orange-fire{
  --theme-bg:#120804;
  --theme-bg2:#1e0d05;
  --theme-card:#241006;
  --theme-card2:#351609;
  --theme-primary:#ff6a00;
  --theme-primary2:#ffb52e;
  --theme-accent:#ffe0a3;
  --theme-muted:#d2ad88;
  --theme-gradient:linear-gradient(180deg,#fff0c2 0%,#ffcf66 20%,#ff8a00 44%,#ff4d00 68%,#7d1800 100%);
}

/* 8. OCEAN CYAN / NAVY */
body.theme-ocean-cyan{
  --theme-bg:#031016;
  --theme-bg2:#061c25;
  --theme-card:#08242e;
  --theme-card2:#0d3441;
  --theme-primary:#00bcd4;
  --theme-primary2:#39e7ff;
  --theme-accent:#b9f8ff;
  --theme-muted:#8fbfc8;
  --theme-gradient:linear-gradient(180deg,#d9ffff 0%,#6ff5ff 20%,#00c9e8 45%,#087fa4 70%,#063c59 100%);
}

/* 9. RED BLACK / CRIMSON */
body.theme-red-black{
  --theme-bg:#0d0305;
  --theme-bg2:#18070a;
  --theme-card:#22090d;
  --theme-card2:#320e14;
  --theme-primary:#e31837;
  --theme-primary2:#ff5268;
  --theme-accent:#ffc2ca;
  --theme-muted:#c99aa2;
  --theme-gradient:linear-gradient(180deg,#ffd9de 0%,#ff7b89 20%,#e31837 46%,#9f1025 72%,#430711 100%);
}

/* 10. GOLD BLACK PREMIUM / LUXURY */
body.theme-gold-black-premium{
  --theme-bg:#030303;
  --theme-bg2:#0a0a0a;
  --theme-card:#111111;
  --theme-card2:#1b1b1b;
  --theme-primary:#c89b2c;
  --theme-primary2:#ffd84a;
  --theme-accent:#fff1a8;
  --theme-muted:#b9ad88;
  --theme-border:rgba(212,175,55,.28);
  --theme-gradient:linear-gradient(180deg,#fff5b8 0%,#ffd84a 18%,#d4a72c 42%,#9b7115 68%,#3b2a08 100%);
}

body.theme-gold-black-premium .header,
body.theme-gold-black-premium .header__mid,
body.theme-gold-black-premium .header-mobile,
body.theme-gold-black-premium .header-mobile__top{
  background:#030303!important;
}

body.theme-gold-black-premium .header-logo img{
  filter:drop-shadow(0 0 7px rgba(255,216,74,.55));
}

body.theme-gold-black-premium .category-item,
body.theme-gold-black-premium .fixwin-category-item{
  background:linear-gradient(145deg,#1a1a1a,#080808)!important;
  border:1px solid rgba(212,175,55,.34)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 4px 14px rgba(0,0,0,.55)!important;
}

body.theme-gold-black-premium .baginda-download-bar,
body.theme-gold-black-premium .welcome-bar,
body.theme-gold-black-premium .announcement-bar{
  background:#000!important;
}

/* Keep the existing game sections visually unchanged as requested. */
body.theme-gold-black-premium .game-section,
body.theme-gold-black-premium .popular-games,
body.theme-gold-black-premium .live-games,
body.theme-gold-black-premium .new-games{
  --theme-game-lock:initial;
}

/* Universal surface + typography treatment */
body[class*="theme-"]{
  background:var(--theme-bg)!important;
  color:var(--theme-text)!important;
}
body[class*="theme-"] a{color:var(--theme-primary2);}
body[class*="theme-"] a:hover{color:var(--theme-accent);}
body[class*="theme-"] .header,
body[class*="theme-"] .header__mid,
body[class*="theme-"] .header-mobile,
body[class*="theme-"] .header-mobile__top{
  background:var(--header-color)!important;
}
body[class*="theme-"] .header-mobile__marquee,
body[class*="theme-"] .header-mobile__marquee i{
  background:var(--theme-gradient)!important;
  border-color:var(--theme-primary)!important;
}
body[class*="theme-"] .navbar,
body[class*="theme-"] .navbar-nav,
body[class*="theme-"] .mobile-menu,
body[class*="theme-"] .bottom-nav{
  background:var(--theme-gradient)!important;
}
body[class*="theme-"] .page-header,
body[class*="theme-"] .section-title,
body[class*="theme-"] .home__title,
body[class*="theme-"] .page-title{
  color:var(--theme-primary2)!important;
}
body[class*="theme-"] .card,
body[class*="theme-"] .fixwin-card,
body[class*="theme-"] .modal-content,
body[class*="theme-"] .panel,
body[class*="theme-"] .box,
body[class*="theme-"] .content-box{
  background:linear-gradient(145deg,var(--theme-card2),var(--theme-card))!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[class*="theme-"] .btn-primary,
body[class*="theme-"] .btn-success,
body[class*="theme-"] .btn-warning,
body[class*="theme-"] .btn-submit,
body[class*="theme-"] .fixwin-btn{
  background:var(--theme-gradient)!important;
  border-color:var(--theme-primary)!important;
  color:#111!important;
}
body[class*="theme-"] .btn-outline-primary,
body[class*="theme-"] .btn-outline-success,
body[class*="theme-"] .btn-outline-warning{
  color:var(--theme-primary2)!important;
  border-color:var(--theme-primary)!important;
}
body[class*="theme-"] input,
body[class*="theme-"] select,
body[class*="theme-"] textarea{
  background:var(--theme-card)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[class*="theme-"] input::placeholder,
body[class*="theme-"] textarea::placeholder{color:var(--theme-muted)!important;}
body[class*="theme-"] .game-holder,
body[class*="theme-"] .game-box,
body[class*="theme-"] .game-item,
body[class*="theme-"] .provider-item{
  background:linear-gradient(180deg,var(--theme-card2),var(--theme-card))!important;
  border-color:var(--theme-primary)!important;
}
body[class*="theme-"] .game-holder:hover,
body[class*="theme-"] .game-box:hover,
body[class*="theme-"] .game-item:hover,
body[class*="theme-"] .provider-item:hover{
  border-color:var(--theme-primary2)!important;
  box-shadow:0 0 22px color-mix(in srgb,var(--theme-primary) 30%,transparent)!important;
}
body[class*="theme-"] .footer,
body[class*="theme-"] .footer-mobile,
body[class*="theme-"] footer{
  background:var(--theme-bg)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[class*="theme-"] .badge-success,
body[class*="theme-"] .label-success,
body[class*="theme-"] .active{
  background:var(--theme-primary)!important;
  border-color:var(--theme-primary)!important;
}
body[class*="theme-"] .text-success,
body[class*="theme-"] .text-warning,
body[class*="theme-"] .text-primary{
  color:var(--theme-primary2)!important;
}
body[class*="theme-"] .border-success,
body[class*="theme-"] .border-warning,
body[class*="theme-"] .border-primary{
  border-color:var(--theme-primary)!important;
}
body[class*="theme-"] .fixwin-title{color:var(--theme-primary2)!important;}
body[class*="theme-"] .fixwin-text{color:var(--theme-text)!important;}
body[class*="theme-"] .fixwin-section,
body[class*="theme-"] .provider-section,
body[class*="theme-"] .games-section{
  color:var(--theme-text)!important;
}

/* Theme selector friendly swatches */
.theme-swatch{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;border:1px solid rgba(255,255,255,.12);
  border-radius:10px;background:#101722;color:#fff;font-size:12px;
}
.theme-swatch i{
  width:18px;height:18px;border-radius:50%;display:inline-block;
  box-shadow:0 0 8px rgba(255,255,255,.18);
}

/* =========================================================
   FINAL MOBILE PALETTE OVERRIDE — MUST LOAD LAST
   Converts the hard-coded neon surfaces in mobile-final-compact
   into variables controlled by body.theme-*.
   ========================================================= */
body[class*="theme-"]{
  --vh-login-gradient:linear-gradient(135deg,var(--theme-primary) 0%,var(--theme-primary2) 52%,var(--theme-accent) 100%)!important;
  --vh-login-gradient-r:linear-gradient(135deg,var(--theme-accent) 0%,var(--theme-primary2) 52%,var(--theme-primary) 100%)!important;
  --vh-gradient:var(--vh-login-gradient)!important;
  --login-gradient:var(--vh-login-gradient)!important;
  --vh-safe-login-gradient:var(--vh-login-gradient)!important;
  --vh-provider-login-gradient:var(--vh-login-gradient)!important;
}
/* Full-page surfaces */
body[class*="theme-"],body[class*="theme-"] .main-content,body[class*="theme-"] .home,
body[class*="theme-"] .main-content:before,body[class*="theme-"] .main-content:after{
 background-color:var(--theme-bg)!important;color:var(--theme-text)!important;
}
body[class*="theme-"] .header-mobile,body[class*="theme-"] .header,
body[class*="theme-"] .header__mid,body[class*="theme-"] .header-mobile__top{
 background:var(--theme-bg)!important;border-color:var(--theme-primary)!important;
}
/* Primary bars.
   DOWNLOAD + WELCOME stay black.
   Transaction tabs (Deposit / Withdraw / 5 Transaksi Terakhir)
   now follow the currently selected website theme. */
body[class*="theme-"] .baginda-download-bar,
body[class*="theme-"] .baginda-welcome-bar{
 background:#050505!important;
 background-image:none!important;
 border-top-color:#222!important;
 border-bottom-color:#222!important;
}
body[class*="theme-"] .baginda-download-bar *,
body[class*="theme-"] .baginda-welcome-bar *{
 color:inherit;
}
/* Transaction navigation follows the selected theme. */
body[class*="theme-"] .baginda-tx-page .baginda-tx-tabs{
 background:var(--theme-gradient)!important;
 background-image:var(--theme-gradient)!important;
 border:0!important;
}
body[class*="theme-"] .baginda-tx-page .baginda-tx-tab{
 background:transparent!important;
 color:#fff!important;
 border-right-color:var(--theme-border)!important;
}
body[class*="theme-"] .baginda-tx-page .baginda-tx-scrollbar{
 background:var(--theme-card)!important;
}
body[class*="theme-"] .baginda-tx-page .baginda-tx-scrollbar span{
 background:var(--theme-gradient)!important;
}
/* The game catalog sections stay exactly on the original black palette. */
body[class*="theme-"] .fixwin-home-modern .fw-home-section,
body[class*="theme-"] .fixwin-home-modern .fw-auto-row,
body[class*="theme-"] .fixwin-home-modern .fw-game-card,
body[class*="theme-"] .fixwin-home-modern .fw-game-card a{
 background:#111!important;
 color:#fff!important;
 border-color:transparent!important;
}
body[class*="theme-"] .fixwin-home-modern .fw-section-title{
 color:#eee!important;
}
body[class*="theme-"] .fixwin-home-modern .fw-game-image{
 background:#181818!important;
}
body[class*="theme-"] .fixwin-home-modern .fw-game-name{
 background:#2b2b2b!important;
 color:#eee!important;
}
/* Default page background remains black/near-black. */
html,body{background:#111!important;}
body[class*="theme-"] .mobile-menu .active,
body[class*="theme-"] .bottom-nav .active{
 background:var(--vh-login-gradient)!important;
 background-image:var(--vh-login-gradient)!important;
 border-color:var(--theme-primary)!important;
}
body[class*="theme-"] .baginda-download-btn,
body[class*="theme-"] .baginda-login-tabs a,
body[class*="theme-"] .fixwin-guest-actions a,
body[class*="theme-"] .btn-login,body[class*="theme-"] .btn-register,
body[class*="theme-"] .btn-primary,body[class*="theme-"] .btn-success,
body[class*="theme-"] .btn-submit{
 background:var(--vh-login-gradient)!important;
 background-image:var(--vh-login-gradient)!important;
 border-color:var(--theme-primary)!important;color:var(--theme-text)!important;
}
/* Category, cards, menus and panels */
body[class*="theme-"] .mobile__category,
body[class*="theme-"] .category-container,
body[class*="theme-"] .category-item,
body[class*="theme-"] .fixwin-category-item,
body[class*="theme-"] .game-item,
body[class*="theme-"] .provider-item,
body[class*="theme-"] .card,body[class*="theme-"] .modal-content,
body[class*="theme-"] .content-box,body[class*="theme-"] .panel{
 background:linear-gradient(145deg,var(--theme-card2),var(--theme-card))!important;
 border-color:var(--theme-border)!important;color:var(--theme-text)!important;
}
body[class*="theme-"] .category-item .icon,
body[class*="theme-"] .fixwin-category-item .icon,
body[class*="theme-"] .category-item .name,
body[class*="theme-"] .fixwin-category-item .name,
body[class*="theme-"] .bottom-nav i,body[class*="theme-"] .bottom-nav span,
body[class*="theme-"] .mobile-menu i,body[class*="theme-"] .mobile-menu span{
 color:var(--theme-primary2)!important;
}
/* Jackpot, neon frames and glow */
body[class*="theme-"] .fixwin-jackpot,
body[class*="theme-"] .fixwin-jackpot-orbit{
 border-color:var(--theme-primary)!important;
 box-shadow:0 0 7px var(--theme-primary),0 0 15px var(--theme-primary2),0 0 28px color-mix(in srgb,var(--theme-primary) 55%,transparent)!important;
}
body[class*="theme-"] .fixwin-jackpot-value,
body[class*="theme-"] .fixwin-jackpot-currency,
body[class*="theme-"] .fixwin-jackpot-label,
body[class*="theme-"] .section-title,body[class*="theme-"] .page-title{
 color:var(--theme-primary2)!important;
}
/* Bottom navigation must no longer stay purple/black */
body[class*="theme-"] .bottom-nav,body[class*="theme-"] .mobile-menu,
body[class*="theme-"] .footer,body[class*="theme-"] footer{
 background:var(--theme-bg2)!important;border-color:var(--theme-primary)!important;
}
body[class*="theme-"] .bottom-nav .active,body[class*="theme-"] .mobile-menu .active{
 color:var(--theme-text)!important;
}
/* Replace common fixed magenta/blue separators and pseudo-elements */
body[class*="theme-"] .baginda-login-tabs:before,body[class*="theme-"] .baginda-login-tabs:after{
 background:var(--vh-login-gradient)!important;
}

/* =========================================================
   FINAL REQUEST OVERRIDES
   - Page/background stays black.
   - Balance/yellow surfaces follow theme.
   - Categories + game live/new/popular UI follow theme.
   - Bottom navigation background stays black; only buttons/icons follow theme.
   ========================================================= */
body[class*="theme-"] .saldo,
body[class*="theme-"] .balance,
body[class*="theme-"] .fixwin-balance,
body[class*="theme-"] .wallet-card,
body[class*="theme-"] .fixwin-wallet,
body[class*="theme-"] .service-card,
body[class*="theme-"] .service-item,
body[class*="theme-"] .quick button,
body[class*="theme-"] .amount-btn,
body[class*="theme-"] .nominal-btn,
body[class*="theme-"] .yellow-box,
body[class*="theme-"] .gold-box{
  background:var(--vh-login-gradient)!important;
  background-image:var(--vh-login-gradient)!important;
  border-color:var(--theme-primary)!important;
  color:var(--theme-text)!important;
}

/* Category controls follow selected theme while page remains black. */
body[class*="theme-"] .mobile__category,
body[class*="theme-"] .category-container,
body[class*="theme-"] .category-list,
body[class*="theme-"] .category-item,
body[class*="theme-"] .fixwin-category-item{
  background:linear-gradient(145deg,var(--theme-card2),var(--theme-card))!important;
  border-color:var(--theme-primary)!important;
}
body[class*="theme-"] .category-item.active,
body[class*="theme-"] .category-item:hover,
body[class*="theme-"] .fixwin-category-item.active,
body[class*="theme-"] .fixwin-category-item:hover{
  background:var(--vh-login-gradient)!important;
  color:var(--theme-text)!important;
}

/* Game sections: black page, themed cards/headers/accents. Images are untouched. */
body[class*="theme-"] .fixwin-home-modern .fw-home-section,
body[class*="theme-"] .fixwin-home-modern .fw-auto-row,
body[class*="theme-"] .fixwin-home-modern .fw-game-card,
body[class*="theme-"] .fixwin-home-modern .fw-game-card a,
body[class*="theme-"] .fixwin-home-modern .fw-game-name{
  background:linear-gradient(145deg,var(--theme-card2),var(--theme-card))!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body[class*="theme-"] .fixwin-home-modern .fw-section-title{
  color:var(--theme-primary2)!important;
  text-shadow:0 0 10px color-mix(in srgb,var(--theme-primary) 28%,transparent)!important;
}
body[class*="theme-"] .fixwin-home-modern .fw-game-card:hover{
  border-color:var(--theme-primary)!important;
  box-shadow:0 0 18px color-mix(in srgb,var(--theme-primary) 35%,transparent)!important;
}

/* Bottom nav stays black; only its interactive items/icons change theme. */
body[class*="theme-"] .bottom-nav,
body[class*="theme-"] .footer-mobile-nav,
body[class*="theme-"] .mobile-bottom-nav{
  background:#000!important;
  background-image:none!important;
  border-color:#222!important;
}
body[class*="theme-"] .bottom-nav a,
body[class*="theme-"] .footer-mobile-nav a,
body[class*="theme-"] .mobile-bottom-nav a{
  background:#000!important;
  color:var(--theme-primary2)!important;
  border-color:transparent!important;
}
body[class*="theme-"] .bottom-nav a.active,
body[class*="theme-"] .bottom-nav a:hover,
body[class*="theme-"] .footer-mobile-nav a.active,
body[class*="theme-"] .mobile-bottom-nav a.active{
  background:var(--vh-login-gradient)!important;
  color:var(--theme-text)!important;
  box-shadow:inset 0 2px 0 var(--theme-primary),0 -4px 14px color-mix(in srgb,var(--theme-primary) 20%,transparent)!important;
}
body[class*="theme-"] .bottom-nav i,
body[class*="theme-"] .bottom-nav b,
body[class*="theme-"] .bottom-nav span,
body[class*="theme-"] .footer-mobile-nav i,
body[class*="theme-"] .footer-mobile-nav b,
body[class*="theme-"] .footer-mobile-nav span{
  color:inherit!important;
}

/* Default/Bawaan: original neon pink-purple-blue look, while page stays black. */
body.theme-default{
  --theme-bg:#050505;--theme-bg2:#080808;--theme-card:#171717;--theme-card2:#242424;
  --theme-primary:#ff00a8;--theme-primary2:#7c4dff;--theme-accent:#27a7ff;
  --theme-muted:#b8b8c8;--theme-border:rgba(124,77,255,.35);
  --theme-gradient:linear-gradient(135deg,#ff00a8 0%,#9b2cff 50%,#286cff 100%);
}

/* 11-20 additional palettes */
body.theme-black-silver{--theme-bg:#050505;--theme-bg2:#0b0b0b;--theme-card:#15171a;--theme-card2:#25282d;--theme-primary:#bfc5cc;--theme-primary2:#f1f5f9;--theme-accent:#ffffff;--theme-muted:#a6adb6;--theme-border:rgba(255,255,255,.2);--theme-gradient:linear-gradient(135deg,#111,#555b63,#e5e7eb);}
body.theme-pink-luxury{--theme-bg:#090208;--theme-bg2:#160613;--theme-card:#250d1d;--theme-card2:#39132b;--theme-primary:#ff2fa4;--theme-primary2:#ff9ed6;--theme-accent:#ffd6ee;--theme-muted:#d4a6bf;--theme-border:rgba(255,47,164,.3);--theme-gradient:linear-gradient(135deg,#8b145d,#ff2fa4,#ffd1ec);}
body.theme-midnight-blue{--theme-bg:#020611;--theme-bg2:#061027;--theme-card:#0a1835;--theme-card2:#102650;--theme-primary:#2563eb;--theme-primary2:#60a5fa;--theme-accent:#bfdbfe;--theme-muted:#9db4d7;--theme-border:rgba(96,165,250,.3);--theme-gradient:linear-gradient(135deg,#0b1e4f,#2563eb,#60a5fa);}
body.theme-purple-gold{--theme-bg:#07020d;--theme-bg2:#14051f;--theme-card:#1e0b2d;--theme-card2:#321348;--theme-primary:#a855f7;--theme-primary2:#facc15;--theme-accent:#fde68a;--theme-muted:#c3a9d4;--theme-border:rgba(250,204,21,.28);--theme-gradient:linear-gradient(135deg,#4c1d95,#a855f7,#facc15);}
body.theme-cyan-black{--theme-bg:#020708;--theme-bg2:#061215;--theme-card:#0b2025;--theme-card2:#12343b;--theme-primary:#00b8d9;--theme-primary2:#67e8f9;--theme-accent:#cffafe;--theme-muted:#96c5cc;--theme-border:rgba(103,232,249,.28);--theme-gradient:linear-gradient(135deg,#06323b,#00b8d9,#67e8f9);}
body.theme-lime-night{--theme-bg:#030603;--theme-bg2:#091007;--theme-card:#111b0b;--theme-card2:#1d2d12;--theme-primary:#84cc16;--theme-primary2:#d9f99d;--theme-accent:#ecfccb;--theme-muted:#a9bd8d;--theme-border:rgba(132,204,22,.28);--theme-gradient:linear-gradient(135deg,#365314,#84cc16,#d9f99d);}
body.theme-blue-red{--theme-bg:#030713;--theme-bg2:#08122a;--theme-card:#0e1d3d;--theme-card2:#182e5b;--theme-primary:#2563eb;--theme-primary2:#ef4444;--theme-accent:#fecaca;--theme-muted:#a8b8d8;--theme-border:rgba(239,68,68,.28);--theme-gradient:linear-gradient(135deg,#1e40af,#2563eb,#ef4444);}
body.theme-sunset-fire{--theme-bg:#100503;--theme-bg2:#1f0b04;--theme-card:#2b1006;--theme-card2:#40180a;--theme-primary:#f97316;--theme-primary2:#facc15;--theme-accent:#ffedd5;--theme-muted:#d8b08f;--theme-border:rgba(249,115,22,.3);--theme-gradient:linear-gradient(135deg,#9a3412,#f97316,#facc15);}
body.theme-rose-gold{--theme-bg:#0d0407;--theme-bg2:#1b080e;--theme-card:#2a0d16;--theme-card2:#3e1420;--theme-primary:#f43f5e;--theme-primary2:#f5c2c7;--theme-accent:#ffe4e6;--theme-muted:#d1a2aa;--theme-border:rgba(244,63,94,.3);--theme-gradient:linear-gradient(135deg,#9f1239,#f43f5e,#f5c2c7);}
body.theme-platinum-black{--theme-bg:#020202;--theme-bg2:#0b0b0b;--theme-card:#151515;--theme-card2:#272727;--theme-primary:#aeb4bd;--theme-primary2:#f3f4f6;--theme-accent:#ffffff;--theme-muted:#a1a1aa;--theme-border:rgba(243,244,246,.22);--theme-gradient:linear-gradient(135deg,#111,#444,#f3f4f6);}

/* =========================================================
   GUDANG80 THEME CORRECTION V11
   - Default/Bawaan = original black + gold/yellow
   - Balance/wallet + yellow controls follow selected theme
   - Category cards/icons follow selected theme
   - Popular/Live/New game cards follow selected theme
   - Bottom navbar stays BLACK; only each button/icon uses theme
========================================================= */

/* DEFAULT/BAWAAN: restore the actual original black + yellow look. */
body.theme-default{
  --theme-bg:#111111;
  --theme-bg2:#171717;
  --theme-card:#252525;
  --theme-card2:#303030;
  --theme-primary:#ffd400;
  --theme-primary2:#ffe45c;
  --theme-accent:#fff3a6;
  --theme-muted:#bdbdbd;
  --theme-border:rgba(255,212,0,.38);
  --theme-gradient:linear-gradient(180deg,#ffe98a 0%,#ffd400 42%,#e4a900 100%);
}

/* Always keep the site canvas black/near-black. */
html, body[class*="theme-"]{background:#111!important;}
body[class*="theme-"] .main-content,
body[class*="theme-"] #main-route,
body[class*="theme-"] .home,
body[class*="theme-"] .fixwin-home-modern{background:#111!important;}

/* ===== PROFILE / BALANCE WALLET ===== */
body[class*="theme-"] .fixwin-wallet-card,
body[class*="theme-"] .fixwin-wallet-wrap .fixwin-wallet-card{
  background:var(--theme-gradient)!important;
  background-image:var(--theme-gradient)!important;
  border:1px solid var(--theme-primary)!important;
  color:#fff!important;
  box-shadow:0 8px 26px color-mix(in srgb,var(--theme-primary) 20%,transparent)!important;
}
body[class*="theme-"] .fixwin-wallet-amount,
body[class*="theme-"] .fixwin-wallet-label{color:#fff!important;}
body[class*="theme-"] .fixwin-wallet-amount button{color:#fff!important;background:transparent!important;}

/* All known legacy yellow/gold controls now inherit the selected palette. */
body[class*="theme-"] .fixwin-profile-tabs,
body[class*="theme-"] .fixwin-profile-tabs button,
body[class*="theme-"] .fixwin-profile-password button,
body[class*="theme-"] .baginda-gold-btn,
body[class*="theme-"] .baginda-history-summary,
body[class*="theme-"] .baginda-quick-values button.active,
body[class*="theme-"] .amount-btn,
body[class*="theme-"] .nominal-btn{
  background:var(--theme-gradient)!important;
  background-image:var(--theme-gradient)!important;
  border-color:var(--theme-primary)!important;
  color:#fff!important;
}
body[class*="theme-"] .baginda-tx-tab.is-active:after{background:var(--theme-primary)!important;}

/* ===== CATEGORY MENU ===== */
body[class*="theme-"] .home .mobile__category,
body[class*="theme-"] .home .mobile__category .category-container{
  background:#111!important;
}
body[class*="theme-"] .home .mobile__category .category-container .category-item,
body[class*="theme-"] .home .mobile__category .category-container .fixwin-category-item{
  background:var(--theme-gradient)!important;
  background-image:var(--theme-gradient)!important;
  border:1px solid color-mix(in srgb,var(--theme-primary) 75%,transparent)!important;
  color:#fff!important;
  box-shadow:0 5px 16px color-mix(in srgb,var(--theme-primary) 18%,transparent)!important;
}
body[class*="theme-"] .home .mobile__category .category-container .category-item .name,
body[class*="theme-"] .home .mobile__category .category-container .fixwin-category-item .name{
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.55)!important;
}
/* Tint each category icon to the selected theme using the original SVG as a mask. */
body[class*="theme-"] .home .mobile__category .category-container .category-item .icon img{
  display:none!important;
}
body[class*="theme-"] .home .mobile__category .category-container .category-item .icon::after{
  content:""!important;
  display:block!important;
  width:46px!important;
  height:46px!important;
  background:var(--theme-accent)!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-position:center!important;
  mask-position:center!important;
  -webkit-mask-size:contain!important;
  mask-size:contain!important;
}
body[class*="theme-"] .home .mobile__category .category-container>a:nth-child(1) .category-item .icon::after{-webkit-mask-image:url("themes/default/img/mobile-home-icon/mobile-popular.svg");mask-image:url("themes/default/img/mobile-home-icon/mobile-popular.svg");}
body[class*="theme-"] .home .mobile__category .category-container>a:nth-child(2) .category-item .icon::after{-webkit-mask-image:url("themes/default/img/mobile-home-icon/mobile-slot.svg");mask-image:url("themes/default/img/mobile-home-icon/mobile-slot.svg");}
body[class*="theme-"] .home .mobile__category .category-container>a:nth-child(3) .category-item .icon::after{-webkit-mask-image:url("themes/default/img/mobile-home-icon/mobile-livegames.svg");mask-image:url("themes/default/img/mobile-home-icon/mobile-livegames.svg");}
body[class*="theme-"] .home .mobile__category .category-container>a:nth-child(4) .category-item .icon::after{-webkit-mask-image:url("themes/default/img/mobile-home-icon/mobile-casino.svg");mask-image:url("themes/default/img/mobile-home-icon/mobile-casino.svg");}
body[class*="theme-"] .home .mobile__category .category-container>a:nth-child(5) .category-item .icon::after{-webkit-mask-image:url("themes/default/img/mobile-home-icon/mobile-sport.svg");mask-image:url("themes/default/img/mobile-home-icon/mobile-sport.svg");}
body[class*="theme-"] .home .mobile__category .category-container>a:nth-child(6) .category-item .icon::after{-webkit-mask-image:url("themes/default/img/mobile-home-icon/mobile-lottery.svg");mask-image:url("themes/default/img/mobile-home-icon/mobile-lottery.svg");}
body[class*="theme-"] .home .mobile__category .category-container>a:nth-child(7) .category-item .icon::after{-webkit-mask-image:url("themes/default/img/mobile-home-icon/mobile-poker.svg");mask-image:url("themes/default/img/mobile-home-icon/mobile-poker.svg");}
body[class*="theme-"] .home .mobile__category .category-container>a:nth-child(8) .category-item .icon::after{-webkit-mask-image:url("themes/default/img/mobile-home-icon/mobile-arcade.svg");mask-image:url("themes/default/img/mobile-home-icon/mobile-arcade.svg");}
body[class*="theme-"] .home .mobile__category .category-container>a:nth-child(-n+3) .category-item:after{
  background:var(--theme-primary2)!important;
  color:#111!important;
}

/* ===== POPULAR / LIVE / NEW GAME CATALOG ===== */
body[class*="theme-"] .fixwin-home-modern .fw-home-section{
  background:#111!important;
}
body[class*="theme-"] .fixwin-home-modern .fw-section-title{
  color:var(--theme-primary2)!important;
  text-shadow:0 0 10px color-mix(in srgb,var(--theme-primary) 28%,transparent)!important;
}
body[class*="theme-"] .fixwin-home-modern .fw-game-card,
body[class*="theme-"] .fixwin-home-modern .fw-game-card a{
  background:var(--theme-card)!important;
  border:1px solid color-mix(in srgb,var(--theme-primary) 28%,transparent)!important;
  color:#fff!important;
}
body[class*="theme-"] .fixwin-home-modern .fw-game-image{
  background:#111!important;
}
body[class*="theme-"] .fixwin-home-modern .fw-game-name{
  background:var(--theme-gradient)!important;
  background-image:var(--theme-gradient)!important;
  color:#fff!important;
  border-top:1px solid color-mix(in srgb,var(--theme-primary) 50%,transparent)!important;
}
body[class*="theme-"] .fixwin-home-modern .fw-game-card:hover{
  border-color:var(--theme-primary)!important;
  box-shadow:0 0 18px color-mix(in srgb,var(--theme-primary) 38%,transparent)!important;
}

/* ===== BOTTOM NAV: BLACK BACKGROUND, THEMED BUTTONS ONLY ===== */
body[class*="theme-"] .footer-mobile,
body[class*="theme-"] .footer-mobile.fixwin-logged-footer{
  background:#000!important;
  background-image:none!important;
  border-top:1px solid #222!important;
  box-shadow:none!important;
}
body[class*="theme-"] .footer-mobile .footer-item,
body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item{
  background:#000!important;
  color:#fff!important;
  border:0!important;
}
body[class*="theme-"] .footer-mobile .footer-item.active,
body[class*="theme-"] .footer-mobile .footer-item:hover,
body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.active,
body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item:hover{
  background:var(--theme-gradient)!important;
  background-image:var(--theme-gradient)!important;
  color:#fff!important;
}
body[class*="theme-"] .footer-mobile .footer-icon i,
body[class*="theme-"] .footer-mobile .footer-title{
  color:var(--theme-primary2)!important;
}
body[class*="theme-"] .footer-mobile .footer-item.active .footer-icon i,
body[class*="theme-"] .footer-mobile .footer-item.active .footer-title{
  color:#fff!important;
}
body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon{
  background:var(--theme-gradient)!important;
  background-image:var(--theme-gradient)!important;
  border-color:var(--theme-primary)!important;
}

/* ===== HERO / WELCOME / DOWNLOAD REMAIN BLACK ===== */
body[class*="theme-"] .baginda-download-bar,
body[class*="theme-"] .baginda-welcome-bar{
  background:#050505!important;
  background-image:none!important;
}


/* =========================================================
   DARK PREMIUM PACK — 20 ADDITIONAL DARK THEMES
   Designed to stay low-brightness while still changing all
   themed controls, balance/wallet, categories, game cards,
   transaction tabs and active bottom-nav buttons.
   ========================================================= */
body.theme-obsidian-gold{--theme-bg:#030303;--theme-bg2:#090909;--theme-card:#11100d;--theme-card2:#1b1810;--theme-primary:#a87916;--theme-primary2:#d8ad45;--theme-accent:#f0d58b;--theme-muted:#9c9179;--theme-border:rgba(216,173,69,.22);--theme-gradient:linear-gradient(135deg,#080705 0%,#332609 52%,#a87916 100%);}
body.theme-burgundy-black{--theme-bg:#080203;--theme-bg2:#110406;--theme-card:#19070a;--theme-card2:#260b10;--theme-primary:#8f2033;--theme-primary2:#bd3b52;--theme-accent:#e58a99;--theme-muted:#a9858c;--theme-border:rgba(189,59,82,.22);--theme-gradient:linear-gradient(135deg,#090203 0%,#3b0d16 55%,#8f2033 100%);}
body.theme-forest-black{--theme-bg:#020604;--theme-bg2:#06100a;--theme-card:#0a1710;--theme-card2:#10231a;--theme-primary:#176b43;--theme-primary2:#2c9b64;--theme-accent:#79c89d;--theme-muted:#8da99a;--theme-border:rgba(44,155,100,.22);--theme-gradient:linear-gradient(135deg,#030705 0%,#0b2b1a 55%,#176b43 100%);}
body.theme-midnight-teal{--theme-bg:#020708;--theme-bg2:#061113;--theme-card:#09191b;--theme-card2:#102628;--theme-primary:#0b6970;--theme-primary2:#1599a3;--theme-accent:#67cbd0;--theme-muted:#8caeb1;--theme-border:rgba(21,153,163,.22);--theme-gradient:linear-gradient(135deg,#020506 0%,#0b3539 55%,#0b6970 100%);}
body.theme-deep-navy{--theme-bg:#02040a;--theme-bg2:#050b17;--theme-card:#091226;--theme-card2:#0f1b35;--theme-primary:#173d78;--theme-primary2:#2c65ae;--theme-accent:#79a5db;--theme-muted:#8c9db8;--theme-border:rgba(44,101,174,.22);--theme-gradient:linear-gradient(135deg,#02040a 0%,#0b1d3b 55%,#173d78 100%);}
body.theme-graphite-blue{--theme-bg:#050607;--theme-bg2:#0b0e12;--theme-card:#15191f;--theme-card2:#202731;--theme-primary:#3d5870;--theme-primary2:#5f7e9a;--theme-accent:#9db5c9;--theme-muted:#929da8;--theme-border:rgba(95,126,154,.22);--theme-gradient:linear-gradient(135deg,#070809 0%,#1b2632 55%,#3d5870 100%);}
body.theme-dark-violet{--theme-bg:#050208;--theme-bg2:#0d0613;--theme-card:#150b1d;--theme-card2:#21112d;--theme-primary:#5b2a78;--theme-primary2:#8241a8;--theme-accent:#b27acb;--theme-muted:#9f8ba8;--theme-border:rgba(130,65,168,.22);--theme-gradient:linear-gradient(135deg,#060208 0%,#28103a 55%,#5b2a78 100%);}
body.theme-carbon-red{--theme-bg:#050303;--theme-bg2:#0d0506;--theme-card:#160a0b;--theme-card2:#241113;--theme-primary:#7d1721;--theme-primary2:#a92835;--theme-accent:#db6974;--theme-muted:#a58b8e;--theme-border:rgba(169,40,53,.22);--theme-gradient:linear-gradient(135deg,#050303 0%,#30090e 55%,#7d1721 100%);}
body.theme-dark-copper{--theme-bg:#070504;--theme-bg2:#110b08;--theme-card:#1b110b;--theme-card2:#2a1a10;--theme-primary:#8a4d20;--theme-primary2:#b86f35;--theme-accent:#d59a67;--theme-muted:#a58e7e;--theme-border:rgba(184,111,53,.22);--theme-gradient:linear-gradient(135deg,#070504 0%,#3a2110 55%,#8a4d20 100%);}
body.theme-gunmetal-cyan{--theme-bg:#040607;--theme-bg2:#0a0e10;--theme-card:#13191b;--theme-card2:#1d272a;--theme-primary:#1f626d;--theme-primary2:#2d8996;--theme-accent:#70c4cc;--theme-muted:#8fa6aa;--theme-border:rgba(45,137,150,.22);--theme-gradient:linear-gradient(135deg,#050607 0%,#183238 55%,#1f626d 100%);}
body.theme-moss-gold{--theme-bg:#050604;--theme-bg2:#0c1007;--theme-card:#15190b;--theme-card2:#222813;--theme-primary:#65721b;--theme-primary2:#8c9827;--theme-accent:#c0c875;--theme-muted:#9fa488;--theme-border:rgba(140,152,39,.22);--theme-gradient:linear-gradient(135deg,#050604 0%,#2a3210 55%,#65721b 100%);}
body.theme-eclipse-purple{--theme-bg:#040207;--theme-bg2:#090510;--theme-card:#120a18;--theme-card2:#1d1027;--theme-primary:#48205e;--theme-primary2:#693185;--theme-accent:#a06bb7;--theme-muted:#988ca0;--theme-border:rgba(105,49,133,.22);--theme-gradient:linear-gradient(135deg,#040207 0%,#21102e 55%,#48205e 100%);}
body.theme-sapphire-black{--theme-bg:#020407;--theme-bg2:#050a11;--theme-card:#09121c;--theme-card2:#102031;--theme-primary:#174b7a;--theme-primary2:#246ba8;--theme-accent:#6b9dcc;--theme-muted:#8ca0b4;--theme-border:rgba(36,107,168,.22);--theme-gradient:linear-gradient(135deg,#020407 0%,#0b2945 55%,#174b7a 100%);}
body.theme-wine-black{--theme-bg:#070203;--theme-bg2:#100507;--theme-card:#19090e;--theme-card2:#260f16;--theme-primary:#671f36;--theme-primary2:#8b2e4b;--theme-accent:#bd6980;--theme-muted:#9d858d;--theme-border:rgba(139,46,75,.22);--theme-gradient:linear-gradient(135deg,#070203 0%,#2e0d1b 55%,#671f36 100%);}
body.theme-dark-emerald{--theme-bg:#020604;--theme-bg2:#04100b;--theme-card:#081a12;--theme-card2:#0e281b;--theme-primary:#0f6848;--theme-primary2:#17905f;--theme-accent:#62c69b;--theme-muted:#8ca99b;--theme-border:rgba(23,144,95,.22);--theme-gradient:linear-gradient(135deg,#020604 0%,#0a3424 55%,#0f6848 100%);}
body.theme-shadow-orange{--theme-bg:#070403;--theme-bg2:#100805;--theme-card:#1a0e08;--theme-card2:#28170d;--theme-primary:#91400f;--theme-primary2:#bd5c18;--theme-accent:#dc8b4d;--theme-muted:#a48f80;--theme-border:rgba(189,92,24,.22);--theme-gradient:linear-gradient(135deg,#070403 0%,#32170a 55%,#91400f 100%);}
body.theme-steel-blue{--theme-bg:#040608;--theme-bg2:#0a0f15;--theme-card:#121a22;--theme-card2:#1b2732;--theme-primary:#31536b;--theme-primary2:#4d7694;--theme-accent:#8eafc5;--theme-muted:#8e9da8;--theme-border:rgba(77,118,148,.22);--theme-gradient:linear-gradient(135deg,#040608 0%,#182b39 55%,#31536b 100%);}
body.theme-black-rose{--theme-bg:#070305;--theme-bg2:#10070b;--theme-card:#1a0b12;--theme-card2:#29121b;--theme-primary:#7b3150;--theme-primary2:#a8466b;--theme-accent:#d27b9d;--theme-muted:#a18b94;--theme-border:rgba(168,70,107,.22);--theme-gradient:linear-gradient(135deg,#070305 0%,#351223 55%,#7b3150 100%);}
body.theme-deep-ocean{--theme-bg:#020608;--theme-bg2:#041017;--theme-card:#081a22;--theme-card2:#0e2933;--theme-primary:#0b5362;--theme-primary2:#11758a;--theme-accent:#55aebd;--theme-muted:#88a5ab;--theme-border:rgba(17,117,138,.22);--theme-gradient:linear-gradient(135deg,#020608 0%,#0a2c37 55%,#0b5362 100%);}
body.theme-onyx-bronze{--theme-bg:#030303;--theme-bg2:#0a0806;--theme-card:#15100b;--theme-card2:#21180e;--theme-primary:#795025;--theme-primary2:#9d6a32;--theme-accent:#c69a61;--theme-muted:#9f8e7b;--theme-border:rgba(157,106,50,.22);--theme-gradient:linear-gradient(135deg,#030303 0%,#2b1b0d 55%,#795025 100%);}

/* =========================================================
   FINAL SERVICE + BOTTOM NAV CORRECTION
   - Service cards/icons/progress follow selected theme.
   - "Lebihnya" buttons follow selected theme.
   - Bottom navbar stays BLACK.
   - Only DANA/transaction button follows selected theme.
========================================================= */
body[class*="theme-"] .fw-service-section,
body[class*="theme-"] .fw-info-section,
body[class*="theme-"] .fw-member-section{
  background:#111!important;
}

body[class*="theme-"] .fw-service-title{
  color:var(--theme-primary2)!important;
}

/* Deposit / Withdraw service cards */
body[class*="theme-"] .fw-service-box .fw-service-speed,
body[class*="theme-"] .fw-service-box .fw-service-stats{
  background:linear-gradient(145deg,var(--theme-card2),var(--theme-card))!important;
  border:1px solid color-mix(in srgb,var(--theme-primary) 30%,transparent)!important;
  box-shadow:0 5px 18px color-mix(in srgb,var(--theme-primary) 12%,transparent)!important;
}
body[class*="theme-"] .fw-service-icon,
body[class*="theme-"] .fw-stat-icon{
  background:#000!important;
  color:var(--theme-primary2)!important;
  border:1px solid color-mix(in srgb,var(--theme-primary) 45%,transparent)!important;
  box-shadow:0 0 12px color-mix(in srgb,var(--theme-primary) 16%,transparent)!important;
}
body[class*="theme-"] .fw-service-copy strong,
body[class*="theme-"] .fw-service-copy span,
body[class*="theme-"] .fw-service-speed > b,
body[class*="theme-"] .fw-service-stats span,
body[class*="theme-"] .fw-service-stats b{
  color:var(--theme-text)!important;
}
body[class*="theme-"] .fw-progress{
  background:#000!important;
  border:1px solid rgba(255,255,255,.06)!important;
}
body[class*="theme-"] .fw-progress span{
  background:var(--theme-gradient)!important;
}

/* Pusat Info: only the action button gets theme color; box remains black. */
body[class*="theme-"] .fw-info-box,
body[class*="theme-"] .fw-member-box{
  background:#000!important;
}
body[class*="theme-"] .fw-info-item{
  border-bottom-color:rgba(255,255,255,.10)!important;
}
body[class*="theme-"] .fw-info-item button{
  background:#111!important;
  color:var(--theme-primary2)!important;
  border-color:var(--theme-primary)!important;
  box-shadow:0 0 10px color-mix(in srgb,var(--theme-primary) 10%,transparent)!important;
}
body[class*="theme-"] .fw-info-item button:hover,
body[class*="theme-"] .fw-info-item button:focus{
  background:var(--theme-gradient)!important;
  color:#fff!important;
}

/* Member Service icon rings follow the theme, text remains neutral. */
body[class*="theme-"] .fw-member-item{
  border-bottom-color:rgba(255,255,255,.10)!important;
}
body[class*="theme-"] .fw-member-icon{
  border-color:var(--theme-primary)!important;
  background:#111!important;
  color:var(--theme-primary2)!important;
  box-shadow:0 0 12px color-mix(in srgb,var(--theme-primary) 10%,transparent)!important;
}

/* Bottom navbar: NEVER turn the whole bar into a gradient. */
body[class*="theme-"] .footer-mobile,
body[class*="theme-"] .footer-mobile.fixwin-logged-footer{
  background:#000!important;
  background-image:none!important;
  border-top:1px solid #222!important;
  box-shadow:none!important;
}
body[class*="theme-"] .footer-mobile .footer-item,
body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item{
  background:#000!important;
  background-image:none!important;
  color:#fff!important;
  border:0!important;
  box-shadow:none!important;
}
/* Home / Promosi / Memo / Live Chat remain black. */
body[class*="theme-"] .footer-mobile .footer-item:not(.footer-dana),
body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item:not(.footer-dana){
  background:#000!important;
  background-image:none!important;
  color:#fff!important;
}
body[class*="theme-"] .footer-mobile .footer-item:not(.footer-dana) .footer-icon i,
body[class*="theme-"] .footer-mobile .footer-item:not(.footer-dana) .footer-title{
  color:#fff!important;
}
/* Only the DANA/transaction center button uses the active theme. */
body[class*="theme-"] .footer-mobile .footer-item.footer-dana,
body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana{
  background:var(--theme-gradient)!important;
  background-image:var(--theme-gradient)!important;
  color:#fff!important;
  border-color:var(--theme-primary)!important;
}
body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon,
body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon i,
body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-title{
  color:#fff!important;
}

/* =========================================================
   FINAL SERVICE ICON ELEGANCE V2
   - Service icons use a refined theme-aware treatment.
   - Dark glass-like circle is avoided: clean deep-black disc.
   - Icon glyph gets a subtle theme gradient + restrained glow.
   - Rings/borders stay thin and premium across all palettes.
   - No change to the black bottom navbar.
========================================================= */
@media (max-width:1080px){
  body[class*="theme-"] .fw-service-icon,
  body[class*="theme-"] .fw-stat-icon{
    background:#050505!important;
    border:1px solid color-mix(in srgb,var(--theme-primary) 58%,#000)!important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.025),
      0 0 0 1px rgba(0,0,0,.8),
      0 4px 16px rgba(0,0,0,.42),
      0 0 14px color-mix(in srgb,var(--theme-primary) 14%,transparent)!important;
  }

  body[class*="theme-"] .fw-service-icon i,
  body[class*="theme-"] .fw-stat-icon i{
    color:var(--theme-primary2)!important;
    background:var(--theme-gradient)!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    text-shadow:none!important;
    filter:drop-shadow(0 0 5px color-mix(in srgb,var(--theme-primary2) 24%,transparent));
  }

  /* Slightly calmer sizing makes the icons look less bulky. */
  body[class*="theme-"] .fw-service-icon i{font-size:29px!important;}
  body[class*="theme-"] .fw-stat-icon i{font-size:27px!important;}

  /* Member Service contact icons: premium ring + theme glyph. */
  body[class*="theme-"] .fw-member-icon{
    background:#070707!important;
    border:1px solid color-mix(in srgb,var(--theme-primary) 62%,#000)!important;
    color:var(--theme-primary2)!important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.025),
      0 4px 16px rgba(0,0,0,.38),
      0 0 12px color-mix(in srgb,var(--theme-primary) 12%,transparent)!important;
  }
  body[class*="theme-"] .fw-member-icon i,
  body[class*="theme-"] .fw-member-icon svg{
    color:var(--theme-primary2)!important;
    fill:var(--theme-primary2)!important;
    filter:drop-shadow(0 0 5px color-mix(in srgb,var(--theme-primary2) 22%,transparent));
  }

  /* Keep service headings neutral while retaining theme accents on controls. */
  body[class*="theme-"] .fw-service-title{color:#f2f2f2!important;}
}

/* =========================================================
   FINAL JACKPOT CLEAN / STATIC MODE
   - Remove the moving "cacing"/runner light.
   - Remove all blinking/chasing jackpot lamps.
   - Keep the jackpot amount and a clean static frame.
========================================================= */
body .home .fixwin-jackpot .fixwin-jackpot-orbit,
body .home .fixwin-jackpot .v50-jackpot-runner,
body .home .fixwin-jackpot .fixwin-jackpot-lamps,
body .home .fixwin-jackpot .v50-lamp,
body[class*="theme-"] .fixwin-jackpot .fixwin-jackpot-orbit,
body[class*="theme-"] .fixwin-jackpot .v50-jackpot-runner,
body[class*="theme-"] .fixwin-jackpot .fixwin-jackpot-lamps,
body[class*="theme-"] .fixwin-jackpot .v50-lamp{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  animation:none!important;
  -webkit-animation:none!important;
  transition:none!important;
}
body .home .fixwin-jackpot::before,
body .home .fixwin-jackpot::after{
  animation:none!important;
  -webkit-animation:none!important;
}

/* =========================================================
   LOGIN DRAWER - COMPACT & ELEGANT MOBILE V16
   Smaller panel, fields and typography for a cleaner login.
========================================================= */
@media (max-width:1080px){
  body .fixwin-login-drawer{
    width:70%!important;
    max-width:500px!important;
    min-width:250px!important;
  }
  body .fixwin-login-head{
    height:50px!important;
    min-height:50px!important;
  }
  body .fixwin-login-title{
    font-size:17px!important;
    line-height:21px!important;
    font-weight:700!important;
    letter-spacing:.1px!important;
  }
  body .fixwin-login-close{
    width:34px!important;
    height:34px!important;
    left:7px!important;
    top:8px!important;
    font-size:17px!important;
  }
  body .fixwin-login-body{
    padding:18px 18px 28px!important;
  }
  body .fixwin-login-field{
    margin-bottom:14px!important;
  }
  body .fixwin-login-field label{
    margin-bottom:6px!important;
    font-size:16px!important;
    line-height:21px!important;
    font-weight:700!important;
  }
  body .fixwin-login-input{
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
    border-radius:5px!important;
  }
  body .fixwin-login-input>i{
    width:40px!important;
    flex-basis:40px!important;
    font-size:17px!important;
  }
  body .fixwin-login-input input{
    font-size:15px!important;
    padding-right:40px!important;
  }
  body .fixwin-password-toggle{
    width:40px!important;
    height:50px!important;
    font-size:17px!important;
  }
  body .fixwin-remember{
    margin:0 0 14px!important;
    gap:6px!important;
    font-size:14px!important;
    line-height:19px!important;
  }
  body .fixwin-remember input{
    width:20px!important;
    height:20px!important;
  }
  body .fixwin-login-line{
    margin-bottom:15px!important;
  }
  body .fixwin-google-divider{
    font-size:14px!important;
    line-height:20px!important;
    margin-bottom:10px!important;
  }
  body .fixwin-google-render{
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:46px!important;
  }
  body .fixwin-google-btn{
    min-height:46px!important;
    font-size:14px!important;
  }
  body .fixwin-login-submit{
    height:48px!important;
    line-height:48px!important;
    font-size:18px!important;
    border-radius:5px!important;
  }
  body .fixwin-forgot-link{
    font-size:14px!important;
    line-height:20px!important;
    margin-top:12px!important;
  }
  body .fixwin-register-link{
    margin-top:14px!important;
    padding:12px 7px!important;
    font-size:13px!important;
    line-height:20px!important;
    border-radius:4px!important;
  }
}

@media (max-width:390px){
  body .fixwin-login-drawer{
    width:72%!important;
    min-width:245px!important;
  }
  body .fixwin-login-body{padding:16px 16px 25px!important;}
  body .fixwin-login-field label{font-size:15px!important;line-height:20px!important;}
  body .fixwin-login-input{height:48px!important;min-height:48px!important;max-height:48px!important;}
  body .fixwin-login-input>i{width:38px!important;flex-basis:38px!important;font-size:16px!important;}
  body .fixwin-login-input input{font-size:14px!important;}
  body .fixwin-password-toggle{height:48px!important;width:38px!important;}
  body .fixwin-login-submit{height:46px!important;line-height:46px!important;font-size:17px!important;}
}

/* =========================================================
   REGISTER PAGE - COMPACT & ELEGANT MOBILE V17
   Match login proportions: smaller labels, inputs and vertical gaps.
========================================================= */
@media (max-width:1080px){
  body.fixwin-register-page .register-mobile-shell{
    width:100%!important;
    max-width:540px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:12px 18px 24px!important;
    box-sizing:border-box!important;
  }
  body.fixwin-register-page .register-mobile-tabs{
    height:38px!important;
    margin:0 -18px 10px!important;
    padding:0 18px!important;
  }
  body.fixwin-register-page .register-mobile-tabs a{
    height:38px!important;
    line-height:38px!important;
    font-size:14px!important;
  }
  body.fixwin-register-page .register-benefit-tab{
    min-height:34px!important;
    height:34px!important;
    font-size:13px!important;
    line-height:32px!important;
    border-radius:18px!important;
  }
  body.fixwin-register-page .register-section h2{
    font-size:20px!important;
    line-height:25px!important;
    margin:11px 0 9px!important;
    min-height:25px!important;
  }
  body.fixwin-register-page .register-section h2>span{
    width:5px!important;
    height:34px!important;
    margin-right:10px!important;
  }
  body.fixwin-register-page .register-field{
    margin-bottom:11px!important;
  }
  body.fixwin-register-page .register-field label{
    display:block!important;
    margin:0 0 6px!important;
    font-size:15px!important;
    line-height:20px!important;
    font-weight:700!important;
  }
  body.fixwin-register-page .register-field p{
    margin:4px 0 0!important;
    font-size:11px!important;
    line-height:16px!important;
  }
  body.fixwin-register-page .register-field p + p{
    margin-top:2px!important;
  }
  body.fixwin-register-page .register-field .fixwin-input,
  body.fixwin-register-page .register-password-wrap .fixwin-input{
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    border-radius:4px!important;
    font-size:14px!important;
    box-sizing:border-box!important;
  }
  body.fixwin-register-page .register-password-wrap .fixwin-input{
    padding-right:42px!important;
  }
  body.fixwin-register-page .register-password-wrap>button{
    width:40px!important;
    height:46px!important;
    font-size:15px!important;
  }
  body.fixwin-register-page .register-phone-wrap{
    grid-template-columns:92px 1fr!important;
    height:46px!important;
  }
  body.fixwin-register-page .register-phone-wrap .fixwin-input{
    height:46px!important;
    min-height:46px!important;
  }
  body.fixwin-register-page .register-country{
    height:46px!important;
    line-height:46px!important;
    font-size:14px!important;
  }
  body.fixwin-register-page .register-ref-field{
    grid-template-columns:42% 58%!important;
    gap:0!important;
    align-items:start!important;
  }
  body.fixwin-register-page .register-ref-field>label{
    padding-top:1px!important;
  }
  body.fixwin-register-page .register-ref-field>div{
    min-width:0!important;
  }
  body.fixwin-register-page .register-ref-field p{
    white-space:normal!important;
    font-size:11px!important;
    line-height:16px!important;
  }
  body.fixwin-register-page .register-next-btn,
  body.fixwin-register-page .fixwin-register-btn{
    width:42%!important;
    min-width:145px!important;
    max-width:230px!important;
    height:44px!important;
    min-height:44px!important;
    line-height:44px!important;
    margin:10px 0 12px auto!important;
    font-size:16px!important;
    border-radius:4px!important;
  }
  body.fixwin-register-page .contact-section{
    margin-top:4px!important;
  }
  body.fixwin-register-page .register-mobile-step-2 .register-field{
    margin-bottom:12px!important;
  }
}

@media (max-width:390px){
  body.fixwin-register-page .register-mobile-shell{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  body.fixwin-register-page .register-mobile-tabs{
    margin-left:-14px!important;
    margin-right:-14px!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  body.fixwin-register-page .register-section h2{
    font-size:19px!important;
    line-height:24px!important;
  }
  body.fixwin-register-page .register-field label{font-size:14px!important;line-height:19px!important;}
  body.fixwin-register-page .register-field p{font-size:10.5px!important;line-height:15px!important;}
  body.fixwin-register-page .register-field .fixwin-input,
  body.fixwin-register-page .register-password-wrap .fixwin-input,
  body.fixwin-register-page .register-phone-wrap,
  body.fixwin-register-page .register-phone-wrap .fixwin-input,
  body.fixwin-register-page .register-country{height:44px!important;min-height:44px!important;}
  body.fixwin-register-page .register-password-wrap>button{height:44px!important;}
  body.fixwin-register-page .register-phone-wrap{grid-template-columns:82px 1fr!important;}
  body.fixwin-register-page .register-next-btn,
  body.fixwin-register-page .fixwin-register-btn{height:42px!important;min-height:42px!important;line-height:42px!important;font-size:15px!important;}
}


/* PROFILE BUTTON: prevent page navigation/reload while page assets are still loading.
   The top-right account control is a real button, not an href="#" link. */
.target-mobile-profile{
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  cursor:pointer !important;
  font:inherit !important;
  text-decoration:none !important;
  outline:none !important;
}
.target-mobile-profile:focus-visible{
  outline:2px solid var(--theme-primary, #ffd400) !important;
  outline-offset:2px !important;
}

/* =========================================================
   FIX DANA CENTER BUTTON - HEXAGON COMPACT
   Hanya tombol tengah DANA yang dibuat segi-6.
   Ukuran tetap compact agar tidak memenuhi navbar.
========================================================= */
@media (max-width:1080px){
  body[class*="theme-"] .footer-mobile .footer-item.footer-dana,
  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana{
    position:relative!important;
    z-index:1002!important;
    overflow:visible!important;
    align-self:stretch!important;
    background:#000!important;
    background-image:none!important;
    border:0!important;
    box-shadow:none!important;
    color:#fff!important;
  }

  body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon,
  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana .footer-icon{
    width:82px!important;
    height:82px!important;
    min-width:82px!important;
    min-height:82px!important;
    margin:-28px auto 0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    background:var(--theme-gradient)!important;
    background-image:var(--theme-gradient)!important;
    border:1px solid color-mix(in srgb,var(--theme-primary) 85%,#fff 15%)!important;
    border-radius:0!important;
    clip-path:polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)!important;
    -webkit-clip-path:polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)!important;
    box-shadow:0 0 12px color-mix(in srgb,var(--theme-primary) 42%,transparent),
               inset 0 0 10px rgba(255,255,255,.16)!important;
  }

  body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon::after,
  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana .footer-icon::after{
    content:""!important;
    position:absolute!important;
    inset:4px!important;
    pointer-events:none!important;
    background:transparent!important;
    border:1px solid rgba(255,255,255,.16)!important;
    clip-path:inherit!important;
    -webkit-clip-path:inherit!important;
  }

  body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon i,
  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana .footer-icon i{
    position:relative!important;
    z-index:2!important;
    font-size:27px!important;
    line-height:1!important;
    color:#fff!important;
    text-shadow:0 1px 5px rgba(0,0,0,.28)!important;
  }

  body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-title,
  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana .footer-title{
    position:relative!important;
    z-index:3!important;
    margin-top:0!important;
    font-size:11px!important;
    line-height:14px!important;
    font-weight:700!important;
    color:#fff!important;
  }
}

@media (max-width:390px){
  body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon,
  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana .footer-icon{
    width:78px!important;
    height:78px!important;
    min-width:78px!important;
    min-height:78px!important;
    margin:-24px auto 0!important;
  }
  body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon i,
  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana .footer-icon i{
    font-size:25px!important;
  }
}

/* Keep the center DANA label below the hexagon, like the reference layout. */
@media (max-width:390px){
  body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-title,
  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana .footer-title{
    margin-top:0!important;
    position:relative!important;
    z-index:4!important;
  }
}


/* =========================================================
   FIX DANA ACTION PANEL - THEMED COMPACT
   Saat tombol DANA di navbar ditekan, tampil 3 tombol:
   Deposit / Withdraw / Pertanyaan tepat di atas navbar.
   Warna mengikuti tema aktif, bukan warna biru tetap.
========================================================= */
@media (max-width:599px){
  body[class*="theme-"] .fixwin-dana-menu,
  body.fixwin-logged-in .fixwin-dana-menu{
    bottom:76px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:72px!important;
    padding:5px 7px 5px!important;
    margin:0!important;
    display:none!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    align-items:stretch!important;
    background:rgba(0,0,0,.96)!important;
    border-top:1px solid color-mix(in srgb,var(--theme-primary,#ffd400) 35%,#000)!important;
    box-shadow:0 -4px 16px rgba(0,0,0,.35)!important;
    z-index:2147483000!important;
  }

  body[class*="theme-"] .fixwin-dana-menu.is-open,
  body.fixwin-logged-in .fixwin-dana-menu.is-open{
    display:grid!important;
  }

  body[class*="theme-"] .fixwin-dana-menu a,
  body.fixwin-logged-in .fixwin-dana-menu a{
    min-width:0!important;
    width:auto!important;
    height:62px!important;
    min-height:62px!important;
    margin:0!important;
    padding:4px 6px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    color:#fff!important;
    background:var(--theme-gradient,#333)!important;
    background-image:var(--theme-gradient,#333)!important;
    border:1px solid color-mix(in srgb,var(--theme-primary,#ffd400) 65%,#fff 35%)!important;
    border-radius:10px!important;
    box-shadow:0 2px 8px color-mix(in srgb,var(--theme-primary,#ffd400) 24%,transparent)!important;
    text-decoration:none!important;
    text-shadow:0 1px 2px rgba(0,0,0,.45)!important;
    font-size:12px!important;
    line-height:14px!important;
    font-weight:700!important;
    overflow:hidden!important;
  }

  body[class*="theme-"] .fixwin-dana-menu a:hover,
  body[class*="theme-"] .fixwin-dana-menu a:focus,
  body.fixwin-logged-in .fixwin-dana-menu a:hover,
  body.fixwin-logged-in .fixwin-dana-menu a:focus{
    color:#fff!important;
    background:var(--theme-gradient,#333)!important;
    filter:brightness(1.08)!important;
  }

  .fixwin-dana-menu-icon{
    position:relative!important;
    width:29px!important;
    height:30px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#fff!important;
    flex:0 0 30px!important;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))!important;
  }

  .fixwin-dana-menu-icon > i:first-child{
    font-size:23px!important;
    line-height:1!important;
  }

  .fixwin-dana-menu-icon > i:last-child{
    position:absolute!important;
    right:1px!important;
    bottom:0!important;
    width:12px!important;
    height:12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:8px!important;
    line-height:12px!important;
    border-radius:50%!important;
    background:rgba(0,0,0,.42)!important;
    color:#fff!important;
  }

  .fixwin-dana-menu-icon.fixwin-dana-question{
    width:27px!important;
    height:27px!important;
    border-radius:50%!important;
    background:rgba(0,0,0,.28)!important;
    border:1px solid rgba(255,255,255,.45)!important;
  }

  .fixwin-dana-menu-icon.fixwin-dana-question > i:first-child{
    font-size:14px!important;
  }

  .fixwin-dana-menu-text{
    display:block!important;
    width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    text-align:center!important;
    color:#fff!important;
  }

  /* Close layer stays invisible; only used to catch outside taps. */
  body[class*="theme-"] .fixwin-dana-close,
  body.fixwin-logged-in .fixwin-dana-close{
    z-index:2147482999!important;
  }
}

@media (max-width:390px){
  body[class*="theme-"] .fixwin-dana-menu,
  body.fixwin-logged-in .fixwin-dana-menu{
    height:72px!important;
    bottom:76px!important;
    padding:4px 5px 5px!important;
    gap:4px!important;
  }
  body[class*="theme-"] .fixwin-dana-menu a,
  body.fixwin-logged-in .fixwin-dana-menu a{
    height:62px!important;
    min-height:62px!important;
    border-radius:9px!important;
    font-size:11px!important;
  }
  .fixwin-dana-menu-icon{transform:scale(.92)!important;}
}

/* =========================================================
   FIX DANA ACTION PANEL v2 - SMALLER + ACTIVE THEME COLORS
   Override semua warna biru hard-coded dari CSS legacy.
========================================================= */
@media (max-width:599px){
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu{
    bottom:66px!important;
    height:58px!important;
    padding:3px 5px 3px!important;
    gap:4px!important;
    background:rgba(0,0,0,.94)!important;
    border-top:1px solid color-mix(in srgb,var(--theme-primary,#ffd400) 42%,transparent)!important;
    box-shadow:0 -3px 12px color-mix(in srgb,var(--theme-primary,#ffd400) 18%,transparent)!important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a,
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a:first-child,
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a:nth-child(2),
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a:nth-child(3){
    width:auto!important;
    max-width:none!important;
    height:52px!important;
    min-height:52px!important;
    margin:0!important;
    padding:3px 5px!important;
    flex:1 1 0!important;
    gap:5px!important;
    color:#fff!important;
    background:var(--theme-gradient,#333)!important;
    background-image:var(--theme-gradient,#333)!important;
    border:1px solid color-mix(in srgb,var(--theme-primary,#ffd400) 72%,#fff 28%)!important;
    border-radius:8px!important;
    box-shadow:0 1px 6px color-mix(in srgb,var(--theme-primary,#ffd400) 24%,transparent)!important;
    font-size:11px!important;
    line-height:13px!important;
    font-weight:700!important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a:hover,
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a:focus{
    background:var(--theme-gradient,#333)!important;
    filter:brightness(1.08)!important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu-icon{
    width:25px!important;
    height:25px!important;
    flex:0 0 25px!important;
    transform:none!important;
  }
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu-icon > i:first-child{
    font-size:19px!important;
  }
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu-icon > i:last-child{
    width:10px!important;
    height:10px!important;
    font-size:7px!important;
    line-height:10px!important;
  }
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu-icon.fixwin-dana-question{
    width:24px!important;
    height:24px!important;
    flex:0 0 24px!important;
  }
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu-icon.fixwin-dana-question > i:first-child{
    font-size:13px!important;
  }
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu-text{
    font-size:11px!important;
    line-height:13px!important;
  }
}

@media (max-width:390px){
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu{
    bottom:64px!important;
    height:56px!important;
    padding:3px 4px!important;
    gap:3px!important;
  }
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a,
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a:first-child,
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a:nth-child(2),
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a:nth-child(3){
    height:50px!important;
    min-height:50px!important;
    border-radius:7px!important;
    font-size:10px!important;
  }
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu-icon{transform:scale(.88)!important;}
}

/* =========================================================
   FINAL MOBILE DANA BUTTON - HEXAGON + VISIBLE LABEL
   Hanya untuk source mobile ini. Tombol tetap compact dan
   tulisan DANA selalu terlihat di bawah segi-6.
========================================================= */
@media (max-width:599px){
  body[class*="theme-"] .footer-mobile .footer-item.footer-dana,
  body.fixwin-logged-in[class*="theme-"] .footer-mobile .footer-item.footer-dana{
    position:relative!important;
    overflow:visible!important;
    align-self:stretch!important;
    height:100%!important;
    min-height:0!important;
    padding:0!important;
  }

  body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon,
  body.fixwin-logged-in[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon{
    position:relative!important;
    width:66px!important;
    height:62px!important;
    min-width:66px!important;
    min-height:62px!important;
    margin:-10px auto 0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    border-radius:0!important;
    clip-path:polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)!important;
    -webkit-clip-path:polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)!important;
    background:var(--theme-gradient,#333)!important;
    background-image:var(--theme-gradient,#333)!important;
    border:1px solid color-mix(in srgb,var(--theme-primary,#ffd400) 85%,#fff 15%)!important;
    box-shadow:0 0 11px color-mix(in srgb,var(--theme-primary,#ffd400) 42%,transparent),inset 0 0 9px rgba(255,255,255,.14)!important;
    z-index:2!important;
  }

  body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon i,
  body.fixwin-logged-in[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon i{
    position:relative!important;
    z-index:3!important;
    font-size:25px!important;
    line-height:1!important;
    color:#fff!important;
  }

  body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-title,
  body.fixwin-logged-in[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-title{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:1px!important;
    top:auto!important;
    z-index:10!important;
    display:block!important;
    width:100%!important;
    height:15px!important;
    margin:0!important;
    padding:0!important;
    text-align:center!important;
    font-size:11px!important;
    line-height:15px!important;
    font-weight:700!important;
    color:#fff!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-shadow:0 1px 3px rgba(0,0,0,.65)!important;
  }
}

@media (max-width:390px){
  body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon,
  body.fixwin-logged-in[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon{
    width:62px!important;
    height:58px!important;
    min-width:62px!important;
    min-height:58px!important;
    margin:-8px auto 0!important;
  }
  body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon i,
  body.fixwin-logged-in[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-icon i{
    font-size:23px!important;
  }
  body[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-title,
  body.fixwin-logged-in[class*="theme-"] .footer-mobile .footer-item.footer-dana .footer-title{
    bottom:1px!important;
    font-size:10px!important;
    line-height:14px!important;
  }
}

/* =========================================================
   DANA HEXAGON — FINAL REFERENCE LAYOUT
   Match the mobile reference: raised hexagon centered over
   the black bottom navbar, with DANA directly underneath.
   ========================================================= */
@media (max-width:599px){
  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana{
    position:relative!important;
    z-index:1005!important;
    align-self:stretch!important;
    height:100%!important;
    min-height:0!important;
    padding:0 5px 7px!important;
    overflow:visible!important;
    background:#000!important;
    background-image:none!important;
    color:#fff!important;
  }

  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana .footer-icon{
    position:absolute!important;
    z-index:1006!important;
    top:-43px!important;
    left:50%!important;
    right:auto!important;
    bottom:auto!important;
    transform:translateX(-50%)!important;
    width:76px!important;
    height:76px!important;
    min-width:76px!important;
    min-height:76px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    border-radius:0!important;
    clip-path:polygon(50% 0%, 92% 24%, 92% 76%, 50% 100%, 8% 76%, 8% 24%)!important;
    -webkit-clip-path:polygon(50% 0%, 92% 24%, 92% 76%, 50% 100%, 8% 76%, 8% 24%)!important;
    background:var(--theme-gradient,#333)!important;
    background-image:var(--theme-gradient,#333)!important;
    border:2px solid color-mix(in srgb,var(--theme-primary,#ffd400) 80%,#fff 20%)!important;
    box-shadow:0 0 14px color-mix(in srgb,var(--theme-primary,#ffd400) 42%,transparent), inset 0 0 10px rgba(255,255,255,.12)!important;
  }

  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana .footer-icon i{
    position:relative!important;
    z-index:2!important;
    font-size:28px!important;
    line-height:1!important;
    color:#fff!important;
  }

  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana .footer-title{
    position:absolute!important;
    z-index:1007!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:5px!important;
    width:100%!important;
    max-width:none!important;
    height:17px!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:12px!important;
    line-height:17px!important;
    font-weight:700!important;
    color:#fff!important;
    text-shadow:0 1px 3px rgba(0,0,0,.85)!important;
  }
}

@media (max-width:390px){
  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana .footer-icon{
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    min-height:72px!important;
    top:-40px!important;
  }
  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana .footer-icon i{
    font-size:26px!important;
  }
  body[class*="theme-"] .footer-mobile.fixwin-logged-footer .footer-item.footer-dana .footer-title{
    bottom:4px!important;
    font-size:11px!important;
    line-height:16px!important;
  }
}

/* =========================================================
   DANA NAVBAR — CORRECTED REFERENCE POSITION
   Mobile only. Center the DANA hexagon inside the 5-column
   fixed footer, raised slightly above the bar, with the DANA
   label immediately below/over the lower part of the hexagon.
   ========================================================= */
@media (max-width: 599px){
  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:76px!important;
    min-height:76px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    overflow:visible!important;
    z-index:3000!important;
    background:#000!important;
    background-image:none!important;
  }

  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item{
    position:relative!important;
    min-width:0!important;
    height:76px!important;
    min-height:76px!important;
    padding:9px 2px 3px!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    background:#000!important;
    background-image:none!important;
    border:0!important;
  }

  /* Only the middle DANA item is raised; other navbar buttons stay normal. */
  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana{
    align-self:stretch!important;
    justify-self:stretch!important;
    padding:0!important;
    overflow:visible!important;
    z-index:3002!important;
  }

  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon{
    position:absolute!important;
    top:-30px!important;
    left:50%!important;
    right:auto!important;
    bottom:auto!important;
    transform:translateX(-50%)!important;
    width:92px!important;
    height:92px!important;
    min-width:92px!important;
    min-height:92px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    border-radius:0!important;
    clip-path:polygon(50% 0%, 92% 25%, 92% 75%, 50% 100%, 8% 75%, 8% 25%)!important;
    -webkit-clip-path:polygon(50% 0%, 92% 25%, 92% 75%, 50% 100%, 8% 75%, 8% 25%)!important;
    background:var(--theme-gradient,#1f5fa8)!important;
    background-image:var(--theme-gradient,#1f5fa8)!important;
    border:2px solid var(--theme-primary,#ffd400)!important;
    box-shadow:0 0 14px color-mix(in srgb,var(--theme-primary,#ffd400) 42%,transparent),inset 0 0 10px rgba(255,255,255,.12)!important;
    z-index:3004!important;
  }

  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon i{
    position:relative!important;
    z-index:2!important;
    font-size:29px!important;
    line-height:1!important;
    color:#fff!important;
    margin:0!important;
  }

  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-title{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:2px!important;
    width:100%!important;
    height:19px!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    text-align:center!important;
    font-size:13px!important;
    line-height:19px!important;
    font-weight:700!important;
    color:#fff!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    text-shadow:0 1px 3px rgba(0,0,0,.9)!important;
    z-index:3005!important;
  }

  /* Keep the four normal navbar items visually unchanged. */
  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item:not(.footer-dana) .footer-icon{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item:not(.footer-dana) .footer-icon i{
    font-size:27px!important;
    color:#fff!important;
  }

  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item:not(.footer-dana) .footer-title{
    position:static!important;
    width:auto!important;
    height:auto!important;
    max-width:65px!important;
    margin:3px auto 0!important;
    padding:0!important;
    font-size:12px!important;
    line-height:17px!important;
    color:#fff!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

@media (max-width:390px){
  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer{
    height:72px!important;
    min-height:72px!important;
  }
  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item{
    height:72px!important;
    min-height:72px!important;
    padding-top:7px!important;
  }
  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon{
    width:88px!important;
    height:88px!important;
    min-width:88px!important;
    min-height:88px!important;
    top:-28px!important;
  }
  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon i{
    font-size:27px!important;
  }
  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-title{
    bottom:1px!important;
    font-size:12px!important;
    line-height:18px!important;
  }
}

/* =========================================================
   FIX DANA PANEL POSITION - FINAL
   Panel Deposit/Withdraw/Pertanyaan harus berada TEPAT DI ATAS
   navbar bawah, bukan menutupi navbar atau tombol DANA.
   ========================================================= */
@media (max-width:599px){
  body.fixwin-logged-in[class*="theme-"] .footer-mobile.fixwin-logged-footer,
  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer{
    z-index:2147483002 !important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu,
  body.fixwin-logged-in .fixwin-dana-menu{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:82px !important;
    width:100% !important;
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
    box-sizing:border-box !important;
    padding:2px 5px !important;
    margin:0 !important;
    display:none !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:4px !important;
    align-items:stretch !important;
    background:rgba(0,0,0,.96) !important;
    border:0 !important;
    border-top:1px solid color-mix(in srgb,var(--theme-primary,#ffd400) 45%,transparent) !important;
    box-shadow:0 -2px 10px rgba(0,0,0,.45) !important;
    z-index:2147483001 !important;
    pointer-events:none !important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu.is-open,
  body.fixwin-logged-in .fixwin-dana-menu.is-open{
    display:grid !important;
    pointer-events:auto !important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a,
  body.fixwin-logged-in .fixwin-dana-menu a,
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a:first-child,
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a:nth-child(2),
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a:nth-child(3){
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
    margin:0 !important;
    padding:2px 4px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    overflow:hidden !important;
    color:#fff !important;
    background:var(--theme-gradient,#333) !important;
    background-image:var(--theme-gradient,#333) !important;
    border:1px solid color-mix(in srgb,var(--theme-primary,#ffd400) 65%,#fff 35%) !important;
    border-radius:7px !important;
    box-shadow:0 1px 5px color-mix(in srgb,var(--theme-primary,#ffd400) 20%,transparent) !important;
    font-size:10px !important;
    line-height:12px !important;
    font-weight:700 !important;
    text-shadow:0 1px 2px rgba(0,0,0,.45) !important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu-icon,
  body.fixwin-logged-in .fixwin-dana-menu-icon{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    flex:0 0 22px !important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu-icon > i:first-child,
  body.fixwin-logged-in .fixwin-dana-menu-icon > i:first-child{
    font-size:17px !important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu-icon > i:last-child,
  body.fixwin-logged-in .fixwin-dana-menu-icon > i:last-child{
    width:9px !important;
    height:9px !important;
    font-size:6px !important;
    line-height:9px !important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu-icon.fixwin-dana-question,
  body.fixwin-logged-in .fixwin-dana-menu-icon.fixwin-dana-question{
    width:21px !important;
    height:21px !important;
    min-width:21px !important;
    flex:0 0 21px !important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu-icon.fixwin-dana-question > i:first-child,
  body.fixwin-logged-in .fixwin-dana-menu-icon.fixwin-dana-question > i:first-child{
    font-size:12px !important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu-text,
  body.fixwin-logged-in .fixwin-dana-menu-text{
    width:auto !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:10px !important;
    line-height:12px !important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-close,
  body.fixwin-logged-in .fixwin-dana-close{
    z-index:2147482999 !important;
  }
}

@media (max-width:390px){
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu,
  body.fixwin-logged-in .fixwin-dana-menu{
    bottom:82px !important;
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
    padding:2px 4px !important;
    gap:3px !important;
  }
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a,
  body.fixwin-logged-in .fixwin-dana-menu a{
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    border-radius:7px !important;
    font-size:9px !important;
  }
}
/* FINAL DANA PANEL NO-OVERLAP */
@media (max-width:599px){
body.fixwin-logged-in .footer-mobile.fixwin-logged-footer{z-index:2147483002!important;}
body.fixwin-logged-in .fixwin-dana-menu{position:fixed!important;left:0!important;right:0!important;bottom:82px!important;width:100%!important;height:50px!important;min-height:50px!important;max-height:50px!important;box-sizing:border-box!important;padding:2px 5px!important;margin:0!important;display:none!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;align-items:stretch!important;background:rgba(0,0,0,.96)!important;border:0!important;border-top:1px solid color-mix(in srgb,var(--theme-primary,#ffd400) 45%,transparent)!important;box-shadow:0 -2px 10px rgba(0,0,0,.45)!important;z-index:2147483001!important;pointer-events:none!important;}
body.fixwin-logged-in .fixwin-dana-menu.is-open{display:grid!important;pointer-events:auto!important;}
body.fixwin-logged-in .fixwin-dana-menu a{width:auto!important;max-width:none!important;min-width:0!important;height:46px!important;min-height:46px!important;max-height:46px!important;margin:0!important;padding:2px 4px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:4px!important;overflow:hidden!important;color:#fff!important;background:var(--theme-gradient,#333)!important;background-image:var(--theme-gradient,#333)!important;border:1px solid color-mix(in srgb,var(--theme-primary,#ffd400) 65%,#fff 35%)!important;border-radius:7px!important;box-shadow:0 1px 5px color-mix(in srgb,var(--theme-primary,#ffd400) 20%,transparent)!important;font-size:10px!important;line-height:12px!important;font-weight:700!important;text-shadow:0 1px 2px rgba(0,0,0,.45)!important;}
body.fixwin-logged-in .fixwin-dana-menu-icon{width:22px!important;height:22px!important;min-width:22px!important;flex:0 0 22px!important;}
body.fixwin-logged-in .fixwin-dana-menu-icon>i:first-child{font-size:17px!important;}
body.fixwin-logged-in .fixwin-dana-menu-icon>i:last-child{width:9px!important;height:9px!important;font-size:6px!important;line-height:9px!important;}
body.fixwin-logged-in .fixwin-dana-menu-icon.fixwin-dana-question{width:21px!important;height:21px!important;min-width:21px!important;flex:0 0 21px!important;}
body.fixwin-logged-in .fixwin-dana-menu-icon.fixwin-dana-question>i:first-child{font-size:12px!important;}
body.fixwin-logged-in .fixwin-dana-menu-text{width:auto!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10px!important;line-height:12px!important;}
body.fixwin-logged-in .fixwin-dana-close{z-index:2147482999!important;}
}
@media (max-width:390px){body.fixwin-logged-in .fixwin-dana-menu{bottom:82px!important;height:48px!important;min-height:48px!important;max-height:48px!important;padding:2px 4px!important;gap:3px!important;}body.fixwin-logged-in .fixwin-dana-menu a{height:44px!important;min-height:44px!important;max-height:44px!important;border-radius:7px!important;font-size:9px!important;}}


/* FINAL DANA COMPACT WHEN PANEL IS OPEN
   Keep the center hexagon smaller so it does not cover the Withdraw button. */
@media (max-width:599px){
  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon{
    transition:width .18s ease,height .18s ease,top .18s ease,box-shadow .18s ease!important;
  }
  body.fixwin-logged-in:has(.fixwin-dana-menu.is-open) .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon{
    width:64px!important;
    height:64px!important;
    min-width:64px!important;
    min-height:64px!important;
    top:-18px!important;
    border-width:1.5px!important;
    box-shadow:0 0 9px color-mix(in srgb,var(--theme-primary,#ffd400) 32%,transparent),inset 0 0 7px rgba(255,255,255,.10)!important;
  }
  body.fixwin-logged-in:has(.fixwin-dana-menu.is-open) .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon i{
    font-size:22px!important;
  }
}
@media (max-width:390px){
  body.fixwin-logged-in:has(.fixwin-dana-menu.is-open) .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon{
    width:60px!important;
    height:60px!important;
    min-width:60px!important;
    min-height:60px!important;
    top:-16px!important;
  }
  body.fixwin-logged-in:has(.fixwin-dana-menu.is-open) .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon i{
    font-size:20px!important;
  }
}

/* =========================================================
   DANA OPEN - EXTRA COMPACT FINAL
   The 3-button transaction panel must remain fully visible;
   shrink only the center hexagon while the panel is open.
   ========================================================= */
@media (max-width:599px){
  body.fixwin-logged-in.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon,
  body.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon{
    width:48px!important;
    height:52px!important;
    min-width:48px!important;
    min-height:52px!important;
    max-width:48px!important;
    max-height:52px!important;
    top:-9px!important;
    margin:0 auto!important;
    transform:translateX(0)!important;
    border-width:1px!important;
    box-shadow:0 0 6px color-mix(in srgb,var(--theme-primary,#ffd400) 24%,transparent)!important;
  }
  body.fixwin-logged-in.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon i,
  body.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon i{
    font-size:18px!important;
    margin-top:0!important;
  }
  body.fixwin-logged-in.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-title,
  body.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-title{
    bottom:1px!important;
    font-size:11px!important;
    line-height:14px!important;
    z-index:20!important;
  }
}
@media (max-width:390px){
  body.fixwin-logged-in.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon,
  body.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon{
    width:44px!important;
    height:48px!important;
    min-width:44px!important;
    min-height:48px!important;
    max-width:44px!important;
    max-height:48px!important;
    top:-7px!important;
  }
  body.fixwin-logged-in.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon i,
  body.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon i{
    font-size:16px!important;
  }
}

/* FINAL DANA FIX - LOCK CENTER POSITION WHEN OPEN
   Prevent the hexagon from sliding to the right when the DANA menu opens. */
@media (max-width:599px){
  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana,
  body.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana{
    position:relative!important;
    left:0!important;
    right:0!important;
    transform:none!important;
    translate:none!important;
    margin:0!important;
    padding:0!important;
  }

  body.fixwin-logged-in.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon,
  body.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    margin-left:0!important;
    margin-right:0!important;
    transform:translateX(-50%)!important;
    translate:none!important;
    width:48px!important;
    height:52px!important;
    min-width:48px!important;
    min-height:52px!important;
    max-width:48px!important;
    max-height:52px!important;
    top:-9px!important;
  }
}
@media (max-width:390px){
  body.fixwin-logged-in.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon,
  body.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon{
    left:50%!important;
    transform:translateX(-50%)!important;
    width:44px!important;
    height:48px!important;
    min-width:44px!important;
    min-height:48px!important;
    max-width:44px!important;
    max-height:48px!important;
    top:-7px!important;
  }
}

/* =========================================================
   GUDANG80 - DANA CLEAN MOBILE OVERRIDE
   Closed and open DANA use the same size.
   Deposit / Withdraw / Pertanyaan are raised and may overlap
   the bottom navigation when the DANA panel is open.
   ========================================================= */
@media (max-width:599px){
  body.fixwin-logged-in .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana,
  body.fixwin-dana-open .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana{
    position:relative!important;
    left:0!important;
    right:0!important;
    transform:none!important;
    translate:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    z-index:3002!important;
  }

  /* DANA: identical size in CLOSED and OPEN states */
  body.fixwin-logged-in[class*="theme-"] .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon,
  body.fixwin-dana-open[class*="theme-"] .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:-9px!important;
    width:48px!important;
    height:52px!important;
    min-width:48px!important;
    min-height:52px!important;
    max-width:48px!important;
    max-height:52px!important;
    margin:0!important;
    padding:0!important;
    transform:translateX(-50%)!important;
    translate:none!important;
    box-sizing:border-box!important;
  }

  body.fixwin-logged-in[class*="theme-"] .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon i,
  body.fixwin-dana-open[class*="theme-"] .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon i{
    font-size:18px!important;
    line-height:1!important;
  }

  body.fixwin-logged-in[class*="theme-"] .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-title,
  body.fixwin-dana-open[class*="theme-"] .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-title{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:1px!important;
    margin:0!important;
    padding:0!important;
    z-index:20!important;
    font-size:11px!important;
    line-height:14px!important;
    font-weight:700!important;
    text-align:center!important;
    white-space:nowrap!important;
  }

  /* Raised action panel */
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu,
  body.fixwin-dana-open[class*="theme-"] .fixwin-dana-menu{
    bottom:120px!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    padding:3px 6px!important;
    gap:4px!important;
    z-index:2147483003!important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a,
  body.fixwin-dana-open[class*="theme-"] .fixwin-dana-menu a{
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    padding:3px 5px!important;
    border-radius:7px!important;
    font-size:10px!important;
    line-height:12px!important;
  }

  /* Question icon stays inside PERTANYAAN column */
  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a .fixwin-dana-menu-icon.fixwin-dana-question,
  body.fixwin-dana-open[class*="theme-"] .fixwin-dana-menu a .fixwin-dana-menu-icon.fixwin-dana-question{
    flex:0 0 24px!important;
    width:24px!important;
    height:24px!important;
    margin:0!important;
    position:relative!important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a .fixwin-dana-menu-text,
  body.fixwin-dana-open[class*="theme-"] .fixwin-dana-menu a .fixwin-dana-menu-text{
    width:auto!important;
    flex:0 1 auto!important;
    min-width:0!important;
    margin:0!important;
  }
}

@media (max-width:390px){
  body.fixwin-logged-in[class*="theme-"] .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon,
  body.fixwin-dana-open[class*="theme-"] .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon{
    top:-7px!important;
    width:44px!important;
    height:48px!important;
    min-width:44px!important;
    min-height:48px!important;
    max-width:44px!important;
    max-height:48px!important;
  }

  body.fixwin-logged-in[class*="theme-"] .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon i,
  body.fixwin-dana-open[class*="theme-"] .footer-mobile.fixwin-logged-footer > .footer-item.footer-dana .footer-icon i{
    font-size:16px!important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu,
  body.fixwin-dana-open[class*="theme-"] .fixwin-dana-menu{
    bottom:120px!important;
    height:62px!important;
    min-height:62px!important;
    max-height:62px!important;
    padding:3px 4px!important;
    gap:3px!important;
  }

  body.fixwin-logged-in[class*="theme-"] .fixwin-dana-menu a,
  body.fixwin-dana-open[class*="theme-"] .fixwin-dana-menu a{
    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;
    padding:2px 4px!important;
    font-size:9px!important;
    line-height:11px!important;
  }
}

/* =========================================================
   GUDANG80 - MOBILE TOP NAVBAR FIXED
   Header atas harus tetap menempel di viewport saat halaman di-scroll.
   ========================================================= */
@media (max-width:1080px){
  html,body{
    overflow-x:hidden!important;
  }

  /* Header benar-benar fixed, bukan sticky.
     Ini memastikan header tidak ikut hilang ketika body/page di-scroll. */
  .header-mobile.target-mobile-header{
    display:block!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:60px!important;
    margin:0!important;
    z-index:2147483640!important;
    transform:none!important;
    translate:none!important;
    visibility:visible!important;
    opacity:1!important;
  }

  .header-mobile.target-mobile-header .target-mobile-header__bar{
    position:relative!important;
    width:100%!important;
    height:60px!important;
    z-index:2147483641!important;
  }

  /* Ganti ruang yang sebelumnya ditempati header agar konten tidak tertutup. */
  body{
    padding-top:60px!important;
  }
}

@media (max-width:430px){
  .header-mobile.target-mobile-header,
  .header-mobile.target-mobile-header .target-mobile-header__bar{
    height:60px!important;
  }
}

@media (max-width:390px){
  .header-mobile.target-mobile-header,
  .header-mobile.target-mobile-header .target-mobile-header__bar{
    height:60px!important;
  }
}


/* =========================================================
   GUDANG80 - LOGIN / DAFTAR TWO-COLOR THEME OVERRIDE
   Reference: full-width tabs, centered text, vertical divider.
   Each theme uses its own primary/primary2 pair:
   LOGIN  = theme-primary2
   DAFTAR = theme-primary
   ========================================================= */
@media (max-width:1080px){
  body .home .fixwin-guest-actions,
  body .home .baginda-login-tabs,
  body .baginda-login-tabs{
    width:100%!important;
    max-width:none!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:var(--theme-primary)!important;
    box-shadow:none!important;
  }

  body .home .fixwin-guest-actions a,
  body .home .baginda-login-tabs a,
  body .baginda-login-tabs a{
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    vertical-align:middle!important;
    box-sizing:border-box!important;
    font-size:17px!important;
    line-height:1!important;
    font-weight:600!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    text-decoration:none!important;
    color:#fff!important;
    text-shadow:0 1px 1px rgba(0,0,0,.18)!important;
    border:0!important;
    border-radius:0!important;
  }

  /* LOGIN = secondary theme color (yellow in MERAH-KUNING). */
  body .home .fixwin-guest-actions a:first-child,
  body .home .baginda-login-tabs a:first-child,
  body .baginda-login-tabs a:first-child{
    background:var(--theme-primary2)!important;
    background-image:none!important;
    color:#fff!important;
    border-right:1px solid rgba(255,255,255,.45)!important;
  }

  /* DAFTAR = primary theme color (red in MERAH-KUNING). */
  body .home .fixwin-guest-actions a:last-child,
  body .home .baginda-login-tabs a:last-child,
  body .baginda-login-tabs a:last-child{
    background:var(--theme-primary)!important;
    background-image:none!important;
    color:#fff!important;
    border-right:0!important;
  }

  body .home .fixwin-guest-actions a:hover,
  body .home .baginda-login-tabs a:hover,
  body .baginda-login-tabs a:hover{
    filter:brightness(1.05)!important;
  }

  body .home .fixwin-guest-actions a:active,
  body .home .baginda-login-tabs a:active,
  body .baginda-login-tabs a:active{
    filter:brightness(.94)!important;
  }
}

/* =========================================================
   GUDANG80 FINAL MOBILE COMPACT CONTROLS
   - Login/Daftar: shorter vertically, still full width 50/50.
   - Navbar GUDANG80 logo: slightly larger.
   ========================================================= */
@media (max-width:1080px){
  body .home .fixwin-guest-actions,
  body .home .baginda-login-tabs,
  body .baginda-login-tabs{
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
  }

  body .home .fixwin-guest-actions a,
  body .home .baginda-login-tabs a,
  body .baginda-login-tabs a{
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    font-size:16px!important;
    line-height:1!important;
    padding:0!important;
  }

  body .home .fixwin-guest-actions a:first-child,
  body .home .baginda-login-tabs a:first-child,
  body .baginda-login-tabs a:first-child{
    border-right:1px solid rgba(255,255,255,.55)!important;
  }

  body .header-mobile.target-mobile-header .target-mobile-logo img{
    width:auto!important;
    max-width:145px!important;
    max-height:45px!important;
    height:auto!important;
    object-fit:contain!important;
  }
}

@media (max-width:430px){
  body .header-mobile.target-mobile-header .target-mobile-logo img{
    max-width:145px!important;
    max-height:45px!important;
  }
}

@media (max-width:390px){
  body .header-mobile.target-mobile-header .target-mobile-logo img{
    max-width:140px!important;
    max-height:43px!important;
  }
}

/* GUDANG80 - FINAL LOGIN/DAFTAR COMPACT MATCH WELCOME BAR */
@media (max-width:1080px){
  body .home .fixwin-guest-actions,
  body .home .baginda-login-tabs,
  body .baginda-login-tabs{
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  body .home .fixwin-guest-actions a,
  body .home .baginda-login-tabs a,
  body .baginda-login-tabs a{
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-right:0!important;
    border-left:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1!important;
    font-size:15px!important;
    font-weight:600!important;
    box-sizing:border-box!important;
  }
  body .home .fixwin-guest-actions a:first-child,
  body .home .baginda-login-tabs a:first-child,
  body .baginda-login-tabs a:first-child{
    border-right:0!important;
  }
  body .header-mobile.target-mobile-header .target-mobile-logo img{
    max-width:155px!important;
    max-height:48px!important;
  }
}
@media (max-width:390px){
  body .header-mobile.target-mobile-header .target-mobile-logo img{
    max-width:150px!important;
    max-height:46px!important;
  }
}