/* ============================================================
   专题文档「下载次数包 / 单次下载」收银台弹窗（文库式）
   ------------------------------------------------------------
   ★样式完全自包含（dp- 前缀），不引用 tools/ 下的 qp-xx / nm-xx 类：
     工具模块的弹窗样式在 css/tools/<模块>/ 内，跨模块引用会互相污染
     （本项目硬规则：每个模块只引用自己的样式）。
   ★★注意：CSS 注释里绝不能出现「星号紧跟斜杠」的序列 —— 曾因把两个类名通配符
     连写成 `qp-星斜杠nm-`，注释被提前闭合，紧随其后的 `.dp-mask` 规则被整条吞掉
     （遮罩丢掉 position:fixed，退化成文档末尾的隐藏块）——
     表现就是「点下载没反应 + 整个页面滑不动」。
   设计基调：参考 360 文库 / 百度文库收银台——套餐卡横排、单价对比、
   「省 xx%」角标、底部固定「立即支付」；配色沿用站点红金主色。
   ============================================================ */

.dp-mask {
    position: fixed;
    inset: 0;
    background: rgba(17, 20, 26, .58);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

.dp-mask.open { display: flex; }

.dp-modal {
    width: min(660px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .26);
    display: flex;
    flex-direction: column;
}

/* ---------- 头部 ---------- */
.dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f2f3f5;
    position: sticky;
    top: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    z-index: 2;
}

