// 帮助中心页面样式
.help-center-page {
  background-color: #f5f5f5;
  min-height: 100vh;

  // ==================== 头部导航 ====================
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;
    position: sticky;
    top: 0;
    z-index: 100;

    .header-left {
      display: flex;
      align-items: center;
      padding: 10rpx;

      .back-text {
        font-size: 28rpx;
        color: #1890ff;
      }
    }

    .header-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }

    .header-right {
      width: 56rpx; // 保持布局平衡
    }
  }

  // ==================== 搜索框 ====================
  .search-section {
    padding: 30rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;

    .search-box {
      display: flex;
      align-items: center;
      background-color: #f8f8f8;
      border-radius: 50rpx;
      padding: 20rpx 30rpx;
      border: 1rpx solid #e0e0e0;



      .search-input {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        background: transparent;
        border: none;
        outline: none;

        &::placeholder {
          color: #999;
        }
      }
    }
  }

  // ==================== 分类选择 ====================
  .category-section {
    padding: 30rpx;
    background-color: #fff;
    margin-bottom: 20rpx;

    .category-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 30rpx;
    }

    .category-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;

      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20rpx;
        background-color: #f8f8f8;
        border-radius: 20rpx;
        border: 2rpx solid transparent;
        transition: all 0.3s ease;
        min-width: 120rpx;

        &.active {
          background-color: #e8f4fd;
          border-color: #1890ff;

          .category-name {
            color: #1890ff;
          }


        }



        .category-name {
          font-size: 24rpx;
          color: #666;
          text-align: center;
          transition: color 0.3s ease;
        }
      }
    }
  }

  // ==================== 帮助列表 ====================
  .help-list-section {
    flex: 1;
    background-color: #fff;
    margin: 30rpx;
    border-radius: 20rpx;
    overflow: hidden;

    .help-list {
      .help-items {
        .help-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 30rpx;
          border-bottom: 1rpx solid #f0f0f0;
          transition: background-color 0.3s ease;

          &:last-child {
            border-bottom: none;
          }

          &:active {
            background-color: #f8f8f8;
          }

          .help-item-left {
            display: flex;
            align-items: center;
            flex: 1;



            .help-content {
              flex: 1;

              .help-title {
                display: block;
                font-size: 32rpx;
                font-weight: 500;
                color: #333;
                margin-bottom: 10rpx;
                line-height: 1.4;
              }

              .help-desc {
                display: block;
                font-size: 26rpx;
                color: #666;
                line-height: 1.4;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }

          .help-item-right {
            .arrow-text {
              font-size: 28rpx;
              color: #ccc;
            }
          }
        }
      }

      // 空状态
      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 100rpx 30rpx;



        .empty-text {
          font-size: 28rpx;
          color: #999;
        }
      }
    }
  }

  // ==================== 右侧弹出详情 ====================
  .detail-popup {
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    // 详情头部
    .detail-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1rpx solid #eee;
      background-color: #fff;
      position: sticky;
      top: 0;
      z-index: 10;

      .detail-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        flex: 1;
        margin-right: 20rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .close-btn {
        padding: 10rpx;

        .close-text {
          font-size: 28rpx;
          color: #1890ff;
        }
      }
    }

    // 详情内容
    .detail-content {
      flex: 1;

      .detail-body {
        padding: 30rpx;

        .detail-section {
          margin-bottom: 40rpx;

          &:last-child {
            margin-bottom: 0;
          }

          .section-title {
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 20rpx;
            padding-bottom: 10rpx;
            border-bottom: 2rpx solid #1890ff;
            display: inline-block;
          }

          .section-content {
            font-size: 28rpx;
            color: #666;
            line-height: 1.6;
            display: block;
          }

          // 解决方案步骤
          .solution-content {
            .solution-step {
              display: flex;
              align-items: flex-start;
              margin-bottom: 20rpx;
              padding: 20rpx;
              background-color: #f8f9fa;
              border-radius: 12rpx;
              border-left: 4rpx solid #1890ff;

              &:last-child {
                margin-bottom: 0;
              }

              .step-number {
                width: 40rpx;
                height: 40rpx;
                background-color: #1890ff;
                color: #fff;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24rpx;
                font-weight: 600;
                margin-right: 20rpx;
                flex-shrink: 0;
              }

              .step-content {
                font-size: 28rpx;
                color: #333;
                line-height: 1.5;
                flex: 1;
              }
            }
          }

          // 相关链接
          .related-links {
            .related-link {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 20rpx;
              background-color: #f8f9fa;
              border-radius: 12rpx;
              margin-bottom: 15rpx;
              border: 1rpx solid #e9ecef;
              transition: all 0.3s ease;

              &:last-child {
                margin-bottom: 0;
              }

              &:active {
                background-color: #e9ecef;
              }

              .link-text {
                font-size: 28rpx;
                color: #1890ff;
                flex: 1;
              }

              .link-arrow {
                font-size: 24rpx;
                color: #1890ff;
              }
            }
          }

          // 联系客服
          .contact-section {
            .contact-btn {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 25rpx;
              background: linear-gradient(135deg, #1890ff, #40a9ff);
              color: #fff;
              border: none;
              border-radius: 50rpx;
              font-size: 30rpx;
              font-weight: 500;
              transition: all 0.3s ease;
              box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);

              &:active {
                transform: translateY(2rpx);
                box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.3);
              }


            }
          }
        }
      }
    }
  }
}