qiming/qiming-mobile/subpackages/pages/my-subscriptions/components/plan-cards/plan-cards.scss

.plan-cards {
  margin-top: 24rpx;

  .section-title-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 36rpx;
    margin-bottom: 24rpx;

    .section-title-bar {
      width: 6rpx;
      height: 30rpx;
      background: linear-gradient(180deg, #1e6deb 0%, #008b70 100%);
      border-radius: 4rpx;
      margin-right: 12rpx;
    }

    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #1d2129;
      line-height: 32rpx;
    }
  }

  .cards-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .plan-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 0;
    border: 2rpx solid #e5e6eb;
    position: relative;
    overflow: hidden;

    &.plan-current {
      border: 2rpx solid #1e6deb;
      background: rgba(30, 109, 235, 0.02);
    }

    .plan-badges {
      position: absolute;
      top: -2rpx;
      right: -2rpx;
      z-index: 10;

      .badge {
        height: 52rpx;
        padding: 0 28rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 0 16rpx 0 24rpx;

        .badge-text {
          font-size: 24rpx;
          font-weight: 600;
          color: #fff;
          line-height: 24rpx;
        }

        &.badge-active {
          background: #1e6deb;
        }

        &.badge-hot {
          background: linear-gradient(135deg, #ff9465 0%, #ff5252 100%);
        }
      }
    }

    .plan-card-body {
      padding: 36rpx 32rpx 40rpx 32rpx;
      display: flex;
      flex-direction: column;

      .plan-name {
        font-size: 32rpx;
        font-weight: 600;
        color: #1d2129;
        margin-bottom: 8rpx;
        padding-right: 140rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .plan-desc {
        font-size: 24rpx;
        color: #86909c;
        margin-bottom: 16rpx;
        line-height: 1.4;
        padding-right: 140rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .plan-price-row {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        margin-bottom: 12rpx;

        .plan-price-symbol {
          font-size: 32rpx;
          font-weight: 700;
          color: #1e6deb;
          margin-right: 4rpx;
        }

        .plan-price-value {
          font-size: 56rpx;
          font-weight: 800;
          color: #1e6deb;
          line-height: 56rpx;
        }

        .plan-period {
          font-size: 26rpx;
          color: #4e5969;
          font-weight: 500;
          margin-left: 8rpx;
        }
      }

      .plan-credits-tag {
        align-self: flex-start;
        background: #e8f3ff;
        border-radius: 8rpx;
        padding: 6rpx 16rpx;
        margin-bottom: 24rpx;
        display: flex;
        flex-direction: row;
        align-items: center;

        .plan-credits-text {
          font-size: 24rpx;
          font-weight: 600;
          color: #1e6deb;
          line-height: 24rpx;
        }
      }

      .benefits {
        margin-bottom: 24rpx;

        .benefit-group {
          display: flex;
          flex-direction: column;
          gap: 20rpx;

          .benefit-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 16rpx;

            .benefit-icon-container {
              width: 32rpx;
              height: 32rpx;
              border-radius: 16rpx;
              background-color: #f2f3f5;
              display: flex;
              align-items: center;
              justify-content: center;

              .benefit-icon-text {
                font-size: 18rpx;
                font-weight: bold;
                line-height: 18rpx;
              }

              &.icon-check {
                .benefit-icon-text {
                  color: #4e5969;
                }
              }

              &.icon-cross {
                .benefit-icon-text {
                  color: #86909c;
                }
              }
            }

            .benefit-text {
              font-size: 26rpx;
              color: #1d2129;
              line-height: 36rpx;
            }
          }
        }
      }
      .plan-action-area {
        margin-bottom: 32rpx;
        width: 100%;

        .plan-btn {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 76rpx;
          background: #1e6deb;
          border-radius: 12rpx;
          box-shadow: none;
          box-sizing: border-box;

          &:active {
            transform: scale(0.98);
            opacity: 0.9;
          }

          &.plan-btn-processing {
            opacity: 0.6;
          }

          &.plan-btn-current {
            background: #efebe6;

            .plan-btn-text {
              color: #5c564f;
            }
          }

          &.plan-btn-disabled {
            background: #f5f5f5;
            box-shadow: none;
            pointer-events: none;

            .plan-btn-text {
              color: #c0c4cc;
            }

            &:active {
              transform: none;
              opacity: 1;
            }
          }

          .plan-btn-text {
            font-size: 26rpx;
            color: #fff;
            font-weight: 600;
            line-height: 26rpx;
          }
        }
      }

      .plan-divider {
        margin: 8rpx 0 24rpx;
        border-top: 2rpx dashed #e5e6eb;
      }
    }
  }
}