/* 网页版专有样式（_convert_wxss.py 不会覆盖这个文件）
   职责：① rpx 换算基准 ② 微信私有标签→标准 HTML 的 reset ③ 网页专有组件 */

:root {
  /* 750rpx = 满屏宽 ⇒ 1rpx = 100vw / 750。
     所有由 _convert_wxss.py 转出来的 calc(NN * var(--u)) 都靠这个变量。 */
  --u: calc(100vw / 750);
  --c-main: #3d6deb;
  --c-bg: #f4f6fb;
  --c-text: #1c2333;
  --c-sub: #5c6780;
  --c-mute: #98a1b3;
  --c-line: #eceff5;
}

* { -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", sans-serif;
  font-size: calc(28 * var(--u));
  -webkit-font-smoothing: antialiased;
  /* 禁掉 iOS 上中文字体被加粗、以及双击缩放导致的布局抖动 */
  -webkit-text-size-adjust: 100%;
}

/* 竖屏优先：手机端锁定最大宽度，PC 上打开也不会被拉成一条（投放落地页常见） */
body { max-width: 750px; margin: 0 auto; }

img { display: block; max-width: 100%; }

/* 微信 <button> 的默认样式在网页上很脏，统一 reset 成普通元素 */
button.btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: none;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  /* 🔴🔴 这里**不能**写 `background: transparent`：
     `button.btn` 特异性 (0,1,1) 高于 `.btn--primary` (0,1,0)，
     会把全站主按钮的渐变背景盖成透明 ⇒ 白字无底，按钮像消失了。
     （踩过：tool.html 的「开始处理」、result 的「保存电子照」都中招。）
     兜底见下面那条 :not() 规则。*/
}
/* 没有变体类的 .btn 才兜底透明（目前没有这种用法，防以后新增） */
button.btn:not(.btn--primary):not(.btn--ghost):not(.btn--gold):not(.btn--disabled) {
  background: transparent;
}
button.btn::after { display: none !important; }
button.btn:disabled, button.btn.btn--disabled { pointer-events: none; }

/* 微信 <input> 默认有边框和内边距，清掉 */
input.inp, input.finp, input.search-input, textarea {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  color: inherit;
  min-width: 0;
}
input::placeholder, textarea::placeholder { color: #a8b0c0; }

/* select 也统一一下（省市区选择器） */
select { appearance: none; -webkit-appearance: none; border: 0; outline: none; background: transparent; font-family: inherit; font-size: inherit; color: inherit; }

/* ============================================================
 * 网页导航栏（顶替小程序自带的 navigationBar）
 * ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 90;
  height: calc(88 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(24 * var(--u));
  background: var(--c-main);
  color: #fff;
  font-size: calc(32 * var(--u));
  font-weight: 600;
  box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(61, 109, 235, 0.18);
}
.navbar--plain { background: var(--c-bg); color: var(--c-text); box-shadow: none; }
.navbar-back {
  width: calc(60 * var(--u));
  height: 100%;
  display: flex;
  align-items: center;
  font-size: calc(44 * var(--u));
  color: inherit;
  cursor: pointer;
  margin-left: calc(-12 * var(--u));
  flex-shrink: 0;
}
.navbar-title { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbar-title + .navbar-back { display: none; }

/* ============================================================
 * Toast（顶替 wx.showToast）
 * ============================================================ */
.toast-wrap {
  position: fixed;
  left: 0; right: 0; top: 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * var(--u));
  z-index: 9999;
  pointer-events: none;
}
.toast {
  max-width: 76%;
  padding: calc(20 * var(--u)) calc(32 * var(--u));
  background: rgba(0, 0, 0, 0.76);
  color: #fff;
  font-size: calc(26 * var(--u));
  line-height: 1.5;
  border-radius: calc(16 * var(--u));
  text-align: center;
  animation: toast-in 0.18s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(calc(10 * var(--u))); } to { opacity: 1; transform: none; } }

/* ============================================================
 * Modal（顶替 wx.showModal）
 * ============================================================ */
