body background: linear-gradient(145deg, #f9fafc 0%, #eff2f8 100%); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
.btn-secondary:hover background: #f8fafc; border-color: #94a3b8; transform: translateY(-2px);
.amount-badge text-align: center; background: #f1f5f9; display: inline-block; width: auto; margin: 0 auto 1rem; padding: 0.3rem 1.2rem; border-radius: 40px; font-weight: 600; font-size: 1rem; color: #0f172a; background: #eef2ff; backdrop-filter: blur(2px); payment failed page design html codepen
.support-link a color: #dc2626; text-decoration: none; font-weight: 600; border-bottom: 1px dashed #dc2626;
/* decorative top bar (error accent) */ .status-bar height: 8px; background: linear-gradient(90deg, #ef4444, #f97316, #ef4444); width: 100%; body background: linear-gradient(145deg
/* icon & circle */ .icon-circle display: flex; justify-content: center; margin-bottom: 1.5rem;
/* micro-interactions */ button:active transform: translateY(1px); .btn-secondary:hover background: #f8fafc
.error-icon background: #fee2e2; width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -6px rgba(239, 68, 68, 0.2); transition: all 0.2s;
/* action buttons */ .action-buttons display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.8rem; justify-content: center;
.error-icon .cross-fill stroke: #b91c1c;