/* PAYMENT.CSS — shared by payment & success pages */
body {
  background:radial-gradient(ellipse at top,#0d2544 0%,var(--bg) 65%);
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:70px 16px 40px;
}

/* ── Payment page ── */
.pay-card { width:100%; max-width:400px; padding:0; overflow:hidden; }
.pay-actor-banner {
  width:100%; height:180px; object-fit:cover; object-position:top;
  display:block; border-radius:22px 22px 0 0;
}
.pay-body { padding:24px 22px 28px; }
.pay-actor-name { font-size:22px; font-weight:900; color:var(--text); margin-bottom:3px; }
.pay-actor-role { font-size:14px; color:var(--cyan); font-weight:600; margin-bottom:18px; }

.pay-summary {
  background:rgba(0,0,0,0.25); border-radius:14px;
  padding:16px; margin-bottom:20px;
}
.pay-summary-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 0; border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:14px;
}
.pay-summary-row:last-child { border-bottom:none; }
.pay-summary-row .lbl { color:var(--muted); font-weight:600; }
.pay-summary-row .val { color:var(--text);  font-weight:700; }
.pay-summary-row.total .val { font-size:20px; font-weight:900; color:var(--gold); }

.pay-note { font-size:12px; color:var(--muted); text-align:center; margin-bottom:18px; line-height:1.6; }

/* ── Success page ── */
.success-card { width:100%; max-width:380px; padding:44px 26px 36px; text-align:center; }

.success-icon {
  font-size:80px; display:block; margin-bottom:16px;
  animation:successPop 0.6s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
@keyframes successPop {
  from{transform:scale(0.3) rotate(-20deg);opacity:0;}
  to{transform:scale(1) rotate(0);opacity:1;}
}
@keyframes ripple {
  0%{box-shadow:0 0 0 0 rgba(0,230,118,0.35);}
  100%{box-shadow:0 0 0 40px rgba(0,230,118,0);}
}

.success-ring {
  width:120px; height:120px; border-radius:50%;
  background:rgba(0,230,118,0.1); border:2px solid var(--green);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px; font-size:52px;
  animation:ripple 2s ease-out infinite;
}

.success-title { font-size:26px; font-weight:900; color:var(--green); margin-bottom:10px; }
.success-msg   { font-size:14px; color:var(--muted); line-height:1.7; margin-bottom:24px; }

.booking-ref {
  background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.1);
  border-radius:12px; padding:14px 18px; margin-bottom:24px; text-align:center;
}
.booking-ref .ref-lbl { font-size:12px; color:var(--muted); font-weight:600; letter-spacing:1px; margin-bottom:4px; }
.booking-ref .ref-val { font-size:20px; font-weight:900; color:var(--gold); letter-spacing:3px; }

.success-actions { display:flex; flex-direction:column; gap:10px; }