/*
 * Saia Floating Shortcuts ("orbit ring")
 * A rounded-square launcher with a ring; a soft light (same look as the
 * Inline Chat glow) rides the ring with page scroll, followed by a trail.
 * Positions, ring geometry and the light are set by sfm.js.
 */

.sfm {
	/* Defaults; Elementor controls override these on the widget. */
	--sfm-accent: #ff6400;
	--sfm-x: 28px;
	--sfm-y: 28px;
	--sfm-tile: 64px;
	--sfm-tile-r: 20px;
	--sfm-glyph-size: 22px;
	--sfm-track-w: 1.5px;
	--sfm-trail-w: 2px;
	--sfm-flare-o: 0.9;
	--sfm-flare-size: 40px;
	--sfm-flare-from: 0;
	--sfm-flare-travel: 100;
	--sfm-win-from: 0;
	--sfm-win-to: 100;
	--sfm-show-from: 0;
	--sfm-show-to: 100;
	--sfm-fan-r: 132;
	--sfm-fan-a1: 10;
	--sfm-fan-a2: 80;
	--sfm-item: 52px;
	--sfm-item-r: 16px;
	--sfm-item-icon: 22px;
	--sfm-orbit-gap: 7;
	--sfm-label-r: 999px;
	--sfm-label-h: 36px;
	--sfm-label-bw: 1px;
	--sfm-label-gap: 12px;
	--sfm-stack-gap: 12;
	--sfm-streak: 14;
	--sfm-blur: 8px;
	--sfm-dim: rgba(0, 0, 0, 0.45);
	--sfm-open: 350ms;
	--sfm-close: 220ms;
	--sfm-stagger: 60ms;
	--sfm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	position: fixed;
	z-index: 9990;
	width: var(--sfm-tile);
	height: var(--sfm-tile);
	font: inherit;
	line-height: 1.2;
	transition: opacity 0.3s ease, transform 0.3s var(--sfm-ease), visibility 0s linear 0s;
}

.sfm *,
.sfm *::before,
.sfm *::after {
	box-sizing: border-box;
}

/* Corners, clear of phone browser bars and notches. */
.sfm-br { right: calc(var(--sfm-x) + env(safe-area-inset-right, 0px)); bottom: calc(var(--sfm-y) + env(safe-area-inset-bottom, 0px)); }
.sfm-bl { left: calc(var(--sfm-x) + env(safe-area-inset-left, 0px)); bottom: calc(var(--sfm-y) + env(safe-area-inset-bottom, 0px)); }
.sfm-tr { right: calc(var(--sfm-x) + env(safe-area-inset-right, 0px)); top: calc(var(--sfm-y) + env(safe-area-inset-top, 0px)); }
.sfm-tl { left: calc(var(--sfm-x) + env(safe-area-inset-left, 0px)); top: calc(var(--sfm-y) + env(safe-area-inset-top, 0px)); }

/* Inline placement: sits in the layout; the shortcuts open over the content around it. */
.sfm.sfm-inline {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: 20;
	margin-left: auto;
	margin-right: auto;
}

/* Presets: every role can be overridden in the widget. */
.sfm-tone-dark {
	--sfm-body-d: #0b0b0b;
	--sfm-track-d: #3b3b3b;
	--sfm-glyph-d: #ffffff;
	--sfm-item-body-d: #0b0b0b;
	--sfm-item-border-d: #3b3b3b;
	--sfm-item-ink-d: #ffffff;
}

.sfm-tone-light {
	--sfm-body-d: #ffffff;
	--sfm-track-d: rgba(0, 0, 0, 0.16);
	--sfm-glyph-d: #111111;
	--sfm-item-body-d: #ffffff;
	--sfm-item-border-d: rgba(0, 0, 0, 0.12);
	--sfm-item-ink-d: #111111;
}

/* Shown / hidden by the visibility rules. */
.sfm.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px) scale(0.96);
	transition: opacity 0.25s ease, transform 0.25s var(--sfm-ease), visibility 0s linear 0.25s;
}

.sfm-tr.is-hidden,
.sfm-tl.is-hidden {
	transform: translateY(-10px) scale(0.96);
}

/* ---------- Launcher tile ---------- */

.sfm .sfm-launcher,
.sfm .sfm-launcher:hover,
.sfm .sfm-launcher:focus {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--sfm-tile-r);
	background: var(--sfm-body, var(--sfm-body-d));
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
	color: var(--sfm-glyph, var(--sfm-glyph-d));
	font: inherit;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	transition: transform 0.2s var(--sfm-ease);
	-webkit-tap-highlight-color: transparent;
}

