/**
 * ProofNexus front-end popup styles.
 *
 * Colors/radius are driven by CSS custom properties injected inline by
 * PHP (see ProofNexus::enqueue_front_assets) so this file never needs to be
 * regenerated when an admin changes design settings. --proofnexus-text is
 * kept for backward compatibility (some site owners have customized it),
 * but the two text rows below default to their own fixed, high-contrast
 * colors per the modern popup design and only fall back to
 * --proofnexus-text if a child theme/CSS override removes them.
 */

 /* Settings Container CSS Clean-up */

:root {
	--proofnexus-bg: #ffffff;
	--proofnexus-text: #111827;
	--proofnexus-radius: 14px;
	--proofnexus-img-radius: 50%;
	--proofnexus-action-color: #6b7280;
	--proofnexus-title-color: #111827;
	--proofnexus-time-color: #9ca3af;
	--proofnexus-accent: #7c3aed;
}

.proofnexus-container {
	position: fixed;
	z-index: 999999;
	max-width: 360px;
	width: calc(100% - 32px);
	pointer-events: none;
}

/*
 * Position variants — each one is applied exclusively (see
 * assets/js/proofnexus-front.js, which sets the container's className
 * once from the `position` setting), but every rule still explicitly
 * resets the *other* axis' property to `auto` and uses !important on all
 * four. This is deliberate defensive scoping, not redundancy: without it,
 * switching an existing site's position setting from e.g. bottom-left to
 * bottom-right can appear to silently fail — a `left` value set by an
 * older cached copy of this file (browser cache, a page cache, or a CDN
 * edge that hasn't picked up the new file yet) would otherwise still win
 * over a `right` value from a newer one at equal specificity, since nothing
 * here ever told the browser to drop the old property. Chaining
 * `.proofnexus-container` onto the position class also raises specificity
 * above a bare `.proofnexus-pos-*` override some other stylesheet might
 * define. See proofnexus_asset_version() in proofnexus.php for the actual
 * fix for stale cached CSS being served in the first place — these
 * !important resets are the belt-and-suspenders layer under it.
 */
.proofnexus-container.proofnexus-pos-bottom-left {
	left: 16px !important;
	right: auto !important;
	bottom: 16px !important;
	top: auto !important;
}

/*
 * Bottom Center: the horizontal centering transform lives on the fixed
 * CONTAINER only. The show/hide animation transforms live on the inner
 * `.proofnexus-popup` (see below), so the two never overwrite each other.
 * The container's width is already capped (max-width 360px, and
 * calc(100% - 32px) on narrow screens), so it stays inside the viewport.
 */
.proofnexus-container.proofnexus-pos-bottom-center {
	left: 50% !important;
	right: auto !important;
	bottom: 16px !important;
	top: auto !important;
	transform: translateX(-50%) !important;
}

.proofnexus-container.proofnexus-pos-bottom-right {
	right: 16px !important;
	left: auto !important;
	bottom: 16px !important;
	top: auto !important;
}

.proofnexus-container.proofnexus-pos-top-left {
	left: 16px !important;
	right: auto !important;
	top: 16px !important;
	bottom: auto !important;
}

.proofnexus-container.proofnexus-pos-top-right {
	right: 16px !important;
	left: auto !important;
	top: 16px !important;
	bottom: auto !important;
}

.proofnexus-popup {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--proofnexus-bg);
	color: var(--proofnexus-text);
	border-radius: var(--proofnexus-radius);
	/* Crisp, soft, layered shadow — matches the modern card look instead
	   of the old single flat drop-shadow. */
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(17, 24, 39, 0.06);
	padding: 14px 34px 14px 14px;
	pointer-events: auto;
	position: relative;
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	transition: opacity 0.35s ease, transform 0.35s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.proofnexus-pos-top-left .proofnexus-popup,
.proofnexus-pos-top-right .proofnexus-popup {
	transform: translateY(-16px) scale(0.98);
}

.proofnexus-popup.proofnexus-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.proofnexus-popup.proofnexus-leaving {
	opacity: 0;
	transform: translateY(8px) scale(0.98);
}

