/**
 * Notifikasi Penjualan (social proof) — kotak pop-up kecil di pojok layar.
 * Dipakai juga sebagai pratinjau statis di halaman admin (lihat modifier
 * .lp-salespop--preview di bawah), jadi variabel warna (--lp-*) harus sudah
 * tersedia lebih dulu lewat assets/css/main.css atau assets/css/admin.css.
 */

.lp-salespop {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 999;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 320px;
	max-width: calc(100vw - 24px);
	padding: 14px 40px 14px 14px;
	background: var(--lp-surface, #fff);
	border: 1px solid var(--lp-line, #e4e6ed);
	border-radius: var(--lp-radius-sm, 12px);
	box-shadow: 0 14px 34px rgba(16, 16, 20, .14);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}
.lp-salespop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lp-salespop--right { left: auto; right: 20px; }

.lp-salespop__img {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--lp-bg-soft, #f5f6fa);
}
.lp-salespop__img--placeholder { display: block; }

.lp-salespop__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lp-salespop__title,
.lp-salespop__product {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lp-salespop__title {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--lp-text, #101014);
}
.lp-salespop__product {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--lp-accent, #4f46e5);
}
.lp-salespop__time {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 11px;
	color: var(--lp-text-faint, #8d909c);
}

.lp-salespop__close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--lp-text-faint, #8d909c);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
.lp-salespop__close:hover { background: var(--lp-bg-soft, #f5f6fa); color: var(--lp-text, #101014); }

/* Pratinjau statis di halaman admin — bukan fixed, tidak menutupi apa pun. */
.lp-salespop--preview {
	position: relative;
	left: auto;
	right: auto;
	bottom: auto;
	top: 14px;
	margin-left: 14px;
}
.lp-salespop--preview.lp-salespop--right { margin-left: 0; margin-right: 14px; float: right; }

@media (max-width: 480px) {
	.lp-salespop {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		max-width: none;
	}
	.lp-salespop--right { left: 12px; }
}