/**
 * Pagination fixes for Unlimited Elements widgets on WooCommerce archive pages.
 *
 * Listeo's style.css contains a `Post Navigation` block that styles every
 * `.nav-links span` as `display: block` (intended for the single-post
 * prev/next navigation). Because the rule is not scoped, it also matches the
 * `<span class="page-numbers current">` and `<span class="page-numbers dots">`
 * produced by `get_the_posts_pagination()` inside Unlimited Elements'
 * `.uc-posts-pagination` wrapper, forcing each page number onto its own line.
 *
 * These rules undo that bleed and lay the page numbers out horizontally with
 * the same rounded look used elsewhere on the site.
 */

.uc-posts-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: center;
	min-height: 0;
	width: auto;
	margin: 20px 0;
	padding: 0;
}

.uc-posts-pagination .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	margin: 0;
	border-radius: 50%;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: #333;
	background-color: #f0f0f0;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.uc-posts-pagination .nav-links a.page-numbers:hover {
	background-color: #66676b;
	color: #fff;
}

.uc-posts-pagination .nav-links .page-numbers.current {
	background-color: #66676b;
	color: #fff;
}

.uc-posts-pagination .nav-links .page-numbers.dots {
	background-color: transparent;
	color: #999;
}

.uc-posts-pagination .nav-links .page-numbers.prev,
.uc-posts-pagination .nav-links .page-numbers.next {
	min-width: 0;
	padding: 0 14px;
	border-radius: 18px;
}