.transactions-page .transaction-container{

  max-width:480px;

  margin:auto;

  min-height:100vh;

  display:flex;

  flex-direction:column;

}


.transactions-page .transaction-header{

  position:fixed;

  top: 0;

  left:50%;

  transform:translateX(-50%);

  width:100%;

  z-index:1000;

  background:#0F172A;

  padding:20px 20px 15px;

  box-sizing:border-box;

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

}




.transactions-page #transactionList{

  flex:1;

  overflow-y:auto;

  padding-top:70px;

  padding-left:15px;

  padding-right:15px;

  padding-bottom:140px;

}




.transactions-page .transaction-header h1{
  margin-top:7px;

  padding-left:4px;

  font-size:28px;

}

.transactions-page .transaction-header p{

  margin-top:8px;

  padding-left:4px;

  opacity:.7;

}




.history-card{
  background:#1b263b;
  border-radius:22px;
  padding:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
  cursor:pointer;
  gap:12px;
}

.history-left{

  display:flex;

  align-items:center;

  gap:14px;

  flex:1;

  min-width:0;

}


.history-info h3{

  margin:0;

  font-size:15px;

  font-weight:700;

  color:white;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

  max-width:170px;

}



.history-date{

  margin-top:6px;

  opacity:.65;

  font-size:12px;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}


.history-right{

  display:flex;

  flex-direction:column;

  align-items:flex-end;

  justify-content:center;

  margin-left:12px;

}



.history-amount{

  font-size:16px;

  font-weight:800;

  white-space:nowrap;

}



.history-status{

  margin-top:8px;

  padding:5px 10px;

  border-radius:999px;

  font-size:11px;

  font-weight:700;

  text-transform:capitalize;

  white-space:nowrap;

}


.history-icon{

  width:52px;
  min-width:52px;

  height:52px;
  min-height:52px;

  border-radius:50%;

  background:#044e4e;

  display:flex;

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

  font-size:22px;

  flex-shrink:0;

}

.credit{
  color:#00D492;
}

.debit{
  color:#FF5A5A;
}






/* ===============================
   NEVER OVERRIDE LOADER
================================ */

#globalLoader,
#globalLoader *{

  animation-play-state:running !important;

  transform-origin:center !important;

}





/* =========================
   STATUS COLORS
========================= */

.status-success{

  background:
  rgba(0,212,146,.15);

  color:#00D492;

}

.status-pending{

  background:
  rgba(255,193,7,.15);

  color:#FFC107;

}

.status-failed{

  background:
  rgba(255,90,90,.15);

  color:#FF5A5A;

}






.back-arrow{

  position:fixed;

  top:20px;
  left:20px;

  width:35px;
  height:35px;

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

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #ffffff
    );

  color:#000000;

  border-radius:50%;

  font-size:16px;

  font-weight:400;

  cursor:pointer;

  z-index:1000;

  box-shadow:
    0 4px 15px
    rgba(0, 0, 0, 0.35);

}





/* =========================
   PAGE HEADER
========================= */

.page-header{

  position:fixed;

  top:0;
  left:0;
  right:0;

  height:65px;

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

  padding:0 16px;

  box-sizing:border-box;

  background:
  rgba(7,17,31,.92);

  backdrop-filter:
  blur(12px);

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

  z-index:9999;

}


/* BACK BUTTON */

.header-back{

  width:38px;
  height:38px;

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

  border-radius:50%;

  background:
  rgba(255,255,255,.08);

  color:#fff;

  font-size:18px;

  cursor:pointer;

}


/* TITLE */

.transactions-page .header-title{

  flex:1;

  text-align:center;

  font-size:18px;

  font-weight:700;

  color:#fff;

}


/* RIGHT ACTION */

.transactions-page .header-action{

  width:38px;
  height:38px;

}




.history-icon i{

  font-size:22px;

  color:#D4AF37;

}