/*
 * 统一拼图滑块验证码组件样式（canonical slider captcha）
 * ------------------------------------------------------------------
 * 配合 sliderCaptcha.js 使用；全站唯一实现，禁止各端分叉。
 * 几何约束：面板/背景/轨道固定为图片原始 310px 宽（不做百分比缩放），
 *           以保证 sliderCaptcha.js 里 translateX(px) 与图片坐标系严格一致。
 * 颜色优先取宿主页面的设计令牌（--blue/--ink/--line/...），缺失时回退到内置默认值，
 *           因此同一份 CSS 可直接复制到官网 / business H5 / 商家端而无需改动。
 */

/* ===== 弹窗（modal）模式 ===== */
.cap-modal{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(15,23,42,.5);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.cap-modal.show{display:flex;}

.cap-box{
  width:342px;max-width:100%;box-sizing:border-box;
  background:var(--bg-elev,#fff);
  border:1px solid var(--line,#e8ecf3);
  border-radius:var(--radius-l,16px);
  box-shadow:var(--shadow-card,0 24px 60px rgba(11,77,230,.16));
  padding:18px 16px 16px;
  font-family:var(--font,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif);
  color:var(--ink,#161823);
  animation:cap-pop .18s ease-out;
}
@keyframes cap-pop{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}

.cap-title{
  margin:0 0 14px;font-size:15px;font-weight:600;line-height:1.4;
  color:var(--ink,#161823);text-align:center;
}

/* ===== 面板 / 图片 ===== */
.cap-panel{
  position:relative;margin:0 auto;box-sizing:border-box;
  width:310px;height:155px;max-width:100%;
  border-radius:var(--radius-m,12px);overflow:hidden;
  background:var(--bg-chip,#F4F7FC);
  border:1px solid var(--line,#e8ecf3);
  user-select:none;-webkit-user-select:none;
}
.cap-bg{display:block;width:310px;height:155px;max-width:none;object-fit:initial;}
.cap-piece{
  position:absolute;top:0;left:0;width:42px;height:42px;
  object-fit:initial;will-change:transform;pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.28));
}
.cap-refresh{
  position:absolute;top:8px;right:8px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.85);color:var(--deep,#0B4DE6);
  font-size:17px;line-height:1;
  box-shadow:0 1px 4px rgba(0,0,0,.16);
  transition:transform .15s ease,background .15s ease;
}
.cap-refresh:hover{background:#fff;}
.cap-refresh:active{transform:rotate(120deg);}
.cap-refresh:focus-visible{outline:2px solid var(--blue,#2E7BF9);outline-offset:2px;}

.cap-loading{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;
  font-size:13px;color:var(--mut,#5c6470);
  background:rgba(255,255,255,.6);
}
.cap-panel.is-loading .cap-loading{display:flex;}

/* ===== 滑块轨道 ===== */
.cap-track{
  position:relative;margin:14px auto 0;box-sizing:border-box;
  width:310px;max-width:100%;height:42px;
  border-radius:var(--radius-s,8px);overflow:hidden;
  background:var(--bg-tab,#F1F5FB);
  border:1px solid var(--line,#e8ecf3);
  touch-action:none;
}
.cap-fill{
  position:absolute;top:0;left:0;height:100%;width:0;
  background:linear-gradient(90deg,var(--bgblue,#EDF4FE),rgba(46,123,249,.28));
  transition:none;
}
.cap-hint{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--mut,#5c6470);pointer-events:none;
}
.cap-thumb{
  position:absolute;top:0;left:0;width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-s,8px);cursor:grab;
  background:var(--grad,linear-gradient(135deg,#0B4DE6,#2E7BF9));
  color:#fff;font-size:15px;font-weight:700;letter-spacing:1px;
  box-shadow:0 2px 8px rgba(11,77,230,.35);
  will-change:transform;
}
.cap-thumb:active{cursor:grabbing;}
.cap-thumb:focus-visible{outline:2px solid var(--deep,#0B4DE6);outline-offset:2px;}

/* 校验成功 / 失败态 */
.cap-track.is-ok{border-color:var(--ok-line,#bbf7d0);}
.cap-track.is-ok .cap-fill{background:linear-gradient(90deg,var(--ok-bg,#F0FDF4),rgba(14,159,110,.28));}
.cap-track.is-ok .cap-thumb{background:linear-gradient(135deg,#0E9F6E,#3ECF8E);box-shadow:0 2px 8px rgba(14,159,110,.4);cursor:default;}
.cap-track.is-ok .cap-hint{color:var(--ok,#0E9F6E);font-weight:600;}
.cap-track.is-fail{border-color:var(--warn-line,#fecaca);animation:cap-shake .3s;}
.cap-track.is-fail .cap-fill{background:linear-gradient(90deg,var(--warn-bg,#FEF2F2),rgba(185,28,28,.22));}
.cap-track.is-fail .cap-thumb{background:linear-gradient(135deg,#B91C1C,#EF4444);box-shadow:0 2px 8px rgba(185,28,28,.35);}
@keyframes cap-shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}

/* ===== 提示文案 ===== */
.cap-tip{
  min-height:18px;margin:10px auto 0;width:310px;max-width:100%;
  font-size:12.5px;line-height:1.5;text-align:center;color:var(--warn,#B91C1C);
}
.cap-tip:empty{display:none;}

/* ===== 关闭 / 取消 ===== */
.cap-close{
  margin:12px auto 0;width:max-content;padding:6px 18px;
  font-size:13px;color:var(--mut,#5c6470);cursor:pointer;
  border-radius:var(--radius-s,8px);
  border:1px solid var(--line,#e8ecf3);
  transition:background .15s ease,color .15s ease;
}
.cap-close:hover{background:var(--bg-chip,#F4F7FC);color:var(--ink,#161823);}
.cap-close:focus-visible{outline:2px solid var(--blue,#2E7BF9);outline-offset:2px;}

/* ===== 内嵌（embed）模式 ===== */
.cap-embed{
  display:inline-block;box-sizing:border-box;
  font-family:var(--font,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif);
  color:var(--ink,#161823);
}
.cap-embed .cap-track{margin-top:10px;}

/* ===== 窄屏适配：整体按 310px 缩放，但保持图片坐标系一致 ===== */
@media (max-width:360px){
  .cap-box{width:100%;}
  .cap-panel,.cap-track,.cap-tip{width:calc(100vw - 72px);max-width:310px;}
}

/* ===== 尊重减少动效偏好 ===== */
@media (prefers-reduced-motion:reduce){
  .cap-box,.cap-track.is-fail{animation:none;}
  .cap-refresh,.cap-close{transition:none;}
}