/* ================================================================
 * 白泽资源详情页 - 蓝白风格覆盖 v2
 *
 * 重要：你的 baize-zibll-shell-reset.css 和内联 CSS（functions.php 行77-118）
 * 把所有 .zib-widget / .theme-box 的边框、背景、阴影、内边距清零了。
 * 本文件需要在资源详情页里把这些效果"恢复"回来，同时应用蓝白主题。
 *
 * 所有选择器用 body.category-resource 前缀，只对"资源广场"分类生效。
 * 选择器权重刻意高于 shell-reset，确保覆盖生效。
 *
 * 放置路径：wp-content/themes/你的子主题/assets/css/baize-resource-detail.css
 * 加载顺序：必须在 baize-zibll-shell-reset.css 之后加载（数组里排在后面）
 * ================================================================ */

/* ============================================================
 * 0. 变量
 * ============================================================ */
body.category-resource {
    --br-bg: #f4f8ff;
    --br-panel: #ffffff;
    --br-text: #122844;
    --br-muted: #617791;
    --br-line: #d9e7fb;
    --br-blue: #2f6bff;
    --br-blue-deep: #1d4fcb;
    --br-blue-soft: #edf4ff;
    --br-shadow: 0 12px 32px rgba(32, 86, 180, .07);
    --br-radius: 22px;
    --br-radius-sm: 14px;
}

/* ============================================================
 * 1. 页面背景
 * ============================================================ */
