/* ============================================================================
   mf-pay.css — the checkout sheet. Same navy/gold as the gate behind it, so
   pressing Unlock does not feel like leaving the site (which is the whole
   point of doing this here instead of on the account page).
   ============================================================================ */
html.mfpay-open{overflow:hidden}

.mfpay{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:20px}
.mfpay-back{position:absolute;inset:0;background:rgba(3,10,20,.72);backdrop-filter:blur(6px)}

.mfpay-card{position:relative;width:100%;max-width:430px;max-height:calc(100vh - 40px);overflow:auto;
  background:#0b1c30;border:1px solid rgba(245,197,66,.24);border-radius:18px;padding:26px 24px 20px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;color:#E8EEF6;
  animation:mfpay-in .18s ease-out}
@keyframes mfpay-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

.mfpay-x{position:absolute;top:12px;right:14px;background:none;border:none;color:#8ea3bb;
  font-size:26px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:8px}
.mfpay-x:hover{color:#fff;background:rgba(255,255,255,.07)}

.mfpay-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#05111F;background:linear-gradient(135deg,#f5c542,#c9982a);padding:4px 10px;border-radius:999px}
.mfpay-badge.adv{background:linear-gradient(135deg,#a5c9ff,#6b9bd8)}
.mfpay-head h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:12px 0 7px;color:#fff}
.mfpay-head p{font-size:13.5px;line-height:1.6;color:#C3D0E0;margin:0 0 20px}

.mfpay-terms{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.mfpay-term{background:#12233a;border:1px solid rgba(255,255,255,.12);border-radius:11px;
  padding:10px 4px;cursor:pointer;color:#C3D0E0;font-family:inherit;transition:border-color .14s,background .14s,color .14s}
.mfpay-term b{display:block;font-size:17px;font-weight:700;color:#fff;line-height:1.1}
.mfpay-term span{display:block;font-size:11px;margin-top:2px}
.mfpay-term:hover{border-color:rgba(245,197,66,.4)}
.mfpay-term.on{background:rgba(245,197,66,.13);border-color:#f5c542;color:#f5c542}
.mfpay-term.on b{color:#f5c542}

.mfpay-total{display:flex;align-items:baseline;justify-content:space-between;
  padding:13px 0 6px;border-top:1px solid rgba(255,255,255,.10)}
.mfpay-total span{font-size:13.5px;color:#C3D0E0}
.mfpay-total b{font-size:26px;font-weight:700;color:#fff;letter-spacing:-.02em}
.mfpay-rate{font-size:12px;color:#8ea3bb;margin-bottom:16px}

.mfpay-go{display:block;width:100%;background:linear-gradient(135deg,#f5c542,#c9982a);color:#05111F;
  border:none;border-radius:11px;padding:13px 18px;font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer;transition:filter .14s}
.mfpay-go:hover{filter:brightness(1.06)}
.mfpay-go:disabled{opacity:.6;cursor:default}

.mfpay-err{margin-top:12px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.32);
  border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.55;color:#fca5a5}

.mfpay-fine{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.08)}
.mfpay-fine li{position:relative;padding-left:15px;font-size:11.5px;line-height:1.6;color:#8ea3bb;margin-bottom:6px}
.mfpay-fine li::before{content:"";position:absolute;left:2px;top:7px;width:4px;height:4px;
  border-radius:50%;background:rgba(245,197,66,.55)}

@media(max-width:420px){
  .mfpay{padding:12px}
  .mfpay-card{padding:22px 18px 18px}
  .mfpay-terms{gap:6px}
  .mfpay-term b{font-size:15px}
}