/* ==========================================================================
   AIS-TEC: широкое меню каталога (мега-меню)
   Правка живёт в /local, подключается из /local/php_interface/init.php
   Работает в паре с шаблоном компонента
   /local/templates/.default/components/bitrix/menu/leftMenuWide/
   ========================================================================== */

/* ---------- десктоп ---------- */
@media screen and (min-width: 1025px) {
	/* иконки разделов видны на любой ширине (тема прячет их на 1025-1200px) */
	#leftMenu li .pc {
		display: table-cell !important;
		box-sizing: content-box;
		width: 20px;
		height: 20px;
		padding: 7px 0 7px 12px;
		text-align: center;
	}

	#leftMenu li .pc img {
		max-width: 20px;
		max-height: 20px;
	}

	#leftMenu li .pc.no-image {
		width: 8px;
		height: 0;
		padding-left: 0;
	}

	#leftMenu .tx {
		padding: 7px 10px 7px 10px;
	}

	#leftMenu .no-image + .tx {
		padding-left: 12px !important;
	}

	#leftMenu li .menuLink {
		font-size: 12.5px;
		line-height: 16px;
	}

	/* ---------- сама панель ---------- */
	#leftMenu .drop {
		top: 0;
		left: 100%;
		box-sizing: border-box;
		width: 760px;
		max-width: calc(100vw - 340px);
		min-height: 100%;
		padding: 0 0 8px;
		background: #ffffff;
		border-top: 3px solid #151b85;
		box-shadow: 0 8px 28px rgb(0 0 0 / 18%);
	}

	#leftMenu .eChild.activeDrop > .drop {
		display: block !important;
	}

	/* шапка панели */
	#leftMenu .drop .dropHead {
		display: flex;
		align-items: baseline;
		padding: 16px 24px 10px;
		border-bottom: 1px solid #ececf2;
	}

	#leftMenu .drop .dropHeadLink {
		display: inline-flex;
		align-items: center;
		color: #151b85;
		font-size: 16px;
		font-family: robotobold, Arial, sans-serif;
		text-decoration: none;
	}

	#leftMenu .drop .dropHeadLink i {
		display: inline-block;
		width: 0;
		height: 0;
		margin-left: 8px;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-left: 6px solid #151b85;
		transition: transform 0.15s ease-in-out;
	}

	#leftMenu .drop .dropHeadLink:hover {
		text-decoration: underline;
	}

	#leftMenu .drop .dropHeadLink:hover i {
		transform: translateX(3px);
	}

	#leftMenu .drop .dropHeadCnt {
		margin-left: 10px;
		color: #9aa0a6;
		font-size: 12px;
		font-family: Arial, sans-serif;
		white-space: nowrap;
	}

	/* колонки со списком подразделов */
	#leftMenu .drop .menuItems {
		display: block;
		box-sizing: border-box;
		width: auto;
		padding: 14px 24px 6px;
		background: transparent;
		border-right: 0;
		column-count: 3;
		column-gap: 28px;
		column-fill: balance;
	}

	#leftMenu .drop .menuItems + .menuItems {
		padding-top: 0;
	}

	#leftMenu .drop .menuItems li {
		position: relative;
		margin: 0;
		break-inside: avoid;
		page-break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}

	#leftMenu .drop .menuItems a.menuLink {
		display: block;
		margin: 0 -8px;
		padding: 5px 8px;
		color: #222222;
		line-height: 17px;
		border-radius: 3px;
		transition: background 0.12s ease-in-out;
	}

	#leftMenu .drop .menuItems a.menuLink:hover {
		background: #eef0f9;
	}

	#leftMenu .drop .menuItems a.menuLink .link-title {
		color: inherit;
		font-size: 13px;
		font-family: "roboto_ltregular", Arial, sans-serif;
		text-transform: none;
		transition: color 0.15s ease-in-out;
	}

	#leftMenu .drop .menuItems a.menuLink:hover .link-title {
		color: #151b85;
		text-decoration: none;
	}

	#leftMenu .drop .menuItems small {
		position: static;
		height: auto;
		margin: 0 0 0 6px;
		color: #9aa0a6;
		font-size: 11px;
		font-family: Arial, sans-serif;
		line-height: inherit;
		vertical-align: baseline;
	}

	/* третий уровень внутри колонки */
	#leftMenu .drop .menuDropItems {
		padding: 0 0 4px 12px;
	}

	#leftMenu .drop .menuDropItems a.menuLink {
		margin: 0 -8px;
		padding: 3px 8px;
		color: #6b6b6b;
		font-size: 12px;
		border-radius: 3px;
	}

	#leftMenu .drop .menuDropItems a.menuLink:hover {
		color: #151b85;
		background: #eef0f9;
		text-decoration: none;
	}

	/* картинки подразделов в панели не нужны */
	#leftMenu .drop .menuItems a.pictureLink {
		display: none;
	}
}

