$button-color: #00a6ff;
$button-hover-color: darken($button-color, 8%);

.goods-container {
  min-height: 100vh;
  background-color: #fff;

  .content-wrapper {
    // 为固定导航栏预留空间
    padding-top: calc(var(--status-bar-height, 44px) + 68px);
    // 为安全区预留空间
    padding-bottom: calc(var(--safe-area-inset-bottom, 0px) + 100px);
  }

  .goods-content {
    border-radius: 12px 12px 0 0;
    background-color: #fff;
    padding: 12px;
    position: relative;
    margin-top: -30px;
    z-index: 1;
  }

  .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 12px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    // 为安全区预留空间
    padding-bottom: var(--safe-area-inset-bottom, 0);

    .buy-button {
      width: 100%;
      background: linear-gradient(179deg, #00a6ff 0%, #0256ff 100%);
      color: #fff;
      border: none;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50px;
      height: 42px;
      font-size: 14px;
      font-weight: 500;
      margin-top: 12px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      letter-spacing: 0.5px;

      // 按钮波纹效果
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
      }

      &:hover {
        background: linear-gradient(
          135deg,
          $button-hover-color 0%,
          darken($button-hover-color, 5%) 100%
        );
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba($button-color, 0.4);

        &::before {
          width: 300px;
          height: 300px;
        }
      }

      &:active {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba($button-color, 0.3);
      }

      &:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba($button-color, 0.3);
      }
    }
  }
}