/* ==========================================================================
   微信扫码登录 / 绑定（登录页 + 个人信息与安全中心共用）
   ==========================================================================

   为什么要单独一份
   ---------------------------------------------------------------------------
   登录页那套观感（底纹、双栏卡）在 login.css / merchant-login.css 里，而扫码
   面板两个登录页都要用、内容页的绑定卡片也要用同一套「码区 + 遮罩 + 提示」。
   放进任一份页面样式就等于让另一份抄一遍；放进 theme.css / rageframe.css 又会
   让所有后台页替它加载（判据见 docs/spec/Guidelines.md §七.2）。

   两条硬纪律
   ---------------------------------------------------------------------------
   ① 选择器全部锚在 .rf-wechat / .rf-wechat-bind 上 —— 它们只出现在这几个视图里，
      不会外溢到别的页面。
   ② 颜色 / 圆角 / 间距一律引令牌（--rf-*）：明暗两套皮与「换主色」自动跟随。
      唯一的例外是微信图标的品牌绿 —— 用 --rf-ok 表达（它是本站语义里的「成功绿」，
      深浅两套皮都够醒目），不写死 #07C160。

   码区尺寸写死 200×200 是有意的：二维码 data-URI 加载完成前后若尺寸不同，
   整张卡会先缩后跳（登录页是垂直居中的，跳得尤其明显）。
   ========================================================================== */

/* ── 登录页：分隔线 + 按钮 ─────────────────────────────────────────────── */
.rf-wechat {
    margin-top: var(--rf-space-4);
}

.rf-wechat-divider {
    display: flex;
    align-items: center;
    gap: var(--rf-space-3);
    margin-bottom: var(--rf-space-3);
    color: var(--rf-muted);
    font-size: var(--rf-fs-sm);
}

.rf-wechat-divider::before,
.rf-wechat-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rf-line);
}

.rf-wechat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rf-space-2);
    height: var(--rf-ctl-h-lg);
}

.rf-wechat-btn .rfi {
    font-size: var(--rf-icon-size);
    color: var(--rf-ok);
}

/* 展开后：按钮与分隔线让位给面板（.is-open 由 JS 挂，见 wechat.js） */
.rf-wechat.is-open .rf-wechat-divider,
.rf-wechat.is-open .rf-wechat-btn {
    display: none;
}

/* ── 登录页：二维码面板 ────────────────────────────────────────────────── */
.rf-wechat-panel {
    text-align: center;
}

.rf-wechat-code {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto var(--rf-space-3);
    padding: var(--rf-space-2);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-r);
    background: var(--rf-surface);
}

.rf-wechat-code img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--rf-r-sm);
}

.rf-wechat-mask {
    position: absolute;
    inset: var(--rf-space-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rf-space-2);
    padding: var(--rf-space-3);
    border-radius: var(--rf-r-sm);
    background: var(--rf-media-state-bg, var(--rf-surface-2));
    text-align: center;
}

.rf-wechat-mask-text {
    margin: 0;
    font-size: var(--rf-fs-sm);
    color: var(--rf-ink);
}

.rf-wechat-tip {
    margin: 0 0 var(--rf-space-2);
    font-size: var(--rf-fs-sm);
    color: var(--rf-muted);
}

/* ── 内容页：绑定卡片 ──────────────────────────────────────────────────── */
.rf-wechat-bind {
    display: flex;
    flex-direction: column;
    gap: var(--rf-space-3);
}

.rf-wechat-bind-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rf-space-3);
}

.rf-wechat-bind-title {
    display: flex;
    align-items: center;
    gap: var(--rf-space-2);
    font-weight: 600;
}

.rf-wechat-bind-title .rfi {
    font-size: var(--rf-icon-size);
    color: var(--rf-ok);
}

.rf-wechat-bind-desc {
    margin-top: var(--rf-space-1);
    font-size: var(--rf-fs-sm);
    color: var(--rf-muted);
}

.rf-wechat-bind-state {
    display: flex;
    align-items: center;
    gap: var(--rf-space-2);
    font-size: var(--rf-fs-sm);
    color: var(--rf-ink);
}

.rf-wechat-bind-code {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    padding: var(--rf-space-2);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-r);
    background: var(--rf-surface);
}

.rf-wechat-bind-code img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--rf-r-sm);
}

.rf-wechat-bind-panel {
    text-align: center;
}

.rf-wechat-bind-panel .rf-wechat-tip {
    margin-top: var(--rf-space-3);
}