/**
 * LMIn My Links Page - Pagination Styles
 * Clean single-row design with info on left, navigation on right
 */

/* ============================================
   PAGINATION CONTAINER
   ============================================ */
.lmin-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: #ffffff;
	border: 1px solid var(--lmin-slate-200, #e5e7eb);
	border-radius: var(--lmin-radius-lg, 8px);
	box-shadow: var(--lmin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}

/* ============================================
   LEFT SIDE: INFO
   ============================================ */
.lmin-pagination-info {
	font-size: 0.875rem;
	color: var(--lmin-slate-600, #4b5563);
	font-weight: 500;
}

/* ============================================
   RIGHT SIDE: NAVIGATION
   ============================================ */
.lmin-pagination-nav {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lmin-pagination-pages {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0 0.5rem;
}

.lmin-page-num {
	min-width: 2rem;
	padding: 0 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lmin-slate-200, #e5e7eb);
	border-radius: 9999px;
	background: white;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--lmin-slate-600, #4b5563);
	cursor: pointer;
	transition: all 0.15s ease;
}

.lmin-page-num:hover {
	background: var(--lmin-slate-50, #f9fafb);
	border-color: var(--lmin-slate-300, #d1d5db);
	color: var(--lmin-slate-700, #374151);
}

.lmin-page-num.active {
	background: var(--lmin-primary, #3b82f6);
	color: white;
	border-color: var(--lmin-primary, #3b82f6);
	font-weight: 600;
}

.lmin-page-ellipsis {
	padding: 0 0.375rem;
	color: var(--lmin-slate-400, #9ca3af);
	font-size: 0.875rem;
}

.lmin-pagination-btn {
	padding: 0.5rem 1rem;
	font-size: 0.8125rem;
	font-weight: 500;
	border-radius: 9999px;
	border: 1px solid var(--lmin-slate-200, #e5e7eb);
	background: white;
	color: var(--lmin-slate-600, #4b5563);
	cursor: pointer;
	transition: all 0.15s ease;
}

.lmin-pagination-btn:hover:not(:disabled) {
	background: var(--lmin-slate-50, #f9fafb);
	border-color: var(--lmin-slate-300, #d1d5db);
	color: var(--lmin-slate-700, #374151);
}

.lmin-pagination-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.lmin-pagination-btn:focus-visible {
	outline: none;
	border-color: var(--lmin-primary, #3b82f6);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Per page select - styled to match buttons */
.lmin-per-page-select {
	padding: 0.75rem 1.5rem 0.75rem 0.75rem;
	/* font-size: 0.8125rem; */
	font-weight: 500;
	border-radius: var(--lmin-radius-md);
	border: 1px solid var(--lmin-slate-200, #e5e7eb);
	background: white;
	color: var(--lmin-slate-600, #4b5563);
	cursor: pointer;
	transition: all 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
}

.lmin-per-page-select:hover {
	border-color: var(--lmin-slate-300, #d1d5db);
}

.lmin-per-page-select:focus {
	outline: none;
	border-color: var(--lmin-primary, #3b82f6);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
	.lmin-pagination {
		flex-direction: column;
		align-items: stretch;
		padding: 0.875rem 1rem;
	}

	.lmin-per-page-selector {
		margin-left: 0;
		margin-top: 0.5rem;
	}

	.lmin-pagination-nav {
		justify-content: center;
		margin-top: 0.5rem;
	}

	.lmin-pagination-pages {
		display: none;
	}

	.lmin-pagination-btn {
		flex: 1;
		text-align: center;
	}
}