/* =========================================================
   MODERN TRANSACTIONS UI - THEME SAFE
   Presentation only. No PHP/session/database changes.
   Uses the active theme's existing CSS variables.
========================================================= */
:root{
  --tx-accent: var(--secondary-color, #8b5cf6);
  --tx-accent-text: var(--secondary-text, #111);
  --tx-primary: var(--primary-color, #171717);
  --tx-page: var(--background-page, #111);
  --tx-text: var(--page-text, #fff);
  --tx-header-text: var(--header-text, var(--page-text, #fff));
  --tx-radius: 16px;
  --tx-border: var(--secondary-color, #8b5cf6);
  --tx-shadow: 0 12px 30px rgba(0,0,0,.20);
  --tx-shadow-soft: 0 6px 18px rgba(0,0,0,.16);
}

/* Main transaction tabs */
.main-content.transaksi .component-tabs{
  padding:6px;
  gap:7px;
  border:1px solid var(--tx-border) !important;
  border-radius:var(--tx-radius) !important;
  background:var(--tx-page) !important;
  box-shadow:var(--tx-shadow-soft);
}
.main-content.transaksi .component-tabs .button-pills{
  min-height:52px;
  border-radius:12px !important;
  color:var(--tx-text) !important;
  background:transparent !important;
  font-weight:800;
  transition:.2s ease;
}
.main-content.transaksi .component-tabs .button-pills.active{
  background:var(--tx-accent) !important;
  color:var(--tx-accent-text) !important;
  box-shadow:0 5px 16px rgba(0,0,0,.16);
}

/* Deposit mode */
.main-content.transaksi .deposit-mode{
  display:flex;
  gap:9px;
  margin:0 0 14px;
}
.main-content.transaksi .deposit-mode-btn{
  min-height:56px;
  border:1px solid var(--tx-border) !important;
  border-radius:14px !important;
  background:var(--tx-primary) !important;
  color:var(--tx-text) !important;
  box-shadow:var(--tx-shadow-soft);
  font-weight:900;
  letter-spacing:.1px;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.main-content.transaksi .deposit-mode-btn.active{
  background:var(--tx-accent) !important;
  color:var(--tx-accent-text) !important;
  box-shadow:0 7px 20px rgba(0,0,0,.20);
}
.main-content.transaksi .deposit-mode-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}

/* Cards / form */
.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(--tx-border) !important;
  border-radius:var(--tx-radius) !important;
  background:var(--tx-page) !important;
  color:var(--tx-text) !important;
  box-shadow:var(--tx-shadow);
  overflow:hidden;
}
.main-content.transaksi .formulir-title,
.main-content.transaksi .info-header,
.main-content.transaksi .form-title{
  background:var(--tx-primary) !important;
  color:var(--tx-header-text) !important;
  border-bottom:1px solid var(--tx-border) !important;
  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{
  background:var(--tx-primary) !important;
  color:var(--tx-text) !important;
  border:1px solid var(--tx-border) !important;
  border-left:4px solid var(--tx-accent) !important;
  border-radius:12px;
}

/* Balance cards - replaces inline dark/gold styling visually */
.main-content.transaksi .text-white,
.main-content.transaksi .balance-wd{
  background:var(--tx-primary) !important;
  color:var(--tx-text) !important;
  border:1px solid var(--tx-border) !important;
  border-radius:13px !important;
}
.main-content.transaksi .text-white .text-warning,
.main-content.transaksi .balance-wd{
  color:var(--tx-accent) !important;
}

/* Inputs */
.main-content.transaksi input,
.main-content.transaksi select,
.main-content.transaksi textarea,
.main-content.transaksi .form-control{
  min-height:48px;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:12px !important;
  background:var(--tx-primary) !important;
  color:var(--tx-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(--tx-accent) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.06) !important;
}
.main-content.transaksi select option{
  background:var(--tx-page);
  color:var(--tx-text);
}

/* Primary actions */
.main-content.transaksi #btnLanjut,
.main-content.transaksi #btnDeposit,
.main-content.transaksi #submit-withdraw{
  width:100%;
  min-height:52px;
  border:1px solid var(--tx-accent) !important;
  border-radius:13px !important;
  background:var(--tx-accent) !important;
  color:var(--tx-accent-text) !important;
  font-weight:900 !important;
  box-shadow:var(--tx-shadow-soft);
}

/* QR / bank card */
.main-content.transaksi .bankOption .card{
  border:1px solid var(--tx-border) !important;
  border-radius:14px !important;
  overflow:hidden;
  background:var(--tx-primary) !important;
}
.main-content.transaksi .bankOption .card-header{
  background:var(--tx-primary) !important;
  border-bottom:1px solid var(--tx-border) !important;
}
.main-content.transaksi .bankOption .card-body{
  background:var(--tx-page) !important;
  color:var(--tx-text) !important;
}
.main-content.transaksi #nominalView{
  background:var(--tx-accent) !important;
  color:var(--tx-accent-text) !important;
}

/* Withdraw payment methods */
.main-content.transaksi .payment-item{
  position:relative;
  padding:12px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.main-content.transaksi .payment-item:hover{
  transform:translateY(-2px);
}
.main-content.transaksi .payment-status.online{
  display:inline-flex;
  padding:4px 9px;
  border-radius:999px;
  background:var(--tx-accent) !important;
  color:var(--tx-accent-text) !important;
  font-size:10px;
  font-weight:900;
}
.main-content.transaksi .payment-content .title,
.main-content.transaksi .payment-content .desc{
  color:var(--tx-text) !important;
}

/* History/status */
.main-content.transaksi table{
  color:var(--tx-text) !important;
}
.main-content.transaksi table thead th{
  background:var(--tx-primary) !important;
  color:var(--tx-header-text) !important;
  border-color:rgba(255,255,255,.12) !important;
}
.main-content.transaksi table td{
  border-color:rgba(255,255,255,.10) !important;
}

/* Register */
.main-content.register .register__container{
  border:1px solid var(--tx-border) !important;
  border-radius:var(--tx-radius) !important;
  background:var(--tx-page) !important;
  color:var(--tx-text) !important;
  box-shadow:var(--tx-shadow);
  overflow:hidden;
}
.main-content.register .page-header{
  background:var(--tx-primary) !important;
  color:var(--tx-header-text) !important;
  border-bottom:1px solid var(--tx-border) !important;
  font-weight:900;
}
.main-content.register .register__note,
.main-content.register .register__notemail{
  background:var(--tx-primary) !important;
  color:var(--tx-text) !important;
  border:1px solid var(--tx-border) !important;
  border-left:4px solid var(--tx-accent) !important;
  border-radius:12px !important;
}
.main-content.register label,
.main-content.register .register-terms{
  color:var(--tx-text) !important;
}
.main-content.register input,
.main-content.register select,
.main-content.register textarea,
.main-content.register .form-control{
  background:var(--tx-primary) !important;
  color:var(--tx-text) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:12px !important;
}
.main-content.register input:focus,
.main-content.register select:focus,
.main-content.register textarea:focus,
.main-content.register .form-control:focus{
  border-color:var(--tx-accent) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.06) !important;
}
.main-content.register .button-submit,
.main-content.register input[type=submit]{
  min-height:52px;
  width:100%;
  border:1px solid var(--tx-accent) !important;
  border-radius:13px !important;
  background:var(--tx-accent) !important;
  color:var(--tx-accent-text) !important;
  font-weight:900 !important;
}

/* Password eye added by existing modern-universal.js */
.main-content.register .mu-password-wrap{ width:100%; }
.main-content.register .mu-password-wrap > input{ padding-right:46px !important; }
.main-content.register .mu-password-wrap > button{
  color:var(--tx-text) !important;
}

@media(max-width:768px){
  .main-content.transaksi .component-tabs .button-pills{min-height:50px;font-size:12px;}
  .main-content.transaksi .deposit-mode-btn{min-height:54px;font-size:11px;}
  .main-content.transaksi .formulir-form{padding:14px;}
  .main-content.transaksi .form-group [class*=col-]{width:100%;max-width:100%;}
  .main-content.register .register-form{padding:14px;}
}


/* 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}
}