// 球友关注页面样式
.follow_page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  // 导航栏内容
  .navbar_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 44px;

    .navbar_back {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      margin-left: 10px;

      .back_icon {
        height: 16px;
        width: 8px;
        background: url("../../static/userInfo/back_icon.svg") no-repeat center;
        background-size: contain;
      }
    }

    .navbar_title {
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 20px;
      line-height: 28px;
      letter-spacing: 1.9%;
      color: #000000;
      position: absolute;
      left: 50px;
    }

    .navbar_action {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 83px;
      height: 30px;
      margin-right: 7px;

      .action_icon {
        width: 20px;
        height: 20px;
        background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Ccircle cx='5' cy='10' r='1.5' fill='%23191919'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%23191919'/%3E%3Ccircle cx='15' cy='10' r='1.5' fill='%23191919'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
        background-size: contain;
      }
    }
  }

  // 标签页导航
  .tab_navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 80px;
    background: #ffffff;
    height: 44px;
    overflow-x: auto;
    position: fixed;
    top: 110px;
    left: 0;
    right: 0;
    z-index: 100;
    flex-shrink: 0;


    .tab_item {
      display: flex;
      align-items: center;
      gap: 4.8px;
      padding: 8px 4px;
      position: relative;
      flex-shrink: 0;
      min-width: fit-content;

      .tab_text {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -1.64%;
        color: rgba(0, 0, 0, 0.5);
        transition: all 0.2s ease;
        white-space: nowrap;

        // 小屏幕适配
        @media (max-width: 375px) {
          font-size: 13px;
        }
      }

      // 推荐图标
      .recommend_icon {
        .icon_container {
          width: 10px;
          height: 10px;
          position: relative;

          .star_icon {
            width: 100%;
            height: 100%;

            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: url("../../static/userInfo/star_icon.svg") no-repeat center;
              background-size: contain;
            }
          }
        }
      }

      // 激活状态
      &.active {
        /* 添加调试背景色 */
        
        .tab_text {
          font-weight: 600 !important;
          color: #000000 !important;
          position: relative;
          
          // 下边框只应用在文字上
          &::after {
            content: '';
            position: absolute;
            bottom: -8px; // 调整距离文字底部的位置
            left: 0;
            right: 0;
            height: 2px;
            background: #000000 !important;
            z-index: 1;
          }
        }
      }

      // 移除默认的粉丝标签激活样式，完全依赖 active 类
    }
  }

  // 用户列表容器
  .user_list_container {
    position: absolute;
    top: 154px; // 110px(导航栏高度) + 44px(tab导航高度)
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    overflow-y: auto;

    // 加载状态提示
    .loading_tip,
    .empty_tip,
    .load_more_tip {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px 20px;

      text {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
      }
    }

    .empty_tip {
      padding: 80px 20px;
    }

    .load_more_tip {
      padding: 20px;
    }
  }
}