.wallet-pass-wrap {
  cursor: pointer;
  .wallet-pass-card-to-use {
    margin-top: 8px;
    .wallet-pass-card-icon {
      font-size: 20px;
      color: #fff;
    }
    & > span {
      display: flex;
      align-items: center;
      justify-content: center;
      & > span:first-child {
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .wallet-pass-title {
    color: var(--Gray-900, #101828);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
  }

  .wallet-pass-card {
    margin-top: 20px;
    border-radius: 12px;
    border: 1px solid var(--Gray-400, #98a2b3);
    background: var(--Base-White, #fff);
    .pisell-row-center {
      width: 100%;
    }

    .wallet-pass-card-title {
      display: flex;
      justify-content: space-between;
      color: var(--Gray-900, #101828);
      font-size: 16px;
      font-weight: 600;
      line-height: 20px;
      gap: 6px;
      .wallet-pass-card-title-left {
        display: flex;
        align-items: center;
        gap: 6px;
        .wallet-pass-card-title-left-icon {
          font-size: 22px;
        }
      }
      .wallet-pass-card-title-right {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        .wallet-pass-card-title-right-icon {
          font-size: 14px;
        }
      }
    }

    .wallet-pass-card-desc {
      color: #757575;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px; /* 142.857% */
      margin: 4px 0 0;
    }

    //.wallet-pass-card-icon {
    //  width: 24px;
    //  height: 24px;
    //  color: #667085;
    //  display: flex;
    //  align-items: center;
    //  justify-content: center;
    //  font-size: 24px;
    //}
  }

  .wallet-pass-card-complete-title {
    margin-top: 20px;
    color: var(--Gray-900, #101828);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    /* 155.556% */
  }

  .wallet-pass-card-complete-no-extre-pay {
    color: var(--Gray-700, #344054);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
  }

  .wallet-pass-card-desc-wrap {
    .wallet-pass-card-total-savings {
      .wallet-pass-card-total-savings-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .wallet-pass-card-total-savings-title-left {
          color: #009951;
          font-size: 16px;
          font-weight: 600;
          line-height: 28px; /* 175% */
        }
        .wallet-pass-card-total-savings-title-right {
          display: flex;
          align-items: center;
          gap: 4px;
          color: #757575;
          font-size: 12px;
          font-weight: 400;
          line-height: 20px; /* 166.667% */
          padding: 7px 0 7px 0px;
          .wallet-pass-card-total-savings-title-right-icon {
            font-size: 18px;
            color: #344054;
            transition: transform 0.3s ease;
            
            &.is-rotate {
              transform: rotate(180deg);
            }
          }
        }
      }

      .wallet-pass-card-total-savings-desc {
        overflow: hidden;
        opacity: 0;
        transition: all 0.3s ease-in-out;
        will-change: height, opacity;

        &[style*="height: 0"] {
          opacity: 0;
        }

        &:not([style*="height: 0"]) {
          opacity: 1;
        }
      }
    }
  }
}