/* ---------- планшет и телефон: обычная гармошка ---------- */
@media screen and (max-width: 1024px) {
	#leftMenu .drop .dropHead {
		display: none;
	}
}


/* ВАРИАНТ C: активный пункт — светлый фон + синяя полоска слева.
   Чтобы вернуться к варианту B, достаточно удалить этот блок целиком. */
@media screen and (min-width: 1025px) {
	#leftMenu > li:hover > a,
	#leftMenu > li.activeDrop > a {
		background: #f7f8fc;
		box-shadow: inset 3px 0 0 #151b85;
	}

	#leftMenu > li:hover > a .link-title,
	#leftMenu > li.activeDrop > a .link-title {
		color: #151b85;
		font-family: robotomedium, Arial, sans-serif;
	}
}


/* Крупнее пункты левого меню на широких экранах (от 1201px).
   На 1025-1200px оставляем компактный размер, иначе названия переносятся. */
@media screen and (min-width: 1201px) {
	#leftMenu li .pc {
		width: 22px;
		height: 22px;
		padding: 9px 0 9px 14px;
	}

	#leftMenu li .pc img {
		max-width: 22px;
		max-height: 22px;
	}

	#leftMenu .tx {
		padding: 9px 10px 9px 11px;
	}

	#leftMenu li .menuLink {
		font-size: 13.5px;
		line-height: 18px;
	}
}


/* Выравнивание колонок мега-меню.
   В разметке заголовок раздела и его подпункты — два СОСЕДНИХ элемента списка
   (li.nested и следом li.allow-dropdown), а не один вложенный. Поэтому разрыв
   колонки мог попасть ровно между ними: заголовок оставался внизу колонки,
   а подпункты уезжали в следующую и тянули за собой отступ 12px —
   левые края колонок переставали совпадать.
   Ниже запрещаем разрыв в этом месте, и пара всегда переносится целиком. */
@media screen and (min-width: 1025px) {
	#leftMenu .drop .menuItems > li.nested {
		break-after: avoid;
		page-break-after: avoid;
		-webkit-column-break-after: avoid;
	}

	#leftMenu .drop .menuItems > li.allow-dropdown {
		break-before: avoid;
		page-break-before: avoid;
		-webkit-column-break-before: avoid;
	}
}


/* Ширина панели и выравнивание счётчиков.
   Колонки были 219px: длинные названия переносились на две строки, а число
   срывалось на отдельную строку под текстом — из-за этого промежутки между
   колонками выглядели рваными. Панель шире, счётчик прижат к правому краю
   колонки, поэтому у каждой колонки ровный и левый, и правый край.
   Ограничение max-width из блока выше сохраняется: на узких десктопах
   (1025-1280px) панель ужимается сама и за экран не выходит. */
@media screen and (min-width: 1025px) {
	#leftMenu .drop {
		width: 900px;
	}

	#leftMenu .drop .menuItems {
		column-gap: 24px;
	}

	#leftMenu .drop .menuItems a.menuLink {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 10px;
	}

	#leftMenu .drop .menuItems a.menuLink .link-title {
		flex: 0 1 auto;
		min-width: 0;
	}

	#leftMenu .drop .menuItems a.menuLink small {
		flex: 0 0 auto;
		margin: 0;
	}
}


/* Древовидные связки у подпунктов.
   Вертикальная линия идёт по левому краю списка подпунктов, от неё к каждому
   пункту отходит короткий штрих — видно, какому разделу они принадлежат.
   Линия рисуется отрезками на самих пунктах: у последнего она обрывается
   на уровне его штриха, поэтому хвост вниз не свисает.
   Псевдоэлементы ::before/::after у этих пунктов темой не заняты (проверено). */
@media screen and (min-width: 1025px) {
	#leftMenu .drop .menuDropItems {
		padding-left: 20px;
	}

	#leftMenu .drop .menuDropItems > li {
		position: relative;
	}

	/* вертикальный отрезок */
	#leftMenu .drop .menuDropItems > li::before {
		content: "";
		position: absolute;
		left: -12px;
		top: 0;
		width: 1px;
		height: 100%;
		background: #d3d6e4;
	}

	/* у последнего пункта линия доходит только до своего штриха */
	#leftMenu .drop .menuDropItems > li:last-child::before {
		height: 11px;
	}

	/* штрих к пункту */
	#leftMenu .drop .menuDropItems > li::after {
		content: "";
		position: absolute;
		left: -12px;
		top: 11px;
		width: 9px;
		height: 1px;
		background: #d3d6e4;
	}
}