/**
 * PC 端公共适配样式（MPA 各页面共用 · 简单版）
 *
 * 仅在 min-width: 768px 时生效，不干扰手机端布局。
 *
 * 职责：
 *   1. 背景：两侧灰底
 *   2. #app 居中容器：max-width 480px + 浮起阴影
 *      - 策略 B（jdHunyin / complaint）直接用，14/16px 常规字号无缩放
 *      - 策略 A（aidestiny）虽然 html 级已经 zoom=0.64，width:100% max-width 限制仍然生效，
 *        但策略 A 页面如果要更严格的"手机框尺寸（pcTargetWidth）"，需要在自己的样式里
 *        单独用 @media 给根容器加 max-width: designWidth（如 750px），并把 popup/overlay
 *        用 --aid-zoom-inv 反向放大后锁 max-width。
 *   3. 全局 van-popup / van-overlay PC 端兜底居中 + 反向 zoom 补偿（:teleport="false" 时在
 *      html 内被 zoom 缩小）
 */

@media (min-width: 768px) {
  html {
    zoom: 1 !important;  /* 兜底（防止 adapt.js 时序错位的一瞬间全屏放大/缩小）*/
  }

  body {
    background: #f3f3f3;
    margin: 0;
    padding: 0;
    min-height: 100vh;
  }

  #app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow-x: hidden;
  }

  /* fixed 弹窗/遮罩/吐司：统一锁 480px 居中，防止拉成 PC 满屏白条 */
  .van-overlay,
  .van-popup,
  .van-toast {
    max-width: 480px !important;
    left: 50% !important;
    right: auto !important;
  }
  .van-overlay,
  .van-popup {
    transform: translateX(-50%);
  }

  /* ===== Vant Toast：在「480 手机框」内对齐对应位置 =====
     Toast 默认 teleports 到 body 上，position: fixed + 自带 left/top % 与 translate(-50%, -50%)
     策略 B（jdHunyin/complaint, html.zoom=1）：
       #app 在 max-width:480px，水平中心 = 屏幕 center(x=50%)，所以只要固定 max-width:480 + left:50%，
       再按 toast 的 top/bottom/middle 三种 class 分别还原 transform 即可。 */
  .van-toast--top {
    top: 10% !important;
    transform: translate(-50%, 0);
  }
  .van-toast--middle {
    top: 50% !important;
    transform: translate(-50%, -50%);
  }
  .van-toast--bottom {
    bottom: 10% !important;
    top: auto !important;
    transform: translate(-50%, 0);
  }

  /* ===== van-popup 按位置类型单独写 transform，避免覆盖 Vant 内部 slide-up/down 动画 ===== */
  .van-popup--bottom {
    bottom: 0 !important;
    top: auto !important;
    transform: translate(-50%, 100%);
  }
  .van-popup--bottom.van-popup--round {
    transform: translate(-50%, 0);
  }
  .van-popup--top {
    top: 0 !important;
    bottom: auto !important;
    transform: translate(-50%, -100%);
  }
  .van-popup--top.van-popup--round {
    transform: translate(-50%, 0);
  }
  .van-popup--center {
    top: 50% !important;
    transform: translate(-50%, -50%);
  }

  /* ===== Vant showDialog / van-dialog：PC 端锁宽度 + 居中 + 适配 480 手机框 =====
     showDialog 渲染结构：.van-overlay + .van-popup.van-dialog.van-popup--center（都挂 body）
     已有 .van-popup--center 规则会让它水平+垂直屏幕居中，这里限制宽度别撑满 */
  .van-dialog {
    width: 320px !important;           /* Vant 默认 320，保持移动端体验 */
    max-width: 85% !important;         /* 小屏兜底 */
    border-radius: 16px !important;
  }
  .van-dialog__title {
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  .van-dialog__message {
    font-size: 15px !important;
    line-height: 1.6 !important;
    white-space: pre-line !important;   /* 让 \n 换行生效（提交成功的多行信息） */
  }
  .van-dialog__confirm,
  .van-dialog__cancel {
    font-size: 16px !important;
  }
  .van-dialog__footer .van-dialog__confirm {
    color: #c0161d !important;           /* 与 jdHunyin 主题红色一致 */
    font-weight: 600 !important;
  }
  .van-overlay--dialog-mask {
    background: rgba(0,0,0,0.5) !important;
  }

  /* ===== 策略 A（aidestiny, html.zoom=0.64）单独补偿 Toast/Popup/Overlay 挂在 body 上的情况 =====
     html.zoom=0.64 时，position:fixed 元素也被整页缩，Toast/Popup 内容会偏小。
     这里用 --aid-zoom-inv 反向放大回真实物理像素；策略 B 下 --aid-zoom-inv=1 → 无任何影响。 */
  .van-toast,
  .van-popup,
  .van-overlay {
    zoom: var(--aid-zoom-inv, 1);
  }

  /* html.zoom < 1 时（策略 A 的 aidestiny），popup 如果在 #app 里（:teleport=false）
     会被 #app 继承 html.zoom 一起缩小，再用 --aid-zoom-inv 反向放大回真实物理像素。
     策略 B 下 --aid-zoom-inv=1 → 无影响 */
  #app .van-popup,
  #app .van-overlay {
    zoom: var(--aid-zoom-inv, 1);
  }
}