*{
  box-sizing:border-box;
}

:root{
  --navy:#071c38;
  --navy2:#0b2c56;
  --blue:#1677ff;
  --cyan:#28c7f7;
  --white:#ffffff;
  --text:#eef6ff;
  --muted:#9eb4ce;
  --card:rgba(18,55,96,.82);
  --line:rgba(255,255,255,.10);
}

html,body{
  margin:0;
  min-height:100%;
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 80% 0%,rgba(22,119,255,.22),transparent 30%),
    linear-gradient(180deg,#06182e,#0a274b 65%,#071a31);
  color:var(--text);
}

body{
  padding-bottom:105px;
}

button,
input{
  font:inherit;
}

button{
  cursor:pointer;
}

.hidden{
  display:none!important;
}

/* AUTH */

.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 20px;
}

.auth-wrap{
  width:min(100%,430px);
}

.brand{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:28px;
}

.brand-logo{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:27px;
  font-weight:900;
  background:
    linear-gradient(145deg,#1dd5ff,#086cff 58%,#144bd7);
  box-shadow:
    0 15px 35px rgba(0,114,255,.32),
    inset 0 1px 0 rgba(255,255,255,.4);
}

.brand-name{
  font-size:23px;
  font-weight:900;
  letter-spacing:.4px;
}

.brand-name span{
  color:#36c9ff;
}

.brand-sub{
  margin-top:3px;
  color:var(--muted);
  font-size:13px;
}

.auth-card{
  padding:25px 21px;
  border:1px solid var(--line);
  border-radius:28px;
  background:
    linear-gradient(150deg,rgba(17,54,94,.92),rgba(7,30,57,.95));
  box-shadow:
    0 25px 70px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.auth-card h1{
  margin:0 0 7px;
  font-size:27px;
}

.auth-card>.subtitle{
  margin:0 0 24px;
  color:var(--muted);
  line-height:1.5;
  font-size:14px;
}

.form-group{
  margin-bottom:15px;
}

.form-group label{
  display:block;
  margin-bottom:7px;
  font-size:13px;
  font-weight:700;
  color:#c8d8ea;
}

.form-control{
  width:100%;
  height:52px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.11);
  outline:none;
  padding:0 15px;
  color:#fff;
  background:rgba(4,22,43,.68);
  transition:.2s;
}

.form-control:focus{
  border-color:#2fbfff;
  box-shadow:0 0 0 3px rgba(47,191,255,.11);
}

.form-control::placeholder{
  color:#7089a4;
}

.primary-btn{
  width:100%;
  height:53px;
  border:0;
  border-radius:16px;
  color:#fff;
  font-weight:800;
  background:linear-gradient(110deg,#116dff,#22c6f4);
  box-shadow:0 13px 27px rgba(20,121,255,.27);
}

.primary-btn:disabled{
  opacity:.6;
}

.auth-link{
  text-align:center;
  margin-top:18px;
  color:#a8bdd3;
  font-size:14px;
}

.auth-link a{
  color:#45caff;
  font-weight:800;
  text-decoration:none;
}

.form-message{
  display:none;
  margin:0 0 15px;
  padding:11px 13px;
  border-radius:13px;
  font-size:13px;
  line-height:1.45;
}

.form-message.error{
  display:block;
  background:rgba(239,68,68,.13);
  border:1px solid rgba(239,68,68,.24);
  color:#ffb8b8;
}

.form-message.success{
  display:block;
  background:rgba(34,197,94,.13);
  border:1px solid rgba(34,197,94,.23);
  color:#a7f3c0;
}

/* DASHBOARD */

.app{
  width:min(100%,520px);
  margin:auto;
  min-height:100vh;
}

.header{
  padding:22px 18px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.header-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.header-logo{
  width:49px;
  height:49px;
  flex:0 0 49px;
  display:grid;
  place-items:center;
  border-radius:15px;
  font-weight:900;
  font-size:22px;
  background:linear-gradient(145deg,#29d2ff,#096cff);
  box-shadow:0 8px 22px rgba(5,120,255,.28);
}

.header-title{
  font-size:18px;
  font-weight:900;
  white-space:nowrap;
}

.header-title span{
  color:#37c9ff;
}

.header-sub{
  margin-top:3px;
  font-size:11px;
  color:#8da6c1;
}

.notif-btn{
  position:relative;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:15px;
  background:rgba(23,62,104,.63);
  color:#fff;
  font-size:21px;
}

.notif-dot{
  position:absolute;
  width:10px;
  height:10px;
  background:#ef4444;
  border:2px solid #0a274b;
  border-radius:50%;
  top:7px;
  right:7px;
}

.balance-card{
  margin:3px 18px 21px;
  padding:20px;
  border-radius:25px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 100% 0%,rgba(51,206,255,.30),transparent 38%),
    linear-gradient(135deg,#123b72,#0b2952);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 18px 40px rgba(0,0,0,.21);
}

.balance-label{
  font-size:13px;
  color:#9fb6ce;
}

.balance-main{
  margin-top:5px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}

.balance-value{
  font-size:30px;
  font-weight:900;
  letter-spacing:.2px;
}

.deposit-btn{
  min-width:108px;
  border:0;
  padding:12px 15px;
  border-radius:15px;
  background:linear-gradient(110deg,#1675ff,#26c7f6);
  color:#fff;
  font-weight:800;
}

.balance-code{
  margin-top:15px;
  color:#88a5c5;
  font-size:11px;
  letter-spacing:.6px;
}

.section{
  padding:0 18px;
  margin-bottom:22px;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.section-title{
  margin:0;
  font-size:17px;
  font-weight:900;
}

.section-link{
  color:#79bfff;
  font-size:12px;
  text-decoration:none;
}

.services{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:15px 8px;
}

.service{
  text-align:center;
  min-width:0;
}

.service-icon{
  width:55px;
  height:55px;
  margin:0 auto 7px;
  border-radius:17px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(26,71,120,.96),rgba(13,49,88,.95));
  border:1px solid rgba(255,255,255,.07);
  color:#54cfff;
  font-size:23px;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.service-name{
  color:#dce9f7;
  font-size:11.5px;
  line-height:1.25;
}

.transaction-card,
.wallet-card{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(17,53,93,.76);
  overflow:hidden;
}

.empty-transaction{
  min-height:120px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:20px;
  color:#7893af;
  font-size:13px;
  line-height:1.5;
}

.wallet-card{
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}

.wallet-card small{
  color:#8ea8c2;
}

.wallet-card strong{
  display:block;
  margin-top:4px;
  font-size:24px;
}

.promo-card{
  min-height:137px;
  border-radius:22px;
  padding:20px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 90% 20%,rgba(78,217,255,.42),transparent 27%),
    linear-gradient(120deg,#0f60cf,#063d8d 58%,#0850aa);
  border:1px solid rgba(96,202,255,.35);
}

.promo-card::after{
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  right:-22px;
  bottom:-38px;
  border:20px solid rgba(255,255,255,.11);
  border-radius:50%;
}

.promo-card h3{
  margin:0 0 5px;
  font-size:19px;
}

.promo-card p{
  margin:0;
  max-width:230px;
  font-size:13px;
  line-height:1.5;
  color:#cce7ff;
}

.promo-chip{
  display:inline-block;
  margin-top:14px;
  padding:7px 12px;
  border-radius:999px;
  color:#0d5cc3;
  font-size:11px;
  font-weight:800;
  background:#fff;
}

.bottom-nav{
  position:fixed;
  z-index:50;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  width:min(calc(100% - 24px),496px);
  height:75px;
  padding:8px 9px;
  border-radius:25px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:center;
  background:rgba(244,249,255,.97);
  box-shadow:0 18px 50px rgba(0,0,0,.38);
}

.nav-item{
  border:0;
  background:none;
  color:#65778d;
  text-align:center;
  font-size:10.5px;
}

.nav-icon{
  display:block;
  font-size:22px;
  margin-bottom:4px;
}

.nav-item.active{
  color:#1068ed;
  font-weight:800;
}

.nav-item.scan{
  position:relative;
  top:-20px;
}

.scan-circle{
  width:59px;
  height:59px;
  margin:auto;
  border:6px solid #f4f9ff;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:24px;
  color:#fff;
  background:linear-gradient(145deg,#1a86ff,#124bec);
  box-shadow:0 7px 18px rgba(20,91,230,.4);
}

.loading-screen{
  position:fixed;
  z-index:100;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(4,18,34,.62);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.loading-box{
  text-align:center;
}

.spinner{
  width:48px;
  height:48px;
  margin:auto;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.14);
  border-top-color:#35c8ff;
  animation:spin .8s linear infinite;
}

.loading-text{
  margin-top:14px;
  color:#d9ecff;
  font-weight:700;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

@media(max-width:370px){
  .services{
    gap:13px 4px;
  }

  .service-icon{
    width:49px;
    height:49px;
  }

  .service-name{
    font-size:10.5px;
  }

  .balance-value{
    font-size:26px;
  }
}

/* =====================================================
   MPAY AUTH MOBILE SAFE AREA V1
===================================================== */

.auth-page{
  min-height:100dvh !important;

  align-items:flex-start !important;

  padding:
    44px
    20px
    calc(110px + env(safe-area-inset-bottom,0px))
    !important;
}

.auth-wrap{
  margin:
    auto
    0 !important;
}

/* register yang lebih panjang tetap punya ruang bawah */
.auth-card{
  margin-bottom:
    20px !important;
}

/* link login/register jangan menempel navigation Android */
.auth-link{
  margin-top:
    20px !important;

  padding-bottom:
    6px !important;
}

@media(max-height:750px){

  .auth-page{
    padding-top:
      28px !important;
  }

}


/* =====================================================
   MPAY DASHBOARD POLISH V1
===================================================== */

/* ruang aman agar konten terakhir tidak tertutup navbar */
body{
  padding-bottom:
    calc(145px + env(safe-area-inset-bottom,0px)) !important;
}

.app{
  padding-bottom:
    30px;
}

/* notification bell */
.notif-btn{
  display:grid;
  place-items:center;
}

.notif-btn svg{
  width:24px;
  height:24px;

  fill:none;
  stroke:#eaf5ff;
  stroke-width:1.9;

  stroke-linecap:round;
  stroke-linejoin:round;
}

/* navbar aman dari navigation Android */
.bottom-nav{
  bottom:
    calc(12px + env(safe-area-inset-bottom,0px)) !important;
}

/* saldo wallet tidak terlalu dekat dengan navbar */
.wallet-card{
  margin-bottom:8px;
}


/* =====================================================
   MPAY DIGITAL - DEPOSIT V1
===================================================== */

.deposit-page{
  width:min(100%,520px);
  margin:auto;

  min-height:100vh;

  padding:
    18px
    18px
    calc(60px + env(safe-area-inset-bottom,0px));
}


.deposit-header{
  display:flex;
  align-items:center;
  gap:12px;

  margin-bottom:18px;
}


.deposit-back{
  width:46px;
  height:46px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:15px;

  background:rgba(20,58,99,.70);

  color:#fff;

  font-size:31px;
  line-height:1;
}


.deposit-header strong{
  display:block;

  font-size:19px;
  font-weight:900;
}


.deposit-header small{
  display:block;

  margin-top:3px;

  color:#8ea8c3;

  font-size:12px;
}


.deposit-balance{
  padding:20px;

  border-radius:24px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(42,201,250,.30),
      transparent 37%
    ),
    linear-gradient(
      135deg,
      #123c72,
      #0a2953
    );

  border:
    1px solid
    rgba(255,255,255,.10);

  box-shadow:
    0 16px 35px
    rgba(0,0,0,.20);
}


.deposit-balance span{
  display:block;

  color:#9db5cd;

  font-size:13px;
}


.deposit-balance strong{
  display:block;

  margin-top:5px;

  font-size:30px;
  font-weight:900;
}


.deposit-balance small{
  display:block;

  margin-top:11px;

  color:#89a5c2;

  font-size:11px;
}


.deposit-form-card,
.deposit-history-card{
  margin-top:18px;

  padding:20px;

  border-radius:24px;

  border:
    1px solid
    rgba(255,255,255,.10);

  background:
    rgba(14,48,84,.78);
}


.deposit-form-card h2{
  margin:0;

  font-size:17px;
}


.deposit-hint{
  margin:
    5px 0 14px;

  color:#88a4c1;

  font-size:12px;
}


.deposit-input-wrap{
  height:62px;

  display:flex;
  align-items:center;

  border:
    1px solid
    rgba(86,190,255,.27);

  border-radius:18px;

  overflow:hidden;

  background:
    rgba(3,23,45,.65);
}


.deposit-input-wrap span{
  padding-left:17px;

  color:#53caff;

  font-weight:900;
}


.deposit-input-wrap input{
  flex:1;

  width:100%;
  height:100%;

  border:0;
  outline:0;

  padding:0 14px;

  color:#fff;

  background:transparent;

  font-size:23px;
  font-weight:900;
}


.deposit-quick{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:9px;

  margin-top:12px;
}


.deposit-quick button{
  height:40px;

  border-radius:12px;

  border:
    1px solid
    rgba(63,184,255,.18);

  background:
    rgba(20,64,106,.72);

  color:#bfeaff;

  font-size:12px;
  font-weight:700;
}


.deposit-method-title{
  margin-top:
    24px !important;

  margin-bottom:
    12px !important;
}


.deposit-method{
  position:relative;

  min-height:72px;

  display:flex;
  align-items:center;

  gap:12px;

  padding:12px;

  margin-top:10px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:17px;

  background:
    rgba(5,29,54,.48);
}


.deposit-method.active{
  border-color:
    rgba(48,190,255,.45);

  background:
    rgba(21,87,139,.38);
}


.deposit-method input{
  position:absolute;
  opacity:0;
}


.deposit-method-icon{
  width:46px;
  height:46px;

  flex:0 0 46px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:
    rgba(31,139,220,.18);

  color:#55ceff;

  font-size:11px;
  font-weight:900;
}


.deposit-method-copy{
  flex:1;
}


.deposit-method-copy strong{
  display:block;

  font-size:14px;
}


.deposit-method-copy small{
  display:block;

  margin-top:4px;

  color:#849eb9;

  font-size:11px;
}


.deposit-radio{
  width:20px;
  height:20px;

  border-radius:50%;

  border:
    2px solid
    #50708e;
}


.deposit-method.active .deposit-radio{
  border:
    6px solid
    #28bff5;
}


.deposit-submit{
  width:100%;
  height:54px;

  margin-top:18px;

  border:0;
  border-radius:16px;

  color:#fff;

  font-weight:900;

  background:
    linear-gradient(
      110deg,
      #1575ff,
      #22c8f4
    );

  box-shadow:
    0 12px 26px
    rgba(17,116,255,.25);
}


.deposit-submit:disabled{
  opacity:.55;
}


.deposit-note{
  margin:
    12px 0 0;

  text-align:center;

  color:#718da9;

  font-size:11px;
  line-height:1.5;
}


.deposit-message{
  display:none;

  margin-top:15px;

  padding:11px 13px;

  border-radius:13px;

  font-size:12px;
}


.deposit-message.error{
  display:block;

  color:#ffc1c1;

  background:
    rgba(239,68,68,.12);

  border:
    1px solid
    rgba(239,68,68,.20);
}


.deposit-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:12px;
}


.deposit-section-head strong{
  font-size:16px;
}


.deposit-section-head button{
  border:0;
  background:none;

  color:#55c9ff;

  font-size:12px;
}


.deposit-empty{
  padding:25px 12px;

  text-align:center;

  color:#7995b0;

  font-size:12px;
}


.deposit-history-item{
  padding:13px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);
}


.deposit-history-item:last-child{
  border-bottom:0;
}


.deposit-history-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;
}


.deposit-history-code{
  font-size:12px;
  font-weight:800;

  color:#d9edff;
}


.deposit-history-value{
  font-size:13px;
  font-weight:900;

  color:#52cbff;
}


.deposit-history-bottom{
  display:flex;
  justify-content:space-between;

  gap:10px;

  margin-top:6px;

  color:#819db8;

  font-size:10.5px;
}


.deposit-status{
  padding:
    3px 8px;

  border-radius:
    999px;

  font-size:9px;
  font-weight:800;

  text-transform:uppercase;
}


.deposit-status.menunggu{
  color:#fbbf24;

  background:
    rgba(245,158,11,.12);
}


.deposit-status.berhasil{
  color:#4ade80;

  background:
    rgba(34,197,94,.12);
}


.deposit-status.ditolak,
.deposit-status.expired{
  color:#fb7185;

  background:
    rgba(239,68,68,.12);
}


/* RESULT POPUP */

.deposit-result-overlay{
  position:fixed;

  z-index:100;

  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  background:
    rgba(1,12,25,.58);

  backdrop-filter:
    blur(11px);

  -webkit-backdrop-filter:
    blur(11px);
}


.deposit-result-card{
  width:
    min(100%,390px);

  padding:26px 20px;

  border-radius:27px;

  text-align:center;

  background:
    linear-gradient(
      145deg,
      #123d70,
      #071f3d
    );

  border:
    1px solid
    rgba(255,255,255,.12);

  box-shadow:
    0 30px 70px
    rgba(0,0,0,.43);
}


.deposit-result-icon{
  width:70px;
  height:70px;

  margin:auto;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#fff;

  font-size:34px;
  font-weight:900;

  background:
    linear-gradient(
      145deg,
      #18a6ff,
      #24d1e9
    );

  box-shadow:
    0 0 35px
    rgba(37,197,246,.40);
}


.deposit-result-card h2{
  margin:
    17px 0 5px;

  font-size:23px;
}


.deposit-result-card>p{
  margin:0;

  color:#91abc5;

  font-size:13px;
}


.deposit-result-detail{
  margin-top:20px;

  padding:15px;

  display:grid;

  grid-template-columns:
    1fr auto;

  gap:12px;

  text-align:left;

  border-radius:17px;

  background:
    rgba(3,24,47,.55);
}


.deposit-result-detail span{
  color:#86a1bc;

  font-size:12px;
}


.deposit-result-detail strong{
  color:#eaf6ff;

  font-size:12px;
}


.status-waiting{
  color:#fbbf24 !important;
}


.deposit-result-close{
  width:100%;
  height:50px;

  margin-top:17px;

  border:0;
  border-radius:15px;

  color:#fff;

  font-weight:900;

  background:
    linear-gradient(
      110deg,
      #1675ff,
      #26c8f5
    );
}


/* =====================================================
   MPAY DEPOSIT PROOF V2
===================================================== */

.deposit-proof-actions{
  display:flex;
  gap:8px;

  margin-top:11px;
}

.deposit-proof-actions button{
  flex:1;
  min-height:40px;

  border-radius:12px;
  border:1px solid rgba(79,195,255,.20);

  font-weight:800;
  font-size:11px;
}

.deposit-proof-upload{
  color:#fff;

  background:
    linear-gradient(
      110deg,
      #1675ff,
      #22c7f3
    );
}

.deposit-proof-view{
  color:#64d5ff;

  background:
    rgba(12,58,98,.85);
}


/* =====================================================
   MPAY MEMBER PAYMENT DISPLAY V1
===================================================== */

.deposit-payment-detail{
  margin-top:16px;
  padding:16px;

  border-radius:18px;

  border:
    1px solid rgba(72,190,255,.20);

  background:
    rgba(3,29,56,.72);
}


.mpay-payment-heading{
  color:#fff;

  font-size:16px;
  font-weight:900;

  text-align:center;
}


.mpay-payment-label{
  margin-top:11px;

  color:#8da9c2;

  font-size:11px;

  text-align:center;
}


.mpay-payment-total{
  margin-top:3px;

  color:#51d7ff;

  font-size:25px;
  font-weight:900;

  text-align:center;
}


.mpay-qris-box{
  width:min(230px,100%);

  margin:15px auto 12px;

  padding:12px;

  border-radius:18px;

  background:#fff;
}


.mpay-qris-box img{
  display:block;

  width:100%;
  height:auto;

  border-radius:10px;
}


.mpay-payment-instruction{
  margin-top:11px;

  color:#b6c9dc;

  font-size:12px;
  line-height:1.5;

  text-align:center;
}


.mpay-payment-warning{
  margin-top:11px;

  padding:10px;

  border-radius:12px;

  color:#fbbf24;

  background:
    rgba(245,158,11,.10);

  text-align:center;

  font-size:11px;
}


.mpay-payment-warning strong{
  color:#fff;
}


.mpay-bank-row{
  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:12px;

  margin-top:10px;
  padding:12px;

  border-radius:12px;

  background:
    rgba(7,43,77,.86);
}


.mpay-bank-row span{
  color:#8aa7c1;
  font-size:10px;
}


.mpay-bank-row strong{
  color:#fff;

  font-size:13px;

  text-align:right;

  word-break:break-all;
}


.mpay-copy-account{
  width:100%;
  min-height:42px;

  margin-top:10px;

  border-radius:12px;

  border:
    1px solid rgba(76,200,255,.25);

  background:
    rgba(10,56,96,.88);

  color:#5dd5ff;

  font-weight:800;
}


.mpay-payment-loading{
  color:#90a9c1;

  text-align:center;
  font-size:12px;
}


.mpay-payment-error{
  padding:10px;

  border-radius:11px;

  background:
    rgba(239,68,68,.08);

  color:#fca5a5;

  text-align:center;
  font-size:11px;
}


/* =====================================================
   MPAY PAYMENT METHOD PREVIEW V1
===================================================== */

.payment-method-preview{
  margin-top:16px;
  margin-bottom:16px;

  padding:16px;

  border-radius:20px;

  border:
    1px solid rgba(62,190,255,.22);

  background:
    linear-gradient(
      145deg,
      rgba(13,61,105,.92),
      rgba(5,37,69,.95)
    );

  overflow:hidden;
}


.mpay-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;
}


.mpay-preview-head strong{
  display:block;

  color:#fff;

  font-size:15px;
  font-weight:900;
}


.mpay-preview-head span{
  display:block;

  margin-top:4px;

  color:#88a6c0;

  font-size:11px;
}


.mpay-preview-badge{
  flex:none;

  padding:7px 10px;

  border-radius:10px;

  color:#52d6ff;

  background:
    rgba(40,179,255,.12);

  font-size:10px;
  font-weight:900;
}


.mpay-preview-qris{
  width:min(250px,100%);

  margin:16px auto 13px;

  padding:12px;

  border-radius:20px;

  background:#fff;

  box-shadow:
    0 15px 35px rgba(0,0,0,.22);
}


.mpay-preview-qris img{
  display:block;

  width:100%;
  height:auto;

  border-radius:10px;
}


.mpay-preview-owner,
.mpay-preview-bank-row{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-top:10px;

  padding:12px;

  border-radius:13px;

  background:
    rgba(2,27,53,.65);
}


.mpay-preview-owner span,
.mpay-preview-bank-row span{
  color:#88a4bd;

  font-size:10px;
}


.mpay-preview-owner strong,
.mpay-preview-bank-row strong{
  color:#fff;

  font-size:12px;
  font-weight:800;

  text-align:right;
}


.mpay-preview-note{
  margin-top:12px;

  color:#a9bfd3;

  font-size:11px;
  line-height:1.5;

  text-align:center;
}


.mpay-preview-loading{
  padding:10px;

  color:#92adc5;

  text-align:center;

  font-size:11px;
}


.mpay-preview-error{
  padding:11px;

  border-radius:12px;

  color:#fca5a5;

  background:
    rgba(239,68,68,.08);

  text-align:center;

  font-size:11px;
}


/* =====================================================
   MPAY POPUP UPLOAD BUKTI V1
===================================================== */

.deposit-result-upload{
  width:100%;

  min-height:54px;

  margin-top:16px;
  margin-bottom:10px;

  border:0;

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #1685ff,
      #28d4ed
    );

  color:#fff;

  font-size:14px;
  font-weight:900;

  cursor:pointer;

  box-shadow:
    0 10px 28px
    rgba(22,133,255,.25);
}


.deposit-result-upload:active{
  transform:scale(.985);
}


.deposit-result-upload:disabled{
  opacity:.55;
  cursor:not-allowed;
}


/* =====================================================
   MPAY PROOF SUCCESS POPUP V1
===================================================== */

.proof-success-overlay{
  position:fixed;
  inset:0;

  z-index:99999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:26px;

  background:
    rgba(1,17,34,.74);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}


.proof-success-card{
  width:min(100%,430px);

  padding:
    36px 28px 28px;

  border-radius:30px;

  border:
    1px solid rgba(73,197,255,.22);

  background:
    linear-gradient(
      145deg,
      #123e69,
      #082b50
    );

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.38);

  text-align:center;
}


.proof-success-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:92px;
  height:92px;

  margin:
    0 auto 22px;

  border-radius:50%;

  background:
    linear-gradient(
      145deg,
      #119bff,
      #28d7ec
    );

  color:#fff;

  font-size:54px;
  font-weight:900;

  box-shadow:
    0 0 0 10px
    rgba(53,199,255,.08),
    0 18px 40px
    rgba(18,166,255,.32);
}


