/* ============================================
   Payment Page Styles
   ============================================ */
.payment-hero {
  padding-top: calc(var(--nav-height) + var(--sp-3xl));
  padding-bottom: var(--sp-3xl);
  background: var(--grad-hero);
  text-align: center;
}

.payment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  max-width: 900px;
  margin: 0 auto;
}

.payment-card {
  background: var(--grad-glass);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--sp-2xl);
  text-align: center;
  backdrop-filter: blur(16px);
}

.payment-card h3 {
  margin-bottom: var(--sp-lg);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-sm);
}

.qr-container {
  width: 220px; height: 220px;
  margin: var(--sp-lg) auto;
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  display: flex; align-items: center; justify-content: center;
}

.qr-container img { width: 100%; height: 100%; object-fit: contain; }

.qr-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: #666;
  border: 2px dashed #ccc; border-radius: var(--radius-sm);
}

.upi-id-box {
  display: flex; align-items: center; gap: var(--sp-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem; margin-top: var(--sp-md);
}

.upi-id-box .upi-label { font-size: 0.8rem; color: var(--clr-text-muted); }
.upi-id-box .upi-value { font-weight: 600; font-family: monospace; flex: 1; }
.upi-id-box .copy-btn {
  cursor: pointer; color: var(--clr-accent); font-size: 0.85rem; font-weight: 600;
}
.upi-id-box .copy-btn:hover { text-decoration: underline; }

.payment-instructions {
  margin-top: var(--sp-xl);
  text-align: left;
}

.payment-instructions h4 { margin-bottom: var(--sp-md); }

.payment-instructions ol {
  list-style: decimal;
  padding-left: var(--sp-xl);
  display: flex; flex-direction: column; gap: var(--sp-sm);
}

.payment-instructions li {
  color: var(--clr-text-muted); font-size: 0.9rem;
}

.payment-status {
  margin-top: var(--sp-xl);
  padding: var(--sp-lg);
  border-radius: var(--radius-md);
  text-align: center;
}

.payment-status.pending {
  background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.2);
  color: var(--clr-warning);
}

.payment-status.confirmed {
  background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.2);
  color: var(--clr-success);
}

@media (max-width: 768px) {
  .payment-grid { grid-template-columns: 1fr; }
}