/**
 * ELOG mobile footer navigation.
 */

.elog-mobile-footer {
	display: none;
}

@media (max-width: 849px) {
	:root {
		--elog-mobile-footer-height: 70px;
	}

	html {
		scroll-padding-bottom: calc(var(--elog-mobile-footer-height) + env(safe-area-inset-bottom, 0px) + 14px);
	}

	body.elog-has-mobile-footer-menu {
		padding-bottom: calc(var(--elog-mobile-footer-height) + env(safe-area-inset-bottom, 0px)) !important;
	}

	body.elog-has-mobile-footer-menu .footer-fixed-menu-container:not(.elog-mobile-footer-legacy-guard) {
		display: none !important;
	}

	.elog-mobile-footer {
		position: fixed;
		z-index: 999;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		padding: 6px max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px));
		background: rgba(255, 255, 255, 0.96);
		border-top: 1px solid rgba(9, 39, 77, 0.1);
		box-shadow: 0 -12px 35px rgba(9, 39, 77, 0.12);
		animation: elog-mobile-footer-enter 0.38s ease-out both;
		isolation: isolate;
	}

	@supports (backdrop-filter: blur(16px)) {
		.elog-mobile-footer {
			background: rgba(255, 255, 255, 0.88);
			-webkit-backdrop-filter: blur(16px) saturate(150%);
			backdrop-filter: blur(16px) saturate(150%);
		}
	}

	.elog-mobile-footer::before {
		position: absolute;
		z-index: -1;
		top: 0;
		left: 50%;
		width: min(58%, 280px);
		height: 1px;
		content: "";
		transform: translateX(-50%);
		background: linear-gradient(90deg, transparent, rgba(237, 28, 36, 0.5), transparent);
	}

	.elog-mobile-footer__nav {
		display: grid;
		grid-template-columns: repeat(var(--elog-mobile-footer-items, 5), minmax(0, 1fr));
		width: 100%;
		max-width: 620px;
		min-height: 58px;
		margin: 0 auto;
		align-items: stretch;
		gap: 2px;
	}

	.elog-mobile-footer__link {
		position: relative;
		display: flex;
		min-width: 0;
		min-height: 56px;
		padding: 4px 2px 2px;
		color: #607086;
		text-decoration: none !important;
		-webkit-tap-highlight-color: transparent;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		gap: 3px;
		transition: color 0.2s ease, transform 0.2s ease;
	}

	.elog-mobile-footer__link::after {
		position: absolute;
		top: -6px;
		left: 50%;
		width: 20px;
		height: 3px;
		content: "";
		transform: translateX(-50%) scaleX(0);
		border-radius: 0 0 6px 6px;
		background: #ed1c24;
		transition: transform 0.2s ease;
	}

	.elog-mobile-footer__link:active {
		transform: scale(0.96);
	}

	.elog-mobile-footer__icon {
		display: grid;
		width: 32px;
		height: 28px;
		border-radius: 10px;
		font-size: 18px;
		line-height: 1;
		place-items: center;
		transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	}

	.elog-mobile-footer__label {
		display: block;
		overflow: hidden;
		width: 100%;
		color: inherit;
		font-size: clamp(9px, 2.45vw, 11px);
		font-weight: 650;
		line-height: 1.2;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.elog-mobile-footer__link.is-active {
		color: #ed1c24;
	}

	.elog-mobile-footer__link.is-active::after {
		transform: translateX(-50%) scaleX(1);
	}

	.elog-mobile-footer__link.is-active .elog-mobile-footer__icon {
		color: #fff;
		background: linear-gradient(135deg, #f32932, #c90e17);
		box-shadow: 0 6px 15px rgba(237, 28, 36, 0.26);
		transform: translateY(-1px);
	}

	.elog-mobile-footer__link:focus-visible {
		border-radius: 10px;
		outline: 2px solid #ed1c24;
		outline-offset: -2px;
	}

	.elog-mobile-footer__link:focus-visible .elog-mobile-footer__icon {
		color: #ed1c24;
		background: #fff0f1;
	}

	.elog-mobile-footer__link.is-active:focus-visible .elog-mobile-footer__icon {
		color: #fff;
		background: linear-gradient(135deg, #f32932, #c90e17);
	}

	@keyframes elog-mobile-footer-enter {
		from {
			opacity: 0;
			transform: translateY(100%);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

@media (max-width: 390px) {
	.elog-mobile-footer {
		padding-right: 4px;
		padding-left: 4px;
	}

	.elog-mobile-footer__nav {
		gap: 0;
	}

	.elog-mobile-footer__link {
		padding-right: 1px;
		padding-left: 1px;
	}

	.elog-mobile-footer__icon {
		width: 29px;
		font-size: 17px;
	}
}

@media (max-width: 849px) and (orientation: landscape) and (max-height: 520px) {
	:root {
		--elog-mobile-footer-height: 62px;
	}

	.elog-mobile-footer {
		padding-top: 3px;
	}

	.elog-mobile-footer__nav {
		min-height: 54px;
	}

	.elog-mobile-footer__link {
		min-height: 52px;
	}

	.elog-mobile-footer__icon {
		height: 25px;
		font-size: 16px;
	}

	.elog-mobile-footer__label {
		font-size: 9px;
	}
}

@media (min-width: 850px), print {
	.elog-mobile-footer {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elog-mobile-footer,
	.elog-mobile-footer *,
	.elog-mobile-footer *::before,
	.elog-mobile-footer *::after {
		animation: none !important;
		transition: none !important;
	}
}