/**
 * TBO Button widget — brand defaults.
 * Colors, radius, padding, and typography can all be overridden per-instance
 * from the Elementor Style tab; these values match the TBO brand button.
 */

.tbo-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	background-color: #ffc60b;
	color: #000;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.2;
	padding: 10px 21px;
	border-radius: 10px;
	text-decoration: none;
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		box-shadow 0.25s ease;
}

.tbo-btn:hover,
.tbo-btn:focus {
	background-color: #f0b900;
	color: #000;
	text-decoration: none;
}

.tbo-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.tbo-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 1.3em;
}

.tbo-btn__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: none;
}

.tbo-btn__icon i {
	font-size: 1em;
}

.tbo-btn--slide .tbo-btn__icon {
	transition: transform 0.25s ease;
}

.tbo-btn--slide:hover .tbo-btn__icon,
.tbo-btn--slide:focus .tbo-btn__icon {
	transform: translate(3px, -3px);
}

@media (prefers-reduced-motion: reduce) {
	.tbo-btn,
	.tbo-btn--slide .tbo-btn__icon {
		transition: none;
	}
}