/*==================================
PAYMENT RECEIPT
==================================*/

.walletReceiptCard{

background:#fff;

margin:15px;

padding:30px 20px;

border-radius:18px;

text-align:center;

box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.receiptSuccess{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

background:#eafaf0;

display:flex;

align-items:center;

justify-content:center;

font-size:46px;

color:#16a34a;

margin-bottom:18px;

}

.walletReceiptCard h2{

margin:0;

font-size:24px;

font-weight:700;

color:#222;

}

.walletReceiptCard p{

margin:10px 0 20px;

font-size:14px;

line-height:22px;

color:#666;

}

.receiptAmount{

display:inline-block;

padding:12px 25px;

background:#16a34a;

color:#fff;

border-radius:30px;

font-size:26px;

font-weight:700;

}



/*==============================*/

.receiptDetails{

background:#fff;

margin:15px;

padding:18px;

border-radius:16px;

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

}

.receiptRow{

display:flex;

justify-content:space-between;

align-items:center;

padding:13px 0;

border-bottom:1px solid #f1f1f1;

}

.receiptRow:last-child{

border-bottom:none;

}

.receiptRow span{

font-size:14px;

color:#666;

}

.receiptRow b{

font-size:15px;

font-weight:700;

color:#222;

}

.receiptSuccessText{

color:#16a34a !important;

}



/*==============================*/

.walletReceiptButtons{

padding:18px;

display:flex;

flex-direction:column;

gap:12px;

}

.walletReceiptButtons .walletPrimaryBtn,

.walletReceiptButtons .walletSecondaryBtn{

width:100%;

}



/*==============================*/

.receiptDownloadIcon{

font-size:18px;

margin-right:8px;

}

.receiptShareIcon{

font-size:18px;

margin-right:8px;

}



/*==============================*/

.receiptBadge{

display:inline-flex;

align-items:center;

gap:6px;

padding:6px 14px;

background:#eafaf0;

color:#16a34a;

border-radius:30px;

font-size:13px;

font-weight:600;

margin-top:10px;

}



/*==============================*/

.receiptRef{

margin-top:12px;

font-size:13px;

color:#777;

word-break:break-all;

}



/*==============================*/

@media(max-width:480px){

.walletReceiptCard{

padding:24px 16px;

}

.receiptAmount{

font-size:22px;

padding:10px 20px;

}

.walletReceiptCard h2{

font-size:21px;

}

}