/* ============================================================
   TPI Floating Buttons – frontend stylesheet
   ============================================================ */

/* ── Variables & Wrapper ─────────────────────────────────── */
.tpi-floating-buttons {
	--tpi-button-size: 58px;
	--tpi-button-icon-size: 26px;
	--tpi-border-radius: 50%;
	--tpi-label-color: #ffffff;
	--tpi-label-gap: 12px;
	--tpi-pill-label-padding: 14px;
	--tpi-label-anim-duration: 280ms;
	--tpi-label-anim-easing: cubic-bezier(0.34, 1.3, 0.64, 1);
	--tpi-floating-hover-lift: -5px;
	--tpi-pulse-scale: 10;
	--tpi-rotate-angle: 12deg;
	--tpi-scroll-reveal-duration: 450ms;
	--tpi-position-transform: none;
	position: fixed;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-end;
	flex-wrap: wrap;
	pointer-events: none;
	overflow: visible;
	transform: var(--tpi-position-transform);
	/* Smooth fade-in AND fade-out via opacity + delayed visibility */
	transition:
		opacity var(--tpi-scroll-reveal-duration) ease,
		transform var(--tpi-scroll-reveal-duration) ease,
		visibility 0s linear var(--tpi-scroll-reveal-duration);
}

/* ── Item wrapper (tooltip / hidden modes) ───────────────── */
.tpi-floating-buttons__item {
	position: relative;
	width: var(--tpi-button-size);
	height: var(--tpi-button-size);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	pointer-events: none;
	text-decoration: none !important;
	color: inherit !important;
}

.tpi-floating-buttons__item:hover,
.tpi-floating-buttons__item:focus,
.tpi-floating-buttons__item:active,
.tpi-floating-buttons__item:visited {
	text-decoration: none !important;
	color: inherit !important;
}

