/* 分页容器 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

/* 所有页码按钮 */
.pagination li a,
.pagination li span {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  background: #fff;
  transition: all 0.2s;
}

/* 鼠标悬浮 */
.pagination li a:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

/* 当前激活页码 */
.pagination li.active span {
  background: #005a94;
  color: #fff;
  border-color: #005a94;
  font-weight: bold;
}

/* 禁用页码（不可点） */
.pagination li.disabled span {
  color: #ccc;
  cursor: not-allowed;
  background: #f9f9f9;
}

/* 1. 分页容器：居中显示 */
.pagination {
  display: flex;
  justify-content: center; /* 水平居中 */
  padding: 20px 0;
  list-style: none; /* 移除列表默认样式 */
  margin: 0;
}

/* 2. 列表项：设置间距 */
.pagination li {
  margin: 0 4px; /* 每个页码之间的间距 */
}

/* 3. 链接和文本样式：统一风格 */
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px; /* 为 « 和 » 符号提供内部空间 */
  border: 1px solid #ddd;
  border-radius: 4px; /* 圆角 */
  text-decoration: none;
  color: #333;
  font-size: 14px;
  transition: all 0.2s ease; /* 添加平滑过渡效果 */
  box-sizing: border-box;
}

/* 4. 悬停效果：鼠标放上去的变化 */
.pagination a:hover {
  background-color: #f8f9fa;
  border-color: #007bff;
  color: #007bff;
}

/* 5. 当前激活页：高亮显示 */
.pagination .active span {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
  font-weight: bold;
}

/* 6. 禁用状态：灰色且不可点击 */
.pagination .disabled span {
  background-color: #e9ecef;
  color: #6c757d;
  border-color: #dee2e6;
  cursor: not-allowed;
}