.sfm .sfm-launcher:hover {
	transform: translateY(-2px);
}

.sfm .sfm-launcher:active {
	transform: scale(0.96);
}

.sfm .sfm-launcher:focus-visible,
.sfm .sfm-link:focus-visible {
	outline: 2px solid var(--sfm-accent);
	outline-offset: 3px;
}

/* Ring: track plus trail, drawn just inside the edge. */
.sfm-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.sfm-ring-track {
	fill: none;
	stroke: var(--sfm-track, var(--sfm-track-d));
	stroke-width: var(--sfm-track-w);
}

.sfm-ring-trail {
	fill: none;
	stroke: var(--sfm-trail, color-mix(in srgb, var(--sfm-flare, var(--sfm-accent)) 70%, transparent));
	stroke-width: var(--sfm-trail-w);
	stroke-linecap: round;
	stroke-dasharray: 0 100;
}

.sfm-no-trail .sfm-ring-trail {
	display: none;
}

/* Light: same construction as the Inline Chat glow. Position set by sfm.js. */
.sfm-glow {
	position: absolute;
	inset: 0;
	border-radius: var(--sfm-tile-r);
	overflow: hidden; /* leaks inward only */
	pointer-events: none;
	opacity: var(--sfm-flare-o);
	transition: opacity 0.25s ease;
}

.sfm .sfm-launcher:hover .sfm-glow {
	opacity: min(1, calc(var(--sfm-flare-o) * 1.35));
}

.sfm-glow-light {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--sfm-flare-size);
	height: var(--sfm-flare-size);
	border-radius: 50%;
	/* The hottest point is automatically lighter. */
	background: radial-gradient(
		closest-side,
		color-mix(in srgb, var(--sfm-flare, var(--sfm-accent)) 45%, #fff) 0%,
		var(--sfm-flare, var(--sfm-accent)) 22%,
		color-mix(in srgb, var(--sfm-flare, var(--sfm-accent)) 35%, transparent) 50%,
		transparent 100%
	);
	opacity: var(--sfm-lo, 1);
	transform: translate(var(--sfm-lx, -999px), var(--sfm-ly, -999px)) scale(var(--sfm-ls, 1));
	will-change: transform;
}

/* Inner glow (optional): a faint wash of light inside the tile. */
.sfm-glow > .sfm-glow-light {
	opacity: 0.4;
}

.sfm-no-inner .sfm-glow > .sfm-glow-light {
	display: none;
}

.sfm-glow-edge {
	position: absolute;
	inset: 0;
	padding: calc(var(--sfm-track-w) + 1px);
	border-radius: inherit;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.sfm-no-flare .sfm-glow {
	display: none;
}

/* Glyph: plus turns into × (or cross-fades to the open icon). */
.sfm-glyph {
	position: relative;
	grid-area: 1 / 1;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--sfm-glyph-size);
	height: var(--sfm-glyph-size);
	font-size: var(--sfm-glyph-size);
	transition: transform var(--sfm-open) var(--sfm-ease), opacity 0.2s ease;
}

.sfm.is-open:not(.sfm-morph):not(.sfm-has-open-icon) .sfm-glyph-closed {
	transform: rotate(45deg);
}

.sfm-glyph-open {
	opacity: 0;
	transform: rotate(-90deg) scale(0.6);
}

.sfm.is-open .sfm-glyph-open {
	opacity: 1;
	transform: none;
}

.sfm.is-open.sfm-has-open-icon .sfm-glyph-closed {
	opacity: 0;
	transform: rotate(90deg) scale(0.6);
}

/* Icon / Lottie slot (icon stays as the fallback until a Lottie is ready). */
.sfm-slot {
	position: relative;
	display: grid;
	place-items: center;
	width: 1em;
	height: 1em;
}

.sfm-icon,
.sfm-lottie {
	grid-area: 1 / 1;
	display: grid;
	place-items: center;
	width: 1em;
	height: 1em;
	line-height: 0;
}

.sfm-slot svg,
.sfm-icon i {
	width: 1em;
	height: 1em;
	font-size: 1em;
}

.sfm-icon svg:not(.sfm-svg) {
	fill: currentColor;
}

.sfm-lottie {
	visibility: hidden;
}

.sfm-slot.lottie-ready .sfm-lottie {
	visibility: visible;
}

