/**
 * BP Auto Pagination for WooCommerce — front-end styles.
 */

/* The numeric pagination is kept in the DOM (as a fallback) but hidden while
   auto-loading is active. */
.bp-ap-hidden {
	display: none !important;
}

/* Invisible element placed just before the pagination; its position is what we
   observe to decide when to load the next page. */
.bp-ap-sentinel {
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

/* Status / loading row. */
.bp-ap-status {
	display: block;
	min-height: 1.5em;
	margin: 1.5em 0;
	text-align: center;
	font-size: 0.95em;
	line-height: 1.5;
	color: currentColor;
	opacity: 0.85;
}

.bp-ap-status:empty {
	display: none;
}

.bp-ap-status.is-error {
	color: #b32d2e;
	opacity: 1;
}

.bp-ap-status.is-end {
	opacity: 0.6;
}

/* Spinner shown next to the "loading" message. */
.bp-ap-status.is-loading::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline-end: 0.6em;
	vertical-align: -0.15em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: bp-ap-spin 0.7s linear infinite;
}

@keyframes bp-ap-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Optional "Load more" button (shown when maxAutoLoads is reached). */
.bp-ap-button {
	display: block;
	margin: 1.5em auto;
	padding: 0.75em 2em;
	cursor: pointer;
}

.bp-ap-button[hidden] {
	display: none;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.bp-ap-status.is-loading::before {
		animation-duration: 1.5s;
	}
}