/* ===============================
   GLOBAL MODAL OVERLAY
================================ */

.modal-overlay{
  position:fixed;
  inset:0;

  width:100%;
  height:100%;

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

  padding:20px;
  box-sizing:border-box;

  background:rgba(0,0,0,.72);

  backdrop-filter:blur(6px);

  z-index:999999999;
}


/* ===============================
   MODAL BOX
================================ */

.modal-box{
  width:100%;
  max-width:360px;

  background:#111827;

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

  border-radius:30px;

  padding:30px 24px;

  box-sizing:border-box;

  text-align:center;

  animation:modalPop .25s ease;

  box-shadow:
  0 20px 60px rgba(0,0,0,.45);
}


/* ===============================
   ICON
================================ */

.modal-icon{
  width:90px;
  height:90px;

  margin:0 auto 20px;

  border-radius:50%;

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

  font-size:42px;
}


/* SUCCESS */

.modal-icon.success{
  background:
  linear-gradient(
    135deg,
    #00D492,
    #00A884
  );

  box-shadow:
  0 10px 30px rgba(0,212,146,.35);
}


/* ERROR */

.modal-icon.error{
  background:
  linear-gradient(
    135deg,
    #FF5A5A,
    #DC2626
  );

  box-shadow:
  0 10px 30px rgba(255,90,90,.35);
}


/* ===============================
   TITLE
================================ */

.modal-box h2{
  margin:0;
  color:white;
  font-size:24px;
  font-weight:800;
}


/* ===============================
   MESSAGE
================================ */

.modal-box p{
  margin-top:14px;

  color:rgba(255,255,255,.72);

  font-size:14px;

  line-height:1.6;
}


/* ===============================
   BUTTON
================================ */

#closeModalBtn{
  width:100%;
  height:56px;

  margin-top:26px;

  border:none;

  border-radius:18px;

  background:
  linear-gradient(
    135deg,
    #00D492,
    #00A884
  );

  color:white;

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

  cursor:pointer;

  transition:.2s;
}


/* CLICK EFFECT */

#closeModalBtn:active{
  transform:scale(.97);
}


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

@keyframes modalPop{

  from{
    transform:scale(.88);
    opacity:0;
  }

  to{
    transform:scale(1);
    opacity:1;
  }

}


/* ===============================
   MOBILE
================================ */

@media (max-width:380px){

  .modal-box{
    padding:26px 18px;
    border-radius:26px;
  }

  .modal-icon{
    width:80px;
    height:80px;
    font-size:36px;
  }

  .modal-box h2{
    font-size:22px;
  }

}





/* ==================================
   TRANSACTION DETAILS MODAL
================================== */

.tx-modal-box{

  width:100%;
  max-width:380px;

  background:#111827;

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

  border-radius:30px;

  padding:28px 22px;

  box-sizing:border-box;

  color:white;

  animation:modalPop .25s ease;

  box-shadow:
  0 20px 60px rgba(0,0,0,.45);

}


.tx-modal-header{

  text-align:center;

}


.tx-modal-header h2{

  margin:0;

  font-size:24px;

  font-weight:800;

}


/* ICON */

.tx-status-icon{

  width:90px;

  height:90px;

  margin:22px auto;

  border-radius:50%;

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:42px;

  background:
  linear-gradient(
    135deg,
    #00D492,
    #00A884
  );

  box-shadow:
  0 10px 30px rgba(0,212,146,.35);

}


/* AMOUNT */

.tx-modal-amount{

  text-align:center;

  font-size:34px;

  font-weight:800;

  margin-bottom:28px;

  color:#00D492;

}


/* DETAILS */

.tx-modal-details{

  display:flex;

  flex-direction:column;

  gap:14px;

}


.tx-modal-details div{

  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:10px;

  padding-bottom:12px;

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

}


.tx-modal-details span{

  opacity:.7;

  font-size:14px;

}


.tx-modal-details strong{

  font-size:14px;

  text-align:right;

  word-break:break-word;

}


/* BUTTON */

.tx-modal-box button{

  width:100%;

  height:56px;

  margin-top:26px;

  border:none;

  border-radius:18px;

  background:
  linear-gradient(
    135deg,
    #00D492,
    #00A884
  );

  color:white;

  font-size:15px;

  font-weight:800;

  cursor:pointer;

}


.tx-modal-box button:active{

  transform:scale(.97);

}






.tx-modal-service-icon{

  width:70px;

  height:70px;

  border-radius:50%;

  background:rgba(
    212,
    175,
    55,
    .12
  );

  display:flex;

  align-items:center;

  justify-content:center;

  margin:0 auto 15px;

}

.tx-modal-service-icon i{

  font-size:30px;

  color:#D4AF37;

}

.tx-status-badge{

  display:inline-block;

  margin-top:10px;

  padding:6px 14px;

  border-radius:20px;

  font-size:12px;

  text-transform:capitalize;

}

.tx-status-badge.success{

  background:#00D49222;

  color:#00D492;

}

.tx-status-badge.pending{

  background:#FFC10722;

  color:#FFC107;

}

.tx-status-badge.failed{

  background:#FF4D4D22;

  color:#FF4D4D;

}