/* PayWicket design system — shared premium tokens + components.
   Used across landing, dashboard, checkout, admin for a cohesive, modern look. */

:root {
  /* Brand */
  --pw-brand-600:#6d28d9; --pw-brand-500:#7c3aed; --pw-brand-400:#8b5cf6;
  --pw-indigo:#4f46e5; --pw-cyan:#06b6d4; --pw-accent:#22d3ee;
  --pw-grad: linear-gradient(135deg, var(--pw-brand-600), var(--pw-indigo));
  --pw-grad-bright: linear-gradient(120deg, #a78bfa, #22d3ee);

  /* Neutrals */
  --pw-ink:#0b1020; --pw-ink-2:#1e293b;
  --pw-text:#0f172a; --pw-muted:#64748b; --pw-muted-2:#94a3b8;
  --pw-line:#e9eef5; --pw-line-2:#e2e8f0;
  --pw-bg:#f6f7fb; --pw-card:#ffffff;

  /* Semantic */
  --pw-ok:#10b981; --pw-ok-bg:#ecfdf5; --pw-warn:#f59e0b; --pw-warn-bg:#fffbeb;
  --pw-bad:#ef4444; --pw-bad-bg:#fef2f2; --pw-info-bg:#eef2ff;

  /* Shape & motion */
  --pw-r-sm:9px; --pw-r:13px; --pw-r-lg:18px; --pw-r-xl:24px;
  --pw-shadow-sm:0 1px 2px rgba(2,6,23,.06), 0 1px 3px rgba(2,6,23,.05);
  --pw-shadow:0 6px 24px rgba(2,6,23,.08);
  --pw-shadow-lg:0 24px 60px rgba(2,6,23,.18);
  --pw-ring:0 0 0 3px rgba(124,58,237,.22);
  --pw-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji",sans-serif;
  --pw-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--pw-font); color:var(--pw-text); background:var(--pw-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:var(--pw-indigo); }

/* ---- buttons ---- */
.pw-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:var(--pw-r-sm); padding:11px 16px; font-size:14.5px;
  font-weight:650; cursor:pointer; transition:transform .08s ease, box-shadow .2s ease, background .2s ease, filter .2s; white-space:nowrap; font-family:inherit; }
.pw-btn:active { transform:translateY(1px); }
.pw-btn-primary { background:var(--pw-grad); color:#fff; box-shadow:0 8px 20px rgba(99,102,241,.32); }
.pw-btn-primary:hover { filter:brightness(1.06); box-shadow:0 10px 26px rgba(99,102,241,.42); }
.pw-btn-ghost { background:var(--pw-info-bg); color:var(--pw-indigo); }
.pw-btn-ghost:hover { background:#e3e8ff; }
.pw-btn-soft { background:#f1f5f9; color:var(--pw-text); }
.pw-btn-soft:hover { background:#e7edf5; }
.pw-btn-danger { background:var(--pw-bad-bg); color:#b91c1c; }
.pw-btn-danger:hover { background:#fde0e0; }
.pw-btn-dark { background:var(--pw-ink); color:#fff; }
.pw-btn-sm { padding:7px 11px; font-size:12.5px; border-radius:8px; }
.pw-btn-lg { padding:14px 24px; font-size:16px; border-radius:12px; }
.pw-btn-block { width:100%; }
.pw-btn:disabled { opacity:.55; cursor:not-allowed; }

/* ---- cards ---- */
.pw-card { background:var(--pw-card); border:1px solid var(--pw-line); border-radius:var(--pw-r-lg);
  box-shadow:var(--pw-shadow-sm); }
.pw-card-pad { padding:20px; }
.pw-card-hover { transition:box-shadow .2s, transform .12s; }
.pw-card-hover:hover { box-shadow:var(--pw-shadow); transform:translateY(-2px); }

/* ---- inputs ---- */
.pw-input, .pw-select { width:100%; padding:11px 13px; border:1px solid var(--pw-line-2); border-radius:var(--pw-r-sm);
  font-size:14.5px; font-family:inherit; background:#fff; color:var(--pw-text); transition:border .15s, box-shadow .15s; }
.pw-input:focus, .pw-select:focus { outline:none; border-color:var(--pw-brand-400); box-shadow:var(--pw-ring); }
.pw-label { font-size:12px; font-weight:600; color:var(--pw-muted); display:block; margin:14px 0 6px; letter-spacing:.01em; }
.pw-hint { font-size:12px; color:var(--pw-muted); }

/* ---- badges / pills ---- */
.pw-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; text-transform:capitalize; letter-spacing:.01em; }
.pw-pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.pw-pill-pending { background:var(--pw-warn-bg); color:#b45309; }
.pw-pill-confirmed, .pw-pill-on { background:var(--pw-ok-bg); color:#047857; }
.pw-pill-refunded, .pw-pill-off, .pw-pill-expired { background:var(--pw-bad-bg); color:#b91c1c; }
.pw-pill-neutral { background:#f1f5f9; color:#475569; }

/* ---- tables ---- */
.pw-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.pw-table th { text-align:left; color:var(--pw-muted); font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; padding:10px 10px; border-bottom:1px solid var(--pw-line); }
.pw-table td { padding:13px 10px; border-bottom:1px solid var(--pw-line); vertical-align:middle; }
.pw-table tr:last-child td { border-bottom:0; }
.pw-table tbody tr { transition:background .12s; }
.pw-table tbody tr:hover { background:#fafbff; }

/* ---- misc ---- */
.pw-mono { font-family:var(--pw-mono); font-size:12.5px; word-break:break-all; }
.pw-muted { color:var(--pw-muted); }
.pw-mark { width:28px; height:28px; border-radius:8px; background:var(--pw-grad); display:inline-block; vertical-align:middle;
  position:relative; }
.pw-mark::after { content:""; position:absolute; inset:7px 9px; border-radius:3px; background:rgba(255,255,255,.9);
  clip-path:polygon(0 60%, 22% 60%, 35% 100%, 60% 0, 78% 0, 100% 0, 100% 100%, 0 100%); opacity:.0; }
.pw-toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
  background:var(--pw-ink); color:#fff; padding:12px 18px; border-radius:12px; font-size:14px; z-index:9999;
  box-shadow:var(--pw-shadow-lg); transition:.25s; pointer-events:none; max-width:90vw; }
.pw-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.pw-toast.err { background:#7f1d1d; }
.pw-skeleton { background:linear-gradient(90deg,#eef1f6 25%,#e3e8f0 37%,#eef1f6 63%); background-size:400% 100%;
  animation:pw-sk 1.4s ease infinite; border-radius:8px; }
@keyframes pw-sk { 0%{background-position:100% 0} 100%{background-position:0 0} }
.pw-spin { width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  display:inline-block; animation:pw-spin .8s linear infinite; }
@keyframes pw-spin { to{ transform:rotate(360deg) } }
@keyframes pw-pop { from{ transform:translateY(10px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes pw-fade { from{opacity:0} to{opacity:1} }
.pw-fade { animation:pw-fade .25s ease; }