/*!
 * 落地页运行时样式（lp-render.css）
 * --------------------------------------------
 * 为 /r?lp=xxx (广告入口) 与 /lp/{slug} (公开访问) 的容器壳提供统一的 UI 样式。
 * 不再由 C# Controller 拼字符串内嵌 —— 走 CDN/浏览器缓存。
 *
 * 维护原则：
 *  1) 选择器风格沿用旧 inline-CSS 的短类名（.bp/.bc/.bb/.cq-widget 等），
 *     这样改造时不必一次推翻历史数据生成的 HTML 结构。
 *  2) 任何"按钮自定义样式 / 头图比例 / 选项 customStyle"等动态值
 *     都通过 inline style 由 lp-render.js 写入，不在此文件做覆盖。
 *  3) 移动端优先：max-width 720，移动端 100% 铺满。
 */

/* ============ 全局重置 + flex 通链 ============ */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;min-height:100vh;}
body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif;
    background:#f5f5f5;
    display:flex;
    flex-direction:column;
}

/* ============ 落地页外壳：max-width 720，移动端铺满 ============ */
.bp{
    max-width:720px;
    width:100%;
    margin:0 auto;
    background:#fff;
    min-height:100vh;
    padding-bottom:0;
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
}

/* 组件根容器 */
#lp-root{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    min-height:0;
}

/* ============ 通用组件容器 ============ */
.bc{position:relative;}
.bc img,.bc video{max-width:100%;display:block;border-radius:0;}

/* 标题/副标题/正文 */
.bt{padding:0 20px;word-break:break-word;}

/* ============ CTA 按钮 ============ */
.bb{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0 20px;
    padding:16px;
    border-radius:14px;
    font-size:17px;
    font-weight:600;
    color:#fff;
    text-decoration:none;
    box-shadow:0 4px 20px rgba(37,211,102,.3);
    transition:transform .15s,box-shadow .15s;
    transform-origin:center;
}
.bb:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(37,211,102,.4);}
.bb.fixed-bottom{
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:100;
    margin:0;border-radius:0;
}
@keyframes btnPulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.3);}50%{box-shadow:0 4px 32px rgba(37,211,102,.6);}}
.bb.pulse{animation:btnPulse 1.4s ease-in-out infinite;}

