/**
 * Live Visitors – Landing (Toast) & Checkout/Shortcode (inline)
 */

/* Inline: Checkout & [sfp_live_visitors] Shortcode */
.sfp-live-visitors {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.75rem;
	padding: 0.8125rem 1rem;
	min-height: 2.875rem;
	box-sizing: border-box;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	color: #b45309;
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	border: 1px solid #fcd34d;
	border-radius: 4px;
	text-align: center;
}

.sfp-live-visitors--checkout {
	margin-top: 0.625rem;
}

.sfp-live-visitors--widget {
	margin-top: 0;
	width: 100%;
}

/* Landing: kurzer Toast unten links */
.sfp-live-visitors--toast {
	position: fixed;
	bottom: 24px;
	left: 24px;
	right: auto;
	z-index: 999997;
	margin: 0;
	min-width: 280px;
	max-width: 360px;
	padding: 14px 18px;
	text-align: left;
	justify-content: flex-start;
	gap: 10px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
	color: #374151;
	background: #ffffff;
	border: none;
	border-radius: 12px;
	border-left: 4px solid #f59e0b;
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.05),
		0 10px 40px rgba(0, 0, 0, 0.08),
		0 0 0 1px rgba(0, 0, 0, 0.04);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateX(calc(-100% - 24px));
	transition:
		opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0.35s;
}

.sfp-live-visitors--toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.sfp-live-visitors--toast.is-hiding {
	opacity: 0;
	visibility: hidden;
	transform: translateX(calc(-100% - 24px));
	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		visibility 0.3s;
}

/* Über Social-Proof-Container stapeln, falls beide aktiv */
.sfp-live-visitors--toast.sfp-live-visitors--stacked {
	bottom: 120px;
}

@media (max-width: 640px) {
	.sfp-live-visitors--toast {
		left: 12px;
		right: 12px;
		bottom: 16px;
		min-width: auto;
		max-width: none;
		width: auto;
		transform: translateY(100%);
	}

	.sfp-live-visitors--toast.is-visible {
		transform: translateY(0);
	}

	.sfp-live-visitors--toast.is-hiding {
		transform: translateY(100%);
	}

	.sfp-live-visitors--toast.sfp-live-visitors--stacked {
		bottom: 100px;
	}
}