.additional-module {
  padding-bottom: 2px; // 底部间距

  // 标题样式
  &-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
  }

  // 按钮容器 - 支持两种布局模式
  &-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  // 按钮行容器
  &-button-row {
    display: flex;
    gap: 8px;
  }

  // 基础按钮样式
  &-button-base {
    flex: 1;
    border-width: 1px;
    border-radius: 8px;
    background-color: transparent;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;

    // 紫色主题按钮（Order Note, Print Receipt）
    &.purple-theme {
      border-color: #5d3f9f;
      color: #5d3f9f;
      flex: 1; // 所有按钮等比例分配空间
    }

    // 橙色主题按钮（Save & Pay Later）
    &.orange-theme {
      border-color: #dc6803;
      color: #dc6803;
      flex: 1; // 与其他前三个按钮宽度相同
    }

    // 禁用状态按钮 - 置灰样式
    &.disabled-theme {
      border-color: #d0d5dd;
      color: #98a2b3;
      background-color: #f2f4f7;
      cursor: not-allowed;
      flex: 1; // 与其他前三个按钮宽度相同

      .additional-module-button-icon {
        color: #98a2b3;
      }
    }

    // 更多按钮 - 显示为正方形
    &.more-button {
      flex: none;
      width: 50px; // 与高度相同，形成正方形
      min-width: 50px;
      padding: 0;
      gap: 0;
    }
  }

  // Grid布局模式特殊样式（当有两行时）
  // 所有前三个按钮在第二行中也保持相同宽度
  &-button-row:nth-child(2) {
    .additional-module-button-base.orange-theme,
    .additional-module-button-base.disabled-theme {
      flex: 1; // 与同行其他按钮宽度相同
    }
  }

  // 单行布局模式（flex模式）的特殊样式
  // 所有前三个按钮在单行模式下也保持相同宽度 flex: 1
  // 不再需要特殊设置

  // 按钮内图标样式
  &-button-icon {
    font-size: 20px;
  }

  // 备注按钮浮标样式
  &-button-base.note-button {
    .note-indicator {
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(12%, -12%);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #7f56da;
      color: #fff;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      font-size: 30px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      pointer-events: none;
    }
  }

  // 模态框内容样式
  &-modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 0;
  }

  // 模态框按钮样式
  &-modal-button {
    height: 48px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
}

// 更多按钮样式（保持与其他按钮一致）
.additional-module-button-base.more-button {
  border-color: #d0d5dd;
  color: #475467;
  position: relative;
  pointer-events: auto;
  flex: none;
  width: 50px; // 与高度相同，形成正方形
  min-width: 50px;
  padding: 0;

  &:hover {
    border-color: #7c4dff;
    color: #7c4dff;
    background-color: rgba(124, 77, 255, 0.04);
  }

  &:focus {
    border-color: #7c4dff;
    color: #7c4dff;
  }

  // 确保按钮内容不会干扰hover检测
  * {
    pointer-events: none;
  }
}

// 确保 Dropdown 在 Modal 中正常工作的全局样式
:global(.ant-dropdown) {
  z-index: 9999 !important;
}

// 确保菜单项可以正常点击
:global(.ant-dropdown-menu-item) {
  cursor: pointer !important;

  &:hover {
    background-color: #f5f5f5 !important;
  }

  &:active {
    background-color: #e6f7ff !important;
  }
}