.sfm-slot.lottie-ready .sfm-icon {
	visibility: hidden;
}

/* ---------- Fan items ---------- */

.sfm .sfm-items {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.sfm .sfm-item {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--sfm-item);
	height: var(--sfm-item);
	margin: calc(var(--sfm-item) / -2) 0 0 calc(var(--sfm-item) / -2);
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transform: translate(0, 0) scale(0.5);
	transition:
		transform var(--sfm-close) var(--sfm-ease),
		opacity var(--sfm-close) ease,
		visibility 0s linear var(--sfm-close);
}

.sfm.is-open .sfm-item.is-in {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(var(--sfm-dx, 0px), var(--sfm-dy, 0px)) scale(1);
	transition:
		transform var(--sfm-open) var(--sfm-ease) calc(var(--sfm-i, 0) * var(--sfm-stagger)),
		opacity calc(var(--sfm-open) * 0.7) ease calc(var(--sfm-i, 0) * var(--sfm-stagger)),
		visibility 0s;
}

.sfm .sfm-item.is-out {
	display: none;
}

.sfm .sfm-link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.sfm-tile {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border: 1px solid var(--sfm-item-border, var(--sfm-item-border-d));
	border-radius: var(--sfm-item-r);
	background: var(--sfm-item-body, var(--sfm-item-body-d));
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
	color: var(--sfm-item-ink, var(--sfm-item-ink-d));
	font-size: var(--sfm-item-icon);
	transition: transform 0.18s var(--sfm-ease);
}

.sfm .sfm-link:hover .sfm-tile,
.sfm .sfm-link:focus-visible .sfm-tile {
	transform: scale(1.06);
}

.sfm .sfm-link:active .sfm-tile {
	transform: scale(0.95);
}

