.fdm-ct {
	--fdm-ct-color: #02322D;
	width: 100%;
}

.fdm-ct-nav {
	display: flex;
	gap: 25px;
	margin-bottom: 60px;
}

/* tab = div (not button) so theme button styles never apply */
.fdm-ct-tab {
	flex: 0 1 24%;
	padding: 12px 24px;
	border: 1px solid var(--fdm-ct-color);
	border-radius: 30px;
	background: #fff;
	color: var(--fdm-ct-color);
	font-family: "Manrope", Sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	user-select: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

/* hover keeps the same color */
.fdm-ct-tab:hover {
	background: #fff;
	color: var(--fdm-ct-color);
}

.fdm-ct-tab.is-active,
.fdm-ct-tab.is-active:hover {
	background: var(--fdm-ct-color);
	color: #fff;
}

.fdm-ct-tab:focus-visible {
	outline: 2px solid var(--fdm-ct-color);
	outline-offset: 3px;
}

.fdm-ct-panel[hidden] { display: none; }

.fdm-ct-panel.is-active {
	animation: fdmCtIn 0.35s ease both;
}
@keyframes fdmCtIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.fdm-ct-empty {
	padding: 20px;
	border: 1px dashed #bbb;
	text-align: center;
	color: #777;
}

@media (max-width: 1024px) {
	.fdm-ct-tab { font-size: 20px; flex-basis: 280px; }
	.fdm-ct-nav { margin-bottom: 40px; }
}

@media (max-width: 767px) {
	.fdm-ct-nav { gap: 12px; margin-bottom: 28px; }
	.fdm-ct-tab { flex: 1 1 0; font-size: 16px; padding: 10px 12px; }
}