/*
	Бейджи блюда из LABELS2 — разметку отдаёт dishLabelsHtml() из helpers.lib.php.
	Цвета приходят из данных инлайном, здесь только форма и раскладка. Фирменный цвет
	с белым текстом — запасной вариант, когда цвет в админке не выбран
	(в /tg/ переменной --primary-color нет, там серый).
	Размеры крупнее мобильного приложения (RN-platform, DishLabels.styles.ts):
	на сайте бейджи читаются с меньшего расстояния, чем в приложении.
	Теней и рамок нет специально: плашки на фото и в карточке без ореола.
*/
.dishlabels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}
.dishlabel {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 5px 9px;
	border-radius: 8px;
	background-color: var(--primary-color, #555);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
}
/* длинный текст не распирает плитку — обрезается многоточием */
.dishlabel span {min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.dishlabel img {flex: none; width: 14px; height: 14px; margin-right: 5px; object-fit: contain;}
.dishlabel img:last-child {margin-right: 0px;}

/* поверх фото плитки — слева сверху. Фото открывает блюдо, поэтому клики проходят сквозь бейджи */
.itemcard .dishlabels.onpic {
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	z-index: 1;
	pointer-events: none;
}

/* в карточке блюда — под названием */
.dishlabels.undername {gap: 8px; margin: 10px 0px 15px 0px;}
.dishlabels.undername:first-child {margin-top: 0px;}
.dishlabels.undername .dishlabel {
	padding: 6px 11px;
	border-radius: 10px;
	font-size: 15px;
	line-height: 18px;
}
.dishlabels.undername .dishlabel img {width: 16px; height: 16px; margin-right: 7px;}
.dishlabels.undername .dishlabel img:last-child {margin-right: 0px;}

/*
	Предзаказ (UF_PZONLY_DAYS) — preorderLabelHtml(), всегда первый в обойме.
	Цвета как в приложении: на фото и в корзине оранжевый, в карточке блюда,
	у раздела и в оформлении заказа — светло-золотой.
*/
.dishlabel.preorder {background-color: #E67E22; color: #fff;}
.dishlabels.undername .dishlabel.preorder,
.dishlabels.banner .dishlabel.preorder {background-color: #FBF2E5; color: #C8A96E;}

/* в корзине — под названием позиции */
.dishlabels.incart {margin: 4px 0px 6px 0px;}
.dishlabels.incart .dishlabel {padding: 4px 9px; border-radius: 10px;}

/* под заголовком раздела и в оформлении заказа. Текст в оформлении длинный — переносим, а не режем */
.dishlabels.banner {margin: 6px 0px 16px 0px;}
.dishlabels.banner .dishlabel {padding: 9px 11px; border-radius: 10px; font-size: 15px; font-weight: 500; line-height: 18px;}
.dishlabels.banner .dishlabel span {white-space: normal;}