/* ── Button base ─────────────────────────────────────────── */
.tpi-floating-buttons__button {
	--tpi-button-bg-color: #ff9800;
	--tpi-button-icon-color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tpi-button-size);
	height: var(--tpi-button-size);
	min-width: var(--tpi-button-size);
	min-height: var(--tpi-button-size);
	padding: 0;
	border: 0;
	border-radius: var(--tpi-border-radius, 50%);
	background: var(--tpi-button-bg-color, #ff9800) !important;
	background-color: var(--tpi-button-bg-color, #ff9800) !important;
	color: var(--tpi-button-icon-color, #ffffff) !important;
	text-decoration: none;
	pointer-events: auto;
	overflow: hidden;
	flex-shrink: 0;
	transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.tpi-floating-buttons .tpi-floating-buttons__button,
.tpi-floating-buttons .tpi-floating-buttons__button:visited {
	background: var(--tpi-button-bg-color, #ff9800) !important;
	background-color: var(--tpi-button-bg-color, #ff9800) !important;
	color: var(--tpi-button-icon-color, #ffffff) !important;
}

.tpi-floating-buttons .tpi-floating-buttons__item:hover .tpi-floating-buttons__button,
.tpi-floating-buttons .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__button,
.tpi-floating-buttons .tpi-floating-buttons__button:hover,
.tpi-floating-buttons .tpi-floating-buttons__button:focus,
.tpi-floating-buttons .tpi-floating-buttons__button:active {
	background: var(--tpi-button-bg-color-hover, var(--tpi-button-bg-color, #ff9800)) !important;
	background-color: var(--tpi-button-bg-color-hover, var(--tpi-button-bg-color, #ff9800)) !important;
	color: var(--tpi-button-icon-color-hover, var(--tpi-button-icon-color, #ffffff)) !important;
}

.tpi-floating-buttons__button:focus-visible {
	outline: 2px solid rgba(0, 0, 0, 0.35);
	outline-offset: 3px;
}

/* ── Icon wrapper ────────────────────────────────────────── */
.tpi-floating-buttons__icon {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--tpi-button-size) !important;
	height: var(--tpi-button-size) !important;
	min-width: var(--tpi-button-size) !important;
	min-height: var(--tpi-button-size) !important;
	font-size: var(--tpi-button-icon-size);
	line-height: 1;
	position: static !important;
	inset: auto !important;
	transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tpi-floating-buttons__icon > *,
.tpi-floating-buttons__icon .elementor-icon,
.tpi-floating-buttons__icon span,
.tpi-floating-buttons__icon i,
.tpi-floating-buttons__icon svg {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	margin: 0 !important;
}

.tpi-floating-buttons__icon > *,
.tpi-floating-buttons__icon .elementor-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: auto !important;
}

.tpi-floating-buttons__icon i { width: auto !important; height: auto !important; }
.tpi-floating-buttons__icon i::before { display: block; line-height: 1; }

.tpi-floating-buttons__button i {
	color: currentColor !important;
	font-size: var(--tpi-button-icon-size) !important;
	line-height: 1;
}

.tpi-floating-buttons__button svg {
	width: var(--tpi-button-icon-size) !important;
	height: var(--tpi-button-icon-size) !important;
	fill: currentColor !important;
	stroke: currentColor;
}

.tpi-floating-buttons__button svg * { fill: currentColor !important; }
.tpi-floating-buttons__fallback { font-weight: 700; line-height: 1; }

/* ══════════════════════════════════════════════════════════
   TOOLTIP LABEL  (position:absolute sibling of <a>)
   ══════════════════════════════════════════════════════════ */
.tpi-floating-buttons__label {
	position: absolute;
	z-index: 10;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	display: block;
	color: var(--tpi-label-color, #ffffff);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 5px 11px;
	background: rgba(30, 30, 30, 0.82);
	border-radius: 6px;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	transition:
		opacity var(--tpi-label-anim-duration) var(--tpi-label-anim-easing),
		transform var(--tpi-label-anim-duration) var(--tpi-label-anim-easing),
		visibility 0s linear var(--tpi-label-anim-duration);
}

.tpi-floating-buttons--labels-hidden .tpi-floating-buttons__label { display: none !important; }

/* ── Tooltip direction positions ─────────────────────────── */
.tpi-floating-buttons--label-right .tpi-floating-buttons__label { left: calc(100% + var(--tpi-label-gap)); top: 50%; transform: translateY(-50%); }
.tpi-floating-buttons--label-anim-slide.tpi-floating-buttons--label-right .tpi-floating-buttons__label { transform: translateY(-50%) translateX(-8px); }
.tpi-floating-buttons--label-anim-zoom.tpi-floating-buttons--label-right .tpi-floating-buttons__label { transform: translateY(-50%) scale(0.8); }
.tpi-floating-buttons--label-anim-fade.tpi-floating-buttons--label-right .tpi-floating-buttons__label { transform: translateY(-50%); }

.tpi-floating-buttons--label-left .tpi-floating-buttons__label { right: calc(100% + var(--tpi-label-gap)); top: 50%; transform: translateY(-50%); }
.tpi-floating-buttons--label-anim-slide.tpi-floating-buttons--label-left .tpi-floating-buttons__label { transform: translateY(-50%) translateX(8px); }
.tpi-floating-buttons--label-anim-zoom.tpi-floating-buttons--label-left .tpi-floating-buttons__label { transform: translateY(-50%) scale(0.8); }
.tpi-floating-buttons--label-anim-fade.tpi-floating-buttons--label-left .tpi-floating-buttons__label { transform: translateY(-50%); }

.tpi-floating-buttons--label-top .tpi-floating-buttons__label { bottom: calc(100% + var(--tpi-label-gap)); top: auto; left: 50%; transform: translateX(-50%); }
.tpi-floating-buttons--label-anim-slide.tpi-floating-buttons--label-top .tpi-floating-buttons__label { transform: translateX(-50%) translateY(8px); }
.tpi-floating-buttons--label-anim-zoom.tpi-floating-buttons--label-top .tpi-floating-buttons__label { transform: translateX(-50%) scale(0.8); }
.tpi-floating-buttons--label-anim-fade.tpi-floating-buttons--label-top .tpi-floating-buttons__label { transform: translateX(-50%); }

.tpi-floating-buttons--label-bottom .tpi-floating-buttons__label { top: calc(100% + var(--tpi-label-gap)); left: 50%; transform: translateX(-50%); }
.tpi-floating-buttons--label-anim-slide.tpi-floating-buttons--label-bottom .tpi-floating-buttons__label { transform: translateX(-50%) translateY(-8px); }
.tpi-floating-buttons--label-anim-zoom.tpi-floating-buttons--label-bottom .tpi-floating-buttons__label { transform: translateX(-50%) scale(0.8); }
.tpi-floating-buttons--label-anim-fade.tpi-floating-buttons--label-bottom .tpi-floating-buttons__label { transform: translateX(-50%); }

/* ── Tooltip HOVER mode ──────────────────────────────────── */
.tpi-floating-buttons--labels-hover .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-hover .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label {
	opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
	transition:
		opacity var(--tpi-label-anim-duration) var(--tpi-label-anim-easing),
		transform var(--tpi-label-anim-duration) var(--tpi-label-anim-easing),
		visibility 0s linear 0s;
}
.tpi-floating-buttons--labels-hover.tpi-floating-buttons--label-right .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-hover.tpi-floating-buttons--label-right .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-hover.tpi-floating-buttons--label-left .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-hover.tpi-floating-buttons--label-left .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label { transform: translateY(-50%) !important; }
.tpi-floating-buttons--labels-hover.tpi-floating-buttons--label-top .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-hover.tpi-floating-buttons--label-top .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-hover.tpi-floating-buttons--label-bottom .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-hover.tpi-floating-buttons--label-bottom .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label { transform: translateX(-50%) !important; }

/* ── Tooltip ALWAYS mode ─────────────────────────────────── */
.tpi-floating-buttons--labels-always .tpi-floating-buttons__label {
	opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
}
.tpi-floating-buttons--labels-always.tpi-floating-buttons--label-right .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-always.tpi-floating-buttons--label-left .tpi-floating-buttons__label { transform: translateY(-50%) !important; }
.tpi-floating-buttons--labels-always.tpi-floating-buttons--label-top .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-always.tpi-floating-buttons--label-bottom .tpi-floating-buttons__label { transform: translateX(-50%) !important; }

/* ══════════════════════════════════════════════════════════
   PILL EXPAND MODES
   ══════════════════════════════════════════════════════════ */
.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item,
.tpi-floating-buttons--labels-pill-always .tpi-floating-buttons__item {
	position: static;
	width: auto;
	height: var(--tpi-button-size);
	justify-content: flex-start;
	overflow: hidden;
	border-radius: var(--tpi-border-radius, 50%);
	background: var(--tpi-button-bg-color, #ff9800);
	pointer-events: auto;
	transition:
		max-width var(--tpi-label-anim-duration) var(--tpi-label-anim-easing),
		border-radius var(--tpi-label-anim-duration) var(--tpi-label-anim-easing),
		box-shadow 0.22s ease, background-color 0.22s ease;
}

.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item:hover,
.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item:focus-within,
.tpi-floating-buttons--labels-pill-always .tpi-floating-buttons__item:hover,
.tpi-floating-buttons--labels-pill-always .tpi-floating-buttons__item:focus-within {
	background: var(--tpi-button-bg-color-hover, var(--tpi-button-bg-color, #ff9800));
	background-color: var(--tpi-button-bg-color-hover, var(--tpi-button-bg-color, #ff9800));
}

.tpi-floating-buttons--pill-align-right .tpi-floating-buttons__item { flex-direction: row-reverse; }
.tpi-floating-buttons--pill-align-left  .tpi-floating-buttons__item { flex-direction: row; }

.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__button,
.tpi-floating-buttons--labels-pill-always .tpi-floating-buttons__button {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border-radius: inherit !important;
	flex-shrink: 0;
	width: var(--tpi-button-size) !important;
	min-width: var(--tpi-button-size) !important;
}

.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-pill-always .tpi-floating-buttons__label {
	position: static !important;
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	visibility: visible;
	pointer-events: none;
	color: var(--tpi-label-color, #ffffff);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	transform: none !important;
	transition:
		max-width var(--tpi-label-anim-duration) var(--tpi-label-anim-easing),
		opacity calc(var(--tpi-label-anim-duration) * 0.6) ease,
		padding var(--tpi-label-anim-duration) var(--tpi-label-anim-easing);
}

/* PILL HOVER */
.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item { max-width: var(--tpi-button-size); }

.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item:hover,
.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item:focus-within {
	max-width: min(90vw, 800px);
	border-radius: calc(var(--tpi-button-size) / 2);
}

.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label {
	max-width: calc(min(90vw, 800px) - 60px);
	opacity: 1;
}

/* PILL ALWAYS */
.tpi-floating-buttons--labels-pill-always .tpi-floating-buttons__item { max-width: min(90vw, 800px); border-radius: calc(var(--tpi-button-size) / 2); }
.tpi-floating-buttons--labels-pill-always .tpi-floating-buttons__label { max-width: calc(min(90vw, 800px) - 60px); opacity: 1; }

/* Wrapper alignment padding for pill modes */
.tpi-floating-buttons--labels-pill-hover.tpi-floating-buttons--pill-align-right .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-pill-hover.tpi-floating-buttons--pill-align-right .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-pill-always.tpi-floating-buttons--pill-align-right .tpi-floating-buttons__label {
	padding-left: calc(var(--tpi-button-size) * 0.35 + var(--tpi-pill-label-padding)) !important;
	padding-right: var(--tpi-pill-label-padding) !important;
}

.tpi-floating-buttons--labels-pill-hover.tpi-floating-buttons--pill-align-left .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-pill-hover.tpi-floating-buttons--pill-align-left .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-pill-always.tpi-floating-buttons--pill-align-left .tpi-floating-buttons__label {
	padding-right: calc(var(--tpi-button-size) * 0.35 + var(--tpi-pill-label-padding)) !important;
	padding-left: var(--tpi-pill-label-padding) !important;
}

/* Wrapper alignment */
.tpi-floating-buttons--pill-align-right { align-items: flex-end; }
.tpi-floating-buttons--pill-align-left  { align-items: flex-start; }

/* ══════════════════════════════════════════════════════════
   PILL INSET MODE
   Icon circle stays visible as a raised element inside the pill.
   On expand, icon moves inward and text appears between icon
   and the screen edge.
   ══════════════════════════════════════════════════════════ */

/* Item wrapper = the pill background */
.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item,
.tpi-floating-buttons--labels-pill-inset-always .tpi-floating-buttons__item {
	position: static;
	width: auto;
	height: var(--tpi-button-size);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow: visible;
	border-radius: calc(var(--tpi-button-size) / 2);
	background: var(--tpi-button-bg-color, #ff9800);
	pointer-events: auto;
	transition:
		max-width var(--tpi-label-anim-duration) var(--tpi-label-anim-easing),
		box-shadow 0.22s ease, background-color 0.22s ease;
}

.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item:hover,
.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item:focus-within,
.tpi-floating-buttons--labels-pill-inset-always .tpi-floating-buttons__item:hover,
.tpi-floating-buttons--labels-pill-inset-always .tpi-floating-buttons__item:focus-within {
	background: var(--tpi-button-bg-color-hover, var(--tpi-button-bg-color, #ff9800));
	background-color: var(--tpi-button-bg-color-hover, var(--tpi-button-bg-color, #ff9800));
}

/* Button (icon circle) = keeps its own shape, bg, and shadow */
.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__button,
.tpi-floating-buttons--labels-pill-inset-always .tpi-floating-buttons__button {
	position: relative;
	z-index: 2;
	background: var(--tpi-button-bg-color, #ff9800) !important;
	background-color: var(--tpi-button-bg-color, #ff9800) !important;
	border: none !important;
	flex-shrink: 0;
	width: var(--tpi-button-size) !important;
	min-width: var(--tpi-button-size) !important;
	margin: -1px;
}

/* Label inside pill */
.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-pill-inset-always .tpi-floating-buttons__label {
	position: static !important;
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	visibility: visible;
	pointer-events: none;
	color: var(--tpi-label-color, #ffffff);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	transform: none !important;
	transition:
		max-width var(--tpi-label-anim-duration) var(--tpi-label-anim-easing),
		opacity calc(var(--tpi-label-anim-duration) * 0.6) ease,
		padding var(--tpi-label-anim-duration) var(--tpi-label-anim-easing);
}

/* Direction: icon moves INWARD, label appears between icon and edge */
/* Right-aligned: icon on left, label on right → pill grows left */
.tpi-floating-buttons--labels-pill-inset-hover.tpi-floating-buttons--pill-align-right .tpi-floating-buttons__item,
.tpi-floating-buttons--labels-pill-inset-always.tpi-floating-buttons--pill-align-right .tpi-floating-buttons__item {
	flex-direction: row;
}
/* Left-aligned: icon on right, label on left → pill grows right */
.tpi-floating-buttons--labels-pill-inset-hover.tpi-floating-buttons--pill-align-left .tpi-floating-buttons__item,
.tpi-floating-buttons--labels-pill-inset-always.tpi-floating-buttons--pill-align-left .tpi-floating-buttons__item {
	flex-direction: row-reverse;
}

/* ── INSET HOVER ── */
.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item {
	max-width: var(--tpi-button-size);
}
.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item:hover,
.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item:focus-within {
	max-width: min(90vw, 800px);
}
.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label {
	max-width: calc(min(90vw, 800px) - 60px);
	opacity: 1;
}

/* ── INSET ALWAYS ── */
.tpi-floating-buttons--labels-pill-inset-always .tpi-floating-buttons__item {
	max-width: min(90vw, 800px);
}
.tpi-floating-buttons--labels-pill-inset-always .tpi-floating-buttons__label {
	max-width: calc(min(90vw, 800px) - 60px);
	opacity: 1;
}

/* Wrapper alignment padding for pill inset modes */
.tpi-floating-buttons--labels-pill-inset-hover.tpi-floating-buttons--pill-align-right .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-pill-inset-hover.tpi-floating-buttons--pill-align-right .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-pill-inset-always.tpi-floating-buttons--pill-align-right .tpi-floating-buttons__label {
	padding-right: calc(var(--tpi-button-size) * 0.35 + var(--tpi-pill-label-padding)) !important;
	padding-left: var(--tpi-pill-label-padding) !important;
}

.tpi-floating-buttons--labels-pill-inset-hover.tpi-floating-buttons--pill-align-left .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-pill-inset-hover.tpi-floating-buttons--pill-align-left .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label,
.tpi-floating-buttons--labels-pill-inset-always.tpi-floating-buttons--pill-align-left .tpi-floating-buttons__label {
	padding-left: calc(var(--tpi-button-size) * 0.35 + var(--tpi-pill-label-padding)) !important;
	padding-right: var(--tpi-pill-label-padding) !important;
}

/* Pill-inset + lift: animate the whole item */
.tpi-floating-buttons--labels-pill-inset-hover.tpi-floating-buttons--effect-lift .tpi-floating-buttons__item:hover,
.tpi-floating-buttons--labels-pill-inset-always.tpi-floating-buttons--effect-lift .tpi-floating-buttons__item:hover {
	transform: translateY(var(--tpi-floating-hover-lift));
}

/* ══════════════════════════════════════════════════════════
   HOVER EFFECTS  (use CSS vars set by Elementor sliders)
   ══════════════════════════════════════════════════════════ */

/* LIFT */
.tpi-floating-buttons--effect-lift .tpi-floating-buttons__item:hover .tpi-floating-buttons__button,
.tpi-floating-buttons--effect-lift .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__button {
	transform: translateY(var(--tpi-floating-hover-lift)) scale(1.04);
}

/* PULSE – keyframe uses --tpi-pulse-scale */
.tpi-floating-buttons--effect-pulse .tpi-floating-buttons__item:hover .tpi-floating-buttons__button,
.tpi-floating-buttons--effect-pulse .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__button {
	animation: tpi-floating-pulse 0.5s ease;
}

/* ROTATE – uses --tpi-rotate-angle */
.tpi-floating-buttons--effect-rotate .tpi-floating-buttons__item:hover .tpi-floating-buttons__button,
.tpi-floating-buttons--effect-rotate .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__button {
	transform: rotate(var(--tpi-rotate-angle)) scale(1.06);
}

/* Pill + lift: animate the whole item */
.tpi-floating-buttons--labels-pill-hover.tpi-floating-buttons--effect-lift .tpi-floating-buttons__item:hover,
.tpi-floating-buttons--labels-pill-always.tpi-floating-buttons--effect-lift .tpi-floating-buttons__item:hover {
	transform: translateY(var(--tpi-floating-hover-lift));
}

/* ── Dock (stick-to-edge) ────────────────────────────────── */
.tpi-floating-buttons--dock-left .tpi-floating-buttons__button   { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.tpi-floating-buttons--dock-right .tpi-floating-buttons__button  { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.tpi-floating-buttons--dock-top .tpi-floating-buttons__button    { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.tpi-floating-buttons--dock-bottom .tpi-floating-buttons__button { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* Dock also flattens the pill / pill-inset item wrappers */
.tpi-floating-buttons--dock-left[class*="--labels-pill"] .tpi-floating-buttons__item  { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.tpi-floating-buttons--dock-right[class*="--labels-pill"] .tpi-floating-buttons__item { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.tpi-floating-buttons--dock-top[class*="--labels-pill"] .tpi-floating-buttons__item   { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.tpi-floating-buttons--dock-bottom[class*="--labels-pill"] .tpi-floating-buttons__item { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* ══════════════════════════════════════════════════════════
   SCROLL REVEAL  –  smooth fade IN and OUT
   Technique: opacity transitions immediately.
   visibility uses a delay equal to the duration when hiding
   (so it becomes hidden only AFTER the fade-out finishes),
   and no delay when showing (becomes visible immediately).
   ══════════════════════════════════════════════════════════ */
.tpi-floating-buttons--scroll-reveal {
	/* Base: initially visible / after reveal */
	opacity: 1;
	visibility: visible;
	/* When .is-scroll-hidden is applied, opacity fades to 0
	   and visibility becomes hidden after the duration delay. */
	transition:
		opacity var(--tpi-scroll-reveal-duration) ease,
		transform var(--tpi-scroll-reveal-duration) ease,
		visibility 0s linear var(--tpi-scroll-reveal-duration);
}

.tpi-floating-buttons--scroll-reveal.is-scroll-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none !important;
}

.tpi-floating-buttons--scroll-reveal.is-scroll-visible {
	opacity: 1;
	visibility: visible;
	/* When revealing: no delay on visibility (show immediately) */
	transition:
		opacity var(--tpi-scroll-reveal-duration) ease,
		transform var(--tpi-scroll-reveal-duration) ease,
		visibility 0s linear 0s;
}

/* Direction offset transforms – preserve position centering */
.tpi-floating-buttons--scroll-from-right.is-scroll-hidden  { transform: var(--tpi-position-transform) translateX(36px); }
.tpi-floating-buttons--scroll-from-left.is-scroll-hidden   { transform: var(--tpi-position-transform) translateX(-36px); }
.tpi-floating-buttons--scroll-from-top.is-scroll-hidden    { transform: var(--tpi-position-transform) translateY(-36px); }
.tpi-floating-buttons--scroll-from-bottom.is-scroll-hidden { transform: var(--tpi-position-transform) translateY(36px); }
.tpi-floating-buttons--scroll-scale.is-scroll-hidden       { transform: var(--tpi-position-transform) scale(0.88); }
.tpi-floating-buttons--scroll-reveal.is-scroll-visible     { transform: var(--tpi-position-transform); }

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes tpi-floating-pulse {
	0%   { transform: scale(1); }
	45%  { transform: scale(calc(1 + var(--tpi-pulse-scale) / 100)); }
	100% { transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.tpi-floating-buttons { gap: 12px; }
}

@media (max-width: 767px) {
	.tpi-floating-buttons {
		--tpi-button-size: 50px;
		--tpi-button-icon-size: 22px;
		gap: 10px;
	}

	/* Pill: slightly smaller text on mobile */
	.tpi-floating-buttons__label { font-size: 13px; }

	/* Pill max-width capped on small screens */
	.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item:hover,
	.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item:focus-within,
	.tpi-floating-buttons--labels-pill-always .tpi-floating-buttons__item,
	.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item:hover,
	.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item:focus-within,
	.tpi-floating-buttons--labels-pill-inset-always .tpi-floating-buttons__item { max-width: 90vw; }

	.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
	.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label,
	.tpi-floating-buttons--labels-pill-always .tpi-floating-buttons__label,
	.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
	.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label,
	.tpi-floating-buttons--labels-pill-inset-always .tpi-floating-buttons__label { max-width: calc(90vw - 50px); }
}

@media (max-width: 480px) {
	.tpi-floating-buttons {
		--tpi-button-size: 46px;
		--tpi-button-icon-size: 20px;
		gap: 8px;
	}

	/* On very small screens collapse pill labels to avoid overflow */
	.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item:hover,
	.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item:focus-within,
	.tpi-floating-buttons--labels-pill-always .tpi-floating-buttons__item,
	.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item:hover,
	.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item:focus-within,
	.tpi-floating-buttons--labels-pill-inset-always .tpi-floating-buttons__item { max-width: 90vw; }

	.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
	.tpi-floating-buttons--labels-pill-hover .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label,
	.tpi-floating-buttons--labels-pill-always .tpi-floating-buttons__label,
	.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item:hover .tpi-floating-buttons__label,
	.tpi-floating-buttons--labels-pill-inset-hover .tpi-floating-buttons__item:focus-within .tpi-floating-buttons__label,
	.tpi-floating-buttons--labels-pill-inset-always .tpi-floating-buttons__label { max-width: calc(90vw - 46px); }
}