/*
 * Floatly – frontend styles.
 *
 * Every rule is scoped under .floatly-wrap. Values (sizes, colors, offsets) are
 * supplied as CSS custom properties by the plugin settings; the defaults below
 * only apply if that generated block is missing.
 *
 * Breakpoints (match Floatly\Settings): mobile <= 767px, tablet 768-1024px,
 * desktop >= 1025px.
 */

/* ---- Wrapper ---------------------------------------------------------- */
.floatly-wrap {
	--floatly-x: 24px;
	--floatly-y: 24px;
	--floatly-z: 9999;
	--floatly-gap: 12px;
	--floatly-ms: 200ms;
	--floatly-focus: #2563eb;
	--floatly-focus-w: 3px;
	--floatly-label-size: 14px;
	--floatly-label-gap: 10px;

	position: fixed;
	z-index: var(--floatly-z);
	display: block;
	box-sizing: border-box;
	max-width: calc(100vw - (2 * var(--floatly-x)));
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	line-height: 1;
	/* Gaps between buttons must never swallow clicks meant for the page. */
	pointer-events: none;
}

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

/* Position + safe-area insets (notches, home indicator). */
.floatly-wrap.floatly-pos-bottom-right {
	right: calc(var(--floatly-x) + env(safe-area-inset-right, 0px));
	bottom: calc(var(--floatly-y) + env(safe-area-inset-bottom, 0px));
}
.floatly-wrap.floatly-pos-bottom-left {
	left: calc(var(--floatly-x) + env(safe-area-inset-left, 0px));
	bottom: calc(var(--floatly-y) + env(safe-area-inset-bottom, 0px));
}
.floatly-wrap.floatly-pos-top-right {
	top: calc(var(--floatly-y) + env(safe-area-inset-top, 0px));
	right: calc(var(--floatly-x) + env(safe-area-inset-right, 0px));
}
.floatly-wrap.floatly-pos-top-left {
	top: calc(var(--floatly-y) + env(safe-area-inset-top, 0px));
	left: calc(var(--floatly-x) + env(safe-area-inset-left, 0px));
}

/* ---- List ------------------------------------------------------------- */
.floatly-wrap .floatly-list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--floatly-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
}
.floatly-wrap.floatly-h-left .floatly-list {
	align-items: flex-start;
}
.floatly-wrap.floatly-dir-horizontal .floatly-list {
	flex-direction: row;
	align-items: center;
}

.floatly-wrap .floatly-item {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
	pointer-events: none;
}
.floatly-wrap .floatly-item::before,
.floatly-wrap .floatly-item::marker {
	content: none;
}

/* ---- Button (static hit area; the visible "face" animates inside it) ---- */
.floatly-wrap .floatly-btn {
	--floatly-size: 56px;
	--floatly-icon: 28px;
	--floatly-bg: #111827;
	--floatly-bg-hover: #000000;
	--floatly-icon-color: #ffffff;
	--floatly-border: #ffffff;
	--floatly-bw: 0px;
	--floatly-label-bg: #111827;
	--floatly-label-color: #ffffff;
	--floatly-label-border: #111827;
	--floatly-shadow: 45;

	position: relative;
	display: block;
	width: var(--floatly-size);
	height: var(--floatly-size);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	line-height: 0;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	outline: 0;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}

/* Neutralise theme / page-builder link states without touching other links. */
.floatly-wrap .floatly-btn:hover,
.floatly-wrap .floatly-btn:focus,
.floatly-wrap .floatly-btn:active,
.floatly-wrap .floatly-btn:visited {
	border: 0;
	background: none;
	box-shadow: none;
	text-decoration: none;
	outline: 0;
}

/* ---- Face ------------------------------------------------------------- */
.floatly-wrap .floatly-face {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: var(--floatly-bw) solid var(--floatly-border);
	border-radius: 50%;
	background: var(--floatly-bg);
	color: var(--floatly-icon-color);
	box-shadow:
		0 calc(2px + (var(--floatly-shadow) * 0.08px))
		calc(6px + (var(--floatly-shadow) * 0.2px))
		rgba(0, 0, 0, calc(var(--floatly-shadow) * 0.005));
	transition:
		transform var(--floatly-ms) ease,
		background-color var(--floatly-ms) ease,
		box-shadow var(--floatly-ms) ease;
}

.floatly-wrap.floatly-shape-rounded .floatly-face {
	border-radius: 28%;
}
.floatly-wrap.floatly-shape-square .floatly-face {
	border-radius: 0;
}

.floatly-wrap .floatly-icon {
	display: block;
	flex: none;
	width: min(var(--floatly-icon), calc(var(--floatly-size) - 8px));
	height: min(var(--floatly-icon), calc(var(--floatly-size) - 8px));
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	fill: currentColor;
	color: inherit;
}

