/* ============================================================
   VOLBOO — Transaction receipt
   Loads after css/styles.css on any page that lists transactions.

   A row in a ledger answers "what happened"; the receipt answers
   "to whom, from where, and what did it cost". That is a glance,
   not a destination — so it opens over the list instead of taking
   the reader off it, and closing returns them exactly where they
   were, scroll position and filters intact.

   On a phone it becomes a bottom sheet, because a centred dialog
   on a 390px screen is a page with extra steps.
   ============================================================ */

/* ------------------------------------------------------------
   0. Tokens — the card stocks the tables already use
   ------------------------------------------------------------ */
.rcpt-scrim{
  --r-green:#ecf5e7;  --r-ink-green:#4f882f;
  --r-peach:#fcf0e4;  --r-ink-peach:#b25a06;
  --r-blue:#ebf0fe;   --r-ink-blue:#022dbd;

  --r-ok-bg:#d9f2ef;   --r-ok-ink:#00785a;
  --r-warn-bg:#fff1c8; --r-warn-ink:#8a5c00;
  --r-bad-bg:#fdecea;  --r-bad-ink:#b42318;

  --r-line:#ececec;
  --r-label:#6e6e6e;
}
[data-theme="dark"] .rcpt-scrim{
  --r-green:#1c2418;  --r-ink-green:#8bc96a;
  --r-peach:#2b211a;  --r-ink-peach:#e3a263;
  --r-blue:#1a1f2e;   --r-ink-blue:#93adf7;

  --r-ok-bg:#10312a;   --r-ok-ink:#5ccfab;
  --r-warn-bg:#342a10; --r-warn-ink:#e8c46e;
  --r-bad-bg:#3a1f1e;  --r-bad-ink:#f4a6a0;

  --r-line:#28322a;
  --r-label:#98a49b;
}

/* ------------------------------------------------------------
   1. Scrim + sheet
   ------------------------------------------------------------ */
.rcpt-scrim{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(12,20,16,.46);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s ease;
}
.rcpt-scrim[hidden]{display:none}
.rcpt-scrim.is-open{opacity:1}

.rcpt{
  width:100%;max-width:452px;max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:22px;box-shadow:var(--shadow-lg);
  transform:translateY(10px) scale(.985);
  transition:transform .22s cubic-bezier(.16,1,.3,1);
}
.rcpt-scrim.is-open .rcpt{transform:none}

/* ------------------------------------------------------------
   2. Head
   ------------------------------------------------------------ */
.rcpt-head{
  display:flex;align-items:center;gap:14px;
  padding:20px 20px 0;flex-shrink:0;
}
/* The dialog still needs a name for assistive tech; the letterhead
   beside it is the visible one. */
.rcpt-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.rcpt-close{
  width:34px;height:34px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--text3);
  transition:var(--transition);
}
.rcpt-close:hover{background:var(--bg-hover);color:var(--text)}
.rcpt-close svg{width:17px;height:17px}
/* The sheet takes focus on open so Escape and Tab land somewhere sensible.
   That is a keyboard affordance, so only the keyboard sees the ring. */
.rcpt-close:focus{outline:none}
.rcpt-close:focus-visible,
.rcpt-btn:focus-visible,
.rcpt-copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The scrolling middle. Actions stay pinned below it. */
.rcpt-body{
  flex:1;min-height:0;overflow-y:auto;
  padding:0 20px 4px;
}

/* ------------------------------------------------------------
   3. The document

   A receipt is a record, not a detail panel: it says who issued
   it, states the figure once and large, then lists the facts in
   named groups. Dashed rules top and bottom stand in for the
   torn edge of a printed one.
   ------------------------------------------------------------ */
.rcpt-brand{display:flex;align-items:center;gap:9px;min-width:0}
.rcpt-brand img{width:22px;height:22px;display:block}
.rcpt-brand-name{
  font-size:.9375rem;font-weight:700;letter-spacing:-.02em;color:var(--text);
}
.rcpt-brand-kind{
  margin-left:auto;flex-shrink:0;
  font-size:.625rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;color:var(--text4);
}

/* The figure, stated once and large */
.rcpt-hero{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:20px 0;
}
.rcpt-hero-icon{
  width:46px;height:46px;border-radius:50%;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-input);color:var(--text3);
}
.rcpt-hero-icon svg{width:20px;height:20px}
.rcpt-hero-icon.collection{background:var(--r-green);color:var(--r-ink-green)}
.rcpt-hero-icon.withdrawal,
.rcpt-hero-icon.payout{background:var(--r-peach);color:var(--r-ink-peach)}
.rcpt-hero-icon.transfer{background:var(--r-blue);color:var(--r-ink-blue)}

/* Plain ink, not a colour: the sign and the icon already carry the
   direction, and a coloured figure beside a green status pill reads
   as an alarm rather than as a record. */
