/* ==========================================================================
   全站浮层提示（$.showfloatdiv / qireobj.js）· 深色皮肤
   --------------------------------------------------------------------------
   为什么单独一个文件：
   default_pc/css/style.css 里那套老 qirebox 皮肤是给浅色页面准备的——
   .ui-dialog-cnt{background:#fff}，但本站 body 的文字是浅色 #e9ecf3，
   叠起来就是白底白字；而且 close.gif、images/icons/*.png、transparent.png
   在 siyecao 模板里全部缺失（404），图标和关闭按钮都是空白，最终只剩一个白方块。

   这里用 #qirebox 作用域整体重绘，不依赖任何图片，也不会外溢到作用域外。
   引入位置：public/head.html 顶部（全站共用）。
   ========================================================================== */

/* ---------- 遮罩 ---------- */
#qirebox_overlay.qirebox-overlayBG{
  background:rgba(6,7,11,.62);
  opacity:1;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}

/* ---------- 容器：屏幕居中（原样式是 top:300px + margin-left:-100px 的硬偏移） ---------- */
#qirebox{
  left:50%;
  top:50%;
  /* 必须显式声明：@keyframes 只在动画期间提供 transform，
     动画结束后会回落到 none，弹窗就从中心点向右下偏移。 */
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  background:none;
  border-radius:0;
  box-shadow:none;
  text-align:left;
  max-width:calc(100vw - 32px);
  z-index:10000000;
  -webkit-animation:hwDlgIn .22s cubic-bezier(.2,.9,.3,1.15);
  animation:hwDlgIn .22s cubic-bezier(.2,.9,.3,1.15);
}
@-webkit-keyframes hwDlgIn{
  from{-webkit-transform:translate(-50%,-50%) scale(.955)}
  to{-webkit-transform:translate(-50%,-50%) scale(1)}
}
@keyframes hwDlgIn{
  from{transform:translate(-50%,-50%) scale(.955)}
  to{transform:translate(-50%,-50%) scale(1)}
}

/* 老组件用 iframe 挡 select 穿透，现代浏览器不需要，直接隐藏 */
#qirebox .ui-iframe{display:none}

/* 组件用的是 <table> 骨架，先清掉表格默认表现 */
#qirebox table.ui-dialog-box{
  border:0;
  border-collapse:collapse;
  border-spacing:0;
  background:none;
  width:auto;
  max-width:100%;
}
#qirebox table.ui-dialog-box>tbody>tr>td{
  padding:0;
  border:0;
  background:none;
}

/* ---------- 卡片 ---------- */
#qirebox .ui-dialog{
  position:relative;
  box-sizing:border-box;
  min-width:268px;
  max-width:400px;
  padding:0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:#191c25;
  box-shadow:0 26px 64px -18px rgba(0,0,0,.9),0 2px 12px rgba(0,0,0,.45);
  overflow:hidden;
}

#qirebox .ui-dialog-cnt{
  padding:0;
  background:transparent;
  border-radius:0;
  overflow:visible;
}

/* ---------- 正文 ---------- */
#qirebox .ui-dialog-tip{
  height:auto;
  min-height:0;
  line-height:1.62;
  margin:0;
  padding:19px 46px 19px 54px;
  font-size:14.5px;
  font-weight:400;
  color:#e8edf7;
  letter-spacing:.2px;
  background:none;
  background-image:none;
  position:relative;
  word-break:break-word;
}
#qirebox .ui-dialog-tip #xtip{display:inline}

/* 状态图标：纯 CSS 画的圆底 + 符号，替代缺失的 icons/*.png */
#qirebox .ui-dialog-tip::before{
  content:"";
  position:absolute;
  left:18px;
  top:50%;
  width:22px;
  height:22px;
  margin-top:-11px;
  box-sizing:border-box;
  border-radius:50%;
  background:rgba(255,176,32,.14);
  border:1px solid rgba(255,176,32,.45);
}
#qirebox .ui-dialog-tip::after{
  content:"!";
  position:absolute;
  left:18px;
  top:50%;
  width:22px;
  margin-top:-11px;
  text-align:center;
  line-height:22px;
  font-size:12.5px;
  font-weight:700;
  font-style:normal;
  color:#ffb62e;
}
#qirebox .ui-dialog-tip.succ::before{
  background:rgba(52,211,153,.14);
  border-color:rgba(52,211,153,.45);
}
#qirebox .ui-dialog-tip.succ::after{content:"\2713";color:#34d399;font-size:12px}
#qirebox .ui-dialog-tip.error::before,
#qirebox .ui-dialog-tip.cross::before{
  background:rgba(248,113,113,.14);
  border-color:rgba(248,113,113,.45);
}
#qirebox .ui-dialog-tip.error::after,
#qirebox .ui-dialog-tip.cross::after{content:"\00d7";color:#f87171;font-size:15px;line-height:20px}
#qirebox .ui-dialog-tip.loading::before{
  background:none;
  border:2px solid rgba(255,255,255,.22);
  border-top-color:#b98cff;
  -webkit-animation:hwDlgSpin .75s linear infinite;
  animation:hwDlgSpin .75s linear infinite;
}
#qirebox .ui-dialog-tip.loading::after{content:none}
@-webkit-keyframes hwDlgSpin{to{-webkit-transform:rotate(360deg)}}
@keyframes hwDlgSpin{to{transform:rotate(360deg)}}

/* ---------- 右上角关闭：CSS 画的叉（原 close.gif 缺失） ---------- */
#qirebox .ui-dialog-close{
  position:absolute;
  top:8px;
  right:8px;
  width:26px;
  height:26px;
  overflow:visible;
}
#qirebox .ui-dialog-close .close{
  display:block;
  width:26px;
  height:26px;
  position:relative;
  overflow:visible;
  text-indent:0;
  font-size:0;
  line-height:0;
  border-radius:8px;
  background:none;
  opacity:1;
  cursor:pointer;
  -webkit-transition:background .16s;
  transition:background .16s;
}
#qirebox .ui-dialog-close .close::before,
#qirebox .ui-dialog-close .close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:1.6px;
  border-radius:2px;
  background:#8b93a7;
  -webkit-transition:background .16s;
  transition:background .16s;
}
#qirebox .ui-dialog-close .close::before{transform:translate(-50%,-50%) rotate(45deg)}
#qirebox .ui-dialog-close .close::after{transform:translate(-50%,-50%) rotate(-45deg)}
#qirebox .ui-dialog-close .close:hover{background:rgba(255,255,255,.08)}
#qirebox .ui-dialog-close .close:hover::before,
#qirebox .ui-dialog-close .close:hover::after{background:#fff}

/* ---------- 确认型按钮：确定 / 取消 ---------- */
#qirebox .ui-dialog-todo{
  height:auto;
  padding:0 16px 16px;
  overflow:visible;
  text-align:right;
  border-top:0;
  background:none;
}
#qirebox .ui-dialog-todo .ui-link,
#qirebox .ui-dialog-todo .ui-link-small{
  display:inline-block;
  float:none;
  height:34px;
  line-height:32px;
  padding:0 18px;
  margin:0 0 0 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  background:rgba(255,255,255,.06);
  color:#c6cede;
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  overflow:visible;
}
#qirebox .ui-dialog-todo .ui-link:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.2);
  color:#fff;
  text-decoration:none;
}
#qirebox .ui-dialog-todo #surebt{
  background:linear-gradient(135deg,#7b42e0 0%,#a86ef2 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 6px 16px -6px rgba(123,66,224,.9);
}
#qirebox .ui-dialog-todo #surebt:hover{
  background:linear-gradient(135deg,#8a4ff2 0%,#b57cff 100%);
}

/* ---------- 兜底：老代码里还有一种少写尖括号的 .ui-cnt 分支 ---------- */
#qirebox .ui-cnt{
  padding:19px 46px 19px 54px;
  line-height:1.62;
  font-size:14.5px;
  color:#e8edf7;
}

/* ---------- 窄屏 ---------- */
@media (max-width:640px){
  #qirebox .ui-dialog{
    min-width:0;
    width:calc(100vw - 44px);
    max-width:340px;
  }
  #qirebox .ui-dialog-tip{font-size:14px;padding:18px 42px 18px 50px}
  #qirebox .ui-dialog-tip::before,
  #qirebox .ui-dialog-tip::after{left:16px}
}