/* Connected hinges give the receipt a paper surface instead of a rigid flip. */
.paper-sheet {
  --paper-height: 490px;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 15%;
  pointer-events: none;
}
.paper-tag {
  --paper-height: 345px;
}
.paper-flat,
.paper-hinges {
  display: block;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.paper-hinges {
  display: none;
}
.paper-flat-front,
.paper-flat-back {
  display: block;
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform: translateZ(0.15px);
}
.paper-flat-back {
  transform: rotateY(180deg) translateZ(0.15px);
}
.paper-flat .receipt-side,
.paper-flat .price-face {
  transform: none;
}
.paper-sheet[data-paper-moving="true"] > .paper-flat {
  display: none;
}
.paper-sheet[data-paper-moving="true"] > .paper-hinges {
  display: block;
}
.paper-sheet[data-paper-moving="true"] .paper-fold {
  will-change: transform;
}
.paper-fold {
  --fold-shade: 0;
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: calc(var(--paper-height) / var(--paper-pieces));
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.paper-facet {
  display: block;
  position: absolute;
  inset: 0 0 -0.3px;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0.15px);
}
.paper-facet-back {
  transform: rotateY(180deg) translateZ(0.15px);
}
.paper-print {
  display: block;
  position: absolute;
  top: calc(var(--paper-height) / var(--paper-pieces) * var(--fold-index) * -1);
  left: 0;
  width: 100%;
  height: var(--paper-height);
}
.paper-print .receipt-side,
.paper-print .price-face {
  transform: none;
  backface-visibility: visible;
  clip-path: none;
  box-shadow: none;
}
.paper-print .receipt-side::after,
.paper-flat .receipt-side::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background:
    linear-gradient(
      113deg,
      transparent 34.6%,
      #b9b5aa60 34.8%,
      #fff7 35%,
      transparent 35.5%
    ),
    linear-gradient(
      71deg,
      transparent 67.8%,
      #7772 68%,
      #fff7 68.3%,
      transparent 68.6%
    );
}
.paper-light {
  display: block;
  position: absolute;
  inset: 0;
  opacity: calc(0.035 + var(--fold-shade) * 0.8);
  background: linear-gradient(
    180deg,
    #fff9,
    #fff1 12%,
    transparent 35%,
    #16181044 80%,
    #161810a6
  );
}
.paper-valley > .paper-facet > .paper-light {
  background: linear-gradient(
    180deg,
    #171710a6,
    #17171033 20%,
    transparent 65%,
    #fff9
  );
}
.paper-facet-back > .paper-light {
  opacity: calc(0.035 + var(--fold-shade) * 0.6);
}
.paper-receipt .paper-last > .paper-facet {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 84%,
    95% 100%,
    90% 84%,
    85% 100%,
    80% 84%,
    75% 100%,
    70% 84%,
    65% 100%,
    60% 84%,
    55% 100%,
    50% 84%,
    45% 100%,
    40% 84%,
    35% 100%,
    30% 84%,
    25% 100%,
    20% 84%,
    15% 100%,
    10% 84%,
    5% 100%,
    0 84%
  );
}
.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.motion-reduced .paper-fold {
  transform: none !important;
}
.motion-reduced .paper-flat {
  display: block !important;
}
.motion-reduced .paper-hinges {
  display: none !important;
}
.motion-reduced .paper-sheet {
  transform: none !important;
}
.motion-reduced .paper-light {
  opacity: 0.035 !important;
}
@media (max-width: 760px) {
  .paper-sheet {
    --paper-height: 470px;
  }
  .paper-tag {
    --paper-height: 222px;
  }
}
@media (max-width: 370px) {
  .paper-tag {
    --paper-height: 200px;
  }
}
@media print {
  .paper-flat {
    display: block !important;
  }
  .paper-hinges {
    display: none !important;
  }
  .paper-sheet,
  .paper-fold,
  .receipt-rotate {
    transform: none !important;
  }
  .paper-light {
    display: none;
  }
}