.proof-success-card h2{
  margin:0;

  color:#fff;

  font-size:25px;
  font-weight:900;
  line-height:1.25;
}


.proof-success-subtitle{
  margin:
    9px 0 20px;

  color:#9db5cb;

  font-size:13px;
}


.proof-success-info{
  padding:8px 16px;

  border-radius:18px;

  background:
    rgba(2,28,54,.70);
}


.proof-success-row{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:12px 0;
}


.proof-success-row +
.proof-success-row{
  border-top:
    1px solid
    rgba(255,255,255,.07);
}


.proof-success-row span{
  color:#8da9c2;

  font-size:12px;
}


.proof-success-row strong{
  color:#fff;

  font-size:12px;

  text-align:right;
}


.proof-success-row
.proof-success-status{
  color:#fbbf24;
}


.proof-success-note{
  margin-top:18px;

  padding:13px 14px;

  border-radius:14px;

  background:
    rgba(14,165,233,.08);

  color:#9fc0d9;

  font-size:11px;
  line-height:1.55;
}


.proof-success-close{
  width:100%;

  min-height:54px;

  margin-top:22px;

  border:0;

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #1685ff,
      #28d4ed
    );

  color:#fff;

  font-size:15px;
  font-weight:900;

  box-shadow:
    0 12px 30px
    rgba(22,133,255,.24);
}


