/* ══════════════════════════════════════════════════════════════════
   qpage-r26.css — 报价表分页条
   2026-09-23 Yannie:「只展示20條,支持用戶翻頁查看,不然頁面太長了」
   ══════════════════════════════════════════════════════════════════
   全部用 quotes-r19.css 已经在用的那套 token(--c-text-3 / --c-primary-*
   / --r-pill / --s-*),不新增任何颜色值 —— 这条分页条要看起来像是
   本来就在这张表下面的,不像后贴的。
   页码按钮刻意复用 .qtab 的视觉语言(pill、选中态填 primary-50),
   因为它和上面那排分类页签是同一类控件:都是「换一批看」。
   ══════════════════════════════════════════════════════════════════ */

.qpage {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-block-start: var(--s-4);
}

.qpage[hidden] { display: none; }

/* 「第 1–20 条,共 116 条」—— 和 .qsource__text 同级的次要信息,
   所以用同一档字号和颜色,不让它比表格本身抢眼。 */
.qpage__count {
  font-size: var(--fs-eyebrow);
  color: var(--c-text-3);
  margin: 0;
}
.qpage__count b {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--c-text-2);
}

.qpage__nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-inline-start: auto;
}

.qpage__btn {
  min-width: 2.25rem;
  padding: var(--s-2) var(--s-3);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}

.qpage__btn:hover:not(:disabled) {
  color: var(--c-text);
  background: var(--c-surface-subtle);
}

.qpage__btn[aria-current="page"] {
  color: var(--c-primary-700);
  background: var(--c-primary-50);
  border-color: var(--c-primary-600);
}

/* 到头了的上一页/下一页:降透明度而不是隐藏 —— 位置固定住,
   翻页时按钮不会左右跳。 */
.qpage__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* 数字用等宽,页码多了以后宽度不会一格一格地抖 */
.qpage__btn--num { font-family: var(--font-mono); font-weight: 500; }

.qpage__gap {
  padding-inline: var(--s-1);
  color: var(--c-text-3);
  user-select: none;
}

/* 窄屏:上一页/下一页保留,中间的数字省到只剩当前页附近,
   计数行自己占一行,不和按钮挤。 */
@media (max-width: 640px) {
  .qpage { gap: var(--s-2); }
  .qpage__count { flex-basis: 100%; }
  .qpage__nav { margin-inline-start: 0; }
  .qpage__btn { padding: var(--s-2); min-width: 2rem; }
}