body.category-resource {
    background: linear-gradient(180deg, #f4f8ff, #eef5ff) !important;
}

/* ============================================================
 * 2. 反转 shell-reset：恢复卡片外观
 *    shell-reset 用 body:not(.dark-theme) .zib-widget 等选择器
 *    我们用更高权重 body.category-resource 来覆盖
 * ============================================================ */

/* 2.1 左侧主文章卡片 */
body.category-resource .content-layout > .article,
body.category-resource .content-layout > .theme-box,
body.category-resource .content-layout > .box-body,
body.category-resource .content-layout > .zib-widget,
body.category-resource .article.main-bg.theme-box.box-body {
    background: var(--br-panel) !important;
    border: 1px solid var(--br-line) !important;
    border-radius: var(--br-radius) !important;
    box-shadow: var(--br-shadow) !important;
    padding: 28px 32px !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* 2.2 付费框卡片恢复 */
body.category-resource .pay-box,
body.category-resource .pay-box.zib-widget,
body.category-resource #posts-pay,
body.category-resource #posts-pay.zib-widget {
    background: var(--br-panel) !important;
    border: 1px solid var(--br-line) !important;
    border-radius: var(--br-radius) !important;
    box-shadow: var(--br-shadow) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 2.3 侧边栏所有小工具恢复 */
body.category-resource .sidebar .zib-widget,
body.category-resource .sidebar .widget,
body.category-resource .sidebar .theme-box,
body.category-resource .sidebar .zib-widget[class],
body.category-resource .sidebar .theme-box[class] {
    background: var(--br-panel) !important;
    border: 1px solid var(--br-line) !important;
    border-radius: var(--br-radius) !important;
    box-shadow: var(--br-shadow) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 2.4 流体小工具区恢复 */
body.category-resource .fluid-widget > .theme-box,
body.category-resource .fluid-widget > .zib-widget {
    background: var(--br-panel) !important;
    border: 1px solid var(--br-line) !important;
    border-radius: var(--br-radius) !important;
    box-shadow: var(--br-shadow) !important;
}

/* 2.5 恢复 ::before / ::after 伪元素 */
body.category-resource .pay-box::before,
body.category-resource .pay-box::after,
body.category-resource .sidebar .zib-widget::before,
body.category-resource .sidebar .zib-widget::after,
body.category-resource .sidebar .theme-box::before,
body.category-resource .sidebar .theme-box::after {
    display: block !important;
    content: "" !important;
}

/* ============================================================
 * 3. 左侧付费框样式（.pay-box / #posts-pay）
 * ============================================================ */

/* 3.1 内部间距 */
body.category-resource .pay-box .box-body {
    padding: 22px 26px !important;
}

/* 3.2 付费标题 */
body.category-resource .pay-box .pay-title,
body.category-resource .pay-box dt.pay-title {
    color: var(--br-text) !important;
    font-weight: 700 !important;
    font-size: 17px !important;
}

/* 3.3 付费类型标签 */
body.category-resource .pay-box .pay-tag,
body.category-resource .pay-box .badg {
    background: var(--br-blue-soft) !important;
    color: var(--br-blue) !important;
    border: 1px solid #c5d9ff !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
}

/* 3.4 价格 - 蓝色 */
body.category-resource .pay-box .c-red,
body.category-resource .pay-box .pay-mark,
body.category-resource .pay-box .em14,
body.category-resource .pay-box .em12 {
    color: var(--br-blue) !important;
}

/* 3.5 所有购买/下载/登录按钮 → 蓝色渐变 */
body.category-resource .pay-box .but.jb-red,
body.category-resource .pay-box .but.jb-blue,
body.category-resource .pay-box .but.jb-yellow,
body.category-resource .pay-box .but.jb-green,
body.category-resource .pay-box .wp-ajax-submit,
body.category-resource .pay-box .pay-button .but,
body.category-resource .pay-box .signin-loader,
body.category-resource .but-download .but {
    background: linear-gradient(135deg, var(--br-blue), var(--br-blue-deep)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--br-radius-sm) !important;
    box-shadow: 0 6px 16px rgba(47, 107, 255, .22) !important;
    font-weight: 700 !important;
    transition: all .2s ease !important;
}

body.category-resource .pay-box .but:hover,
body.category-resource .pay-box .wp-ajax-submit:hover,
body.category-resource .pay-box .signin-loader:hover,
body.category-resource .but-download .but:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(47, 107, 255, .32) !important;
}

/* 3.6 已购/已付费状态 → 绿色渐变 */
body.category-resource .paid-box .jb-green,
body.category-resource .paid-box .payvip-icon {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-radius: var(--br-radius-sm) !important;
}

/* 3.7 付费详情区 */
body.category-resource .pay-box .pay-details {
    border-top: 1px solid var(--br-line) !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
    color: var(--br-muted) !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
}

/* 3.8 资源属性行 */
body.category-resource .pay-box .flex.jsb {
    padding: 10px 0 !important;
    border-bottom: 1px dashed var(--br-line) !important;
    font-size: 14px !important;
    color: var(--br-text) !important;
}

body.category-resource .pay-box .flex.jsb:last-child {
    border-bottom: none !important;
}

/* 3.9 销量徽章 */
body.category-resource .pay-box .img-badge.hot {
    background: linear-gradient(135deg, var(--br-blue), var(--br-blue-deep)) !important;
    border-radius: 999px !important;
    color: #fff !important;
}

/* 3.10 服务图标色 */
body.category-resource .pay-box .muted-2-color .fa {
    color: var(--br-blue) !important;
}

/* ============================================================
 * 4. 右侧侧边栏 - 付费小工具（.pay-widget）
 * ============================================================ */

/* 4.1 渐变背景 → 蓝色 */
body.category-resource .sidebar .pay-widget .jb-red,
body.category-resource .sidebar .pay-widget .jb-blue,
body.category-resource .sidebar .pay-widget .jb-yellow,
body.category-resource .sidebar .pay-widget .jb-green,
body.category-resource .sidebar .pay-widget .relative-h .absolute,
body.category-resource .sidebar .pay-widget .relative-h[class] {
    background: linear-gradient(135deg, var(--br-blue), var(--br-blue-deep)) !important;
}

/* 4.2 侧边栏价格 */
body.category-resource .sidebar .pay-widget .c-red {
    color: #fff !important;
}

/* 4.3 侧边栏购买按钮 */
body.category-resource .sidebar .pay-widget .but.jb-red,
body.category-resource .sidebar .pay-widget .but.jb-blue,
body.category-resource .sidebar .pay-widget .but.jb-yellow,
body.category-resource .sidebar .pay-widget .but.jb-green,
body.category-resource .sidebar .pay-widget .pay-button .but,
body.category-resource .sidebar .pay-widget .signin-loader {
    background: linear-gradient(135deg, var(--br-blue), var(--br-blue-deep)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--br-radius-sm) !important;
    box-shadow: 0 6px 16px rgba(47, 107, 255, .22) !important;
    font-weight: 700 !important;
}

/* 4.4 侧边栏付费标签 */
body.category-resource .sidebar .pay-widget .pay-tag {
    background: var(--br-blue-soft) !important;
    color: var(--br-blue) !important;
    border: 1px solid #c5d9ff !important;
    border-radius: 999px !important;
}

/* 4.5 侧边栏属性行 */
body.category-resource .sidebar .pay-widget .flex.jsb {
    padding: 10px 0 !important;
    border-bottom: 1px dashed var(--br-line) !important;
    font-size: 14px !important;
}

body.category-resource .sidebar .pay-widget .flex.jsb:last-child {
    border-bottom: none !important;
}

/* 4.6 VIP/折扣标签 */
body.category-resource .sidebar .pay-widget .jb-yellow {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
}

/* 4.7 侧边栏 box-body 内边距恢复 */
body.category-resource .sidebar .pay-widget > .box-body,
body.category-resource .sidebar .zib-widget > .box-body {
    padding: 18px 20px !important;
}

/* ============================================================
 * 5. 右侧侧边栏 - 作者卡片和其他小工具
 * ============================================================ */

/* 作者卡片按钮 */
body.category-resource .sidebar .but.jb-blue,
body.category-resource .sidebar .but.jb-red {
    background: linear-gradient(135deg, var(--br-blue), var(--br-blue-deep)) !important;
    color: #fff !important;
    border-radius: var(--br-radius-sm) !important;
    border: none !important;
}

/* ============================================================
 * 6. 文章标题
 * ============================================================ */
body.category-resource .article-title,
body.category-resource .article-title a {
    color: var(--br-text) !important;
    font-weight: 800 !important;
}

/* ============================================================
 * 7. 正文排版
 * ============================================================ */
body.category-resource .article-content {
    font-size: 15px !important;
    line-height: 1.85 !important;
    color: var(--br-text) !important;
}

body.category-resource .wp-posts-content h2,
body.category-resource .wp-posts-content h3 {
    color: var(--br-text) !important;
    font-weight: 700 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #edf2f9 !important;
    margin-bottom: 16px !important;
}

body.category-resource .wp-posts-content a {
    color: var(--br-blue) !important;
}

body.category-resource .wp-posts-content code {
    background: var(--br-blue-soft) !important;
    color: var(--br-blue) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

body.category-resource .wp-posts-content pre {
    background: #14335f !important;
    color: #eaf3ff !important;
    border-radius: var(--br-radius-sm) !important;
    padding: 18px !important;
}

body.category-resource .wp-posts-content pre code {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
}

body.category-resource .wp-posts-content blockquote {
    border-left: 4px solid var(--br-blue) !important;
    background: #f8faff !important;
    border-radius: 0 var(--br-radius-sm) var(--br-radius-sm) 0 !important;
    padding: 14px 20px !important;
    color: var(--br-muted) !important;
}

body.category-resource .wp-posts-content img {
    border-radius: 12px !important;
}

/* ============================================================
 * 8. 文章底部 - 标签/互动
 * ============================================================ */

/* 分类标签 */
body.category-resource .article-tags .but {
    background: var(--br-blue-soft) !important;
    color: var(--br-blue) !important;
    border: 1px solid #c5d9ff !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
}

body.category-resource .article-tags .but:hover {
    background: var(--br-blue) !important;
    color: #fff !important;
}

/* 点赞/分享/收藏 */
body.category-resource .post-actions .action {
    border: 1px solid var(--br-line) !important;
    border-radius: var(--br-radius-sm) !important;
    color: var(--br-muted) !important;
    transition: all .2s ease !important;
}

body.category-resource .post-actions .action:hover,
body.category-resource .post-actions .action.actived {
    border-color: var(--br-blue) !important;
    color: var(--br-blue) !important;
    background: var(--br-blue-soft) !important;
}

/* ============================================================
 * 9. 登录提示按钮
 * ============================================================ */
body.category-resource .signin-loader.jb-blue,
body.category-resource .signin-loader {
    background: linear-gradient(135deg, var(--br-blue), var(--br-blue-deep)) !important;
    color: #fff !important;
    border-radius: var(--br-radius-sm) !important;
}

/* ============================================================
 * 10. 上下篇导航
 * ============================================================ */
body.category-resource .posts-nav .nav-item {
    border: 1px solid var(--br-line) !important;
    border-radius: var(--br-radius-sm) !important;
    background: var(--br-panel) !important;
}

/* ============================================================
 * 11. 评论区
 * ============================================================ */
body.category-resource .comments-box .but.jb-blue,
body.category-resource .comment-respond .but.jb-blue {
    background: linear-gradient(135deg, var(--br-blue), var(--br-blue-deep)) !important;
    color: #fff !important;
    border-radius: var(--br-radius-sm) !important;
}

/* ============================================================
 * 12. 响应式
 * ============================================================ */
@media (max-width: 768px) {
    body.category-resource .content-layout > .article,
    body.category-resource .article.main-bg.theme-box.box-body {
        padding: 20px !important;
        border-radius: 16px !important;
    }

    body.category-resource .pay-box,
    body.category-resource #posts-pay {
        border-radius: 16px !important;
    }

    body.category-resource .sidebar .zib-widget,
    body.category-resource .sidebar .pay-widget {
        border-radius: 16px !important;
    }
}