@use "../../../../../styles/abstracts/variables" as *;

/* ===========================================================
   TRANSACTION SUMMARY MODAL
=========================================================== */

.modalOverlay {
  position: fixed;
  inset: 0;

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

  padding: 1rem;

  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);

  z-index: 9999;

  animation: fadeIn .25s ease;
}

.modalContent {
  position: relative;

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

  padding: 2rem;

  border-radius: 20px;

  background: linear-gradient(
    180deg,
    rgba(27, 27, 27, .98),
    rgba(18, 18, 18, .98)
  );

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

  box-shadow:
    0 28px 70px rgba(0,0,0,.45),
    0 8px 20px rgba(0,0,0,.22);

  color: $col-white;

  animation: slideUp .28s ease;
}

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

.closeBtn {
  position: absolute;

  top: 1rem;
  right: 1rem;

  width: 38px;
  height: 38px;

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

  border-radius: 12px;

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

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

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

  cursor: pointer;

  transition: .25s ease;

  &:hover{
    background: rgba(255,255,255,.08);
    color: $col-white;
  }
}

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

.header{

  margin-bottom: 2rem;

  h2{

    font-size: 1.15rem;

    font-weight: 600;

    margin-bottom: .65rem;

    color: $col-white;
  }

  p{

    font-size: .85rem;

    line-height: 1.75;

    color: rgba(255,255,255,.58);
  }

  &::after{

    content:"";

    display:block;

    width:100%;

    height:1px;

    margin-top:1.25rem;

    background:rgba(255,255,255,.06);
  }
}

/* ===========================================================
   TRANSACTION HERO
=========================================================== */

.transactionHero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  margin-bottom: 2rem;
}

