/*
  css/components/pager.css
  Companion to templates/pager.html.twig.

  I don't have your tokens.css in front of me, so the var(--cm-color-*)
  and var(--cm-radius-*) names below are guesses based on your existing
  cm- naming convention (cm-btn, cm-trust-pill, etc.) — swap them for
  whatever's actually declared in tokens.css. Fallback hex values after
  each var() are there so this doesn't break if the variable name is wrong,
  but treat those as temporary, not final.
*/

nav.cm-pager {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 64px;
}

nav.cm-pager .cm-pager__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  flex-wrap: wrap;
}

.cm-pager__item {
  display: flex;
}

.cm-pager__item--ellipsis {
  display: flex;
  align-items: center;
  padding: 0 4px;
  color: var(--cm-color-muted, #7A8794);
}

.cm-pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--cm-color-border, #D3DDE7);
  border-radius: var(--cm-radius-full, 999px);
  background: var(--cm-color-surface, #FFFFFF);
  color: var(--cm-color-ink, #182029);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cm-pager__link:hover {
  border-color: var(--cm-color-primary, #B3122B);
  color: var(--cm-color-primary, #B3122B);
}

.cm-pager__link--current {
  background: var(--cm-color-primary, #B3122B);
  border-color: var(--cm-color-primary, #B3122B);
  color: #FFFFFF;
}

.cm-pager__link--current:hover {
  background: var(--cm-color-primary, #B3122B);
  color: #FFFFFF;
}

.cm-pager__link--nav {
  color: var(--cm-color-primary, #B3122B);
  font-weight: 700;
}