/* ==========================================================================
   Receipts (receipt.js): a paper slip that prints out over the page, for a
   call (Place a call's history) or a top-up (Purchase's history).

   Warm paper with torn top and bottom edges, set in IBM Plex Mono: a head with
   the mark, what it is and its number; the facts (when, who, what rate); the
   lines, each with a dotted leader to its amount; the total over a double
   rule; who paid; a barcode and a thank-you. A rubber stamp under the
   heading says how it went (paid, refunded, expired...). Under the slip, its actions. It prints on its
   own (Print / save PDF) with nothing of the page around it.
   ========================================================================== */
.rcpt-bg{position:fixed;inset:0;z-index:2147481750;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;
  padding:56px 16px 24px;background:rgba(3,4,12,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .22s ease}
.rcpt-bg.in{opacity:1}
.rcpt-col{position:relative;width:min(372px,100%);margin:auto 0;display:flex;flex-direction:column;align-items:stretch}
.rcpt-x{position:fixed;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0;
  color:#C9D2EE;background:rgba(255,255,255,.06);border:1px solid rgba(147,197,253,.2);transition:background .15s,color .15s}
.rcpt-x:hover{color:#fff;background:rgba(255,255,255,.12)}
.rcpt-x svg{width:13px;height:13px}

/* the printer's slot the slip feeds out of */
.rcpt-slot{position:relative;z-index:2;height:12px;margin:0 -10px;border-radius:8px;
  background:linear-gradient(180deg,#232a45,#0d1124);box-shadow:inset 0 -2px 0 rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.06),0 10px 24px -10px rgba(0,0,0,.9)}
.rcpt-slot::after{content:"";position:absolute;left:8px;right:8px;bottom:2px;height:3px;border-radius:2px;background:#05070f}
.rcpt-feed{position:relative;z-index:1;margin-top:-6px;overflow:hidden;padding:0 0 16px}

/* ---- the paper ---- */
.rcpt{--ink:#1B2133;--ink2:#5A6275;--rule:rgba(27,33,51,.28);position:relative;padding:24px 22px 24px;color:var(--ink);
  font:500 12.5px/1.45 'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.01em;text-align:left;
  background:
    repeating-linear-gradient(0deg,rgba(27,33,51,.018) 0 1px,transparent 1px 3px),
    radial-gradient(120% 60% at 50% 0%,rgba(0,0,0,.05),transparent 60%),
    linear-gradient(180deg,#F7F4EC,#F1EDE3);
  /* torn edges, top and bottom */
  -webkit-mask:linear-gradient(#000,#000) 0 9px/100% calc(100% - 18px) no-repeat,
    conic-gradient(from 135deg at 50% 0,#000 90deg,transparent 0) 0 0/14px 9px repeat-x,
    conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) 0 100%/14px 9px repeat-x;
          mask:linear-gradient(#000,#000) 0 9px/100% calc(100% - 18px) no-repeat,
    conic-gradient(from 135deg at 50% 0,#000 90deg,transparent 0) 0 0/14px 9px repeat-x,
    conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) 0 100%/14px 9px repeat-x;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.55))}
/* it feeds out of the slot, top first */
.rcpt-bg.in .rcpt{animation:rcptFeed 1.05s cubic-bezier(.3,.7,.25,1) .08s both}
@keyframes rcptFeed{
  0%{transform:translateY(-100%)}
  70%{transform:translateY(2%)}
  100%{transform:none}}

.rcpt-head{text-align:center}
.rcpt-mark{display:inline-flex;align-items:center;gap:8px;font:800 15px/1 'Geist',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase}
.rcpt-mark img{width:22px;height:22px;display:block}
.rcpt-kind{display:block;margin-top:7px;font-weight:700;font-size:12px;letter-spacing:.28em;text-transform:uppercase}
.rcpt-site{display:block;margin-top:2px;font-size:12px;color:var(--ink2)}

.rcpt hr{height:0;margin:10px 0;border:0;border-top:1.5px dashed var(--rule)}
.rcpt hr.dbl{height:4px;margin:9px 0 8px;border-top:1.5px dashed var(--rule);border-bottom:1.5px dashed var(--rule)}

/* facts: key on the left, value on the right */
.rcpt-kv{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:2px}
.rcpt-kv dt{color:var(--ink2);white-space:nowrap}
.rcpt-kv dd{margin:0;text-align:right;overflow-wrap:anywhere}
.rcpt-kv dd small{display:block;font-size:12px;line-height:1.35;color:var(--ink2)}

/* lines: label, a dotted leader, the amount; a note under it */
.rcpt-cols{display:flex;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:4px}
.rcpt-sec + .rcpt-sec{margin-top:9px}
.rcpt-sec-t{display:block;margin-bottom:4px;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere}
.rcpt-li{padding:2px 0}
.rcpt-lr{display:flex;align-items:baseline;gap:6px}
.rcpt-lr > span:first-child{flex:0 1 auto;min-width:0}
.rcpt-lr i{flex:1 1 auto;min-width:14px;height:0;border-bottom:2px dotted var(--rule);transform:translateY(-3px)}
.rcpt-lr b{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}
.rcpt-li small{display:block;font-size:12px;line-height:1.35;color:var(--ink2)}
.rcpt-li.refund b,.rcpt-li.refund > .rcpt-lr > span{color:#0F8A61}
.rcpt-li.muted{color:var(--ink2)}
.rcpt-none{color:var(--ink2);text-align:center;padding:2px 0}

.rcpt-tot .rcpt-lr{font-weight:800}
.rcpt-tot.big .rcpt-lr{font-size:15px}
.rcpt-tot.big b{font-size:17px}
.rcpt-d{display:inline-block;width:.55em;height:.55em;margin-right:.45em;vertical-align:.05em;border-radius:1px;transform:rotate(45deg);background:currentColor}

.rcpt-note{margin:9px 0 0;font-size:12px;line-height:1.4;color:var(--ink2);text-align:center}

/* the barcode and the thank-you */
.rcpt-code{display:block;width:78%;height:30px;margin:11px auto 3px}
.rcpt-code rect{fill:var(--ink)}
.rcpt-ref{display:block;text-align:center;font-size:12px;letter-spacing:.32em;color:var(--ink2)}
.rcpt-thx{display:block;margin-top:7px;text-align:center;font-weight:700;font-size:12px;letter-spacing:.06em}

/* the rubber stamp under the heading: how it went */
.rcpt-stamp{--c:#0F8A61;display:table;margin:11px auto 2px;padding:6px 12px 5px;border:2.5px solid var(--c);border-radius:6px;pointer-events:none;
  font:800 14px/1 'Geist',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--c);opacity:.8;transform:rotate(-5deg);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);mix-blend-mode:multiply;
  -webkit-mask:repeating-linear-gradient(115deg,#000 0 6px,rgba(0,0,0,.72) 6px 7px);mask:repeating-linear-gradient(115deg,#000 0 6px,rgba(0,0,0,.72) 6px 7px)}
.rcpt-stamp.muted{--c:#6B7280}
.rcpt-stamp.bad{--c:#C62828}
.rcpt-stamp.live{--c:#2563EB}
.rcpt-stamp.warn{--c:#B45309}
.rcpt-stamp.btc{--c:#D9770F}
.rcpt-bg.in .rcpt-stamp{animation:rcptStamp .42s cubic-bezier(.3,1.6,.5,1) .95s both}
@keyframes rcptStamp{from{opacity:0;transform:rotate(-5deg) scale(1.9)}to{opacity:.8;transform:rotate(-5deg)}}

/* ---- under the slip: its actions ---- */
.rcpt-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;opacity:0;transform:translateY(6px);transition:opacity .3s ease .7s,transform .4s cubic-bezier(.16,1,.3,1) .7s}
.rcpt-bg.in .rcpt-acts{opacity:1;transform:none}
.rcpt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:12px;cursor:pointer;text-decoration:none;
  font:600 13.5px/1 'Geist',system-ui,sans-serif;color:#DCE3FF;background:rgba(255,255,255,.05);border:1px solid rgba(147,197,253,.22);transition:background .15s,border-color .15s,color .15s}
.rcpt-btn:hover{color:#fff;background:rgba(255,255,255,.09);border-color:rgba(147,197,253,.4)}
.rcpt-btn.primary{color:#fff;border-color:transparent;background:linear-gradient(135deg,#3B82F6,#1D4ED8);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.rcpt-btn.primary:hover{filter:brightness(1.07)}
.rcpt-btn.btc{color:#fff;border-color:transparent;background:linear-gradient(135deg,#F9A23B,#D9770F);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.rcpt-btn svg{width:14px;height:14px}
.rcpt-btn:focus-visible,.rcpt-x:focus-visible{outline:2px solid #60A5FA;outline-offset:2px}

@media (max-width:480px){
  .rcpt-bg{padding:58px 12px 14px}
  .rcpt{padding:22px 18px 22px;font-size:12px}
  .rcpt-stamp{font-size:13px}
  .rcpt-acts .rcpt-btn{flex:1 1 0}
}
@media (prefers-reduced-motion:reduce){
  .rcpt-bg,.rcpt-acts{transition:none}
  .rcpt-bg.in .rcpt,.rcpt-bg.in .rcpt-stamp{animation:none}
}

/* printing a receipt: only the slip */
@media print{
  html.rcpt-printing body > *:not(.rcpt-bg){display:none !important}
  html.rcpt-printing,html.rcpt-printing body{background:#fff !important}
  html.rcpt-printing .rcpt-bg{position:static;display:block;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1}
  html.rcpt-printing .rcpt-x,html.rcpt-printing .rcpt-slot,html.rcpt-printing .rcpt-acts{display:none}
  html.rcpt-printing .rcpt-col{margin:0 auto;zoom:1 !important}
  html.rcpt-printing .rcpt-feed{overflow:visible;padding:0}
  html.rcpt-printing .rcpt{filter:none;animation:none}
  html.rcpt-printing .rcpt-stamp{animation:none}
}