// 加载状态样式
.loading-container {
  width: 750rpx;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;

  text {
    font-size: 32rpx;
    color: #666;
  }
}

// 915活动页面样式
.act915page {
  width: 750rpx;
  height: 1624rpx;
  left: 0rpx;
  top: 0rpx;
  position: absolute;
  max-width: 100vw; // 确保不超过视口宽度
  overflow-x: hidden; // 防止水平滚动

  .act915pagebg {
    width: 750rpx;
    height: 4238rpx;
    left: 0rpx;
    top: 0rpx;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .act915pagegoods1 {
    width: 685rpx;
    height: 244rpx;
    left: 32rpx;
    top: 1370rpx;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .act915pagegoods3-container {
    width: 701rpx;
    height: 370rpx;
    left: 24rpx;
    top: 1648rpx;
    position: absolute;

    .act915pagegoods3bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .act915pagegoods3products {
      position: absolute;
      top: 13rpx;
      left: 10rpx;
      width: 203rpx;
      height: 286rpx;
      display: flex;
      gap: 14rpx; // 商品之间的间距
      padding: 25rpx; // 容器内边距
      pointer-events: none; // 让子元素可以点击

      .act915pagegoods3product {
        flex: 1;
        height: 286rpx; // 固定高度，确保商品项有足够空间
        position: relative;
        pointer-events: auto; // 恢复点击事件

        transition: all 0.3s ease;
        min-width: 200rpx; // 最小宽度确保可点击性

        &:hover {
          opacity: 0.8;
          transform: scale(1.02);
        }

        // 为不同位置的商品设置不同的点击区域
        &.product-left {
          // 左侧商品点击区域
        }

        &.product-center {
          // 中间商品点击区域
        }

        &.product-right {
          // 右侧商品点击区域
        }
      }
    }
  }

  .act915pagegoodslist2 {
    width: 701rpx;
    height: 791rpx;
    left: 24rpx;
    top: 3369rpx;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .act915pagegoodslist2-container {
    width: 701rpx;
    height: 791rpx;
    left: 24rpx;
    top: 3369rpx;
    position: absolute;

    .act915pagegoodslist2bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .act915pagegoodslist2products {
      position: absolute;
      top: 110rpx;
      left: 10rpx;
      width: 654rpx;
      height: 316 * 2rpx;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; // 3列等宽
      grid-template-rows: 1fr 1fr; // 2行等高
      gap: 0rpx; // 网格间距
      padding: 20rpx; // 容器内边距
      pointer-events: none; // 让子元素可以点击

      .act915pagegoodslist2product {
        position: relative;
        pointer-events: auto; // 恢复点击事件

        transition: all 0.3s ease;
        width: 204rpx;
        height: 295rpx;

        &:hover {
          opacity: 0.8;
          transform: scale(1.02);
        }

        // 为不同位置的商品设置不同的点击区域
        &.product-1 {
          // 第一行左侧商品
        }

        &.product-2 {
          // 第一行中间商品
        }

        &.product-3 {
          // 第一行右侧商品
        }

        &.product-4 {
          // 第二行左侧商品
        }

        &.product-5 {
          // 第二行中间商品
        }

        &.product-6 {
          // 第二行右侧商品
        }
      }
    }
  }

  .act915pagegoodslist1-container {
    width: 701rpx;
    height: 795rpx;
    left: 24rpx;
    top: 2546rpx;
    position: absolute;

    .act915pagegoodslist1bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .act915pagegoodslist1products {
      position: absolute;
      top: 113rpx;
      left: 10rpx;
      width: 654rpx;
      height: 316 * 2rpx;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; // 3列等宽
      grid-template-rows: 1fr 1fr; // 2行等高
      gap: 0rpx; // 网格间距
      padding: 20rpx; // 容器内边距
      pointer-events: none; // 让子元素可以点击

      .act915pagegoodslist1product {
        position: relative;
        pointer-events: auto; // 恢复点击事件

        transition: all 0.3s ease;
        width: 204rpx;
        height: 295rpx;

        &:hover {
          opacity: 0.8;
          transform: scale(1.02);
        }

        // 为不同位置的商品设置不同的点击区域
        &.product-1 {
          // 第一行左侧商品
        }

        &.product-2 {
          // 第一行中间商品
        }

        &.product-3 {
          // 第一行右侧商品
        }

        &.product-4 {
          // 第二行左侧商品
        }

        &.product-5 {
          // 第二行中间商品
        }

        &.product-6 {
          // 第二行右侧商品
        }
      }
    }
  }

  .act915pageinvitecon {
    width: 686rpx;
    height: 210rpx;
    left: 31rpx;
    top: 2045rpx;
    position: absolute;

    .act915pageinviteconbg {
      width: 686rpx;
      height: 210rpx;
      left: 0rpx;
      top: 0rpx;
      position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;

      // 重置button默认样式
      border: none;
      outline: none;
      padding: 0;
      margin: 0;
      background-color: transparent;

      // 移除button的默认样式
      &::after {
        border: none;
      }

      // 移除button的默认边框
      &::before {
        border: none;
      }
    }

    .act915pageinviteconbtn {
      width: 164rpx;
      height: 63rpx;
      left: 205rpx;
      top: 107rpx;
      position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;

      transition: opacity 0.3s ease;

      &:hover {
        opacity: 0.8;
      }
    }

    .act915pageinviteconstatus {
      width: 148rpx;
      height: 67rpx;
      left: 28rpx;
      top: 104rpx;
      pointer-events: none;
      position: absolute;

      .act915pageinviteconstatusno2 {
        width: 65rpx;
        height: 66rpx;
        left: 83rpx;
        top: 0rpx;
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }

      .act915pageinviteconstatusno1 {
        width: 65rpx;
        height: 66rpx;
        left: 0rpx;
        top: 1rpx;
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }

      .act915pageinviteconstatusyes2 {
        width: 64rpx;
        height: 65rpx;
        left: 84rpx;
        top: 0rpx;
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }

      .act915pageinviteconstatusyes1 {
        width: 64rpx;
        height: 65rpx;
        left: 2rpx;
        top: 1rpx;
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }
    }

    .act915pageinvitecontitle {
      width: 347rpx;
      height: 31rpx;
      left: 30rpx;
      top: 36rpx;
      position: absolute;
      font-size: 32rpx;
      line-height: 31rpx;
      color: rgba(255, 255, 255, 1);
    }

    .act915pageinviteconimg {
      width: 155rpx;
      height: 155rpx;
      left: 497rpx;
      top: 28rpx;
      position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .act915pagelotterybanner {
    width: 685rpx;
    height: 210rpx;
    left: 32rpx;
    top: 2294rpx;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .mask-background {
    width: 750rpx;
    height: 459rpx;
    left: 0rpx;
    top: 2045rpx;
    position: absolute;

    .auth-button {
      width: 750rpx;
      height: 459rpx;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      border: none !important;
      outline: none !important;
      padding: 0;
      margin: 0;
      background-color: transparent !important;
    }

    .auth-button::after {
      border: none !important;
      outline: none !important;
      border-radius: 0 !important;
    }
  }

  .act915pagebanner {
    width: 750rpx;
    height: 1332rpx;
    left: 0rpx;
    top: 0rpx;
    position: absolute;

    .act915pagebanneritem {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
