/**
 * Pagination and Controls Styles
 *
 * @package CoopOrdersSync
 * @since 1.0.0
 */

/* =========================================
   Orders Controls
   ========================================= */

.coop-orders-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--coop-space-xl);
	padding: var(--coop-space-md);
	background: var(--coop-color-bg);
	border: 1px solid var(--coop-color-border);
	border-radius: var(--coop-radius-md);
}

.coop-per-page-selector {
	display: flex;
	align-items: center;
	gap: var(--coop-space-sm);
}

.coop-per-page-selector label {
	font-size: 14px;
	font-weight: 500;
	color: var(--coop-color-text-secondary);
	margin: 0;
}

.coop-per-page-select {
	padding: 8px 32px 8px 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--coop-color-text);
	background: var(--coop-color-bg);
	border: 1px solid var(--coop-color-border);
	border-radius: var(--coop-radius-sm);
	cursor: pointer;
	transition: all var(--coop-transition-fast);
	appearance: none;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l5 5 5-5" stroke="%23555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}

.coop-per-page-select:hover {
	border-color: var(--coop-color-primary);
}

.coop-per-page-select:focus {
	outline: none;
	border-color: var(--coop-color-primary);
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

/* =========================================
   Pagination
   ========================================= */

.coop-pagination {
	margin-top: var(--coop-space-2xl);
	margin-bottom: var(--coop-space-2xl);
}

.coop-pagination-list {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--coop-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.coop-pagination-item {
	margin: 0;
	padding: 0;
}

.coop-pagination-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--coop-space-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--coop-color-text);
	background: var(--coop-color-bg);
	border: 1px solid var(--coop-color-border);
	border-radius: var(--coop-radius-sm);
	text-decoration: none;
	transition: all var(--coop-transition-fast);
	cursor: pointer;
}

.coop-pagination-link:hover {
	background: var(--coop-color-bg-light);
	border-color: var(--coop-color-primary);
	color: var(--coop-color-primary);
	transform: translateY(-2px);
	box-shadow: var(--coop-shadow-sm);
}

.coop-pagination-link:active {
	transform: translateY(0);
}

/* Current page */
.coop-pagination-current {
	background: var(--coop-color-primary);
	border-color: var(--coop-color-primary);
	color: var(--coop-color-bg);
	cursor: default;
}

.coop-pagination-current:hover {
	transform: none;
	box-shadow: none;
}

/* Previous/Next buttons */
.coop-pagination-prev,
.coop-pagination-next {
	gap: var(--coop-space-xs);
	padding: 0 var(--coop-space-md);
}

.coop-pagination-prev svg,
.coop-pagination-next svg {
	flex-shrink: 0;
}

/* Ellipsis */
.coop-pagination-ellipsis {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	color: var(--coop-color-text-muted);
	font-weight: 600;
	user-select: none;
}

/* =========================================
   Collection Insert
   ========================================= */

.coop-orders-collection-insert {
	width: 100%;
	margin: var(--coop-space-xl) 0;
	padding: var(--coop-space-xl);
	background: var(--coop-color-bg-lighter);
	border: 2px dashed var(--coop-color-border);
	border-radius: var(--coop-radius-md);
}

.coop-orders-collection-insert > * {
	margin: 0;
}

/* =========================================
   Responsive Design
   ========================================= */

@media (max-width: 768px) {
	.coop-orders-controls {
		flex-direction: column;
		gap: var(--coop-space-md);
		align-items: stretch;
	}

	.coop-per-page-selector {
		justify-content: space-between;
	}

	.coop-pagination-list {
		flex-wrap: wrap;
		gap: var(--coop-space-xs);
	}

	.coop-pagination-link {
		min-width: 36px;
		height: 36px;
		font-size: 13px;
	}

	.coop-pagination-prev,
	.coop-pagination-next {
		padding: 0 var(--coop-space-sm);
	}

	/* Hide ellipsis on mobile */
	.coop-pagination-ellipsis {
		display: none;
	}
}

@media (max-width: 480px) {
	.coop-pagination-prev span,
	.coop-pagination-next span {
		display: none;
	}

	.coop-pagination-prev,
	.coop-pagination-next {
		min-width: 36px;
		padding: 0;
	}

	.coop-orders-collection-insert {
		padding: var(--coop-space-lg);
	}
}