/* =====================================
payment.css
Modern Payment Modal UI
===================================== */

/* MAIN WRAP */
.payWrap{
padding:28px;
background:#ffffff;
border-radius:18px;
max-width:520px;
margin:auto;
box-sizing:border-box;
}

/* HEADER */
.payHead{
text-align:center;
margin-bottom:22px;
}

.payHead h2{
margin:0;
font-size:26px;
font-weight:800;
color:#111827;
}

.paySub{
margin-top:6px;
font-size:14px;
color:#6b7280;
}

/* SUMMARY CARD */
.paySummary{
background:#f8fafc;
border:1px solid #e5e7eb;
border-radius:16px;
padding:18px;
margin-bottom:22px;
}

.sumRow{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 0;
border-bottom:1px solid #edf2f7;
font-size:15px;
}

.sumRow:last-child{
border-bottom:none;
padding-bottom:0;
}

.sumRow span{
color:#6b7280;
font-weight:600;
}

.sumRow b{
color:#111827;
font-weight:800;
}

.sumRow .amt{
font-size:22px;
color:#2563eb;
}

/* LABEL */
.payLabel{
font-size:14px;
font-weight:700;
color:#374151;
margin-bottom:12px;
}

/* METHODS */
.payMethods{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin-bottom:24px;
}

.methodBtn{
border:1px solid #d1d5db;
background:#fff;
padding:14px;
border-radius:14px;
font-size:15px;
font-weight:700;
cursor:pointer;
transition:all .18s ease;
}

.methodBtn:hover{
transform:translateY(-2px);
border-color:#2563eb;
}

.methodBtn.active{
background:#eff6ff;
border-color:#2563eb;
color:#2563eb;
box-shadow:0 0 0 2px rgba(37,99,235,.08);
}

/* ACTIONS */
.regActions{
display:flex;
gap:12px;
margin-top:10px;
}

.regBtn{
flex:1;
border:none;
padding:14px;
border-radius:14px;
font-size:15px;
font-weight:800;
cursor:pointer;
transition:.2s;
}

.regBtn.primary{
background:#2563eb;
color:#fff;
}

.regBtn.primary:hover{
background:#1d4ed8;
}

.regBtn.light{
background:#f3f4f6;
color:#111827;
}

.regBtn.light:hover{
background:#e5e7eb;
}

/* LOADER SCREEN */
.paymentLoader{
min-height:420px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:35px;
background:#fff;
border-radius:18px;
}

.loaderTitle{
font-size:26px;
font-weight:800;
color:#111827;
margin-top:18px;
}

.loaderSub{
font-size:15px;
color:#6b7280;
margin-top:8px;
}

.loaderSub2{
font-size:13px;
color:#9ca3af;
margin-top:6px;
}

/* SPINNER */
.spin{
width:34px;
height:34px;
border:4px solid #e5e7eb;
border-top:4px solid #2563eb;
border-radius:50%;
animation:spin .8s linear infinite;
}

.spin.large{
width:54px;
height:54px;
border-width:5px;
}

@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

/* CLOSE BUTTON */
.regClose{
position:absolute;
top:16px;
right:18px;
font-size:26px;
cursor:pointer;
font-weight:700;
color:#6b7280;
z-index:10;
}

.regClose:hover{
color:#111827;
}

/* MOBILE */
@media(max-width:600px){

.payWrap{
padding:20px;
border-radius:16px;
}

.payMethods{
grid-template-columns:1fr;
}

.regActions{
flex-direction:column;
}

.loaderTitle{
font-size:22px;
}

}

.receiptModal{
    position:fixed;
    inset:0;

    background:
    rgba(15,23,42,.65);

    backdrop-filter:blur(8px);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:99999;
}

.receiptCard{
    width:420px;

    background:#fff;

    border-radius:28px;

    padding:32px;

    text-align:center;

    animation:pop .25s ease;

    box-shadow:
    0 25px 60px rgba(15,23,42,.2);
}

.successIcon{
    width:82px;
    height:82px;

    margin:auto auto 18px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #22c55e,
        #16a34a
    );

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:38px;

    box-shadow:
    0 14px 30px rgba(34,197,94,.25);
}

.receiptBox{
    margin-top:26px;

    background:#f8fafc;

    border-radius:20px;

    padding:20px;

    text-align:left;
}

.row{
    display:flex;
    justify-content:space-between;

    padding:12px 0;

    border-bottom:
    1px solid #e5e7eb;
}

.row:last-child{
    border-bottom:none;
}