/* ==========================================================
 * Puock 微信公众号登录 - 前端样式
 *
 * 完全适配 Puock 2.11 原生设计语言 + 深色/浅色模式：
 *   - 颜色：微信绿 #07c160
 *   - 弹窗：Puock 原生 pk-layer / min-width-modal 风格
 *   - 深色模式：通过 html[data-bs-theme="dark"] 自动切换
 * ========================================================== */

/* ====== CSS 变量（浅色默认） ====== */
:root {
    /* 优先借用 Puock / Bootstrap 5 原生变量，回退到插件内置值 */
    --wxmp-bg: var(--bs-body-bg, #fff);
    --wxmp-text: var(--bs-body-color, #23282d);
    --wxmp-text-secondary: var(--bs-secondary-color, #666);
    --wxmp-text-muted: var(--bs-tertiary-color, #999);
    --wxmp-border: var(--bs-border-color, #e5e7eb);
    --wxmp-border-input: var(--bs-border-color, #dcdcde);
    --wxmp-hover-bg: var(--bs-secondary-bg, #f5f5f5);
    --wxmp-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    --wxmp-overlay-bg: rgba(255, 255, 255, .94);
    --wxmp-input-bg: var(--bs-body-bg, #fff);
    --wxmp-hint-bg: #fff7e6;
    --wxmp-hint-border: #ffe7ba;
    --wxmp-hint-text: #d46b08;
    --wxmp-modal-mask: rgba(15, 23, 42, .45);
    --wxmp-qr-empty-bg: var(--bs-secondary-bg, #fafafa);
    --wxmp-box-border: rgba(0, 0, 0, .08);

    /* 微信品牌色（深浅不变） */
    --wxmp-wechat: #07c160;
    --wxmp-wechat-hover: #06ad56;
}

/* 深色模式（Puock 使用 html[data-bs-theme="dark"]） */
html[data-bs-theme="dark"] {
    --wxmp-bg: var(--bs-body-bg, #1a1d23);
    --wxmp-text: var(--bs-body-color, #e6e6e6);
    --wxmp-text-secondary: var(--bs-secondary-color, #b0b0b0);
    --wxmp-text-muted: var(--bs-tertiary-color, #7a7a7a);
    --wxmp-border: var(--bs-border-color, #374151);
    --wxmp-border-input: var(--bs-border-color, #4b5563);
    --wxmp-hover-bg: var(--bs-secondary-bg, #252a33);
    --wxmp-shadow: 0 16px 48px rgba(0, 0, 0, .65);
    --wxmp-overlay-bg: rgba(26, 29, 35, .96);
    --wxmp-input-bg: var(--bs-body-bg, #22252c);
    --wxmp-hint-bg: #2a2218;
    --wxmp-hint-border: #5a4530;
    --wxmp-hint-text: #faad14;
    --wxmp-modal-mask: rgba(0, 0, 0, .6);
    --wxmp-qr-empty-bg: var(--bs-secondary-bg, #252a33);
    --wxmp-box-border: rgba(255, 255, 255, .12);
}

/* ====== 扫码登录按钮（与 Puock 原生 btn 体系融合） ====== */
.puock-wxmp-scan-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ====== 扫码弹窗（完全复刻 Puock min-width-modal 风格 + 背景模糊 + 描边） ====== */
.puock-wxmp-scan-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483647; /* 最高层级，确保覆盖 Puock 主题登录弹窗 */
    background: var(--wxmp-modal-mask);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    /* 背景模糊（毛玻璃效果） */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* 低版本浏览器 fallback（微信内置浏览器 6.0 以下等可能不支持 backdrop-filter） */
@supports not (backdrop-filter: blur(8px)) and not (-webkit-backdrop-filter: blur(8px)) {
    .puock-wxmp-scan-modal {
        background: var(--wxmp-modal-mask);
    }
}
.puock-wxmp-scan-modal.puock-wxmp-active {
    opacity: 1;
    visibility: visible;
}

/* ====== 弹窗容器：同时继承 Puock 原生 min-width-modal 样式 ====== */
.puock-wxmp-scan-box.min-width-modal,
.puock-wxmp-scan-box {
    /* 借用 Puock min-width-modal 的核心圆角和阴影 */
    border-radius: var(--bs-border-radius, 8px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 16px 48px rgba(0, 0, 0, .12);
    background: var(--wxmp-bg);
    width: 340px;
    max-width: 90vw;
    overflow: hidden;
    transform: translateY(20px) scale(.96);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
    /* 描边：浅色模式下一条极细的深色线；深色模式下一条半透明白色线 */
    border: 1px solid var(--wxmp-box-border);
    position: relative;
}
/* 额外高光描边：让弹窗更有层次感 */
.puock-wxmp-scan-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-bs-theme="light"] .puock-wxmp-scan-box::before {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
html[data-bs-theme="dark"] .puock-wxmp-scan-box::before {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.puock-wxmp-scan-modal.puock-wxmp-active .puock-wxmp-scan-box {
    transform: translateY(0) scale(1);
}

/* 弹窗头部 */
.puock-wxmp-scan-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--wxmp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.puock-wxmp-scan-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--wxmp-text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.puock-wxmp-scan-title i {
    color: var(--wxmp-wechat);
}
.puock-wxmp-scan-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wxmp-text-muted);
    transition: all .15s;
}
.puock-wxmp-scan-close:hover {
    background: var(--wxmp-hover-bg);
    color: var(--wxmp-text);
}

/* 二维码区域 */
.puock-wxmp-scan-body {
    padding: 20px;
    text-align: center;
}
.puock-wxmp-qr-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 14px;
    border: 1px solid var(--wxmp-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--wxmp-bg);
}
.puock-wxmp-qr-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 状态遮罩层（等待扫码 / 已扫码 / 已过期） */
.puock-wxmp-qr-overlay {
    position: absolute;
    inset: 0;
    background: var(--wxmp-overlay-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--wxmp-text);
    font-size: 13px;
    padding: 16px;
    text-align: center;
}
.puock-wxmp-qr-overlay.puock-wxmp-hidden { display: none; }

.puock-wxmp-qr-overlay-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.puock-wxmp-qr-overlay-icon.waiting {
    background: #fff7e6;
    color: #fa8c16;
}
.puock-wxmp-qr-overlay-icon.scanned {
    background: #e6fffb;
    color: #13c2c2;
}
.puock-wxmp-qr-overlay-icon.success {
    background: #f6ffed;
    color: #07c160;
}
.puock-wxmp-qr-overlay-icon.expired {
    background: #fff1f0;
    color: #ff4d4f;
}
.puock-wxmp-qr-overlay-icon.error {
    background: #fff1f0;
    color: #ff4d4f;
}

/* 深色模式下状态图标背景色反色 */
html[data-bs-theme="dark"] .puock-wxmp-qr-overlay-icon.waiting {
    background: #3a2a15;
}
html[data-bs-theme="dark"] .puock-wxmp-qr-overlay-icon.scanned {
    background: #153a38;
}
html[data-bs-theme="dark"] .puock-wxmp-qr-overlay-icon.success {
    background: #153a1f;
}
html[data-bs-theme="dark"] .puock-wxmp-qr-overlay-icon.expired,
html[data-bs-theme="dark"] .puock-wxmp-qr-overlay-icon.error {
    background: #3a1515;
}

/* 刷新按钮（小尺寸） */
.puock-wxmp-qr-refresh {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--wxmp-wechat);
    border-radius: 4px;
    background: transparent;
    color: var(--wxmp-wechat);
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
}
.puock-wxmp-qr-refresh:hover {
    background: var(--wxmp-wechat);
    color: #fff;
}

/* 底部提示区 */
.puock-wxmp-scan-footer {
    padding: 12px 18px 16px;
    border-top: 1px solid var(--wxmp-border);
    text-align: center;
    color: var(--wxmp-text-muted);
    font-size: 12px;
    line-height: 1.6;
}

/* ====== wp-login.php 独立入口的按钮 ====== */
.puock-wxmp-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--wxmp-wechat);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all .15s;
}
.puock-wxmp-login-btn:hover {
    background: var(--wxmp-wechat-hover);
    box-shadow: 0 2px 8px rgba(7, 193, 96, .3);
}

/* ====== Puock layer.js 弹窗内部表单可见性兜底 ======
 *
 * Puock 的 .toggle-el-show-hide handler 有一个 bug：
 *   它用 e.closest(".modal") 找标题容器，但 layer.js 的容器类是 .layui-layer
 *   所以注册/找回密码切换后，layer 标题永远不会更新。
 *
 * layer.js 自己的 shade < content z-index 关系是正确的（shade = content - 1，动态递增），
 * 所以不需要在 CSS 里硬编码 z-index — 让 layer.js 管层级，我们只修表单可见性。
 */
.layui-layer .min-width-modal,
.layui-layer [id^="front-register-form"],
.layui-layer [id^="front-forget-password-form"] {
    position: relative;
    z-index: 1;  /* 确保表单内元素不被 layui-layer-title 的底部阴影覆盖 */
}

/* ====== 加载动画（等待扫码时显示） ====== */
.puock-wxmp-loading {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(7, 193, 96, .2);
    border-top-color: var(--wxmp-wechat);
    border-radius: 50%;
    animation: puock-wxmp-spin .8s linear infinite;
}
@keyframes puock-wxmp-spin {
    to { transform: rotate(360deg); }
}

/* ====== Puock 主题移动端适配 ====== */
@media (max-width: 768px) {
    .puock-wxmp-scan-box { width: 90vw; max-width: 320px; }
    .puock-wxmp-qr-wrapper { width: 180px; height: 180px; }
}

/* ====== 验证码登录（未认证公众号） ====== */
/* 统一弹窗内盒模型，防止主题 CSS 的 box-sizing / input 宽度规则导致溢出 */
.puock-wxmp-scan-box,
.puock-wxmp-scan-box * {
    box-sizing: border-box;
}
.puock-wxmp-scan-box input[type="text"] {
    max-width: none;
}
.puock-wxmp-code-body {
    max-width: 240px;
    margin: 0 auto;
}
.puock-wxmp-mp-qr-wrapper {
    width: 170px;
    height: 170px;
    margin: 0 auto 12px;
    border: 1px solid var(--wxmp-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--wxmp-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.puock-wxmp-mp-qr-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.puock-wxmp-mp-qr-empty {
    font-size: 12px;
    color: var(--wxmp-text-muted);
    padding: 10px;
    text-align: center;
}
.puock-wxmp-code-steps {
    text-align: left;
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--wxmp-text);
}
.puock-wxmp-code-steps b { color: #07c160; }
.puock-wxmp-code-hint {
    font-size: 12px;
    color: var(--wxmp-hint-text);
    background: var(--wxmp-hint-bg);
    border: 1px solid var(--wxmp-hint-border);
    border-radius: 4px;
    padding: 5px 8px;
    margin: 0 0 10px;
    line-height: 1.6;
    text-align: left;
}
.puock-wxmp-code-input-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}
.puock-wxmp-code-input-row input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--wxmp-border-input);
    border-radius: 4px;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
    outline: none;
    height: auto;
    line-height: 1.4;
    box-shadow: none;
    background: var(--wxmp-input-bg);
    color: var(--wxmp-text);
    transition: border-color .15s, box-shadow .15s;
}
.puock-wxmp-code-input-row input:focus {
    border-color: #07c160;
    box-shadow: 0 0 0 1px #07c160;
}
.puock-wxmp-code-verify-btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    background: #07c160;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.6;
    white-space: nowrap;
    transition: background .15s;
}
.puock-wxmp-code-verify-btn:hover { background: #06ad56; }
.puock-wxmp-code-verify-btn:disabled { background: #9be3b9; cursor: default; }
html[data-bs-theme="dark"] .puock-wxmp-code-verify-btn:disabled { background: #1a4d30; }

/* ====== 状态提示文字颜色（深色修正） ====== */
html[data-bs-theme="dark"] .puock-wxmp-scan-footer,
html[data-bs-theme="dark"] .puock-wxmp-qr-empty-bg {
    color: var(--wxmp-text-muted);
}

/* ====== Puock 登录弹窗（quick-login）中本插件的绑定提示 ====== */
.puock-wxmp-bind-tip {
    text-align: center;
    padding: 16px;
    color: var(--wxmp-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}
.puock-wxmp-bind-tip strong {
    color: #07c160;
}
.puock-wxmp-bind-tip .puock-wxmp-bind-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: center;
}