.proofnexus-popup.proofnexus-clickable {
	cursor: pointer;
}

.proofnexus-popup.proofnexus-clickable:hover {
	box-shadow: 0 14px 30px -6px rgba(0, 0, 0, 0.14), 0 10px 14px -6px rgba(0, 0, 0, 0.06);
}

/* ---------- Avatar / product image ---------- */

.proofnexus-popup-img {
	/* 88px on desktop; 72px at viewport widths of 480px and below (see the
	   max-width: 480px rule below). Fixed size + flex: 0 0 auto so the image
	   can neither shrink nor grow into the text column or the close button,
	   which sits in the popup's 34px right padding. border-box keeps the
	   rendered size exactly 88px / 72px including the 1px border, and the
	   max-* / min-* values stop theme rules such as img { max-width: 100%;
	   height: auto } from altering it. */
	box-sizing: border-box;
	width: 88px;
	height: 88px;
	min-width: 88px;
	min-height: 88px;
	max-width: 88px;
	max-height: 88px;
	object-fit: cover;
	border-radius: var(--proofnexus-img-radius);
	flex: 0 0 auto;
	background: #f3f4f6;
	border: 1px solid rgba(17, 24, 39, 0.06);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

@media (max-width: 480px) {
	.proofnexus-popup-img {
		width: 72px;
		height: 72px;
		min-width: 72px;
		min-height: 72px;
		max-width: 72px;
		max-height: 72px;
	}
}

.proofnexus-popup-body {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 1px;
}

/* ---------- Text rows ---------- */

/* Buyer Action Line (top) — muted, subtle, small. */
.proofnexus-popup-action {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--proofnexus-action-color);
	word-wrap: break-word;
}

/* Product / Subject Title (middle) — bold, high-contrast, larger. */
.proofnexus-popup-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--proofnexus-title-color);
	word-wrap: break-word;
	letter-spacing: -0.01em;
}

@media (min-width: 360px) {
	.proofnexus-popup-title {
		font-size: 15px;
	}
}

.proofnexus-popup-action + .proofnexus-popup-title {
	margin-top: 2px;
}

/* Legacy single-line fallback for modules/items that supply only
   `message` and no `title` — rendered with the bold/title treatment
   since it's the primary (and only) piece of content. */
.proofnexus-popup-message {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--proofnexus-title-color);
	word-wrap: break-word;
	letter-spacing: -0.01em;
}

/* ---------- Footer: time-ago ---------- */

.proofnexus-popup-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 7px;
}

.proofnexus-popup-time {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--proofnexus-time-color);
	text-align: left;
}

/* ---------- Close (X) button ---------- */

.proofnexus-popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: #9ca3af;
	opacity: 1;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.proofnexus-popup-close:hover {
	background: #f3f4f6;
	color: #4b5563;
}

@media (max-width: 480px) {
	.proofnexus-container {
		max-width: none;
		width: calc(100% - 20px);
	}

	.proofnexus-container.proofnexus-pos-bottom-left,
	.proofnexus-container.proofnexus-pos-bottom-right {
		left: 10px !important;
		right: 10px !important;
		bottom: 10px !important;
		top: auto !important;
	}

	/* Centered, 10px viewport margin each side (width is calc(100% - 20px)). */
	.proofnexus-container.proofnexus-pos-bottom-center {
		left: 50% !important;
		right: auto !important;
		bottom: 10px !important;
		top: auto !important;
	}

	.proofnexus-container.proofnexus-pos-top-left,
	.proofnexus-container.proofnexus-pos-top-right {
		left: 10px !important;
		right: 10px !important;
		top: 10px !important;
		bottom: auto !important;
	}
}

/* ---------- Optional "by ProofNexus" credit (1.5.4) ----------
   Rendered only when the administrator enables it. Sits at the bottom of
   the text column, well clear of the close button. */

.proofnexus-popup-credit {
	margin: 6px 0 0;
	font-size: 11px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--proofnexus-action-color);
}

