/**
 * CartPilot Live Social Proof Popup CSS.
 */
.cp-social-proof-wrap {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 99990;
	background: #ffffff;
	color: #0f172a;
	border: 1px solid #cbd5e1;
	border-radius: 16px;
	padding: 12px 16px 12px 14px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 380px;
	width: calc(100vw - 48px);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	animation: cpSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	box-sizing: border-box;
}

.cp-social-proof-wrap.bottom-right {
	left: auto;
	right: 24px;
}

.cp-social-proof-avatar {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
	overflow: hidden;
}

.cp-social-proof-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-social-proof-content {
	flex: 1;
	line-height: 1.35;
}

.cp-sp-title {
	font-size: 13px;
	color: #0f172a;
}

.cp-sp-title strong {
	font-weight: 800;
	color: #000000;
}

.cp-sp-title span {
	color: #64748b;
	font-size: 12px;
}

.cp-sp-product {
	font-size: 12px;
	color: #334155;
	margin-top: 1px;
}

.cp-sp-product span#cp-sp-product-name {
	font-weight: 700;
	color: #0f172a;
}

.cp-sp-badge {
	background: #d1fae5;
	color: #065f46;
	font-size: 10px;
	font-weight: 800;
	padding: 1px 6px;
	border-radius: 4px;
	margin-left: 4px;
	display: inline-block;
}

.cp-sp-meta {
	font-size: 10px;
	color: #94a3b8;
	margin-top: 3px;
	font-weight: 600;
}

#cp-close-social-proof {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: none;
	font-size: 16px;
	color: #94a3b8;
	cursor: pointer;
	line-height: 1;
	padding: 2px 4px;
}

#cp-close-social-proof:hover {
	color: #0f172a;
}

@keyframes cpSlideIn {
	0% {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes cpSlideOut {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}
}

@media (max-width: 600px) {
	.cp-social-proof-wrap {
		bottom: 12px;
		left: 12px;
		right: 12px;
		width: calc(100vw - 24px);
		max-width: none;
	}
}