/* =============================================================
   PAYMENT PAGES — WIMT navy/gold theme
   ============================================================= */
:root {
  --navy: #0c1c3c; --navy-2: #13294b; --navy-soft: #1d3a66;
  --gold: #c8a24b; --gold-bright: #e0bd63; --gold-deep: #a8842f;
  --bg: #f7f4ed; --paper: #fff; --ink: #16213a; --muted: #5b6678; --line: #e6e2d8;
  --red: #c0392b; --red-light: #fdeceb; --ok: #1d7a4d; --ok-light: #e8f6ec;
  --font-display: "Fraunces", Georgia, serif; --font-body: "Outfit", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
.pay-body {
  font-family: var(--font-body); color: var(--ink);
  background:
    radial-gradient(circle at 80% 10%, rgba(200,162,75,.12), transparent 45%),
    linear-gradient(160deg, #0c1c3c 0%, #13294b 55%, #1d3a66 100%);
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pay-card {
  background: var(--paper); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
  padding: 34px 32px; width: 100%; max-width: 430px;
}
.pay-card.center { text-align: center; }
.pay-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 18px; transition: color .2s; }
.pay-back:hover { color: var(--gold-deep); }
.pay-header { text-align: center; margin-bottom: 22px; }
.pay-logo { width: 56px; height: 56px; margin: 0 auto 10px; }
.pay-header h1 { font-family: var(--font-display); font-size: 21px; color: var(--navy); margin-bottom: 4px; }
.pay-sub { font-size: 13px; color: var(--muted); }
.plan-icon { font-size: 38px; margin: 10px 0 4px; }
.plan-name { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.price-badge { display: inline-block; background: #f4ecd6; color: var(--gold-deep); font-family: var(--font-display); font-size: 28px; font-weight: 700; padding: 8px 26px; border-radius: 50px; margin: 10px 0 4px; }
.pay-divider { height: 1px; background: var(--line); margin: 18px 0; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 5px; }
.form-group input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 9px;
  font-size: 14px; outline: none; transition: border-color .2s; background: var(--bg); color: var(--ink); font-family: inherit;
}
.form-group input:focus { border-color: var(--gold); background: #fff; }
.form-group input.invalid { border-color: var(--red); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.amount-wrap { position: relative; }
.amount-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 700; color: var(--gold-deep); pointer-events: none; }
.amount-wrap input { padding-left: 52px; font-size: 18px; font-weight: 700; color: var(--navy); }
.quick-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.chip { padding: 4px 13px; border: 1.5px solid var(--line); border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--muted); background: #fff; transition: all .15s; font-family: inherit; }
.chip:hover { border-color: var(--gold); color: var(--gold-deep); }
.chip.active { border-color: var(--gold); background: #f4ecd6; color: var(--gold-deep); }

.pay-btn {
  width: 100%; padding: 14px; background: var(--gold); color: var(--navy);
  border: none; border-radius: 11px; font-size: 16px; font-weight: 700; cursor: pointer;
  margin-top: 6px; transition: background .2s, transform .2s; font-family: inherit;
}
.pay-btn:hover { background: var(--gold-bright); transform: translateY(-1px); }
.pay-btn:disabled { background: #ddd0a8; cursor: not-allowed; transform: none; }
.pay-btn--link { display: inline-block; width: auto; padding: 12px 34px; text-decoration: none; margin-top: 8px; }

.secure-note { text-align: center; font-size: 12px; color: #9aa3b1; margin-top: 14px; }
.secure-note span { color: var(--gold-deep); font-weight: 600; }

.error-msg { background: var(--red-light); border: 1px solid #f3c6c1; color: var(--red); border-radius: 9px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; display: none; }

.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(12,28,60,.25); border-top-color: var(--navy); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Result pages */
.result-icon { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 40px; }
.result-icon--ok { background: var(--ok-light); color: var(--ok); }
.result-icon--no { background: var(--red-light); color: var(--red); }
.pay-card.center h1 { font-family: var(--font-display); font-size: 23px; color: var(--navy); margin-bottom: 10px; }
.pay-card.center .pay-sub { margin-bottom: 18px; line-height: 1.6; }

@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }