/* MpoNusa reference theme - mobile visual layer only */
:root{
  --ref-lime:#b7ff00;
  --ref-lime-2:#9fe500;
  --ref-green:#77a900;
  --ref-dark:#1f2022;
  --ref-dark-2:#292a2c;
  --ref-black:#111214;
  --ref-white:#fff;
}
@media (max-width:767.98px){
  html,body{background:var(--ref-dark)!important;color:#fff!important;overflow-x:hidden!important;}
  body{font-family:Arial,Helvetica,sans-serif!important;}
  #main-route{background:var(--ref-dark)!important;min-height:100vh!important;padding-bottom:76px!important;}

  /* Header: ticker above logo/actions, like the reference. */
  .header-mobile{display:flex!important;flex-direction:column-reverse!important;background:#24272b!important;border-bottom:1px solid #3b3d40!important;box-shadow:0 2px 8px rgba(0,0,0,.45)!important;}
  .header-mobile__marquee{order:2!important;height:43px!important;min-height:43px!important;background:var(--ref-lime)!important;color:#080808!important;border:0!important;display:flex!important;align-items:center!important;padding:0 12px!important;overflow:hidden!important;}
  .header-mobile__marquee i{color:#080808!important;font-size:18px!important;margin-right:10px!important;}
  .header-mobile__marquee .marquee{color:#080808!important;font-weight:800!important;font-size:15px!important;line-height:43px!important;}
  .header-mobile__marquee a{display:none!important;}
  .header-mobile__top{order:1!important;height:81px!important;min-height:81px!important;padding:0 16px!important;background:#25282c!important;border:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;box-sizing:border-box!important;}
  .header-mobile__top .mobile-logo{width:39%!important;max-width:175px!important;min-width:120px!important;display:flex!important;align-items:center!important;}
  .header-mobile__top .mobile-logo img{width:100%!important;height:auto!important;max-height:54px!important;object-fit:contain!important;}
  .header-mobile__top .mobile-button{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;flex:1!important;min-width:0!important;}
  .header-mobile__top .mobile-button--login,.header-mobile__top .mobile-button--register{height:38px!important;min-width:0!important;width:72px!important;flex:0 0 72px!important;padding:0 6px!important;border:0!important;border-radius:8px!important;background:var(--ref-lime)!important;color:#090909!important;font-size:14px!important;line-height:1!important;font-weight:900!important;display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;box-shadow:none!important;}
  .header-mobile__top .mobile-button--menu{width:54px!important;min-width:54px!important;height:55px!important;border:0!important;background:transparent!important;color:#aeb1b7!important;border-radius:10px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
  .header-mobile__top .mobile-button--menu i{font-size:36px!important;line-height:1!important;}
  .header-mobile__top .mobile-button--transaksi{background:var(--ref-lime)!important;color:#111!important;border-radius:10px!important;}

  /* Main banner spacing. */
  .main-content.home{background:var(--ref-dark)!important;}
  .home__slider{padding:0!important;margin:0!important;background:var(--ref-dark)!important;}
  .home__slider .main-slider{margin:0!important;padding:0!important;}
  .home__slider .swiper-slide img{width:100%!important;height:auto!important;display:block!important;border-radius:0!important;object-fit:cover!important;}

  /* Three wide category tiles: Slot / Live Game / Casino. */
  .mobile__category{background:var(--ref-dark)!important;border:0!important;padding:38px 28px 12px!important;margin:0!important;}
  .mobile__category .container{padding:0!important;width:100%!important;max-width:none!important;}
  .mobile__category .category-container{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;width:100%!important;padding:0!important;margin:0!important;}
  .mobile__category .category-container>a{display:block!important;width:auto!important;margin:0!important;padding:0!important;min-width:0!important;}
  .mobile__category .category-container>a:nth-child(n+4){display:none!important;}
  .mobile__category .category-item{height:112px!important;min-height:112px!important;border:0!important;border-radius:0!important;padding:0!important;margin:0!important;background:#070807!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;position:relative!important;}
  .mobile__category .category-container>a + a .category-item{border-left:3px solid var(--ref-lime)!important;}
  .mobile__category .category-item:before,.mobile__category .category-item:after{content:none!important;}
  .mobile__category .category-item .icon{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;overflow:hidden!important;}
  .mobile__category .category-item .icon img{width:115%!important;height:100%!important;max-width:none!important;object-fit:cover!important;opacity:.88!important;filter:none!important;transform:translateX(10%)!important;}
  .mobile__category .category-item .name{position:relative!important;z-index:3!important;width:100%!important;margin:0!important;padding:0 7px!important;color:#fff!important;text-shadow:0 2px 5px #000!important;font-size:15px!important;line-height:1!important;font-weight:900!important;text-align:left!important;text-transform:uppercase!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .mobile__category .category-container>a:nth-child(2) .category-item .icon img{transform:translateX(12%)!important;}
  .mobile__category .category-container>a:nth-child(3) .category-item .icon img{transform:translateX(12%)!important;}
  .mobile__category .category-container>a:nth-child(2) .category-item .name{font-size:14px!important;}

  /* Popular section becomes a single lime panel. */
  .mobile__popular{margin:24px 0 0!important;padding:0!important;border:0!important;border-radius:20px 20px 0 0!important;background:linear-gradient(180deg,var(--ref-lime) 0%,#a8e900 100%)!important;box-shadow:none!important;overflow:hidden!important;}
  .mobile__popular .container{padding:0 28px!important;}
  .mobile__popular .popular-title{height:76px!important;min-height:76px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;background:transparent!important;color:#111!important;border:0!important;font-size:18px!important;font-weight:900!important;text-transform:uppercase!important;}
  .mobile__popular .popular-title i{display:none!important;}
  .mobile__popular .popular-title span{font-weight:900!important;color:#111!important;}
  .mobile__popular .popular-title span:after{content:none!important;}
  .mobile__popular .popular-title:after{content:'Tampilkan Lainnya';display:flex;align-items:center;justify-content:center;height:38px;padding:0 17px;border:2px solid #111;border-radius:11px;color:#111;font-size:13px;font-weight:800;text-transform:none;}
  .mobile__games{margin:0!important;padding:0 28px 32px!important;background:linear-gradient(180deg,#a8e900 0%,#77a900 100%)!important;border:0!important;border-radius:0 0 20px 20px!important;}
  .mobile__games .container{padding:0!important;width:100%!important;max-width:none!important;}
  .mobile__games .games-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:28px 20px!important;padding:0!important;margin:0!important;}
  .mobile__games .games-holder{height:auto!important;min-height:0!important;width:100%!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;display:block!important;}
  .mobile__games .games-img{width:100%!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important;background:#333!important;border:0!important;border-radius:0!important;overflow:hidden!important;aspect-ratio:1.42/1!important;}
  .mobile__games .games-img img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border:0!important;border-radius:0!important;}
  .mobile__games .games-name{height:34px!important;min-height:34px!important;margin:9px 0 0!important;color:#fff!important;font-size:12px!important;line-height:17px!important;font-weight:800!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-shadow:0 1px 2px rgba(0,0,0,.35)!important;}
  .mobile__games .games-button{display:none!important;}

  /* All internal pages use the same dark/lime language. */
  .main-content:not(.home),#main-route>.main-content{background:var(--ref-dark)!important;color:#fff!important;}
  .register__container,.event__container,.promo__container,.promotion-container,.game__container,.transaksi__container,.profile__container{background:#303133!important;border-color:#3b3d40!important;color:#fff!important;border-radius:18px!important;box-shadow:none!important;}
  .page-header,.register__container .page-header{color:var(--ref-lime)!important;background:transparent!important;border:0!important;font-weight:900!important;text-transform:uppercase!important;}
  .register__note,.register__notemail,.note__content{background:#242526!important;color:#fff!important;border:0!important;}
  .main-content.register.post #register-form label,.main-content.register.post #register-form .form-group label{color:#fff!important;font-size:16px!important;font-weight:800!important;}
  .main-content.register.post #register-form .form-control,.main-content.register.post #register-form select,.main-content.register.post #register-form textarea{background:#fff!important;color:#616870!important;-webkit-text-fill-color:#616870!important;border:2px solid #c7c9cc!important;border-radius:7px!important;min-height:56px!important;height:56px!important;font-weight:600!important;}
  .main-content.register.post #register-form .form-control::placeholder{color:#727980!important;-webkit-text-fill-color:#727980!important;}
  .main-content.register.post #register-form .btn,.main-content.register.post #register-form button,.main-content.register.post #register-form input[type=submit]{background:var(--ref-lime)!important;color:#090909!important;border:0!important;border-radius:9px!important;font-weight:900!important;min-height:56px!important;}

  /* Login modal. */
  #loginModal .modal-content{background:#303133!important;color:#fff!important;border:0!important;border-radius:18px!important;box-shadow:0 15px 50px rgba(0,0,0,.7)!important;}
  #loginModal .close{background:#24272b!important;color:#fff!important;border:0!important;border-radius:50%!important;}
  #loginModal .modal-title,#loginModal .lgoboss-login-subtitle{color:#fff!important;}
  #loginModal .form-item .item-title{color:#fff!important;}
  #loginModal .form-item input{background:#fff!important;color:#6d7379!important;border:0!important;border-radius:7px!important;}
  #loginModal .form-button .button-login{background:var(--ref-lime)!important;color:#090909!important;border:0!important;border-radius:9px!important;box-shadow:none!important;}
  #loginModal a{color:var(--ref-lime)!important;}

  /* Side menu: lime tiles like the reference. */
  .sidenav{background:#303133!important;color:#fff!important;}
  .sidenav__header{background:#303133!important;}
  .sidenav__header-user-logo img{max-width:180px!important;}
  .sidenav__list ul{background:transparent!important;}
  .sidenav__list ul a{color:#111!important;}
  .sidenav__list ul li{background:linear-gradient(180deg,var(--ref-lime) 0%,#8dc800 100%)!important;border:0!important;color:#111!important;border-radius:14px!important;box-shadow:0 4px 0 #5c7900,0 8px 14px rgba(0,0,0,.3)!important;}
  .sidenav__list ul li i,.sidenav__list ul li span{color:#111!important;}
  .sidenav__list ul li.active{background:linear-gradient(180deg,#c5ff29 0%,var(--ref-lime-2) 100%)!important;}
  .header-flag{background:#25272a!important;color:#fff!important;border:1px solid #3d3f42!important;border-radius:10px!important;}
  .header-flag span{color:#fff!important;}

  /* Exact-looking fixed bottom navigation from the reference. */
  .footer-mobile.reference-bottom-nav{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:9999!important;height:86px!important;min-height:86px!important;padding:7px 4px 5px!important;background:#303133!important;border-top:1px solid #4a4c4f!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:0!important;box-sizing:border-box!important;box-shadow:0 -5px 20px rgba(0,0,0,.25)!important;}
  .reference-bottom-nav .footer-item,.reference-bottom-nav .footer-item:link,.reference-bottom-nav .footer-item:visited{height:100%!important;min-width:0!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;color:#fff!important;text-decoration:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;}
  .reference-bottom-nav .footer-icon{height:43px!important;min-height:43px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;}
  .reference-bottom-nav .footer-icon i{font-size:34px!important;line-height:1!important;color:#fff!important;}
  .reference-bottom-nav .footer-title{margin:0!important;color:#fff!important;font-size:13px!important;line-height:18px!important;font-weight:800!important;white-space:nowrap!important;}
  .reference-bottom-nav .footer-item.active .footer-icon i,.reference-bottom-nav .footer-item.active .footer-title{color:var(--ref-lime)!important;}
  .reference-bottom-nav .footer-item:active{transform:scale(.97)!important;}

  /* Prevent old purple inline rules from leaking into the new palette. */
  [style*="#b7ff00"],[style*="#b7ff00"],[style*="#7fae00"],[style*="#9fe500"],[style*="#d7ff66"]{border-color:var(--ref-lime)!important;}
  [style*="#b7ff00"],[style*="#b7ff00"],[style*="#7fae00"]{background:var(--ref-lime)!important;color:#090909!important;}
}


/* CATEGORY LOGO FINAL - new neon icons */
@media (max-width: 768px){
  .mobile__category .category-item{
    height:112px!important;min-height:112px!important;
    display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:flex-end!important;
    position:relative!important;overflow:hidden!important;
  }
  .mobile__category .category-item .icon{
    position:absolute!important;top:8px!important;left:0!important;right:0!important;bottom:auto!important;
    width:100%!important;height:68px!important;margin:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    overflow:visible!important;
  }
  .mobile__category .category-item .icon img{
    display:block!important;width:68px!important;height:62px!important;
    max-width:68px!important;max-height:62px!important;
    object-fit:contain!important;object-position:center!important;
    opacity:1!important;filter:none!important;transform:none!important;
  }
  .mobile__category .category-item .name{
    position:relative!important;z-index:3!important;width:100%!important;
    margin:0!important;padding:0 3px 10px!important;
    color:#fff!important;text-shadow:0 2px 5px #000!important;
    font-size:14px!important;line-height:16px!important;font-weight:900!important;
    text-align:center!important;text-transform:uppercase!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
}

/* FINAL CATEGORY LOGO + LABEL ALIGNMENT */
@media(max-width:768px){
 #main-route .mobile__category .category-item{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;height:112px!important;min-height:112px!important;padding:0 3px 9px!important;overflow:hidden!important;box-sizing:border-box!important;}
 #main-route .mobile__category .category-item .icon{position:absolute!important;top:7px!important;left:0!important;right:0!important;bottom:25px!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;z-index:1!important;}
 #main-route .mobile__category .category-item .icon img{display:block!important;width:56px!important;height:56px!important;max-width:56px!important;max-height:56px!important;object-fit:contain!important;object-position:center!important;opacity:1!important;transform:none!important;filter:none!important;}
 #main-route .mobile__category .category-item .name{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;z-index:5!important;width:100%!important;height:20px!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;text-shadow:0 2px 4px #000!important;font-size:12px!important;line-height:20px!important;font-weight:900!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important;}
 #main-route .mobile__category .category-container>a:nth-child(2) .category-item .name{font-size:11px!important;}
}