.modal-mask {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000; padding: calc(60 * var(--u));
}
.modal {
  width: 100%;
  max-width: calc(600 * var(--u));
  background: #fff;
  border-radius: calc(24 * var(--u));
  padding: calc(44 * var(--u)) calc(36 * var(--u)) calc(28 * var(--u));
}
.modal-title { font-size: calc(32 * var(--u)); font-weight: 700; text-align: center; }
.modal-body { margin-top: calc(24 * var(--u)); font-size: calc(27 * var(--u)); color: var(--c-sub); line-height: 1.6; text-align: center; }
.modal-btns { margin-top: calc(36 * var(--u)); display: flex; gap: calc(20 * var(--u)); }
.modal-btns .btn { flex: 1; border: calc(2 * var(--u)) solid var(--c-line); background: #f4f6fb; color: var(--c-sub); }
.modal-btns .btn--ok { border: 0; background: var(--c-main); color: #fff; }

/* ============================================================
 * 轮播（顶替 <swiper>，仅首页 banner 用）
 * ============================================================ */
.swiper { position: relative; overflow: hidden; }
.swiper-track { display: flex; transition: transform 0.4s ease; height: 100%; }
.swiper-item { flex: 0 0 100%; height: 100%; }
.swiper-dots { position: absolute; left: 0; right: 0; bottom: calc(12 * var(--u)); display: flex; justify-content: center; gap: calc(8 * var(--u)); }
.swiper-dot { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.swiper-dot--on { background: #fff; }

/* ============================================================
 * 底部 tabBar（顶替小程序 custom-tab-bar，常驻）
 * ============================================================ */
.web-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(100 * var(--u));
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  display: flex;
  border-top: calc(1 * var(--u)) solid var(--c-line);
  z-index: 100;
  max-width: 750px;
  margin: 0 auto;
}
.web-tabbar .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--c-mute); cursor: pointer;
}
.web-tabbar .tab--on { color: var(--c-main); }
.web-tabbar .tab-ico {
  width: calc(48 * var(--u)); height: calc(48 * var(--u)); margin-bottom: calc(6 * var(--u));
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.web-tabbar .tab-txt { font-size: calc(22 * var(--u)); line-height: 1.2; }
/* tab 上的小圆点（提示有新内容时用） */
.tab-badge {
  position: absolute; top: calc(10 * var(--u)); left: 50%;
  margin-left: calc(6 * var(--u));
  width: calc(14 * var(--u)); height: calc(14 * var(--u));
  border-radius: 50%; background: #ff5a3c;
}

/* tabBar 占位：页面 padding-bottom 靠它让开 */
.has-tabbar { padding-bottom: calc(100 * var(--u)); }

/* ============================================================
 * 文件选择（顶替 wx.chooseMedia）
 * 用 <input type="file"> 藏在按钮后面，点按钮触发
 * ============================================================ */
.file-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ============================================================
 * 页脚主体信息
 * 🔴 微信 H5 支付审核硬项：ICP 备案号 + 公司实体信息必须**在页面上看得见**
 *    （见 assets/mini.js 的 renderFooter，说明写在那边）
 * ============================================================ */
.has-footer { padding-bottom: calc(210 * var(--u)); }
.has-footer.has-tabbar { padding-bottom: calc(290 * var(--u)); }
.site-footer {
  padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u));
  text-align: center;
  color: #9aa3b2;
  font-size: calc(21 * var(--u));
  line-height: 1.9;
}
.site-footer .ft-row { word-break: break-all; }
.site-footer .ft-links {
  margin-top: calc(10 * var(--u));
  display: flex; justify-content: center; gap: calc(28 * var(--u));
}
.site-footer a { color: #9aa3b2; text-decoration: none; }
.site-footer .ft-icp { text-decoration: underline; }

/* ============================================================
 * 微信「虚拟标签」在网页里的等价处理
 * ============================================================
 * 这些标签浏览器不认识，不处理的话：
 *   · <block>      默认 inline，会把内部块级元素包成一个 inline 盒子 ⇒ 布局塌陷
 *   · <scroll-view> 默认 inline，横向滚动条不出，内容被裁
 * display:contents 让 <block> **自己不生成盒子**，子元素直接参与父级布局，
 * 与小程序里「block 只是个语法容器」的语义完全一致。
 */
block { display: contents; }
scroll-view { display: block; overflow: auto; -webkit-overflow-scrolling: touch; }
scroll-view[scroll-x] { overflow-y: hidden; white-space: nowrap; }

/* ============================================================
 * PC / 平板（≥768px）适配
 * ------------------------------------------------------------
 * 🔴 为什么必须有这段：
 *    全站所有间距/字号都是 `calc(NN * var(--u))`，而 `--u` 原本是
 *    `calc(100vw / 750)`（按视口宽算）。手机上 375px 视口 ⇒ --u=0.5px，
 *    一切正常；但 PC 上 1920 视口 ⇒ --u=2.56px ⇒ 设计稿里 28rpx 的字
 *    被渲染成 72px，整体放大 5 倍、全部溢出。**PC 打开错乱的唯一真因
 *    就是这个变量，不是布局。**
 *
 * 🔴 为什么改一个文件就够：
 *    `--u` 定义在 `:root` 上，17 个页面全部共用 ⇒ 这里锁死它，
 *    17 页同时获得 PC 适配，不必逐页改。
 *
 * 🔴 为什么手机端零影响：
 *    整段包在 `@media (min-width: 768px)` 里，视口 < 768px 时
 *    浏览器完全不解析这些规则。
 *
 * 🔴 tabbar / navbar 不用改：
 *    `.web-tabbar` 本来就是 `fixed + left:0; right:0 + max-width:750px
 *    + margin:0 auto`（fixed 元素左右都置 0 时 margin auto 会平分
 *    剩余空间 ⇒ 自动居中）；`.navbar` 是 sticky，在已限宽居中的 body
 *    里 ⇒ 跟着容器走。PC 上两者本就居中。
 *
 * 🔴 这个文件 `_convert_wxss.py` 不覆盖（见文件头注释），可安全手改；
 *    其余 assets/*.css 是生成物，不要手改。
 * ============================================================ */
@media (min-width: 768px) {
  /* ① 锁死 rpx 换算基准：回到设计稿的 750 宽 ⇒ 1rpx = 0.5px，永不变 */
  :root { --u: 0.5px; }
  /* ② PC 站点容器宽（与 .web-tabbar 原有的 750px 一致） */
  :root { --app-w: 750px; }

  /* ③ 容器外铺浅灰蓝，让中间的白底站点"浮"出来有边界感 */
  html { background: #e8ecf4; }

  body {
    max-width: var(--app-w);
    min-height: 100vh;                       /* 内容少时也铺满，背景色不断 */
    background: var(--c-bg);
    box-shadow: 0 0 calc(24 * var(--u)) rgba(28, 35, 51, 0.10);
  }

  /* ④ Toast 原本铺满视口，PC 上会飘到屏幕正中而不是站点里 ⇒ 限制进容器 */
  .toast-wrap {
    left: 0; right: 0; margin: 0 auto;
    max-width: var(--app-w);
  }

  /* ⑤ 鼠标环境：可点元素统一手型（手机没这问题，PC 需要） */
  .tab, .spec-card, .quick-card, .color-item, .banner-item { cursor: pointer; }

  /* ⑥ 弹窗里的选项一类的窄元素在 PC 上别被拉太宽 */
  .modal { max-width: calc(600 * var(--u)); }

  /* ⑦ 🔴 fixed 全宽元素必须收进容器
     `.footer`(app.css:52) 和 `.current-tip`(p-index.css:183) 都是
     `position:fixed; left:0; right:0` 且**没写 max-width** ——
     手机上视口就是容器所以看不出来，PC 上它们会横跨整个屏幕
     （实测越界量正好等于 body 的居中偏移 345/585px），而中间内容
     只有 750px ⇒ 按钮区和那行蓝字跑到屏幕两头去了。
     `.web-tabbar` 当初写了 max-width:750px 所以它没事，这两个漏了。 */
  .footer, .current-tip {
    max-width: var(--app-w);
    margin: 0 auto;
    /* `.footer` 自带左右各 calc(32 * var(--u))=16px padding，
       不设 border-box 的话 max-width 只约束内容盒 ⇒ 实际宽 782px，仍溢出 16px */
    box-sizing: border-box;
  }
}