/**
 * PB Social Proof pop-up — Frontend styles.
 * Smooth, modern notifications matching Plugin-Batterij.nl
 * (Poppins, dark slate ink, teal/green accent).
 */

.pb-ssp-popup {
	--pb-accent: #1c9d74;
	--pb-radius: 14px;
	position: fixed;
	z-index: 99990;
	width: 340px;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	font-family: "Poppins", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}
.pb-ssp-popup * { box-sizing: border-box; }
.pb-ssp-popup.is-visible { opacity: 1; pointer-events: auto; }

/* Positions */
.pb-ssp-popup.pos-bottom-left  { left: 20px;  bottom: 20px; }
.pb-ssp-popup.pos-bottom-right { right: 20px; bottom: 20px; }
.pb-ssp-popup.pos-top-left     { left: 20px;  top: 20px; }
.pb-ssp-popup.pos-top-right    { right: 20px; top: 20px; }

/* Card */
.pb-ssp-card {
	display: flex;
	align-items: stretch;
	gap: 12px;
	background: #ffffff;
	border-radius: var(--pb-radius);
	box-shadow: 0 10px 35px rgba(15, 23, 32, 0.18), 0 2px 8px rgba(15, 23, 32, 0.08);
	padding: 12px 36px 12px 12px;
	position: relative;
	text-decoration: none;
	color: #1b1a1a;
	overflow: hidden;
	border: 1px solid rgba(15, 23, 32, 0.05);
}
.pb-ssp-card:hover { box-shadow: 0 14px 40px rgba(15, 23, 32, 0.24); }

/* Accent strip */
.pb-ssp-card::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--pb-accent);
}

/* Thumbnail */
.pb-ssp-thumb {
	flex: none;
	width: 56px; height: 56px;
	border-radius: 10px;
	object-fit: cover;
	background: #f1f3f5;
}
.pb-ssp-card.no-image { padding-left: 16px; }

/* Body */
.pb-ssp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.pb-ssp-headline {
	font-size: 13.5px; line-height: 1.4; margin: 0; color: #1b1a1a; font-weight: 400;
}
.pb-ssp-headline .pb-ssp-product { font-weight: 600; color: #11695c; }
.pb-ssp-headline strong { font-weight: 600; }
.pb-ssp-subline {
	font-size: 12px; color: #5b626b; margin: 3px 0 0; font-style: italic;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Meta row */
.pb-ssp-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.pb-ssp-time { font-size: 11px; color: #8a9099; display: inline-flex; align-items: center; gap: 4px; }
.pb-ssp-verified {
	font-size: 10.5px; color: var(--pb-accent); font-weight: 600;
	display: inline-flex; align-items: center; gap: 3px;
}
.pb-ssp-verified svg { width: 11px; height: 11px; }

/* Stars */
.pb-ssp-stars { display: inline-flex; gap: 1px; margin-top: 4px; }
.pb-ssp-stars svg { width: 13px; height: 13px; }
.pb-ssp-stars .pb-ssp-star { fill: #e3b341; }
.pb-ssp-stars .pb-ssp-star.is-empty { fill: #d9dde2; }

/* Close button */
.pb-ssp-close {
	position: absolute; top: 8px; right: 8px;
	width: 20px; height: 20px; border: none; background: rgba(0,0,0,0.04);
	border-radius: 50%; cursor: pointer; color: #8a9099; font-size: 14px; line-height: 1;
	display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s;
}
.pb-ssp-close:hover { background: rgba(0,0,0,0.1); color: #1b1a1a; }

/* Progress bar */
.pb-ssp-progress {
	position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
	background: var(--pb-accent); opacity: 0.85; transform-origin: left center; transform: scaleX(0);
}
.pb-ssp-popup.is-visible .pb-ssp-progress.run { transform: scaleX(1); }

/* Dark theme */
.pb-ssp-popup.theme-dark .pb-ssp-card { background: #1c232b; color: #f1f3f5; border-color: rgba(255,255,255,0.06); }
.pb-ssp-popup.theme-dark .pb-ssp-headline { color: #f1f3f5; }
.pb-ssp-popup.theme-dark .pb-ssp-headline .pb-ssp-product { color: #4fd6a8; }
.pb-ssp-popup.theme-dark .pb-ssp-subline { color: #aab3bd; }
.pb-ssp-popup.theme-dark .pb-ssp-thumb { background: #2a333d; }
.pb-ssp-popup.theme-dark .pb-ssp-close { background: rgba(255,255,255,0.08); color: #aab3bd; }
.pb-ssp-popup.theme-dark .pb-ssp-close:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* ---------- Animations ---------- */
/* Base offsets per animation + position; .is-visible resets to 0. */

/* Slide up */
.pb-ssp-popup.anim-slide-up { transform: translateY(28px); transition: transform 0.5s cubic-bezier(.16,1,.3,1), opacity 0.45s ease; }
.pb-ssp-popup.anim-slide-up.is-visible { transform: translateY(0); }

/* Slide from side */
.pb-ssp-popup.anim-slide-side.pos-bottom-left,
.pb-ssp-popup.anim-slide-side.pos-top-left { transform: translateX(-130%); transition: transform 0.55s cubic-bezier(.16,1,.3,1), opacity 0.45s ease; }
.pb-ssp-popup.anim-slide-side.pos-bottom-right,
.pb-ssp-popup.anim-slide-side.pos-top-right { transform: translateX(130%); transition: transform 0.55s cubic-bezier(.16,1,.3,1), opacity 0.45s ease; }
.pb-ssp-popup.anim-slide-side.is-visible { transform: translateX(0); }

/* Fade */
.pb-ssp-popup.anim-fade { transform: translateY(8px); transition: opacity 0.55s ease, transform 0.55s ease; }
.pb-ssp-popup.anim-fade.is-visible { transform: translateY(0); }

/* Zoom */
.pb-ssp-popup.anim-zoom { transform: scale(0.8); transition: transform 0.45s cubic-bezier(.16,1.3,.3,1), opacity 0.4s ease; }
.pb-ssp-popup.anim-zoom.is-visible { transform: scale(1); }

/* Subtle entrance bounce for the thumbnail */
.pb-ssp-popup.is-visible .pb-ssp-thumb { animation: pb-ssp-pop 0.5s cubic-bezier(.16,1.3,.3,1); }
@keyframes pb-ssp-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.pb-ssp-popup,
	.pb-ssp-popup.is-visible .pb-ssp-thumb,
	.pb-ssp-progress { transition: opacity 0.2s ease !important; animation: none !important; transform: none !important; }
}

/* Mobile */
@media (max-width: 600px) {
	.pb-ssp-popup { width: calc(100vw - 24px); }
	.pb-ssp-popup.pos-bottom-left, .pb-ssp-popup.pos-bottom-right { left: 12px; right: 12px; bottom: 12px; }
	.pb-ssp-popup.pos-top-left, .pb-ssp-popup.pos-top-right { left: 12px; right: 12px; top: 12px; }
}