/* No Smoke No Fire — Ghost Button widget.
   Hover choreography is pure CSS (the HTML-widget original needed JS):
   button slides right, ghost outline slides down-left. Distances/speed come
   from custom properties the Elementor controls set on the wrapper. */
.sg-ghost-row { display: flex; justify-content: var(--sg-gb-just, center); }
.sg-ghost-row .sg-ghost-wrap { width: var(--sg-gb-wrapw, auto); }
.sg-ghost-row .sg-ghost-btn { width: var(--sg-gb-btnw, auto); justify-content: center; box-sizing: border-box; }
.sg-ghost-wrap { position: relative; display: inline-block; }
.sg-ghost-btn {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: #ffffff;
	background: transparent;
	border: 2px solid #FCAC04;
	border-radius: 0;
	padding: 4px 14px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--sg-gb-dur, 0.4s);
}
.sg-ghost-btn svg { width: 14px; height: 14px; flex: none; }
.sg-ghost-shadow {
	position: absolute;
	inset: 0;
	border: 2px solid #b2b2b4;
	border-radius: 0;
	background: transparent;
	z-index: 1;
	transition: transform var(--sg-gb-dur, 0.4s);
	pointer-events: none;
}
.sg-ghost-wrap:hover .sg-ghost-btn,
.sg-ghost-wrap:focus-within .sg-ghost-btn {
	transform: translateX(var(--sg-gb-slide, 7px));
}
.sg-ghost-wrap:hover .sg-ghost-shadow,
.sg-ghost-wrap:focus-within .sg-ghost-shadow {
	transform: translate(calc(var(--sg-gb-ghost, 12px) * -1), var(--sg-gb-ghost, 12px));
}
@media (max-width: 480px) {
	.sg-ghost-row.sg-ghost--fill-mobile .sg-ghost-wrap { display: block; width: 100%; }
	.sg-ghost-row.sg-ghost--fill-mobile .sg-ghost-btn { width: 100%; box-sizing: border-box; justify-content: center; }
}