* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;}
html, body {min-height: 100vh;}
body {background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);padding: 20px 20px;display: flex;align-items: center;justify-content: center;}
.wrapper {max-width: 480px;width: 100%;}
.payment-card {background: rgba(30, 41, 59, 0.55);backdrop-filter: blur(22px) saturate(180%);-webkit-backdrop-filter: blur(22px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 24px;overflow: hidden;box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);transition: all 0.3s ease;}
.payment-card:hover {box-shadow: 0 16px 50px rgba(0, 0, 0, 0.3);}
.card-header {background: linear-gradient(135deg, rgba(30, 64, 175, 0.7), rgba(59, 130, 246, 0.7));backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);padding: 40px 28px;text-align: center;position: relative;border-bottom: 1px solid rgba(255,255,255,0.08);}
.back-btn {position: absolute;top: 24px;right: 28px;color: rgba(255, 255, 255, 0.85);text-decoration: none;font-size: 14px;font-weight: 500;transition: 0.2s;}
.back-btn:hover {color: #fff;}
.header-title {color: #fff;font-size: 26px;font-weight: 600;margin-bottom: 8px;}
.header-desc {color: rgba(255, 255, 255, 0.75);font-size: 15px;}
.card-body {padding: 36px 28px;}
.form-group {margin-bottom: 26px;}
.form-label {font-size: 14px;color: #e2e8f0;margin-bottom: 10px;display: block;font-weight: 500;}
.form-input {width: 100%;height: 52px;background: rgba(48, 56, 70, 0.4);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 14px;padding: 0 18px;font-size: 15px;color: #f1f5f9;transition: all 0.3s ease;backdrop-filter: blur(6px);}
.form-input:focus {outline: none;border-color: rgba(59, 130, 246, 0.4);background: rgba(48, 56, 70, 0.6);box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);}
.form-input:disabled {color: #8892a0;background: rgba(30, 41, 59, 0.3);}
.success-container {background: rgba(16, 185, 129, 0.1);border: 1px solid rgba(16, 185, 129, 0.25);border-radius: 16px;padding: 30px 20px;text-align: center;margin-bottom: 26px;backdrop-filter: blur(8px);}
.success-icon {font-size: 44px;color: #10b981;margin-bottom: 14px;}
.success-title {font-size: 20px;color: #d1fae5;font-weight: 600;margin-bottom: 8px;}
.success-desc {font-size: 14px;color: #94a3b8;}
.payment-methods {margin-top: 18px;}
.pay-button {width: 100%;height: 56px;background: rgba(48, 56, 70, 0.4);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 14px;display: flex;align-items: center;justify-content: center;gap: 12px;font-size: 15px;color: #e2e8f0;cursor: pointer;transition: all 0.3s ease;margin-bottom: 14px;backdrop-filter: blur(6px);}
.pay-button:hover {background: rgba(59, 130, 246, 0.15);border-color: rgba(59, 130, 246, 0.4);transform: translateY(-3px);box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15);color: #fff;}
.pay-button img {height: 26px;}
.card-footer {background: rgba(26, 36, 53, 0.5);backdrop-filter: blur(8px);padding: 22px;text-align: center;font-size: 13px;color: #64748b;border-top: 1px solid rgba(255, 255, 255, 0.05);}
.toast {position: fixed;top: 32px;left: 50%;transform: translateX(-50%);background: rgba(30, 41, 59, 0.85);backdrop-filter: blur(12px);color: #fff;padding: 14px 26px;border-radius: 14px;font-size: 14px;z-index: 99999;opacity: 0;border: 1px solid rgba(255,255,255,0.08);transition: opacity 0.3s ease;}
.toast.show {opacity: 1;}
.loading-overlay {position: fixed;inset: 0;background: rgba(15, 23, 42, 0.6);backdrop-filter: blur(6px);display: flex;align-items: center;justify-content: center;z-index: 99998;}
.loading-spinner {width: 52px;height: 52px;border: 4px solid rgba(255,255,255,0.1);border-top-color: #3b82f6;border-radius: 50%;animation: spin 0.8s linear infinite;}
@keyframes spin {to { transform: rotate(360deg); }}