/* forked from css/wallet.css for v2: palette flipped to ink on paper */
/* FAUJI FUNK — wallet, gift cards, referrals and points (growth agent, v3). Uses only v1 variables so v2 can re-theme.
   Used by: checkout.html (gift card / store credit tender), account.html (js/wallet.js panel), gift-cards.html. */

/* ---------- checkout tender ---------- */
.ffw-tender { margin: 26px 0 6px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.ffw-gc { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.ffw-gc .field { margin: 0; }
.ffw-gc .btn { padding: 15px 22px; }
.ffw-applied { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border: 1px dashed var(--brass-dim); background: rgb(var(--accent-rgb) / .06); }
.ffw-applied b { font-weight: 400; color: var(--brass-2); display: block; font-size: 12px; letter-spacing: .12em; }
.ffw-applied small { color: var(--bone-2); font-size: 12px; }
.ffw-msg { margin: 0; min-height: 1em; font-size: 13px; color: var(--bone-2); }
.ffw-msg.bad { color: #e08a7a; }
.ffw-live { border-left: 2px solid var(--brass); padding-left: 12px; }
.ffw-due span:last-child { color: var(--brass-2); }

/* ---------- account panel (js/wallet.js) ---------- */
.ffw { margin-top: 40px; display: grid; gap: 22px; }
.ffw-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ffw-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.ffw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.ffw-card { border: 1px solid var(--line-2); padding: 20px 22px; display: grid; gap: 8px; align-content: start; background: rgb(var(--ink-rgb) / .02); }
.ffw-card .k { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.ffw-card .v { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--bone); }
.ffw-card .s { font-size: 13px; color: var(--bone-2); }
.ffw-card .s em { font-style: normal; color: var(--brass-2); }
.ffw-card .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.ffw-card input { width: 110px; background: transparent; border: 1px solid var(--line-2); color: inherit; padding: 10px 12px; font: inherit; }
.ffw-card .btn { padding: 11px 16px; }
.ffw-code { font-family: var(--mono); font-size: 15px; letter-spacing: .14em; color: var(--brass-2); word-break: break-all; }
.ffw-list { display: grid; border-top: 1px solid var(--line); }
.ffw-li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ffw-li small { color: var(--muted); font-size: 12px; }
.ffw-li .amt { text-align: right; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; }
.ffw-li .amt.plus { color: var(--olive-3); }
.ffw-share { display: flex; gap: 8px; flex-wrap: wrap; }
.ffw-empty { color: var(--muted); font-size: 14px; margin: 0; }
.ffw .sr-only, .gcp .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ffw details summary { cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-2); padding: 6px 0; }

/* ---------- gift-cards.html ---------- */
.gcp { padding: clamp(110px, 14vw, 170px) 0 90px; }
.gcp-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.gcp-card { aspect-ratio: 1.6; border: 1px solid var(--brass-dim); background: linear-gradient(135deg, var(--ink-3), var(--obsidian) 60%, var(--olive)); position: relative; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.gcp-card::after { content: ''; position: absolute; inset: 10px; border: 1px solid var(--line-2); pointer-events: none; }
.gcp-card .brand { font-family: var(--display); font-size: clamp(26px, 3vw, 38px); letter-spacing: .06em; color: var(--bone); }
.gcp-card .amt { font-family: var(--serif); font-size: clamp(40px, 6vw, 72px); color: var(--brass-2); line-height: 1; }
.gcp-card .to { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-2); }
.gcp-form { display: grid; gap: 18px; }
.gcp-denoms { display: flex; flex-wrap: wrap; gap: 8px; }
.gcp-denoms button { border: 1px solid var(--line-2); padding: 12px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--bone-2); background: transparent; cursor: pointer; }
.gcp-denoms button.on { border-color: var(--brass); color: var(--brass-2); background: rgb(var(--accent-rgb) / .08); }
.gcp-note { font-size: 13px; color: var(--muted); margin: 0; }
.gcp-err { color: #e08a7a; font-size: 14px; margin: 0; }
.gcp-bal { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); display: grid; gap: 14px; max-width: 560px; }
.gcp-bal .ffw-gc { max-width: 480px; }
.gcp-off { border: 1px dashed var(--line-2); padding: 22px; color: var(--bone-2); }
@media (max-width: 860px) { .gcp-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ffw-gc { grid-template-columns: 1fr; } .ffw-gc .btn { justify-content: center; } }