.dp-title { font-size: 1.02rem; font-weight: 800; color: #1f2d3d; }
.dp-close { font-size: 1.4rem; line-height: 1; color: #98a2b3; cursor: pointer; user-select: none; padding: 0 4px; }
.dp-close:hover { color: #eb1313; }

.dp-body { padding: 16px 20px 4px; }

/* ---------- 提示 ---------- */
.dp-tip {
    background: linear-gradient(90deg, #fff6f6, #fffdf6);
    border: 1px solid #ffe0e0;
    color: #b3261e;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .84rem;
    line-height: 1.65;
    margin-bottom: 12px;
}

.dp-note { font-size: .76rem; color: #98a2b3; line-height: 1.7; margin: 10px 0 0; }

/* ---------- 非会员：开通会员引导条（文库的「开通 VIP 更划算」） ---------- */
.dp-vip-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #f4d9a8;
    background: linear-gradient(90deg, #fffaf0, #fff5e6);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.dp-vip-bar .t { font-size: .84rem; color: #8a6116; line-height: 1.6; }
.dp-vip-bar .t b { color: #c8901f; }
.dp-vip-btn {
    flex: 0 0 auto;
    border: none;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: .8rem;
    font-weight: 700;
    color: #6b4a0c;
    background: linear-gradient(135deg, #ffe6ad, #f7ce76);
    cursor: pointer;
    white-space: nowrap;
}
.dp-vip-btn:hover { filter: brightness(1.04); }

/* ---------- 游客提示（只放「单次下载」时展示） ---------- */
/* 与 .dp-vip-bar 同一版式，换成蓝调以免与「开通会员」的金色引导条混淆 */
.dp-guest-tip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #d8e3f2;
    background: linear-gradient(90deg, #f7faff, #eef5ff);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 10px 0 12px;
}
.dp-guest-tip span { font-size: .84rem; color: #5a6b83; line-height: 1.6; }
.dp-guest-tip span b { color: #1d4ed8; }
.dp-guest-tip .dp-vip-btn {
    color: #fff;
    background: linear-gradient(135deg, #4d7ddb, #2f62c4);
}

/* ---------- 规格选择 ---------- */
.dp-sec-title {
    font-size: .82rem;
    font-weight: 700;
    color: #475467;
    margin: 4px 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dp-sec-title .dot { width: 4px; height: 14px; border-radius: 2px; background: #eb1313; }

.dp-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.dp-plan-card {
    position: relative;
    border: 1.5px solid #eceef1;
    border-radius: 12px;
    padding: 14px 10px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    background: #fff;
}

.dp-plan-card:hover { border-color: #f8a7a7; box-shadow: 0 6px 16px rgba(235, 19, 19, .08); }
.dp-plan-card.on { border-color: #eb1313; background: #fff8f8; box-shadow: 0 6px 18px rgba(235, 19, 19, .14); }

.dp-plan-flag {
    position: absolute;
    top: -9px;
    right: -6px;
    font-size: .62rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ff6a3d, #eb1313);
    border-radius: 999px;
    padding: 2px 8px;
    box-shadow: 0 2px 6px rgba(235, 19, 19, .3);
    white-space: nowrap;
}
.dp-plan-flag.gold { background: linear-gradient(135deg, #f7ce76, #d99b1f); color: #55400a; }

.dp-plan-count { font-size: 1rem; font-weight: 800; color: #1f2d3d; }
.dp-plan-count em { font-style: normal; font-size: .72rem; font-weight: 600; color: #667085; margin-left: 2px; }
.dp-plan-price { font-size: 1.22rem; font-weight: 800; color: #eb1313; margin: 6px 0 2px; }
.dp-plan-price sub { font-size: .68rem; font-weight: 600; bottom: 0; }
.dp-plan-unit { font-size: .7rem; color: #98a2b3; line-height: 1.5; }
.dp-plan-save {
    display: inline-block;
    margin-top: 5px;
    font-size: .66rem;
    font-weight: 700;
    color: #b3261e;
    background: #fff0f0;
    border-radius: 4px;
    padding: 1px 6px;
}

.dp-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 2px;
}
.dp-perks span {
    font-size: .7rem;
    color: #8a6116;
    background: #fff9ec;
    border: 1px solid #f6e3bb;
    border-radius: 999px;
    padding: 3px 9px;
}

/* ---------- 底部结算条 ---------- */
.dp-foot {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #f2f3f5;
    border-radius: 0 0 16px 16px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.dp-sum { font-size: .78rem; color: #667085; line-height: 1.5; }
.dp-sum b { display: block; font-size: 1.15rem; font-weight: 800; color: #eb1313; }

.dp-btn {
    border: 1px solid #dcdfe6;
    background: #fff;
    color: #606266;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: .86rem;
    cursor: pointer;
    white-space: nowrap;
}
.dp-btn:hover { border-color: #eb1313; color: #eb1313; }

.dp-btn.primary {
    border: none;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #ff5a3c, #eb1313);
    box-shadow: 0 6px 16px rgba(235, 19, 19, .26);
}
.dp-btn.primary:hover { opacity: .92; color: #fff; }
.dp-btn[disabled] { opacity: .6; cursor: not-allowed; }
.dp-btn.ghost { background: #fafafa; }

/* ---------- 扫码支付视图 ---------- */
.dp-scan { padding: 6px 0 4px; text-align: center; }
.dp-scan-title { font-weight: 800; font-size: .92rem; color: #1a1a1a; margin-bottom: 12px; }

.dp-scan-tabs {
    display: inline-flex;
    background: #f4f5f7;
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 14px;
}
.dp-scan-tabs button {
    border: none;
    background: transparent;
    padding: 6px 18px;
    font-size: .84rem;
    border-radius: 6px;
    cursor: pointer;
    color: #667085;
}
.dp-scan-tabs button.on { background: #fff; color: #eb1313; font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }

.dp-scan-qr {
    width: 210px;
    height: 210px;
    margin: 0 auto 12px;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 8px;
    background: #fff;
}
.dp-scan-qr img { width: 100%; height: 100%; object-fit: contain; display: block; }

.dp-scan-amount { font-size: .9rem; color: #606266; margin-bottom: 6px; }
.dp-scan-amount b { color: #eb1313; font-size: 1.18rem; margin-left: 2px; }
.dp-scan-status { font-size: .85rem; color: #606266; margin-bottom: 12px; }
.dp-scan-status.pending { color: #d03050; }
.dp-scan-status.success { color: #eb1313; font-weight: 700; }
.dp-scan-status.failed { color: #d03050; }
.dp-scan-tip { font-size: .76rem; color: #b0b8c4; line-height: 1.6; }

.dp-scan-login {
    margin-bottom: 10px !important;
    border-color: #eb1313 !important;
    color: #c62828 !important;
}

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
    .dp-modal { border-radius: 14px; }
    .dp-plan-grid { grid-template-columns: repeat(2, 1fr); }
    .dp-foot { flex-direction: column; align-items: stretch; }
    .dp-btn { width: 100%; text-align: center; }
}