/*
	Бейджи блюда из 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: 4px 8px;
	border-radius: 6px;
	background-color: var(--primary-color, #555);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 14px;
}
/* длинный текст не распирает плитку — обрезается многоточием */
.dishlabel span {min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.dishlabel img {flex: none; width: 12px; height: 12px; margin-right: 4px; 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;
}
.itemcard .dishlabels.onpic .dishlabel {box-shadow: 0 1px 3px rgba(0,0,0,.2);}

/* в карточке блюда — под названием. Тонкая рамка нужна белому бейджу
   (🌶 приходит с bg #ffffff): на белом фоне карточки иначе не видно, что это плашка */
.dishlabels.undername {gap: 8px; margin: 10px 0px 15px 0px;}
.dishlabels.undername:first-child {margin-top: 0px;}
.dishlabels.undername .dishlabel {
	padding: 5px 10px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 16px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.dishlabels.undername .dishlabel img {width: 14px; height: 14px; margin-right: 6px;}
.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; box-shadow: none;}

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

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