/* Universal Box */

.ubox {
	--ubox-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--ubox-radius: 16px;
	--ubox-radius-sm: 12px;
	--ubox-radius-xs: 10px;
	--ubox-border: #e0e0e0;
	--ubox-border-soft: #eceff3;
	--ubox-text: #2f3441;
	--ubox-text-muted: #5a6169;
	--ubox-green: #48bb78;
	--ubox-green-soft: rgba(72, 187, 120, 0.12);
	--ubox-green-shadow: 0 2px 20px rgba(72, 187, 120, 0.18);
	--ubox-blue: #4f82ea;
	--ubox-blue-soft: rgba(79, 130, 234, 0.1);
	--ubox-orange: #e65100;
	--ubox-orange-soft: rgba(230, 81, 0, 0.1);
	--ubox-sand: #d4a74c;
	--ubox-sand-soft: rgba(212, 167, 76, 0.14);
	--ubox-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
	--ubox-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04);

	font-family: var(--ubox-font);
	color: var(--ubox-text);
	box-sizing: border-box;
}

.ubox *,
.ubox *::before,
.ubox *::after {
	box-sizing: border-box;
}

.entry-content .ubox,
.home-text .ubox,
.page-content .ubox,
.taxonomy-description .ubox {
	margin: 1.35rem 0;
}

.entry-content .ubox:first-child,
.home-text .ubox:first-child {
	margin-top: 0.5rem;
}

/* Пустой <p> перед ubox (wpautop) — скрыть, если PHP-фильтр не успел */
.entry-content p:empty:has(+ .ubox),
.home-text p:empty:has(+ .ubox),
.page-content p:empty:has(+ .ubox),
.taxonomy-description p:empty:has(+ .ubox) {
	display: none;
	margin: 0;
	padding: 0;
}

/* --- Блоки --- */

.ubox-box {
	background: #fff;
	border: 1px solid var(--ubox-border);
	border-radius: var(--ubox-radius);
	box-shadow: var(--ubox-shadow-soft);
	overflow: hidden;
}

.ubox-box__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ubox-text);
	margin: 0;
	padding: 16px 18px 0;
}

.ubox-box__body {
	padding: 12px 18px 18px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ubox-text-muted);
}

.ubox-box__body > :first-child {
	margin-top: 0;
}

.ubox-box__body > :last-child {
	margin-bottom: 0;
}

.ubox-box--note {
	border-left: 4px solid var(--ubox-green);
	background: linear-gradient(135deg, #fff 0%, #f6fdf9 100%);
}

.ubox-box--note .ubox-box__title {
	color: #1f5137;
}

.ubox-box.ubox-box--info {
	border: none;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.ubox-box--info .ubox-box__info {
	padding: 0;
}

.ubox-box--info .ubox-box__frame {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: var(--ubox-radius);
	box-shadow: var(--ubox-shadow-soft);
	padding: 16px 18px;
}

/* Как кнопка подсказки в калькуляторах (calorie-norm-help__btn) */
.ubox-box--info .ubox-box__icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #eef0f2;
	border-radius: 6px;
	color: #b0b8bf;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	font-weight: 600;
	font-style: normal;
	line-height: 1;
	user-select: none;
}

.ubox-box--info .ubox-box__content {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	background: transparent;
}

.ubox-box--info .ubox-box__title {
	padding: 0 0 6px;
	color: var(--ubox-text);
	font-size: 15px;
}

.ubox-box--info .ubox-box__body {
	padding: 0;
	color: var(--ubox-text-muted);
	line-height: 1.6;
}

/* Списки внутри ubox — без иконок cook-it, нативные маркеры */
.entry-content .ubox ul,
.home-text .ubox ul,
.page-content .ubox ul,
.taxonomy-description .ubox ul,
.ubox ul {
	list-style: disc outside !important;
	margin: 0.5rem 0 0 !important;
	padding: 0 0 0 1.15rem !important;
}

.entry-content .ubox ul > li,
.home-text .ubox ul > li,
.page-content .ubox ul > li,
.taxonomy-description .ubox ul > li,
.ubox ul > li {
	display: list-item !important;
	margin: 0.5rem 0 !important;
	padding: 0 0 0 0.2rem !important;
	position: static !important;
}

.entry-content .ubox ul:not([class]) > li::before,
.entry-content .ubox ul.wp-block-list > li::before,
.home-text .ubox ul:not([class]) > li::before,
.home-text .ubox ul.wp-block-list > li::before,
.page-content .ubox ul:not([class]) > li::before,
.page-content .ubox ul.wp-block-list > li::before,
.taxonomy-description .ubox ul:not([class]) > li::before,
.taxonomy-description .ubox ul.wp-block-list > li::before,
.ubox ul:not([class]) > li::before,
.ubox ul.wp-block-list > li::before {
	content: none !important;
	display: none !important;
}

.entry-content .ubox ul > li::marker,
.home-text .ubox ul > li::marker,
.page-content .ubox ul > li::marker,
.taxonomy-description .ubox ul > li::marker,
.ubox ul > li::marker {
	color: var(--ubox-green);
	font-size: 0.85em;
}

.entry-content .ubox ol,
.home-text .ubox ol,
.page-content .ubox ol,
.taxonomy-description .ubox ol,
.ubox ol {
	margin: 0.65rem 0 0;
	padding-left: 1.35rem !important;
}

.entry-content .ubox ol > li,
.home-text .ubox ol > li,
.page-content .ubox ol > li,
.taxonomy-description .ubox ol > li,
.ubox ol > li {
	margin: 0.45rem 0;
	padding-left: 0.25rem !important;
}

/* --- Шаги --- */

.ubox-step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px 16px;
	align-items: start;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--ubox-border);
	border-radius: var(--ubox-radius);
	box-shadow: var(--ubox-shadow-soft);
}