.proof-success-close:active{
  transform:scale(.985);
}


body.proof-popup-open{
  overflow:hidden;
}


/* =====================================================
   MPAY DEPOSIT STATUS DETAIL V1
===================================================== */

.deposit-status-detail{
  display:flex;
  gap:12px;
  align-items:flex-start;

  margin-top:14px;
  padding:14px;

  border-radius:16px;

  border:
    1px solid
    rgba(255,255,255,.06);
}


.deposit-status-detail-icon{
  flex:none;

  display:flex;
  align-items:center;
  justify-content:center;

  width:38px;
  height:38px;

  border-radius:12px;

  font-size:20px;
  font-weight:900;
}


.deposit-status-detail-content{
  flex:1;
  min-width:0;
}


.deposit-status-detail-content > strong{
  display:block;

  color:#fff;

  font-size:13px;
  font-weight:900;
}


.deposit-status-detail-content > span{
  display:block;

  margin-top:5px;

  color:#a7bfd3;

  font-size:11px;
  line-height:1.55;
}


.deposit-status-detail-content > span b{
  color:#fff;
}


.deposit-status-detail-content > small{
  display:block;

  margin-top:8px;

  color:#7897b2;

  font-size:9px;
}


/* SUCCESS */

.deposit-status-detail.success{
  background:
    rgba(16,185,129,.08);

  border-color:
    rgba(52,211,153,.14);
}