/* 分割线 / 卡片 / 间距 */
.bd{height:1px;background:#eee;margin:0 20px;}
.bk{margin:0 20px;padding:16px;border-radius:12px;display:flex;gap:12px;align-items:center;}
.bk .ci{font-size:28px;}
.bk .ct strong{display:block;font-size:14px;}
.bk .ct span{font-size:12px;color:#94a3b8;}
.bs{height:16px;}

/* ============ 表单字段 ============ */
.ff{margin:0 20px;padding:10px 0;}
.ff label{display:block;font-size:13px;font-weight:500;color:#1f2937;margin-bottom:6px;}
.ff label .fr{color:#ef4444;margin-left:2px;}
.ff input[type=text],
.ff input[type=email],
.ff input[type=tel]{
    width:100%;
    padding:10px 12px;
    border:1px solid #d1d5db;
    border-radius:8px;
    font-size:13px;
    background:#fff;
}
.ff input:focus{outline:none;border-color:#25D366;}
.ff .rg,.ff .cg{display:flex;flex-direction:column;gap:6px;}
.ff .rg label,.ff .cg label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:400;color:#374151;}
.ff .rg input,.ff .cg input{width:16px;height:16px;accent-color:#25D366;}

/* 提交按钮 */
.sba{padding:0 20px;margin-top:16px;margin-bottom:24px;}
.sba .bsb{
    width:100%;
    padding:14px;
    border:none;
    border-radius:12px;
    font-size:16px;
    font-weight:600;
    color:#fff;
    background:#25D366;
    cursor:pointer;
}
.sba .bsb:hover{opacity:.9;}

/* 提交成功 toast */
.toast-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;align-items:center;justify-content:center;}
.toast-overlay.show{display:flex;}
.toast-box{background:#fff;border-radius:12px;padding:32px 24px;text-align:center;max-width:320px;width:90%;}
.toast-box .tick{font-size:48px;margin-bottom:12px;}
.toast-box .msg{font-size:15px;color:#374151;line-height:1.6;}

/* ============ 问答组件（composite-consultation） ============ */
.bc.bc-stretch{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;}

.cq-widget{
    margin:12px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 4px 24px rgba(0,0,0,.1);
    overflow:hidden;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    min-height:0;
}

/* 头图轮播：尺寸由 inline 的 padding-top 撑（按 headerRatio 比例） */
.cq-widget .cq-hero{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#f0f0f0;
    flex-shrink:0;
    user-select:none;
}
.cq-widget .cq-hero-track{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}
.cq-widget .cq-hero-slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity .5s ease;
}
.cq-widget .cq-hero-slide.active{opacity:1;}
/* slide 模式（横向滑动） */
.cq-widget .cq-hero[data-mode="slide"] .cq-hero-track{display:flex;transition:transform .4s ease;}
.cq-widget .cq-hero[data-mode="slide"] .cq-hero-slide{position:relative;flex:0 0 100%;opacity:1;transition:none;}

/* 圆点指示器 */
.cq-widget .cq-dots{
    position:absolute;left:0;right:0;bottom:8px;
    display:flex;gap:6px;justify-content:center;
    z-index:2;
}
.cq-widget .cq-dot{
    width:7px;height:7px;border-radius:50%;
    background:rgba(255,255,255,.55);
    transition:.2s;cursor:pointer;
}
.cq-widget .cq-dot.active{background:#fff;width:18px;border-radius:4px;}

/* 左右切换箭头 */
.cq-widget .cq-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    width:32px;height:32px;border-radius:50%;
    background:rgba(0,0,0,.35);color:#fff;font-size:16px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;z-index:2;user-select:none;
}
.cq-widget .cq-arrow.left{left:8px;}
.cq-widget .cq-arrow.right{right:8px;}
.cq-widget .cq-arrow:hover{background:rgba(0,0,0,.55);}

/* 客服栏 */
.cq-widget .cq-cs{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;background:#fafafa;
    border-bottom:1px solid #f0f0f0;
    flex-shrink:0;
}
.cq-widget .cq-cs img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#e0e0e0;}
.cq-widget .cq-cs span{font-size:14px;font-weight:500;color:#333;}

/* 聊天主体 */
.cq-widget .cq-body{
    padding:14px;
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
}
.cq-widget .cq-greeting{
    background:#f0f0f0;
    padding:10px 14px;
    border-radius:12px 12px 12px 0;
    font-size:13px;color:#333;
    margin-bottom:14px;
    align-self:flex-start;
    max-width:80%;
    flex-shrink:0;
}
.cq-widget .cq-question{
    font-size:16px;font-weight:600;color:#000;
    text-align:center;margin-bottom:12px;
    flex-shrink:0;
}
.cq-widget .cq-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;}
.cq-widget .cq-opt{
    padding:10px 8px;
    border:1.5px solid #e5e7eb;
    border-radius:8px;
    text-align:center;font-size:13px;cursor:pointer;
    transition:.15s;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    background:#fff;
}
.cq-widget .cq-opt:hover,
.cq-widget .cq-opt:active{border-color:#25D366;background:#f0fdf4;}
.cq-widget .cq-opt.selected{
    /* 选中色由 inline --selColor 覆盖 */
    border-color:var(--selColor,#1DA851);
    background:var(--selColor,#25D366);
    color:#fff;
}

/* 提示气泡 */
.cq-widget .cq-msg{
    background:#e8f5e9;
    padding:8px 12px;
    border-radius:12px 12px 12px 0;
    font-size:12px;color:#2e7d32;
    margin-top:10px;display:inline-block;max-width:80%;
}

/* 输入栏（占位） */
.cq-widget .cq-footer{
    display:flex;align-items:center;gap:8px;
    padding:10px 14px;border-top:1px solid #f0f0f0;
    flex-shrink:0;
}
.cq-widget .cq-footer img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#e0e0e0;}
.cq-widget .cq-footer .fi{flex:1;padding:8px 12px;background:#f5f5f5;border-radius:16px;font-size:12px;color:#bbb;}

/* 结束语弹窗（替换原始 cq-toast；支持自定义 icon/title/desc/closeText/restartText） */
.cq-end-overlay{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,.5);z-index:200;
    align-items:center;justify-content:center;
}
.cq-end-overlay.show{display:flex;}
.cq-end-box{
    background:#fff;border-radius:16px;
    padding:32px 28px;text-align:center;
    max-width:340px;width:90%;
}
.cq-end-box .ic{font-size:56px;margin-bottom:14px;line-height:1;}
.cq-end-box .tt{font-size:18px;font-weight:700;color:#1a1a2e;margin-bottom:8px;}
.cq-end-box .ds{font-size:14px;color:#6b7280;line-height:1.6;margin-bottom:20px;white-space:pre-wrap;}
.cq-end-box .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.cq-end-box .acts button{
    flex:1;min-width:100px;
    padding:11px 18px;border:none;border-radius:10px;
    font-size:14px;font-weight:600;cursor:pointer;
}
.cq-end-box .acts .close{background:#25D366;color:#fff;}
.cq-end-box .acts .restart{background:#f3f4f6;color:#374151;}
.cq-end-box .acts .close:hover{opacity:.9;}
.cq-end-box .acts .restart:hover{background:#e5e7eb;}

/* ============ 🆕 P1：Section 容器（卡片区/两列布局） ============ */
.bsec{
    margin:8px 16px;
    overflow:hidden;
}
/* two-col 已通过 inline display:grid 控制，此处仅提供单列子组件间距兜底 */
.bsec > .bc{margin:0;}
.bsec-col{
    display:flex;
    flex-direction:column;
    min-width:0;       /* 防止内部 img 把列撑爆 */
}
.bsec-col > .bc{margin:0;}
/* 两列布局内的图片/视频自适应列宽 */
.bsec-cols img,
.bsec-cols video{max-width:100%;height:auto;}
/* 两列布局在 ≤480px 屏幕上自动堆叠为单列，避免移动端挤压 */
@media (max-width:480px){
    .bsec-cols{
        grid-template-columns:1fr !important;
    }
}