/*
 * laolicms 网站综合管理系统 v1.0.0
 * 作者：丿king　　联系 QQ：1735737677
 * 本文件作用：微信小程序频道三套版式（频道首页 / 列表页 / 内页）专用样式，与公众号版式同源但完全独立一套 xcx- 前缀类，
 *            公共骨架（分组面板、三栏面板、面包屑、搜索条、分类胶囊）用 sub_common.css 与 laoli.css，这里只补 xcx- 前缀的部分
 * 变量：无（纯样式）
 * 文件路径：application/template/laoli/public/pc/css/sub_xcx.css
 */

/* 频道首页整体间距 */
.xcx-home>.sub-group,.xcx-home>.sub-three-wrap,.xcx-home>.wbsy-cate-filter,.xcx-home>.tool-search-container,.xcx-home>.dhlb_breadcrumb{margin-bottom:15px;}

/* 小卡网格：一屏 6 列，逐段降级 6 → 4 → 3 → 2 */
.xcx-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;}
@media (max-width:1200px){.xcx-cards{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:768px){.xcx-cards{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:576px){.xcx-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}}

/* 小程序小卡：方形图标 64px + 名称 + 类目，hover 浮出小程序码 */
.xcx-card{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #f0f0f0;border-radius:8px;background:var(--bg-color,#fff);text-decoration:none;color:var(--text-color,#333);transition:box-shadow .25s,border-color .25s;}
.xcx-card:hover{border-color:#576b95;box-shadow:0 4px 14px rgba(87,107,149,.16);}
.xcx-card-ico{position:relative;flex:none;width:64px;height:64px;border-radius:14px;overflow:visible;}
.xcx-card-ico img{width:100%;height:100%;border-radius:14px;object-fit:cover;background:rgba(128,128,128,.1);}
.xcx-card-info{flex:1 1 auto;min-width:0;}
.xcx-card-info strong{display:block;font-size:13px;font-weight:500;color:var(--text-color,#333);}
.xcx-card-info strong a{color:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.xcx-card:hover .xcx-card-info strong{color:#576b95;}
.xcx-card-info p{margin:3px 0 0;font-size:12px;color:var(--sub-text-color,#999);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* hover 小程序码浮层（erweima 为空的行根本不渲染这块） */
.xcx-card-qr{position:absolute;left:50%;bottom:100%;transform:translateX(-50%) translateY(-6px);width:112px;padding:8px;border:1px solid #f0f0f0;border-radius:10px;background:var(--bg-color,#fff);box-shadow:0 6px 22px rgba(0,0,0,.16);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s;z-index:30;text-align:center;}
.xcx-card-qr img{display:block;width:94px;height:94px;margin:0 auto;border-radius:6px;}
.xcx-card-qr b{display:block;margin-top:5px;font-size:11px;font-weight:400;color:var(--sub-text-color,#999);}
.xcx-card:hover .xcx-card-qr{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
@media (max-width:576px){.xcx-card-qr{display:none;}}

/* 列表页工具条 */
.xcx-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;background:var(--bg-color,#fff);border-radius:6px;padding:12px 15px;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.xcx-toolbar-title{font-size:16px;font-weight:600;color:var(--text-color,#333);}
.xcx-toolbar-count{margin-left:8px;font-size:12px;font-weight:400;color:#999;}
.xcx-toolbar-sort{display:flex;flex-wrap:wrap;gap:6px;}
.xcx-toolbar-sort a{padding:5px 12px;border:1px solid #eee;border-radius:4px;font-size:13px;color:#666;text-decoration:none;}
.xcx-toolbar-sort a.active,.xcx-toolbar-sort a:hover{border-color:#576b95;color:#576b95;background:#f4f6fa;}
.xcx-toolbar-diqu{margin-left:8px;padding:2px 8px;border-radius:10px;background:#f4f6fa;color:#576b95;font-size:12px;font-weight:400;white-space:nowrap;}
.xcx-cate-count{margin-left:6px;font-size:12px;font-weight:400;color:#999;}
/* 公共的地区筛选条在小程序频道里换成微信蓝，不和小程序小卡打架 */
.wbsy-area-label i,.wbsy-area-link:hover,.wbsy-area-link.active,.wbsy-area-link.active .wbsy-area-num{color:#576b95;}
.wbsy-area-link:hover,.wbsy-area-link.active{border-color:#576b95;background:#f4f6fa;}
@media (max-width:576px){.xcx-toolbar{padding:10px 12px;}.xcx-toolbar-title{font-size:15px;}}

/* 内页详情卡 */
.xcx-detail{display:flex;gap:20px;align-items:flex-start;background:var(--bg-color,#fff);border-radius:8px;padding:20px;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.xcx-detail-logo{flex:none;width:100px;height:100px;border-radius:20px;object-fit:cover;background:rgba(128,128,128,.1);}
.xcx-detail-main{flex:1 1 auto;min-width:0;}
.xcx-detail-name{margin:0 0 10px;font-size:22px;color:var(--text-color,#222);}
.xcx-badge{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 10px;border-radius:12px;background:#f4f6fa;color:#576b95;font-size:12px;font-weight:400;}
.xcx-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0 0 12px;padding:0;list-style:none;font-size:13px;color:var(--sub-text-color,#666);}
.xcx-meta li{display:flex;align-items:center;gap:6px;}
.xcx-meta li i{color:#576b95;}
.xcx-meta li a{color:#576b95;text-decoration:none;}
.xcx-intro{margin:0;padding:12px;background:#fafbfc;border-radius:6px;font-size:14px;line-height:1.8;color:var(--sub-text-color,#555);}
.xcx-op{flex:none;display:flex;flex-direction:column;gap:10px;align-items:stretch;width:170px;}
.xcx-op .collect-btn{display:flex;justify-content:center;align-items:center;gap:6px;}
@media (max-width:900px){
    .xcx-detail{flex-wrap:wrap;}
    .xcx-detail-logo{width:80px;height:80px;}
    .xcx-op{width:100%;flex-direction:row;}
}

/* 纯 CSS 小程序码弹窗：checkbox + label，不依赖任何外部脚本 */
.xcx-qr-box{display:inline-block;}
.xcx-qr-input{display:none;}
.xcx-qr-open{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:6px;background:#f4f6fa;color:#576b95;font-size:14px;cursor:pointer;}
.xcx-qr-open:hover{background:#e6eaf2;}
.xcx-qr-mask{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);z-index:998;cursor:pointer;}
.xcx-qr-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;justify-content:center;align-items:center;padding:15px;}
.xcx-qr-panel{position:relative;background:var(--bg-color,#fff);border-radius:14px;padding:24px;text-align:center;max-width:280px;width:100%;}
.xcx-qr-panel img{display:block;width:200px;height:200px;max-width:100%;margin:0 auto 10px;border-radius:10px;}
.xcx-qr-panel b{display:block;font-size:16px;color:var(--text-color,#333);}
.xcx-qr-panel p{margin:6px 0 0;font-size:13px;color:var(--sub-text-color,#999);}
.xcx-qr-close{position:absolute;top:-14px;right:-14px;width:32px;height:32px;line-height:32px;border-radius:50%;background:var(--bg-color,#fff);box-shadow:0 2px 8px rgba(0,0,0,.18);color:#666;font-size:16px;cursor:pointer;}
.xcx-qr-input:checked~.xcx-qr-modal{display:flex;}
.xcx-qr-input:checked~.xcx-qr-mask{display:block;}

/* 内页正文各小节 */
.xcx-section{background:var(--bg-color,#fff);border-radius:8px;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,.06);overflow:hidden;}
.xcx-section-title{padding:13px 15px;border-bottom:1px solid #f0f0f0;font-size:16px;font-weight:600;color:var(--text-color,#333);}
.xcx-section-title i{color:#576b95;margin-right:4px;}
.xcx-section-body{padding:16px 18px;font-size:14px;line-height:1.9;color:var(--sub-text-color,#555);}
.xcx-section-body p{margin:0 0 8px;}
.xcx-section-body p:last-child{margin-bottom:0;}
.xcx-params{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none;}
.xcx-params li{display:flex;gap:10px;padding:9px 12px;background:#fafbfc;border-radius:6px;font-size:14px;}
.xcx-params li span{flex:none;color:#999;}
.xcx-params li b{font-weight:500;color:var(--text-color,#333);}
@media (max-width:576px){.xcx-params{grid-template-columns:minmax(0,1fr);}}

/* 上下篇 */
.xcx-prevnext{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;}
.xcx-prevnext a{flex:1 1 45%;padding:12px 15px;border:1px solid #f0f0f0;border-radius:6px;font-size:14px;color:var(--text-color,#444);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.xcx-prevnext a:hover{border-color:#576b95;color:#576b95;}
.xcx-prevnext span{flex:1 1 45%;padding:12px 15px;border:1px dashed #eee;border-radius:6px;font-size:14px;color:#bbb;}
@media (max-width:576px){.xcx-prevnext a,.xcx-prevnext span{flex:1 1 100%;}}