.deposit-status-detail.success
.deposit-status-detail-icon{
  color:#34d399;

  background:
    rgba(16,185,129,.14);
}


/* WAITING */

.deposit-status-detail.waiting,
.deposit-status-detail.processing{
  background:
    rgba(245,158,11,.07);

  border-color:
    rgba(251,191,36,.12);
}


.deposit-status-detail.waiting
.deposit-status-detail-icon,
.deposit-status-detail.processing
.deposit-status-detail-icon{
  color:#fbbf24;

  background:
    rgba(245,158,11,.13);
}


/* FAILED */

.deposit-status-detail.failed{
  background:
    rgba(239,68,68,.07);

  border-color:
    rgba(248,113,113,.13);
}


.deposit-status-detail.failed
.deposit-status-detail-icon{
  color:#f87171;

  background:
    rgba(239,68,68,.13);
}


/* CATATAN ADMIN */

.deposit-admin-note{
  margin-top:10px;
  padding:10px 12px;

  border-radius:11px;

  background:
    rgba(2,27,53,.55);
}


.deposit-admin-note small{
  display:block;

  color:#829fb8;

  font-size:9px;
}


.deposit-admin-note b{
  display:block;

  margin-top:4px;

  color:#fff;

  font-size:11px;
  line-height:1.45;

  font-weight:700;
}


