/* donation_style.css - Corporate look using #003E6F */
:root{
  --primary:#003E6F;
  --accent:#E63946;
  --muted:#6b7280;
  --card-bg:#ffffff;
  --page-bg:#f7f9fb;
  --radius:12px;
  --max-width:1180px;
}
*{box-sizing:border-box}
body{
  font-family:'Poppins',system-ui,Arial;
  background:var(--page-bg);
  color:#111827;
  margin:0;
  -webkit-font-smoothing:antialiased;
}

/* QR Popup Overlay */
.qr-popup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.75);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.qr-popup-content img {
  width: 320px;
  max-width: 90%;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  border: 3px solid #fff;
}

@media(max-width: 480px){
  .qr-popup-content img {
    width: 260px;
  }
}



.close-qr-btn {
  margin-top: 12px;
  padding: 8px 16px;
  background: #fff;
  color: #003E6F;
  border: 2px solid #003E6F;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.close-qr-btn:hover {
  background: #003E6F;
  color: #fff;
}


/* HERO */
.hero{
  background: linear-gradient(90deg, rgba(0,62,111,0.95), rgba(0,62,111,0.85));
  color:#fff;
  padding:34px 16px;
}
.hero-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.donate-panel { border: 2px solid red; }


.hero-text{max-width:720px}
.hero-text h1{font-size:28px;margin-bottom:10px;color:#fff}
.hero-text .lead{color:rgba(255,255,255,0.9);margin-bottom:12px}
.bullets{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex-wrap:wrap}
.bullets li{background:rgba(255,255,255,0.08);padding:8px 12px;border-radius:8px;font-weight:600;font-size:13px}

.hero-stats{display:flex;gap:16px;align-items:center}
.stat{background:rgba(255,255,255,0.08);padding:12px 18px;border-radius:10px;min-width:120px;text-align:center}
.stat-num{font-size:20px;font-weight:700;color:#fff}
.stat-label{font-size:12px;color:rgba(255,255,255,0.85)}

/* LAYOUT */
.container{max-width:var(--max-width);margin:26px auto;display:grid;grid-template-columns:360px 1fr;gap:24px;padding:0 16px}
.left-col .card, .right-col .card{background:var(--card-bg);border-radius:var(--radius);padding:18px;box-shadow:0 6px 18px rgba(2,6,23,0.06);}

/* DONOR LIST */
.donor-list{list-style:none;padding:0;margin:8px 0 0 0;max-height:470px;overflow:auto}
.donor-list li{display:flex;justify-content:space-between;padding:10px 8px;border-bottom:1px solid #f0f3f5;align-items:center}
.donor-list li .muted{color:var(--muted);font-size:12px}
.no-donors{color:var(--muted);padding:18px 8px}

/* UPI QR */
.upi-card{text-align:center;margin-top:16px}
.upi-card .qr-wrap{display:flex;justify-content:center;padding:12px}
.upi-card img{width:180px;height:180px;object-fit:contain;border-radius:8px;border:1px solid #efefef}

/* DONATION PANEL */
.donate-panel h2{color:var(--primary);margin:6px 0 8px}
.muted{color:var(--muted)}
.amount-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.amt-btn{padding:8px 14px;border-radius:25px;border:1px solid rgba(0,62,111,0.12);background:#fff;color:var(--primary);font-weight:700;cursor:pointer;transition:0.15s}
.amt-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(2,6,23,0.04)}
.amt-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 8px 22px rgba(0,62,111,0.12)}

.custom-amount{margin-bottom:14px}
.custom-amount label{display:block;margin-bottom:6px;color:var(--muted)}
.custom-amount input{width:180px;padding:10px;border-radius:8px;border:1px solid #e6edf5}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.form-row label{display:block;font-size:13px;margin-bottom:6px;color:var(--muted)}
.form-row input,.form-row textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #e6edf5;font-size:14px}
.form-row.full{grid-column:1 / -1}

.actions{display:flex;gap:12px;margin-top:14px}
.btn-primary{background:var(--primary);color:#fff;padding:12px 20px;border-radius:9px;border:none;cursor:pointer;font-weight:700;flex:1}
.btn-secondary{background:#fff;color:var(--primary);padding:12px 16px;border-radius:9px;border:1px solid #e6edf5;cursor:pointer;flex:1}

/* HISTORY TABLE */
.history-table-wrap{overflow:auto}
.history-table{width:100%;border-collapse:collapse;font-size:14px}
.history-table th,.history-table td{padding:10px 8px;text-align:left;border-bottom:1px solid #f2f4f6}
.history-table thead th{font-weight:700;color:var(--muted)}

/* FOOTER */
.site-footer{margin-top:30px;text-align:center;padding:20px;color:var(--muted)}

/* RESPONSIVE */
@media (max-width:980px){
  .container{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .hero-inner{flex-direction:column;align-items:flex-start}
  .hero-stats{width:100%;display:flex;justify-content:flex-start;gap:12px;margin-top:12px}
  .upi-card img{width:140px;height:140px}
}


/* UPI modal (corporate style) */
.upi-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6,10,15,0.6);
  z-index: 10050;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.upi-modal-panel {
  width: 520px;
  max-width: 96%;
  background: #ffffff;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  position: relative;
  font-family: 'Poppins', sans-serif;
}

.upi-close {
  position: absolute;
  right: 14px;
  top: 12px;
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #666;
}

.upi-modal h3 { margin: 0 0 8px; color: var(--primary); }
.upi-modal .muted { color: var(--muted); margin-bottom: 12px; }

.upi-modal .form-row { margin-bottom: 12px; }
.upi-modal label { display:block; font-size:13px; margin-bottom:6px; color:var(--muted); }
.upi-modal input[type="text"],
.upi-modal input[type="tel"],
.upi-modal input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e6edf5;
  font-size: 15px;
}

.upi-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
.upi-msg { margin-top:10px; color: var(--muted); font-size:13px; }

/* Responsive */
@media (max-width: 520px) {
  .upi-modal-panel { padding: 16px; }
  .upi-actions { flex-direction: column-reverse; }
  .upi-actions button { width: 100%; }
}