.proofnexus-popup-credit a {
	color: var(--proofnexus-text);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.proofnexus-popup-credit a:hover {
	text-decoration-thickness: 2px;
}

.proofnexus-popup-credit a:focus-visible {
	outline: 2px solid var(--proofnexus-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------- Popup templates (1.5.4) ----------
   The template slug is added to each card as a class. Colors, border
   radius and image shape still come from the Design settings via the
   custom properties above, so every template honors them. Sizes below
   are chosen to leave the close button's 34px gutter untouched. */

/* Classic Compact — the original 1.5.3 card; the base rules above are
   its styling, so this selector only needs to exist as a stable hook. */
.proofnexus-popup.proofnexus-template-classic {
	align-items: flex-start;
}

/* Product Spotlight — larger image, accent edge, bolder title. */
.proofnexus-popup.proofnexus-template-spotlight {
	gap: 14px;
	padding: 16px 36px 16px 14px;
	border-left: 4px solid var(--proofnexus-accent);
	box-shadow: 0 14px 30px -8px rgba(17, 24, 39, 0.18), 0 8px 12px -6px rgba(17, 24, 39, 0.08);
}

.proofnexus-popup.proofnexus-template-spotlight .proofnexus-popup-img {
	width: 104px;
	height: 104px;
	min-width: 104px;
	min-height: 104px;
	max-width: 104px;
	max-height: 104px;
}

.proofnexus-popup.proofnexus-template-spotlight .proofnexus-popup-action {
	font-size: 13px;
}

.proofnexus-popup.proofnexus-template-spotlight .proofnexus-popup-title,
.proofnexus-popup.proofnexus-template-spotlight .proofnexus-popup-message {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.25;
}

.proofnexus-popup.proofnexus-template-spotlight .proofnexus-popup-footer {
	margin-top: 9px;
}

/* Minimal Clean — flat, slim, small image, quiet text. */
.proofnexus-popup.proofnexus-template-minimal {
	align-items: center;
	gap: 10px;
	padding: 10px 32px 10px 10px;
	box-shadow: none;
	border: 1px solid rgba(17, 24, 39, 0.14);
}

.proofnexus-popup.proofnexus-template-minimal.proofnexus-clickable:hover {
	box-shadow: none;
	border-color: rgba(17, 24, 39, 0.3);
}

.proofnexus-popup.proofnexus-template-minimal .proofnexus-popup-img {
	width: 52px;
	height: 52px;
	min-width: 52px;
	min-height: 52px;
	max-width: 52px;
	max-height: 52px;
	box-shadow: none;
}

.proofnexus-popup.proofnexus-template-minimal .proofnexus-popup-body {
	padding-top: 0;
}

.proofnexus-popup.proofnexus-template-minimal .proofnexus-popup-action {
	font-size: 12px;
	font-weight: 400;
}

.proofnexus-popup.proofnexus-template-minimal .proofnexus-popup-title,
.proofnexus-popup.proofnexus-template-minimal .proofnexus-popup-message {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0;
}

.proofnexus-popup.proofnexus-template-minimal .proofnexus-popup-footer {
	margin-top: 4px;
}

.proofnexus-popup.proofnexus-template-minimal .proofnexus-popup-time {
	font-size: 11px;
}

.proofnexus-popup.proofnexus-template-minimal .proofnexus-popup-close {
	top: 8px;
	right: 8px;
}

@media (max-width: 480px) {
	.proofnexus-popup.proofnexus-template-spotlight {
		gap: 12px;
		padding: 14px 34px 14px 12px;
	}

	.proofnexus-popup.proofnexus-template-spotlight .proofnexus-popup-img {
		width: 80px;
		height: 80px;
		min-width: 80px;
		min-height: 80px;
		max-width: 80px;
		max-height: 80px;
	}

	.proofnexus-popup.proofnexus-template-spotlight .proofnexus-popup-title,
	.proofnexus-popup.proofnexus-template-spotlight .proofnexus-popup-message {
		font-size: 15px;
	}

	.proofnexus-popup.proofnexus-template-minimal .proofnexus-popup-img {
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		max-width: 44px;
		max-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.proofnexus-popup {
		transition: opacity 0.2s linear;
		transform: none !important;
	}

	.proofnexus-popup-close {
		transition: none;
	}
}