/* Pagination Container */
.pagination {
	display: flex;
	flex-wrap: wrap; /* Allows wrapping on smaller screens */
	list-style: none;
	padding: 0;
	margin: 1em 0 1.3em 0;
}

/* Pagination Links */
.pagination li {
	margin: 0 5px 0 0;
}

.pagination a {
	display: block;
	padding: 8px 16px; /* Slightly larger padding for a more clickable area */
	color: #AAA;
	text-decoration: none;
	border-radius: 4px;
	border: 1px solid transparent; /* Added for better hover and active state visuals */
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; /* Added smooth transition for color and border */
}

/* Hover State */
.pagination a:hover {
	background-color: #373b44;
	color: #fff;
	border-color: #373b44; /* Ensure border color matches background when hovered */
}

/* Active Page */
.pagination .active a {
	background-color: #3b5998; /* Different shade for active page */
	color: #fff;
	border-color: #4a69bd; /* Ensure border matches background for active state */
	cursor: default; /* Prevent hover effect on active page */
}

/* Disabled (if applicable for First/Last/Next/Previous) */
.pagination a:disabled {
	color: #555; /* Gray out disabled links */
	pointer-events: none;
	background-color: #2f3e47; /* Optional: slightly different background for disabled state */
}

.pagination .next a, 
.pagination .last a {
	font-weight: bold; /* Make "Next" and "Last" more prominent */
}

.pagination .prev a, 
.pagination .first a {
	font-weight: bold; /* Same for "Prev" and "First" */
}


/* Responsive Design */
@media (max-width: 768px) {
	.pagination a {
		padding: 6px 12px; /* Smaller padding for mobile */
		font-size: 14px; /* Adjust text size for better readability */
	}

	.pagination {
		flex-wrap: wrap; /* Allow pagination to wrap in smaller screens */
	}
}