/* 按钮涟漪效果 */
.ripple-button {
    position: relative;
    overflow: hidden;
}

/* 确保所有可能有涟漪效果的按钮都有overflow: hidden */
button, .btn, .action-btn, .like-button, .view-details, .copy-btn, .close-btn {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ripple 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* 按钮悬停效果 */
button:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.action-btn:hover, .like-button:hover, .view-details:hover {
    filter: brightness(1.1);
    transition: filter 0.3s ease;
}

/* 按钮点击效果 */
button:not(:disabled):active {
    transform: translateY(0);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

/* 按钮状态样式 */
.button-success {
    background-color: #4caf50 !important;
    border-color: #4caf50 !important;
    color: white !important;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.4) !important;
    transition: all 0.3s ease !important;
}

.button-error {
    background-color: #f44336 !important;
    border-color: #f44336 !important;
    color: white !important;
    box-shadow: 0 0 10px rgba(244, 67, 54, 0.4) !important;
    transition: all 0.3s ease !important;
}


@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.5);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(30, 136, 229, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(30, 136, 229, 0);
    }
}

.button-pulse {
    animation: pulse-animation 1s ease-out;
}

/* 按钮涟漪颜色变体 */
.ripple-primary {
    background-color: rgba(30, 136, 229, 0.3);
}

.ripple-success {
    background-color: rgba(76, 175, 80, 0.3);
}

.ripple-warning {
    background-color: rgba(255, 193, 7, 0.3);
}

/* 按钮禁用状态动画 */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transition: opacity 0.3s ease;
}