.rcpt-hero-amount{
  font-size:1.75rem;font-weight:700;letter-spacing:-.045em;line-height:1.1;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.rcpt-hero-when{
  margin-top:9px;font-size:.75rem;color:var(--text3);
  font-variant-numeric:tabular-nums;
}
.rcpt-hero .rcpt-tag{margin-top:12px}

.rcpt-tag{
  display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 12px;border-radius:999px;
  font-size:.75rem;font-weight:600;line-height:1;white-space:nowrap;
}
.rcpt-tag svg{width:13px;height:13px}
.rcpt-tag.done{background:var(--r-ok-bg);color:var(--r-ok-ink)}
.rcpt-tag.progress{background:var(--r-warn-bg);color:var(--r-warn-ink)}
.rcpt-tag.failed{background:var(--r-bad-bg);color:var(--r-bad-ink)}

/* The torn edge of a printed receipt, in one line of CSS */
.rcpt-rule{
  height:1px;
  background-image:linear-gradient(to right,var(--r-line) 0 6px,transparent 6px 12px);
  background-size:12px 1px;background-repeat:repeat-x;
}

/* ------------------------------------------------------------
   4. The facts, in named groups

   Grouping is what separates a statement from a key/value dump:
   the reader looks for "who received this", not for row seven.
   ------------------------------------------------------------ */
.rcpt-section{padding:16px 0 4px}
.rcpt-section + .rcpt-section{border-top:1px solid var(--r-line)}
.rcpt-section-title{
  font-size:.625rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text4);margin:0 0 4px;
}
.rcpt-facts{margin:0;padding:0;border:0}

.rcpt-fact{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:0;
}
.rcpt-fact dt{
  flex-shrink:0;font-size:.8125rem;font-weight:400;line-height:1.3;
  color:var(--r-label);
}
.rcpt-fact dd{
  margin:0;min-width:0;text-align:right;
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  font-size:.8125rem;font-weight:500;line-height:1.35;color:var(--text);
  word-break:break-word;
}
.rcpt-fact dd.num{font-variant-numeric:tabular-nums}
/* References and session IDs run long and have no spaces to break at,
   so they are allowed to break anywhere rather than push the row wide. */
.rcpt-fact dd.id{align-items:flex-start}
.rcpt-fact dd.id span{overflow-wrap:anywhere;min-width:0}
.rcpt-fact:has(dd.id){align-items:flex-start}
.rcpt-fact dd.id .rcpt-copy{margin-top:-2px}

/* The one figure that is a sum rather than a fact */
.rcpt-fact.is-total{
  margin-top:4px;padding-top:12px;border-top:1px solid var(--r-line);
}
.rcpt-fact.is-total dt{font-weight:600;color:var(--text2)}
.rcpt-fact.is-total dd{font-weight:700;font-size:.875rem}

/* Copy sits before the value — it belongs to the identifier, not to
   the row's edge. */
.rcpt-copy{
  width:24px;height:24px;flex-shrink:0;border-radius:7px;order:-1;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--text4);
  transition:var(--transition);
}
.rcpt-copy:hover{background:var(--bg-hover);color:var(--text2)}
.rcpt-copy.is-copied{color:var(--accent)}
.rcpt-copy svg{width:14px;height:14px}

/* ------------------------------------------------------------
   4b. Footer — what makes a record a record
   ------------------------------------------------------------ */
.rcpt-foot{
  padding:16px 0 6px;text-align:center;
}
.rcpt-foot p{
  margin:0;font-size:.6875rem;line-height:1.6;color:var(--text4);
}
.rcpt-foot p + p{margin-top:3px}
.rcpt-foot strong{font-weight:600;color:var(--text3)}

/* ------------------------------------------------------------
   5. Actions
   ------------------------------------------------------------ */
.rcpt-actions{
  display:flex;flex-direction:column;gap:11px;
  padding:18px 20px 20px;flex-shrink:0;
}
/* Share sits beside Resend when there is a webhook to resend, and takes
   the whole row when there is not. */
.rcpt-actions-row{display:flex;gap:11px}
.rcpt-actions-row .rcpt-btn{flex:1 1 0;min-width:0}
.rcpt-actions-row .rcpt-btn[hidden]{display:none}
.rcpt-actions-row .rcpt-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* display:flex above would otherwise beat the UA [hidden] rule, leaving
   Share and Download on screen while the sheet is still loading — or
   worse, on a receipt that failed to load and has nothing to share. */
.rcpt-actions[hidden]{display:none}
.rcpt-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:50px;border-radius:14px;
  font-size:.9375rem;font-weight:600;letter-spacing:-.015em;
  transition:var(--transition);
}
.rcpt-btn svg{width:17px;height:17px}
.rcpt-btn--ghost{
  background:transparent;border:1px solid var(--border);color:var(--text);
}
.rcpt-btn--ghost:hover{background:var(--bg-hover);border-color:var(--border-strong)}
.rcpt-btn--solid{
  background:var(--accent);border:1px solid var(--accent);color:#fff;
}
.rcpt-btn--solid:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.rcpt-btn[disabled]{opacity:.6;pointer-events:none}
/* The outcome of a resend is reported on the button itself, so it holds
   its colour long enough to be read before returning to rest. */
