/**
 * geetest_captcha.css - 验证码容器样式
 *
 * 极验 3.0 与 4.0 **都有自己的原生按钮**（就是那条
 * 「点击按钮开始验证 / 验证通过 / 智能检测中」的按钮），由极验自己的 CSS 绘制，
 * 本站**不要**去覆盖它的内部结构。
 *
 * 这个文件只负责两件事：
 *   1) 容器占位（.captcha-slot / .gt-verify-slot）：让验证码在表单里占位正确、不跳动。
 *   2) `.gt-verify` 备用按钮样式：仅当极验组件彻底加载失败、需要页面自己兜一个
 *      可见元素时才用得上（正常情况下用不到）。
 *
 * 想调按钮尺寸请用 init() 的 nextWidth / rem / width 参数（官方提供），
 * 而不是写 CSS 硬改极验的 DOM——那样在极验升级后会失效。
 *
 * 用法：由 captcha_provider.php 的 captcha_render_assets() 自动引入。
 */

/* ---------- 容器占位（三个提供商共用） ---------- */

.captcha-slot,
.gt-verify-slot {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
    /* 验证码还没渲染进来时高度为 0，会导致下方按钮跳动；
       给一个最小高度，等真实内容渲染后自然被撑开 */
    min-height: 44px;
}

/* 提供商插入的按钮容器：宽度跟随父级，避免超出表单 */
.captcha-slot > div,
.captcha-slot > span,
.gt-verify-slot > div,
.gt-verify-slot > span {
    width: 100%;
}

/* ---------- v3 触发按钮 ---------- */

.gt-verify {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    height: 46px;
    margin: 0;
    /* 变量名站内有两套命名体系，按「具体 → 通用 → 硬编码」兜底：
       freeze/unfreeze/admin_login 用 --border-input/--bg-card/--text-main，
       login/register 用 --field-border/--field-bg/--field-text */
    border: 1px solid var(--gt-border, var(--field-border, var(--border-input, #dcdcdc)));
    border-radius: var(--gt-radius, var(--radius-sm, var(--radius, 8px)));
    background: var(--gt-bg, var(--field-bg, var(--bg-card, #fff)));
    color: var(--gt-fg, var(--field-text, var(--text-main, #1a1a1a)));
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.gt-verify svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gt-verify:hover:not(:disabled) {
    border-color: var(--gt-accent, var(--field-accent, var(--accent, #4285f4)));
    color: var(--gt-accent, var(--field-accent, var(--accent, #4285f4)));
}

.gt-verify:focus-visible {
    outline: 2px solid var(--gt-accent, var(--field-accent, var(--accent, #4285f4)));
    outline-offset: 2px;
}

/* 未就绪（组件还在加载）：压暗表示暂时不可点，但保留文字让用户知道发生了什么 */
.gt-verify:disabled:not(.gt-verify--done) {
    opacity: .6;
    cursor: default;
}

/* 已验证：变绿并停止交互，作为「已通过」的明确信号 */
.gt-verify--done,
.gt-verify--done:disabled {
    border-color: var(--gt-ok, #34a853);
    background: var(--gt-ok-weak, rgba(52, 168, 83, .1));
    color: var(--gt-ok, #34a853);
    cursor: default;
    opacity: 1;
}

.gt-verify--done:hover {
    border-color: var(--gt-ok, #34a853);
    color: var(--gt-ok, #34a853);
}

/* ---------- 深色主题 ---------- */

[data-theme="dark"] .gt-verify {
    border-color: var(--gt-border, var(--field-border, var(--border-input, #3a3f47)));
    background: var(--gt-bg, var(--field-bg, var(--bg-card, #1c2027)));
}

[data-theme="dark"] .captcha-slot,
[data-theme="dark"] .gt-verify-slot {
    border-radius: 8px;
}