/**
 * ============================================================================
 * common.css - 弹窗与交互组件样式
 * ============================================================================
 *
 * 【文件说明】
 * 本文件包含弹窗、Toast、支付、分享等交互组件样式。
 * 需要在 global.css 之后引入。
 *
 * 【引用页面】（共9个）
 * ┌─────────────────────┬────────────────────────────────────────────┐
 * │ 页面                 │ 使用的主要功能                               │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ index.html          │ 支付弹窗、邀请弹窗、隐私协议弹窗、Toast、    │
 * │ (首页/运势分析)      │ 主按钮、隐私协议容器                         │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ result.html         │ 邀请弹窗、支付弹窗、客服弹窗、Toast、        │
 * │ (分析结果页)         │ 邀请图预览弹窗                               │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ history-analysis.html│ 同 result.html                              │
 * │ (历史分析结果)       │                                             │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ history.html        │ 基础弹窗系统                                 │
 * │ (历史记录页)         │                                             │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ upload.html         │ 客服弹窗                                     │
 * │ (头像上传页)         │                                             │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ gender.html         │ 客服弹窗                                     │
 * │ (性别选择页)         │                                             │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ error.html          │ 客服弹窗                                     │
 * │ (错误页)             │                                             │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ transport-plan.html │ 基础弹窗系统                                 │
 * │ (转运方案页)         │                                             │
 * ├─────────────────────┼────────────────────────────────────────────┤
 * │ lucky.html│ 礼券获取弹窗、礼券选择弹窗、小红书弹窗、    │
 * │ (转运结果页)         │ 邀请弹窗、支付弹窗、Toast、展开按钮          │
 * └─────────────────────┴────────────────────────────────────────────┘
 *
 * 【目录】
 * 一、弹窗遮罩系统（基础）
 * 二、支付弹窗
 * 三、隐私协议弹窗
 * 四、邀请好友弹窗
 * 五、邀请图预览弹窗
 * 六、Toast 提示
 * 七、礼券系统（选择/获取）
 * 八、小红书弹窗
 * 九、页面交互组件
 * 十、通用交互效果
 *
 * 自适应核心逻辑: 基准尺寸 414px * 808px
 * ============================================================================
 */


/* ============================================================================
   一、弹窗遮罩系统（基础）
   说明：所有弹窗的遮罩层，半透明黑色背景
   使用页面：所有带弹窗的页面（index/result/history-analysis/upload/gender/error/transport-plan/lucky）

   注：.modal-overlay 基础样式已在 global.css 中定义
   ============================================================================ */


/* ============================================================================
   二、支付弹窗
   说明：支付金额展示、支付方式选择、支付提交
   使用页面：index.html(#pay-modal), result.html(#pay-unlock-modal),
            history-analysis.html(#pay-unlock-modal), lucky.html(#pay-unlock-modal)
   ============================================================================ */

/* 支付弹窗专属容器 - 控制弹窗垂直位置和布局 */
.pay-modal-container {
    position: relative;
    width: 100%;
    min-height: 100%;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 14.49vw /* 原: 60px */;
}

/* 支付背景包装 - 支付弹窗背景图容器 */
.pay-bg-wrapper {
    position: relative;
    width: 76.09vw; /* 315px / 414px = 76.09% */
    max-width: 315px;
    pointer-events: auto;
}

/* 支付弹窗背景图片 */
.pay-bg-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 支付金额行 - 金额数字拆分显示容器 */
.pay-amount-row {
    position: absolute;
    top: 12.17%;
    left: 54.59%;
    height: 6.52%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    gap: 0;
    line-height: 0;
    font-size: 0;
    z-index: 10;
}

/* 金额下方标签文本 */
.pay-amount-label {
    position: absolute;
    top: calc(12.17% + 6.52% + 2.42vw);
    left: 54.59%;
    transform: translateX(-50%);
    font-size: 3.38vw;
    color: #222222;
    line-height: 3.38vw;
    white-space: nowrap;
    z-index: 10;
}

