/**
 * A7la7ayat EA Grid Pagination Styles (Dynamic Numbered Pagination)
 *
 * Active Page: Site Green (#8CC63F)
 * Inactive Pages: Site Pink (#ED217C)
 * Dynamic sliding pagination window with dots (...)
 * Zero overrides on EA Post Grid cards, images, fonts, or read more links.
 */

/* Hide default load more ONLY on target Topics grid */
.eael-load-more-button-wrap.a7la7ayat-hidden,
.eael-post-grid-load-more-btn.a7la7ayat-hidden,
.eael-load-more-button.a7la7ayat-hidden {
	display: none !important;
}

/* Smooth opacity transition while fetching page */
.eael-post-grid-container.a7la7ayat-grid-loading,
.eael-grid-post-holder.a7la7ayat-grid-loading,
.eael-post-appender.a7la7ayat-grid-loading {
	opacity: 0.45 !important;
	pointer-events: none !important;
	transition: opacity 0.2s ease-in-out;
}

/* Centered Pagination Navigation Bar */
.a7la7ayat-pagination-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 35px auto 15px auto;
	padding: 10px 0;
	direction: rtl;
	width: 100%;
	clear: both;
}

.a7la7ayat-pagination-list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex-wrap: wrap;
}

.a7la7ayat-pagination-item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: inline-flex;
	align-items: center;
}

/* Inactive Page Buttons: Site Pink (#ED217C) */
.a7la7ayat-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: 10px;
	border: 2px solid #ED217C;
	background: #ED217C;
	color: #ffffff !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 3px 10px rgba(237, 33, 124, 0.25);
	user-select: none;
	line-height: 1;
}

.a7la7ayat-page-btn:hover:not(.is-active) {
	background: #D81B60;
	border-color: #D81B60;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(237, 33, 124, 0.35);
}

/* Active Page Button: Site Green (#8CC63F) */
.a7la7ayat-page-btn.is-active {
	background: linear-gradient(135deg, #8CC63F 0%, #78B031 100%) !important;
	border-color: #8CC63F !important;
	color: #ffffff !important;
	font-weight: 800;
	cursor: default;
	transform: none !important;
	box-shadow: 0 4px 14px rgba(140, 198, 63, 0.4) !important;
}

/* Dots / Ellipsis Separator */
.a7la7ayat-pagination-dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 44px;
	padding: 0 4px;
	color: #ED217C;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 2px;
	user-select: none;
	cursor: default;
	line-height: 1;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 640px) {
	.a7la7ayat-pagination-nav {
		margin-top: 25px;
	}

	.a7la7ayat-pagination-list {
		gap: 6px;
	}

	.a7la7ayat-page-btn {
		min-width: 38px;
		height: 38px;
		padding: 0 10px;
		font-size: 14px;
		border-radius: 8px;
	}

	.a7la7ayat-pagination-dots {
		min-width: 24px;
		height: 38px;
		font-size: 16px;
	}
}