/* 按钮高亮效果优化 */

/* 主要按钮样式 */
.btn-primary {
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(81, 48, 142, 0.2);
}

.btn-primary:hover {
    background-color: #3d2269 !important;
    box-shadow: 0 6px 12px rgba(81, 48, 142, 0.4);
}

.btn-primary:active {
    background-color: #2a1749 !important;
    box-shadow: 0 2px 6px rgba(81, 48, 142, 0.6);
}

/* 次要按钮样式 */
.btn-default {
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(81, 48, 142, 0.1);
}

.btn-default:hover {
    background-color: #51308e !important;
    color: #fff !important;
    border-color: #51308e !important;
    box-shadow: 0 6px 12px rgba(81, 48, 142, 0.3);
}

.btn-default:active {
    background-color: #3d2269 !important;
    color: #fff !important;
    border-color: #3d2269 !important;
    box-shadow: 0 2px 6px rgba(81, 48, 142, 0.5);
}

/* 分类按钮样式 */
.category-btn {
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.category-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.category-btn:hover {
    background-color: #51308e !important;
    color: #fff !important;
    border-color: #51308e !important;
    box-shadow: 0 4px 8px rgba(81, 48, 142, 0.25);
}

.category-btn:hover::before {
    left: 100%;
}

.category-btn:active {
    background-color: #3d2269 !important;
    color: #fff !important;
    border-color: #3d2269 !important;
    box-shadow: 0 2px 4px rgba(81, 48, 142, 0.4);
}

/* 按钮聚焦效果 */
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(81, 48, 142, 0.25) !important;
}

/* 移动端按钮效果优化 */
@media (max-width: 767px) {
    .btn-primary:active {
        background-color: #3d2269 !important;
        box-shadow: 0 1px 3px rgba(81, 48, 142, 0.4);
    }
    
    .btn-default:active {
        background-color: #51308e !important;
        color: #fff !important;
        box-shadow: 0 1px 3px rgba(81, 48, 142, 0.3);
    }
    
    .category-btn:active {
        background-color: #51308e !important;
        color: #fff !important;
        box-shadow: 0 1px 3px rgba(81, 48, 142, 0.25);
    }
}

/* 按钮禁用状态 */
.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none !important;
}

.btn:disabled:hover,
.btn.disabled:hover {
    background-color: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    box-shadow: none !important;
}

/* 按钮加载状态 */
.btn.loading {
    position: relative;
    color: transparent !important;
}

.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: btn-loading-spin 1s linear infinite;
}

@keyframes btn-loading-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 按钮组间距优化 */
.btn-group .btn {
    margin: 0 5px 10px 0;
}

.btn-group .btn:last-child {
    margin-right: 0;
}