.ui-pagination {
	--ui-pag-bg: #fff;
	--ui-pag-fg: #1f2937; /* slate-800 */
	--ui-pag-fg-muted: #6b7280; /* slate-500 */
	--ui-pag-border: #e5e7eb; /* gray-200 */
	--ui-pag-accent: #111827; /* gray-900 */
	--ui-pag-accent-contrast: #ffffff;
	--ui-pag-hover: #f3f4f6; /* gray-100 */
	--ui-pag-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.06);

	display: grid;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin: 16px 0 24px;
	color: var(--ui-pag-fg);
}

.ui-pagination__summary {
	text-align: center;
	font-size: 14px;
	color: var(--ui-pag-fg-muted);
}

.ui-pagination__list {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ui-pag-bg);
	border: 1px solid var(--ui-pag-border);
	border-radius: 12px;
	padding: 6px;
	box-shadow: var(--ui-pag-shadow);
    padding-bottom: 7px;
}

.ui-pagination__item {
	list-style: none;
}

.ui-pagination__btn,
.ui-pagination__page {
	place-items: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 10px;
	border: 1px solid transparent;
	color: var(--ui-pag-fg);
	text-decoration: none;
	font-size: 14px;
	line-height: 1;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .06s ease;
}

.ui-pagination__btn:hover,
.ui-pagination__page:hover {
	background: var(--ui-pag-hover);
}

.ui-pagination__btn[aria-disabled="true"],
.ui-pagination__btn[aria-disabled="true"]:hover {
	color: var(--ui-pag-fg-muted);
	cursor: not-allowed;
	background: transparent;
}

.ui-pagination__btn--edge {
	font-weight: 600;
}

.ui-pagination__page.is-current {
	background: var(--ui-pag-accent);
	color: var(--ui-pag-accent-contrast);
	border-color: var(--ui-pag-accent);
}

.ui-pagination__ellipsis {
	display: inline-block;
	min-width: 24px;
	text-align: center;
	color: var(--ui-pag-fg-muted);
}

/* Focus styles for accessibility */
.ui-pagination a:focus-visible,
.ui-pagination button:focus-visible,
.ui-pagination__page:focus-visible {
	outline: 2px solid #2563eb; /* blue-600 */
	outline-offset: 2px;
}

/* Compact on very small screens */
@media (max-width: 420px) {
  .ui-pagination__list {
    gap: 4px;
    padding: 4px;
  }
  .ui-pagination__btn,
  .ui-pagination__page {
    min-width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 13px;
  }
}/* Hide some edges on extra narrow screens, but keep Prev/Next + current context */
@media (max-width: 360px) {
	.ui-pagination__btn--edge { display: none; }
}

/* Dark mode (optional if you add .dark on body) */
.dark .ui-pagination {
	--ui-pag-bg: #111827;
	--ui-pag-fg: #e5e7eb;
	--ui-pag-fg-muted: #9ca3af;
	--ui-pag-border: #374151;
	--ui-pag-accent: #f59e0b; /* amber-500 */
	--ui-pag-accent-contrast: #111827;
	--ui-pag-hover: #1f2937;
}