/**
 * Pagination Component
 * ============================================================================
 * Styles for page navigation controls (prev/next, page numbers).
 *
 * Load order: After 01-base.css, before page-specific styles
 * Dependencies: 00-tokens.css (design tokens)
 *
 * NOTE: Swiper pagination is separate (in swiper.css or styles.css)
 * ============================================================================
 */

/* Pagination layout container */
#pagination {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 70px;
	width: 100%;
}

/* Previous button */
.pagination-prev {
	background-color: var(--white);
	border: 1px solid var(--bg-2);
	border-top-left-radius: var(--radius-xl);
	border-bottom-left-radius: var(--radius-xl);
	color: var(--brand-main);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 20px 0 25px;
}

/* Page numbers container */
.page-numbers {
	display: flex;
}

/* Page number items */
.page-numbers a,
.page-numbers span {
	align-items: center;
	background-color: var(--white);
	border: 1px solid var(--bg-2);
	color: var(--brand-main);
	display: flex;
	justify-content: center;
	height: 48px;
	width: 44px;
}

/* Active page number */
.page-numbers .active {
	background-color: var(--brand-main);
	color: var(--white);
}

/* Next button */
.pagination-next {
	background-color: var(--white);
	border: 1px solid var(--bg-2);
	border-top-right-radius: var(--radius-xl);
	border-bottom-right-radius: var(--radius-xl);
	color: var(--brand-main);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 25px 0 20px;
}

/* Pagination wrapper */
.pagination-container {
	align-items: center;
	display: flex;
	margin: 0 auto;
	text-align: center;
	width: fit-content;
}

/* Disabled state for prev/next */
span.pagination-next,
span.pagination-prev {
	opacity: 0.3;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 768px) {
	/* Hide pagination in courses panel on mobile */
	.courses-panel .courses-container .pagination-container {
		display: none;
	}
}