/* ============================================================
   BAYOUPEP USA — SOCIAL PROOF TOAST
   "{Name} just added {product}" — rotating sales notification
   pinned to a bottom corner. Brand purple glassmorphism.
   ============================================================ */

.bp-sp {
	position: fixed;
	bottom: 22px;
	z-index: 9000;
	width: min(380px, calc(100vw - 32px));
	pointer-events: none;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .35s ease, transform .35s ease;
}
.bp-sp--left  { left: 22px; }
.bp-sp--right { right: 22px; }
.bp-sp.is-on {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.bp-sp__card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px 14px;
	align-items: center;
	padding: 16px 18px;
	border-radius: var(--bp-radius, 16px);
	background:
		linear-gradient(180deg, rgba(var(--bp-primary-rgb), 0.12), rgba(var(--bp-primary-rgb), 0.04)),
		rgba(10, 10, 24, 0.82);
	border: 1px solid rgba(var(--bp-primary-rgb), 0.35);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: var(--bp-ink, #F4F4F8);
}

/* Close */
.bp-sp__close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: var(--bp-muted, #c2c2d6);
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: color .2s, background .2s;
}
.bp-sp__close:hover { color: var(--bp-ink, #fff); background: rgba(255, 255, 255, 0.08); }

.bp-sp__main { min-width: 0; }

.bp-sp__head {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.3;
	padding-right: 18px;
}
.bp-sp__head strong { color: var(--bp-ink, #fff); font-weight: 700; }
.bp-sp__head span   { color: var(--bp-primary, #9b70f5); font-weight: 600; }

.bp-sp__product {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.bp-sp__thumb {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(var(--bp-primary-rgb), 0.25);
}
.bp-sp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bp-sp__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-sp__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--bp-ink, #fff);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bp-sp__name:hover { color: var(--bp-primary, #9b70f5); }
.bp-sp__badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	font-family: var(--bp-caps, sans-serif);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	vertical-align: middle;
	color: #fff;
	background: var(--bp-primary, #1B51EB);
	border-radius: 100px;
}
.bp-sp__price {
	font-size: 15px;
	font-weight: 700;
	color: var(--bp-primary, #9b70f5);
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
}
.bp-sp__price del {
	color: var(--bp-muted, #c2c2d6);
	font-weight: 500;
	font-size: 13px;
	opacity: 0.8;
}

/* CTA */
.bp-sp__cta {
	grid-column: 1 / -1;
	margin-top: 4px;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 16px;
	font-family: var(--bp-caps, sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(135deg, var(--bp-primary, #1B51EB), var(--bp-primary-hover, #3A6AF0));
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	transition: transform .2s, box-shadow .2s, filter .2s;
}
.bp-sp__cta:hover {
	filter: brightness(1.08);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(var(--bp-primary-rgb), 0.4);
}

@media (max-width: 600px) {
	.bp-sp { bottom: 14px; width: calc(100vw - 24px); }
	.bp-sp--left  { left: 12px; }
	.bp-sp--right { right: 12px; }
	.bp-sp__card { padding: 14px 16px; gap: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.bp-sp { transition: opacity .2s ease; transform: none; }
	.bp-sp.is-on { transform: none; }
	.bp-sp__cta:hover { transform: none; }
}