/**
 * Woo AJAX Infinite Scroll — front-end styles.
 *
 * Designed to work alongside any theme. Uses :root variables so theme designers
 * can override colours easily.
 */

:root {
	--wais-accent:      #6366f1;
	--wais-accent-dark: #4f46e5;
	--wais-text:        #1f2937;
	--wais-muted:       #6b7280;
	--wais-bg-soft:     #f9fafb;
	--wais-border:      #e5e7eb;
	--wais-error:       #dc2626;
}

/* -----------------------------------------------------------------------
   Container holding the loader / button / messages.
   --------------------------------------------------------------------- */

.wais-container {
	width: 100%;
	clear: both;
	padding: 24px 16px 48px;
	text-align: center;
	box-sizing: border-box;
}

/* -----------------------------------------------------------------------
   Spinner.
   --------------------------------------------------------------------- */

.wais-loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 0;
}

.wais-spinner {
	display: inline-flex;
	gap: 6px;
}

.wais-spinner-dot {
	width: 10px;
	height: 10px;
	background: var( --wais-accent );
	border-radius: 50%;
	animation: wais-bounce 1.2s infinite ease-in-out both;
}

.wais-spinner-dot:nth-child( 1 ) { animation-delay: -0.32s; }
.wais-spinner-dot:nth-child( 2 ) { animation-delay: -0.16s; }
.wais-spinner-dot:nth-child( 3 ) { animation-delay:  0s; }

@keyframes wais-bounce {
	0%, 80%, 100% { transform: scale( 0.6 ); opacity: 0.5; }
	40%           { transform: scale( 1 );   opacity: 1;   }
}

.wais-loader-text {
	margin: 0;
	color: var( --wais-muted );
	font-size: 14px;
	letter-spacing: 0.01em;
}

/* -----------------------------------------------------------------------
   Load More button (fallback mode).
   --------------------------------------------------------------------- */

.wais-load-more-btn {
	display: inline-block;
	padding: 12px 32px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var( --wais-accent );
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	letter-spacing: 0.02em;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 );
}

.wais-load-more-btn:hover:not( :disabled ) {
	background: var( --wais-accent-dark );
	transform: translateY( -1px );
	box-shadow: 0 4px 12px rgba( 99, 102, 241, 0.25 );
}

.wais-load-more-btn:active:not( :disabled ) {
	transform: translateY( 0 );
}

.wais-load-more-btn:disabled,
.wais-load-more-btn.wais-is-loading {
	opacity: 0.6;
	cursor: not-allowed;
}

/* -----------------------------------------------------------------------
   End-of-results & error messages.
   --------------------------------------------------------------------- */

.wais-end-message {
	display: inline-block;
	padding: 12px 20px;
	color: var( --wais-muted );
	font-size: 14px;
	border-top: 1px solid var( --wais-border );
	margin-top: 16px;
	letter-spacing: 0.02em;
}

.wais-error-message {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: var( --wais-error );
	border-radius: 8px;
	font-size: 14px;
}

.wais-retry-btn {
	padding: 6px 14px;
	background: var( --wais-error );
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
}

.wais-retry-btn:hover {
	background: #b91c1c;
}

/* -----------------------------------------------------------------------
   Fade-in animation for newly inserted products.
   --------------------------------------------------------------------- */

.wais-fade-in {
	animation: wais-fade-up 0.5s ease-out both;
}

@keyframes wais-fade-up {
	from { opacity: 0; transform: translateY( 16px ); }
	to   { opacity: 1; transform: translateY( 0 );    }
}

/* Respect reduced-motion users. */
@media ( prefers-reduced-motion: reduce ) {
	.wais-fade-in {
		animation: none;
	}
	.wais-spinner-dot {
		animation: none;
		opacity: 0.7;
	}
}

/* -----------------------------------------------------------------------
   Mobile-responsive product grid tweaks.
   Only applied if the theme uses the default ul.products columns-N markup.
   --------------------------------------------------------------------- */

.wais-active ul.products {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}

.wais-active ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* Hide SEO pagination once JS is running (kept for crawlers). */
.wais-active .woocommerce-pagination {
	display: none;
}

@media ( max-width: 1024px ) {
	.wais-active ul.products { grid-template-columns: repeat( 3, 1fr ); gap: 20px; }
}

@media ( max-width: 768px ) {
	.wais-active ul.products { grid-template-columns: repeat( 2, 1fr ); gap: 16px; }
	.wais-load-more-btn      { padding: 10px 24px; font-size: 14px; }
}

@media ( max-width: 480px ) {
	.wais-active ul.products { grid-template-columns: repeat( 2, 1fr ); gap: 12px; }
	.wais-loader-text        { font-size: 13px; }
}