/* Tabs — connected segmented track (shared by message, referral, rebate, slot, blog).
   Active tab is a gold pill with a glow. */

/* Track */
.d-tabs,
.d-content .slot-tabs,
.d-main .blog-filters,
.m-tabs,
.slot-wrap .slot-tabs,
.main-scroll .blog-filters {
	display: inline-flex;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	background: #131313;
	border: 0.0625rem solid rgba(255, 255, 255, 0.15);
	border-radius: 0.625rem;
	overflow: hidden;
}

[data-theme="light"] .d-tabs,
[data-theme="light"] .d-content .slot-tabs,
[data-theme="light"] .d-main .blog-filters,
[data-theme="light"] .m-tabs,
[data-theme="light"] .slot-wrap .slot-tabs,
[data-theme="light"] .main-scroll .blog-filters {
	background: var(--bg-card-alt);
	border-color: rgba(0, 0, 0, 0.15);
}

/* Tab */
.d-tab,
.d-content .slot-tab,
.d-main .blog-filter,
.m-tab,
.slot-wrap .slot-tab,
.main-scroll .blog-filter {
	position: relative;
	flex-shrink: 0;
	padding: 0.625rem 1.5rem;
	font-family: var(--font-brand);
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--text-label);
	background: transparent;
	border: 0;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}

/* Mobile tab — smaller so the full set fits */
.m-tab,
.slot-wrap .slot-tab,
.main-scroll .blog-filter {
	padding: 0.5rem 0.75rem;
	font-size: 0.75rem;
}

/* Hover */
.d-tab:hover,
.d-content .slot-tab:hover,
.d-main .blog-filter:hover,
.m-tab:hover,
.slot-wrap .slot-tab:hover,
.main-scroll .blog-filter:hover {
	color: var(--text-primary);
}

/* Active */
.d-tab.is-active,
.d-content .slot-tab.is-active,
.d-main .blog-filter.is-active,
.m-tab.is-active,
.slot-wrap .slot-tab.is-active,
.main-scroll .blog-filter.is-active {
	color: var(--text-on-gold);
	background: var(--gold);
	box-shadow: var(--shadow-glow);
}