.rcpt-btn.is-ok{border-color:var(--r-ok-ink);color:var(--r-ok-ink);opacity:1}
.rcpt-btn.is-bad{border-color:var(--r-bad-ink);color:var(--r-bad-ink);opacity:1}
[data-theme="dark"] .rcpt-btn--solid{color:#07130f}

/* ------------------------------------------------------------
   6. Loading and failure

   The sheet opens immediately and fills in, rather than making the
   reader wait on a blank screen for the fetch to land.
   ------------------------------------------------------------ */
.rcpt-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:54px 16px;text-align:center;color:var(--text4);
}
.rcpt-state i{font-size:1.25rem;opacity:.55}
.rcpt-state.is-error i{color:var(--red);opacity:.85}
.rcpt-state p{font-size:.8125rem;font-weight:600;color:var(--text2);margin:0}
.rcpt-state span{font-size:.71875rem;color:var(--text4)}

.rcpt-skel{padding:6px 0 4px}
.rcpt-skel-hero{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding-bottom:22px;
}
.rcpt-skel-rows{padding-top:16px;border-top:1px solid var(--r-line)}
.rcpt-skel-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 0;
}
.rs{
  background:linear-gradient(90deg,var(--bg-input) 25%,var(--bg-hover) 37%,var(--bg-input) 63%);
  background-size:400% 100%;animation:rs-shimmer 1.4s ease infinite;border-radius:6px;
  height:10px;
}
.rs.avatar{width:46px;height:46px;border-radius:50%;flex-shrink:0}
.rs.hero{width:150px;height:24px;border-radius:8px}
.rs.pill{width:96px;height:26px;border-radius:999px}
.rs.w40{width:40%}.rs.w30{width:30%}.rs.w55{width:55%}.rs.w70{width:70%}
@keyframes rs-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){
  .rs{animation:none}
  .rcpt-scrim,.rcpt{transition:none}
}

/* ------------------------------------------------------------
   7. Phone — the dialog becomes a bottom sheet
   ------------------------------------------------------------ */
@media(max-width:600px){
  .rcpt-scrim{padding:0;align-items:flex-end}
  .rcpt{
    max-width:none;max-height:92vh;
    border-radius:22px 22px 0 0;border-bottom:0;
    transform:translateY(18px);
  }
  .rcpt-head{padding:16px 16px 0}
  .rcpt-body{padding:0 16px 4px}
  .rcpt-actions{padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
  .rcpt-brand-kind{font-size:.5625rem}
  .rcpt-hero{padding:16px 0}
  .rcpt-hero-icon{width:42px;height:42px;margin-bottom:11px}
  .rcpt-hero-amount{font-size:1.5rem}
  .rcpt-hero-when{margin-top:7px}
  .rcpt-section{padding:13px 0 3px}
  .rcpt-fact{padding:8px 0}
  .rcpt-fact dt,.rcpt-fact dd{font-size:.78125rem}
  .rcpt-btn{height:47px;font-size:.875rem}
  .rcpt-actions-row{gap:9px}
}

/* ------------------------------------------------------------
   8. The receipt as an image

   Share and Download photograph a second, offscreen copy of the
   document rather than the sheet on screen. The sheet is a
   scrolling box capped to the viewport, so photographing it gave
   back whatever happened to fit — a long receipt came out cut
   off. Here the box is undone: no cap, no scroller, no flex, so
   the copy stands at its full natural height and the whole
   record is in frame.

   It still sits inside a .rcpt-scrim, because that is where the
   colours the document is printed in are defined.

   Deliberately after the phone block: these rules carry the same
   weight as the ones they override, so they have to come last to
   win on a phone as well.
   ------------------------------------------------------------ */
.rcpt-shot-holder{
  position:absolute;inset:auto;left:-10000px;top:0;z-index:-1;
  display:block;width:auto;height:auto;padding:0;
  background:none;opacity:1;pointer-events:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.rcpt-shot{
  width:452px;max-width:none;height:auto;max-height:none;
  display:block;overflow:visible;
  padding:26px 24px 22px;
  border:0;border-radius:0;box-shadow:none;
  transform:none;transition:none;
}
.rcpt-shot .rcpt-head{padding:0}
.rcpt-shot .rcpt-body{
  flex:none;min-height:0;max-height:none;
  overflow:visible;padding:0;
}
/* Chrome, not record: a copy button photographs as a stray glyph
   on a document nobody can click. */
.rcpt-shot .rcpt-copy{display:none}
/* A shimmer would freeze mid-sweep in the frame. */
.rcpt-shot .rs{animation:none}