/* CREDITS PAGE */

body {
  background-color: #fffcfe;
}


/* ♡ highlight selection ♡ */

::selection {
  color: #ffc4d4;
}


html {
  scroll-behavior: smooth;
}


/* page */

.credits-page {
  width: 1000px;

  margin: 55px auto 55px;

  color: #8a7070;

  font-family: "basiic", Verdana, sans-serif;
  font-size: 10px;
  line-height: 1.6;
}


/* receipt area */

.receipt-area {
  position: relative;

  width: 520px;

  margin: 0 auto;

  zoom: 1.3;
}

/* receipt shadow */

.receipt-shadow {
  position: absolute;

  top: 18px;
  left: 50%;

  width: 438px;
  height: calc(100% - 10px);

  transform:
    translateX(-50%)
    rotate(1deg);

  border: 1px solid #f1d6e1;

  box-shadow:
    0 10px 25px
    rgba(211, 164, 185, 0.18);

  pointer-events: none;

  overflow: hidden;
}

.receipt-shadow::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image: url("/img/polkabg.gif");
  background-repeat: repeat;
}

.receipt-shadow::after {
  content: "";

  position: absolute;
  inset: 0;

  background: rgba(255, 255, 255, 0.65);
}


/* receipt paper */

.cafe-receipt {
  position: relative;

  width: 420px;

  margin: 0 auto;

  padding:
    42px
    34px
    45px;

  color: #8a7070;

  background-color: #fffefc;

  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 28px,
      rgba(239, 215, 225, 0.18) 29px
    );

  border-left: 1px solid #f2dce5;
  border-right: 1px solid #f2dce5;

  box-shadow:
    0 4px 18px rgba(211, 164, 185, 0.14);

  box-sizing: border-box;

  transform: rotate(-0.4deg);

  z-index: 2;
}



/* header */

.receipt-header {
  text-align: center;
}

.receipt-cafe-name {
  margin-bottom: 3px;

  color: #9f7f87;

  font-family: "Ownglyph PDH Regular", cursive;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 1px;

  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}

