/**
 * 按钮修复样式
 * 确保转换按钮有明确的视觉反馈
 */

/* 基础转换按钮样式 */
#convert-btn,
#batch-convert-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease, transform 0.1s ease;
}

/* 点击效果 */
#convert-btn:active,
#batch-convert-btn:active {
    transform: scale(0.97);
}

/* 禁用状态 */
#convert-btn:disabled,
#batch-convert-btn:disabled {
    cursor: not-allowed;
}

/* 悬停效果 */
#convert-btn:hover:not(:disabled),
#batch-convert-btn:hover:not(:disabled) {
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.2);
    transform: translateY(-2px);
}

/* 动画效果 */
.scale-95 {
    transform: scale(0.95);
}

/* 旋转动画 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fa-spinner {
    animation: spin 1.2s linear infinite;
}

/* 点击波纹效果 */
#convert-btn::after,
#batch-convert-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
}

#convert-btn:focus:not(:active)::after,
#batch-convert-btn:focus:not(:active)::after {
    animation: ripple 1s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0) translate(-50%, -50%);
        opacity: 0.5;
    }
    100% {
        transform: scale(20, 20) translate(-50%, -50%);
        opacity: 0;
    }
}

/* 确保下载按钮有视觉反馈 */
#download-btn, 
#download-all-btn,
.download-item {
    transition: all 0.3s ease;
}

#download-btn:hover, 
#download-all-btn:hover,
.download-item:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

#download-btn:active, 
#download-all-btn:active,
.download-item:active {
    transform: translateY(0);
}