/* ===========================================================================
 * 滑块验证码组件样式（仅 slide 模式使用）
 * 由 login.js 的 renderSlideCaptcha 渲染到弹窗内 #slideCaptchaPanel
 * 结构：
 *   .slide-captcha
 *     .sc-bg(背景图 + 缺口滑块图 + 刷新按钮)
 *     .sc-track(.sc-bar 进度条 + .sc-tip 提示文字 + .sc-btn 拖拽按钮)
 * 另含登录页「图片验证」按钮 .captcha-verify-btn 及其 .verified 成功态
 * ======================================================================== */

/* border-box：JS 按 bgW(300) 设 width，border 不再额外撑宽导致溢出弹层 */
.slide-captcha, .slide-captcha * {
    box-sizing: border-box;
}

.slide-captcha {
    position: relative;
    width: 300px;
    /* 容器内含背景图区 + 40px 拖动条，高度 auto 防溢出被遮挡 */
    height: auto;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background: #f7f8fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* ===== 背景图区 ===== */
.slide-captcha .sc-bg {
    position: relative;
    width: 300px;
    height: 160px;
    border-bottom: 1px solid #e6e6e6;
    overflow: hidden;
    background: #efefef;
}

.slide-captcha .sc-bg-img {
    display: block;
    width: 100%;
    height: 100%;
}

.slide-captcha .sc-slider-img {
    position: absolute;
    top: 0;
    left: 0;
    cursor: grab;
    /* 初始位置由 JS 控制 */
}

.slide-captcha .sc-slider-img.dragging {
    cursor: grabbing;
}

/* 刷新按钮：背景图区右上角 */
.slide-captcha .sc-refresh {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.85) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'><path d='M17.65 6.35A7.95 7.95 0 0 0 12 4a8 8 0 1 0 7.73 10h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z'/></svg>") no-repeat center;
    background-size: 15px 15px;
    z-index: 5;
    cursor: pointer;
    opacity: .75;
    transition: opacity .15s, background-color .15s;
}

.slide-captcha .sc-refresh:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 1);
}

/* ===== 滑动条 ===== */
.slide-captcha .sc-track {
    position: relative;
    height: 40px;
    line-height: 40px;
    background: #f7f8fa;
    overflow: hidden;
}

/* 进度条（底层，半透明蓝） */
.slide-captcha .sc-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 0;
    background: rgba(48, 96, 192, 0.18);
    z-index: 1;
    transition: background .15s;
}

/* 提示文字（居中，进度条之上） */
.slide-captcha .sc-tip {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: #999;
    z-index: 2;
    pointer-events: none;
}

/* 拖拽按钮（最上层） */
.slide-captcha .sc-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 40px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23306'><path d='M8 5v14l11-7z'/></svg>") no-repeat center;
    background-size: 22px 22px;
    border-right: 1px solid #e6e6e6;
    border-radius: 0;
    cursor: grab;
    z-index: 4;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
    transition: background-color .15s;
}

