/* VotaWallet: a till receipt lying on the desk. */
.page-votawallet main { display: flex; justify-content: center; }
/* the shadow belongs to the sheet with its teeth, so it sits on a wrapper: a mask would cut it off */
.paper { width: min(100%, 468px); filter: drop-shadow(0 1px 1px rgba(28, 26, 23, 0.18)) drop-shadow(0 10px 22px rgba(28, 26, 23, 0.16)); }
.receipt {
  --tooth: 9px;                 /* width of one tooth of the torn edge; it is half as tall */
  --sheet: #FBFAF6;
  background: var(--sheet);
  padding: 34px 30px 30px;
  font-size: 15.5px;
  line-height: 1.5;
  /* the edge of a real receipt: small even teeth, top and bottom */
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) 51% repeat-x;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) 51% repeat-x;
}

.rc-head { display: grid; justify-items: center; text-align: center; gap: 6px; }
.rc-head .mark { width: 54px; height: 54px; margin-bottom: 8px; }
.rc-head h1 { font-size: 34px; letter-spacing: -0.01em; }
.rc-tag { font-weight: 600; }
.rc-nf { margin-top: 8px; padding: 4px 10px; border: 1.5px solid currentColor; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; }
.rc-cashier { display: flex; align-items: center; gap: 12px; margin-top: 16px; text-align: left; justify-self: stretch; }
.rc-cashier img { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.rc-cashier p { display: grid; gap: 1px; }
.rc-cashier b { font-weight: 700; }
.rc-cashier span { font-size: 13.5px; opacity: 0.78; }
.rc-meta { justify-self: stretch; margin-top: 12px; display: grid; gap: 3px; font-size: 13.5px; }
.rc-meta div { display: flex; justify-content: space-between; gap: 16px; }
.rc-meta dt { opacity: 0.7; }
.rc-meta dd { font-weight: 600; text-align: right; }

/* between the blocks: the perforation of the grid, a row of dots */
.rc-sec { margin-top: 22px; padding-top: 22px; background: radial-gradient(circle, var(--ink) 0 1.6px, #0000 2px) 0 0 / 9px 4px repeat-x; display: grid; gap: 10px; }
.rc-sec h2 { display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sec-n { opacity: 0.75; font-weight: 600; letter-spacing: 0.04em; }
.fine { font-size: 13.5px; opacity: 0.78; }
.center { text-align: center; }
.more { font-weight: 600; }

/* a line of a receipt: what, a dotted leader, how many */
.rows { display: grid; gap: 7px; }
.rows li { display: flex; align-items: baseline; gap: 8px; }
.rows.pay li { flex-wrap: wrap; }
.rows.pay a { min-width: 0; overflow-wrap: anywhere; }
.rows .what { flex: 0 1 auto; }
.rows .lead { flex: 1 1 24px; min-width: 16px; border-bottom: 2px dotted currentColor; opacity: 0.4; transform: translateY(-4px); }
.rows b, .rows a { flex: none; font-weight: 700; text-align: right; }
.rows.pay a { font-weight: 600; }

.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shots figure { display: grid; gap: 6px; }
.shots img { border-radius: 14px; border: 1px solid rgba(28, 26, 23, 0.25); }
.shots figcaption { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; opacity: 0.7; }

.stamp { justify-self: center; margin-top: 10px; }
.stamp span { display: inline-block; padding: 5px 16px 4px; border: 3px double var(--accent); color: var(--accent); font-size: 22px; font-weight: 800; letter-spacing: 0.18em; transform: rotate(-7deg); }
.thanks { text-align: center; font-weight: 700; letter-spacing: 0.16em; font-size: 13px; }

@media (max-width: 480px) {
  .receipt { padding: 28px 18px 26px; }
  .rc-head h1 { font-size: 30px; }
}