/* Floating Navigation Arrows - frontend styles */

.fn-nav {
	position: fixed;
	bottom: 20px;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 10px;
}

.fn-buttons-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fn-btn {
	width: var(--fn-size, 48px);
	height: var(--fn-size, 48px);
	border-radius: 50%;
	border: none;
	background-color: var(--fn-bg, #222222);
	color: var(--fn-icon, #ffffff);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: background-color 0.2s ease, transform 0.15s ease;
	padding: 0;
}

.fn-btn:hover,
.fn-btn:focus {
	background-color: var(--fn-hover-bg, #0073aa);
	transform: translateY(-2px);
	outline: none;
}

.fn-icon {
	font-size: calc(var(--fn-size, 48px) * 0.42);
	line-height: 1;
}

/* Toggle button (mobile-only trigger) is hidden by default on desktop */
.fn-toggle-btn {
	display: none;
}

/* ---------------- Mobile behavior rules ---------------- */
@media (max-width: 782px) {

	/* Hide entirely on mobile */
	.fn-mobile-hide {
		display: none !important;
	}

	/* Toggle: hide the arrow group until the toggle button is opened */
	.fn-mobile-toggle .fn-toggle-btn {
		display: flex;
	}

	.fn-mobile-toggle .fn-buttons-group {
		max-height: 0;
		overflow: hidden;
		gap: 0;
		transition: max-height 0.25s ease;
	}

	.fn-mobile-toggle.fn-open .fn-buttons-group {
		max-height: 300px;
		gap: 10px;
		margin-bottom: 10px;
	}

	.fn-mobile-toggle {
		flex-direction: column-reverse;
	}

	/* fn-mobile-show: no extra rules needed, arrows stay visible as-is */
}