@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.grcg-container{
 max-width:1450px;margin:40px auto;padding:34px;
 background:#f7faff;border-radius:28px;
 display:grid;grid-template-columns:1.05fr .85fr .7fr;
 gap:28px;font-family:Inter,Arial,sans-serif;color:#0f172a
}
.grcg-panel,.info-card{
 background:#fff;border:1px solid #e6edf5;border-radius:24px;
 padding:32px;box-shadow:0 10px 30px rgba(15,23,42,.06)
}
.grcg-panel h1{font-size:30px;line-height:1.25;margin:0 0 8px;font-weight:800}
.preview-wrap h2{font-size:22px;margin:0 0 18px;font-weight:700}
.subtitle{font-size:15px;color:#64748b;margin-bottom:26px}
.field{height:64px;background:#fff;border:1px solid #d9e3ef;border-radius:14px;margin:14px 0;display:flex;align-items:center;padding:0 18px}
.field span{font-size:20px;width:40px}
.field input{border:0;outline:0;font-family:inherit;font-size:16px;width:100%}
.field input::placeholder{color:#94a3b8}
.grcg-panel button,#download-card{
 height:58px;border:0;border-radius:14px;width:100%;
 font-family:inherit;font-size:16px;font-weight:700;
 cursor:pointer;background:#2563eb;color:white;
 box-shadow:0 8px 20px rgba(37,99,235,.22)
}
#review-canvas{width:100%;height:auto;border-radius:22px;background:white}
.info-card{padding:26px;margin-bottom:18px}
.info-card h3{font-size:18px;margin:0 0 14px}
.info-card p{font-size:16px;line-height:1.6;color:#475569}
.info-card:nth-child(1){background:#eff6ff;border-color:#dbeafe}
.info-card:nth-child(1) h3{color:#2563eb}
.info-card:nth-child(2){background:#ecfdf5;border-color:#d1fae5}
.info-card:nth-child(2) h3{color:#059669}
.info-card:nth-child(3){background:#fffbeb;border-color:#fef3c7}
.info-card:nth-child(3) h3{color:#d97706}
@media(max-width:1000px){.grcg-container{grid-template-columns:1fr}}

.download-locked{
background:transparent!important;
color:#2563eb!important;
border:1px solid #2563eb!important;
box-shadow:none!important;
}
.payment-modal{
display:none;
position:fixed;
inset:0;
background:rgba(15,23,42,.65);
backdrop-filter:blur(8px);
z-index:9999;
align-items:center;
justify-content:center;
font-family:Inter,Arial,sans-serif;
padding:20px;
}

.payment-modal.show{
display:flex;
animation:modalFade .25s ease;
}

@keyframes modalFade{
from{opacity:0}
to{opacity:1}
}

.payment-box{
width:min(460px,100%);
background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
border-radius:28px;
padding:36px;
box-shadow:0 30px 80px rgba(15,23,42,.25);
position:relative;
border:1px solid rgba(255,255,255,.8);
}

.payment-box h2{
margin:0 0 10px;
font-size:28px;
font-weight:800;
color:#0f172a;
letter-spacing:-.5px;
}

.payment-box p{
color:#64748b;
line-height:1.6;
margin-bottom:24px;
}

.payment-close{
position:absolute;
top:16px;
right:16px;
width:36px !important;
height:36px !important;
min-width:36px;
max-width:36px;
padding:0 !important;
margin:0;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #e2e8f0;
border-radius:50%;
background:#f8fafc;
color:#475569;
font-size:18px;
font-weight:700;
line-height:1;
cursor:pointer;
box-shadow:0 8px 20px rgba(15,23,42,.12);
transition:background .2s ease,color .2s ease,transform .2s ease;
z-index:99;
}

.payment-close:hover{
width:36px !important;
height:36px !important;
background:#2563eb;
border-color:#2563eb;
color:#ffffff;
transform:rotate(90deg);
box-shadow:0 12px 25px rgba(37,99,235,.25);
}


.payment-method{
background:white;
border:1px solid #e2e8f0;
border-radius:18px;
padding:18px 20px;
margin:14px 0;
line-height:1.8;
color:#334155;
box-shadow:0 8px 20px rgba(15,23,42,.05);
}

.payment-method strong{
color:#1d4ed8;
font-size:16px;
}

#payment-proof{
width:100%;
margin:14px 0;
padding:14px;
border:2px dashed #cbd5e1;
border-radius:14px;
background:#fff;
}

#submit-payment{
width:100%;
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:white;
border:0;
border-radius:14px;
padding:15px;
font-weight:800;
font-size:15px;
cursor:pointer;
box-shadow:0 12px 25px rgba(37,99,235,.25);
transition:.2s;
}

#submit-payment:hover{
transform:translateY(-1px);
}

.payment-status{
margin-top:16px;
background:#eff6ff;
color:#2563eb;
padding:13px;
border-radius:14px;
text-align:center;
font-weight:600;
}

.copy-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.copy-btn{
border:0;
background:transparent !important;
color:#64748b;
border-radius:50%;
width:28px !important;
height:28px !important;
min-width:28px;
padding:0 !important;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:15px;
line-height:1;
box-shadow:none !important;
transition:all .2s ease;
}

.copy-btn:hover{
background:transparent !important;
color:#2563eb;
transform:scale(1.12);
}
.payment-price{
background:#eff6ff;
}