/* =========================================================
   KABAR WALLET PAGE
========================================================= */

.wallet-history-panel{
  margin-top:24px;
  padding:26px;
  border:1px solid #dbe7f5;
  border-radius:24px;
  background:#f9fcff;
  box-shadow:0 16px 40px rgba(15,46,89,.08);
}

.wallet-history-panel .panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.wallet-history-panel .panel-head h2{
  margin:0;
  font-size:24px;
  font-weight:900;
  color:#071f48;
}

.wallet-history{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.wallet-history-item{
  position:relative;
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 165px;
  align-items:center;
  gap:18px;
  padding:20px 22px;
  border:1px solid #dce7f3;
  border-radius:18px;
  background:#fff;
  box-shadow:0 9px 24px rgba(17,48,88,.06);
  overflow:hidden;
}

.wallet-history-item::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:5px;
  height:100%;
  background:#6682a3;
}

.wallet-history-item.credit::before{
  background:#16a274;
}

.wallet-history-item.debit::before{
  background:#df5562;
}

.wallet-history-item.neutral::before{
  background:#326ee8;
}

.wallet-history-icon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:17px;
  background:#edf3fa;
  color:#345b82;
  font-size:25px;
  font-weight:900;
}

.wallet-history-item.credit .wallet-history-icon{
  background:#e8f9f2;
  color:#12805d;
}

.wallet-history-item.debit .wallet-history-icon{
  background:#fff0f2;
  color:#c84350;
}

.wallet-history-item.neutral .wallet-history-icon{
  background:#edf3ff;
  color:#285ac7;
}

.wallet-history-info{
  min-width:0;
}

.wallet-history-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.wallet-history-title strong{
  color:#09244b;
  font-size:18px;
  font-weight:900;
}

.wallet-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:4px 11px;
  border-radius:999px;
  background:#edf2f7;
  color:#516981;
  font-size:12px;
  font-weight:800;
}

.wallet-status.completed{
  background:#e7f8f1;
  color:#107c59;
}

.wallet-status.pending{
  background:#fff5d8;
  color:#936500;
}

.wallet-status.failed,
.wallet-status.cancelled{
  background:#ffecef;
  color:#bd3947;
}

.wallet-history-date{
  margin-top:7px;
  color:#71849a;
  font-size:13px;
  font-weight:600;
}

.wallet-history-balances{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:13px;
}

.wallet-history-balances span{
  display:flex;
  align-items:center;
  gap:6px;
  color:#718298;
  font-size:12px;
}

.wallet-history-balances b{
  color:#234768;
  font-size:13px;
  font-weight:900;
}

.wallet-history-balances .balance-arrow{
  color:#8ea2b7;
  font-size:18px;
}

.wallet-history-amount{
  direction:rtl;
  text-align:left;
}

.wallet-history-amount strong{
  display:block;
  color:#355976;
  font-size:24px;
  font-weight:950;
  line-height:1.2;
}

.wallet-history-item.credit .wallet-history-amount strong{
  color:#10815d;
}

.wallet-history-item.debit .wallet-history-amount strong{
  color:#d24552;
}

.wallet-history-amount small{
  display:block;
  margin-top:6px;
  color:#8293a7;
  font-size:12px;
  font-weight:700;
}

.wallet-history-empty{
  min-height:160px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:30px;
  border:1px dashed #c9d8e8;
  border-radius:18px;
  background:#f7fbff;
  text-align:center;
}

.wallet-history-empty span{
  font-size:36px;
  color:#7190af;
}

.wallet-history-empty strong{
  color:#173b62;
  font-size:17px;
}

.wallet-history-empty small{
  color:#7b8da1;
  font-size:13px;
}

@media(max-width:800px){
  .wallet-history-panel{
    padding:16px;
    border-radius:19px;
  }

  .wallet-history-panel .panel-head h2{
    font-size:20px;
  }

  .wallet-history-item{
    grid-template-columns:48px minmax(0,1fr);
    gap:12px;
    padding:16px;
  }

  .wallet-history-icon{
    width:46px;
    height:46px;
    border-radius:14px;
    font-size:21px;
  }

  .wallet-history-title strong{
    font-size:16px;
  }

  .wallet-history-amount{
    grid-column:1 / -1;
    margin-top:4px;
    padding-top:13px;
    border-top:1px solid #edf2f7;
    text-align:right;
  }

  .wallet-history-amount strong{
    font-size:21px;
  }

  .wallet-history-balances{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }

  .wallet-history-balances .balance-arrow{
    display:none;
  }
}