/* 分页容器：800px宽度+水平居中+基础样式 */
.pagination {
  list-style: none;
  display: block; /* 块级元素才能用margin:0 auto居中 */
  width: 800px; /* 整体宽度800px */
  margin: 0 auto; /* 水平居中 */
  vertical-align: middle;
  text-align: center; /* 内部元素居中 */
}

.pagination ul {
  text-align: center;
  vertical-align: middle;
  padding: 0; /* 清除默认内边距 */
  margin: 0; /* 清除默认外边距 */
}

/* 分页项：白底+圆形外框基础 */
.pagination li {
  display: inline-block !important;
  margin: 3px; /* 项间距，避免圆形重叠 */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1);
}

/* 分页链接：正圆核心（宽高相等）+1px黑边+文字居中 */
.pagination a {
  color: #333;
  width: 60px; /* 固定宽度，与高度一致形成正圆 */
  height: 60px; /* 固定高度，与宽度一致形成正圆 */
  line-height: 60px; /* 文字垂直居中 */
  background: #fff; /* 鼠标划过红色背景 */
  display: block;
  text-align: center; /* 文字水平居中 */
  padding: 0; /* 清除原padding，避免破坏正圆 */
  border: 1px solid #eeebe5; /* 1px黑色边框 */
  border-radius: 50%; /* 圆形外框 */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1); /* 统一过渡时长 */
}

/* 鼠标划过：红色背景+白色文字+红色边框+保持圆形 */
.pagination a:hover {
  background: #ff0000; /* 鼠标划过红色背景 */
  color: #fff; /* 白色文字 */
  border-color: #ff0000; /* 边框同步变红 */
  border-radius: 50%; /* 确保hover时仍为圆形 */
}

/* 禁用状态：指针样式+文字颜色+保持黑边圆形 */
.pagination .disabled a:link,
.pagination .disabled a:visited,
.pagination .disabled a:hover {
  cursor: not-allowed;
  pointer-events: none;
  color: #ff0000;
  background: #fff; /* 禁用状态保留白底 */
  border: 1px solid #eeebe5; /* 禁用状态保留黑边 */
  border-radius: 50%; /* 禁用状态保持圆形 */
}

/* 激活状态：禁用指针+保持圆形 */
.pagination .active {
  pointer-events: none;
}

/* 激活状态链接：红底白字+红边圆形 */
.pagination .active a {
  background: #ff0000; /* 激活状态同hover红色背景 */
  color: #fff; /* 激活状态白色文字 */
  border-color: #ff0000; /* 激活状态边框变红 */
  border-radius: 50%; /* 激活状态保持圆形 */
}

/* 分页组样式：适配圆形外框，移除原直角边框 */
.pagination-group {
  border: none; /* 移除原右侧边框，避免破坏圆形 */
}

.pagination-group li {
  float: none; /* 取消浮动，保持inline-block居中 */
  border-right: none; /* 移除原右侧边框 */
}

.pagination-group .active a,
.pagination-group a:hover {
  background: #ff0000; /* 分组hover/激活同红色背景 */
  border-color: #ff0000; /* 分组hover/激活边框变红 */
  border-radius: 50%; /* 分组项保持圆形 */
}

/* 大尺寸分页：放大圆形尺寸+同步黑边 */
.pagination-big a {
  width: 48px; /* 大分页宽高 */
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  border: 1px solid #eeebe5; /* 大分页保留1px黑边 */
}

/* 小尺寸分页：缩小圆形尺寸+同步黑边 */
.pagination-small a {
  width: 32px; /* 小分页宽高 */
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  border: 1px solid #eeebe5; /* 小分页保留1px黑边 */
}

/* 不同边框主题的激活状态：保持白色文字+红边 */
.pagination.border-main .active a,
.pagination.border-sub .active a,
.pagination.border-dot .active a,
.pagination.border-black .active a,
.pagination.border-gray .active a,
.pagination.border-red .active a,
.pagination.border-yellow .active a,
.pagination.border-blue .active a,
.pagination.border-green .active a {
  color: #fff;
  border-color: #ff0000;
  border-radius: 50%;
}

/* 简易分页（pager）：800px宽度+水平居中+圆形外框 */
.pager {
  list-style: none;
  padding: 0;
  margin: 0 auto; /* 水平居中 */
  width: 800px; /* 整体宽度800px */
  text-align: center;
  clear: both;
}

.pager li {
  display: inline-block;
  margin: 3px; /* 项间距 */
}

/* 简易分页链接：正圆+白底+1px黑边+hover红 */
.pager li a {
  color: #333;
  background: #ffffff; /* 白底 */
  border: 1px solid #eeebe5; /* 1px黑色边框 */
  border-radius: 50%; /* 圆形外框 */
  width: 60px; /* 正圆宽高 */
  height: 60px;
  line-height: 60px; /* 文字垂直居中 */
  display: block;
  text-align: center;
  padding: 0; /* 清除原padding */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1);
}

/* 简易分页hover：红色背景+白色文字+红色边框 */
.pager li a:hover {
  background-color: #ff0000; /* 红色背景 */
  color: #fff; /* 白色文字 */
  border-color: #ff0000; /* 边框同步变红 */
  border-radius: 50%; /* 保持圆形 */
}

/* 分页前后按钮：强化圆形+1px黑边+hover红 */
.pager-prev,
.pager .pager-prev,
.pager-next,
.pager .pager-next {
  font-size: 24px; /* 缩小字体，适配圆形 */
  padding: 0;
  color: #333; /* 默认文字色 */
  background-color: #ffffff; /* 白底 */
  border: 1px solid #eeebe5; /* 1px黑色边框 */
  width: 50px;
  height: 50px;
  line-height: 50px; /* 文字垂直居中 */
  display: inline-block;
  border-radius: 50%; /* 圆形外框 */
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.pager-prev:hover,
.pager-next:hover {
  background-color: #ff0000; /* 鼠标划过红色背景 */
  color: #fff; /* 白色文字 */
  border-color: #ff0000; /* 边框同步变红 */
}

/* 简易分页组：适配圆形 */
.pager-group li {
  float: none; /* 取消浮动，保持居中 */
  display: inline-block;
}

.pager-group li a {
  border-radius: 50%; /* 分组项保持圆形 */
  border: 1px solid #eeebe5; /* 分组项保留1px黑边 */
}