/* H-Lead Tabs — pill nav (radius 9999, padding 24/8) + content panels */

.hl-tabs {
	font-family: var(--hl-font-family);
}

.hl-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hl-space-16);
}

@media (max-width: 767px) {
	.hl-tabs__nav {
		gap: var(--hl-space-16);
	}
}

.hl-tabs__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--hl-space-8) var(--hl-space-24);
	border: none;
	border-radius: var(--hl-radius-9999);
	background-color: transparent;
	font-family: var(--hl-font-family);
	font-weight: var(--hl-font-weight-medium);
	font-size: var(--hl-accordion-title-size);
	line-height: var(--hl-accordion-title-line-height);
	color: var(--hl-color-text-title);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.6s ease, transform 0.6s ease;
}

/* Figma tab State=Hover: #ccd5d9 */
.hl-tabs__tab:hover {
	background-color: var(--hl-color-brand-100);
	color: var(--hl-color-brand-500);
}

.hl-tabs__tab--active,
.hl-tabs__tab--active:hover {
	background-color: var(--hl-color-brand-500);
	color: var(--hl-color-white);
}

/* Underline variant (Figma 'active-tab': bold + 4px bar, no pill background)
 * — used by the fleet carousel's category filter. */
.hl-tabs__nav--underline {
	gap: var(--hl-space-40);
}

@media (max-width: 991px) {
	.hl-tabs__nav--underline {
		gap: var(--hl-space-56);
	}
}

.hl-tabs__tab--underline {
	padding: 0 0 var(--hl-space-4) 0;
	border-radius: 0;
	border-bottom: 4px solid transparent;
	font-weight: var(--hl-font-weight-medium);
	/* Restate the base .hl-tabs__tab transition list (lost because this
	 * class matches with equal specificity and comes later in the
	 * cascade) plus border-bottom-color, so the line animates in the
	 * same 0.2s ease as the pill variant's background-color instead of
	 * snapping on activate. */
	transition: border-bottom-color 0.2s ease, color 0.2s ease, opacity 0.6s ease, transform 0.6s ease;
}

.hl-tabs__tab--underline:hover {
	background-color: transparent;
	color: var(--hl-color-brand-400);
	border-bottom-color: transparent;
}

.hl-tabs__tab--underline.hl-tabs__tab--active,
.hl-tabs__tab--underline.hl-tabs__tab--active:hover {
	background-color: transparent;
	color: var(--hl-color-brand-400);
	font-weight: var(--hl-font-weight-bold);
	border-bottom-color: var(--hl-color-brand-400);
}

.hl-tabs__panels {
	margin-top: var(--hl-space-24);
}

.hl-tabs__panel {
	display: none;
}

.hl-tabs__panel--active {
	display: block;
	animation: hl-tabs-fade-in 0.2s ease;
}

@keyframes hl-tabs-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}