/* ===========================================================
   Dream Gate Scholarship — Post-payment pages
   Shared by success.html and cancel.html
   =========================================================== */

.payment-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at top right, rgba(251, 191, 36, 0.12), transparent 45%),
    radial-gradient(ellipse at bottom left, rgba(37, 99, 235, 0.08), transparent 50%),
    var(--gray-50);
  display: flex;
  flex-direction: column;
}

.payment-shell {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 80px 24px;
}

.payment-card {
  background: var(--white);
  width: 100%;
  max-width: 580px;
  border-radius: 28px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: card-in 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.payment-banner {
  position: relative;
  padding: 56px 40px 32px;
  text-align: center;
  color: var(--white);
  overflow: hidden;
}
.payment-banner.success { background: linear-gradient(135deg, #059669, #10b981); }
.payment-banner.cancel  { background: linear-gradient(135deg, #b91c1c, #ef4444); }

.payment-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.10), transparent 50%);
  pointer-events: none;
}

.payment-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 4px solid rgba(255, 255, 255, 0.4);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  animation: pulse 1800ms ease-in-out infinite;
}
.payment-icon svg { width: 48px; height: 48px; color: var(--white); }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.payment-banner h1 {
  position: relative;
  z-index: 1;
  color: var(--white);
  font-size: 30px;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.payment-banner p {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15.5px;
  max-width: 440px;
  margin: 0 auto;
}

.payment-body {
  padding: 32px 40px 40px;
}

.detail-list {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--gray-50);
  border-radius: 12px;
  font-size: 14px;
}
.detail-row .label { color: var(--gray-500); font-weight: 500; }
.detail-row .value {
  color: var(--gray-900);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
.detail-row.highlight {
  background: linear-gradient(135deg, var(--primary-50), #fff);
  border: 1.5px solid var(--primary-100);
}
.detail-row.highlight .value {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--primary-800);
  font-weight: 800;
}

.reference-strip {
  background: var(--gray-900);
  color: var(--white);
  padding: 14px 20px;
  border-radius: 14px;
  text-align: center;
  margin-bottom: 24px;
}
.reference-strip .label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 4px;
}
.reference-strip .value {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
}

.next-steps {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 24px;
}
.next-steps h3 {
  font-size: 14px;
  color: #92400e;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.next-steps h3 svg { width: 16px; height: 16px; }
.next-steps ol {
  padding-left: 20px;
  list-style: decimal;
  color: #78350f;
  font-size: 13.5px;
  line-height: 1.6;
}

.payment-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.payment-actions .btn { flex: 1; min-width: 160px; }

.skeleton {
  background: linear-gradient(90deg, var(--gray-200), var(--gray-100), var(--gray-200));
  background-size: 200% 100%;
  border-radius: 6px;
  display: inline-block;
  width: 120px;
  height: 14px;
  animation: shimmer 1400ms linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 560px) {
  .payment-shell { padding: 48px 16px; }
  .payment-banner { padding: 40px 28px 28px; }
  .payment-banner h1 { font-size: 24px; }
  .payment-body { padding: 24px 24px 28px; }
  .payment-actions .btn { width: 100%; }
}