/* =========================================
   FORMAT CARD STICKERS
========================================= */

.format-illustration {
  overflow: visible;
}

.format-illustration svg {
  display: none;
}

.format-sticker {
  position: relative;

  width: min(100%, 280px);
  height: 210px;

  margin: 0 auto;

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

  filter:
    drop-shadow(
      0 12px 15px
      rgba(0, 0, 0, 0.12)
    );

  transform:
    rotate(-2deg);

  transition:
    transform 0.3s ease;
}

.format-card:hover
.format-sticker {
  transform:
    translateY(-4px)
    rotate(0deg)
    scale(1.03);
}

.sticker-shadow {
  position: absolute;

  left: 50%;
  bottom: 13px;

  width: 72%;
  height: 18px;

  border-radius: 50%;

  background:
    rgba(0, 0, 0, 0.16);

  filter:
    blur(5px);

  transform:
    translateX(-50%);
}

.sticker-chip {
  position: absolute;

  z-index: 8;

  min-height: 30px;

  padding:
    0 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    3px solid
    #101010;

  border-radius:
    999px;

  background:
    #ffffff;

  color:
    #101010;

  font-size: 9px;
  font-weight: 900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  box-shadow:
    4px 4px 0
    #f4512c;
}


/* =========================================
   RESTAURANT STICKER
========================================= */

.restaurant-sticker-building {
  position: relative;

  z-index: 3;

  width: 188px;
  height: 124px;

  margin-top: 26px;

  border:
    5px solid
    #101010;

  border-radius:
    17px;

  background:
    #ffffff;

  box-shadow:
    inset 0 -10px 0
    #f4efe9;
}

.restaurant-sticker-sign {
  position: absolute;

  left: 50%;
  top: -35px;

  min-width: 128px;
  height: 47px;

  padding:
    0 14px;

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

  border:
    5px solid
    #101010;

  border-radius:
    13px;

  background:
    #f4512c;

  color:
    #ffffff;

  font-family:
    var(--fr-display);

  font-size: 24px;

  letter-spacing:
    0.02em;

  transform:
    translateX(-50%);
}

.restaurant-sticker-awning {
  position: absolute;

  left: 11px;
  right: 11px;
  top: 17px;

  height: 35px;

  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  overflow: hidden;

  border:
    4px solid
    #101010;

  border-radius:
    8px 8px 15px 15px;

  background:
    #ffffff;
}

.restaurant-sticker-awning span:nth-child(odd) {
  background:
    #f4512c;
}

.restaurant-sticker-front {
  position: absolute;

  left: 15px;
  right: 15px;
  bottom: 13px;

  height: 54px;

  display: grid;

  grid-template-columns:
    1fr 0.78fr 1fr;

  gap: 8px;
}

.restaurant-sticker-window,
.restaurant-sticker-door {
  border:
    4px solid
    #101010;

  border-radius:
    7px;
}

.restaurant-sticker-window {
  background:
    #dedad4;
}

.restaurant-sticker-door {
  background:
    #f4512c;
}

.restaurant-chip {
  right: 7px;
  top: 22px;

  transform:
    rotate(8deg);
}


/* =========================================
   CLOUD KITCHEN STICKER
========================================= */

.cloud-sticker-cloud {
  position: absolute;

  z-index: 2;

  left: 54px;
  top: 30px;

  width: 116px;
  height: 66px;

  border:
    5px solid
    #ffffff;

  border-radius:
    42px;

  background:
    #ffffff;

  box-shadow:
    0 4px 0
    rgba(16, 16, 16, 0.1);
}

.cloud-sticker-cloud span {
  position: absolute;

  display: block;

  border-radius: 50%;

  background:
    #ffffff;
}

.cloud-sticker-cloud span:nth-child(1) {
  width: 55px;
  height: 55px;

  left: 3px;
  top: -22px;
}

.cloud-sticker-cloud span:nth-child(2) {
  width: 68px;
  height: 68px;

  left: 34px;
  top: -35px;
}

.cloud-sticker-cloud span:nth-child(3) {
  width: 50px;
  height: 50px;

  right: 0;
  top: -17px;
}

.cloud-sticker-bag {
  position: relative;

  z-index: 4;

  width: 120px;
  height: 100px;

  margin-top: 53px;

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

  border:
    6px solid
    #101010;

  border-radius:
    18px;

  background:
    #ffffff;

  box-shadow:
    inset 0 -13px 0
    #f4512c;
}

.cloud-sticker-bag strong {
  color:
    #101010;

  font-family:
    var(--fr-display);

  font-size: 42px;

  line-height: 1;
}

.cloud-sticker-handle {
  position: absolute;

  left: 50%;
  top: -31px;

  width: 59px;
  height: 37px;

  border:
    6px solid
    #101010;

  border-bottom: 0;

  border-radius:
    18px 18px 0 0;

  transform:
    translateX(-50%);
}

.cloud-chip {
  right: 5px;
  bottom: 20px;

  transform:
    rotate(-7deg);
}


/* =========================================
   KIOSK STICKER
========================================= */

.kiosk-sticker-booth {
  position: relative;

  z-index: 3;

  width: 180px;
  height: 127px;

  margin-top: 28px;

  border:
    5px solid
    #ffffff;

  border-radius:
    16px;

  background:
    #f4512c;

  box-shadow:
    0 0 0 5px
    #101010;
}

