/* ==============================================
   Pin Sticky Button — Frontend Styles
   ============================================== */

#psb-container {
	pointer-events: none;
}

.psb-btn-wrap {
	pointer-events: auto;
	display: flex;
	align-items: center;
}

.psb-float-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 2px 4px rgba(0,0,0,0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
	flex-shrink: 0;
}

.psb-float-btn:hover {
	transform: scale(1.1) !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.28), 0 3px 8px rgba(0,0,0,0.12) !important;
}

.psb-float-btn:active {
	transform: scale(0.95) !important;
}

/* ─── Tooltip ─────────────────────────────────── */
.psb-tooltip {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	background: rgba(20,20,20,0.82);
	color: #fff;
	padding: 6px 11px;
	border-radius: 6px;
	font-size: 13px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	line-height: 1.4;
	z-index: 1;
}

.psb-tooltip::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 6px solid transparent;
}

/* Tooltip to the left of button (button is on the right side) */
.psb-tooltip--left {
	right: calc(100% + 14px);
	transform: translateY(-50%) translateX(4px);
}
.psb-tooltip--left::after {
	right: -12px;
	border-left-color: rgba(20,20,20,0.82);
}

/* Tooltip to the right of button (button is on the left side) */
.psb-tooltip--right {
	left: calc(100% + 14px);
	transform: translateY(-50%) translateX(-4px);
}
.psb-tooltip--right::after {
	left: -12px;
	border-right-color: rgba(20,20,20,0.82);
}

.psb-btn-wrap:hover .psb-tooltip {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* ─── Animations ──────────────────────────────── */

/* Pulse ring around button */
@keyframes psb-pulse {
	0%   { box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 0 0 0 var(--psb-pulse, rgba(0,0,0,0.35)); }
	60%  { box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 0 0 14px rgba(0,0,0,0); }
	100% { box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 0 0 0 rgba(0,0,0,0); }
}

@keyframes psb-bounce {
	0%, 100% { transform: translateY(0); }
	40%       { transform: translateY(-10px); }
	60%       { transform: translateY(-6px); }
}

@keyframes psb-shake {
	0%, 100%      { transform: rotate(0deg); }
	15%, 55%, 85% { transform: rotate(-12deg); }
	35%, 70%      { transform: rotate(12deg); }
}

@keyframes psb-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.psb-anim-pulse .psb-float-btn {
	animation: psb-pulse 2.2s ease-out infinite;
}
.psb-anim-bounce .psb-float-btn {
	animation: psb-bounce 1.6s ease-in-out infinite;
}
.psb-anim-shake .psb-float-btn {
	animation: psb-shake 2s ease-in-out infinite;
}
.psb-anim-spin .psb-float-btn i {
	animation: psb-spin 2.5s linear infinite;
}

/* Pause animation on hover */
.psb-anim-pulse .psb-float-btn:hover,
.psb-anim-bounce .psb-float-btn:hover,
.psb-anim-shake .psb-float-btn:hover {
	animation-play-state: paused;
}

/* ─── Responsive ──────────────────────────────── */
@media (max-width: 768px) {
	.psb-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
	.psb-hide-desktop { display: none !important; }
}