.wallet-container{
  padding:20px;
}

.wallet-card{
  background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
  border-radius:20px;
  padding:24px;
  color:white;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.wallet-label{
  font-size:14px;
  opacity:0.8;
}

.wallet-balance{
  font-size:28px;
  font-weight:700;
  margin-top:8px;
}

.wallet-actions{
  display:flex;
  justify-content:space-between;
  margin-top:20px;
}

.wallet-actions button{
  flex:1;
  margin:0 5px;
  padding:12px;
  border-radius:12px;
  border:none;
  font-weight:600;
  background:#1e293b;
  color:white;
  cursor:pointer;
}

.wallet-action-group{
  display:flex;
  gap:10px;
}

.wallet-action-group button{
  flex:1;                 /* ini kuncinya */
  display:flex;
  justify-content:center;
  align-items:center;
}
.trx-card{
  background:#111827;
  padding:14px;
  border-radius:14px;
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:white;
}

.trx-type{
  font-weight:600;
}

.plus{
  color:#22c55e;
}

.minus{
  color:#ef4444;
}

.wallet-page{
  padding:20px;
}

.wallet-action-group{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.wallet-withdraw-btn{
  background:rgba(255,255,255,0.25);
  border:none;
  padding:6px 12px;
  border-radius:10px;
  color:white;
  font-weight:600;
  cursor:pointer;
}

.wallet-big-card{
  margin-top:18px;
  width:100%;
}

.wallet-member-big-img{
  width:100%;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}

/* ACTION ROW */
.wallet-action-row{
  display:flex;
  gap:14px;
  margin-top:18px;
}

/* BASE CARD - SLIM */
.wallet-action-card{
  flex:1;
  border-radius:16px;
  padding:10px 14px;      /* jauh lebih kecil */
  cursor:pointer;
  transition:all .2s ease;

  display:flex;           /* horizontal */
  align-items:center;
  justify-content:center;
  gap:6px;                /* jarak icon & text */
}

/* ACTION ROW */
.wallet-action-row{
  display:flex;
  gap:14px;
  margin-top:18px;
}

/* BASE CARD - SLIM */
.wallet-action-card{
  flex:1;
  border-radius:16px;
  padding:10px 14px;      /* jauh lebih kecil */
  cursor:pointer;
  transition:all .2s ease;

  display:flex;           /* horizontal */
  align-items:center;
  justify-content:center;
  gap:6px;                /* jarak icon & text */
}

/* TOP UP DOMINAN */
.topup-card{
  background:var(--color-primary);
  color:white;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}

.topup-card:hover{
  transform:translateY(-2px);
  background:var(--color-primary-hover);
}

/* TARIK SALDO - GLASS GRADIENT */
.withdraw-card{
  background:linear-gradient(
    135deg,
    rgba(255,255,255,.15),
    rgba(255,255,255,.05)
  );
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);
  color:var(--color-text);
}

/* ICON LEBIH KECIL */
.action-icon{
  font-size:14px;
  line-height:1;
}

/* TEXT LEBIH KECIL */
.action-title{
  font-size:12px;
  font-weight:600;
}

.ledger-container{
  padding:20px;
}

.ledger-item{
  background:var(--color-card);
  padding:14px;
  border-radius:12px;
  margin-bottom:12px;
  display:flex;
  justify-content:space-between;
  box-shadow:var(--shadow-card);
}

.ledger-type{
  font-weight:600;
}

.ledger-date{
  font-size:12px;
  opacity:.7;
}

.topup-sheet{
  padding:20px;
}

.countdown-box{
  background:#1e293b;
  color:white;
  padding:14px;
  border-radius:12px;
  text-align:center;
  margin-bottom:20px;
}

#countdownTimer{
  font-size:20px;
  font-weight:700;
  margin-top:6px;
}

.topup-input{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--color-border);
  margin-bottom:12px;
}

