/*
public/assets/css/install-paid.css · 付费安装页专用样式（纯页面级）
iOS 清爽风（App Store 观感）

本文件只放「本页专属」的东西。以下内容一律由 site.css 全站提供，本文件不再重复：
  · 设计变量地基（--bg/--surface/--ink/--ink-soft/--ink-faint/--line/--maxw
    /--radius/--radius-pill/--shadow-sm/--free 等）
  · *、html、body 基础、img、a、.container
  · 顶部导航（.site-header 毛玻璃吸顶、.nav-wrap、.brand、.pill 等）
  · 页脚（.site-footer、.footer-links、.visit-stat 等）
由 head.php 的 $page['styles'] 机制引入，排在 site.css 之后，
因此这里对 body 的覆盖只改它和 site.css 不同的部分（顶部淡蓝渐变），其余沿用 site.css。

响应式：≤575 手机（site.css 既有逻辑）→ ≥768 平板/桌面单列聚焦居中 → ≥1100 由 .container 封顶，
超大屏自动留白；标题、间距全程 clamp() 流式缩放。
*/

/* ------------------------------------------------------------
   本页独有变量
   其余圆角/阴影/强调色直接复用 site.css 的
   --radius / --radius-pill / --shadow-sm / --free，不再另立同值变量
   ------------------------------------------------------------ */
:root {
    --bg-top: #e9f0ff;   /* 顶部淡蓝氛围（仅本页 body 渐变用） */
    --col: 440px;        /* 操作区列宽：手机满宽、大屏聚焦居中 */
}

/* 付费页顶部淡蓝氛围：只覆盖 background（site.css 为纯 var(--bg)），其余 body 规则沿用 site.css */
body {
    min-height: 100dvh;
    background: linear-gradient(180deg, var(--bg-top), var(--bg) 360px)
}

/* ============================================================
   安装页主体 —— iOS 清爽风（App Store 观感）
   浅色背景 + 大圆角毛玻璃卡片 + 系统字体 + 系统蓝强调
   ============================================================ */
.install {
    padding-block: clamp(20px, 5vw, 40px);
    /* 局部 token：只作用于安装区，不污染 :root，导航/页脚不受影响 */
    --ios-blue: #2f6bff; /* 沿用导航蓝；想要正宗 iOS 蓝改成 #007aff */
    --ios-blue-press: #1f4fd6;
    --ios-fill: #eef0f4; /* 子步骤小圆点序号的浅灰底 */
    --ios-fill-press: #e3e6ec;
    --card: rgba(255, 255, 255, .72); /* 毛玻璃卡片 */
    --card-solid: #fff; /* 不支持毛玻璃时回落 */
}

/* 产品头：App Store 详情页式 图标在左、名称+副标题在右 */
.app-head {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: var(--col);
    margin: 0 auto clamp(18px, 4vw, 26px)
}

.app-icon {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 22%;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
    outline: 1px solid rgba(28, 29, 31, .08);
    outline-offset: -1px
}

.app-meta {
    min-width: 0
}

.app-meta h1 {
    margin: 0;
    font-size: clamp(1.4rem, 4vw, 1.7rem);
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.2
}

.app-sub {
    margin: .25rem 0 0;
    color: var(--ink-soft);
    font-size: .95rem;
    line-height: 1.4
}

/* 无 JS 兜底链接（仅 <noscript> 内出现）：左对齐、小字、弱化；蓝色虚线链接 */
.install-noscript {
    max-width: var(--col);
    margin: 1rem auto .6rem;   /* 顶部由 .2rem 改成 1rem，和上方按钮拉开；想更松就再调大 */
    text-align: left;
    font-size: .9rem;
    color: var(--ink-soft);
}

/* 步骤容器 */
.steps {
    max-width: var(--col);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 3vw, 18px)
}

/* 单个步骤卡：大圆角 + 毛玻璃 */
.step {
    background: var(--card);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--radius);
    /* 卡片阴影：site.css 的 --shadow-md 是 20px 模糊，这里要 22px，故直接写死 */
    box-shadow: 0 6px 22px rgba(17, 24, 39, .07), 0 1px 3px rgba(17, 24, 39, .05);
    padding: clamp(16px, 3.5vw, 20px);
}

/* 步骤头：序号 + 标题 */
.step-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px
}

