/**
 * Feldman Load More — the bar that replaces numbered pagination.
 *
 * Everything the settings screen controls is a custom property declared here as
 * a fallback and overridden inline from the saved options.
 *
 * Note the selectors: the button rules are scoped under .flm-bar rather than
 * written as a bare .flm-btn. Woodmart styles buttons through
 * :is(.btn, .button, button, [type="button"]) — the same specificity as a single
 * class — and its stylesheet loads after this one, so an unscoped rule loses the
 * tie and the button inherits the theme's grey. The extra class wins it back
 * without resorting to !important.
 *
 * Written direction-neutral (logical properties) so it reads correctly in RTL
 * and LTR alike — except the chevrons, which must point down in both.
 */

.flm-bar {
	--flm-label-color: #0f172a;
	--flm-count-color: #475569;
	--flm-fill-color: #2a72ad;
	--flm-track-color: #e2e8f0;
	--flm-bg-color: #fff;
	--flm-border-color: #e2e8f0;
	--flm-font-size: 15px;
	--flm-font-weight: 700;
	--flm-font-family: inherit;
	--flm-radius: 999px;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 44px 0 12px;
	opacity: 1;
	transition: opacity .3s var(--e-io, cubic-bezier(.4, 0, .2, 1));
}

.flm-bar.flm-done {
	opacity: 0;
	pointer-events: none;
}

/* The hairline the button sits on. */
.flm-bar .flm-track {
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 1px;
	background: var(--flm-track-color);
	transform: translateY(-50%);
}

/* How much of the list has already been seen. */
.flm-bar .flm-fill {
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 0;
	height: 3px;
	background: var(--flm-fill-color);
	border-radius: 999px;
	transform: translateY(-50%);
	transition: width .55s var(--e, cubic-bezier(.16, 1, .3, 1));
}

.flm-bar .flm-btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	min-height: 0;
	margin: 0;
	padding: 12px 24px;
	font-family: var(--flm-font-family);
	font-size: var(--flm-font-size);
	font-weight: var(--flm-font-weight);
	line-height: 1.25;
	color: var(--flm-label-color);
	text-transform: none;
	letter-spacing: normal;
	background: var(--flm-bg-color);
	border: 1px solid var(--flm-border-color);
	border-radius: var(--flm-radius);
	box-shadow: var(--sh-s, 0 1px 2px rgba(10, 17, 40, .04), 0 2px 8px rgba(10, 17, 40, .04));
	cursor: pointer;
	transition:
		border-color .3s var(--e-io, cubic-bezier(.4, 0, .2, 1)),
		box-shadow .3s var(--e-io, cubic-bezier(.4, 0, .2, 1)),
		transform .3s var(--e-io, cubic-bezier(.4, 0, .2, 1));
	-webkit-appearance: none;
	appearance: none;
}

.flm-bar .flm-btn:hover,
.flm-bar .flm-btn:focus {
	color: var(--flm-label-color);
	background: var(--flm-bg-color);
	border-color: var(--flm-fill-color);
	box-shadow: var(--sh-m, 0 6px 16px rgba(10, 17, 40, .04), 0 14px 32px rgba(10, 17, 40, .08));
}

.flm-bar .flm-btn:hover {
	transform: translateY(-2px);
}

.flm-bar .flm-btn:focus-visible {
	outline: 2px solid var(--flm-fill-color);
	outline-offset: 3px;
}

.flm-bar .flm-btn[disabled] {
	cursor: default;
	transform: none;
	opacity: .75;
}

.flm-bar .flm-text {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.flm-bar .flm-label {
	font-weight: inherit;
	color: var(--flm-label-color);
}

.flm-bar .flm-sep {
	width: 1px;
	height: 1em;
	background: var(--flm-border-color);
}

.flm-bar .flm-count {
	font-weight: 500;
	color: var(--flm-count-color);
}

.flm-bar.flm-error .flm-count {
	color: #b42318;
}

/*
 * Chevrons, drawn rather than loaded. Deliberately physical borders, not logical
 * ones: a downward chevron points down in both writing directions, so flipping
 * it with the text direction would aim it sideways in RTL.
 */
.flm-bar .flm-arrow {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	border-radius: 1px;
	opacity: .55;
	transform: rotate(-45deg);
	transition: transform .3s var(--e-io, cubic-bezier(.4, 0, .2, 1));
}

.flm-bar .flm-btn:hover .flm-arrow {
	transform: rotate(-45deg) translate(-2px, 2px);
}

.flm-bar.flm-loading .flm-arrow {
	animation: flm-nudge .9s ease-in-out infinite;
}

.flm-bar.flm-loading .flm-arrow:last-child {
	animation-delay: .15s;
}

@keyframes flm-nudge {
	0%,
	100% {
		transform: rotate(-45deg) translate(0, 0);
	}

	50% {
		transform: rotate(-45deg) translate(-3px, 3px);
	}
}

/* Items appended by a click. */
.flm-new {
	animation: flm-in .45s var(--e, cubic-bezier(.16, 1, .3, 1)) both;
}

@keyframes flm-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * The theme's pagination and its own load-more button: kept in the document so
 * their links stay crawlable and keyboard-reachable, moved out of sight.
 */
.flm-offscreen,
.flm-bar .flm-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 520px) {
	.flm-bar {
		margin-block-start: 32px;
	}

	.flm-bar .flm-btn {
		gap: 10px;
		padding: 10px 16px;
	}

	.flm-bar .flm-text {
		gap: 0 8px;
	}

	.flm-bar .flm-sep {
		display: none;
	}

	.flm-bar .flm-count {
		flex-basis: 100%;
		font-size: .88em;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.flm-bar,
	.flm-bar .flm-btn,
	.flm-bar .flm-fill,
	.flm-bar .flm-arrow {
		transition-duration: .01ms;
	}

	.flm-bar .flm-btn:hover {
		transform: none;
	}

	.flm-new,
	.flm-bar.flm-loading .flm-arrow {
		animation: none;
	}
}