*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f7f7f7;
}

.invoice-page{
max-width:500px;
margin:auto;
background:#f7f7f7;
min-height:100vh;
}

/* HEADER */

.top-header{
height:85px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
border-bottom:1px solid #e5e5e5;
background:#f7f7f7;
}

.back-btn{
position:absolute;
left:20px;
font-size:28px;
color:#4b1f72;
text-decoration:none;
}

.top-header h1{
font-size:22px;
font-weight:700;
color:#111;
}

.share-btn{
position:absolute;
right:20px;
background:#4b1f72;
color:#fff;
border:none;
padding:12px 20px;
border-radius:8px;
font-size:14px;
font-weight:600;
cursor:pointer;
}

/* AMOUNT SECTION */

.amount-section{
padding:35px 25px;
text-align:center;
}

.amount-section h2{
font-size:42px;
font-weight:800;
color:#111;
margin-bottom:10px;
}

.amount-section h3{
font-size:18px;
font-weight:500;
letter-spacing:0.5px;
color:#222;
margin-bottom:10px;
}

.amount-section p{
font-size:15px;
color:#666;
}

/* TRANSFER PILL */

.type-pill{
margin:30px auto 0;
width:260px;
height:62px;
border:2px solid #4b1f72;
border-radius:40px;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
background:#fff;
}

.pill-icon{
width:38px;
height:38px;
border-radius:50%;
background:#f1ebf7;
display:flex;
align-items:center;
justify-content:center;
color:#4b1f72;
}

.type-pill span{
font-size:18px;
font-weight:500;
color:#111;
}

.arrow{
color:#777;
}

/* DETAILS */

.details{
padding:10px 25px 40px;
}

.detail-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 0;
border-bottom:1px solid #ddd;
}

.detail-left{
flex:1;
}

.detail-left label{
display:block;
font-size:14px;
color:#9b9b9b;
margin-bottom:6px;
}

.detail-left h4{
font-size:18px;
font-weight:600;
color:#111;
word-break:break-word;
}

.reference{
font-size:15px !important;
line-height:1.6;
}

.merchant-logo{
width:75px;
height:75px;
border-radius:50%;
overflow:hidden;
background:#f2f2f2;
display:flex;
align-items:center;
justify-content:center;
}

.merchant-logo img{
width:100%;
height:100%;
object-fit:cover;
}

.copy-btn{
background:none;
border:none;
font-size:22px;
color:#2ecc71;
cursor:pointer;
padding-left:10px;
}

/* MOBILE */

@media(max-width:480px){

.invoice-page{
max-width:100%;
}

.amount-section h2{
font-size:34px;
}

.type-pill{
width:230px;
height:58px;
}

.detail-left h4{
font-size:16px;
}

.reference{
font-size:14px !important;
}

.share-btn{
padding:10px 14px;
font-size:13px;
}

}