/*
	Пищевая ценность в карточке блюда — разметку отдаёт nutritionHtml() из helpers.lib.php.
	Как NutritionBlock в мобильном приложении (RN-platform, NutritionBlock.styles.ts):
	серая плашка, сверху сегменты «На 100 гр | На блюдо», под ними Белки / Жиры / Углеводы / Ккал.
	Переключение без JS: две radio стоят перед сегментами и значениями, :checked ~ показывает
	нужный набор и двигает белый «палец» сегмента.
	Цвета — переменные: здесь светлая тема приложения, тёмная — в blacktheme.css и theme.php,
	в Telegram цвета берутся из его темы (style_tg.css).
*/
.kbju {
	--kbju-bg: #F8F8F8;
	--kbju-track: #767680;
	--kbju-track-alpha: .12;
	--kbju-thumb: #FFFFFF;
	--kbju-text: #000000;
	--kbju-muted: #888888;
	--kbju-active: #1C1C1E;
	position: relative;
	margin: 15px 0px 20px 0px;
	padding: 8px;
	border-radius: 12px;
	background-color: var(--kbju-bg);
}
.kbju-in {position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;}

/* сегменты: дорожка — полупрозрачный слой, чтобы один и тот же серый работал на любой плашке */
.kbju-seg {
	position: relative;
	z-index: 0;
	display: flex;
	height: 32px;
	margin-bottom: 12px;
	border-radius: 9px;
}
.kbju-seg:before {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	border-radius: inherit;
	background-color: var(--kbju-track);
	opacity: var(--kbju-track-alpha);
}
.kbju-thumb {
	position: absolute;
	top: 2px; bottom: 2px; left: 2px;
	width: calc(50% - 2px);
	border-radius: 7px;
	background-color: var(--kbju-thumb);
	box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04);
	transition: transform .2s ease;
}
.kbju-seg label {
	position: relative;
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var(--kbju-muted);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.kbju-in.dish:checked ~ .kbju-seg .kbju-thumb {transform: translateX(100%);}
.kbju-in.per100:checked ~ .kbju-seg .per100,
.kbju-in.dish:checked ~ .kbju-seg .dish {color: var(--kbju-active); font-weight: 600; cursor: default;}
.kbju-in.per100:checked ~ .kbju-vals.dish,
.kbju-in.dish:checked ~ .kbju-vals.per100 {display: none;}
.kbju-in.per100:focus-visible ~ .kbju-seg .per100,
.kbju-in.dish:focus-visible ~ .kbju-seg .dish {outline: 2px solid var(--kbju-muted); outline-offset: -2px; border-radius: 7px;}
@media (prefers-reduced-motion: reduce) {
	.kbju-thumb {transition: none;}
}

/* без переключателя (выход в штуках или не указан) — заголовок с базой чисел */
.kbju-title {margin: 0px 0px 8px 0px; font-size: 13px; line-height: 16px; text-align: center; color: var(--kbju-muted);}

.kbju-vals {display: flex; justify-content: space-around;}
.kbju-cell {display: flex; flex-direction: column; align-items: center;}
.kbju-cell b {margin-bottom: 4px; font-size: 14px; font-weight: 600; line-height: 18px; color: var(--kbju-text);}
.kbju-cell span {font-size: 12px; line-height: 16px; color: var(--kbju-muted);}