card-details-page {
  $background-color: white;

  .confetti-root {
    display: flex;
    justify-content: center;
    position: relative;
    transform: translateY(200px);
    z-index: 1000;
  }

  .wrapper {
    padding: 0 $gift-card-page-padding;

    .header-extension {
      height: 150px;
    }
  }

  .main-content {
    flex-grow: 1;
  }

  .balance {
    font-size: 25px;
    font-weight: 500;
    margin: 30px 0;
    margin-top: -110px;
  }

  .card-image {
    img {
      background: white;
      position: relative;
      z-index: 1;
      max-width: 82%;
      height: auto;
      width: 265px;
      min-height: 130px;
      min-width: 210px;
    }

    + .actions-wrapper {
      margin-top: 55px;
    }
  }

  @media print {
    .actions-wrapper {
      display: none;
    }

    .card-info {
      img.card-info__body.barcode-image {
        filter: invert(0) !important;
      }
    }
  }

  .card-info {
    background-color: #f7f7f7;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    padding: 70px 30px 10px;
    margin-bottom: 25px;
    margin-top: -55px;
    max-width: $gift-card-content-max-width;
    margin-left: auto;
    margin-right: auto;

    &__title {
      color: rgba(0, 0, 0, 0.6);
      font-size: 16px;
    }

    &__body {
      color: #060606;
      cursor: pointer;
      display: block;
      font-size: 18px;
      font-weight: 500;
      margin: 20px 0;
    }

    &__date {
      color: #4a4a4a;
      font-size: 14px;
      margin-bottom: 8px;

      &--outside-card-info {
        margin-top: 17px;
        margin-bottom: 25px;
      }
    }

    &__status-message {
      margin-bottom: 33px;
    }

    &.has-pin {
      margin-bottom: -2px;

      .card-info__body {
        margin: 15px 0;
        margin-top: 12px;
      }

      .separator {
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        height: 1px;
        margin: 18px 0;
      }

      .pin {
        margin-top: 10px;
      }
    }

    img.card-info__body.barcode-image {
      height: 75px;
      margin: 5px auto -5px;
      filter: invert(3%);
    }

    ngx-qrcode {
      position: relative;
      top: 7px;
    }

    ngx-barcode.card-info__body {
      margin-bottom: 0 !important;
      margin-top: 8px !important;

      & + div.card-info__body {
        margin-top: 0;

        &.long {
          font-size: 14px;
          margin-bottom: 17px;

          @media (max-width: 350px) {
            font-size: 12px;
          }
        }
      }

      canvas {
        width: 100%;
        height: 70px;
      }
    }
  }
}
