/* ========== Payments (pages/payment.css) ========== */
:root{
  --sky-200:#bae6fd; --sky-300:#7dd3fc; --sky-400:#38bdf8;
  --emerald-200:#a7f3d0; --emerald-300:#6ee7b7; --emerald-400:#34d399;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-700:#334155; --slate-900:#0f172a;
}
.banner{position:relative;border-radius:1.5rem;overflow:hidden;border:2px solid var(--slate-200);box-shadow:0 14px 40px rgba(15,23,42,.10)}
.banner .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,0),rgba(2,6,23,.42))}
.banner .ring{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);pointer-events:none}

.card{background:#fff;border:1px solid var(--slate-200);border-radius:1.25rem;transition:border-color .25s,box-shadow .25s,transform .18s}
.card:hover{border-color:var(--sky-300);box-shadow:0 18px 40px rgba(15,23,42,.1);transform:translateY(-2px)}

.badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--slate-200);border-radius:999px;padding:.45rem .8rem;background:#fff;font-weight:800}

.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1.1rem;border-radius:14px;border:2px solid var(--slate-200);font-weight:800;background:#fff;transition:.2s}
.btn:hover{background:var(--slate-50);border-color:var(--slate-300);box-shadow:0 10px 22px rgba(15,23,42,.08)}
.btn.sky{border-color:color-mix(in oklab, var(--sky-300) 50%, transparent)}
.btn.emerald{border-color:color-mix(in oklab, var(--emerald-300) 50%, transparent)}

.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--slate-200);border-radius:14px;overflow:hidden}
.table thead th{background:var(--slate-100);font-weight:800}
.table th,.table td{padding:.9rem 1rem;border-bottom:1px solid var(--slate-200)}
.table tr:last-child td{border-bottom:0}

.ibox{border:2px dashed var(--slate-300);border-radius:14px;background:var(--slate-50);padding:1rem}
.kit{display:flex;gap:.6rem;align-items:center;border:1px dashed var(--slate-200);border-radius:12px;padding:.6rem .8rem;background:var(--slate-50)}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.reveal{animation:fadeUp .45s ease both}