/* 数字图片 - 单个金额数字 */
.num-img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
}

/* 支付方式选项 - 微信/支付宝选项基础样式
 * 宽拉伸对齐弹窗宽，高自适应；上边距为支付弹窗背景高度的百分比
 */
.pay-method-item {
    position: absolute;
    left: 0;
    width: 100%;
    cursor: pointer;
    z-index: 10;
}

/* 支付方式图标：宽拉伸对齐容器宽，高自适应 */
.pay-method-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* 微信支付选项定位 - 上边距支付弹窗 32.6% */
#method-wechat,
#unlock-wechat,
.pay-wechat-pos {
    top: 32.6%;
}

/* 支付宝支付选项定位 - 上边距支付弹窗 41.3% */
#method-alipay,
#unlock-alipay,
.pay-alipay-pos {
    top: 41.3%;
}

/* 支付提交按钮 - 绿色提交按钮 */
.pay-submit-btn {
    position: absolute;
    top: 50.22%;
    left: 54.59%;
    transform: translateX(-50%);
    width: 55.56%; /* 175px / 315px = 55.56% */
    max-width: 175px;
    height: 8.21vw; /* 34px / 414px */
    background-color: #56fd99;
    border-radius: 4.83vw;
    border: none;
    font-size: 3.38vw;
    font-weight: 500; /* medium */
    color: #222222;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.97vw 2.42vw rgba(86, 253, 153, 0.3);
    z-index: 10;
}

/* 已支付刷新结果状态 - 浅蓝色 */
.pay-submit-btn.paid-status {
    background-color: #90F4FF;
    box-shadow: 0 0.97vw 2.42vw rgba(144, 244, 255, 0.3);
}

/* 付费解锁弹窗标题 - 用于 result/history-analysis/lucky 页的解锁弹窗 */
.unlock-modal-title {
    position: absolute;
    top: 20.87%; /* 弹窗背景高度的 20.87% */
    left: 54.59%; /* 以屏幕 54.59% 处为中心 */
    transform: translateX(-50%);
    font-size: 3.38vw;
    color: #222222;
    font-weight: 400; /* regular */
    white-space: nowrap;
    z-index: 10;
}

/* 支付关闭按钮容器 - 弹窗底部关闭按钮 */
.pay-close-btn-wrapper {
    position: absolute;
    top: calc(100% + 3.62vw) !important; /* 修正：与上方内容间距 15px */
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    z-index: 10;
    display: none !important; /* 隐藏支付关闭按钮 */
}

/* 支付关闭按钮图标 */
.pay-close-img {
    width: 10.87vw; /* 修正：屏幕宽度的 10.87% */
    height: auto; /* 高度自适应 */
}

/* ============================================================================
   三、隐私协议弹窗
   说明：用户隐私协议确认弹窗
   使用页面：index.html(#privacy-modal)
   ============================================================================ */

/* 隐私协议弹窗内容区 */
#privacy-modal .modal-content {
    align-self: flex-end; /* 协议弹窗靠底对齐 */
    width: 85.5%;
    height: 27.48vh;
    margin-bottom: 9vh; /* 下边距 9% 屏幕高度 */
    background-color: #fff;
    border-radius: 20px;
    border: 0.72vw solid #96FFC9; /* 内描边 3px */
    box-shadow: 0 0 10px rgba(150, 255, 201, 0.5); /* 外投影 #96FFC9 50% */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0;
}

/* 弹窗标题图片 - 通用标题图片样式 */
.modal-title-img {
    height: 18.5%; /* 根据原图比例保持高度 */
    margin-top: calc(27.48vh * 0.1712); /* 弹窗高度 27.48vh 的 17.12% */
    width: auto;
}

/* 弹窗正文文本 - 居中对齐的文本内容 */
.modal-body-text {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* 确保文本上下左右居中 */
    font-size: 3.38vw;
    color: #222;
    text-align: center;
    padding: 0 4.83vw /* 原: 0 20px */;
    font-weight: 400; /* regular */
}

