:host {      
  .guest-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;

    .top-info {
      padding: 8px 0 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 16px;
      
      &__level {
        width: 100%;

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

      }

      & p {
        color: var(--button-color);
      }
    }

    &__qr {
      margin: 10px;
      padding: 5px;
      width: fit-content;            
      border-radius: 6px;
      align-items: center;
      display: flex;
      flex-direction: column;      
      cursor: pointer;

      .qr-code-wrapper {
        position: relative;
      }

      .zoom {
        position: absolute;

        bottom: 5px;
        right: -35px;

        color: var(--button-color);
      }
    }

    &__user-description {
      padding: 14px 24px;

      p {
        width: 80%;
        text-align: center;
        margin: 0 auto;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        letter-spacing: -0.5px;        

        #price,
        .percent {
          font-weight: bold;
          color: var(--button-color);
        }  
      }      
    }

    &__purchases-description {
      margin: 0;
      padding: 14px 24px;
      width: 100%;
      text-align: center;
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 19px;
      letter-spacing: -0.5px;
      grid-template-columns: calc(100% - 24px) 24px;

      span {
        color: #219653;
      }
    }

    &__level-info {
      padding-top: 36px;
      padding-left: 36px;
      padding-right: 36px;
      display: flex;
      flex-direction: column;
      align-items: center;

      h2 {
        font-style: normal;
        font-weight: 700;
        font-size: 17px;
        line-height: 22px;
        text-align: center;
        letter-spacing: -0.408px;
      }

      input[type="range"] {
        -webkit-appearance: none;
        width: 100%;
        height: 6px;
        border-radius: 5px;
        display: block;
        position: relative;
        background: #231f20;
        box-shadow: 0px 0px 3px #f2c94c59;
        background-image: linear-gradient(#f2c94c, #f2c94c);
        background-size: 70% 100%;
        background-repeat: no-repeat;

        &::before,
        &::after {
          content: " ";
          display: block;
          width: 16px;
          height: 16px;
          border-radius: 100%;
          position: absolute;
          top: -5px;
        }

        &::before {
          background-color: #f2c94c;
          left: 0px;
        }

        &::after {
          background-color: #f2c94c;
          right: 0px;
        }

        &::-webkit-slider-thumb {
          -webkit-appearance: none;
          background: #f2c94c;
          width: 16px;
          height: 16px;
          border-radius: 100%;
        }

        &::-ms-thumb {
          -webkit-appearance: none;
          height: 20px;
          width: 20px;
          border-radius: 50%;
          background: #f2c94c;
          cursor: ew-resize;
          box-shadow: 0 0 2px 0 #555;
          transition: background 0.3s ease-in-out;
        }

        &::-moz-range-thumb {
          -webkit-appearance: none;
          height: 20px;
          width: 20px;
          border-radius: 50%;
          background: #f2c94c;
          cursor: ew-resize;
          box-shadow: 0 0 2px 0 #555;
          transition: background 0.3s ease-in-out;
        }
      }
    }

    &__download-app {
      width: 100%;
      position: relative;
      margin-top: 32px;
      display: flex;
      justify-content: flex-end;
      img {
        width: 100%;
        max-width: calc(100% - 16px);
      }
    }

    &__loyalty-program {
      text-align: center;
      color: var(--button-color);
      font-style: normal;
      font-weight: bold;
      font-size: 12px;
      line-height: 16px;
      text-decoration: none;
      margin: 17px 0 0;
    }
  }

  .wrapper {
      padding-top: 20px;
  }

  .not-found {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
  }

  .broken {
    display: flex;    
    flex-direction: column;
    align-items: center;
    gap: 20px;
    
    p {
      max-width: 80%;
      text-align: center;
    }
  }
}

app-accordion {
  ul {
    li {
      list-style-type: disc;
      margin-left: 16px;
    }
  }
}