.kiosk-sticker-sign {
  position: absolute;

  z-index: 5;

  left: 50%;
  top: -39px;

  min-width: 124px;
  height: 45px;

  padding:
    0 14px;

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

  border:
    5px solid
    #ffffff;

  border-radius:
    12px;

  background:
    #101010;

  color:
    #ffffff;

  font-family:
    var(--fr-display);

  font-size: 23px;

  letter-spacing:
    0.03em;

  box-shadow:
    0 0 0 4px
    #101010;

  transform:
    translateX(-50%);
}

.kiosk-sticker-roof {
  position: absolute;

  left: 7px;
  right: 7px;
  top: 11px;

  height: 29px;

  border:
    4px solid
    #101010;

  border-radius:
    7px;

  background:
    repeating-linear-gradient(
      90deg,
      #ffffff 0 20px,
      #f4512c 20px 40px
    );
}

.kiosk-sticker-body {
  position: absolute;

  left: 15px;
  right: 15px;
  bottom: 12px;

  height: 64px;

  display: grid;

  grid-template-columns:
    1.25fr 0.75fr;

  gap: 8px;
}

.kiosk-sticker-window,
.kiosk-sticker-panel {
  border:
    4px solid
    #101010;

  border-radius:
    7px;
}

.kiosk-sticker-window {
  background:
    #ffffff;
}

.kiosk-sticker-panel {
  background:
    #101010;
}

.kiosk-chip {
  left: 5px;
  top: 23px;

  color:
    #ffffff;

  border-color:
    #ffffff;

  background:
    #101010;

  box-shadow:
    4px 4px 0
    #f4512c;

  transform:
    rotate(-8deg);
}


/* =========================================
   STICKERS — TABLET
========================================= */

@media (
  min-width: 768px
) and (
  max-width: 1099px
) {

  .format-sticker {
    width: 230px;
    height: 185px;
  }

  .restaurant-sticker-building,
  .kiosk-sticker-booth {
    transform:
      scale(0.9);
  }

  .cloud-sticker-bag {
    transform:
      scale(0.9);
  }

}


/* =========================================
   STICKERS — MOBILE
========================================= */

@media (max-width: 767px) {

  .format-sticker {
    width: 122px;
    height: 104px;

    margin: 0;

    filter:
      drop-shadow(
        0 7px 8px
        rgba(0, 0, 0, 0.12)
      );
  }

  .sticker-shadow {
    bottom: 2px;

    width: 75%;
    height: 10px;
  }

  .sticker-chip {
    min-height: 20px;

    padding:
      0 7px;

    border-width: 2px;

    font-size: 5px;

    box-shadow:
      2px 2px 0
      #f4512c;
  }

  .restaurant-sticker-building {
    width: 87px;
    height: 59px;

    margin-top: 14px;

    border-width: 3px;
    border-radius: 9px;
  }

  .restaurant-sticker-sign {
    top: -21px;

    min-width: 66px;
    height: 27px;

    padding:
      0 7px;

    border-width: 3px;
    border-radius: 7px;

    font-size: 13px;
  }

  .restaurant-sticker-awning {
    left: 5px;
    right: 5px;
    top: 8px;

    height: 17px;

    border-width: 2px;
    border-radius: 4px 4px 7px 7px;
  }

  .restaurant-sticker-front {
    left: 7px;
    right: 7px;
    bottom: 5px;

    height: 25px;

    gap: 3px;
  }

  .restaurant-sticker-window,
  .restaurant-sticker-door {
    border-width: 2px;
    border-radius: 3px;
  }

  .restaurant-chip {
    right: -3px;
    top: 4px;
  }


  .cloud-sticker-cloud {
    left: 20px;
    top: 15px;

    width: 63px;
    height: 35px;

    border-width: 3px;
  }

  .cloud-sticker-cloud span:nth-child(1) {
    width: 29px;
    height: 29px;

    top: -12px;
  }

  .cloud-sticker-cloud span:nth-child(2) {
    width: 36px;
    height: 36px;

    left: 18px;
    top: -18px;
  }

  .cloud-sticker-cloud span:nth-child(3) {
    width: 27px;
    height: 27px;

    top: -9px;
  }

  .cloud-sticker-bag {
    width: 64px;
    height: 55px;

    margin-top: 27px;

    border-width: 3px;
    border-radius: 9px;

    box-shadow:
      inset 0 -7px 0
      #f4512c;
  }

  .cloud-sticker-bag strong {
    font-size: 22px;
  }

  .cloud-sticker-handle {
    top: -17px;

    width: 32px;
    height: 20px;

    border-width: 3px;
  }

  .cloud-chip {
    right: -1px;
    bottom: 4px;
  }


  .kiosk-sticker-booth {
    width: 86px;
    height: 61px;

    margin-top: 15px;

    border-width: 3px;
    border-radius: 8px;

    box-shadow:
      0 0 0 3px
      #101010;
  }

  .kiosk-sticker-sign {
    top: -21px;

    min-width: 68px;
    height: 26px;

    padding:
      0 6px;

    border-width: 3px;
    border-radius: 7px;

    font-size: 13px;

    box-shadow:
      0 0 0 2px
      #101010;
  }

  .kiosk-sticker-roof {
    left: 4px;
    right: 4px;
    top: 5px;

    height: 15px;

    border-width: 2px;

    background:
      repeating-linear-gradient(
        90deg,
        #ffffff 0 10px,
        #f4512c 10px 20px
      );
  }

  .kiosk-sticker-body {
    left: 7px;
    right: 7px;
    bottom: 5px;

    height: 31px;

    gap: 3px;
  }

  .kiosk-sticker-window,
  .kiosk-sticker-panel {
    border-width: 2px;
    border-radius: 3px;
  }

  .kiosk-chip {
    left: -5px;
    top: 3px;
  }

}