/**
 * Мобильное нижнее меню быстрых действий.
 */

.mobile-bottom-nav {
	display: none;
}

@media (max-width: 767px) {
	body {
		padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
	}

	.mobile-bottom-nav {
		position: fixed;
		left: 50%;
		bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
		z-index: 1000;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.1rem;
		width: min(31rem, calc(100vw - 1.8rem));
		height: 4.28rem;
		padding: 0.5rem 0.48rem 0.46rem;
		border: 1px solid rgb(255 255 255 / 0.28);
		border-radius: 1.7rem;
		background: linear-gradient(135deg, rgb(38 38 38 / 0.58), rgb(128 128 128 / 0.46));
		box-shadow: 0 12px 34px rgb(0 0 0 / 0.22), inset 0 1px 0 rgb(255 255 255 / 0.32);
		backdrop-filter: blur(14px) saturate(135%);
		-webkit-backdrop-filter: blur(14px) saturate(135%);
		transform: translateX(-50%);
	}

	.mobile-bottom-nav__item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		gap: 0.22rem;
		min-width: 0;
		min-height: 3.1rem;
		padding: 0.2rem 0.14rem;
		border: 0;
		border-radius: 1.2rem;
		background: transparent;
		color: #fff;
		font: inherit;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.2s ease, transform 0.2s ease;
	}

	.mobile-bottom-nav__item:hover,
	.mobile-bottom-nav__item:focus-visible {
		background: rgb(255 255 255 / 0.14);
		transform: translateY(-0.08rem);
	}

	.mobile-bottom-nav__item:focus-visible {
		outline: 2px solid rgb(var(--color-accent));
		outline-offset: 2px;
	}

	.mobile-bottom-nav__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.8rem;
		height: 1.8rem;
		color: currentColor;
	}

	.mobile-bottom-nav__icon svg {
		width: 1.7rem;
		height: 1.7rem;
	}

	.mobile-bottom-nav__icon img {
		display: block;
		width: 1.75rem;
		height: 1.75rem;
		object-fit: contain;
	}

	.mobile-bottom-nav__item--calculator .mobile-bottom-nav__icon,
	.mobile-bottom-nav__item--measurer .mobile-bottom-nav__icon {
		color: rgb(var(--color-accent));
	}

	.mobile-bottom-nav__item--telegram .mobile-bottom-nav__icon {
		color: #2da8e8;
	}

	.mobile-bottom-nav__item--max .mobile-bottom-nav__icon img {
		width: 2rem;
		height: 2rem;
	}

	.mobile-bottom-nav__item--measurer .mobile-bottom-nav__icon {
		width: 2.42rem;
		height: 1.75rem;
	}

	.mobile-bottom-nav__item--measurer .mobile-bottom-nav__icon img {
		width: auto;
		max-width: none;
		height: 1.75rem;
		filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.18));
	}

	.mobile-bottom-nav__label {
		display: block;
		max-width: 100%;
		overflow: hidden;
		color: rgb(255 255 255 / 0.92);
		font-size: 0.66rem;
		font-weight: 600;
		line-height: 1.08;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.contact-widget {
		bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
	}
}

@media (max-width: 480px) {
	.mobile-bottom-nav {
		border-radius: 1.55rem;
	}

	.mobile-bottom-nav__label {
		font-size: 0.61rem;
	}
}

@media (max-width: 767px) and (max-height: 720px) {
	body {
		padding-bottom: calc(4.65rem + env(safe-area-inset-bottom, 0px));
	}

	.mobile-bottom-nav {
		bottom: calc(0.42rem + env(safe-area-inset-bottom, 0px));
		height: 4rem;
		padding-top: 0.44rem;
		padding-bottom: 0.44rem;
		border-radius: 1.5rem;
	}

	.mobile-bottom-nav__item {
		min-height: 2.9rem;
	}

	.mobile-bottom-nav__label {
		font-size: 0.58rem;
	}

	.contact-widget {
		bottom: calc(5.35rem + env(safe-area-inset-bottom, 0px));
	}
}