/* 弹窗链接 - 绿色链接文字 */
.modal-link {
    color: #00A05D;
    font-weight: 500; /* medium */
    text-decoration: none;
}

/* 弹窗底部按钮 - 黑色背景绿色文字 */
.modal-btn {
    width: 88.7%; /* 弹窗宽度的 88.7% */
    height: 12.08vw; /* 50px / 414px */
    margin-bottom: 4.83vw /* 原: 20px */; /* 弹窗下边距 20px */
    background-color: #000;
    color: #54ff9a;
    font-size: 3.86vw;
    font-weight: 500; /* medium */
    border-radius: 6.04vw;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================================
   四、邀请好友弹窗
   说明：邀请好友分享弹窗，包含保存图片和分享按钮
   使用页面：index.html(#invite-modal), result.html(#invite-modal),
            history-analysis.html(#invite-modal), lucky.html(#invite-modal)
   ============================================================================ */

/* 邀请弹窗容器 - 邀请好友弹窗外层容器 */
.invite-modal-container {
    position: relative;
    width: 100%;
    min-height: 100%;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 邀请弹窗背景包装 */
.invite-bg-wrapper {
    position: relative;
    width: 100vw;
    pointer-events: auto;
}

/* 邀请弹窗背景图片 */
.invite-bg-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 邀请按钮行 - 邀请弹窗内按钮组容器 */
.invite-btn-row {
    position: absolute;
    top: 51.96%;
    left: 54.59%;
    transform: translateX(-50%);
    width: 45.51%;
    height: 8.21vw; /* 34px / 414px */
    display: flex;
    justify-content: center;
    gap: 2.42vw;
    z-index: 10;
}

/* 邀请子按钮 - 基础按钮样式（保存图片、分享好友等） */
.invite-sub-btn {
    flex: 1;
    height: 8.21vw; /* 34px / 414px */
    border-radius: 1.21vw;
    font-size: 3.38vw;
    font-weight: 500; /* medium */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
    font-size: 3.38vw;
    border: none;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.invite-sub-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* 白色按钮 - 用于邀请弹窗 */
.btn-white {
    background-color: #FFFFFF;
    color: #222222;
}

/* 绿色按钮 - 用于邀请弹窗 */
.btn-green {
    background-color: #54FF9A;
    color: #222222;
}

/* 红色按钮 - 用于邀请弹窗 */
.btn-red {
    background-color: #ff4545;
    color: #FFFFFF;
}

/* 邀请按钮保存中状态 - 带旋转loading */
.invite-sub-btn.saving {
    opacity: 0.7;
    cursor: default;
    pointer-events: none;
    position: relative;
}

.invite-sub-btn.saving::after {
    content: "";
    margin-left: 1.45vw /* 原: 6px */;
    width: 3.38vw;
    height: 3.38vw;
    border-radius: 50%;
    border: 0.48vw solid rgba(34, 34, 34, 0.25);
    border-top-color: rgba(34, 34, 34, 0.8);
    animation: invite-saving-spin 0.7s linear infinite;
}

/* 保存中旋转动画 */
@keyframes invite-saving-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================================
   五、邀请图预览弹窗
   说明：邀请图生成后的预览弹窗，支持长按保存
   使用页面：result.html(#invite-image-modal), history-analysis.html(#invite-image-modal),
            lucky.html(#invite-image-modal)
   ============================================================================ */

/* 邀请图预见弹窗 - z-index最高，50%黑色半透明遮罩 */
#invite-image-modal {
    z-index: 3000; /* 确保在所有弹窗最上层 */
    background-color: rgba(0, 0, 0, 0.5) !important; /* 50%黑色半透明 */
}

/* 邀请图预览容器 */
.invite-image-modal-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

/* 邀请图提示文字 - "长按保存图片"提示 */
.invite-image-tip {
    position: relative;
    z-index: 10;
    background-color: rgba(85, 254, 154, 0.9);
    color: #222222;
    font-size: 3.86vw;
    font-weight: 500;
    padding: 2.9vw 5.8vw /* 原: 12px 24px */;
    border-radius: 6.04vw;
    margin-bottom: 4.83vw /* 原: 20px */;
    pointer-events: auto;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(85, 254, 154, 0.3);
}

/* 邀请图预览图片 - 可长按保存 */
.invite-image-preview {
    max-height: 80vh; /* 背景图高度的80% */
    width: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    -webkit-user-select: auto;
    user-select: auto;
    -webkit-touch-callout: default;
    /* 确保图片可以长按保存 */
    -webkit-user-drag: none;
    touch-action: manipulation;
    /* 确保等比例缩放和居中 */
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* 邀请图关闭按钮 */
.invite-image-close-btn {
    position: relative;
    margin-top: 4.83vw /* 原: 20px */;
    width: 40px;
    height: 9.66vw; /* 40px / 414px */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    z-index: 10;
}

.invite-image-close-btn img {
    width: 24px;
    height: 24px;
}


/* ============================================================================
   六、Toast 提示
   说明：全局消息提示，成功绿色/失败红色带图标
   使用页面：所有页面
   ============================================================================ */

/* Toast容器 - 固定在顶部，圆角胶囊样式
 * 设计稿参考：宽度自适应，高度约 46px(11.11vh)，圆角 25px(6.04vw)
 * 字体 16px(3.86vw)，背景 #55FE9A
 */
.toast-container,
.global-toast {
    position: fixed;
    top: 9.66vw; /* 40px / 414px */
    left: 50%;
    transform: translateX(-50%);
    padding: 3.62vw 4.83vw; /* 15px 20px / 414px */
    background-color: #55FE9A; /* 成功状态颜色 */
    border-radius: 6.04vw; /* 25px / 414px */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.42vw; /* 10px / 414px */
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    white-space: nowrap; /* 防止文字换行 */
    font-size: 3.86vw; /* 16px / 414px */
    line-height: 3.86vw; /* 100% line-height */
    color: #222222;
    font-weight: 400;
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Toast失败状态 - 红色背景 */
.toast-container.fail,
.global-toast.error,
.toast-container.fail #toast-text,
.toast-container.fail #global-toast-text,
.global-toast.error #toast-text,
.global-toast.error #global-toast-text {
    background-color: #FF4548;
    border-radius: 6.04vw; /* 25px / 414px，与成功状态一致 */
    color: #FFFFFF;
}

/* Toast图标 - 基础尺寸（成功状态） */
.toast-container .toast-icon,
.global-toast .toast-icon {
    width: 3.86vw; /* 16px / 414px */
    height: 3.86vw; /* 16px / 414px */
    flex-shrink: 0;
}

/* Toast 图标 - 成功/错误双图标切换 */
.toast-icon-success,
.toast-icon-error {
    width: 3.86vw; /* 16px / 414px */
    height: 3.86vw; /* 16px / 414px */
    flex-shrink: 0;
}

/* 错误状态时隐藏成功图标，显示错误图标 */
.toast-container.fail .toast-icon-success,
.global-toast.error .toast-icon-success {
    display: none;
}

.toast-container.fail .toast-icon-error,
.global-toast.error .toast-icon-error {
    display: block;
}

/* 旧版兼容：Toast图标（无错误状态） */
.toast-icon-img {
    width: 3.86vw; /* 16px / 414px */
    height: 3.86vw; /* 16px / 414px */
    margin-right: 2.42vw; /* 10px / 414px */
}

/* 旧版兼容：Toast文字 */
#toast-text {
    font-size: 3.86vw;
    line-height: 3.86vw;
    color: #222222;
    font-weight: 400;
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================================
   工具类：用于替代内联样式
   ============================================================================ */

/* 解锁等待按钮样式 - 用于 result-unlock.js */
.btn-waiting {
    width: 100%;
    height: 10.14vw; /* 与 btn-invite 保持一致 */
    background: #FFFFFF;
    color: #222222;
    border: none;
    border-radius: 4.83vw; /* 与 btn-invite 保持一致 */
    box-shadow: 0 0 5px 0 rgba(140, 110, 33, 0.20);
    cursor: default;
    font-size: 3.86vw;
    font-family: system-ui, -apple-system, sans-serif;
    white-space: nowrap;
}

/* 本地环境模拟按钮样式 - 用于 alipay-modal.js */
.btn-mock-secondary {
    margin-bottom: 2.42vw;
}

.btn-mock-close {
    background: #ccc;
    color: #333;
}

/* 本地环境提示文字样式 - 用于 alipay-modal.js */
.mock-tip {
    color: #d4a574;
    font-weight: 500;
}

/* 空状态提示样式 - 用于 transport-plan.js */
.empty-state {
    text-align: center;
    color: #888888;
    padding: 4.83vw 0;
}

/* 强制显示按钮样式 - 用于 index.js */
.btn-force-show {
    display: block;
    visibility: visible;
    opacity: 1;
    z-index: 9999;
}

/* 页面滚动锁定样式 - 用于 result.js */
.body-locked {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* 页面滚动锁定恢复样式 */
.body-scroll-unlock {
    overflow: '';
    position: '';
    top: '';
    width: '';
}



/* ============================================================================
   八、小红书弹窗
   说明：小红书关注任务弹窗，包含上传截图区域
   使用页面：lucky.html (#xhs-modal)
   ============================================================================ */

/* 小红书上传区域 - 截图上传框 */
.xhs-upload-area {
    position: absolute;
    width: 52.65%;
    height: 21.52%;
    top: 66.08%;
    right: 19.08%;
    background: #f7f2e8;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 小红书上传盒子 */
.xhs-upload-box {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* 小红书上传占位图 */
.xhs-upload-placeholder {
    width: 100%;
    height: auto; /* 需求 326: 与背景等宽，高度自适应实现上下居中 */
}

/* 小红书上传状态遮罩 - 上传中/上传成功状态 */
.xhs-upload-status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

/* 小红书状态图片 */
.xhs-status-img {
    width: 100%;
    height: 100%;
    object-fit: fill; /* 需求 329: 拉伸填充区域 */
}

/* 小红书弹窗按钮位置调整 */
#xhs-modal .invite-btn-row {
    bottom: auto;
    top: 51%;
}


/* ============================================================================
   九、页面交互组件
   说明：首页和结果页的各种交互按钮和提示组件
   ============================================================================ */

/* -----------------------------------------------------------
   11.2 主按钮包装器
   使用：index.html (#main-action-btn) - "立即分析"主按钮
   ----------------------------------------------------------- */

/* 主分析按钮包装器 - 固定在页面底部 */
.analysis-btn-wrapper {
    position: fixed;
    bottom: calc(79px + 17px + 20px); /* 隐私协议bottom 79px + 隐私协议高度17px + 间距20px */
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 59.67vw;  /* 移动端：相对于视口宽度 */
    transition: transform 0.2s;
    -webkit-tap-highlight-color: transparent;
    z-index: 200;
}

/* 主分析按钮图片 */
.analysis-btn-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0px 0px 20px rgba(65, 0, 162, 0.2));
}

/* -----------------------------------------------------------
   11.3 隐私协议容器
   使用：index.html - 底部隐私协议勾选区域
   ----------------------------------------------------------- */

/* 隐私协议容器 - 固定在页面最底部 */
.privacy-container {
    position: fixed;
    bottom: calc(20px + 44px + 15px); /* 按钮底部20px + 按钮高度44px + 间距15px */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 200;
    margin-top: 0;
}

/* 隐私协议勾选框 */
.privacy-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 勾选图标 */
.check-icon {
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* 隐私协议文字 */
.privacy-text {
    margin-left: 1.21vw /* 原: 5px */;
    font-size: 2.9vw;
    color: #fff;
    white-space: nowrap;
}

/* 协议链接 - 绿色高亮 */
.protocol-link {
    color: #D7FFA6;
    font-weight: 500; /* medium */
    text-decoration: none;
}

/* -----------------------------------------------------------
   11.4 提交按钮通用样式
   使用：各表单页面的提交按钮
   ----------------------------------------------------------- */

/* 提交按钮基础样式 */
.submit-btn {
    position: relative;
    width: 48.3%;
    aspect-ratio: 200 / 50;
    background: transparent;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

/* 提交按钮禁用状态 */
.submit-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* 提交按钮背景图 */
.btn-submit-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* 提交按钮文字 */
.submit-text {
    position: relative;
    z-index: 2;
    font-family: -apple-system, system-ui, sans-serif;
    font-weight: 500;
    font-size: 3.86vw;
    line-height: 3.86vw;
    color: #97461A;
}


/* ============================================================================
   十、通用交互效果
   说明：按钮点击缩放等全局交互效果
   ============================================================================ */

/* 通用按钮点击缩放效果 - 统一按钮点击反馈 */
.info-btn:active,
.unpaid-btn:active,
.unlock-btn:active,
.submit-btn:active,
.gender-submit-btn:active,
.analysis-btn-wrapper:active,
.invite-sub-btn:active,
.coupon-confirm-btn:active,
.coupon-get-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}


/* ============================================================================
   支付宝支付二维码弹窗
   说明：微信环境内使用支付宝支付时显示，包含支付流程说明、二维码、操作按钮
   使用页面：index.html, result.html, lucky.html (由 pay.js 动态创建)
   ============================================================================ */

/* 弹窗遮罩 - 蒙版不可点击关闭 */
.alipay-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

/* 弹窗内容容器 */
.alipay-modal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9.66vw;
    width: 61.11vw;
    max-width: 253px;
}

/* 顶部流程说明图 */
.alipay-guide-top {
    width: 100%;
    background: #FFFFFF;
    border-radius: 2.42vw;
    padding: 4.83vw;
    overflow: hidden;
}

.alipay-guide-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 二维码海报区域（Canvas生成的完整海报） */
.alipay-qrcode-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 阴影已在 Canvas 中绘制，这里不需要额外的 box-shadow */
}

/* 二维码容器 */
.alipay-qrcode {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 二维码海报图片（包含二维码+金额产品名，支持长按保存） */
.alipay-qrcode-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2.42vw;
    /* 长按保存支持 - 确保微信能识别图片 */
    pointer-events: auto;
    -webkit-user-select: auto;
    user-select: auto;
    -webkit-touch-callout: default;
    -webkit-user-drag: auto;
}

/* 修复长按菜单 - 确保父容器也能接收触摸事件 */
.alipay-qrcode-box,
.alipay-qrcode {
    pointer-events: auto;
    -webkit-touch-callout: default;
}

/* 二维码生成失败提示 */
.alipay-qrcode-error {
    font-size: 3.38vw;
    color: #FF4548;
    text-align: center;
}

/* 底部按钮行 */
.alipay-btn-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4.83vw;
    width: 100%;
}

/* 取消订单按钮 */
.alipay-btn-cancel {
    flex: 1;
    height: 11.11vw;
    max-height: 46px;
    background: #EEEEEE;
    border: none;
    border-radius: 12.08vw;
    font-size: 3.86vw;
    line-height: 3.86vw;
    font-weight: 500;
    color: #444444;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 我已支付按钮 */
.alipay-btn-paid {
    flex: 1;
    height: 11.11vw;
    max-height: 46px;
    background: linear-gradient(360deg, #56FD99 0%, #FFFFFF 100%);
    box-shadow: 0 0 2.42vw rgba(206, 255, 226, 0.5);
    border: none;
    border-radius: 12.08vw;
    font-size: 3.86vw;
    line-height: 3.86vw;
    font-weight: 500;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 按钮点击效果 */
.alipay-btn-cancel:active,
.alipay-btn-paid:active {
    transform: scale(0.95);
    opacity: 0.9;
}