/* ---------- Header Wrapper & Badge ---------- */

.cnhc-tabs-header-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--cnhc-surface);
	border-bottom: 1px solid var(--cnhc-border-soft);
	padding-top: var(--cnhc-space-3);
}

.cnhc-tabs-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--cnhc-space-5) var(--cnhc-space-2);
}

.cnhc-tabs-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--cnhc-pine-50);
	color: var(--cnhc-pine-800);
	border: 1px solid var(--cnhc-pine-200);
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.cnhc-tabs-badge svg {
	stroke: var(--cnhc-pine-600);
}

.cnhc-tabs-hint {
	font-size: 12px;
	color: var(--cnhc-text-muted);
	font-weight: 500;
}

/* ---------- Main Nav Bar Container ---------- */

.cnhc-tabs-nav {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--cnhc-surface);
	padding: var(--cnhc-space-2) 0 var(--cnhc-space-4);
	width: 100%;

	/* Accent palette for the calculator icon badges */
	--cnhc-tab-blue: #2f6fa8;
	--cnhc-tab-blue-bg: #e6eff7;
	--cnhc-tab-water: #4fa3d1;
	--cnhc-tab-water-bg: #e5f3fa;
	--cnhc-tab-violet: #7c6bb0;
	--cnhc-tab-violet-bg: #efecf8;
}

/* ---------- Scroll Viewport ---------- */

.cnhc-tabs__viewport {
	position: relative;
	width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.cnhc-tabs__viewport::-webkit-scrollbar {
	display: none;
}

.cnhc-tabs__viewport::after,
.cnhc-tabs__viewport::before {
	display: none !important;
	content: none !important;
}

.cnhc-tabs {
	display: flex;
	gap: var(--cnhc-space-3);
	list-style: none;
	margin: 0;
	/* مسافة جانبية كافية لتجنب اختفاء البطاقات خلف أزرار الأسهم */
	padding: var(--cnhc-space-1) 50px;
}

.cnhc-tabs__item {
	margin: 0;
	flex: 0 0 auto;
	list-style: none;
}

.cnhc-tabs__item::marker {
	content: '';
}

/* ---------- Tab Cards ---------- */

.cnhc-tab {
	--tab-accent: var(--cnhc-pine-700);
	--tab-accent-bg: var(--cnhc-pine-50);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--cnhc-space-2);
	width: 100px;
	height: 116px;
	white-space: normal;
	text-align: center;
	padding: var(--cnhc-space-3) var(--cnhc-space-2);
	border-radius: var(--cnhc-radius-md);
	border: 1.5px solid var(--cnhc-border);
	background: var(--cnhc-surface);
	color: var(--cnhc-text-muted);
	font-family: var(--cnhc-font-body);
	font-size: var(--cnhc-fs-small);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--cnhc-transition), color var(--cnhc-transition), border-color var(--cnhc-transition), transform var(--cnhc-transition);
}

.cnhc-tab:hover {
	border-color: var(--cnhc-pine-600);
	transform: translateY(-2px);
}

.cnhc-tab__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--tab-accent-bg);
	color: var(--tab-accent);
}

.cnhc-tab__icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.cnhc-tab__label {
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.25em * 2);
	width: 100%;
}

.cnhc-tab[aria-selected="true"] {
	background: var(--cnhc-pine-50);
	border-color: var(--cnhc-pine-600);
	color: var(--cnhc-pine-900);
}

/* Icon Badge Colors */
.cnhc-tab[data-slug="calorie"] { --tab-accent: var(--cnhc-amber-500); --tab-accent-bg: var(--cnhc-amber-100); }
.cnhc-tab[data-slug="bmi"] { --tab-accent: var(--cnhc-tab-blue); --tab-accent-bg: var(--cnhc-tab-blue-bg); }
.cnhc-tab[data-slug="bmr"] { --tab-accent: var(--cnhc-tab-violet); --tab-accent-bg: var(--cnhc-tab-violet-bg); }
.cnhc-tab[data-slug="tdee"] { --tab-accent: var(--cnhc-pine-800); --tab-accent-bg: var(--cnhc-pine-50); }
.cnhc-tab[data-slug="water"] { --tab-accent: var(--cnhc-tab-water); --tab-accent-bg: var(--cnhc-tab-water-bg); }
.cnhc-tab[data-slug="protein"] { --tab-accent: var(--cnhc-amber-600); --tab-accent-bg: var(--cnhc-amber-100); }
.cnhc-tab[data-slug="body-fat"] { --tab-accent: var(--cnhc-tab-blue); --tab-accent-bg: var(--cnhc-tab-blue-bg); }
.cnhc-tab[data-slug="calories-burned"] { --tab-accent: var(--cnhc-pine-600); --tab-accent-bg: var(--cnhc-pine-100); }
.cnhc-tab[data-slug="ideal-weight"] { --tab-accent: var(--cnhc-danger); --tab-accent-bg: var(--cnhc-danger-bg); }

.cnhc-tab[data-slug="macro"] .cnhc-tab__icon-wrap {
	background: conic-gradient(var(--cnhc-pine-600) 0deg 140deg, var(--cnhc-amber-500) 140deg 250deg, var(--cnhc-tab-blue) 250deg 360deg);
	color: #fff;
}

/* ---------- Scroll Arrow Buttons ---------- */

.cnhc-tabs__nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--cnhc-border);
	background: var(--cnhc-surface);
	color: var(--cnhc-pine-700);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	transition: background var(--cnhc-transition), border-color var(--cnhc-transition), color var(--cnhc-transition);
}

.cnhc-tabs__nav-btn--prev {
	left: 10px;
}

.cnhc-tabs__nav-btn--next {
	right: 10px;
}

.cnhc-tabs__nav-btn:hover {
	background: var(--cnhc-pine-700);
	border-color: var(--cnhc-pine-700);
	color: #fff;
}

.cnhc-tabs__nav-btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

.cnhc-tabs__nav-btn[disabled]:hover {
	background: var(--cnhc-surface);
	border-color: var(--cnhc-border);
	color: var(--cnhc-pine-700);
}

/* ---------- Responsive Adjustments ---------- */

@media (max-width: 640px) {
	.cnhc-tabs-header {
		padding: 0 var(--cnhc-space-3) var(--cnhc-space-2);
	}

	.cnhc-tabs-hint {
		display: none;
	}

	.cnhc-tabs {
		padding-left: 44px;
		padding-right: 44px;
	}

	.cnhc-tab {
		width: 84px;
		height: 110px;
	}

	.cnhc-tab__icon-wrap {
		width: 38px;
		height: 38px;
	}

	.cnhc-tabs__nav-btn--prev {
		left: 4px;
	}

	.cnhc-tabs__nav-btn--next {
		right: 4px;
	}
}

.cnhc-root button.cnhc-tab:focus-visible {
	outline-offset: 0;
}