/**
 * LIVMARK Social Proof - frontend stil.
 * Sve boje idu preko CSS varijabli da se brendiranje po klijentu radi bez diranja plugina.
 */

.lsp-notice {
	--lsp-accent: #1f6feb;
	--lsp-bg: #ffffff;
	--lsp-text: #1c1c1e;
	--lsp-muted: #6b7280;
	--lsp-border: rgba(0, 0, 0, .08);
	--lsp-shadow: 0 8px 28px rgba(15, 23, 42, .16);
	--lsp-radius: 12px;

	position: fixed;
	z-index: 99990;
	display: flex;
	align-items: stretch;
	max-width: 340px;
	background: var(--lsp-bg);
	color: var(--lsp-text);
	border: 1px solid var(--lsp-border);
	border-left: 3px solid var(--lsp-accent);
	border-radius: var(--lsp-radius);
	box-shadow: var(--lsp-shadow);
	font-size: 14px;
	line-height: 1.35;
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity .28s ease, transform .28s ease;
}

.lsp-notice.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.lsp-bottom-left  { left: 20px; bottom: 20px; }
.lsp-bottom-right { right: 20px; bottom: 20px; }
.lsp-top-left     { left: 20px; top: 20px; transform: translateY(-12px); }
.lsp-top-right    { right: 20px; top: 20px; transform: translateY(-12px); }

.lsp-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	text-decoration: none;
	color: inherit;
	flex: 1 1 auto;
	min-width: 0;
}

.lsp-link:hover .lsp-product,
.lsp-link:focus-visible .lsp-product {
	text-decoration: underline;
}

.lsp-link:focus-visible {
	outline: 2px solid var(--lsp-accent);
	outline-offset: -2px;
	border-radius: var(--lsp-radius);
}

.lsp-thumb {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	object-fit: cover;
	border-radius: 8px;
	background: #f3f4f6;
}

.lsp-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.lsp-text {
	display: block;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.lsp-who {
	font-weight: 600;
}

.lsp-product {
	color: var(--lsp-accent);
}

.lsp-meta {
	font-size: 12px;
	color: var(--lsp-muted);
}

.lsp-close {
	flex: 0 0 auto;
	width: 28px;
	padding: 0;
	margin: 6px 6px 6px 0;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--lsp-muted);
	cursor: pointer;
	line-height: 0;
}

.lsp-close:hover {
	background: rgba(0, 0, 0, .05);
	color: var(--lsp-text);
}

.lsp-close:focus-visible {
	outline: 2px solid var(--lsp-accent);
	outline-offset: 1px;
}

.lsp-close svg {
	width: 14px;
	height: 14px;
	fill: none;
}

@media (max-width: 599px) {
	.lsp-notice {
		left: 12px;
		right: 12px;
		max-width: none;
	}

	.lsp-top-left,
	.lsp-top-right { top: 12px; }

	.lsp-bottom-left,
	.lsp-bottom-right { bottom: 12px; }
}

@media (prefers-color-scheme: dark) {
	.lsp-notice {
		--lsp-bg: #16181d;
		--lsp-text: #f3f4f6;
		--lsp-muted: #9ca3af;
		--lsp-border: rgba(255, 255, 255, .1);
		--lsp-shadow: 0 8px 28px rgba(0, 0, 0, .5);
	}

	.lsp-close:hover { background: rgba(255, 255, 255, .08); }
	.lsp-thumb { background: #262a31; }
}

.lsp-notice.lsp-no-motion,
.lsp-notice.lsp-no-motion.is-visible {
	transition: opacity .01s linear;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lsp-notice {
		transition: opacity .01s linear;
		transform: none;
	}
}