.sfm-hl-gradient .is-highlight .sfm-tile {
	border-color: transparent;
	background: linear-gradient(180deg, color-mix(in srgb, var(--sfm-hl, var(--sfm-accent)) 45%, #fff) 0%, var(--sfm-hl, var(--sfm-accent)) 100%);
	/* Size the gradient to the full tile, so it doesn't repeat into the transparent border. */
	background-origin: border-box;
	color: var(--sfm-hl-ink, #fff);
}

.sfm-hl-flat .is-highlight .sfm-tile {
	border-color: transparent;
	background: var(--sfm-hl, var(--sfm-accent));
	color: var(--sfm-hl-ink, #fff);
}

/* Labels: pill beside the tile, facing the page centre (flips near an edge). */
.sfm .sfm-label {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: var(--sfm-label-h);
	margin: 0;
	padding: 0 16px;
	line-height: 1.2;
	border: var(--sfm-label-bw) solid var(--sfm-label-line, var(--sfm-accent));
	border-radius: var(--sfm-label-r);
	background: var(--sfm-label-fill, #ffffff);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	color: var(--sfm-label-ink, #111111);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(calc(-50% + var(--sfm-label-nudge, 0px))) translateX(var(--sfm-label-shift, 6px));
	transition: opacity calc(var(--sfm-close) * 0.6) ease, transform var(--sfm-close) var(--sfm-ease), color 0.15s ease;
}

.sfm-br .sfm-label,
.sfm-tr .sfm-label {
	right: calc(100% + var(--sfm-label-gap));
	--sfm-label-shift: 6px;
}

.sfm-bl .sfm-label,
.sfm-tl .sfm-label {
	left: calc(100% + var(--sfm-label-gap));
	--sfm-label-shift: -6px;
}

.sfm-br .sfm-item.is-flip .sfm-label,
.sfm-tr .sfm-item.is-flip .sfm-label {
	right: auto;
	left: calc(100% + var(--sfm-label-gap));
	--sfm-label-shift: -6px;
}

.sfm-bl .sfm-item.is-flip .sfm-label,
.sfm-tl .sfm-item.is-flip .sfm-label {
	left: auto;
	right: calc(100% + var(--sfm-label-gap));
	--sfm-label-shift: 6px;
}

.sfm.is-open .sfm-item.is-in .sfm-label {
	opacity: 1;
	transform: translateY(calc(-50% + var(--sfm-label-nudge, 0px)));
	/* A beat after its item. */
	transition:
		opacity calc(var(--sfm-open) * 0.7) ease calc(var(--sfm-i, 0) * var(--sfm-stagger) + 80ms),
		transform var(--sfm-open) var(--sfm-ease) calc(var(--sfm-i, 0) * var(--sfm-stagger) + 80ms),
		color 0.15s ease;
}

.sfm .sfm-link:hover .sfm-label,
.sfm .sfm-link:focus-visible .sfm-label {
	color: var(--sfm-label-ink-hover, var(--sfm-accent));
}

/* Label modes (set by sfm.js from the per-device setting). */
.sfm-lm-hidden .sfm-label {
	display: none;
}

.sfm.is-open.sfm-lm-hover .sfm-item.is-in .sfm-label {
	opacity: 0;
	transform: translateY(calc(-50% + var(--sfm-label-nudge, 0px))) translateX(var(--sfm-label-shift, 6px));
	transition: opacity 0.16s ease, transform 0.22s var(--sfm-ease), color 0.15s ease;
}

.sfm.is-open.sfm-lm-hover .sfm-item.is-in .sfm-link:hover .sfm-label,
.sfm.is-open.sfm-lm-hover .sfm-item.is-in .sfm-link:focus-visible .sfm-label {
	opacity: 1;
	transform: translateY(calc(-50% + var(--sfm-label-nudge, 0px)));
}

/* ---------- Page backdrop while open (per device: dim, blur or both) ---------- */

.sfm-scrim {
	position: fixed;
	inset: 0;
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--sfm-close) ease, visibility 0s linear var(--sfm-close);
}

.sfm-bd-dim .sfm-scrim {
	background: var(--sfm-dim);
}

.sfm-bd-blur .sfm-scrim {
	-webkit-backdrop-filter: blur(var(--sfm-blur));
	backdrop-filter: blur(var(--sfm-blur));
}

.sfm.is-open.sfm-bd-dim .sfm-scrim,
.sfm.is-open.sfm-bd-blur .sfm-scrim {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--sfm-open) ease, visibility 0s;
}

/* ---------- Orbit track ---------- */

.sfm-orbit {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: 1px;
	height: 1px;
	overflow: visible;
	pointer-events: none;
}

.sfm-orbit-path {
	fill: none;
	stroke: var(--sfm-orbit, rgba(128, 128, 128, 0.5));
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-dasharray: 2 calc(var(--sfm-orbit-gap) * 1px);
	opacity: 0;
	transition: opacity var(--sfm-close) ease;
}

.sfm-orbit-mask {
	fill: none;
	stroke: #fff;
	stroke-width: 10;
	stroke-dasharray: 100 100;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset var(--sfm-close) var(--sfm-ease);
}

.sfm.is-open.is-fan .sfm-orbit-path {
	opacity: 1;
	transition: opacity calc(var(--sfm-open) * 0.5) ease;
}

.sfm.is-open.is-fan .sfm-orbit-mask {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset calc(var(--sfm-open) * 1.3) var(--sfm-ease);
}

.sfm-no-orbit .sfm-orbit {
	display: none;
}

/* ---------- Device-specific item hiding (Elementor breakpoints) ---------- */

@media (min-width: 1025px) {
	.sfm .sfm-item[data-hide-on~="desktop"] { display: none; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.sfm .sfm-item[data-hide-on~="tablet"] { display: none; }
}

@media (max-width: 767px) {
	.sfm .sfm-item[data-hide-on~="mobile"] { display: none; }
}

/* ---------- First-visit hint ---------- */

.sfm-hint {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	height: 32px;
	padding: 0 14px;
	border: 1px solid var(--sfm-label-line, var(--sfm-accent));
	border-radius: 999px;
	background: var(--sfm-label-fill, #fff);
	color: var(--sfm-label-ink, #111);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity 0.3s ease;
}

.sfm-hint[hidden] {
	display: none;
}

.sfm-br .sfm-hint,
.sfm-tr .sfm-hint {
	right: calc(100% + var(--sfm-label-gap));
}

.sfm-bl .sfm-hint,
.sfm-tl .sfm-hint {
	left: calc(100% + var(--sfm-label-gap));
}

.sfm.is-hinting .sfm-hint {
	opacity: 1;
}

.sfm.is-open .sfm-hint {
	opacity: 0;
}

/* ---------- Reduced motion: nothing moves ---------- */

@media (prefers-reduced-motion: reduce) {
	.sfm,
	.sfm *,
	.sfm.is-open .sfm-item.is-in,
	.sfm.is-open .sfm-item.is-in .sfm-label {
		transition: none !important;
	}

	.sfm .sfm-launcher:hover,
	.sfm .sfm-launcher:active,
	.sfm .sfm-link:hover .sfm-tile {
		transform: none;
	}
}