/* App-style fixed bottom navigation, shown on mobile widths only */
.mobile-bottom-nav {
	display: none;
}

@media only screen and (max-width: 768px) {
	body {
		padding-bottom: 64px;
	}

	.nav-button-wrap {
		display: none !important;
	}

	.mobile-bottom-nav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 300;
		height: 60px;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: #2F3B59;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
	}

	.mobile-bottom-nav-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		color: rgba(255, 255, 255, 0.55);
		font-size: 10px;
		text-decoration: none;
		cursor: pointer;
	}

	.mobile-bottom-nav-item i {
		font-size: 18px;
		line-height: 1;
	}

	.mobile-bottom-nav-item.active,
	.mobile-bottom-nav-item:hover {
		color: #caff00;
	}

	.mobile-bottom-nav-main {
		position: relative;
		color: rgba(255, 255, 255, 0.55);
	}

	.mobile-bottom-nav-main-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		margin-top: -26px;
		border-radius: 50%;
		background: #ffae00;
		color: #fff;
		font-size: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	}
}