/**
 * 下载按钮样式
 * 
 * 功能特性：
 * 1. 美观的下载按钮设计
 * 2. 支持深色模式自动适配
 * 3. 完美的移动端响应式布局
 * 4. 流畅的动画效果
 * 5. 多网盘品牌色彩支持
 * 
 * @package wwone
 * @version 2.0.0
 * @author 吴畏的博客
 * @link https://8ww.fun
 */

/* ============================================
   CSS变量定义 - 与主题色调匹配
   ============================================ */
:root {
    /* 下载按钮基础变量 - 使用主题变量 */
    --download-btn-radius: 8px;
    --download-btn-padding: 12px 20px;
    --download-btn-font-size: 14px;
    --download-btn-font-weight: 500;
    /* 使用主题的阴影变量 */
    --download-btn-shadow: var(--box-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
    --download-btn-shadow-hover: var(--box-shadow-hover, 0 4px 16px rgba(0, 0, 0, 0.15));
    --download-btn-transition: var(--transition-speed, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 默认颜色使用主题主色调（但保持足够的对比度） */
    --color-default: #6366f1; /* 保持品牌色，但可以调整 */
    
    /* 网盘品牌色彩 - 保持原有品牌色，但可以微调以匹配主题 */
    --color-baidu: #3b82f6;
    --color-aliyun: #f59e0b;
    --color-tianyi: #0ea5e9;
    --color-lanzou: #06b6d4;
    --color-123pan: #8b5cf6;
    --color-feijix: #6366f1;
    --color-quark: #10b981;
    --color-weiyun: #14b8a6;
    --color-115: #f43f5e;
    --color-ctfile: #ec4899;
    --color-cowtransfer: #0284c7;
    --color-jianguoyun: #2563eb;
    --color-360: #22c55e;
    --color-xunlei: #0ea5e9;
    --color-xiaomi: #f97316;
    --color-caiyun: #22c55e;
    --color-wo: #16a34a;
    --color-mega: #eab308;
    --color-google: #16a34a;
    --color-onedrive: #0ea5e9;
    --color-dropbox: #0284c7;
    --color-mediafire: #ef4444;
    --color-github: #24292e;
    --color-gitee: #c71d23;
    --color-gitlab: #fc6d26;
    /* 本地下载使用主题主色调的深色版本 */
    --color-local: var(--primary-color, #333333);
}

/* 深色模式变量调整 - 使用主题的深色模式变量 */
html[data-theme="dark"] {
    --download-btn-shadow: var(--box-shadow, 0 2px 8px rgba(0, 0, 0, 0.4));
    --download-btn-shadow-hover: var(--box-shadow-hover, 0 4px 16px rgba(0, 0, 0, 0.6));
    /* 深色模式下，本地下载使用主题的浅色主色调 */
    --color-local: var(--primary-color, #cccccc);
}

/* ============================================
   下载按钮容器样式 - 美观大气的包装
   ============================================ */
.download-btn-wrapper {
    margin: 20px 0;
    padding: 20px;
    background-color: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #eee);
    border-radius: 12px;
    box-shadow: var(--box-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
    transition: var(--transition-speed, 0.3s) ease;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word;
}

.download-btn-wrapper:hover {
    box-shadow: var(--box-shadow-hover, 0 4px 16px rgba(0, 0, 0, 0.12));
    border-color: var(--primary-color, #333333);
}

/* 下载提示标题 */
.download-btn-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color, #eee);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color, #333);
}

.download-btn-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, var(--primary-color, #333333), rgba(var(--primary-rgb, 51, 51, 51), 0.6));
    border-radius: 2px;
}

.download-btn-title-text {
    flex: 1;
}

.download-btn-hint {
    font-size: 12px;
    color: var(--text-muted, #6c757d);
    font-weight: normal;
    margin-left: 8px;
}

/* 深色模式下的容器 */
html[data-theme="dark"] .download-btn-wrapper {
    background-color: var(--card-bg, #252525);
    border-color: var(--border-color, #333333);
}

html[data-theme="dark"] .download-btn-title {
    color: var(--text-color, #e8e8e8);
    border-bottom-color: var(--border-color, #333333);
}

html[data-theme="dark"] .download-btn-hint {
    color: var(--text-muted, #a8a8a8);
}

/* ============================================
   下载按钮基础样式 - 优化后的美观设计
   ============================================ */
.download-btn {
    /* 布局 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    /* 尺寸 */
    padding: var(--download-btn-padding);
    margin: 8px 8px 8px 0;
    min-height: 44px;
    
    /* 文本 */
    font-size: var(--download-btn-font-size);
    font-weight: var(--download-btn-font-weight);
    line-height: 1.5;
    text-decoration: none !important;
    color: #ffffff !important;
    white-space: nowrap;
    
    /* 外观 - 添加边框和优化阴影 */
    background-color: var(--color-default);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--download-btn-radius);
    box-shadow: var(--download-btn-shadow), 
                0 0 0 1px rgba(0, 0, 0, 0.05) inset;
    position: relative;
    overflow: hidden;
    
    /* 添加渐变光泽效果 */
    background-image: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0) 50%, 
        rgba(0, 0, 0, 0.05) 100%);
    
    /* 动画 */
    transition: var(--download-btn-transition);
    cursor: pointer;
    
    /* 其他 */
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* 添加微妙的内部高光 */
.download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0) 100%);
    border-radius: var(--download-btn-radius) var(--download-btn-radius) 0 0;
    pointer-events: none;
}

/* 悬停效果 - 更大气 */
.download-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--download-btn-shadow-hover),
                0 0 0 1px rgba(255, 255, 255, 0.3) inset,
                0 8px 24px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    opacity: 1;
}

.download-btn:hover::before {
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.25) 0%, 
        rgba(255, 255, 255, 0) 100%);
}

/* 激活效果 */
.download-btn:active {
    transform: translateY(0);
    box-shadow: var(--download-btn-shadow);
}

/* 焦点效果 - 使用主题主色调 */
.download-btn:focus {
    outline: none;
    box-shadow: var(--download-btn-shadow-hover), 0 0 0 3px rgba(var(--primary-rgb, 51, 51, 51), 0.2);
}

/* ============================================
   下载按钮内部元素
   ============================================ */

/* 图标样式 */
.download-btn .download-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 文本样式 */
.download-btn .download-text {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 提取码样式 */
.download-btn .extract-code {
    flex-shrink: 0;
    padding: 2px 8px;
    margin-left: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.download-btn .extract-code:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   网盘品牌色彩样式
   ============================================ */

/* 国内主流网盘 */
.download-btn.baidu,
.download-btn[style*="#3b82f6"] {
    background-color: var(--color-baidu) !important;
}

.download-btn.aliyun,
.download-btn[style*="#f59e0b"] {
    background-color: var(--color-aliyun) !important;
}

.download-btn.tianyi,
.download-btn[style*="#0ea5e9"] {
    background-color: var(--color-tianyi) !important;
}

.download-btn.lanzou,
.download-btn[style*="#06b6d4"] {
    background-color: var(--color-lanzou) !important;
}

.download-btn.disk-123,
.download-btn[style*="#8b5cf6"] {
    background-color: var(--color-123pan) !important;
}

.download-btn.feijix,
.download-btn[style*="#6366f1"] {
    background-color: var(--color-feijix) !important;
}

.download-btn.quark,
.download-btn[style*="#10b981"] {
    background-color: var(--color-quark) !important;
}

.download-btn.weiyun,
.download-btn[style*="#14b8a6"] {
    background-color: var(--color-weiyun) !important;
}

.download-btn.disk-115,
.download-btn[style*="#f43f5e"] {
    background-color: var(--color-115) !important;
}

.download-btn.ctfile,
.download-btn[style*="#ec4899"] {
    background-color: var(--color-ctfile) !important;
}

.download-btn.cowtransfer,
.download-btn[style*="#0284c7"] {
    background-color: var(--color-cowtransfer) !important;
}

.download-btn.jianguoyun,
.download-btn[style*="#2563eb"] {
    background-color: var(--color-jianguoyun) !important;
}

.download-btn.disk-360,
.download-btn[style*="#22c55e"] {
    background-color: var(--color-360) !important;
}

.download-btn.xunlei {
    background-color: var(--color-xunlei) !important;
}

.download-btn.xiaomi,
.download-btn[style*="#f97316"] {
    background-color: var(--color-xiaomi) !important;
}

.download-btn.caiyun {
    background-color: var(--color-caiyun) !important;
}

.download-btn.wo,
.download-btn[style*="#16a34a"] {
    background-color: var(--color-wo) !important;
}

/* 国外网盘 */
.download-btn.mega,
.download-btn[style*="#eab308"] {
    background-color: var(--color-mega) !important;
}

.download-btn.google {
    background-color: var(--color-google) !important;
}

.download-btn.onedrive {
    background-color: var(--color-onedrive) !important;
}

.download-btn.dropbox {
    background-color: var(--color-dropbox) !important;
}

.download-btn.mediafire,
.download-btn[style*="#ef4444"] {
    background-color: var(--color-mediafire) !important;
}

/* 代码仓库 */
.download-btn.github,
.download-btn[style*="#24292e"] {
    background-color: var(--color-github) !important;
}

.download-btn.gitee,
.download-btn[style*="#c71d23"] {
    background-color: var(--color-gitee) !important;
}

.download-btn.gitlab,
.download-btn[style*="#fc6d26"] {
    background-color: var(--color-gitlab) !important;
}

/* 本站下载（绿色，表示安全可信） */
.download-btn[style*="#10b981"] {
    background-color: #10b981 !important;
}

/* 外站下载（动态颜色，由PHP随机生成） */
.download-btn[style*="#333333"],
.download-btn[style*="#222222"],
.download-btn[style*="#cccccc"] {
    background-color: var(--color-local) !important;
    /* 如果是深色模式，确保文字可读 */
    color: #ffffff !important;
}

/* 深色模式下，如果使用主题色，需要调整文字颜色 */
html[data-theme="dark"] .download-btn[style*="#cccccc"] {
    background-color: var(--primary-color, #cccccc) !important;
    color: #333333 !important;
}

/* ============================================
   深色模式适配 - 与主题深色模式匹配
   ============================================ */
html[data-theme="dark"] .download-btn {
    box-shadow: var(--download-btn-shadow);
}

html[data-theme="dark"] .download-btn:hover {
    box-shadow: var(--download-btn-shadow-hover);
}

html[data-theme="dark"] .download-btn .extract-code {
    background-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .download-btn .extract-code:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* 深色模式下，确保按钮在深色背景上有足够的对比度 */
html[data-theme="dark"] .download-btn {
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--download-btn-shadow),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

html[data-theme="dark"] .download-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: var(--download-btn-shadow-hover),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/* ============================================
   响应式适配 - 平板设备
   ============================================ */
@media (max-width: 992px) {
    .download-btn {
        padding: 10px 16px;
        font-size: 13px;
        margin: 6px 6px 6px 0;
        min-height: 38px;
    }
    
    .download-btn .download-icon {
        width: 16px;
        height: 16px;
    }
    
    .download-btn .extract-code {
        padding: 2px 6px;
        font-size: 11px;
    }
}

/* ============================================
   响应式适配 - 移动设备
   ============================================ */
@media (max-width: 768px) {
    /* 容器在移动端的调整 */
    .download-btn-wrapper {
        margin: 15px 0;
        padding: 15px;
        border-radius: 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        word-wrap: break-word;
        word-break: break-word;
    }
    
    .download-btn-title {
        font-size: 15px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }
    
    .download-btn-hint {
        display: block;
        margin-left: 0;
        margin-top: 4px;
        font-size: 11px;
    }
    
    .download-btn {
        /* 尺寸调整 */
        padding: 10px 14px;
        font-size: 13px;
        margin: 6px 4px 6px 0;
        min-height: 40px;
        gap: 6px;
        
        /* 移动端优化 */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        touch-action: manipulation;
    }
    
    /* 图标调整 */
    .download-btn .download-icon {
        width: 16px;
        height: 16px;
    }
    
    /* 提取码调整 */
    .download-btn .extract-code {
        padding: 3px 8px;
        margin-left: 3px;
        font-size: 11px;
    }
    
    /* 移动端悬停效果禁用 */
    .download-btn:hover {
        transform: none;
    }
    
    /* 移动端点击效果 */
    .download-btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* 小屏幕手机 */
@media (max-width: 480px) {
    .download-btn {
        padding: 8px 12px;
        font-size: 12px;
        margin: 5px 3px 5px 0;
        min-height: 36px;
        max-width: 100%;
    }
    
    .download-btn .download-icon {
        width: 14px;
        height: 14px;
    }
    
    .download-btn .download-text {
        max-width: 150px;
    }
    
    .download-btn .extract-code {
        padding: 2px 6px;
        font-size: 10px;
    }
}

/* ============================================
   特殊场景样式
   ============================================ */

/* 当按钮在段落中时 */
p .download-btn {
    vertical-align: middle;
    /* 与主题段落样式协调 */
    margin-top: 4px;
    margin-bottom: 4px;
}

/* 当按钮连续排列时 */
.download-btn + .download-btn {
    margin-left: 0;
}

/* 当按钮在列表中时 */
li .download-btn {
    margin: 4px 8px 4px 0;
}

/* 当按钮在表格中时 */
td .download-btn,
th .download-btn {
    margin: 2px 4px;
}

/* ============================================
   加载状态样式（可选）
   ============================================ */
.download-btn.loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}

.download-btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: download-btn-spin 0.6s linear infinite;
}

@keyframes download-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   辅助功能优化
   ============================================ */

/* 键盘导航焦点样式 */
.download-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* 减少动画效果（用户偏好设置） */
@media (prefers-reduced-motion: reduce) {
    .download-btn {
        transition: none;
    }
    
    .download-btn:hover {
        transform: none;
    }
    
    .download-btn:active {
        transform: none;
    }
}

/* 高对比度模式支持 */
@media (forced-colors: active) {
    .download-btn {
        border: 1px solid currentColor;
    }
}

/* ============================================
   打印样式
   ============================================ */
@media print {
    .download-btn {
        display: inline-block;
        padding: 4px 8px;
        margin: 2px;
        color: #000 !important;
        background-color: #fff !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .download-btn::after {
        content: " [" attr(href) "]";
        font-size: 10px;
    }
}

/* ============================================
   兼容性修复
   ============================================ */

/* 修复某些主题的链接样式冲突 */
a.download-btn,
a.download-btn:link,
a.download-btn:visited {
    color: #ffffff !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

a.download-btn:hover,
a.download-btn:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* 修复flex布局冲突 */
.download-btn svg {
    flex-shrink: 0;
}

/* 修复图标颜色继承 */
.download-btn svg path {
    fill: none;
    stroke: currentColor;
}

/* ============================================
   动画优化
   ============================================ */

/* 入场动画（可选） */
@keyframes download-btn-fadein {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.download-btn.animate-in {
    animation: download-btn-fadein 0.3s ease-out;
}

/* ============================================
   提示Toast样式（由JS控制）- 与主题匹配
   ============================================ */
.download-btn-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background-color: var(--card-bg, rgba(0, 0, 0, 0.85));
    color: var(--text-color, #ffffff);
    border-radius: var(--download-btn-radius, 8px);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--box-shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.15));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    z-index: 10000;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--transition-speed, 0.3s) ease, transform var(--transition-speed, 0.3s) ease;
}

/* 深色模式下的Toast */
html[data-theme="dark"] .download-btn-toast {
    background-color: var(--card-bg, rgba(37, 37, 37, 0.95));
    color: var(--text-color, #e8e8e8);
    border-color: var(--border-color, rgba(255, 255, 255, 0.1));
}

.download-btn-toast.show {
    opacity: 1;
}

/* 移动端Toast调整 */
@media (max-width: 768px) {
    .download-btn-toast {
        bottom: 80px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: 90%;
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* ============================================
   调试模式样式（开发用）
   ============================================ */
.download-btn.debug {
    outline: 2px dashed red;
    outline-offset: 2px;
}

.download-btn.debug::before {
    content: 'DEBUG';
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    color: red;
}