.ubox-step + .ubox-step {
	margin-top: 12px;
}

.ubox-step__num {
	min-width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	color: var(--ubox-green);
	background: var(--ubox-green-soft);
	border-radius: var(--ubox-radius-sm);
	box-shadow: var(--ubox-green-shadow);
}

.ubox-step__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ubox-text);
}

.ubox-step__text {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ubox-text-muted);
}

.ubox-step__text > :first-child {
	margin-top: 0;
}

.ubox-step__text > :last-child {
	margin-bottom: 0;
}

/* --- Вкладки --- */

.ubox-tabs {
	background: #fff;
	border: 1px solid var(--ubox-border);
	border-radius: var(--ubox-radius);
	box-shadow: var(--ubox-shadow-soft);
	overflow: hidden;
}

.ubox-tabs__nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	padding: 10px 12px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.ubox-tabs__nav::-webkit-scrollbar {
	height: 4px;
}

.ubox-tabs__nav::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.12);
	border-radius: 999px;
}

.ubox-tabs__btn {
	flex: 0 0 auto;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid var(--ubox-border);
	border-bottom: none;
	border-radius: var(--ubox-radius-sm) var(--ubox-radius-sm) 0 0;
	background: #f8f9fb;
	color: var(--ubox-text-muted);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

@media (min-width: 768px) {
	.ubox-tabs__btn {
		min-width: 7.25rem;
		padding: 10px 28px;
		text-align: center;
	}
}

.ubox-tabs__btn:focus {
	outline: none;
}

.ubox-tabs__btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--ubox-tab-focus-ring);
}

.ubox-tabs__btn:active {
	outline: none;
}

.ubox-tabs__btn:hover {
	color: var(--ubox-text);
	background: #fff;
}

.ubox-tabs__btn.is-active {
	color: #fff;
	background: var(--ubox-tab-accent);
	border-color: var(--ubox-tab-accent);
	box-shadow: var(--ubox-tab-accent-shadow);
}

.ubox-tabs__btn.is-active:focus,
.ubox-tabs__btn.is-active:focus-visible,
.ubox-tabs__btn.is-active:active {
	outline: none;
	box-shadow: var(--ubox-tab-accent-shadow);
	border-color: var(--ubox-tab-accent);
}

.ubox-tabs__panels {
	position: relative;
	min-height: 0;
	border-top: 1px solid var(--ubox-border-soft);
	background: #fff;
}

.ubox-tabs__panel {
	display: none !important;
	padding: 14px 18px;
}

.ubox-tabs__panel.is-active {
	display: block !important;
}

.ubox-tabs__panel[hidden] {
	display: none !important;
}

.ubox-tabs__panel-inner {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ubox-text-muted);
	margin: 0;
}

.entry-content .ubox-tabs__panel-inner > :first-child,
.home-text .ubox-tabs__panel-inner > :first-child,
.page-content .ubox-tabs__panel-inner > :first-child,
.ubox-tabs__panel-inner > :first-child {
	margin-top: 0 !important;
}

.entry-content .ubox-tabs__panel-inner > :last-child,
.home-text .ubox-tabs__panel-inner > :last-child,
.ubox-tabs__panel-inner > :last-child {
	margin-bottom: 0 !important;
}

.entry-content .ubox-tabs__panel-inner p,
.home-text .ubox-tabs__panel-inner p,
.ubox-tabs__panel-inner p {
	margin: 0 !important;
}

