/* UnlimitedPOS shared components: the brand mark and the receipt (public site and sign-in pages). */

/* ---------- brand ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand__mark { width: 26px; height: 30px; flex: none; }
.brand__logo { display: block; width: auto; max-width: 140px; height: 32px; flex: none; object-fit: contain; }
.brand__name {
  font-weight: 750;
  font-size: 18.4px;
  letter-spacing: -0.01em;
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
}
.brand--ink { color: var(--ink); }
.brand--ink .brand__line { fill: var(--receipt); }
.brand--light { color: var(--receipt); }
.brand--light .brand__mark { color: var(--receipt); }
.brand--light .brand__line { fill: var(--ink); }

/* ---------- receipt ---------- */
.receipt {
  margin: 0;
  position: relative;
  overflow: hidden;
  padding: 0 6px 18px;
}
.receipt__paper {
  position: relative;
  padding: 26px 22px 30px;
  background: var(--receipt);
  color: #2c2b3c;
  font-family: var(--font-receipt);
  font-size: 12.5px;
  line-height: 1.55;
  box-shadow: 0 18px 30px -18px rgba(28, 27, 41, 0.45);
  /* torn edge at the bottom */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat,
    conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) bottom / 14px 10px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat,
    conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) bottom / 14px 10px repeat-x;
}
.receipt__head { display: grid; text-align: center; gap: 1px; }
.receipt__head strong { font-size: 15px; letter-spacing: 0.08em; }
.receipt__rule { margin: 12px 0; border-top: 1.5px dashed #9b9aa8; }
.receipt__item {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
}
.receipt__name { grid-column: 1 / -1; }
.receipt__qty { color: #6b6a7a; padding-left: 12px; }
.receipt__amt { text-align: right; }
.receipt__sum { display: flex; justify-content: space-between; }
.receipt__sum--total {
  margin: 6px 0;
  font-size: 15px;
  font-weight: 600;
}
.receipt__stamp {
  width: max-content;
  margin: 14px auto 10px;
  padding: 2px 16px;
  border: 3px solid var(--till);
  border-radius: 6px;
  color: var(--till);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.18em;
  transform: rotate(-7deg);
}
.receipt__barcode { display: block; width: 100%; height: 38px; margin-top: 8px; fill: #2c2b3c; }
.receipt__foot { margin-top: 8px; text-align: center; color: #6b6a7a; }

/* one orchestrated moment: the receipt feeds out of the slot, then the sale is stamped paid */
@media (prefers-reduced-motion: no-preference) {
  .receipt--print .receipt__paper {
    animation: receipt-feed 2.4s steps(30, end) 0.3s both;
  }
  .receipt--print .receipt__stamp {
    animation: receipt-stamp 0.32s cubic-bezier(0.2, 1.6, 0.4, 1) 2.85s both;
  }
}
@keyframes receipt-feed {
  from { transform: translateY(-101%); }
  to { transform: translateY(0); }
}
@keyframes receipt-stamp {
  from { opacity: 0; transform: rotate(-7deg) scale(1.9); }
  to { opacity: 1; transform: rotate(-7deg) scale(1); }
}