/* ==========================================================================
   AiKa SUP · layer 弹层统一皮肤  sup-dialog.css
   --------------------------------------------------------------------------
   站点弹窗三套并存：layer（701 处，主力）、Bootstrap modal（23 处）、
   原生 alert/confirm。此文件把 layer 的「外观」统一到设计系统：
   白卡 / 14px 圆角 / 三级柔光阴影 / 毛玻璃遮罩 / 深色主按钮 / 中性次按钮。
   只改外观，不动任何行为与 DOM 结构。
   ========================================================================== */
/* ---------- 1. 遮罩：毛玻璃 + 中性 ---------- */
:root .layui-layer-shade{
  background-color: rgba(0,0,0,.28) !important;
  -webkit-backdrop-filter: saturate(140%) blur(3px) !important;
  backdrop-filter: saturate(140%) blur(3px) !important;
  opacity: 1 !important;
}/* ---------- 2. 弹层外框 ---------- */
:root .layui-layer{
  border-radius: var(--s-r) !important;
  border: none !important;
  box-shadow: var(--s-sh-3), 0 0 0 1px var(--s-line-2) !important;
  background: var(--s-surface) !important;
  overflow: hidden !important;
  -webkit-font-smoothing: antialiased;
  font-family: var(--s-font) !important;
}/* ---------- 3. 标题栏 ---------- */
:root .layui-layer-title{
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 46px 0 20px !important;
  background: var(--s-surface) !important;
  border-bottom: 1px solid var(--s-line-2) !important;
  color: var(--s-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.1px;
  border-radius: var(--s-r) var(--s-r) 0 0 !important;
}/* ---------- 4. 关闭按钮 ---------- */
:root .layui-layer-setwin{
  top: 0 !important;
  right: 6px !important;
  height: 50px !important;
}:root .layui-layer-setwin a{
  width: 32px !important;
  height: 32px !important;
  margin-top: 9px !important;
  border-radius: var(--s-r-xs) !important;
  transition: background var(--s-t-fast);
}:root .layui-layer-setwin a:hover{ background: var(--s-hover) !important; }:root .layui-layer-setwin .layui-layer-close1{
  background: none !important;
  position: relative;
}:root .layui-layer-setwin .layui-layer-close1::before{
  content: "\f00d";
  font-family: FontAwesome !important;
  font-size: 15px;
  color: var(--s-text-3-ink);
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
}:root .layui-layer-setwin .layui-layer-close1:hover::before{ color: var(--s-text); }/* ---------- 5. 内容区 ---------- */
:root .layui-layer-content{
  color: var(--s-text-2) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  padding: 22px !important;
}/* layer.msg 是单行提示，内容区自带上下的排版，不要再加 padding */
:root .layui-layer-msg .layui-layer-content{
  padding: 14px 20px !important;
  color: var(--s-text) !important;
}:root .layui-layer-msg{
  border-radius: var(--s-r) !important;
  min-width: 0 !important;
  max-width: 420px !important;
  box-shadow: var(--s-sh-3), 0 0 0 1px var(--s-line-2) !important;
}:root .layui-layer-msg .layui-layer-content i{ font-size: 22px !important; }/* 图标：layer 自带的 32px 位图换成 FontAwesome 线条 */
:root .layui-layer-ico{
  width: 26px !important;
  height: 26px !important;
  background: none !important;
  position: relative;
  display: inline-block;
  vertical-align: -5px;
  margin-right: 10px;
}:root .layui-layer-ico::before{
  font-family: FontAwesome !important;
  font-size: 22px;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
}:root .layui-layer-ico1::before{ content: "\f058"; color: var(--s-accent-ink); }:root .layui-layer-ico2::before{ content: "\f057"; color: var(--s-danger-ink); }:root .layui-layer-ico3::before{ content: "\f06a"; color: var(--s-warning-ink); }:root .layui-layer-ico4::before{ content: "\f29d"; color: var(--s-danger-ink); }:root .layui-layer-ico5::before{ content: "\f05a"; color: var(--s-text-3-ink); }:root .layui-layer-ico6::before{ content: "\f110"; color: var(--s-accent-ink); }:root .layui-layer-ico7::before{ content: "\f071"; color: var(--s-warning-ink); }/* ---------- 6. 按钮区 ---------- */
:root .layui-layer-btn{
  padding: 0 18px 18px !important;
  text-align: right !important;
  border-top: none !important;
  background: var(--s-surface) !important;
}:root .layui-layer-btn a{
  height: 36px !important;
  line-height: 34px !important;
  padding: 0 20px !important;
  border-radius: var(--s-r-s) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 0 0 10px !important;
  transition: background var(--s-t-fast), border-color var(--s-t-fast), color var(--s-t-fast) !important;
  vertical-align: middle;
}/* 主按钮（layer-btn0 = 第一个/确定） */
:root .layui-layer-btn .layui-layer-btn0, :root .layui-layer-btn a:first-child{
  background: var(--s-fill) !important;
  border: 1px solid var(--s-fill) !important;
  color: var(--s-fill-t) !important;
}:root .layui-layer-btn .layui-layer-btn0:hover, :root .layui-layer-btn a:first-child:hover{
  background: var(--s-fill-h) !important;
  border-color: var(--s-fill-h) !important;
  color: var(--s-fill-t) !important;
}/* 次按钮 */
:root .layui-layer-btn .layui-layer-btn1{
  background: var(--s-surface) !important;
  border: 1px solid var(--s-line-3) !important;
  color: var(--s-text-2) !important;
}:root .layui-layer-btn .layui-layer-btn1:hover{
  background: var(--s-hover) !important;
  border-color: var(--s-line-3) !important;
  color: var(--s-text) !important;
}/* 禁用的取消按钮（layer 用 .layui-layer-btn-disabled） */
:root .layui-layer-btn .layui-layer-btn-disabled, :root .layui-layer-btn a.layui-layer-btn-disabled{
  background: var(--s-surface-2) !important;
  border: 1px solid var(--s-line) !important;
  color: var(--s-text-3-ink) !important;
  cursor: not-allowed !important;
}/* ---------- 7. iframe 型弹层（layer.open type:2） ---------- */
:root .layui-layer-iframe iframe{
  border-radius: 0 !important;
  display: block;
}/* ---------- 8. 加载层 ---------- */
:root .layui-layer-loading{
  border-radius: var(--s-r) !important;
  box-shadow: var(--s-sh-3), 0 0 0 1px var(--s-line-2) !important;
  background: var(--s-surface) !important;
}:root .layui-layer-loading .layui-layer-content{ padding: 14px !important; }:root .layui-layer-loading .layui-layer-loading1, :root .layui-layer-loading .layui-layer-loading2{
  background-image: none !important;
  position: relative;
  width: 40px !important;
  height: 40px !important;
}:root .layui-layer-loading .layui-layer-loading1::after, :root .layui-layer-loading .layui-layer-loading2::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--s-accent-line);
  border-top-color: var(--s-accent);
  border-radius: 50%;
  animation: s-layer-spin .7s linear infinite;
}:root .layui-layer-loading .layui-layer-loading0{
  background-image: none !important;
  position: relative;
  width: 40px !important;
  height: 40px !important;
}:root .layui-layer-loading .layui-layer-loading0::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--s-text-3);
  border-top-color: transparent;
  border-radius: 50%;
  animation: s-layer-spin .7s linear infinite;
}
@keyframes s-layer-spin{ to{ transform: rotate(360deg) } }/* ---------- 9. 右下角提示层 ---------- */
:root .layui-layer-tips .layui-layer-content{
  background: var(--s-text) !important;
  color: var(--s-fill-t) !important;
  border-radius: var(--s-r-xs) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}:root .layui-layer-tips i.layui-layer-TipsG{
  border-color: transparent !important;
  border-top-color: var(--s-text) !important;
}