.transactionIcon {
  width: 76px;
  height: 76px;

  border-radius: 50%;

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

  margin-bottom: 1.25rem;

  position: relative;

  transition: all .25s ease;

  svg {
    font-size: 1.8rem;
  }

  &::after {
    content: "";

    position: absolute;
    inset: -6px;

    border-radius: inherit;

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

.creditIcon {
  background: rgba(46,171,91,.12);

  color: $col-success-color;

  box-shadow:
    inset 0 0 0 1px rgba(46,171,91,.12);
}

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

  color: $col-danger-color;

  box-shadow:
    inset 0 0 0 1px rgba(239,68,68,.12);
}

.transactionStatus {

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

  gap: .45rem;

  padding: .45rem .9rem;

  border-radius: 999px;

  font-size: .78rem;
  font-weight: 600;

  margin-bottom: .85rem;

  letter-spacing: .02em;
}

.transactionStatusCredit {

  background: rgba(46,171,91,.10);

  color: $col-success-color;

  border: 1px solid rgba(46,171,91,.18);
}

.transactionStatusDebit {

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

  color: $col-danger-color;

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

.transactionTitle {

  font-size: .95rem;

  font-weight: 500;

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

  margin-bottom: .45rem;
}

.transactionAmount {

  font-size: 2.35rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing: -.04em;

  color: $col-white;

  margin-bottom: .8rem;
}

.transactionSubtext {

  max-width: 320px;

  font-size: .82rem;

  line-height: 1.7;

  color: rgba(255,255,255,.52);
}

/* ===========================================================
   DIVIDER
=========================================================== */

.divider {

  width: 100%;
  height: 1px;

  margin: 2rem 0;

  background: rgba(255,255,255,.06);
}

/* ===========================================================
   SUMMARY CARD
=========================================================== */

.summaryCard {

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

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

  border-radius: 18px;

  overflow: hidden;
}

/* ===========================================================
   SUMMARY ROW
=========================================================== */

.summaryRow {

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

  gap: 1rem;

  padding: 1rem 1.2rem;

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

  transition: background .2s ease;

  &:last-child{
    border-bottom: none;
  }

  &:hover{
    background: rgba(255,255,255,.02);
  }
}

/* ===========================================================
   LABEL
=========================================================== */

.summaryLabel{

  display:flex;
  flex-direction:column;

  gap:.3rem;

  flex:1;

  h6{

    margin:0;

    font-size:.72rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:rgba(255,255,255,.42);
  }

  span{

    font-size:.88rem;

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

    line-height:1.5;
  }
}

/* ===========================================================
   VALUE
=========================================================== */

.summaryValue{

  text-align:right;

  font-size:.9rem;

  font-weight:600;

  color:$col-white;

  word-break:break-word;
}

/* ===========================================================
   TRANSACTION ID
=========================================================== */

.transactionId{

  font-family:monospace;

  font-size:.82rem;

  letter-spacing:.04em;

  color:rgba(255,255,255,.82);
}

/* ===========================================================
   AMOUNT
=========================================================== */

.amount{

  font-size:.95rem;

  font-weight:700;

  color:$col-white;
}

/* ===========================================================
   DATE
=========================================================== */

.date{

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

  font-weight:500;
}

/* ===========================================================
   TYPE BADGES
=========================================================== */

.creditBadge,
.debitBadge{

  display:inline-flex;

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

  gap:.45rem;

  padding:.45rem .95rem;

  border-radius:999px;

  font-size:.75rem;

  font-weight:600;
}

.creditBadge{

  background:$col-success-bg;

  color:$col-success-color;

  border:1px solid rgba(46,171,91,.18);
}

.debitBadge{

  background:$col-danger-bg;

  color:$col-danger-color;

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

/* ===========================================================
   STATUS BADGES
=========================================================== */

.statusCompleted,
.statusPending,
.statusFailed{

  display:inline-flex;

  align-items:center;

  gap:.45rem;

  padding:.45rem .9rem;

  border-radius:999px;

  font-size:.74rem;

  font-weight:600;
}

.statusCompleted{

  background:$col-success-bg;

  color:$col-success-color;
}

.statusPending{

  background:rgba(247,147,24,.12);

  color:$col-orange;
}

.statusFailed{

  background:$col-danger-bg;

  color:$col-danger-color;
}

/* ===========================================================
   COPYABLE VALUES
=========================================================== */

.copyValue{

  display:flex;

  align-items:center;

  gap:.65rem;
}

.copyButton{

  width:28px;
  height:28px;

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

  border:none;

  border-radius:8px;

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

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

  cursor:pointer;

  transition:.2s ease;

  &:hover{

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

    color:$col-orange;
  }
}

/* ===========================================================
   FOOTER
=========================================================== */

.footer {

  margin-top: 2rem;

  display: flex;
  justify-content: flex-end;
  gap: 1rem;

  @media (max-width: 640px) {
    flex-direction: column-reverse;
  }
}

.closeButton {

  height: 48px;

  min-width: 140px;

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

  border-radius: 14px;

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

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

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

  font-size: .9rem;
  font-weight: 600;

  cursor: pointer;

  transition: .25s ease;

  &:hover {

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

    border-color: rgba(255,255,255,.14);

    color: $col-white;
  }

  @media (max-width:640px){

    width:100%;
  }
}

.primaryButton {

  height:48px;

  min-width:170px;

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

  border:none;

  border-radius:14px;

  background:$col-orange;

  color:$col-dark;

  font-size:.9rem;
  font-weight:700;

  cursor:pointer;

  transition:.25s ease;

  box-shadow:0 10px 25px rgba(247,147,24,.18);

  &:hover{

    transform:translateY(-1px);

    box-shadow:0 14px 30px rgba(247,147,24,.28);
  }

  &:active{

    transform:translateY(0);
  }

  @media(max-width:640px){

    width:100%;
  }
}

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

@media (max-width:768px){

  .modalOverlay{

    padding:1rem;

    align-items:flex-end;
  }

  .modalContent{

    max-width:100%;

    padding:1.5rem;

    border-radius:20px 20px 0 0;
  }

  .header{

    margin-bottom:1.5rem;

    h2{

      font-size:1.05rem;
    }

    p{

      font-size:.8rem;
    }
  }

  .transactionHero{

    margin-bottom:1.5rem;
  }

  .transactionIcon{

    width:64px;
    height:64px;

    svg{

      font-size:1.45rem;
    }
  }

  .transactionAmount{

    font-size:1.9rem;
  }

  .summaryCard{

    border-radius:16px;
  }

  .summaryRow{

    padding:.95rem 1rem;

    align-items:flex-start;
  }

  .summaryValue{

    font-size:.82rem;

    max-width:150px;
  }

  .copyValue{

    flex-wrap:wrap;

    justify-content:flex-end;
  }
}

/* ===========================================================
   SCROLLBAR
=========================================================== */

.modalOverlay{

  scrollbar-width:none;

  &::-webkit-scrollbar{

    display:none;
  }
}

/* ===========================================================
   ANIMATIONS
=========================================================== */

@keyframes fadeIn{

  from{

    opacity:0;
  }

  to{

    opacity:1;
  }
}

@keyframes slideUp{

  from{

    opacity:0;

    transform:
      translateY(14px)
      scale(.98);
  }

  to{

    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }
}

/* ===========================================================
   PREMIUM POLISH
=========================================================== */

.modalContent{

  overflow:hidden;

  &::before{

    content:"";

    position:absolute;

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

    height:1px;

    background:rgba(255,255,255,.05);
  }
}

.summaryCard{

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02);
}

.transactionAmount{

  letter-spacing:-1px;
}

.summaryRow:last-child{

  border-bottom:none;
}