/* app-extra.css —— 新模板页（参考站风格）所需的组件样式：
   弹窗 / 提示条 / 播放器 / 自定义按钮，与参考主题（plugins.css + styles.css）共存 */

:root { --kp-gold: #d9730d; --kp-danger: #eb5757; --kp-success: #219653; --kp-border: #e9e9e7; }

/* ---------- 通用弹窗（common.js 使用） ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(15,15,15,.55); display: none; align-items: center; justify-content: center; z-index: 10000; padding: 16px; }
.modal-mask.show { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 460px; padding: 24px; max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal.wide { max-width: 980px; height: 88vh; display: flex; flex-direction: column; }
.modal h2 { font-size: 19px; margin-bottom: 14px; font-family: inherit; color: #1a274e; }
.modal .form-row { margin-bottom: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* 弹窗内按钮（兼容 common.js 生成的 btn-primary / btn-gold / btn-sm） */
.modal-mask button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; background: #f4f5f7; color: #37352f; border: 1px solid var(--kp-border); border-radius: 6px; padding: 8px 16px; font-size: 14px; font-family: inherit; transition: all .15s; white-space: nowrap; }
.modal-mask button:hover { background: #ececea; }
.modal-mask .btn-primary { background: #11af6d; border-color: #11af6d; color: #fff; }
.modal-mask .btn-primary:hover { background: #0e9a60; }
.modal-mask .btn-gold { background: var(--kp-gold); border-color: var(--kp-gold); color: #fff; }
.modal-mask .btn-gold:hover { background: #b85f08; }
.modal-mask .btn-sm { padding: 5px 12px; font-size: 13px; }
.modal-mask input, .modal-mask select { width: 100%; font: inherit; color: #37352f; border: 1px solid var(--kp-border); border-radius: 6px; padding: 9px 12px; outline: none; }
.modal-mask input:focus { border-color: #11af6d; box-shadow: 0 0 0 2px rgba(17,175,109,.15); }
.modal-mask .form-row label { display: block; font-size: 13px; color: #787774; margin-bottom: 4px; }

/* ---------- 弹窗内的查看器 ---------- */
.viewer-frame { flex: 1; width: 100%; border: 1px solid var(--kp-border); border-radius: 8px; background: #fbfbfa; min-height: 300px; }
.viewer-media { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #17182d; border-radius: 8px; padding: 16px; overflow: auto; }
.viewer-media video { max-width: 100%; max-height: 58vh; border-radius: 6px; background: #000; }
.viewer-media audio { width: 100%; max-width: 560px; }
.viewer-media div { color: #fff; }
.docx-render { flex: 1; overflow: auto; border: 1px solid var(--kp-border); border-radius: 8px; background: #fbfbfa; padding: 20px; min-height: 300px; }
.preview-box { flex: 1; overflow: auto; border: 1px solid var(--kp-border); border-radius: 8px; background: #fbfbfa; }
.preview-box iframe { width: 100%; height: 100%; border: 0; }
.pay-qr { text-align: center; padding: 12px 0; }
.pay-qr img { width: 240px; height: 240px; border: 1px solid var(--kp-border); border-radius: 8px; }
.sunpay-tip { background: #fdf6ec; border: 1px solid #f5ddb8; color: #8a5a00; border-radius: 8px; padding: 12px 14px; font-size: 13.5px; line-height: 1.7; }
.empty { text-align: center; color: #8a93a6; padding: 40px 0; }

/* ---------- 提示条 ---------- */
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #17182d; color: #fff; padding: 10px 22px; border-radius: 8px; font-size: 14px; z-index: 11000; display: none; max-width: 86vw; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.toast.err { background: var(--kp-danger); }
.toast.ok { background: var(--kp-success); }

/* ---------- 页面里用到的自绘按钮 / 小组件 ---------- */
.kp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; background: #f4f5f7; color: #37352f; border: 1px solid var(--kp-border); border-radius: 6px; padding: 8px 16px; font-size: 14px; font-family: inherit; transition: all .15s; white-space: nowrap; text-decoration: none; }
.kp-btn:hover { background: #ececea; color: #37352f; }
.kp-btn.primary { background: #11af6d; border-color: #11af6d; color: #fff; }
.kp-btn.primary:hover { background: #0e9a60; color: #fff; }
.kp-btn.gold { background: var(--kp-gold); border-color: var(--kp-gold); color: #fff; }
.kp-btn.gold:hover { background: #b85f08; color: #fff; }
.kp-btn.dark { background: #17182d; border-color: #17182d; color: #fff; }
.kp-btn.dark:hover { background: #2a2c47; color: #fff; }

/* 首页底部「进入内容库查看全部」：
   宽度在原基础上 +30%（实测 177.66px → 231px），高度与配色对齐 Hero 里的 Search 按钮（55px / #11af6d） */
.kp-btn.portal-all {
  min-width: 231px; height: 55px;
  background: #11af6d; border-color: #11af6d; color: #fff;
}
.kp-btn.portal-all:hover { background: #0e9a60; border-color: #0e9a60; color: #fff; }
.kp-btn.sm { padding: 5px 12px; font-size: 13px; }
.kp-btn.block { width: 100%; }

.price-text { color: #f39c12; font-weight: 700; }
.kp-muted { color: #8a93a6; font-size: 12.5px; }
.kp-chip { display: inline-block; background: #f4f6f8; border: 1px solid #e3e7ee; border-radius: 4px; padding: 1px 8px; font-size: 12px; color: #5a6b8c; }

/* 参考主题卡片上的小操作条 */
.item_group .kp-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.item_group .kp-actions .kp-btn { padding: 6px 14px; font-size: 13px; }

/* 购物车抽屉角标 */
.urip_list_cart { position: relative; }
.urip_product_count { position: absolute; top: -6px; right: -10px; background: var(--kp-danger); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 5px; line-height: 16px; display: inline-block; font-style: normal; }

/* 等级分类卡（首页） */
.lv_card { background: #fff; border-radius: 8px; box-shadow: 0 12px 35px rgba(40,44,72,.08); padding: 22px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; transition: all .25s; height: 100%; margin-bottom: 20px; }
.lv_card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(40,44,72,.14); }
.lv_card .lv_ico { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 12px; font-family: Jost, "Microsoft YaHei", sans-serif; }
.lv_card h4 { margin: 0 0 2px; font-size: 16px; color: #1a274e; }
.lv_card .lv_meta { font-size: 12.5px; color: #8a93a6; }
.lv_card .lv_price { margin-top: 6px; font-size: 13px; font-weight: 700; color: #11af6d; }

/* 详情页轮播/信息行 */
.kp-info-list { padding: 0; margin: 0; list-style: none; }
.kp-info-list li { display: flex; padding: 12px 0; border-bottom: 1px dashed #dadde8; font-size: 14px; }
.kp-info-list li:last-child { border-bottom: none; }
.kp-info-list li strong { flex: 1; font-weight: 600; color: #1a274e; }
.kp-info-list li span { color: #64707f; text-align: right; }

/* ---------- 首页 Hero：给底部留出空间 ----------
   下面那排分类卡用 .overlio-top 上浮 80px 压住横幅底部（原站模板效果），
   这里多留 110px 内边距，让「热门」标签行完整露出、不被卡片遮住。 */
.hero-banner.home-hero { padding-bottom: 110px; }


/* 首页「最新产品」筛选后无内容时的提示 */
.kp-latest-empty { padding: 40px 0 20px; color: #646e8a; font-size: 15px; }

/* ---------- 卡片封面右上角：文件类型徽标 ----------
   白底胶囊（图标 + 文案），与左上角 Trending 角标对称；
   pointer-events:none 纯装饰，不挡封面点击。 */
.ftype_item {
  position: absolute; top: 12px; right: 12px; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.92); color: #2c2c2a;
  font-size: 12px; line-height: 1; font-weight: 500;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
}
.ftype_item .fa { font-size: 12px; }
.item_group_thumb { position: relative; }

/* 购物车图标按钮加入成功后的状态：绿色实底 + 对勾，尺寸不变不挤换行 */
.link_cart.added { color: #fff !important; background: #11af6d !important; border-color: #11af6d !important; pointer-events: none; }

/* 侧栏折叠组：主题 CSS 未包含 Bootstrap collapse 显隐规则，补齐 */
.widget-boxed-body.collapse { display: none; }
.widget-boxed-body.collapse.show { display: block; }

/* 内容库列表视图：排序条右侧图标切换（网格/列表），列表模式下单列横排卡片 */
.kp-list-view .item_group { flex-direction: row; align-items: stretch; }
.kp-list-view .item_group_thumb { flex: 0 0 200px; }
.kp-list-view .item_group_thumb .item-figure img { height: 150px; object-fit: cover; }
.kp-list-view .item_group_caption { flex: 1 1 auto; padding: 18px 22px; }

/* ---------- 左下角浮动联系按钮（搬运自原站） ----------
   收起：80×80 白色圆钮、黄绿电话图标（与原站 #cee002 一致）；
   展开：白色卡片 = 微信二维码 + 扫码加好友入群 + 微信号 + 可拨号电话 */
.kp-float { position: fixed; left: 15px; bottom: 85px; z-index: 550; }
.kp-float-open {
  width: 80px; height: 80px; border-radius: 50%; border: none; cursor: pointer;
  background: #fff; color: #cee002; font-size: 50px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22); transition: transform .2s;
}
.kp-float-open:hover { transform: scale(1.06); }
.kp-float-open .fa { line-height: 78px; }
.kp-float-panel {
  position: relative; width: 210px; padding: 20px 16px 16px;
  background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); text-align: center;
}
.kp-float-close {
  position: absolute; top: 6px; right: 8px; border: none; background: none;
  color: #cee002; font-size: 16px; cursor: pointer; line-height: 1;
}
.kp-float-qr { display: block; width: 172px; margin: 0 auto 10px; }
.kp-float-title { font-size: 18px; font-weight: 700; color: #1a274e; margin-bottom: 4px; }
.kp-float-sub { font-size: 13px; color: #8a93a6; margin-bottom: 8px; }
.kp-float-tel a { font-size: 15px; color: #2d4379; text-decoration: none; }
.kp-float-tel a:hover { color: #11af6d; }
.kp-float-tel .fa { margin-right: 4px; }

/* ---------- 功能页换肤作用域（login / cart / my） ----------
   自研页 style.css 的蓝色 token 收口为品牌色：
   链接/次强调 → 紫 #5d47dd，主按钮 → 绿 #11af6d，深色底 → #17182d，价格橙保留；
   admin.html 不加 body.kp-ref-auth，保持原样。 */
.kp-ref-auth { --accent: #5d47dd; --accent-dark: #4936b0; }
.kp-ref-auth input:focus,
.kp-ref-auth select:focus,
.kp-ref-auth textarea:focus { border-color: #5d47dd; box-shadow: 0 0 0 2px rgba(93,71,221,.15); }

/* cart / my 页：主按钮统一品牌绿（去结算 / 去支付 / 查看等） */
.kp-ref-auth .btn-primary { background: #11af6d; border-color: #11af6d; }
.kp-ref-auth .btn-primary:hover { background: #0e9a60; border-color: #0e9a60; }

/* 危险按钮（购物车「移除」等）：参考站 styles.css 给了 .btn-danger 粉红底，
   与 style.css 的红字撞色几乎不可见 → 改为白底描边、悬停变实心红 */
.kp-ref-auth .btn-danger { background: #fff; border-color: #f0b9b9; color: #e05656; }
.kp-ref-auth .btn-danger:hover { background: #eb5757; border-color: #eb5757; color: #fff; }
.kp-ref-auth .btn-danger:active { background: #d94f4f; border-color: #d94f4f; color: #fff; }

/* my 页账号操作行（卡密 / 改密 / 退出） */
.kp-account-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }

/* my 页「会员内容」：按等级分组的组头与组间分割 */
.kp-mlv-head { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--bg-sub); border-bottom: 1px solid var(--kp-border); font-size: 13.5px; }
.kp-mlv-head.kp-mlv-sep { margin-top: 14px; border-top: 1px solid var(--kp-border); }
.kp-mlv-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kp-mlv-head b { font-weight: 500; }
.kp-mlv-head .chip { margin-left: auto; background: #fff; }

/* 登录页：白卡 + 品牌绿大按钮 */
.kp-ref-auth .auth-wrap { min-height: 0; background: transparent; padding: 70px 20px 90px; }
.kp-ref-auth .auth-card { box-shadow: 0 12px 40px rgba(23,24,45,.10); }
.kp-ref-auth .auth-card .btn-primary { background: #11af6d; border-color: #11af6d; }
.kp-ref-auth .auth-card .btn-primary:hover { background: #0e9a60; border-color: #0e9a60; }
.kp-ref-auth .auth-card input:focus { border-color: #11af6d; box-shadow: 0 0 0 2px rgba(17,175,109,.15); }