/* Beaver Builder API Loop - Styles (Pagination + Loading) */

/* CSS variables can be overridden by themes; we provide defaults via variable fallbacks at each usage. */

.bb-api-pagination-wrapper {
	margin-top: 60px;
	display: block;
}

.bb-api-pagination {
	display: block;
	text-align: center;
	margin: 20px 0;
	padding: 0;
}

.bb-api-pagination .bb-api-page-numbers {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-api-pagination .bb-api-page-numbers li {
	display: inline-block;
	margin: 0 calc(var(--bb-api-pagination-gap, 6px) / 2);
}

/* Harden buttons against theme overrides with higher specificity and !important */
.fl-module .bb-api-pagination .bb-api-page-numbers a,
.fl-module .bb-api-pagination .bb-api-page-numbers button {
	display: inline-block !important;
	padding: var(--bb-api-pagination-padding-y, 5px) var(--bb-api-pagination-padding-x, 10px) !important;
	border: var(--bb-api-pagination-border-width, 1px) solid var(--bb-api-pagination-border-color, #ddd) !important;
	background: var(--bb-api-pagination-bg, #fff) !important;
	color: var(--bb-api-pagination-color, #333) !important;
	text-decoration: none !important;
	border-radius: var(--bb-api-pagination-radius, 3px) !important;
	min-width: 1.5em !important;
	text-align: center !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	box-shadow: none !important;
}

.fl-module .bb-api-pagination .bb-api-page-numbers a:hover,
.fl-module .bb-api-pagination .bb-api-page-numbers button:hover {
	background: var(--bb-api-pagination-hover-bg, #f5f5f5);
	color: var(--bb-api-pagination-hover-color, #0073aa);
}

.fl-module .bb-api-pagination .bb-api-current span,
.fl-module .bb-api-pagination .bb-api-current button {
	background: var(--bb-api-pagination-current-bg, #0073aa);
	color: var(--bb-api-pagination-current-color, #fff);
	border-color: var(--bb-api-pagination-current-bg, #0073aa);
	font-weight: bold;
	cursor: default;
}

/* Support aria-current for current page, even if class not present */
.fl-module .bb-api-pagination .bb-api-page-numbers [aria-current="page"] {
	background: var(--bb-api-pagination-current-bg, #0073aa) !important;
	color: var(--bb-api-pagination-current-color, #fff) !important;
	border-color: var(--bb-api-pagination-current-bg, #0073aa) !important;
	font-weight: bold !important;
	cursor: default !important;
}

/* Keep current button highlight on hover */
.fl-module .bb-api-pagination .bb-api-current button:hover {
	background: var(--bb-api-pagination-current-bg);
	color: var(--bb-api-pagination-current-color);
}

/* Prevent interactions on the current page button */
.fl-module .bb-api-pagination .bb-api-current button,
.fl-module .bb-api-pagination .bb-api-page-numbers [aria-current="page"] {
	pointer-events: none;
}

/* Focus styles for accessibility */
.fl-module .bb-api-pagination .bb-api-page-numbers a:focus-visible,
.fl-module .bb-api-pagination .bb-api-page-numbers button:focus-visible {
	outline: 2px solid var(--bb-api-pagination-hover-color, #0073aa);
	outline-offset: 2px;
}

.bb-api-pagination .bb-api-dots span {
	border: none;
	background: transparent;
}

.fl-module .bb-api-pagination .disabled button {
	color: var(--bb-api-pagination-disabled-color, #999);
	background: var(--bb-api-pagination-disabled-bg, #f5f5f5);
	opacity: 0.7;
	cursor: default;
}

/* Load More button styles */
.bb-api-pagination.bb-api-style-load-more {
	text-align: center;
}

.bb-api-load-more-wrap {
	display: inline-block;
}

.fl-module .bb-api-pagination .bb-api-load-more {
	display: inline-block !important;
	padding: 12px 32px !important;
	background: var(--bb-api-pagination-current-bg, #0073aa) !important;
	color: var(--bb-api-pagination-current-color, #fff) !important;
	border: none !important;
	border-radius: var(--bb-api-pagination-radius, 3px) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.5 !important;
}

.fl-module .bb-api-pagination .bb-api-load-more:hover {
	background: var(--bb-api-pagination-hover-color, #005a87) !important;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.fl-module .bb-api-pagination .bb-api-load-more:active {
	transform: translateY(0);
}

.fl-module .bb-api-pagination .bb-api-load-more:focus-visible {
	outline: 2px solid var(--bb-api-pagination-hover-color, #0073aa) !important;
	outline-offset: 3px !important;
}

/* Loading state: no overlay, just dim and disable interactions */
.fl-module-loop.bb-api-loading {
	pointer-events: none;
}

/* Smooth transition for loading/fade swaps */
.fl-module-loop {
	transition: opacity 200ms ease;
	position: relative; /* required for spinner overlay positioning */
}


table.fl-form-table:has(#fl-field-fallback) th {
	width: 125px !important;
}

/* Loading overlay and spinner (shown when bb-api-loading is applied) */
.fl-module-loop.bb-api-loading::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--bb-api-loading-overlay, rgb(255 255 255 / 0.6));
	z-index: 10;
	display: block !important;
}

.fl-module-loop.bb-api-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	margin-left: -16px;
	border-radius: 50%;
	border: 3px solid rgb(255 255 255 / 0.85);
	border-top-color: var(--bb-api-pagination-hover-color, #0073aa);
	animation: bb-api-spin 1s linear infinite;
	z-index: 11;
	display: block !important;
}

@keyframes bb-api-spin {
	to { transform: rotate(360deg); }
}