/* ==========================================================
   Health-Cert UI · v2.6 · 2025-05-03
   - 优化模态框显示动画，解决闪烁问题
   - 优化适配主题样式
   - 精细控制样式优先级
   - 输入框常驻描边+聚焦发光
   - Mobile 按钮主题色 - 图片模态自适应
   - 增强独立使用时的样式完整性
   ========================================================== */

/* ---------- 1 · 设计变量 ---------- */
/* 定义插件内部使用的颜色变量，优先继承主题变量，否则使用默认值 */
:root {
    /* 主题相关颜色变量，优先继承主题，否则使用默认值 */
    --xh-primary: var(--article-theme-highlight, var(--theme-skin-matching, #0073aa)); /* 优先使用主题高亮或匹配色，否则用默认蓝色 */
    --xh-primary-dark: color-mix(in srgb, var(--xh-primary) 80%, #000); /* 主题色的深色版本 */

    /* 状态颜色，这些颜色相对固定，用于表示成功、危险、警告等状态 */
    --xh-success: #4caf50;
    --xh-success-lite: #e8f5e9;
    --xh-success-text: #2e7d32;
    --xh-danger: #c62828;
    --xh-danger-lite: #ffebee;
    --xh-warning: #ff8f00;
    --xh-warning-lite: #fff8e1;

    /* 背景和文本颜色，优先继承主题变量，否则使用默认值 */
    --xh-bg-card: var(--theme-bg-card, rgba(255, 255, 255, .8)); /* 卡片背景，优先主题，否则半透明白 */
    --xh-bg-muted: var(--theme-bg-muted, rgba(255, 255, 255, .6)); /* 柔和背景，优先主题，否则半透明白 */
    --xh-text-main: var(--theme-skin, #333); /* 主要文本颜色，优先主题，否则深灰 */
    --xh-text-meta: var(--theme-text-meta, #555); /* 元信息文本颜色，优先主题，否则中灰 */

    /* 圆角和阴影，优先继承主题变量，否则使用默认值 */
    --xh-radius: var(--style_menu_radius, 8px); /* 圆角，优先主题变量，否则8px */
    --xh-shadow: var(--theme-shadow, 0 1px 30px -4px rgba(232, 232, 232, .9)); /* 阴影，优先主题变量 */

    /* 确保在没有主题CSS时，一些基础变量有默认值，增强独立使用时的样式完整性 */
    --theme-skin: #333;
    --theme-skin-matching: #0073aa;
    --article-theme-highlight: #0073aa;
    --theme-bg-card: rgba(255, 255, 255, .8);
    --theme-bg-muted: rgba(255, 255, 255, .6);
    --theme-text-meta: #555;
    --style_menu_radius: 8px;
    --theme-shadow: 0 1px 30px -4px rgba(232, 232, 232, .9);
    --theme-border-color: #e5e5e5; /* 添加边框颜色默认值 */

    /* 深色模式默认值，确保在深色模式且无主题深色变量时有基础样式 */
    --dark-bg-card: rgba(26, 26, 26, .70);
    --dark-bg-muted: rgba(38, 38, 38, .60);
    --dark-text-primary: #ccc;
    --dark-text-secondary: #999;
    --dark-shadow-normal: 0 1px 20px 2px rgba(26, 26, 26, .9);
    --theme-skin-dark: #5ecfad; /* 深色模式下的主题色默认值 */
    --dark-border-color: #7d7d7d30; /* 深色模式下的边框颜色默认值 */
}

/* 深色模式适配，优先使用主题的深色变量 */
body.dark {
    --xh-bg-card: var(--dark-bg-card, rgba(26, 26, 26, .70));
    --xh-bg-muted: var(--dark-bg-muted, rgba(38, 38, 38, .60));
    --xh-text-main: var(--dark-text-primary, #ccc);
    --xh-text-meta: var(--dark-text-secondary, #999);
    --xh-shadow: var(--dark-shadow-normal, 0 1px 20px 2px rgba(26, 26, 26, .9));
    /* 深色模式下的 --xh-primary 应该由主题的深色变量控制，这里不再单独设置 */
}


/* ---------- 2 · 容器 ---------- */
/* 使用插件容器类作为主要作用域 */
.xhcert-container,
.xhcert-container * {
    box-sizing: border-box;
}

.xhcert-container {
    max-width: 900px;
    margin: auto;
    padding: 1.5rem;
    background: var(--xh-bg-card); /* 使用插件背景变量 */
    border-radius: var(--xh-radius); /* 使用插件圆角变量 */
    box-shadow: var(--xh-shadow); /* 使用插件阴影变量 */
    color: var(--xh-text-main); /* 使用插件主要文本颜色变量 */
    /* 容器本身的描边，确保与顶部彩条区分 */
    border: 2px solid color-mix(in srgb, var(--xh-primary) 20%, transparent); /* 使用主题色浅色作为边框 */
    position: relative;
    transition: background .4s, box-shadow .4s, border-color .4s; /* 添加边框颜色过渡 */
    overflow: hidden; /* 防止伪元素超出容器 */
}

/* 顶部彩条伪元素 */
.xhcert-container::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0; /* 彩条在容器顶部内侧 */
    height: 5px;
    background: var(--xh-primary); /* 使用主题色 */
    border-radius: var(--xh-radius) var(--xh-radius) 0 0;
    z-index: 1; /* 确保在容器内容下方 */
}

/* ---------- 3 · Tabs ---------- */
.xhcert-container h3 {
    margin: 0 0 2rem;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
}

.xhcert-tabs {
    display: flex;
    justify-content: center;
    gap: .3rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--theme-border-color, #e5e5e5); /* 优先主题边框色 */
}

.xhcert-tab-btn {
    position: relative;
    padding: .8rem 1.4rem;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    color: var(--xh-text-meta); /* 使用插件元信息文本颜色变量 */
    cursor: pointer;
    transition: color .2s;
}

.xhcert-tab-btn:is(:hover, .active) {
    color: var(--xh-primary); /* 使用主题色 */
}

.xhcert-tab-btn.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--xh-primary); /* 使用主题色 */
    border-radius: 3px 3px 0 0;
}

.xhcert-tab-content {
    display: none;
}

.xhcert-tab-content.active {
    display: block;
    animation: fadeInXH .35s ease;
}

/* 动画保持不变 */
@keyframes fadeInXH {
    from {
        opacity: 0;
        translate: 0 .5rem
    }
    to {
        opacity: 1;
        translate: 0 0
    }
}

/* ---------- 4 · 表单 ---------- */
.xhcert-form-row {
    margin-bottom: 1.1rem;
}

.xhcert-form-label {
    display: block;
    margin-bottom: .5rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--xh-text-meta); /* 使用插件元信息文本颜色变量 */
}

/* 针对输入框使用更具体的选择器，确保覆盖主题默认样式 */
.xhcert-container .xhcert-form-input {
    width: 100%;
    padding: .8rem 1rem;
    font-size: 1rem;
    /* 未选中时的描边 */
    border: 1px solid var(--theme-border-color, #cdd5db); /* 优先主题边框色，否则默认灰 */
    border-radius: var(--xh-radius); /* 使用插件圆角变量 */
    background: var(--xh-bg-muted); /* 使用插件柔和背景色变量 */
    transition: border-color .2s, box-shadow .2s, background .2s;
}

/* 聚焦：保留描边 + 改颜色 + 发光 */
.xhcert-container .xhcert-form-input:focus {
    border-color: var(--xh-primary); /* 聚焦时边框颜色使用主题色 */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--xh-primary) 25%, transparent); /* 聚焦时发光效果使用主题色 */
    background: var(--theme-bg-card, #fff); /* 聚焦时背景，优先主题卡片背景，否则白色 */
    outline: none;
}

/* ---------- 5 · 按钮（中号） ---------- */
.xhcert-search-button,
.xhcert-download-button,
.xhcert-modal button {
    display: inline-block;
    padding: .8rem 1.8rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff; /* 按钮文字颜色固定白色，确保对比度 */
    background: var(--xh-primary); /* 按钮背景使用主题色 */
    border: none;
    border-radius: var(--xh-radius); /* 使用插件圆角变量 */
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
    transition: background .2s, transform .1s, box-shadow .2s;
}

.xhcert-search-button:hover,
.xhcert-download-button:hover,
.xhcert-modal button:hover {
    background: var(--xh-primary-dark); /* 悬停时使用主题色的深色版本 */
    transform: translateY(-2px);
}

.xhcert-search-button:active,
.xhcert-download-button:active,
.xhcert-modal button:active {
    transform: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}

.xhcert-search-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* 移动端强制主题色 */
@media (max-width: 768px) {
    .xhcert-search-button,
    .xhcert-download-button {
        background: var(--xh-primary) !important; /* 强制使用主题色 */
        color: #fff !important; /* 强制白色文字 */
        width: 100%;
    }
}

/* ---------- 6 · Loading ---------- */
.xhcert-loading {
    text-align: center;
    padding: 1rem;
    display: none;
}

.xhcert-loading[aria-busy="true"] {
    display: block;
}

.xhcert-loading-spinner {
    width: 44px;
    height: 44px;
    margin: auto;
    border: 4px solid color-mix(in srgb, var(--xh-primary) 15%, transparent);
    border-top-color: var(--xh-primary); /* 使用主题色 */
    border-radius: 50%;
    animation: spinXH 1s linear infinite;
}

/* 动画保持不变 */
@keyframes spinXH {
    to {
        rotate: 1turn
    }
}

/* ---------- 7 · 结果卡 ---------- */
.xhcert-results-area {
    margin-top: 1.6rem;
}

.xhcert-result-card {
    background: var(--xh-bg-muted); /* 使用柔和背景色 */
    border: 1px solid var(--theme-border-color, #dcdcdc); /* 优先主题边框色 */
    border-radius: var(--xh-radius); /* 使用插件圆角变量 */
    padding: 1.3rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
    transition: box-shadow .2s, border-color .2s; /* 添加边框颜色过渡 */
}

.xhcert-result-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

/* 左侧彩色边条使用固定颜色，不随主题变化 */
.xhcert-result-card.valid {
    border-left: 5px solid var(--xh-success);
}

.xhcert-result-card.invalid {
    border-left: 5px solid var(--xh-danger);
}

.xhcert-result-card h4 {
    margin: 0 0 1rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--theme-border-color, #e5e5e5); /* 优先主题边框色 */
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--xh-text-main); /* 使用主要文本颜色变量 */
}

.xhcert-fields-area {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .8rem;
}

.xhcert-field {
    font-size: .97rem;
    line-height: 1.5;
}

.xhcert-field-label {
    font-weight: 600;
    margin-right: .35rem;
    color: var(--xh-text-meta); /* 使用插件元信息文本颜色变量 */
}

.xhcert-status {
    display: inline-block;
    margin-top: .3rem;
    padding: .3rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    border-radius: 1.3rem;
}

/* 状态文本颜色和背景使用固定颜色 */
.xhcert-status.valid {
    background: var(--xh-success-lite);
    color: var(--xh-success-text);
}

.xhcert-status.invalid {
    background: var(--xh-danger-lite);
    color: var(--xh-danger);
}

/* ---------- 8 · 通知 ---------- */
.xhcert-notice {
    margin-top: 1.1rem;
    padding: .8rem 1rem;
    border-radius: var(--xh-radius); /* 使用插件圆角变量 */
    font-weight: 500;
    text-align: center;
    font-size: .96rem;
}

/* 通知背景和文本颜色使用固定颜色 */
.xhcert-expired-notice {
    background: var(--xh-warning-lite);
    color: var(--xh-warning);
}

.xhcert-revoked-notice {
    background: var(--xh-danger-lite);
    color: var(--xh-danger);
}

.xhcert-abnormal-notice {
    background: var(--xh-success-lite);
    color: var(--xh-success-text);
}

/* ---------- 9 · 分页 ---------- */
.xhcert-pagination {
    display: flex;
    justify-content: center;
    gap: .55rem;
    margin-top: 1.6rem;
}

.xhcert-pagination-button {
    padding: .65rem 1.25rem;
    background: var(--xh-bg-muted); /* 使用柔和背景色 */
    border: 1px solid var(--theme-border-color, #dcdcdc); /* 优先主题边框色 */
    border-radius: var(--xh-radius); /* 使用插件圆角变量 */
    font-size: .95rem;
    cursor: pointer;
    transition: .2s;
    color: var(--xh-text-main); /* 使用主要文本颜色变量 */
}

.xhcert-pagination-button:is(:hover, .active) {
    background: var(--xh-primary); /* 悬停和选中时使用主题色 */
    border-color: var(--xh-primary); /* 悬停和选中时边框使用主题色 */
    color: #fff; /* 悬停和选中时文字固定白色 */
}

.xhcert-pagination-button.disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ---------- 10 · 模态 ---------- */
.xhcert-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* 使用 opacity 和 visibility 实现平滑过渡 */
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, .5); /* 固定半透明黑色背景 */
    transition: opacity .3s ease, visibility .3s ease; /* 添加过渡效果 */
}

/* 模态框显示时的状态 */
.xhcert-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.xhcert-modal-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 500px;
    width: 90%;
    background: var(--xh-bg-card); /* 使用卡片背景色 */
    border-radius: var(--xh-radius); /* 使用插件圆角变量 */
    box-shadow: var(--xh-shadow); /* 使用阴影 */
    padding: 1.6rem;
    /* 模态框内容的动画，可以保留或根据需要调整 */
    animation: slideInXH .35s ease;
}

/* 模态框内容进入动画，可以保留 */
@keyframes slideInXH {
    from {
        translate: 0 -2rem;
        opacity: 0
    }
    to {
        translate: 0 0;
        opacity: 1
    }
}

.xhcert-modal-close {
    position: absolute;
    right: .9rem;
    top: .9rem;
    font-size: 1.6rem;
    color: var(--xh-text-meta); /* 使用插件元信息文本颜色变量 */
    cursor: pointer;
    transition: color .2s;
}

.xhcert-modal-close:hover {
    color: var(--xh-text-main); /* 悬停时使用插件主要文本颜色变量 */
}

/* 针对模态框内的输入框使用更具体的选择器 */
.xhcert-modal input {
    width: 100%;
    padding: .8rem 1rem;
    margin: .7rem 0 1rem;
    font-size: 1rem;
    /* 未选中时的描边 */
    border: 1px solid var(--theme-border-color, #cdd5db); /* 优先主题边框色 */
    border-radius: var(--xh-radius); /* 使用插件圆角变量 */
    background: var(--xh-bg-muted); /* 使用插件柔和背景色变量 */
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.xhcert-modal input:focus {
    border-color: var(--xh-primary); /* 聚焦时边框颜色使用主题色 */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--xh-primary) 25%, transparent); /* 聚焦时发光效果使用主题色 */
    background: var(--theme-bg-card, #fff); /* 聚焦时背景，优先主题卡片背景，否则白色 */
    outline: none;
}


.xhcert-modal-error {
    display: none;
    margin: 0 0 .7rem;
    color: #dc3545; /* 固定错误文本颜色 */
    font-weight: 500;
    background: #ffebee; /* 固定错误背景颜色 */
    padding: .5rem .9rem;
    border-radius: var(--xh-radius); /* 使用插件圆角变量 */
    font-size: .9rem;
}

/* 图片模态：自适应并完整显示 */
.xhcert-image-modal-content {
    max-width: 600px;
    max-height: 80vh;
    overflow: auto;
}

.xhcert-certificate-image {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
}

/* ---------- 11 · 错误 / 禁用条 ---------- */
.xhcert-error,
.xhcert-disabled {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border-radius: var(--xh-radius); /* 使用插件圆角变量 */
    font-weight: 500;
    text-align: center;
    font-size: .95rem;
}

/* 错误和禁用条颜色使用固定颜色 */
.xhcert-error {
    color: #721c24;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
}

.xhcert-disabled {
    color: #856404;
    background: #fff3cd;
    border: 1px solid #ffeeba;
}

/* ---------- 12 · 响应式 ---------- */
@media(max-width: 768px) {
    .xhcert-fields-area {
        grid-template-columns: 1fr;
    }
}

/* ---------- 13 · 工具 ---------- */
.xhcert-hidden {
    display: none !important;
}