/* ==========================
   Donate Page
========================== */

.donate-card{

    background:linear-gradient(135deg,#ff6b6b,#ff9800);

    color:#fff;

    border-radius:25px;

    padding:25px;

    margin:20px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.donate-card h2{

    margin-bottom:15px;

    font-size:24px;

}

.donate-card p{

    line-height:1.8;

    font-size:18px;

}

.payment-card{

    background:#fff;

    border-radius:20px;

    padding:20px;

    margin:20px;

    text-align:center;

    box-shadow:0 6px 20px rgba(0,0,0,.08);

}

.payment-card h3{

    font-size:24px;

    margin-bottom:15px;

}

.number{

    font-size:24px;

    font-weight:bold;

    color:#1976D2;

    margin-bottom:15px;

    letter-spacing:1px;

}

.copy-btn{

    width:100%;

    border:none;

    background:#1976D2;

    color:#fff;

    padding:14px;

    border-radius:12px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

.copy-btn:active{

    transform:scale(.97);

}

.qr-box{

    margin-top:20px;

}

.qr-box img{

    width:200px;

    max-width:100%;

    border-radius:15px;

    border:4px solid #eee;

}

.thanks-card{

    background:#FFF8E1;

    border-radius:20px;

    margin:20px;

    padding:25px;

    text-align:center;

    color:#555;

    font-size:17px;

    line-height:1.8;

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

}

.toast{

    position:fixed;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    background:#323232;

    color:#fff;

    padding:12px 20px;

    border-radius:30px;

    font-size:15px;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9999;

}

.toast.show{

    opacity:1;

    visibility:visible;

}

@media(max-width:600px){

    .donate-card{

        margin:15px;

        padding:20px;

    }

    .payment-card{

        margin:15px;

    }

    .number{

        font-size:20px;

    }

    .qr-box img{

        width:170px;

    }

}
.wallet-logo{
    width:28px;
    height:28px;
    vertical-align:middle;
    margin-right:8px;
    border-radius:50%;
}

.donate-brand{

    text-align:center;

    margin:20px 0 25px;

}

.donate-brand img{

    width:90px;

    height:90px;

    border-radius:22px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.donate-brand h2{

    margin:12px 0 5px;

    color:#0d6efd;

    font-size:26px;

}

.donate-brand p{

    color:#666;

    font-size:15px;

}

.donate-footer{

    text-align:center;

    color:#777;

    font-size:14px;

    margin:30px 0 20px;

}

/* ===== Donate Header ===== */

.donate-header{

    background:linear-gradient(135deg,#1e88e5,#1976d2);

    color:#fff;

    text-align:center;

    padding:20px 15px 25px;

    border-radius:0 0 25px 25px;

    position:relative;

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

}

.header-logo{

    width:60px;
    height:60px;
    border-radius:18px;
    background:#fff;
    padding:3px;
    box-shadow:0 5px 15px rgba(0,0,0,.2);
    margin-bottom:6px;

}

.header-content h1{

    margin:0;
    font-size:28px;
    font-weight:700;
}

.header-content p{

    margin-top:8px;

    font-size:16px;

    opacity:.95;

}

.page-content{

    margin-top:20px;

}

.qr-box img{

    width:180px;

    border-radius:15px;

    background:#fff;

    padding:8px;

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

    transition:.3s;

}

.qr-box img:active{

    transform:scale(1.05);

}

.copy-btn{

    width:100%;

    background:#1976d2;

    color:#fff;

    border:none;

    border-radius:14px;

    padding:14px;

    font-size:16px;

    font-weight:bold;

    transition:.25s;

}

.copy-btn:active{

    transform:scale(.97);

}

.toast{

    position:fixed;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    background:#16a34a;

    color:#fff;

    padding:12px 20px;

    border-radius:30px;

    opacity:0;

    transition:.3s;

    z-index:9999;

}

.toast.show{

    opacity:1;

}

.bkash-card{
    background:linear-gradient(to right,#fff,#fff6fa);
}

.nagad-card{
    background:linear-gradient(to right,#fff,#fff8f0);
}

.rocket-card{
    background:linear-gradient(to right,#fff,#faf4ff);
}

.qr-preview{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.qr-preview img{
    width:90%;
    max-width:400px;
    border-radius:15px;
    background:#fff;
    padding:10px;
}

/* =========================================
   SMART PEKUA
   Donate Page - Mobile Polish
========================================= */


/* =========================================
   Donate Header
========================================= */

.donate-header {

    position: relative;

    width: 100%;
    box-sizing: border-box;

    background: linear-gradient(
        135deg,
        #1E88E5,
        #2196F3
    );

    color: #fff;
    padding: 16px 18px 20px;
    border-radius: 0 0 28px 28px;
    box-shadow:
        0 6px 18px rgba(30, 136, 229, 0.20);
}


/* Header Content */

.donate-header .header-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 0;

}


/* Logo */

.donate-header .header-logo {

    width: 78px;
    height: 78px;

    object-fit: contain;

    background: #fff;

    border-radius: 20px;

    padding: 5px;

    box-sizing: border-box;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.15);

    margin: 0 0 10px;

}


/* Header Title */

.donate-header h1 {

    margin: 0;
    color: #fff;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;

}


/* Subtitle */

.donate-header p {

    margin: 4px 0 0;

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

    font-size: 14px;

    line-height: 1.4;

}


/* Back Button */

.donate-header .back-btn {

    position: absolute;
    left: 16px;
    top: 21%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    text-decoration: none;
    z-index: 5;

}


/* =========================================
   Donation Page Spacing
========================================= */

.donate-page {

    padding-top: 3px;

    padding-bottom: 105px;

}


/* =========================================
   Toast
========================================= */

.toast {

    position: fixed;

    left: 50%;

    bottom: 92px;

    transform:
        translateX(-50%)
        translateY(15px);

    width: max-content;

    max-width: calc(100% - 40px);

    box-sizing: border-box;

    padding: 12px 20px;

    background: #222;

    color: #fff;

    border-radius: 30px;

    font-size: 14px;

    line-height: 1.4;

    text-align: center;

    white-space: nowrap;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    z-index: 100001;

}


/* Toast Visible */

.toast.show {

    opacity: 1;

    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);

}


/* =========================================
   Mobile
========================================= */

@media (max-width: 600px) {


    .toast {

        bottom: 88px;

        max-width: calc(100% - 30px);

        padding: 11px 18px;

        font-size: 13px;

    }

}


/* =========================================
   Very Small Screen
========================================= */

@media (max-width: 380px) {

    .donate-header {

        padding: 12px 14px 16px;

    }


    .donate-header .header-logo {

        width: 62px;
        height: 62px;

        border-radius: 16px;

    }


    .donate-header h1 {

        font-size: 21px;

    }


    .donate-header p {

        font-size: 11px;

    }


    .donate-header .back-btn {

        left: 10px;

        width: 38px;
        height: 38px;

        font-size: 24px;

    }


    .toast {

        bottom: 84px;

        font-size: 12px;

        padding: 10px 16px;

    }

}