.floatly-wrap .floatly-btn:hover .floatly-face,
.floatly-wrap .floatly-btn:focus-visible .floatly-face {
	background: var(--floatly-bg-hover);
	box-shadow:
		0 calc(3px + (var(--floatly-shadow) * 0.11px))
		calc(8px + (var(--floatly-shadow) * 0.28px))
		rgba(0, 0, 0, calc(var(--floatly-shadow) * 0.0065));
}

/* Hover movement: applied to the face only, so the hit area never moves and
   the pointer cannot flicker between hovered / not-hovered. */
@media (hover: hover) {
	.floatly-wrap .floatly-fx-lift:hover .floatly-face {
		transform: translateY(-3px);
	}
	.floatly-wrap .floatly-fx-grow:hover .floatly-face {
		transform: scale(1.08);
	}
	.floatly-wrap .floatly-fx-lift-grow:hover .floatly-face {
		transform: translateY(-3px) scale(1.06);
	}
}

/* ---- Keyboard focus ---------------------------------------------------- */
.floatly-wrap .floatly-btn:focus-visible .floatly-face {
	outline: var(--floatly-focus-w) solid var(--floatly-focus);
	outline-offset: 3px;
}

/* ---- Label ------------------------------------------------------------- */
/* The label lives INSIDE the link, and its transparent padding bridges the gap
   to the button, so moving the pointer from button to label keeps :hover. */
.floatly-wrap .floatly-label {
	position: absolute;
	display: block;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	white-space: nowrap;
	line-height: 1.2;
	pointer-events: none;
	transition:
		opacity var(--floatly-ms) ease,
		visibility 0s linear var(--floatly-ms);
}

.floatly-wrap .floatly-btn:hover .floatly-label,
.floatly-wrap .floatly-btn:focus-visible .floatly-label {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.floatly-wrap .floatly-label-text {
	display: block;
	max-width: 240px;
	overflow: hidden;
	padding: 8px 12px;
	border: 1px solid var(--floatly-label-border);
	border-radius: 999px;
	background: var(--floatly-label-bg);
	color: var(--floatly-label-color);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: var(--floatly-label-size);
	font-style: normal;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.2;
	text-align: left;
	text-overflow: ellipsis;
	text-transform: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.floatly-wrap.floatly-shape-rounded .floatly-label-text {
	border-radius: 10px;
}
.floatly-wrap.floatly-shape-square .floatly-label-text {
	border-radius: 0;
}

/* Label sits beside the button (toward the screen interior)... */
.floatly-wrap.floatly-label-left .floatly-label {
	top: 50%;
	right: 100%;
	padding-right: var(--floatly-label-gap);
	transform: translateY(-50%);
}
.floatly-wrap.floatly-label-right .floatly-label {
	top: 50%;
	left: 100%;
	padding-left: var(--floatly-label-gap);
	transform: translateY(-50%);
}
/* ...or above / below it, aligned to the screen edge so it stays on screen. */
.floatly-wrap.floatly-label-up .floatly-label {
	bottom: 100%;
	padding-bottom: var(--floatly-label-gap);
}
.floatly-wrap.floatly-label-down .floatly-label {
	top: 100%;
	padding-top: var(--floatly-label-gap);
}
.floatly-wrap.floatly-label-up.floatly-h-right .floatly-label,
.floatly-wrap.floatly-label-down.floatly-h-right .floatly-label {
	right: 0;
}
.floatly-wrap.floatly-label-up.floatly-h-left .floatly-label,
.floatly-wrap.floatly-label-down.floatly-h-left .floatly-label {
	left: 0;
}

/* ---- Responsive -------------------------------------------------------- */
/* Labels are hidden on mobile unless explicitly enabled. */
@media (max-width: 767px) {
	.floatly-wrap:not(.floatly-labels-mobile) .floatly-label {
		display: none;
	}
	.floatly-wrap.floatly-hide-mobile {
		display: none;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.floatly-wrap.floatly-hide-tablet {
		display: none;
	}
}
@media (min-width: 1025px) {
	.floatly-wrap.floatly-hide-desktop {
		display: none;
	}
}

/* ---- Accessibility / media -------------------------------------------- */
@media (forced-colors: active) {
	.floatly-wrap .floatly-face,
	.floatly-wrap .floatly-label-text {
		border: 2px solid ButtonText;
	}
}

@media print {
	.floatly-wrap {
		display: none;
	}
}

/* Keep last so it wins over the hover-effect rules. */
@media (prefers-reduced-motion: reduce) {
	.floatly-wrap .floatly-face,
	.floatly-wrap .floatly-label {
		transition: none;
	}
	.floatly-wrap .floatly-btn:hover .floatly-face {
		transform: none !important;
	}
}