.step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3rem .85rem;
    border-radius: var(--radius-pill);
    background: rgba(47, 107, 255, .12);   /* 改：浅灰 → 淡蓝底，提亮抓眼 */
    color: var(--ios-blue);                /* 改：灰字 → 蓝字，比实心按钮浅一层 */
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap
}

.step-title-wrap {
    flex: 1 1 auto;
    min-width: 0
}

.step-title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3
}

/* 操作区 */
.step-actions {
    display: flex;
    flex-direction: column;
    gap: .6rem
}

/* 备用安装 / 购买卡密 / 人工客服:优先全部并在一行(最省竖向空间、信息集中、利于转化);
   一行放不下就自动换行——先挤成 2+1,再窄才 1+1+1。纯按宽度自然流动,不按设备强制竖排。 */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem
}

.btn-row .ios-btn {
    width: auto;
    flex: 0 1 auto;        /* 按内容自适应、可收缩,尽量并到一行 */
    padding-inline: .9rem  /* 紧凑内边距,帮助三枚在更多屏宽下同处一行 */
}

/* iOS 胶囊按钮 */
.ios-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 50px;
    padding: .7rem 1.2rem;
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
}

.ios-btn:active {
    transform: scale(.98)
}

.ios-btn:focus-visible {
    outline: 2px solid var(--ios-blue);
    outline-offset: 2px
}

.ios-btn svg {
    flex: 0 0 auto
}

/* 主按钮：系统蓝实心（安装 / 备用安装） */   /* 改：去掉"购买卡密" */
.ios-btn-primary {
    color: #fff;
    background: var(--ios-blue);
    box-shadow: 0 6px 18px rgba(47, 107, 255, .28)
}

.ios-btn-primary:hover {
    background: var(--ios-blue-press)
}

/* ↓↓↓ 新增：购买卡密专用第二强调色（紫 / 粉 / 玫瑰红，三选一）↓↓↓ */
.ios-btn-buy {
    color: #fff;
    /*background: #af52de;                             !* 紫 *!*/
    /*box-shadow: 0 6px 18px rgba(175, 82, 222, .30);*/
    background:#ff2d55;
    box-shadow:0 6px 18px rgba(255,45,85,.30);
}

.ios-btn-buy:hover {
    /*background: #9a40c8;                             !* 紫 · 深一档(hover) *!*/
    background: #e23149;
}

/* 想换配色：把上面 .ios-btn-buy 的 background / box-shadow 和 :hover 的 background 换成下面任一组
   粉 / 玫红：    background:#ff2d55;  box-shadow:0 6px 18px rgba(255,45,85,.30);  hover→ #e62548;
   玫瑰红 / 珊瑚： background:#f5455c;  box-shadow:0 6px 18px rgba(245,69,92,.30);  hover→ #e23149; */
/* ↑↑↑ 新增结束 ↑↑↑ */

/* 人工客服：微信官方绿。颜色复用 site.css 已有的 --wechat(#07c160)，全站通用，本文件不再重复定义 */
.ios-btn-wechat {
    color: #fff;
    background: var(--wechat);
    box-shadow: 0 6px 18px rgba(7, 193, 96, .30)
}

.ios-btn-wechat:hover {
    background: #06ad56
}

/* 微信图标：<img> 引入 svg 文件；filter 把图标强制成纯白以贴合绿底。
   若你的 wechat.svg 本身就是白色，删掉 filter 这一行即可。 */
.ios-btn-wechat .btn-ico {
    flex: 0 0 auto;
    filter: brightness(0) invert(1)
}

/* 退款徽标（产品头内） */
.badge-refund {
    display: inline-flex;
    align-items: center;
    gap: .35rem;                          /* 顺手收紧（可选） */
    margin-top: .5rem;                    /* 顺手收紧（可选） */
    padding: .28rem .62rem;               /* 顺手收紧（可选） */
    border-radius: var(--radius-pill);
    background: rgba(120, 120, 128, .1);  /* 改：绿底 → iOS 中性填充灰，去掉“土”感 */
    color: var(--ink-soft);               /* 改：深绿字 → 中性灰字 */
    font-size: .76rem;                    /* 改：.86rem → 字体改小 */
    font-weight: 600
}

.badge-refund svg {
    color: var(--free)                    /* 不变：仅图标保留绿色作点睛 */
}

