/**
 * Mobile fixed bottom bar — matches Nav_Wrap design (glass + shaped logo + Remix icons).
 */

.wr-mobile-fixed-bar {
	display: none;
}

@media screen and (max-width: 991px) {
	body.wr-has-mobile-fixed-bar {
		padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
	}

	.wr-mobile-fixed-bar {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 880;
		padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px));
		pointer-events: none;
	}

	.wr-mobile-fixed-bar__shell {
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
		pointer-events: auto;
	}

	.wr-mobile-fixed-bar__inner {
		position: relative;
		display: flex;
		align-items: stretch;
		min-height: 68px;
		border-radius: 16px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(243, 238, 255, 0.92) 100%);
		border: 1px solid rgba(255, 255, 255, 0.72);
		box-shadow:
			0 10px 28px rgba(67, 56, 145, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.95);
		-webkit-backdrop-filter: blur(18px);
		backdrop-filter: blur(18px);
		overflow: hidden;
	}

	.wr-mobile-fixed-bar__logo {
		flex: 0 0 68px;
		width: 68px;
		height: 68px;
		align-self: flex-start;
		display: block;
		margin: 0;
		padding: 0;
		text-decoration: none;
		line-height: 0;
	}

	/* Inline SVG logo — force exact size, ignore any global img/svg overrides.
	   normalize.css sets svg:not(:root){overflow:hidden} which we must defeat. */
	.wr-mobile-fixed-bar__logo > svg,
	.wr-mobile-fixed-bar__logo svg {
		display: block !important;
		width: 68px !important;
		height: 68px !important;
		max-width: none !important;
		overflow: visible !important;
		flex-shrink: 0;
	}

	.wr-mobile-fixed-bar__nav {
		position: relative;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-width: 0;
	}

	.wr-mobile-fixed-bar__items {
		position: relative;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: end;
		padding: 8px 10px 6px 2px;
		min-width: 0;
	}

	.wr-mobile-fixed-bar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		gap: 4px;
		min-width: 0;
		padding: 0 2px 2px;
		text-decoration: none;
		color: #3a3354;
		transition: color 0.25s ease;
	}

	.wr-mobile-fixed-bar__icon-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: 12px;
		background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 245, 255, 0.88) 100%);
		border: 1px solid rgba(255, 255, 255, 0.85);
		box-shadow:
			0 4px 10px rgba(67, 56, 145, 0.08),
			inset 0 1px 0 rgba(255, 255, 255, 0.95),
			inset 0 -1px 0 rgba(94, 67, 254, 0.04);
	}

	.wr-mobile-fixed-bar__icon {
		font-size: 18px;
		line-height: 1;
		color: inherit;
	}

	.wr-mobile-fixed-bar__label {
		display: block;
		font-size: 11px;
		line-height: 1.2;
		font-weight: 500;
		letter-spacing: -0.01em;
		color: inherit;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	.wr-mobile-fixed-bar__item.is-active {
		color: var(--_color---5e43fe, #5e43fe);
	}

	/* Bold the icon on active via font-weight (works for icon fonts) */
	.wr-mobile-fixed-bar__item.is-active .wr-mobile-fixed-bar__icon {
		-webkit-text-stroke: 0.4px currentColor;
	}

	.wr-mobile-fixed-bar__item.is-active .wr-mobile-fixed-bar__icon-wrap {
		background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(237, 232, 255, 0.95) 100%);
		box-shadow:
			0 4px 12px rgba(94, 67, 254, 0.16),
			inset 0 1px 0 rgba(255, 255, 255, 1),
			inset 0 0 0 1px rgba(94, 67, 254, 0.08);
	}

	.wr-mobile-fixed-bar__indicator {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 3px;
		pointer-events: none;
	}

	.wr-mobile-fixed-bar__indicator::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: calc((var(--wr-mobile-bar-active, 0) * 25%) + 12.5%);
		width: 34px;
		height: 3px;
		border-radius: 999px;
		background-color: var(--_color---5e43fe, #5e43fe);
		transform: translateX(-50%);
		transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	}
}

@media screen and (max-width: 380px) {
	.wr-mobile-fixed-bar__items {
		padding-right: 6px;
	}
}