.payment-modal-wrapper {
  .pisell-lowcode-modal-close {
    display: none;
  }

  .pisell-lowcode-modal-header {
    padding: 8px 16px !important;
  }

  // CustomHeader 样式
  .payment-modal-custom-header {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    width: 100%;

    .header__center {
      text-align: center;
      font-size: 20px;
      height: 30px;
      line-height: 30px;
    }

    .header__right {
      display: flex;
      justify-content: flex-end;

      button span {
        font-size: 16px;
        font-weight: 600;
        text-decoration: underline;
      }
    }
  }

  // 控制模态框最大高度和自适应 - 现在通过JavaScript设置一致的百分比基准
  .pisell-lowcode-modal {
    // JavaScript设置: maxHeight: '90%' (基于视口)

    .pisell-lowcode-modal-content {
      max-height: 100%; // 基于父元素 (.pisell-lowcode-modal) 的100%
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .pisell-lowcode-modal-body {
        // JavaScript设置: maxHeight: '100%' (基于父元素)
        overflow-y: auto;
      }
    }
  }

  .pisell-lowcode-modal {
    .pisell-lowcode-modal-body {
      padding: 16px !important;
    }
  }

  // 根据 showCashPayment 状态调整下边距
  // &.no-cash-payment {
  //   .pisell-lowcode-modal {
  //     .pisell-lowcode-modal-body {
  //       padding: 16px 16px 88px 16px !important;
  //     }
  //   }
  // }

  .payment-grid-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); // 强制等宽分配
    grid-template-rows: auto auto;
    gap: 8px 16px;
    background-color: #f6f2ff;
    padding: 16px 16px 8px 16px;
    border-radius: 0 0 12px 12px;
    width: 100%; // 确保容器占满宽度

    // 确保grid项不会溢出
    > div {
      min-width: 0; // 允许内容缩小
      overflow: hidden; // 防止内容溢出影响布局
    }
  }

  .payment-flex-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #f6f2ff;
    padding: 16px 16px 0 16px;
    border-radius: 0 0 12px 12px;
    flex: 1; // 使用弹性高度而不是固定高度
    min-height: 350px; // 减少最小高度，给底部模块留空间
    max-height: calc(90% - 280px); // 设置最大高度，确保不会超出屏幕
    overflow: hidden; // 防止整体溢出

    // 支付选项模块在弹性布局中的样式
    .payment-options-module-container {
      flex: 1; // 占用剩余空间
      min-height: 200px; // 减少最小高度，为底部模块留空间
      max-height: calc(90% - 400px); // 限制最大高度，确保底部模块可见
      // 移除 overflow: hidden，让ScrollableList自己管理滚动
      display: flex;
      flex-direction: column;
      padding-bottom: 20px;
    }

    // 额外模块固定在底部
    // .additional-module-container {
    //   flex-shrink: 0; // 不允许缩小
    //   min-height: 60px; // 确保额外模块有足够的显示空间
    //   position: absolute;
    //   bottom: 0;
    //   width: calc(100% - 80px);
    // }
  }
}
