/* 基本分页容器样式 */
.pagination {
    display: flex;
    padding-bottom: 100px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap; /* 允许按钮换行，适应小屏幕 */
}

/* 分页按钮的基本样式 */
.pagination-button {
    margin: 5px;
    padding: 10px 16px;
    border: none;
    background-color: #f0f0f0;
    color: #333;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
}

/* 悬停效果 */
.pagination-button:hover:not(.active):not(:disabled) {
    background-color: #007bff;
    color: #fff;
}

/* 活动页按钮样式 */
.pagination-button.active {
    background-color: #007bff;
    color: #fff;
    cursor: default;
}

/* 禁用按钮样式 */
.pagination-button:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

/* 移动端适配 */
@media (max-width: 600px) {
    .pagination-button {
        padding: 8px 12px;
        font-size: 14px;
        margin: 3px;
    }
}

/* 额外优化：第一页和最后一页按钮的特殊样式 */
.pagination-button:first-child,
.pagination-button:last-child {
    font-weight: bold;
}

/* 额外优化：页面按钮之间的分隔线（可选） */
.pagination-button + .pagination-button {
    /* 可以添加分隔线或其他装饰 */
    /* 例如，添加左边框分隔 */
    /* border-left: 1px solid #ddd; */
}