/* ============================================================
   公共分页器样式  v3.10（与 js/pager.js 配套）
   ⚠️ 为什么独立成文件：后台 admin.html **只加载 admin.css**，
      留在 style.css 里后台的分页器就没样式（同 lightbox 的处理，见文档 7.8）。
   引入：products.html / packaging.html / admin.html 各加一行 <link>。
   ============================================================ */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 34px;
}

/* 上一页 / 下一页 / 页号：同一个视觉
   ⚠️ 字体不要写 `font: 600 13.5px/1 var(--sans)` 这种简写：admin.css 的 :root **没有 --sans**
      （只有 --blue/--ink/--line/--white…），var() 取不到值会让整条简写声明失效 → 后台字号/字重全丢。
      所以这里拆成 font-family(带兜底字体栈) + font-size/weight/line-height 长写法，前台后台都一样。 */
.pager-btn,
.pager-num {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white, #fff);
  color: var(--ink);
  font-family: var(--sans, "Microsoft YaHei", "微软雅黑", "PingFang SC", "Noto Sans SC", Arial, sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pager-num { padding: 0 6px; }

.pager-btn:hover:not(:disabled),
.pager-num:hover:not(.active) { border-color: var(--blue); color: var(--blue); }

.pager-num.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 700;
  cursor: default;
}

.pager-btn:disabled { opacity: .45; cursor: not-allowed; }

.pager-ellipsis { color: var(--muted); font-size: 13.5px; letter-spacing: 1px; }

/* 右侧「共 N 页 · 到第 __ 页」：整体包在 .pager-jump-wrap 里（桌面接在「下一页」后面） */
.pager-jump-wrap { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; flex-wrap: wrap; justify-content: center; }
.pager-total { color: var(--muted); font-size: 13px; white-space: nowrap; }
.pager-jump { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.pager-input {
  width: 54px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans, "Microsoft YaHei", "微软雅黑", "PingFang SC", "Noto Sans SC", Arial, sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
.pager-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10, 143, 71, .12); }

/* ---------- 移动端：收窄按钮与间距（页号个数由 js/pager.js 按视口决定） ---------- */
@media (max-width: 620px) {
  .pager { gap: 6px; margin-top: 26px; }
  /* 收窄：360px 宽的小屏也能把「上一页 1 … 6 7 … 100 下一页」放在一行里 */
  .pager-btn, .pager-num { min-width: 32px; height: 32px; padding: 0 7px; font-size: 12.5px; border-radius: 7px; }
  /* 「共 N 页 / 到第 __ 页」整行换行 + 居中，不再和页号抢宽度 */
  .pager-jump-wrap { flex: 0 0 100%; margin: 6px 0 0; gap: 8px; }
  .pager-jump { font-size: 12.5px; }
  .pager-input { width: 46px; height: 30px; font-size: 12.5px; }
}