/**
 * 子比下载优化插件 - 二维码下载样式
 * 说明：
 * - 颜色统一使用子比主题的 CSS 变量，自动适配白天/夜间（.dark-theme）模式。
 * - 二维码区域始终保持「白底黑码」，夜间模式也不反色，确保可扫描。
 * - 同一链接同时输出二维码与下载按钮，通过设备 class 控制显隐：
 *     PC（.zibdown-device-desktop）显示二维码；
 *     移动端（.zibdown-device-mobile）显示下载按钮。
 */

.zibdown-wrap {
    --zibdown-gap: 16px;
}

.zibdown-section-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--theme-color, #f04494);
}

/* 提示文案 */
.zibdown-tip {
    background: var(--muted-bg-2-color, #f6f7f8);
    border: 1px dashed var(--theme-color, #f04494);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 18px;
    line-height: 1.7;
}

.zibdown-tip-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--theme-color, #f04494);
    margin-bottom: 6px;
}

.zibdown-tip-text {
    color: var(--main-color, #4e5358);
    font-size: 14px;
    word-break: break-word;
}

/* ---------- 设备形态切换 ---------- */
.zibdown-device-desktop.zibdown-hide-original .zibdown-btn-variant {
    display: none !important;
}

.zibdown-device-mobile .zibdown-qr-variant,
.zibdown-device-mobile .zibdown-qr-only {
    display: none !important;
}

/* ---------- 卡片区域布局 ---------- */
/*
 * 使用 flex + wrap 布局：
 *  - 每行按「每行卡片数量」均分宽度；
 *  - 数量不足一行时自动居中；
 *  - align-items: stretch 让同一行卡片等高对齐。
 */
.zibdown-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--zibdown-gap, 16px);
    margin: 0 0 var(--zibdown-gap, 16px);
}

.zibdown-item {
    flex: 0 1 calc((100% - (var(--zibdown-cols, 2) - 1) * var(--zibdown-gap, 16px)) / var(--zibdown-cols, 2));
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.zibdown-qr-variant {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.zibdown-btn-variant {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 手机端：单列 */
@media (max-width: 640px) {
    .zibdown-item {
        flex-basis: 100%;
    }
}

/* ---------- 二维码卡片 ---------- */
.zibdown-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px 16px;
    text-align: center;
    background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
    border-radius: 12px;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.zibdown-card:hover {
    box-shadow: 0 8px 24px var(--main-shadow, rgba(116, 116, 116, 0.08));
    transform: translateY(-2px);
}

.zibdown-card-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 24px;
    margin: 0 0 16px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
}

.zibdown-card-head .zibdown-card-icon {
    display: inline-flex;
    align-items: center;
}

.zibdown-card-head .zibdown-card-icon svg.icon {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    fill: currentColor;
}

.zibdown-card-name {
    color: var(--key-color, #333);
}

/*
 * 二维码容器：
 * margin:auto 让二维码在卡片剩余空间内垂直水平居中；
 * 夜间模式下也必须保持白底，避免黑码白底被反转导致无法扫描。
 */
.zibdown-qrcode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
    border-radius: 10px;
    min-width: 100px;
    min-height: 100px;
    line-height: 1;
}

/*
 * 注意：不要使用 display:block !important。
 * qrcodejs 会在渲染完成后隐藏 canvas、仅显示 img（data URI），
 * 若强制显示 canvas 会出现两个重复二维码。
 */
.zibdown-qrcode img,
.zibdown-qrcode canvas {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* 夜间模式下二维码图片不做任何滤镜处理，保持清晰可扫 */
.dark-theme .zibdown-qrcode img {
    filter: none;
    opacity: 1;
}

.zibdown-qrcode-loading {
    color: var(--muted-3-color, #b1b1b1);
    font-size: 13px;
    padding: 20px 6px;
    white-space: nowrap;
}

.zibdown-qr-fallback {
    word-break: break-all;
    font-size: 12px;
    color: var(--muted-2-color, #999);
}

.zibdown-card-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--muted-2-color, #999);
    line-height: 1.4;
}

.zibdown-card-foot svg.icon {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.zibdown-actions {
    width: 100%;
    margin-top: 12px;
}

.zibdown-actions .but {
    width: 100%;
    padding: .5em .8em;
    font-size: 13px;
}

/* ---------- 下载按钮 ---------- */
.zibdown-btn-variant .but-download,
.zibdown-original-buttons .but-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
}

.zibdown-btn-variant .but-download > .but,
.zibdown-original-buttons .but-download > .but {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    margin: 0;
    padding: .55em 1.2em;
    white-space: nowrap;
}

.zibdown-btn-variant .but-download > .but svg.icon,
.zibdown-original-buttons .but-download > .but svg.icon {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    fill: currentColor;
}

/* 不满足二维码条件的按钮（本地文件、被排除的网盘等） */
.zibdown-original-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}

/* 手机端按钮铺满整行 */
@media (max-width: 640px) {
    .zibdown-btn-variant .but-download,
    .zibdown-original-buttons .but-download {
        width: 100%;
    }

    .zibdown-btn-variant .but-download > .but,
    .zibdown-original-buttons .but-download > .but {
        width: 100%;
        min-width: 0;
    }
}

/* ---------- 夜间模式对比增强 ---------- */
.dark-theme .zibdown-tip {
    background: var(--muted-bg-color, #2d2e31);
}

.dark-theme .zibdown-card {
    border-color: rgba(255, 255, 255, 0.06);
}

.dark-theme .zibdown-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.dark-theme .zibdown-qrcode {
    border-color: rgba(255, 255, 255, 0.14);
}

/* ---------- 文章页：资源下载按钮下方展示支持的网盘 ---------- */
.zibdown-support-netdisks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    box-sizing: border-box;
    width: 100%;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--muted-bg-2-color, #f6f7f8);
    border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

.zibdown-support-label {
    display: inline-flex;
    align-items: center;
    margin-right: 2px;
    color: var(--muted-2-color, #999);
    white-space: nowrap;
}

.zibdown-netdisk-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
    color: var(--main-color, #4e5358);
    font-weight: 500;
    white-space: nowrap;
    transition: color .2s, border-color .2s, background .2s;
}

.zibdown-netdisk-badge:hover {
    color: var(--theme-color, #f04494);
    border-color: var(--theme-color, #f04494);
}

.zibdown-netdisk-badge svg.icon {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.zibdown-netdisk-name {
    display: inline-block;
    line-height: 1.4;
}

.dark-theme .zibdown-support-netdisks {
    background: var(--muted-bg-color, #2d2e31);
    border-color: rgba(255, 255, 255, 0.06);
}

.dark-theme .zibdown-netdisk-badge {
    background: var(--main-bg-color, #323335);
    border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 640px) {
    .zibdown-support-netdisks {
        gap: 8px;
        padding: 10px;
    }

    .zibdown-netdisk-badge {
        padding: 4px 10px;
    }
}