.ubox-tabs__panel-inner > br:first-child,
.ubox-tabs__panel-inner > br:last-child {
	display: none;
}

/* --- Сетка --- */

.ubox-grid__inner {
	display: grid;
	gap: 14px;
}

.ubox-grid--cols-2 .ubox-grid__inner {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ubox-grid--cols-3 .ubox-grid__inner {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ubox-grid--cols-4 .ubox-grid__inner {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ubox-grid__col {
	background: #fff;
	border: 1px solid var(--ubox-border-soft);
	border-radius: var(--ubox-radius-sm);
	padding: 16px 18px;
	box-shadow: var(--ubox-shadow-soft);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ubox-text-muted);
}

.ubox-grid__col > :first-child {
	margin-top: 0;
}

.ubox-grid__col > :last-child {
	margin-bottom: 0;
}

.ubox-grid .ubox-grid__col {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

.ubox-grid .ubox-grid__col > .ubox.ubox-box {
	margin: 0;
	transition:
		transform 0.22s ease,
		box-shadow 0.22s ease,
		border-color 0.22s ease;
}

@media (hover: hover) {
	.ubox-grid .ubox-grid__col > .ubox.ubox-box:hover {
		transform: translateY(-3px);
		box-shadow:
			0 1px 2px rgba(0, 0, 0, 0.03),
			0 8px 20px rgba(0, 0, 0, 0.045);
	}
}

.ubox-grid .ubox-grid__col > .ubox.ubox-box:active {
	transform: translateY(-1px);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.03),
		0 4px 12px rgba(0, 0, 0, 0.035);
	transition-duration: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
	.ubox-grid .ubox-grid__col > .ubox.ubox-box {
		transition: none;
	}

	.ubox-grid .ubox-grid__col > .ubox.ubox-box:hover,
	.ubox-grid .ubox-grid__col > .ubox.ubox-box:active {
		transform: none;
	}
}

/* Расцветки колонок — inline CSS из box.php (calorazh_ubox_grid_color_schemes) */

/* Планшет и телефон: колонки друг под другом */
@media (max-width: 1199px) {
	.ubox-grid__inner {
		grid-template-columns: 1fr !important;
		gap: 14px;
		border: none;
		border-radius: 0;
		overflow: visible;
		background: transparent;
		box-shadow: none;
	}

	.ubox-grid .ubox-grid__col > .ubox.ubox-box {
		height: auto;
	}
}

/* Широкий десктоп: три колонки в ряд */
@media (min-width: 1200px) {
	.ubox-grid__inner {
		align-items: stretch;
	}

	.ubox-grid .ubox-grid__col > .ubox.ubox-box {
		height: 100%;
	}
}

/* --- Мобильная адаптация (как карточки анализатора) --- */

@media (max-width: 991px) {
	.ubox-box,
	.ubox-step,
	.ubox-tabs,
	.ubox-grid__col {
		border-radius: var(--ubox-radius-sm);
	}

	.ubox-box__body,
	.ubox-tabs__panel {
		padding-left: 16px;
		padding-right: 16px;
	}

	.ubox-tabs__panel {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.ubox-step {
		grid-template-columns: auto 1fr;
		gap: 12px;
		padding: 14px 16px;
	}

	.ubox-step__num {
		min-width: 38px;
		height: 38px;
		font-size: 18px;
		border-radius: var(--ubox-radius-xs);
	}

	.ubox-tabs__nav {
		padding-left: 10px;
		padding-right: 10px;
	}

	.ubox-box--info .ubox-box__frame {
		padding: 14px 16px;
		gap: 10px;
	}

	.ubox-box--info .ubox-box__content {
		padding: 0;
	}
}

@media (max-width: 767px) {
	.ubox-box--info .ubox-box__frame {
		padding: 12px 14px;
		gap: 8px;
	}

	.ubox-box--info .ubox-box__icon {
		flex-basis: 20px;
		width: 20px;
		height: 20px;
		font-size: 12px;
	}
	.ubox-tabs__nav {
		width: 100%;
		overflow-x: visible;
	}

	.ubox-tabs__btn {
		flex: 1 1 0;
		min-width: 0;
		text-align: center;
		font-size: 13px;
		padding: 9px 8px;
	}
}

@media (max-width: 480px) {
	.ubox-box--info .ubox-box__frame {
		padding: 11px 12px;
	}

	.ubox-box__body,
	.ubox-step__text,
	.ubox-tabs__panel-inner,
	.ubox-grid__col {
		font-size: 14px;
	}
}