/* =====================================================
   MPAY DEPOSIT STATUS DETAIL FIX V2
===================================================== */

.deposit-status-detail{
  display:flex;
  align-items:flex-start;
  gap:12px;

  margin-top:14px;
  padding:14px;

  border-radius:16px;

  border:1px solid
    rgba(255,255,255,.07);
}


.deposit-status-detail-icon{
  flex:0 0 40px;

  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  font-size:21px;
  font-weight:900;
}


.deposit-status-detail-content{
  flex:1;
  min-width:0;
}


.deposit-status-detail-content > strong{
  display:block;

  color:#fff;

  font-size:14px;
  font-weight:900;
}


.deposit-status-detail-content > span{
  display:block;

  margin-top:5px;

  color:#a6bed2;

  font-size:11px;
  line-height:1.55;
}


.deposit-status-detail-content > span b{
  color:#fff;
}


.deposit-status-detail-content > small{
  display:block;

  margin-top:8px;

  color:#7897b2;

  font-size:9px;
}


/* BERHASIL */

.deposit-status-detail.success{
  background:
    rgba(16,185,129,.08);

  border-color:
    rgba(52,211,153,.16);
}

.deposit-status-detail.success
.deposit-status-detail-icon{
  color:#34d399;

  background:
    rgba(16,185,129,.15);
}


/* MENUNGGU */

.deposit-status-detail.waiting{
  background:
    rgba(245,158,11,.07);

  border-color:
    rgba(251,191,36,.14);
}

.deposit-status-detail.waiting
.deposit-status-detail-icon{
  color:#fbbf24;

  background:
    rgba(245,158,11,.14);
}


/* DITOLAK */

.deposit-status-detail.failed{
  background:
    rgba(239,68,68,.07);

  border-color:
    rgba(248,113,113,.15);
}

.deposit-status-detail.failed
.deposit-status-detail-icon{
  color:#f87171;

  background:
    rgba(239,68,68,.14);
}


/* ALASAN ADMIN */

.deposit-admin-note{
  margin-top:10px;
  padding:10px 12px;

  border-radius:12px;

  background:
    rgba(2,27,53,.60);
}

.deposit-admin-note small{
  display:block;

  color:#839fb8;

  font-size:9px;
}

.deposit-admin-note b{
  display:block;

  margin-top:4px;

  color:#fff;

  font-size:11px;
  line-height:1.5;
}