/* ============================================================
   Zorem UI — Tabs (primary module nav)
   ------------------------------------------------------------
   Horizontal tab strip sitting below the header. Each item is
   an underline-active link. Optional `.zui-tabs__badge` shows
   a live count (e.g. unfulfilled orders) with a slow float animation.

   ============================================================ */

.zui-scope .zui-tabs {
	background: var(--zui-surface);
	height: 44px;
	display: flex;
	align-items: stretch;
	gap: 24px;
	padding-inline: 24px;
	overflow-x: auto;
}

.zui-scope .zui-tabs__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 100%;
	padding-inline: 2px;
	border-block-end: 2px solid transparent;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--zui-text-muted);
	text-decoration: none;
	white-space: nowrap;
}

.zui-scope .zui-tabs__item:hover {
	color: var(--zui-text-soft);
}

.zui-scope .zui-tabs__item:focus { outline: none; box-shadow: none; }
.zui-scope .zui-tabs__item:focus-visible { outline: none; color: var(--zui-primary-600); }

.zui-scope .zui-tabs__item.is-active {
	color: var(--zui-primary-600);
	border-block-end-color: var(--zui-primary);
}

/* ---- Live count badge on a tab (e.g. unfulfilled orders) ---- */

.zui-scope .zui-tabs__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--zui-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	animation: zui-badge-float 2.2s ease-in-out infinite;
}

@keyframes zui-badge-float {
	0%, 100% { transform: translateY(2px); }
	50%      { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
	.zui-scope .zui-tabs__badge { animation: none; }
}