/**
 * Infinite Scroll - Public Styles
 *
 * Frontend styles for infinite scroll functionality.
 *
 * @package WooTweaks
 * @subpackage Tweaks\InfiniteScroll
 */

/* ==========================================================================
   Infinite Scroll Container
   ========================================================================== */

.wt-infinite-scroll-container {
	position: relative;
}

/* Hide original pagination when infinite scroll is active */
.wt-infinite-scroll-pagination {
	display: none !important;
}

/* ==========================================================================
   Status Messages
   ========================================================================== */

.wt-infinite-scroll-status {
	text-align: center;
	padding: 30px 20px;
	clear: both;
}

.wt-infinite-scroll-loading,
.wt-infinite-scroll-finished {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 16px;
	color: #666;
}

/* Loading Spinner */
.wt-loading-spinner {
	width: 20px;
	height: 20px;
	border: 3px solid #f3f3f3;
	border-top: 3px solid #333;
	border-radius: 50%;
	animation: wt-spinner-rotate 1s linear infinite;
}

@keyframes wt-spinner-rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Load More Button
   ========================================================================== */

.wt-infinite-scroll-button-wrapper {
	text-align: center;
	padding: 30px 20px;
	clear: both;
}

.wt-load-more-button {
	cursor: pointer;
	font-size: 16px;
	line-height: 1.5;
	transition: all 0.3s ease;
	border: none;
	outline: none;
}

.wt-load-more-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Button Style Presets */

/* Minimal Style */
.wt-button-style-minimal {
	background: transparent;
	color: #333;
	padding: 10px 20px;
	border: 2px solid #ddd;
	border-radius: 4px;
}

.wt-button-style-minimal:hover:not(:disabled) {
	background: #f5f5f5;
	border-color: #bbb;
}

/* Primary Style - Uses theme primary colors */
.wt-button-style-primary {
	background: #0071a1;
	color: #fff;
	padding: 12px 30px;
	border-radius: 4px;
}

.wt-button-style-primary:hover:not(:disabled) {
	background: #005177;
}

/* Secondary Style - Uses theme secondary colors */
.wt-button-style-secondary {
	background: #f0f0f0;
	color: #333;
	padding: 12px 30px;
	border-radius: 4px;
}

.wt-button-style-secondary:hover:not(:disabled) {
	background: #e0e0e0;
}

/* Custom Style - Allows theme/user customization */
.wt-button-style-custom {
	/* Styles can be overridden in theme or via Customizer */
	background: #333;
	color: #fff;
	padding: 12px 30px;
	border-radius: 4px;
}

.wt-button-style-custom:hover:not(:disabled) {
	background: #555;
}

/* ==========================================================================
   Product Animation
   ========================================================================== */

.wt-infinite-scroll-container .product {
	transition: opacity 0.4s ease-in-out;
}

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

@media (max-width: 768px) {
	.wt-infinite-scroll-status {
		padding: 20px 15px;
	}

	.wt-infinite-scroll-button-wrapper {
		padding: 20px 15px;
	}

	.wt-load-more-button {
		width: 100%;
		max-width: 300px;
	}

	.wt-infinite-scroll-loading,
	.wt-infinite-scroll-finished {
		font-size: 14px;
	}
}

/* ==========================================================================
   Theme Compatibility
   ========================================================================== */

/* Ensure infinite scroll works with common themes */
.storefront .wt-infinite-scroll-container,
.astra-theme .wt-infinite-scroll-container,
.oceanwp-theme .wt-infinite-scroll-container {
	width: 100%;
}