/* =========================================================
   MODERN UNIVERSAL UI — THEME SAFE
   Presentation only. Uses the active theme variables.
   Does not alter database/business logic.
========================================================= */
:root{
  --mu-accent: var(--secondary-color, #8b5cf6);
  --mu-primary: var(--primary-color, #151515);
  --mu-surface: var(--c-black, #0c0c0c);
  --mu-page: var(--background-page, #111);
  --mu-text: var(--page-text, #fff);
  --mu-border: var(--secondary-color, #8b5cf6);
  --mu-radius: 16px;
  --mu-shadow: 0 12px 30px rgba(0,0,0,.24);
  --mu-shadow-soft: 0 6px 18px rgba(0,0,0,.18);
}

/* Never let the universal layer recolor unrelated Home links/buttons. */
.main-content.transaksi,
.main-content.register{ color:var(--mu-text); }

/* =========================
   HOME — KEEP ORIGINAL STRUCTURE
========================= */
.main-content.home{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding-bottom:18px;
}
.main-content.home .home__slider{
  margin:10px auto 14px;
  border:1px solid var(--mu-accent);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--mu-shadow);
  background:var(--mu-surface);
}
.main-content.home .home__slider .swiper-slide img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.main-content.home .home__jackpot{
  margin:10px auto 14px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--mu-accent);
  box-shadow:var(--mu-shadow-soft);
}
.main-content.home .jackpot-gif{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.main-content.home .jackpot-amount{
  font-weight:900;
  letter-spacing:2px;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.main-content.home .mobile__category .category-container{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.main-content.home .mobile__category .category-item{
  min-height:92px;
  padding:12px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid var(--mu-accent);
  border-radius:16px;
  background:var(--mu-primary);
  box-shadow:var(--mu-shadow-soft);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.main-content.home .mobile__category a{
  text-decoration:none;
}
.main-content.home .mobile__category .category-item:hover{
  transform:translateY(-3px);
  border-color:var(--mu-accent);
  box-shadow:0 12px 26px rgba(0,0,0,.28);
}
.main-content.home .mobile__category .category-item .icon{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
}
.main-content.home .mobile__category .category-item .icon img{
  max-width:38px;
  max-height:38px;
}
.main-content.home .mobile__category .category-item .name{
  font-size:12px;
  font-weight:800;
  line-height:1.15;
  color:var(--mu-text);
}
.main-content.home .mobile__popular{
  margin-top:16px;
}
.main-content.home .popular-title{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-top:1px solid var(--mu-accent);
  border-bottom:1px solid var(--mu-accent);
  background:var(--mu-primary);
  color:var(--mu-text);
  font-weight:900;
  letter-spacing:.3px;
}
.main-content.home .games-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:14px 0 6px;
}
.main-content.home .games-holder{
  min-width:0;
  padding:8px;
  border:1px solid var(--mu-accent);
  border-radius:14px;
  background:var(--mu-primary);
  box-shadow:var(--mu-shadow-soft);
}
.main-content.home .games-img{
  overflow:hidden;
  border-radius:10px;
}
.main-content.home .games-img img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1.35/1;
  object-fit:cover;
  transition:transform .2s ease;
}
.main-content.home .games-holder:hover .games-img img{
  transform:scale(1.035);
}
.main-content.home .games-name{
  padding:7px 2px 2px;
  text-align:center;
  font-weight:800;
  font-size:12px;
  line-height:1.2;
  color:var(--mu-text);
}
.main-content.home .btn-custom-sm{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:8px 18px;
  border:1px solid var(--mu-accent);
  border-radius:12px;
  background:var(--mu-primary);
  color:var(--mu-text);
  font-weight:800;
  text-decoration:none;
  transition:transform .18s ease, filter .18s ease;
}
.main-content.home .btn-custom-sm:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}
.main-content.home .mobile__download-bannner{
  margin-top:14px;
}
.main-content.home .mobile-download-container{
  border:1px solid var(--mu-accent);
  border-radius:14px;
  background:var(--mu-primary);
}

/* =========================
   REGISTER
========================= */
.main-content.register .register__container{
  border:1px solid var(--mu-accent);
  border-radius:var(--mu-radius);
  overflow:hidden;
  background:var(--mu-page);
  box-shadow:var(--mu-shadow);
}
.main-content.register .page-header{
  padding:16px 18px;
  background:var(--mu-primary);
  color:var(--header-text,var(--mu-text));
  border-bottom:1px solid var(--mu-accent);
  font-size:20px;
  font-weight:900;
}
.main-content.register .register-form{
  padding:20px;
}
.main-content.register .register__note,
.main-content.register .register__notemail{
  background:var(--mu-surface);
  border:1px solid var(--mu-accent);
  border-left:4px solid var(--mu-accent);
  border-radius:12px;
  padding:13px 15px;
  margin-bottom:14px;
}
.main-content.register .form-group{
  margin-bottom:12px;
}
.main-content.register label{
  font-weight:800;
  color:var(--mu-text);
}
.main-content.register input,
.main-content.register select,
.main-content.register textarea,
.main-content.register .form-control{
  min-height:48px;
  width:100%;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:var(--mu-surface) !important;
  color:var(--mu-text) !important;
  box-shadow:none;
}
.main-content.register input:focus,
.main-content.register select:focus,
.main-content.register textarea:focus,
.main-content.register .form-control:focus{
  border-color:var(--mu-accent) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.06),0 0 18px rgba(0,0,0,.12);
  outline:none;
}
.main-content.register button[type="submit"],
.main-content.register input[type="submit"]{
  min-height:50px;
  border:1px solid var(--mu-accent) !important;
  border-radius:13px !important;
  background:var(--mu-accent) !important;
  color:var(--secondary-text,#000) !important;
  font-weight:900;
}

/* =========================
   DEPOSIT / WITHDRAW
========================= */
.main-content.transaksi{
  padding:12px 0 24px;
}
.main-content.transaksi .component-tabs{
  display:flex;
  gap:8px;
  padding:6px;
  margin-bottom:12px;
  border:1px solid var(--mu-accent);
  border-radius:16px;
  background:var(--mu-surface);
}
.main-content.transaksi .component-tabs .nav-item{
  flex:1 1 0;
}
.main-content.transaksi .component-tabs .button-pills{
  width:100%;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent !important;
  border-radius:12px !important;
  background:transparent;
  color:var(--mu-text);
  font-weight:900;
}
.main-content.transaksi .component-tabs .button-pills.active{
  background:var(--mu-accent) !important;
  color:var(--secondary-text,#000) !important;
  border-color:var(--mu-accent) !important;
}
.main-content.transaksi .deposit-mode{
  display:flex;
  gap:9px;
  margin:0 0 14px;
}
.main-content.transaksi .deposit-mode-btn{
  flex:1;
  min-height:54px;
  border:1px solid var(--mu-accent) !important;
  border-radius:13px !important;
  background:var(--mu-surface) !important;
  color:var(--mu-text) !important;
  font-weight:900;
  cursor:pointer;
  transition:transform .18s ease,filter .18s ease,background .18s ease;
}
.main-content.transaksi .deposit-mode-btn.active{
  background:var(--mu-accent) !important;
  color:var(--secondary-text,#000) !important;
}
.main-content.transaksi .deposit-mode-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
}
.main-content.transaksi .transaksi-form{
  width:100%;
}
.main-content.transaksi .transaksi-formulir,
.main-content.transaksi .payment-item,
.main-content.transaksi .transaksi-info,
.main-content.transaksi .transaksi-table-bottom{
  border:1px solid var(--mu-accent);
  border-radius:16px;
  background:var(--mu-page);
  box-shadow:var(--mu-shadow-soft);
  overflow:hidden;
}
.main-content.transaksi .formulir-title,
.main-content.transaksi .info-header,
.main-content.transaksi .form-title{
  background:var(--mu-primary) !important;
  color:var(--header-text,var(--mu-text)) !important;
  border-bottom:1px solid var(--mu-accent);
  font-weight:900;
}
.main-content.transaksi .formulir-title{
  padding:16px 18px;
  font-size:18px;
}
.main-content.transaksi .formulir-form{
  padding:18px;
}
.main-content.transaksi .note_addbank{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.16);
  border-left:4px solid var(--mu-accent);
  border-radius:12px;
  background:var(--mu-surface) !important;
  color:var(--mu-text) !important;
  line-height:1.55;
}
.main-content.transaksi .text-white{
  background:var(--mu-surface) !important;
  color:var(--mu-text) !important;
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  margin-bottom:14px;
}
.main-content.transaksi .text-white .text-warning{
  color:var(--mu-accent) !important;
}
.main-content.transaksi label,
.main-content.transaksi .formulir-desc{
  color:var(--mu-text);
  font-weight:700;
}
.main-content.transaksi input,
.main-content.transaksi select,
.main-content.transaksi textarea,
.main-content.transaksi .form-control{
  min-height:48px;
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:12px !important;
  background:var(--mu-surface) !important;
  color:var(--mu-text) !important;
}
.main-content.transaksi input:focus,
.main-content.transaksi select:focus,
.main-content.transaksi textarea:focus,
.main-content.transaksi .form-control:focus{
  border-color:var(--mu-accent) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
  outline:none;
}
.main-content.transaksi select option{
  background:var(--mu-surface);
  color:var(--mu-text);
}
.main-content.transaksi #btnLanjut,
.main-content.transaksi #btnDeposit,
.main-content.transaksi #submit-withdraw{
  width:100%;
  min-height:50px;
  border:1px solid var(--mu-accent) !important;
  border-radius:13px !important;
  background:var(--mu-accent) !important;
  color:var(--secondary-text,#000) !important;
  font-weight:900 !important;
  box-shadow:var(--mu-shadow-soft);
}
.main-content.transaksi #btnLanjut:hover,
.main-content.transaksi #btnDeposit:hover,
.main-content.transaksi #submit-withdraw:hover{
  filter:brightness(1.07);
  transform:translateY(-1px);
}
.main-content.transaksi .bankOption .card{
  border:1px solid var(--mu-accent);
  border-radius:14px;
  overflow:hidden;
  background:var(--mu-surface);
}
.main-content.transaksi .bankOption .card-header{
  background:var(--mu-surface) !important;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.main-content.transaksi .bankOption .card-body{
  background:var(--mu-surface) !important;
  color:var(--mu-text) !important;
}
.main-content.transaksi #nominalView{
  background:var(--mu-accent) !important;
  color:var(--secondary-text,#000) !important;
  border-radius:10px 10px 0 0;
  font-weight:900;
}
.main-content.transaksi .payment-item{
  background:var(--mu-surface);
  transition:transform .18s ease,box-shadow .18s ease;
}
.main-content.transaksi .payment-item:hover{
  transform:translateY(-2px);
}
.main-content.transaksi .transaksi-info{
  margin-top:14px;
}
.main-content.transaksi .info-header{
  padding:13px 16px;
}
.main-content.transaksi .info-content{
  padding:14px 16px;
  color:var(--mu-text);
}
.main-content.transaksi .transaksi-table-bottom{
  margin-top:14px;
}
.main-content.transaksi table{
  color:var(--mu-text);
}
.main-content.transaksi table thead th{
  background:var(--mu-primary);
  color:var(--header-text,var(--mu-text));
  border-color:rgba(255,255,255,.12);
}
.main-content.transaksi table td{
  border-color:rgba(255,255,255,.10);
}

/* Proof upload is mode-dependent; JS controls display. */
#proofUploadArea{ transition:opacity .18s ease; }

/* Desktop home should not show the mobile APK banner. */
@media (min-width:769px){
  .main-content.home .mobile__download-bannner{ display:none; }
}

/* Mobile */
@media (max-width:768px){
  .main-content.home{ padding-left:8px; padding-right:8px; }
  .main-content.home .home__slider{ margin-top:6px; border-radius:14px; }
  .main-content.home .home__jackpot{ border-radius:14px; }
  .main-content.home .mobile__category .category-container{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
  }
  .main-content.home .mobile__category .category-item{
    min-height:82px;
    padding:8px 4px;
    border-radius:13px;
  }
  .main-content.home .mobile__category .category-item .icon{
    width:38px;
    height:38px;
  }
  .main-content.home .mobile__category .category-item .icon img{
    max-width:31px;
    max-height:31px;
  }
  .main-content.home .mobile__category .category-item .name{
    font-size:9px;
  }
  .main-content.home .games-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .main-content.home .games-holder{ padding:5px; border-radius:10px; }
  .main-content.home .games-name{ font-size:9px; }
  .main-content.transaksi{ padding:8px 8px 20px; }
  .main-content.transaksi .component-tabs{ gap:6px; padding:5px; }
  .main-content.transaksi .component-tabs .button-pills{ min-height:48px; font-size:12px; }
  .main-content.transaksi .deposit-mode{ gap:7px; }
  .main-content.transaksi .deposit-mode-btn{ min-height:52px; font-size:11px; padding:8px 5px; }
  .main-content.transaksi .formulir-form{ padding:13px; }
  .main-content.transaksi .formulir-title{ padding:13px; font-size:15px; }
  .main-content.transaksi .form-group .row{ margin-left:0; margin-right:0; }
  .main-content.transaksi .form-group [class*="col-"]{
    width:100%;
    max-width:100%;
    padding-left:0;
    padding-right:0;
    margin-bottom:7px;
  }
  .main-content.transaksi .form-group label{ display:block; margin-bottom:6px; }
  .main-content.register .register-form{ padding:14px; }
}
@media (prefers-reduced-motion:reduce){
  .main-content.home *,
  .main-content.transaksi *,
  .main-content.register *{ transition:none !important; }
}


/* DAFTAR MODERN V2 — deliberately high-specificity so theme CSS cannot hide it */
.main-content.register.post .register__container{
  width:calc(100% - 20px)!important; max-width:760px!important; margin:20px auto!important;
  padding:0!important; border:2px solid var(--tx-accent,var(--mu-accent,#1597ff))!important;
  border-radius:20px!important; overflow:hidden!important;
  background:var(--tx-page,var(--mu-page,#071b33))!important;
  box-shadow:0 16px 45px rgba(0,0,0,.28)!important;
}
.main-content.register.post .register__container .page-header{
  margin:0!important; padding:20px 16px!important; text-align:center!important;
  background:var(--tx-primary,var(--mu-primary,#17178f))!important;
  color:var(--tx-header-text,var(--header-text,#fff))!important;
  border:0!important; border-bottom:3px solid var(--tx-accent,var(--mu-accent,#1597ff))!important;
  font-size:clamp(23px,5vw,31px)!important; font-weight:900!important;
}
.main-content.register.post #register-form{padding:20px!important;margin:0!important}
.main-content.register.post #register-form .register-form{padding:0!important}
.main-content.register.post #register-form .register__note,
.main-content.register.post #register-form .register__notemail{
  padding:16px!important; margin:0 0 18px!important; border:2px solid var(--tx-accent,var(--mu-accent,#1597ff))!important;
  border-left:6px solid var(--tx-accent,var(--mu-accent,#1597ff))!important;
  border-radius:15px!important; background:var(--tx-primary,var(--mu-surface,#17178f))!important;
  color:var(--tx-text,var(--mu-text,#fff))!important;
}
.main-content.register.post #register-form .form-group{margin:0 0 16px!important}
.main-content.register.post #register-form .form-group>.row{margin:0!important}
.main-content.register.post #register-form label{
  display:block!important; padding:0 0 7px!important; color:var(--tx-text,var(--mu-text,#fff))!important;
  font-size:14px!important; font-weight:800!important;
}
.main-content.register.post #register-form .form-control{
  width:100%!important; height:50px!important; min-height:50px!important; box-sizing:border-box!important;
  padding:10px 14px!important; border:2px solid var(--tx-accent,var(--mu-accent,#1597ff))!important;
  border-radius:13px!important; background:var(--tx-primary,var(--mu-primary,#17178f))!important;
  color:var(--tx-text,var(--mu-text,#fff))!important; outline:none!important;
}
.main-content.register.post #register-form .form-control::placeholder{opacity:.65!important}
.main-content.register.post #register-form .form-control:focus{
  border-color:var(--tx-accent,var(--mu-accent,#1597ff))!important;
  box-shadow:0 0 0 4px rgba(21,151,255,.16)!important;
}
.main-content.register.post #register-form .button-submit,
.main-content.register.post #register-form input[type=submit]{
  width:100%!important; min-height:52px!important; border:0!important; border-radius:13px!important;
  background:var(--tx-accent,var(--mu-accent,#1597ff))!important;
  color:var(--tx-accent-text,#fff)!important; font-weight:900!important; font-size:16px!important;
}
@media(max-width:768px){
 .main-content.register.post .register__container{width:calc(100% - 16px)!important;margin:12px auto!important;border-radius:16px!important}
 .main-content.register.post #register-form{padding:15px!important}
 .main-content.register.post #register-form .form-group>.row{display:block!important}
 .main-content.register.post #register-form .form-group [class*=col-lg-4],
 .main-content.register.post #register-form .form-group [class*=col-lg-8]{width:100%!important;max-width:100%!important;padding:0!important}
}