/* ================================================================
   WP Social Proof Popup — Frontend Styles  v2.0.0
   ================================================================ */

.wpspp-popup {
	position: fixed;
	z-index: 999999;
	max-width: min(94vw, 380px);
	pointer-events: none;
	opacity: 0;
	transition: opacity 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
	            transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* positions */
.wpspp-popup.pos-bottom-left  { bottom: 20px; left: 20px; transform: translateY(18px) scale(0.96); }
.wpspp-popup.pos-bottom-right { bottom: 20px; right: 20px; transform: translateY(18px) scale(0.96); }
.wpspp-popup.pos-top-left     { top: 20px;    left: 20px;  transform: translateY(-18px) scale(0.96); }
.wpspp-popup.pos-top-right    { top: 20px;    right: 20px; transform: translateY(-18px) scale(0.96); }

.wpspp-popup.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.wpspp-popup__body {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	position: relative;
	padding: 18px 44px 18px 18px;
	border-radius: 22px;
	background:
		radial-gradient(circle at top left, rgba(255,255,255,0.8), transparent 30%),
		linear-gradient(135deg, #f0fff6 0%, #d4f5e0 100%);
	border: 1px solid rgba(16,70,40,0.10);
	box-shadow:
		0 24px 48px rgba(10, 50, 30, 0.18),
		0 0 0 1px rgba(255,255,255,0.60) inset;
}

.wpspp-popup__icon {
	font-size: 28px;
	flex-shrink: 0;
	line-height: 1;
	margin-top: 2px;
}

.wpspp-popup__message {
	color: #153623;
	font-size: 15px;
	line-height: 1.65;
	font-weight: 500;
	font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.wpspp-popup__name {
	color: #c600aa;
	font-weight: 800;
	font-size: 1.05em;
}

.wpspp-popup__location {
	font-weight: 700;
	color: #1a4230;
}

.wpspp-popup__time {
	font-style: italic;
	color: #4a7065;
}

.wpspp-popup__close {
	position: absolute;
	top: 12px;
	right: 14px;
	border: none;
	background: rgba(200, 40, 40, 0.08);
	color: #cc2222;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.16s, color 0.16s;
}

.wpspp-popup__close:hover,
.wpspp-popup__close:focus {
	background: #cc2222;
	color: #fff;
	outline: none;
}

/* ── Progress bar ─────────────────────────────────────────────
   Thin bar at the bottom of the popup showing auto-hide countdown */
.wpspp-popup__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	border-radius: 0 0 22px 22px;
	overflow: hidden;
}

.wpspp-popup__progress-bar {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, #25d366, #0f8d46);
	transform-origin: left;
	transition: transform linear;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
	.wpspp-popup.pos-bottom-left,
	.wpspp-popup.pos-bottom-right {
		bottom: 10px;
		left: 10px;
		right: 10px;
		max-width: none;
	}

	.wpspp-popup.pos-top-left,
	.wpspp-popup.pos-top-right {
		top: 10px;
		left: 10px;
		right: 10px;
		max-width: none;
	}

	.wpspp-popup__body  { padding: 15px 40px 15px 14px; border-radius: 18px; }
	.wpspp-popup__message { font-size: 14px; }
	.wpspp-popup__icon  { font-size: 24px; }
}