/* =========================================================
   FINAL MOBILE UI / UX PASS
   Scope: mobile layout only. Keeps existing PHP/query logic.
   ========================================================= */
@media (max-width: 768px) {
  :root { --fm-gold:#a855f7; --fm-gold2:#7c3aed; --fm-bg:#070707; --fm-card:#111; --fm-border:#4c1d95; }
  html, body { background:var(--fm-bg) !important; color:#fff !important; overflow-x:hidden !important; }
  body { padding-bottom:84px !important; }
  a { -webkit-tap-highlight-color:transparent; }

  /* HEADER / BALANCE */
  .header-mobile { background:#070707 !important; }
  .header-mobile__top { min-height:62px !important; padding:8px 7px !important; border-bottom:1px solid rgba(168,85,247,.35) !important; }
  .header-mobile__top .mobile-logo { width:54vw !important; max-width:190px !important; }
  .header-mobile__top .mobile-logo img { width:100% !important; max-height:48px !important; object-fit:contain !important; }
  .header-mobile__top .mobile-button { gap:5px !important; }
  .header-mobile__top .mobile-button > * { box-sizing:border-box !important; }
  .header-mobile__top .mobile-button--transaksi {
    min-width:118px !important; max-width:145px !important; min-height:42px !important;
    display:flex !important; align-items:center !important; justify-content:center !important; gap:4px !important;
    padding:6px 8px !important; border:1px solid rgba(168,85,247,.7) !important; border-radius:9px !important;
    background:#090909 !important; color:var(--fm-gold) !important; z-index:50 !important;
  }
  .header-mobile__top .mobile-button--transaksi a { color:#fff !important; text-decoration:none !important; font-weight:900 !important; }
  .header-mobile__top .mobile-button--transaksi #balance-common-totale,
  .header-mobile__top .mobile-button--transaksi .wallet-amount span { color:#fff !important; font-weight:900 !important; }
  .header-mobile__top .mobile-button--menu { min-width:44px !important; min-height:42px !important; border:1px solid rgba(168,85,247,.7) !important; border-radius:9px !important; background:#090909 !important; color:#fff !important; }

  .header-mobile__marquee { min-height:34px !important; border-top:1px solid rgba(168,85,247,.25) !important; border-bottom:1px solid rgba(168,85,247,.45) !important; background:linear-gradient(#171717,#080808) !important; }
  .header-mobile__marquee .marquee { color:#eee !important; font-weight:800 !important; }
  .header-mobile__marquee a { flex:0 0 auto !important; }

  /* SIDE MENU */
  .sidenav.sidenav-premium-v3 {
    background:#090909 !important; color:#fff !important; border-left:1px solid rgba(168,85,247,.45) !important;
    box-shadow:-10px 0 35px rgba(0,0,0,.65) !important; width:min(86vw,360px) !important;
  }
  .sidenav-premium-v3 .sidenav__header { padding:18px 16px 12px !important; background:linear-gradient(#111,#070707) !important; }
  .sidenav-premium-v3 .sidenav__header-user { color:#ddd !important; font-weight:700 !important; text-align:center !important; }
  .sidenav-premium-v3 .sidenav__header-user-logo img { max-width:170px !important; height:auto !important; }
  .sidenav-premium-v3 .sidenav-button { display:flex !important; gap:8px !important; }
  .sidenav-premium-v3 .sidenav-button button { flex:1 !important; min-height:44px !important; border-radius:8px !important; font-weight:800 !important; }
  .sidenav-premium-v3 .sidenav-button .btn-login { background:#171717 !important; color:#fff !important; border:1px solid #4c1d95 !important; }
  .sidenav-premium-v3 .sidenav-button .btn-register { background:linear-gradient(135deg,#c084fc,#6d28d9) !important; color:#111 !important; border:0 !important; }
  .sidenav-premium-v3 .sidenav-password a { color:#a855f7 !important; }
  .sidenav-premium-v3 .sidenav__list { padding:8px 12px !important; }
  .sidenav-premium-v3 .sidenav__list ul { margin:0 !important; padding:0 !important; }
  .sidenav-premium-v3 .sidenav__list ul > a { display:block !important; text-decoration:none !important; }
  .sidenav-premium-v3 .sidenav__list ul li { display:flex !important; align-items:center !important; gap:12px !important; min-height:46px !important; margin:4px 0 !important; padding:10px 12px !important; border:1px solid transparent !important; border-radius:9px !important; color:#eee !important; }
  .sidenav-premium-v3 .sidenav__list ul li i { width:24px !important; text-align:center !important; color:#a855f7 !important; }
  .sidenav-premium-v3 .sidenav__list ul li.active,
  .sidenav-premium-v3 .sidenav__list ul li:hover { background:#171717 !important; border-color:rgba(168,85,247,.45) !important; color:#a855f7 !important; }
  .sidenav-premium-v3 .header-flag { margin:8px 16px !important; color:#ddd !important; }
  .sidenav-premium-v3 .flag-dropdown { background:#111 !important; border:1px solid #4c1d95 !important; }

  /* CONTENT WIDTH */
  #main-route, .main-content { width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
  #main-route > .main-content > .container { width:100% !important; max-width:100% !important; padding-left:8px !important; padding-right:8px !important; }

  /* TRANSACTION / DEPOSIT / WITHDRAW */
  .main-content.transaksi { background:#070707 !important; padding:10px 0 90px !important; }
  .transaksi .component-tabs { display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; border:0 !important; margin:0 0 10px !important; }
  .transaksi .component-tabs .nav-item { margin:0 !important; }
  .transaksi .component-tabs .nav-link { display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; min-height:48px !important; border:1px solid #4c1d95 !important; border-radius:9px !important; background:#111 !important; color:#eee !important; font-size:12px !important; font-weight:800 !important; }
  .transaksi .component-tabs .nav-link.active { background:linear-gradient(135deg,#a855f7,#7c3aed) !important; color:#111 !important; border-color:#c084fc !important; }
  #nav-deposit, #nav-withdraw { background:#090909 !important; color:#fff !important; }
  #nav-deposit .deposit-mode { display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; margin:0 0 10px !important; }
  #nav-deposit .deposit-mode-btn { min-height:48px !important; padding:7px 4px !important; border-radius:9px !important; border:1px solid #4c1d95 !important; background:#151515 !important; color:#fff !important; font-size:11px !important; }
  #nav-deposit .deposit-mode-btn.active { background:linear-gradient(135deg,#a855f7,#7c3aed) !important; color:#111 !important; }
  #nav-deposit .transaksi-formulir, #nav-withdraw .transaksi-formulir { border:1px solid #4c1d95 !important; border-radius:12px !important; background:#101010 !important; overflow:hidden !important; }
  #nav-deposit .formulir-title, #nav-withdraw .formulir-title { background:#141414 !important; color:#a855f7 !important; border-bottom:1px solid #3b176d !important; padding:13px 14px !important; font-weight:900 !important; }
  #nav-deposit .formulir-form, #nav-withdraw .formulir-form { padding:12px !important; }
  #nav-deposit .form-group, #nav-withdraw .form-group { margin-bottom:13px !important; }
  #nav-deposit .form-group .row, #nav-withdraw .form-group .row { margin-left:0 !important; margin-right:0 !important; }
  #nav-deposit .form-group label, #nav-withdraw .form-group label { color:#eee !important; font-size:12px !important; font-weight:700 !important; }
  #nav-deposit .form-group .col-lg-3, #nav-deposit .form-group .col-lg-4, #nav-deposit .form-group .col-lg-6,
  #nav-withdraw .form-group .col-lg-3, #nav-withdraw .form-group .col-lg-4, #nav-withdraw .form-group .col-lg-6 { width:100% !important; max-width:100% !important; padding-left:0 !important; padding-right:0 !important; }
  #nav-deposit input.form-control, #nav-deposit select.form-control, #nav-withdraw input.form-control, #nav-withdraw select.form-control { min-height:46px !important; width:100% !important; background:#080808 !important; color:#fff !important; border:1px solid #454545 !important; border-radius:8px !important; }
  #nav-deposit input.form-control:focus, #nav-deposit select.form-control:focus, #nav-withdraw input.form-control:focus { border-color:#a855f7 !important; box-shadow:0 0 0 2px rgba(168,85,247,.12) !important; }
  #nav-deposit .text-white { background:#151515 !important; border:1px solid #3c3c3c !important; border-radius:9px !important; margin-bottom:13px !important; }
  #nav-deposit .text-white h5 { color:#a855f7 !important; }
  #nav-deposit #btnLanjut, #nav-deposit #btnDeposit, #nav-withdraw #submit-withdraw { min-height:48px !important; width:100% !important; border-radius:9px !important; background:linear-gradient(135deg,#a855f7,#7c3aed) !important; color:#111 !important; border:0 !important; font-weight:900 !important; }
  #nav-deposit .note_addbank { font-size:11px !important; }
  .transaksi-info, .transaksi-table-bottom { margin-top:10px !important; border:1px solid #32135c !important; border-radius:10px !important; background:#101010 !important; overflow:hidden !important; }
  .transaksi-info .info-header, .transaksi-table-bottom .form-title { color:#a855f7 !important; font-weight:900 !important; padding:11px !important; }
  .transaksi-info .info-content { color:#bbb !important; padding:0 11px 11px !important; font-size:11px !important; line-height:1.5 !important; }
  .table-dataTable { overflow-x:auto !important; }
  .table-dataTable table { min-width:560px !important; font-size:10px !important; color:#eee !important; }

  /* PROMOTION */
  .main-content.promo { background:#070707 !important; padding:12px 0 90px !important; }
  .promo__container { background:#0c0c0c !important; border:1px solid #3b176d !important; border-radius:12px !important; padding:10px !important; }
  .promo .page-header { color:#a855f7 !important; font-size:19px !important; font-weight:900 !important; border-bottom:1px solid #3b176d !important; padding:8px 4px 12px !important; }
  .promo__filter { display:flex !important; gap:7px !important; overflow:auto !important; padding:10px 0 !important; }
  .promo__filter .filter-promo { flex:0 0 auto !important; padding:7px 11px !important; border:1px solid #4c1d95 !important; border-radius:999px !important; color:#fff !important; background:#111 !important; }
  .promo__filter .filter-promo.active { background:#a855f7 !important; color:#111 !important; }
  .promo__list .row { margin:0 !important; }
  .promo-item-holder { width:100% !important; max-width:100% !important; padding:5px 0 !important; }
  .promo-item { background:#111 !important; border:1px solid #3b176d !important; border-radius:10px !important; overflow:hidden !important; }
  .promo-item .promo-img img { display:block !important; width:100% !important; height:auto !important; object-fit:cover !important; }
  .promo-item .promo-info { padding:10px !important; }
  .promo-item .info-title { color:#fff !important; font-weight:800 !important; }
  .promo-item .info-read { display:block !important; margin-top:8px !important; text-align:center !important; background:linear-gradient(135deg,#a855f7,#7c3aed) !important; color:#111 !important; border-radius:7px !important; }

  /* CONTACT / LIVE CHAT */
  .main-content.contact-us { background:#070707 !important; padding:12px 0 90px !important; }
  .contact-us .page-header { color:#a855f7 !important; font-size:20px !important; font-weight:900 !important; border-bottom:1px solid #3b176d !important; padding-bottom:10px !important; }
  .contact-us__content .row { margin:0 !important; }
  .contact-us__content [class*="col-"] { width:100% !important; max-width:100% !important; padding:5px 0 !important; }
  .contact-us__item { border:1px solid #4c1d95 !important; border-radius:11px !important; background:#111 !important; overflow:hidden !important; }
  .contact-us__item .item-header { background:#171717 !important; color:#a855f7 !important; padding:11px !important; font-weight:900 !important; }
  .contact-us__item .item-content { padding:11px !important; }
  .contact-us__item .item-content .title { color:#fff !important; }
  .contact-us__item .item-content .description { color:#aaa !important; font-size:11px !important; }

  /* HOME POPULAR GAMES - image fallback / clean 3 columns */
  .mobile__popular { background:#080808 !important; border-top:1px solid rgba(168,85,247,.35) !important; border-bottom:1px solid rgba(168,85,247,.35) !important; }
  .mobile__popular .popular-title { color:#fff !important; }
  .mobile__popular .popular-title i { color:#a855f7 !important; }
  .mobile__games { background:#070707 !important; }
  .mobile__games .games-list { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:7px !important; padding:7px !important; }
  .mobile__games .games-holder { min-width:0 !important; background:#101010 !important; border:1px solid #4c1d95 !important; border-radius:8px !important; overflow:hidden !important; }
  .mobile__games .games-img { width:100% !important; aspect-ratio:1/0.76 !important; background:#050505 !important; display:flex !important; align-items:center !important; justify-content:center !important; }
  .mobile__games .games-img img { display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; }
  .mobile__games .games-name { min-height:28px !important; padding:6px 3px !important; color:#fff !important; font-size:9px !important; line-height:1.2 !important; font-weight:800 !important; text-align:center !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }

  /* FLOATING CONTROLS: WD centered, WhatsApp right and above footer */
  .float-wa-stage9 { right:8px !important; left:auto !important; bottom:88px !important; z-index:1450 !important; }
  .float-wa-stage9 img { width:56px !important; height:56px !important; border-radius:50% !important; }
  #wdPop.wd-pop-fixed-v2 { left:50% !important; right:auto !important; bottom:88px !important; transform:translateX(-50%) !important; z-index:1440 !important; max-width:230px !important; }

  /* BOTTOM NAV */
  .footer-mobile { height:72px !important; min-height:72px !important; background:#030303 !important; border-top:1px solid rgba(168,85,247,.6) !important; z-index:1500 !important; }
  .footer-mobile .footer-item { color:#fff !important; padding:7px 2px 5px !important; }
  .footer-mobile .footer-item.active { color:#a855f7 !important; }
  .footer-mobile .footer-item .footer-title { font-size:9px !important; font-weight:800 !important; }
  .footer-mobile .footer-item.active .footer-title { color:#a855f7 !important; }
  .footer-mobile .footer-item .footer-icon i { font-size:20px !important; }
  .footer-mobile .footer-item.footer-login .footer-icon { width:70px !important; height:70px !important; top:-52px !important; border:3px solid #050505 !important; background:linear-gradient(145deg,#f6ce3b,#d6a700) !important; box-shadow:0 0 0 1px rgba(168,85,247,.55),0 5px 14px rgba(0,0,0,.75) !important; }
  .footer-mobile .footer-item.footer-login .footer-icon i { color:#111 !important; font-size:27px !important; }

  /* LOGIN MODAL / REGISTER */
  #loginModal .modal-dialog { width:calc(100% - 24px) !important; margin:12vh auto 0 !important; }
  #loginModal .modal-content { background:#0d0d0d !important; border:1px solid #4c1d95 !important; border-radius:12px !important; }
  #loginModal .modal-header .modal-title { color:#fff !important; }
  #loginModal .modal-body .modal-body-form .form-item input { background:#070707 !important; color:#fff !important; border-color:#4a4a4a !important; }
}


/* FINAL HEADER POSITION + LIVE CHAT BEHAVIOR */
@media (max-width: 768px){
  .header-mobile__top .mobile-button--transaksi{
    transform:translateX(-10px) !important;
  }
  .header-mobile__top .mobile-button--menu{
    transform:translateX(-10px) !important;
  }

  /* Bottom navigation: uniform icon sizing; no oversized chat button/popup */
  .footer-mobile .footer-item .footer-icon{
    width:auto !important;
    height:26px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:static !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
  }
  .footer-mobile .footer-item .footer-icon i{
    font-size:20px !important;
    line-height:1 !important;
  }
  .footer-mobile .footer-item .footer-title{
    margin-top:2px !important;
    font-size:9px !important;
    line-height:1.1 !important;
  }
  .footer-mobile .footer-item.footer-login .footer-icon{
    width:auto !important;
    height:26px !important;
    top:auto !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .footer-mobile .footer-item.footer-login .footer-icon i{
    color:inherit !important;
    font-size:20px !important;
  }
}


/* MAGENTA-UNGU FINAL THEME - applied from supplied mobile theme */
:root{
 --m-primary:#8b5cf6; --m-accent:#8b5cf6; --m-deep:#4c1d95; --m-bg:#07020d; --m-card:#10051a; --m-border:#7c3aed;
}
html,body{background:#07020d!important;color:#fff!important;}
body{font-family:Arial,Helvetica,sans-serif!important;}
a{color:#8b5cf6;}
.mobile__category .category-item,.category-item{background:linear-gradient(180deg,#16071f 0%,#0b0312 100%)!important;border:1px solid #9c00ff!important;box-shadow:0 0 12px rgba(176,0,255,.22)!important;border-radius:12px!important;}
.category-item .icon img{filter:none!important;}
.mobile__popular,.popular-title{color:#8b5cf6!important;border-color:#6d28d9!important;}
.popular-title i{color:#8b5cf6!important;}
.mobile__games .games-holder{background:#10051a!important;border:1px solid #6d28d9!important;border-radius:9px!important;box-shadow:0 0 10px rgba(176,0,255,.16)!important;}
.mobile__games .games-img img{border-radius:6px!important;}
.games-name{color:#fff!important;}
.btn-custom-sm,.button-pills,.btn-custom{background:linear-gradient(90deg,#6d28d9,#8b5cf6)!important;border-color:#8b5cf6!important;color:#fff!important;box-shadow:0 0 10px rgba(139,92,246,.25)!important;}
.home-promo-fixed-v2{background:#0b0312!important;border-color:#6d28d9!important;}
.hpf-title,.hpf-card strong,.hpf-card a{color:#8b5cf6!important;}
.hpf-card{background:#10051a!important;border-color:#6d28d9!important;}
.home-footer-fixed-v2{background:linear-gradient(90deg,#09020f,#16051f)!important;border-top:1px solid #6d28d9!important;}
.home-footer-fixed-v2,.home-footer-fixed-v2 *{color:#fff!important;}
.mobile__download-bannner,.mobile-download-container{background:#0c0312!important;border-color:#6d28d9!important;}
input,select,textarea,.form-control{background:#0e0415!important;color:#fff!important;border-color:#6d28d9!important;}
input:focus,select:focus,textarea:focus,.form-control:focus{border-color:#8b5cf6!important;box-shadow:0 0 0 2px rgba(139,92,246,.15)!important;}
.deposit-mode-btn.active,.deposit-mode-btn:hover{background:linear-gradient(90deg,#6d28d9,#8b5cf6)!important;color:#fff!important;border-color:#8b5cf6!important;}
.payment-item,.transaksi-formulir,.transaksi-info,.transaksi-table-bottom{background:#10051a!important;border-color:#6d28d9!important;color:#fff!important;}
.payment-status.online{background:#8b5cf6!important;color:#fff!important;}
.text-warning{color:#8b5cf6!important;}
/* remove remaining common gold/yellow accents from theme */
[style*="#a855f7"],[style*="#a855f7"]{background:linear-gradient(90deg,#6d28d9,#8b5cf6)!important;color:#fff!important;}

/* ===== FINAL MAGENTA MOBILE NAVBAR OVERRIDE ===== */
@media (max-width: 767.98px){
  body{padding-bottom:0 !important;}
  #main-route.home-fixed-v2{padding-bottom:88px !important;}

  .footer-mobile{
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important;
    height:72px !important; min-height:72px !important;
    margin:0 !important; padding:0 0 env(safe-area-inset-bottom) !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    align-items:stretch !important;
    background:#050008 !important;
    border-top:1px solid #8b5cf6 !important;
    box-shadow:0 -2px 16px rgba(176,0,255,.28) !important;
    z-index:99999 !important;
    overflow:visible !important;
  }
  .footer-mobile .footer-item,
  .footer-mobile .footer-item:link,
  .footer-mobile .footer-item:visited{
    min-width:0 !important; width:100% !important; height:72px !important;
    margin:0 !important; padding:7px 2px 4px !important;
    display:flex !important; flex-direction:column !important;
    align-items:center !important; justify-content:center !important;
    gap:2px !important; box-sizing:border-box !important;
    color:#fff !important; background:transparent !important;
    text-decoration:none !important;
  }
  .footer-mobile .footer-item .footer-icon{
    width:28px !important; height:28px !important;
    margin:0 !important; padding:0 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    position:relative !important; top:auto !important;
    border:0 !important; background:transparent !important;
    box-shadow:none !important; transform:none !important;
  }
  .footer-mobile .footer-item .footer-icon i{
    margin:0 !important; font-size:21px !important; line-height:1 !important;
    color:#fff !important;
  }
  .footer-mobile .footer-item .footer-title{
    margin:0 !important; padding:0 !important;
    font-size:10px !important; line-height:13px !important;
    font-weight:800 !important; color:#fff !important;
    white-space:nowrap !important;
  }
  .footer-mobile .footer-item.active,
  .footer-mobile .footer-item.active .footer-title,
  .footer-mobile .footer-item.active .footer-icon i{
    color:#8b5cf6 !important;
  }
  .footer-mobile .footer-item.footer-login{
    position:relative !important; overflow:visible !important;
    background:transparent !important;
  }
  .footer-mobile .footer-item.footer-login .footer-icon{
    width:58px !important; height:58px !important;
    margin-top:-27px !important;
    margin-bottom:0 !important;
    border:2px solid #8b5cf6 !important;
    border-radius:50% !important;
    background:linear-gradient(135deg,#8b5cf6 0%,#8b5cf6 55%,#6d28d9 100%) !important;
    box-shadow:0 0 0 3px #050008,0 0 16px rgba(139,92,246,.45) !important;
    transform:none !important;
  }
  .footer-mobile .footer-item.footer-login .footer-icon i{
    color:#fff !important; font-size:25px !important;
  }
  .footer-mobile .footer-item.footer-login .footer-title{
    color:#fff !important; margin-top:0 !important;
  }
}

/* ===== HARD FINAL MOBILE NAVBAR: MAGENTA/PURPLE ===== */
@media (max-width: 767.98px){
  .footer-mobile{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:74px!important;min-height:74px!important;
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;box-sizing:border-box!important;
    background:#050008!important;border-top:1px solid #8b5cf6!important;
    box-shadow:0 -3px 18px rgba(176,0,255,.32)!important;
    z-index:2147483000!important;overflow:visible!important;
  }
  .footer-mobile .footer-item,.footer-mobile .footer-item:link,.footer-mobile .footer-item:visited{
    width:100%!important;min-width:0!important;height:74px!important;
    margin:0!important;padding:6px 2px 4px!important;box-sizing:border-box!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    gap:2px!important;color:#fff!important;background:transparent!important;text-decoration:none!important;
  }
  .footer-mobile .footer-item .footer-icon{
    width:28px!important;height:28px!important;margin:0!important;padding:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    position:relative!important;top:auto!important;transform:none!important;
    border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  }
  .footer-mobile .footer-item .footer-icon i{color:#fff!important;font-size:22px!important;line-height:1!important;margin:0!important;}
  .footer-mobile .footer-item .footer-title{
    color:#fff!important;font-size:10px!important;line-height:13px!important;font-weight:800!important;
    margin:0!important;padding:0!important;white-space:nowrap!important;max-width:none!important;
  }
  .footer-mobile .footer-item.active,.footer-mobile .footer-item.active .footer-title,.footer-mobile .footer-item.active .footer-icon i{color:#8b5cf6!important;}
  .footer-mobile .footer-item.footer-login{background:transparent!important;overflow:visible!important;}
  .footer-mobile .footer-item.footer-login .footer-icon{
    width:58px!important;height:58px!important;margin-top:-27px!important;margin-bottom:0!important;
    border:2px solid #8b5cf6!important;border-radius:50%!important;
    background:linear-gradient(135deg,#8b5cf6 0%,#8b5cf6 55%,#6d28d9 100%)!important;
    box-shadow:0 0 0 3px #050008,0 0 18px rgba(139,92,246,.5)!important;
  }
  .footer-mobile .footer-item.footer-login .footer-icon i{color:#fff!important;font-size:25px!important;}
  .footer-mobile .footer-item.footer-login .footer-title{color:#fff!important;margin-top:0!important;}
  #main-route.home-fixed-v2{padding-bottom:96px!important;}
}


/* ===== TRUE FINAL UNGU-HITAM THEME V2 ===== */
:root{
 --uh-bg:#07080c; --uh-panel:#0d0f15; --uh-panel2:#121521;
 --uh-purple:#8b5cf6; --uh-purple2:#6d28d9; --uh-border:#7c3aed;
}
html,body{background:#07080c!important;color:#f7f5ff!important;}
body,.mobile-container,#main-route{background-color:#07080c!important;}
.header,.navbar,.header__mid,.header__bottom{background:#08090d!important;border-color:rgba(139,92,246,.45)!important;}
.sidenav,.sidebar,.mobile-sidenav,.offcanvas,.menu-mobile{
 background:linear-gradient(180deg,#0f1017 0%,#090a0f 60%,#050609 100%)!important;
}
.sidenav a,.sidebar a,.mobile-sidenav a,.offcanvas a,.menu-mobile a{
 color:#f5f3ff!important;border-color:rgba(139,92,246,.20)!important;
}
.sidenav a:hover,.sidenav a.active,.sidebar a.active,.mobile-sidenav a.active{
 background:linear-gradient(90deg,rgba(109,40,217,.30),rgba(139,92,246,.08))!important;
 color:#c4b5fd!important;
}
.btn,.btn-custom,.button-pills,.btn-custom-sm{
 background:linear-gradient(135deg,#6d28d9,#8b5cf6)!important;
 border-color:#8b5cf6!important;color:#fff!important;
}
.mobile__popular,.popular-title{background:#0c0d13!important;color:#c4b5fd!important;border-color:#7c3aed!important;}
.home-auth-fixed-v2 a,.home-promo-fixed-v2 .hpf-card{
 background:linear-gradient(145deg,#15161d,#090a0f)!important;
 border-color:rgba(139,92,246,.55)!important;
}
.home-auth-fixed-v2 .hcf-icon{background:linear-gradient(145deg,#6d28d9,#8b5cf6)!important;}
.footer-mobile{background:#050609!important;border-top-color:#7c3aed!important;}
.footer-mobile .footer-item.active,.footer-mobile .footer-item.active .footer-title,
.footer-mobile .footer-item.active .footer-icon i{color:#a78bfa!important;}
.footer-mobile .footer-item.footer-login .footer-icon{
 background:linear-gradient(135deg,#6d28d9,#8b5cf6)!important;border-color:#8b5cf6!important;
}


/* ===== FINAL MOBILE BOTTOM NAVBAR — CLEAN / PROPORTIONAL ===== */
@media (max-width:767.98px){
  html,body{overflow-x:hidden!important;}
  body{padding-bottom:76px!important;}
  #main-route.home-fixed-v2{padding-bottom:82px!important;}
  .footer-mobile{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:72px!important;min-height:72px!important;
    margin:0!important;padding:0 0 env(safe-area-inset-bottom)!important;
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;box-sizing:border-box!important;
    background:#050609!important;border-top:1px solid #7c3aed!important;
    box-shadow:0 -3px 16px rgba(0,0,0,.55)!important;
    z-index:2147483000!important;overflow:visible!important;
  }
  .footer-mobile .footer-item,.footer-mobile .footer-item:link,.footer-mobile .footer-item:visited{
    width:100%!important;min-width:0!important;height:72px!important;margin:0!important;
    padding:6px 2px 4px!important;display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;gap:2px!important;
    box-sizing:border-box!important;background:transparent!important;color:#fff!important;text-decoration:none!important;
  }
  .footer-mobile .footer-item .footer-icon{
    width:25px!important;height:25px!important;margin:0!important;padding:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    position:relative!important;top:auto!important;transform:none!important;border:0!important;
    border-radius:0!important;background:transparent!important;box-shadow:none!important;
  }
  .footer-mobile .footer-item .footer-icon i{
    margin:0!important;color:#fff!important;font-size:20px!important;line-height:1!important;
  }
  .footer-mobile .footer-item .footer-title{
    margin:0!important;padding:0!important;color:#fff!important;font-size:9px!important;
    line-height:12px!important;font-weight:800!important;white-space:nowrap!important;
  }
  .footer-mobile .footer-item.active,.footer-mobile .footer-item.active .footer-title,
  .footer-mobile .footer-item.active .footer-icon i{color:#a78bfa!important;}
  .footer-mobile .footer-item.footer-login{position:relative!important;overflow:visible!important;background:transparent!important;}
  .footer-mobile .footer-item.footer-login .footer-icon{
    width:52px!important;height:52px!important;margin-top:-18px!important;margin-bottom:0!important;
    border:2px solid #8b5cf6!important;border-radius:50%!important;
    background:linear-gradient(135deg,#6d28d9,#8b5cf6)!important;
    box-shadow:0 0 0 3px #050609,0 4px 14px rgba(109,40,217,.42)!important;
  }
  .footer-mobile .footer-item.footer-login .footer-icon i{color:#fff!important;font-size:22px!important;}
  .footer-mobile .footer-item.footer-login .footer-title{color:#fff!important;margin-top:0!important;}
}

/* ===== NAVBAR MASUK — ICON PAS DENGAN LABEL ===== */
@media (max-width:767.98px){
  .footer-mobile .footer-item.footer-login .footer-icon{
    width:25px!important;
    height:25px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .footer-mobile .footer-item.footer-login .footer-icon i{
    color:#fff!important;
    font-size:20px!important;
    line-height:1!important;
  }
  .footer-mobile .footer-item.footer-login .footer-title{
    margin:0!important;
    font-size:9px!important;
    line-height:12px!important;
    color:#fff!important;
  }
  .footer-mobile .footer-item.footer-login{
    padding:6px 2px 4px!important;
    gap:2px!important;
    overflow:visible!important;
  }
}


/* FINAL PATCH: SALDO HEADER LEBIH RINGKAS - JANGAN UBAH RTP/NAVBAR */
@media (max-width: 768px){
  .header-mobile__top{
    padding-left:7px !important;
    padding-right:7px !important;
  }

  .header-mobile__top .mobile-button{
    gap:5px !important;
    align-items:center !important;
    flex-shrink:0 !important;
  }

  /* Tombol refresh saldo */
  .header-mobile__top .mobile-button > a[name="refreshWallet"]{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
    height:32px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    flex:0 0 28px !important;
  }
  .header-mobile__top .mobile-button > a[name="refreshWallet"] i{
    font-size:19px !important;
    line-height:1 !important;
  }

  /* Kotak saldo: kecil, tetap terbaca */
  .header-mobile__top .mobile-button .mobile-button--transaksi{
    width:112px !important;
    min-width:112px !important;
    max-width:112px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    box-sizing:border-box !important;
    padding:5px 7px !important;
    margin:0 !important;
    gap:3px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    border-radius:9px !important;
  }
  .header-mobile__top .mobile-button .mobile-button--transaksi > i{
    font-size:15px !important;
    line-height:1 !important;
    flex:0 0 auto !important;
  }
  .header-mobile__top .mobile-button .mobile-button--transaksi .wallet-amount{
    display:flex !important;
    align-items:center !important;
    gap:3px !important;
    min-width:0 !important;
    max-width:100% !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:800 !important;
    overflow:hidden !important;
  }
  .header-mobile__top .mobile-button .mobile-button--transaksi .wallet-amount span{
    font-size:11px !important;
    line-height:1 !important;
    font-weight:900 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Menu tetap kecil dan tidak ikut berubah */
  .header-mobile__top .mobile-button .mobile-button--menu{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .header-mobile__top .mobile-button .mobile-button--menu i{
    font-size:22px !important;
  }
}
.mobile-button.transaksi {
    padding: 5px 10px !important;
    height: 40px !important;
    min-height: 40px !important;
    width: auto !important;
    min-width: 0 !important;
    border-radius: 11px !important;
    flex: 0 0 auto !important;
}

.mobile-button.transaksi .wallet-amount {
    font-size: 13px !important;
}

.mobile-button.transaksi .fa-coins {
    font-size: 15px !important;
}

#refreshWallet {
    font-size: 17px !important;
    margin: 0 5px !important;
}