/* =================================================================
   Receipt — every department listed as a till receipt, hanging from a
   printer slot: shop header, dashed rules, dotted leaders, a total, a
   barcode and a torn (zigzag) bottom edge. Each line links to the
   department on the departments page.

   The paper "feeds out" of the slot the first time it scrolls into view:
   js/components/reveal.js adds .reveal--pending while it is below the
   fold, which here slides the paper up inside the feed (instead of the
   usual fade), and removes it on arrival. Without the script, or with
   reduced motion, the receipt is simply there.
   ================================================================= */

.receipt {
  --receipt-tooth: 1.4rem;
  --receipt-rule: rgb(var(--color-ink-rgb) / 0.28);
  /* Monospace for the English receipt. Plex Mono has no Arabic letters, and
     its wide spaces would still be used between Arabic words, so the Arabic
     receipt sets its text in the Arabic face instead. */
  --receipt-font: var(--font-mono);

  position: relative;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding-top: 0.8rem;
  /* The shadow follows the torn edge, because it is drawn from the masked paper */
  filter: drop-shadow(0 1.2rem 1.6rem rgb(var(--color-ink-rgb) / 0.16)) drop-shadow(0 0.2rem 0.3rem rgb(var(--color-ink-rgb) / 0.08));
}

.receipt:lang(ar) { --receipt-font: var(--font-body); }

/* Printer slot the paper hangs from */
.receipt__slot {
  position: relative;
  z-index: 1;
  height: 1.6rem;
  margin-inline: -1.2rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(to bottom, #1C4550, var(--color-ink));
  box-shadow: inset 0 -0.3rem 0 rgb(0 0 0 / 0.35);
}

.receipt__feed {
  overflow: hidden;
  margin-top: -0.8rem;   /* the paper starts inside the slot */
}

.receipt__paper {
  position: relative;
  padding: 3.2rem 2.4rem calc(2.4rem + var(--receipt-tooth));
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--receipt-font);
  font-size: var(--text-sm);
  line-height: 1.6;
  transition: transform 1.6s cubic-bezier(0.22, 0.8, 0.24, 1);

  /* Torn bottom edge: a row of downward teeth under a solid body */
  -webkit-mask:
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 50% 100% / var(--receipt-tooth) calc(var(--receipt-tooth) / 2) repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--receipt-tooth) / 2 + 0.1rem) no-repeat;
  mask:
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 50% 100% / var(--receipt-tooth) calc(var(--receipt-tooth) / 2) repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--receipt-tooth) / 2 + 0.1rem) no-repeat;
}

/* Waiting below the fold: the paper is still inside the printer */
.receipt.reveal--pending { opacity: 1; transform: none; }
.receipt.reveal--pending .receipt__paper { transform: translateY(-100%); }

/* ── Header ── */

.receipt__header {
  padding-bottom: 1.6rem;
  border-bottom: 0.2rem dashed var(--receipt-rule);
  text-align: center;
}

.receipt__logo {
  width: auto;
  height: 4.8rem;
  margin: 0 auto 1rem;
}

.receipt__store {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.receipt__address {
  font-size: var(--text-xs);
  color: var(--color-text-soft);
}

.receipt__meta {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block: 1.2rem;
  border-bottom: 0.2rem dashed var(--receipt-rule);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Lines ── */

.receipt__group { padding-block: 1.6rem 0.4rem; }
.receipt__group + .receipt__group { border-top: 0.2rem dashed var(--receipt-rule); }

.receipt__group-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  font-family: var(--receipt-font);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-deep);
}

.receipt__group--fresh .receipt__group-title { color: var(--color-leaf-deep); }

.receipt__line {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  min-height: 4rem;
  padding: 0.6rem 0.8rem;
  margin-inline: -0.8rem;
  border-radius: 0.4rem;
  font-size: var(--text-base);
  transition: background-color var(--transition-base);
}

.receipt__line:hover { background: rgb(var(--color-amber-rgb) / 0.22); }

.receipt__name { font-weight: var(--font-weight-medium); }

/* Dotted leader between the name and the tick */
.receipt__leader {
  flex: 1;
  min-width: 2rem;
  border-bottom: 0.2rem dotted var(--receipt-rule);
  transform: translateY(-0.4rem);
}

.receipt__tick {
  width: 1.6rem;
  height: 1.6rem;
  align-self: center;
  color: var(--color-teal-deep);
}

/* ── Total, barcode, thanks ── */

.receipt__total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
  margin-top: 1.2rem;
  padding-block: 1.4rem;
  border-block: 0.4rem double var(--receipt-rule);
}

.receipt__total-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.receipt__total-value {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

/* Two stripe patterns with different periods, so the bars don't visibly repeat */
.receipt__barcode {
  height: 5.6rem;
  margin: 2rem auto 0.8rem;
  max-width: 28rem;
  background:
    repeating-linear-gradient(90deg, var(--color-ink) 0 0.2rem, transparent 0.2rem 0.5rem, var(--color-ink) 0.5rem 0.6rem, transparent 0.6rem 0.9rem, var(--color-ink) 0.9rem 1.3rem, transparent 1.3rem 1.5rem),
    repeating-linear-gradient(90deg, transparent 0 0.7rem, var(--color-ink) 0.7rem 0.8rem, transparent 0.8rem 2.3rem);
}

.receipt__thanks {
  font-size: var(--text-xs);
  text-align: center;
  color: var(--color-text-soft);
}