.receipt-subtitle {
  margin-bottom: 22px;

  color: #bd929f;

  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.receipt-details {
  display: flex;
  flex-direction: column;
  gap: 4px;

  padding: 10px 12px;

  background: #fffafd;

  border-top: 1px dashed #f0d3df;
  border-bottom: 1px dashed #f0d3df;

  text-align: left;
}

.receipt-details div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.receipt-details span:first-child {
  color: #bd929f;

  text-transform: uppercase;
}

.receipt-details span:last-child {
  color: #8a7070;
}


/* dividers */

.receipt-divider {
  margin: 20px 0;

  overflow: hidden;

  color: #e4b4c5;

  font-size: 9px;
  letter-spacing: 1px;
  white-space: nowrap;

  text-align: center;
}


/* sections */

.receipt-section {
  margin: 0;
}

.receipt-section-title {
  margin: 0 0 13px;

  color: #a48787;

  font-family: "Ownglyph PDH Regular", cursive;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: 0.5px;

  text-align: center;
  text-transform: lowercase;
}

.receipt-heading-row {
  display: flex;
  justify-content: space-between;

  padding-bottom: 5px;
  margin-bottom: 7px;

  color: #c5a5af;

  border-bottom: 1px dotted #ecd0db;

  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* credit items */

.receipt-item {
  display: flex;
  justify-content: space-between;
  gap: 15px;

  align-items: flex-start;

  padding: 8px 2px;

  border-bottom: 1px dotted #f0dce4;
}

.receipt-item-main {
  min-width: 0;

  display: flex;
  gap: 8px;

  align-items: flex-start;
}

.receipt-heart {
  flex-shrink: 0;

  color: #e6afc4;

  font-size: 10px;
}

.receipt-item a {
  color: #b77f95;

  font-size: 10px;
  line-height: 1.4;

  text-decoration: none !important;
  text-transform: lowercase;

  cursor: url("/img/key2.png"), pointer;
}

.receipt-item a:hover,
.receipt-item a:focus {
  color: #d88faa;

  background: #fff5f9;

  text-decoration:
    underline
    dotted
    1px
    !important;

  text-underline-offset: 3px;
}

.receipt-item p {
  margin: 2px 0 0;

  color: #b8a0a8;

  font-size: 8px;
  line-height: 1.45;
}

.receipt-price {
  flex-shrink: 0;

  color: #c79aaa;

  font-size: 9px;
}


/* totals */

.receipt-totals {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.receipt-totals div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.receipt-total {
  padding-top: 9px;
  margin-top: 5px;

  color: #a66f84;

  border-top: 1px dashed #e8bfd0;

  font-family: "Ownglyph PDH Regular", cursive;
  font-size: 16px;
}


/* note */

.receipt-note {
  margin-top: 24px;
  padding: 14px;

  background: #fffafd;

  border: 1px dashed #f0d3df;

  color: #a78c94;

  font-size: 8px;
  line-height: 1.75;

  text-align: center;
}

.receipt-note p {
  margin: 0 0 10px;
}

.receipt-note p:last-child {
  margin-bottom: 0;
}


/* barcode */

.receipt-barcode {
  margin-top: 26px;

  text-align: center;
}

.barcode-lines {
  width: 185px;
  height: 43px;

  margin: 0 auto 6px;

  background-image:
    repeating-linear-gradient(
      to right,
      #987d85 0,
      #987d85 1px,
      transparent 1px,
      transparent 3px,
      #987d85 3px,
      #987d85 5px,
      transparent 5px,
      transparent 8px,
      #987d85 8px,
      #987d85 9px,
      transparent 9px,
      transparent 12px
    );

  opacity: 0.65;
}

.receipt-barcode p {
  margin: 0;

  color: #b49aa3;

  font-family: "MS Gothic", monospace;
  font-size: 8px;
  letter-spacing: 2px;
}


/* receipt footer */

.receipt-footer {
  margin-top: 22px;

  text-align: center;
}

.receipt-footer p {
  margin: 0;

  color: #a48787;
}

.receipt-footer-small {
  margin-top: 4px !important;

  color: #c095a4 !important;

  font-size: 8px;
}

.receipt-kaomoji {
  margin-top: 13px;

  color: #d09bad;

  font-family: "MS Gothic", monospace;
  font-size: 14px;
}




/* floating hearts */

.receipt-decoration {
  position: absolute;

  color: #e7d2da;

  font-family: "Ownglyph PDH Regular", cursive;
  font-size: 38px;

  pointer-events: none;

  z-index: 3;

  animation:
    receipt-heart-float
    4.5s
    ease-in-out
    infinite;
}

.receipt-decoration-left {
  top: 170px;
  left: -5px;

  transform: rotate(-12deg);
}

.receipt-decoration-right {
  top: 430px;
  right: -20px;

  animation-delay: -2s;

  transform: rotate(14deg);
}

@keyframes receipt-heart-float {
  0%,
  100% {
    margin-top: 0;
  }

  50% {
    margin-top: -6px;
  }
}









.chii-approved-stamp {
  position: absolute;

  bottom: 95px;
  right: 35px;

  width: 76px;
  height: 76px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 2px solid #f1ccd9;
  border-radius: 50%;

  color: #ddb2c1;

  font-family: "Ownglyph PDH Regular", cursive;
  line-height: 1.05;
  text-align: center;

  transform: rotate(10deg);

  opacity: 0.72;

  pointer-events: none;
  z-index: 5;
}

.chii-approved-stamp::before {
  content: "";

  position: absolute;
  inset: 5px;

  border: 1px dashed #f1ccd9;
  border-radius: 50%;
}

.chii-approved-stamp span {
  position: relative;

  font-size: 10px;
}

.chii-approved-stamp strong {
  position: relative;

  margin-top: 3px;

  font-size: 15px;
  font-weight: normal;
}




.receipt-chii {
  position: absolute;

  left: 34px;
  bottom: 72px;

  width: 58px;
  height: auto;

  pointer-events: none;

  z-index: 5;
}



.receipt-logo {
  display: flex;

  justify-content: center;

  margin-bottom: 6px;
}

.receipt-logo img {
  width: 110px;

  height: auto;

  display: block;
}


.paperclip {
  position: absolute;

  top: -18px;
  right: 35px;

  width: 70px;

  z-index: 20;

  pointer-events: none;

  transform: rotate(8deg);


  filter: saturate(0.3);
}

.cupcake {
  position: absolute;

  top: -75px;
  left: -42px;

  width: 220px;
  height: auto;

  pointer-events: none;

  z-index: 20;
}


.dessert {
  position: absolute;

  padding: 6px;

  background: #fffafd;

  border: 9px solid transparent;
  border-image:
    url("/img/laceborder.png")
    8 fill round;

  box-sizing: border-box;

  pointer-events: none;

  z-index: 1;
}

.dessert img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border: 1px solid #f0d3df;

  box-sizing: border-box;
}


.dessert-cake {
  top: 145px;
  left: -230px;

  width: 155px;
  height: 105px;
}

.dessert-cakes {
  top: 115px;
  right: -255px;

  width: 165px;
  height: 105px;
}

.dessert-melo {
  top: 510px;
  left: -235px;

  width: 155px;
  height: 115px;
}

.dessert-tea {
  top: 650px;
  right: -210px;

  width: 145px;
  height: 105px;
}

.dessert-cat {
  top: 950px;
  left: -240px;

  width: 165px;
  height: 115px;
}

.dessert-pudding {
  top: 1150px;
  right: -240px;

  width: 155px;
  height: 110px;
}

.dessert-donuts {
  top: 1450px;
  left: -230px;

  width: 165px;
  height: 110px;
}

.dessert-kero {
  top: 1650px;
  right: -235px;

  width: 155px;
  height: 115px;
}