.pagination {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: fit-content;
  max-width: 100%;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--primary-color) 32%, transparent);
  border-radius: 0.875rem;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent-color) 10%, transparent), transparent 45%),
    color-mix(in srgb, var(--bg-color) 88%, #1a1a1d 12%);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.pagination--previous,
.pagination--next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--bg-color) 82%, #ffffff 18%);
  color: var(--secondary-color);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pagination--previous:hover,
.pagination--next:hover,
.pagination--previous:focus-visible,
.pagination--next:focus-visible {
  border-color: color-mix(in srgb, var(--primary-color) 70%, #ffffff 30%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 24%, transparent);
  text-decoration: none;
}

.pagination--previous.--disabled,
.pagination--next.--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination--page,
.pagination--per-page {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: color-mix(in srgb, var(--secondary-color) 88%, #ffffff 12%);
  font-size: 0.92rem;
}

.pagination--page > span {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.pagination--page input,
.pagination--per-page select {
  width: 3rem;
  min-width: 3rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--bg-color) 88%, #ffffff 12%);
  color: var(--secondary-color);
  font: inherit;
}

.pagination--page input:focus,
.pagination--per-page select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary-color) 70%, #ffffff 30%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.pagination--per-page select {
  min-width: 4.2rem;
}