/* 第二步：子步骤（常驻展开） */
.substeps {
    margin: 0;
    padding: 0;
    list-style: none
}

.substep {
    display: flex;
    gap: .85rem;
    padding: 1rem 0;
    border-top: 1px solid var(--line)
}

.substep:first-child {
    border-top: 0;
    padding-top: .2rem
}

.substep:last-child {
    padding-bottom: .2rem
}

.substep-num {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: .15rem;
    border-radius: 50%;
    background: var(--ios-fill);
    color: var(--ios-blue);
    font-size: .82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.substep-body {
    flex: 1 1 auto;
    min-width: 0
}

.substep-body p {
    margin: 0 0 .7rem;
    color: var(--ink);
    line-height: 1.7
}

.t-img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2)
}

/* 关于（SEO） */
.about {
    max-width: 640px;
    margin: clamp(30px, 6vw, 48px) auto 0
}

.about h2 {
    font-size: clamp(1.2rem, 3vw, 1.45rem);
    font-weight: 800;
    letter-spacing: .2px;
    margin: 0 0 .7rem
}

.about p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.85
}

.about a {
    font-weight: 600;
    color: var(--ios-blue)
}

/* ============================================================
   安装弹窗（点击「点我安装」后弹出）—— 全新设计，不复用旧 .auto-hint / .install-error
   显隐：默认 display:none，JS 加 .is-open 改 flex 居中；仅用全站通用变量，放哪都能用
   ============================================================ */
.install-modal {
    position: fixed;
    inset: 0;
    z-index: 200;                 /* 高于吸顶导航(50) 与免费页密码弹窗(100/101) */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.install-modal.is-open { display: flex }

.install-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.install-modal-card {
    position: relative;           /* 盖在 backdrop 之上 */
    width: 100%;
    max-width: 360px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: clamp(24px, 5vw, 30px) clamp(20px, 5vw, 26px) clamp(18px, 4vw, 22px);
    text-align: center;
    animation: install-modal-in .26s cubic-bezier(.2, .7, .3, 1.2);
}

@keyframes install-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.96) }
    to   { opacity: 1; transform: none }
}

.install-modal-x {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-faint);
    cursor: pointer;
    outline: none;                              /* 新增：去掉聚焦时浏览器画的那个框 */
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease;
}

.install-modal-x svg { pointer-events: none }

/* 新增：弹窗打开时 JS 会聚焦这个按钮，这里明确再清一次（iOS 14/16 兜底，确保任何时候都不出框） */
.install-modal-x:focus { outline: none }

@media (hover: hover) {
    .install-modal-x:hover { color: var(--ink-soft) }
}

.install-modal-x:active { color: var(--ink) }

.install-modal-ico {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(19, 163, 107, .12);   /* 绿色对勾底，呼应「已安装」 */
    color: var(--free);
    display: flex;
    align-items: center;
    justify-content: center;
}

.install-modal-title {
    margin: 0 0 .5rem;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
}

.install-modal-text {
    margin: 0 0 1.2rem;
    color: var(--ink-soft);
    font-size: .95rem;
    line-height: 1.6;
}

.install-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: .7rem 1.2rem;
    border-radius: 14px;
    background: var(--primary);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(47, 107, 255, .28);
    transition: background .18s ease;
}

.install-modal-btn:hover { background: var(--primary-ink); text-decoration: none }

.install-modal-link {
    display: inline-block;
    margin-top: .8rem;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: .95rem;
    cursor: pointer;
}

.install-modal-link:hover { color: var(--ink) }

/* 不支持毛玻璃时步骤卡回落实心白（本页专属，site.css 无 .step，必须保留） */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) {
    .step {
        background: var(--card-solid);
        border-color: var(--line)
    }
}

/* ============================================================
   响应式：≥768px 平板 / 电脑 / 超大屏
   只剩 2 张卡，单列聚焦（App Store 详情页观感），各端居中留白、不拉伸。
   一处覆盖 --col：app-head / steps / 提示文字 / 客服按钮一起对齐到 520。
   ============================================================ */
@media (min-width: 768px) {
    .install {
        --col: 520px
    }
}

@media (prefers-reduced-motion: reduce) {
    .ios-btn {
        transition: none
    }

    .ios-btn:active {
        transform: none
    }

    /* 新增：关掉弹窗入场动画 */
    .install-modal-card {
        animation: none
    }
}