/* =========================================================
   MODERN PAGINATION
   Website Ditjen Kesehatan Lanjutan
   Global Pagination Component

   Dipakai untuk seluruh pagination website.
   Kompatibel dengan pagination CodeIgniter 3 yang saat ini
   menggunakan <li class="page-item"><span class="page-link">
========================================================= */

:root {
	--pagination-primary: #079b91;
	--pagination-primary-hover: #078c83;
	--pagination-border: #d7e6e3;
	--pagination-bg: #ffffff;
	--pagination-text: #078f86;
}

/* =========================================================
   WRAPPER GLOBAL
========================================================= */

.modern-pagination {
	width: 100%;

	display: flex;
	justify-content: center;
	align-items: center;

	margin-top: 55px;
	padding-top: 35px;

	border-top: 1px solid #edf2f0;

	box-sizing: border-box;
}

/* =========================================================
   CONTAINER DARI CODEIGNITER
========================================================= */

.modern-pagination .pagging,
.modern-pagination nav,
.modern-pagination .pagination {
	margin: 0 !important;
	padding: 0 !important;
}

/* =========================================================
   UL PAGINATION
========================================================= */

.modern-pagination ul.pagination {
	display: flex !important;

	align-items: center !important;
	justify-content: center !important;

	flex-wrap: wrap;

	gap: 10px !important;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;

	border: 0 !important;

	background: transparent !important;
}

/* =========================================================
   LI
========================================================= */

.modern-pagination ul.pagination > li.page-item {
	display: block !important;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;

	border: 0 !important;
}

/* =========================================================
   PAGE LINK
   Ini sengaja menargetkan <span class="page-link"> milik CI3
========================================================= */

.modern-pagination ul.pagination > li.page-item > .page-link,
.modern-pagination ul.pagination > li.page-item > a.page-link,
.modern-pagination ul.pagination > li.page-item > span.page-link {
	width: 57px !important;
	min-width: 57px !important;

	height: 57px !important;

	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	box-sizing: border-box !important;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--pagination-text) !important;

	background: var(--pagination-bg) !important;

	border: 1px solid var(--pagination-border) !important;

	border-radius: 13px !important;

	font-family: inherit !important;

	font-size: 16px !important;
	font-weight: 600 !important;

	line-height: 1 !important;

	text-align: center !important;
	text-decoration: none !important;

	box-shadow: none !important;

	cursor: pointer;

	transition:
		color 0.25s ease,
		background-color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease !important;
}

/* =========================================================
   ACTIVE
========================================================= */

.modern-pagination ul.pagination > li.page-item.active > .page-link {
	color: #ffffff !important;

	background: var(--pagination-primary) !important;

	border-color: var(--pagination-primary) !important;

	box-shadow: none !important;

	transform: none !important;
}

/* =========================================================
   HOVER
========================================================= */

.modern-pagination
	ul.pagination
	> li.page-item:not(.active)
	> .page-link:hover {
	color: var(--pagination-primary) !important;

	background: #ffffff !important;

	border-color: #b9deda !important;

	transform: translateY(-2px) !important;

	box-shadow: 0 7px 18px rgba(7, 155, 145, 0.08) !important;
}

/* =========================================================
   ACTIVE HOVER
========================================================= */

.modern-pagination ul.pagination > li.page-item.active > .page-link:hover {
	color: #ffffff !important;

	background: var(--pagination-primary-hover) !important;

	border-color: var(--pagination-primary-hover) !important;

	transform: none !important;
}

/* =========================================================
   PREV / NEXT / FIRST / LAST
   Tetap berbentuk kotak yang sama.
========================================================= */

.modern-pagination ul.pagination > li.page-item:first-child > .page-link,
.modern-pagination ul.pagination > li.page-item:last-child > .page-link {
	width: 57px !important;
	min-width: 57px !important;
}

/* =========================================================
   DISABLED
   Jika pagination CI3 menghasilkan disabled item.
========================================================= */

.modern-pagination ul.pagination > li.page-item.disabled > .page-link {
	color: #a7b9b5 !important;

	background: #f8fbfa !important;

	border-color: #e4eeeb !important;

	cursor: default !important;

	pointer-events: none;
}

/* =========================================================
   FOCUS
========================================================= */

.modern-pagination .page-link:focus {
	outline: none !important;

	box-shadow: 0 0 0 3px rgba(7, 155, 145, 0.12) !important;
}

/* =========================================================
   REMOVE BOOTSTRAP / LEGACY PAGINATION STYLING
   Mencegah CSS lama mengambil alih komponen global.
========================================================= */

.modern-pagination ul.pagination::before,
.modern-pagination ul.pagination::after {
	display: none !important;
}

/* =========================================================
   RESPONSIVE TABLET
========================================================= */

@media (max-width: 767px) {
	.modern-pagination {
		margin-top: 45px;

		padding-top: 28px;
	}

	.modern-pagination ul.pagination {
		gap: 7px !important;
	}

	.modern-pagination ul.pagination > li.page-item > .page-link,
	.modern-pagination ul.pagination > li.page-item > a.page-link,
	.modern-pagination ul.pagination > li.page-item > span.page-link {
		width: 47px !important;
		min-width: 47px !important;

		height: 47px !important;

		border-radius: 11px !important;

		font-size: 14px !important;
	}

	.modern-pagination ul.pagination > li.page-item:first-child > .page-link,
	.modern-pagination ul.pagination > li.page-item:last-child > .page-link {
		width: 47px !important;
		min-width: 47px !important;
	}
}

/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media (max-width: 480px) {
	.modern-pagination {
		margin-top: 40px;

		padding-top: 25px;
	}

	.modern-pagination ul.pagination {
		gap: 6px !important;
	}

	.modern-pagination ul.pagination > li.page-item > .page-link,
	.modern-pagination ul.pagination > li.page-item > a.page-link,
	.modern-pagination ul.pagination > li.page-item > span.page-link {
		width: 42px !important;
		min-width: 42px !important;

		height: 42px !important;

		border-radius: 10px !important;

		font-size: 13px !important;
	}

	.modern-pagination ul.pagination > li.page-item:first-child > .page-link,
	.modern-pagination ul.pagination > li.page-item:last-child > .page-link {
		width: 42px !important;
		min-width: 42px !important;
	}
}

/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
	.modern-pagination .page-link {
		transition: none !important;
	}
}