/**
 * alipay-modal.css - 支付宝支付弹窗样式
 * 用于微信环境内支付宝支付时提示用户复制链接到浏览器打开
 * 
 * 使用页面：所有支持支付宝支付的页面
 * - index.html (首页)
 * - result.html (结果页)
 * - history-analysis.html (历史分析结果页)
 * - lucky.html (转运页)
 * 
 * 注意：基础弹窗样式（遮罩层、弹窗容器、按钮等）使用 tips.css 中的定义
 * 此文件仅保留支付宝弹窗特有的样式（链接显示区域）
 */

/* ============================================================
   链接显示区域 - 支付宝弹窗特有
   ============================================================ */

/* 链接容器 */
.alipay-modal-url-container {
    background: #F8F8F8;
    border-radius: 1.93vw;
    padding: 2.9vw /* 原: 12px */;
    margin: 4.83vw 0 /* 原: 20px 0 */;
    max-height: 48.31vw;
    overflow-y: auto;
    word-break: break-all;
}

/* 链接文本 */
.alipay-modal-url {
    font-size: 3.4vw;
    color: #222222;
    line-height: 1.6;
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
}

@media (min-width: 414px) {
    .alipay-modal-url {
        font-size: 3.38vw;
    }
}

/* ============================================================
   提示文字
   ============================================================ */
.alipay-modal-tip {
    font-size: 3.2vw;
    color: #999;
    text-align: center;
    margin-bottom: 3.86vw /* 原: 16px */;
    line-height: 1.4;
}

@media (min-width: 414px) {
    .alipay-modal-tip {
        font-size: 3.14vw;
    }
}

/* 正式环境：链接容器与按钮间距15px */
.alipay-url-bottom {
    margin-bottom: 3.62vw;
}

/* ============================================================
   支付宝弹窗已复制状态样式
   ============================================================ */

/* 弹窗内容区 - 相对定位，用于右上角图片绝对定位 */
.alipay-modal-content {
    position: relative;
}

/* ============================================================
   右上角浏览器打开提示图 - 屏幕级定位
   说明：此图片在双行按钮状态时显示在屏幕右上角，提示用户点击微信菜单
   ============================================================ */

/* 提示图容器 - 固定定位在屏幕右上角 */
.alipay-copy-hint-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 允许点击穿透 */
    z-index: 10000; /* 确保在最上层 */
    display: none; /* 初始状态隐藏 */
}

/* 已复制状态时显示提示图容器 */
.alipay-copy-hint-wrapper.show {
    display: block;
}

/* 提示图本体 - 定位在屏幕右上角 */
.alipay-copy-hint {
    position: absolute;
    top: 4.83vw; /* 距离屏幕顶部20px */
    right: 4.83vw; /* 距离屏幕右侧20px */
    width: 24.15vw; /* 根据设计图调整宽度 */
    height: auto;
    object-fit: contain;
}

/* 状态容器 */
.alipay-state-initial,
.alipay-state-copied {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 按钮组 - 垂直排列，间距15px */
.alipay-btn-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3.62vw;
    margin-top: 3.62vw;
}

/* "我已支付 刷新结果"按钮 - 绿色背景，黑色文字
   复用 tips-btn 基础样式，覆盖颜色和边距 */
.tips-btn--refresh-green {
    background-color: #56FD99;
    color: #222222;
    margin-top: 0;
}