.slide-captcha .sc-btn.dragging {
    cursor: grabbing;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

/* ===== 状态：成功 / 失败 ===== */
.slide-captcha.sc-success .sc-bar { background: #52c41a; }
.slide-captcha.sc-success .sc-btn {
    background-color: #52c41a;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M9 16.2l-3.5-3.5L4 14.2 9 19 20 8l-1.5-1.5z'/></svg>");
    border-right-color: #52c41a;
}
.slide-captcha.sc-success .sc-tip { color: #fff; }

.slide-captcha.sc-fail .sc-bar { background: #ff4d4f; }
.slide-captcha.sc-fail .sc-btn {
    background-color: #ff4d4f;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/></svg>");
    border-right-color: #ff4d4f;
}
.slide-captcha.sc-fail .sc-tip { color: #fff; }

/* ===== 注册页「图片滑动验证」按钮 ===== */
.captcha-verify-btn {
    display: block;
    width: 50%;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    margin: 10px auto 0 auto;
    border: 1px solid #3060C0;
    border-radius: 4px;
    background: linear-gradient(135deg, #f5f8ff 0%, #e8f0ff 100%);
    color: #3060C0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 1px 3px rgba(48, 96, 192, 0.08);
}

.captcha-verify-btn:hover {
    background: linear-gradient(135deg, #3060C0 0%, #2850a8 100%);
    color: #fff;
    border-color: #2850a8;
    box-shadow: 0 2px 6px rgba(48, 96, 192, 0.25);
}

.captcha-verify-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(48, 96, 192, 0.15);
}

/* 已通过态：绿底白字 + 对勾，可点重新验证 */
.captcha-verify-btn.verified {
    border-color: #52c41a;
    background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(82, 196, 26, 0.2);
}

.captcha-verify-btn.verified:hover {
    background: linear-gradient(135deg, #73d13d 0%, #52c41a 100%);
    border-color: #52c41a;
    box-shadow: 0 2px 6px rgba(82, 196, 26, 0.3);
}

/* ===== 移动端响应式 ===== */
@media screen and (max-width: 500px) {
    .slide-captcha {
        width: 100%;
    }
    .slide-captcha .sc-bg {
        width: 100%;
    }
    .slide-captcha .sc-track {
        width: 100%;
    }
}

/* ===== 滑块验证弹窗（skin: captcha-layer）=====
   根因：layer 2.2.6 的 area:'auto' 在 open 时按「当时 content 高度」一次性测高
   （s.pt.auto: s=[o.innerWidth(),o.innerHeight()]），之后仅在 window resize 且
   area 为百分比时才重算。而 #captchaPopup 模板里的 .captcha-panel 初始为空（高 0），
   滑块图由 success 回调异步 ajax 拉取后才渲染--open 时测得内容高 0，弹窗被固定为
   「标题栏(~42px) + padding(40px) ≈ 82px」，ajax 返回后不再重算，
   滑块被 overflow:hidden 裁剪 -> 表现为 82px×460px 的失真小窗、无法拖动。

   修复（与 login.js 固定 area 配合，多重保险）：
   - 固定 area 高度 420px（login.js）：open 即定高，不依赖 auto 对异步内容的测量。
   - 保持 content-box（不加 box-sizing）：layer 的 auto 函数已按 content-box 计算
     content 高 = 弹窗高 - 标题栏 - 按钮 - 2*padding-top，padding 不会溢出弹窗；
     若加 border-box 反而让可用区缩水 2*padding(40px)、裁剪滑块。
   - .captcha-panel min-height：ajax 返回前 / 异常时撑开内容区，彻底杜绝塌缩。
   - .captcha-loading：ajax 期间占位，避免空白。 */
.captcha-layer .layui-layer-content {
    overflow: hidden;
    padding: 20px;
    /* flex 双向居中：让 .captcha-panel（含滑块/loading）在内容区水平和垂直都居中。
       弹窗高度由 JS 动态调整（layer.style），使弹窗恰好包裹滑块组件。 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.captcha-layer .captcha-panel {
    /* flex item：不伸缩，按内容尺寸；min-height 兜底防 ajax 期间内容区塌缩，
       弹窗高度由 JS 动态调整，此处仅需足够占位即可。 */
    min-height: 200px;
}
/* ajax 拉取滑块图期间的占位（initCaptcha 渲染前注入；高度对齐 panel 避免空白） */
.captcha-loading {
    min-height: 200px;
    line-height: 200px;
    text-align: center;
    color: #999;
    font-size: 14px;
}
/* 移动端：滑块按容器宽等比缩放后高度更小，min-height 同步下调避免过大留白 */
@media screen and (max-width: 500px) {
    .captcha-layer .captcha-panel {
        min-height: 180px;
    }
    .captcha-loading {
        min-height: 180px;
        line-height: 180px;
    }
}

/* ===========================================================================
 * 注册页表单美化（个人 / 法人注册页共用）
 * 仅对滑块验证相关区域及周边表单元素做视觉协调，不改变原有布局结构
 * ======================================================================== */

/* 输入框 focus 态：蓝色边框 + 轻微发光，提升交互反馈 */
.register_text:focus {
    border-color: #3060C0 !important;
    outline: none;
    box-shadow: 0 0 4px rgba(48, 96, 192, 0.2);
}

/* 短信验证码按钮（dxyzm）：禁用态与启用态区分清晰 */
.dxyzm {
    border-radius: 4px !important;
    font-size: 14px;
    transition: all .2s ease;
}
.dxyzm:disabled,
.dxyzm[disabled] {
    background: #f0f0f0 !important;
    color: #bbb;
    cursor: not-allowed;
    border-color: #ddd !important;
}
.dxyzm:not(:disabled):not([disabled]) {
    background: linear-gradient(135deg, #3060C0 0%, #2850a8 100%) !important;
    color: #fff !important;
    border-color: #2850a8 !important;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(48, 96, 192, 0.15);
}
.dxyzm:not(:disabled):not([disabled]):hover {
    background: linear-gradient(135deg, #3a72d8 0%, #3060C0 100%) !important;
    box-shadow: 0 2px 6px rgba(48, 96, 192, 0.25);
}
.dxyzm:not(:disabled):not([disabled]):active {
    transform: translateY(1px);
}

/* 注册按钮美化 */
.login_button {
    border-radius: 4px !important;
    transition: all .2s ease;
}
.login_button:not(:disabled):hover {
    opacity: .92;
    box-shadow: 0 2px 6px rgba(48, 96, 192, 0.3);
}

/* ===== 密码框查看明文眼睛按钮 ===== */
.pwd-wrap { position: relative; display: block; }
.pwd-toggle {
    position: absolute;
    right: 33px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    cursor: pointer;
    z-index: 5;
}
.pwd-toggle.eye-closed {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/%3E%3C/svg%3E");
}
.pwd-toggle.eye-open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233060C0'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}