/* ---------- 10. 手机端收敛（宽度 / 高度 / 滚动 / 按钮，全类型统一） ---------- */
/* 站点里 layer 的 area 有大量写死的 px（380 / 420 / 620 / 860 …），
   在手机上会横向溢出、离屏、按钮被裁。这里不去逐个改调用点，
   而是在层上做「左右固定边距 + 自适应宽度 + 内容可滚」的统一收敛，
   !important 可以盖掉 layer 写在内联 style 上的 width / left。 */
@media (max-width: 767px){
  /* 10.1 任何 layer 都不得超出视口 */
  :root .layui-layer{
    max-width: calc(100vw - 20px) !important;
    border-radius: 16px !important;
  }
  /* 10.2 页面型 / iframe 型 / 对话框型：宽度改成「左右各 10px 自适应」 */
  :root .layui-layer-page,
  :root .layui-layer-iframe,
  :root .layui-layer-dialog{
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* 10.3 高度：外框不超过视口，内部用 flex 让内容区自己滚
         （只给内容设 max-height 不够：layer 会把整个层撑出屏幕，底部按钮被切掉） */
  :root .layui-layer-page,
  :root .layui-layer-iframe,
  :root .layui-layer-dialog{
    display: flex !important;
    flex-direction: column;
    max-height: calc(100vh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
  :root .layui-layer-page > .layui-layer-title,
  :root .layui-layer-iframe > .layui-layer-title,
  :root .layui-layer-dialog > .layui-layer-title,
  :root .layui-layer-page > .layui-layer-btn,
  :root .layui-layer-iframe > .layui-layer-btn,
  :root .layui-layer-dialog > .layui-layer-btn{ flex: 0 0 auto; }
  :root .layui-layer-page > .layui-layer-content,
  :root .layui-layer-iframe > .layui-layer-content,
  :root .layui-layer-dialog > .layui-layer-content{
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* 对话框（alert / confirm / prompt）高度也交给内容决定，避免文字被按钮压住 */
  :root .layui-layer-dialog{ height: auto !important; }
  :root .layui-layer-iframe iframe{ width: 100% !important; height: 100% !important; display: block; }
  /* 10.4 标题栏与内容内边距 */
  :root .layui-layer-title{
    height: 46px !important;
    line-height: 46px !important;
    font-size: 14.5px !important;
    padding: 0 42px 0 16px !important;
  }
  :root .layui-layer-setwin{ height: 46px !important; }
  :root .layui-layer-setwin a{ margin-top: 7px !important; }
  :root .layui-layer-content{ padding: 18px 16px !important; font-size: 14px !important; }
  /* 10.5 按钮：整行平分、拇指点得到 */
  :root .layui-layer-btn{
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    text-align: center !important;
  }
  :root .layui-layer-btn a{
    flex: 1 1 0;
    min-width: 0;
    height: 40px !important;
    line-height: 38px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    text-align: center;
  }
  /* 10.6 内容里的图片 / 表单 / 表格 */
  :root .layui-layer .layui-layer-content img{ max-width: 100% !important; height: auto !important; }
  :root .layui-layer .layui-layer-content iframe{ max-width: 100% !important; }
  :root .layui-layer .layui-layer-content pre,
  :root .layui-layer .layui-layer-content table{ max-width: 100%; }
  :root .layui-layer .layui-layer-content input,
  :root .layui-layer .layui-layer-content textarea,
  :root .layui-layer .layui-layer-content select{
    font-size: 16px !important; /* 防 iOS 聚焦时整页放大 */
    max-width: 100%;
  }
  /* 10.7 轻提示 / 气泡：保持自然宽，只做边界收敛 */
  :root .layui-layer-msg{ max-width: 86vw !important; }
  :root .layui-layer-tips{ max-width: 80vw !important; }
  /* 10.8 另一套弹窗：Bootstrap modal */
  .modal-dialog{ width: auto !important; margin: 10px !important; }
  .modal-content{ border-radius: 14px !important; }
  .modal-body{
    max-height: calc(100vh - 190px);
    max-height: calc(100dvh - 190px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-footer{ display: flex; gap: 8px; }
  .modal-footer .btn{ flex: 1 1 0; margin: 0 !important; }
}


/* ---------- 11. 无显式标题的提示弹窗（layer.alert(msg)） ---------- */
/* layer 对未传 title 的 alert 会自行填入默认标题「信息」，于是「支付商户信息异常102」
   这种重要错误被塞进一个叫「信息」的通用弹窗里。CSS 无法按文本精确匹配，
   这里用 :has() 判定标题为默认文案后隐藏标题条，让正文成为主角；
   不支持 :has() 的浏览器退回原样（仅外观差异，不影响功能）。 */
:root .layui-layer:has(> .layui-layer-title:not([style*="display: none"])) .layui-layer-content{
  padding: 24px 24px 6px !important;
  line-height: 1.72 !important;
  word-break: break-word;
}
/* 正文里的金额/单号等强调 */
:root .layui-layer .layui-layer-content b,
:root .layui-layer .layui-layer-content strong{
  color: var(--s-accent-ink); font-weight: 600;
}