/* 外层容器，隐藏溢出内容、提供按钮定位参考点 */
.rebate-panel {
    /* 给按钮提供参考点 */
    position: relative;
    overflow: hidden;
    padding-bottom: 30px;
}

/* flex 横向滚动容器，支持平滑滚动和滚动捕捉 */
.rebate-panel .rebate-slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/* 隐藏水平滚动条，使滑动视觉上更干净 */
.rebate-panel .rebate-slides::-webkit-scrollbar {
    display: none;
}

/* 每个子滑块占满容器宽度，滚动结束自动对齐 */
.rebate-panel .rebate-slide {
    min-width: 100%;
    scroll-snap-align: start;
}

/* 复制按钮基础样式 */
.rebate-panel .copy-btn {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    border: none;
    padding: 14px 32px;
    font-size: 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
    font-weight: 600;
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    z-index: 10;
    overflow: hidden;
    transition: all 0.3s ease;
}
/* 悬停效果 */
.rebate-panel .copy-btn:hover {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0 7px 15px rgba(46, 204, 113, 0.4);
}
/* 点击效果 */
.rebate-panel .copy-btn:active {
    transform: translateX(-50%) translateY(0);
}
/* 流光效果 */
.rebate-panel .copy-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
    transition: all 0.6s ease;
}
.rebate-panel .copy-btn:hover::after {
    transform: translateX(100%) rotate(30deg);
}

/* 按钮点击通知样式 */
.rebate-panel .notification {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #2ecc71;
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 10;
    font-weight: 600;
}
/* 定义动画帧fadeInOut */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    10% {
        opacity: 1;
        transform: translateY(0);
    }
    90% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}
.rebate-panel .notification.show {
    display: block;
    animation: fadeInOut 3s forwards;
}
.rebate-panel .notification.error {
    background: #e74c3c;
}