.btn-primary{
  width:100%;
  padding:12px;
  background:var(--color-primary);
  color:white;
  border:none;
  border-radius:12px;
  margin-bottom:10px;
}

.btn-danger{
  width:100%;
  padding:12px;
  background:#dc2626;
  color:white;
  border:none;
  border-radius:12px;
}

.qris-container{
  margin:20px 0;
  text-align:center;
}

.qris-image{
  width:100%;
  max-width:340px;
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.payment-guide{
  background:rgba(255,255,255,.05);
  padding:14px;
  border-radius:12px;
  margin-bottom:18px;
  font-size:13px;
}

.payment-guide h4{
  margin-bottom:8px;
}

.payment-guide ol{
  padding-left:18px;
  line-height:1.6;
}

.ledger-balance{
  font-size:11px;
  opacity:.6;
}

/* ===============================
   MEMBERSHIP LAYER (WALLET)
================================ */

.wallet-member-layer{
  position:relative;
  width:100%;
}

.wallet-member-big-img{
  width:100%;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  display:block;
}

/* ===============================
   MEMBERSHIP GOLD TEXT
================================ */

.wallet-member-overlay{
  position:absolute;
  inset:0;
  padding:20px;
  pointer-events:none;

  /* EMAS GRADIENT */
  color:#d4af37;
  text-shadow:
    0 1px 2px rgba(0,0,0,.4),
    0 0 6px rgba(212,175,55,.3);
}

/* NAIK SEDIKIT & LEBIH ELEGAN */
.wallet-member-name{
  position:absolute;
  bottom:58px;          /* sebelumnya 58px */
  left:22px;

  font-weight:700;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;

  background:linear-gradient(
    90deg,
    #f6e27a,
    #d4af37,
    #b8860b
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* NAIK SEDIKIT */
.wallet-member-code{
  position:absolute;
  bottom:34px;          /* sebelumnya 36px */
  left:22px;

  font-size:10px;
  font-weight:500;
  letter-spacing:.8px;

  background:linear-gradient(
    90deg,
    #f6e27a,
    #d4af37
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* =========================================
   LEDGER CONTAINER
========================================= */

.ledger-container{
  padding:24px;
  animation: fadeUp .25s ease;
}

.ledger-container h3{
  font-size:20px;
  font-weight:700;
  margin-bottom:18px;
}


/* =========================================
   FILTER BUTTONS
========================================= */

.ledger-filter{
  display:flex;
  gap:10px;
  margin-bottom:20px;
}

.ledger-filter button{
  padding:8px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  color:var(--text-primary);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
}

.ledger-filter button:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-1px);
}

/* Active state (optional later via JS class) */
.ledger-filter button.active{
  background:linear-gradient(135deg,#facc15,#f59e0b);
  color:#000;
  border:none;
}


/* =========================================
   LEDGER ITEM CARD
========================================= */

.ledger-item{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  padding:16px 18px;
  margin-bottom:14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  transition:all .2s ease;
}

.ledger-item:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(0,0,0,.25);
}

.ledger-type{
  font-weight:600;
  font-size:14px;
}

.ledger-date{
  font-size:12px;
  opacity:.6;
  margin-top:4px;
}

.ledger-balance{
  font-size:12px;
  opacity:.6;
  margin-top:4px;
}

.ledger-amount{
  font-weight:700;
  font-size:15px;
}


/* =========================================
   EMPTY STATE
========================================= */

.ledger-container .empty-state{
  margin-top:30px;
  opacity:.5;
  font-size:14px;
}


/* =========================================
   LIGHT MODE SUPPORT
========================================= */

body.light .ledger-item{
  background:#ffffff;
  border:1px solid #e6e6e6;
  box-shadow:0 5px 15px rgba(0,0,0,.05);
}

body.light .ledger-filter button{
  background:#f3f3f3;
  border:1px solid #e2e2e2;
  color:#222;
}

body.light .ledger-filter button:hover{
  background:#e8e8e8;
}


/* =========================================
   ANIMATION
========================================= */

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}