/* ── TC Toggle Button ────────────────────────────────── */
.tc-toggle-button-wrapper {
	display: flex;
	justify-content: center;
	font-family: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* The button — a div with role="button" so global theme/Elementor button
   styles never reach it; every state is controlled here / by the widget. */
.tc-toggle-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: #41A541;
	background-color: #FFFFFF;
	border: 1px solid #41A541;
	border-radius: 4px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tc-toggle-button:hover {
	color: #FFFFFF;
	background-color: #338033;
	border-color: #338033;
}

.tc-toggle-button.is-active {
	color: #FFFFFF;
	background-color: #41A541;
	border-color: #41A541;
}

.tc-toggle-button:focus-visible {
	outline: 2px solid #338033;
	outline-offset: 2px;
}

.tc-toggle-button__text {
	display: inline-block;
}

.tc-toggle-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	transition: transform 0.2s ease;
}

.tc-toggle-button__icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

/* Flex-center the glyph so an icon-font <i> doesn't sit on the text baseline. */
.tc-toggle-button__icon i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
}

/* Rotate a (chevron) icon when the toggle is active. */
.tc-toggle-button--rotate-icon.is-active .tc-toggle-button__icon {
	transform: rotate(180deg);
}