/**
 * Fluid pagination – alla sidor i en container, prev/next runda (samma som aktuell sida).
 * Ingen ram. Aktuell sida = mörklila, vit text. Hover = mörkaste lila.
 * Ingen !important – tema laddar denna efter komponenter; styleguide/arkiv använder den.
 */
.cctrl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
  margin: var(--space-4, 24px) 0;
}

/* Container för sidnumren – rundade hörn (pill), ingen ram, bredare för utrymme runt markeringen */
.cctrl-pagination__numbers {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 24px;
  border-radius: 9999px;
  background: #fff;
  list-style: none;
  margin: 0;
  border: none;
  box-shadow: none;
  overflow: hidden;
}

.cctrl-pagination__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Siffror – alltid cirkelform (ingen flimmer när hover lämnar). */
.cctrl-pagination__numbers .page-numbers,
.cctrl-pagination__numbers a,
.cctrl-pagination__numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--lav-800, #3d3e66);
  font-size: var(--text-small, 0.875rem);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  box-shadow: none;
}

.cctrl-pagination__numbers a:hover {
  background: var(--lav-900, #3d3e66);
  color: #fff;
  border: none;
  border-radius: 50%;
}

/* Aktuell sida: cirkel runt siffran */
.cctrl-pagination__numbers .current,
.cctrl-pagination__numbers .page-numbers.current {
  background: var(--lav-600, #55578f);
  color: #fff;
  border: none;
  border-radius: 50%;
}

.cctrl-pagination__numbers .dots,
.cctrl-pagination__numbers .page-numbers.dots {
  background: transparent;
  cursor: default;
  border: none;
}

/* Prev/next – runda (samma storlek som aktuell sida). Ingen ram. */
.cctrl-pagination .prev,
.cctrl-pagination .next {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  border: none;
  color: var(--lav-800, #3d3e66);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  box-shadow: none;
  aspect-ratio: 1;
}

.cctrl-pagination .prev:hover,
.cctrl-pagination .next:hover {
  background: var(--lav-900, #3d3e66);
  color: #fff;
  border: none;
}

.cctrl-pagination .prev .cctrl-pagination__icon,
.cctrl-pagination .next .cctrl-pagination__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.cctrl-pagination .prev span,
.cctrl-pagination .next span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cctrl-pagination__icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Dark mode ─────────────────────────────────────────────────── */
html[data-theme="dark"] .cctrl-pagination__numbers {
  background: var(--bg-elev, #1e2132);
}

html[data-theme="dark"] .cctrl-pagination__numbers .page-numbers,
html[data-theme="dark"] .cctrl-pagination__numbers a,
html[data-theme="dark"] .cctrl-pagination__numbers span {
  color: var(--lav-200, #d0d4ee);
}

html[data-theme="dark"] .cctrl-pagination__numbers .dots,
html[data-theme="dark"] .cctrl-pagination__numbers .page-numbers.dots {
  color: var(--muted, #a3a8c2);
}

html[data-theme="dark"] .cctrl-pagination__numbers a:hover {
  background: var(--lav-700, #4a4b7c);
  color: #fff;
}

html[data-theme="dark"] .cctrl-pagination__numbers .current,
html[data-theme="dark"] .cctrl-pagination__numbers .page-numbers.current {
  background: var(--lav-500, #6b6daa);
  color: #fff;
}

/* Prev / Next */
html[data-theme="dark"] .cctrl-pagination .prev,
html[data-theme="dark"] .cctrl-pagination .next {
  background: var(--bg-elev, #1e2132);
  color: var(--lav-200, #d0d4ee);
}

html[data-theme="dark"] .cctrl-pagination .prev:hover,
html[data-theme="dark"] .cctrl-pagination .next:hover {
  background: var(--lav-700, #4a4b7c);
  color: #fff;
}

/* Fallback: page-numbers direkt i .cctrl-pagination (utan __numbers-wrapper) */
html[data-theme="dark"] .cctrl-pagination > .page-numbers,
html[data-theme="dark"] .cctrl-pagination > a.page-numbers {
  color: var(--lav-200, #d0d4ee);
}

html[data-theme="dark"] .cctrl-pagination > a.page-numbers:hover {
  background: var(--lav-700, #4a4b7c);
  color: #fff;
}

html[data-theme="dark"] .cctrl-pagination > .page-numbers.current {
  background: var(--lav-500, #6b6daa);
  color: #fff;
}