/* Beaver Builder XML Loop - Styles (Pagination + Loading) */
/* CSS variables can be overridden by themes; we provide defaults via variable fallbacks at each usage. */

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

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

/* Neutral list layout for pagination controls (prev/next/load more) */
.bb-xml-pagination ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.fl-module .bb-xml-pagination.bb-xml-pagination .disabled button {
    color: var(--bb-xml-pagination-disabled-color, #999);
    background: var(--bb-xml-pagination-disabled-bg, #f5f5f5);
    opacity: 0.7;
    cursor: default;
    pointer-events: none;
    border-radius: var(--bb-xml-pagination-radius, 3px);
    border: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

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

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

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

.fl-module .bb-xml-pagination.bb-xml-pagination button.bb-xml-page-btn:not([disabled]):hover,
.fl-module .bb-xml-pagination.bb-xml-pagination button.bb-xml-load-more:not([disabled]):hover {
    background: var(--bb-xml-button-hover-bg, #005a87);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.fl-module .bb-xml-pagination.bb-xml-pagination button.bb-xml-page-btn:active,
.fl-module .bb-xml-pagination.bb-xml-pagination button.bb-xml-load-more:active {
    transform: translateY(0);
}

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

/* Loading state: no overlay, just dim and disable interactions */
.fl-module-loop.bb-xml-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-xml-loading is applied) */
.fl-module-loop.bb-xml-loading::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--bb-xml-loading-overlay, rgb(255 255 255 / 0.6));
	z-index: 10;
	display: block !important;
}

.fl-module-loop.bb-xml-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-xml-pagination-hover-color, #0073aa);
	animation: bb-xml-spin 1s linear infinite;
	z-index: 11;
	display: block !important;
}

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