/*=========================
WALLET HISTORY
==========================*/

.walletHistoryTop{

display:flex;

gap:10px;

overflow-x:auto;

padding:15px;

}

.walletHistoryTop::-webkit-scrollbar{

display:none;

}

.walletFilter{

border:none;

background:#ececec;

padding:10px 18px;

border-radius:30px;

font-size:13px;

font-weight:600;

white-space:nowrap;

cursor:pointer;

}

.walletFilter.active{

background:#0d6efd;

color:#fff;

}

.walletHistoryContainer{

padding:0 15px 20px;

}

.walletHistoryCard{

background:#fff;

border-radius:16px;

padding:15px;

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:12px;

box-shadow:0 5px 18px rgba(0,0,0,.07);

cursor:pointer;

transition:.25s;

}

.walletHistoryCard:hover{

transform:translateY(-2px);

}

.historyLeft{

display:flex;

align-items:center;

gap:14px;

}

.historyIcon{

width:52px;

height:52px;

border-radius:50%;

background:#eef5ff;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

}

.historyTitle{

font-size:16px;

font-weight:700;

color:#222;

}

.historyDate{

font-size:12px;

margin-top:5px;

color:#777;

}

.historyRight{

text-align:right;

}

.historyAmount{

font-size:17px;

font-weight:700;

color:#16a34a;

}

.historyStatus{

display:inline-block;

margin-top:8px;

padding:5px 12px;

border-radius:30px;

font-size:11px;

font-weight:700;

text-transform:uppercase;

}

.historyStatus.completed{

background:#e9f9ef;

color:#16a34a;

}

.historyStatus.pending{

background:#fff7df;

color:#ff9800;

}

.historyStatus.failed{

background:#fdeaea;

color:#dc2626;

}

.walletEmptyHistory{

padding:70px 20px;

text-align:center;

}

.walletEmptyHistory i{

font-size:70px;

color:#c8c8c8;

margin-bottom:18px;

}

.walletEmptyHistory h3{

margin:0;

font-size:22px;

color:#333;

}

.walletEmptyHistory p{

margin-top:12px;

color:#777;

font-size:14px;

line-height:22px;

}





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

.walletHistorySummary{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:10px;

padding:0 15px 15px;

}

.summaryCard{

background:#fff;

border-radius:14px;

padding:15px;

box-shadow:0 5px 16px rgba(0,0,0,.06);

text-align:center;

}

.summaryCard div{

font-size:12px;

color:#666;

margin-bottom:8px;

}

.summaryCard b{

font-size:18px;

color:#0d6efd;

}



/*=========================
SEARCH
==========================*/

.walletSearchBox{

background:#fff;

margin:0 15px 15px;

border-radius:14px;

padding:12px 15px;

display:flex;

align-items:center;

gap:10px;

box-shadow:0 5px 16px rgba(0,0,0,.06);

}

.walletSearchBox i{

color:#777;

}

.walletSearchBox input{

flex:1;

border:none;

outline:none;

font-size:14px;

background:transparent;

}