/**
 * Horizontal Scrolling Category Tabs Styles
 * @package onward
 */

/* Horizontal scrolling tabs container */
.category-tabs-wrapper {
	position: relative;
	margin-bottom: 1.5rem;
}

.category-tabs {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
	cursor: grab;
	user-select: none;
	/* Prevent wrapping */
	flex-wrap: nowrap;
	/* Add padding to prevent cut-off on edges */
    padding: 0.5rem 0;
}

.category-tabs:active {
	cursor: grabbing;
}

.category-tabs.is-dragging {
	scroll-behavior: auto;
}

/* Webkit scrollbar styling */
.category-tabs::-webkit-scrollbar {
	height: 6px;
}

.category-tabs::-webkit-scrollbar-track {
	background: transparent;
}

.category-tabs::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 3px;
}

.category-tabs::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.3);
}

.category-tab {
	padding: 0.55rem 1rem;
	background: transparent;
	border: none;
	border: 2px solid #ccc;
	border-radius: 1.5rem;
	line-height: 1.2em;
	cursor: pointer;
	font-weight: 500;
	color: #6b7280;
	transition: all 0.2s ease;
	position: relative;
	/* Prevent tabs from shrinking */
	flex-shrink: 0;
	white-space: nowrap;
	/* Prevent clicks when dragging */
	pointer-events: auto;
}

.category-tabs.is-dragging .category-tab {
	pointer-events: none;
}

.category-tab:hover {
	color: #111827;
	border-color: #999;
	background: #f9fafb;
}

.category-tab:focus {
	outline: none;
}

.category-tab.active {
	color: #111827;
	border-color: var(--blue);
}

.category-panel {
	display: block;
}

.category-panel[hidden] {
	display: none !important;
}

.category-panel .infinite-container {
	display: grid;
}

.infinite-scroll-trigger {
	height: 1px;
	margin-top: 2rem;
}

.infinite-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1rem 0;
	color: #6b7280;
	font-weight: 500;
}

.infinite-loader[hidden] {
	display: none;
}

.infinite-loader__spinner {
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 9999px;
	display: inline-block;
	animation: infiniteSpin 0.8s linear infinite;
}

@keyframes infiniteSpin {
	to { transform: rotate(360deg); }
}

/* Mobile: Hide scrollbar for cleaner look */
@media (max-width: 768px) {
	.category-tabs {
		scrollbar-width: none;
	}
	
	.category-tabs::-webkit-scrollbar {
		display: none;
	}

	.category-tab {
		padding: 0.65rem 1.25rem;
		font-size: 0.9375rem;
	}
}

/* Screen-reader only utility */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}