/**
 * Floating Navigation Pro — frontend styles.
 *
 * All theming flows through CSS variables set inline by the plugin, so this
 * sheet is static and cacheable. Layout uses logical properties for RTL.
 */

.fnp-bar {
	position: fixed;
	inset-block-end: calc(var(--fnp-bottom, 24px) + env(safe-area-inset-bottom, 0px));
	inset-inline: 0;
	z-index: 99990;
	display: flex;
	justify-content: var(--fnp-justify, center);
	padding-inline: var(--fnp-side, 16px);
	pointer-events: none;
	font-family: var(--fnp-font, inherit);
	box-sizing: border-box;
}

.fnp-bar *,
.fnp-bar *::before,
.fnp-bar *::after {
	box-sizing: border-box;
}

.fnp-list {
	pointer-events: auto;
	display: flex;
	align-items: stretch;
	gap: var(--fnp-gap, 4px);
	margin: 0;
	padding: var(--fnp-pad-y, 8px) var(--fnp-pad-x, 8px);
	list-style: none;
	width: auto;
	max-width: min(var(--fnp-max-width, 520px), calc(100% - (var(--fnp-side, 16px) * 2)));

	background: var(--fnp-bg, #fff);
	border-radius: var(--fnp-radius, 999px);
	border: var(--fnp-border-width, 1px) solid var(--fnp-border-color, rgba(255, 255, 255, 0.6));
	box-shadow: var(--fnp-shadow, 0 12px 34px rgba(15, 23, 42, 0.14));

	-webkit-backdrop-filter: saturate(160%) blur(var(--fnp-blur, 14px));
	backdrop-filter: saturate(160%) blur(var(--fnp-blur, 14px));

	transform: translate3d(0, 0, 0);
	transition: box-shadow var(--fnp-speed, 320ms) ease;
}

/* Item -------------------------------------------------------------------- */

.fnp-item {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
}

.fnp-link {
	position: relative;
	isolation: isolate;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: var(--fnp-item-pad-y, 8px) var(--fnp-item-pad-x, 14px);
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--fnp-item-radius, 16px);
	text-decoration: none;
	color: var(--fnp-text, #64748b);
	line-height: 1.1;
	-webkit-tap-highlight-color: transparent;
	transition:
		color var(--fnp-speed, 320ms) ease,
		transform var(--fnp-speed, 320ms) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Sliding active background sits behind the link content. */
.fnp-link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--fnp-item-accent, var(--fnp-active-bg, #eef2ff));
	opacity: 0;
	transform: scale(0.7);
	transition:
		opacity var(--fnp-speed, 320ms) ease,
		transform var(--fnp-speed, 320ms) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fnp-item.is-active .fnp-link {
	color: var(--fnp-active, #0f172a);
}

.fnp-item.is-active .fnp-link::before {
	opacity: 1;
	transform: scale(1);
}

/* Hover / focus / press --------------------------------------------------- */

@media (hover: hover) {
	.fnp-link:hover {
		color: var(--fnp-active, #0f172a);
		transform: translateY(-2px);
	}

	.fnp-link:hover::before {
		opacity: 0.55;
		transform: scale(1);
	}

	.fnp-item.is-active .fnp-link:hover::before {
		opacity: 1;
	}
}

.fnp-link:active {
	transform: translateY(0) scale(0.94);
}

.fnp-link:focus-visible {
	outline: 2px solid var(--fnp-accent, #6366f1);
	outline-offset: 2px;
}

/* Icon + badge ------------------------------------------------------------ */

.fnp-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--fnp-icon-size, 22px);
	height: var(--fnp-icon-size, 22px);
}

.fnp-icon-wrap i {
	font-size: var(--fnp-icon-size, 22px);
	line-height: 1;
	display: inline-flex;
}

.fnp-item.is-active .fnp-icon-wrap {
	animation: fnp-pop var(--fnp-speed, 320ms) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fnp-badge {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	border-radius: 999px;
	color: var(--fnp-badge-text, #fff);
	background: var(--fnp-badge-bg, #ef4444);
	box-shadow: 0 0 0 2px var(--fnp-bg, #fff);
}

/* Label ------------------------------------------------------------------- */

.fnp-label {
	font-size: var(--fnp-font-size, 12px);
	font-weight: var(--fnp-font-weight, 600);
	letter-spacing: var(--fnp-letter, 0);
	text-transform: var(--fnp-transform, none);
	white-space: nowrap;
	max-width: 8ch;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Label display modes. */
.fnp-labels-never .fnp-label {
	display: none;
}

.fnp-labels-active .fnp-label {
	display: none;
}

.fnp-labels-active .fnp-item.is-active .fnp-label {
	display: block;
}

.fnp-labels-hover .fnp-label {
	max-width: 0;
	opacity: 0;
	transition:
		max-width var(--fnp-speed, 320ms) ease,
		opacity var(--fnp-speed, 320ms) ease;
}

@media (hover: hover) {
	.fnp-labels-hover .fnp-link:hover .fnp-label,
	.fnp-labels-hover .fnp-item.is-active .fnp-label {
		max-width: 8ch;
		opacity: 1;
	}
}

/* Device visibility ------------------------------------------------------- */

@media (min-width: 1025px) {
	.fnp-hide-desktop {
		display: none !important;
	}
}

@media (min-width: 641px) and (max-width: 1024px) {
	.fnp-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 640px) {
	.fnp-hide-mobile {
		display: none !important;
	}

	/* On phones the pill hugs the screen edges for thumb reach. */
	.fnp-list {
		max-width: calc(100% - (var(--fnp-side, 16px) * 2));
	}

	.fnp-link {
		padding-inline: 6px;
	}
}

/* RTL fine-tuning (logical properties handle the rest). */
[dir="rtl"] .fnp-badge {
	inset-inline-end: auto;
	inset-inline-start: -8px;
}

/* Motion / animation ------------------------------------------------------ */

@keyframes fnp-pop {
	0% {
		transform: scale(1);
	}
	45% {
		transform: scale(1.18);
	}
	100% {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fnp-link,
	.fnp-link::before,
	.fnp-label,
	.fnp-icon-wrap {
		transition: none !important;
		animation: none !important;
	}
}

/* Entrance animation on first paint. */
.fnp-list {
	animation: fnp-rise 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fnp-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fnp-list {
		animation: none;
	}
}