/*
 * Адаптивные правила для верхнего меню личного кабинета (personal_menu.php)
 * на мобильных экранах.
 *
 * Отдельный файл специально, чтобы не подключать общий media.css целиком —
 * в нём много других правил для главной страницы/калькулятора/футера,
 * которые никогда раньше не были подключены на сайте, и включать их все
 * разом рискованно (могут неожиданно изменить другие страницы).
 * Здесь только то, что нужно для решения конкретной проблемы.
 */

@media only screen and (max-width: 768px) {

	/* Первое меню (.main-menu — "Профиль", "Мои покупки", "Мой склад",
	   "В кошельке") раньше было жёстко 660px шириной, из-за чего на
	   мобильных экранах пункты наезжали друг на друга. Разрешаем меню
	   сжиматься и переносить пункты по строкам, и убираем абсолютные
	   пиксельные смещения у иконок, рассчитанные на широкий экран. */
	.main-menu {
		width: 100% !important;
		padding-left: 0 !important;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.main-menu > li {
		position: static !important;
		float: none !important;
		left: auto !important;
		top: auto !important;
	}
	.main-menu > li img {
		position: static !important;
		left: auto !important;
		top: auto !important;
		float: none !important;
	}

	/* Второй блок меню (.help-menu — "Калькулятор", "Ваш адрес в США") был
	   абсолютно спозиционирован с расчётом на то, что .main-menu занимает
	   одну строку (margin-top: -38px в bootstrap.css). Раз main-menu теперь
	   многострочный, эта абсолютная привязка накладывает help-menu поверх
	   второй строки main-menu. На мобильных убираем абсолютное позиционирование
	   и ставим блок в обычный поток документа, под main-menu. */
	.help-menu {
		position: static !important;
		width: 100% !important;
		float: none !important;
		margin-top: 10px !important;
		right: auto !important;
		/* По умолчанию блок должен быть свёрнут — задаём это явно и жёстко,
		   не полагаясь на то, что bootstrap.css применится раньше/после. */
		height: 40px !important;
		overflow: hidden !important;
	}
	.help-menu.active {
		height: auto !important;
		overflow: visible !important;
	}
	.help-menu > li {
		float: none !important;
		width: auto !important;
		display: block;
	}
	.help-menu > li.calc {
		width: 100% !important;
	}
	.help-menu .address {
		display: block;
	}

	/* Пункт "В кошельке" (.wallet-menu) — на десктопе его подменю (<ul>) имеет
	   position:absolute и рассчитывает на то, что сам пункт (li) остаётся
	   position:relative/static в контексте всей широкой строки меню. Раз мы
	   выше сделали все .main-menu > li статичными, нужно вернуть этому
	   конкретному пункту position:relative, чтобы подменю раскрывалось прямо
	   под ним, а не улетало в случайное место на странице. Раскрытие теперь
	   происходит по тапу (см. JS в personal_menu.php), а не по наведению. */
	.main-menu > li.wallet-menu {
		position: relative !important;
	}
	.wallet-menu > ul {
		display: none;
		position: absolute !important;
		left: 0 !important;
		top: 100% !important;
		width: 100% !important;
	}
}