/**
 * Riza Social Proof — front-end styles.
 * Brand: gold (--rzsp-accent #c39348) on white, near-black ink. RTL-aware.
 * All rules are namespaced under .rzsp- to avoid clashing with the theme.
 */

:root {
	--rzsp-accent: #c39348;
	--rzsp-accent-ink: #ffffff;
	--rzsp-accent-soft: rgba(195, 147, 72, 0.12);
	--rzsp-ink: #111111;
	--rzsp-muted: #7a7a7a;
	--rzsp-card: #ffffff;
	--rzsp-line: #ececec;
	/* Matches the squared size-swatch radius on the single product page. */
	--rzsp-radius: 2px;
	--rzsp-shadow: 0 14px 40px -14px rgba(17, 17, 17, 0.30), 0 2px 10px -4px rgba(17, 17, 17, 0.18);
	--rzsp-gap: 14px;
}

/* ------------------------------------------------------------------ *
 *  Toast stack
 * ------------------------------------------------------------------ */
.rzsp-stack {
	position: fixed;
	z-index: 99990;
	display: flex;
	flex-direction: column;
	gap: var(--rzsp-gap);
	width: min(412px, calc(100vw - 28px));
	pointer-events: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.rzsp-pos-bottom-left  { inset-inline-start: 18px; bottom: 18px; }
.rzsp-pos-bottom-right { inset-inline-end: 18px;   bottom: 18px; }
.rzsp-pos-top-left     { inset-inline-start: 18px; top: 92px; }
.rzsp-pos-top-right    { inset-inline-end: 18px;   top: 92px; }
.rzsp-pos-top-left, .rzsp-pos-top-right { flex-direction: column-reverse; }

/* ------------------------------------------------------------------ *
 *  Toast card
 * ------------------------------------------------------------------ */
.rzsp-toast {
	pointer-events: auto;
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px;
	box-sizing: border-box;
	padding: 15px 46px 15px 15px;
	background: var(--rzsp-card);
	color: var(--rzsp-ink);
	border: 1px solid var(--rzsp-line);
	border-radius: var(--rzsp-radius);
	box-shadow: var(--rzsp-shadow);
	overflow: hidden;
	text-align: start;
	font-size: 15px;
	line-height: 1.45;
	transform: translateY(16px);
	opacity: 0;
	transition: transform .45s cubic-bezier(.16,.84,.44,1), opacity .45s ease;
}
.rzsp-pos-bottom-right .rzsp-toast,
.rzsp-pos-top-right .rzsp-toast { padding: 15px 15px 15px 46px; }
.rzsp-toast.is-in  { transform: translateY(0); opacity: 1; }
.rzsp-toast.is-out { transform: translateY(14px) scale(.98); opacity: 0; }

/* Accent rail */
.rzsp-toast::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 4px;
	background: var(--rzsp-accent);
}

.rzsp-toast__media {
	flex: 0 0 auto;
	width: 66px;
	height: 66px;
	border-radius: var(--rzsp-radius);
	overflow: hidden;
	background: var(--rzsp-accent-soft);
	position: relative;
}
.rzsp-toast__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.rzsp-toast__pulse {
	position: absolute;
	inset-block-start: -4px;
	inset-inline-end: -4px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--rzsp-accent);
	box-shadow: 0 0 0 0 var(--rzsp-accent);
	animation: rzsp-pulse 2s infinite;
}

.rzsp-toast__body { flex: 1 1 auto; min-width: 0; }
.rzsp-toast__line {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rzsp-toast__who { font-weight: 400; color: var(--rzsp-ink); }
.rzsp-toast__product {
	font-weight: 700;
	color: var(--rzsp-ink);
	text-decoration: none;
}
.rzsp-toast__product:hover { color: var(--rzsp-accent); text-decoration: underline; }
.rzsp-toast__meta {
	margin-top: 3px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--rzsp-muted);
}
.rzsp-toast__verified {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--rzsp-accent);
	font-weight: 600;
}
.rzsp-toast__verified .rzsp-ico { width: 13px; height: 13px; }
.rzsp-toast__time { white-space: nowrap; }
.rzsp-toast__time::before { content: "•"; margin-inline-end: 6px; color: var(--rzsp-line); }

.rzsp-toast__close {
	position: absolute;
	inset-block-start: 7px;
	inset-inline-end: 7px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--rzsp-muted);
	cursor: pointer;
	font-size: 17px;
	line-height: 1;
	padding: 0;
	transition: background .2s, color .2s;
}
.rzsp-toast__close:hover { background: var(--rzsp-accent-soft); color: var(--rzsp-ink); }

/* Auto-dismiss progress bar */
.rzsp-toast__bar {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	height: 3px;
	width: 100%;
	transform-origin: left center;
	background: var(--rzsp-accent);
	opacity: .55;
	transform: scaleX(1);
}
[dir="rtl"] .rzsp-toast__bar { transform-origin: right center; }
.rzsp-toast.is-counting .rzsp-toast__bar { animation: rzsp-bar linear forwards; }
.rzsp-toast:hover .rzsp-toast__bar { animation-play-state: paused; }

/* Product-signal toast variant */
.rzsp-toast--signal .rzsp-toast__media {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rzsp-accent);
}
.rzsp-toast--signal .rzsp-toast__media .rzsp-ico { width: 32px; height: 32px; }

/* ------------------------------------------------------------------ *
 *  Product-page badges
 * ------------------------------------------------------------------ */
.rzsp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0;
}
.rzsp-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--rzsp-accent-soft);
	border: 1px solid rgba(195, 147, 72, 0.28);
	border-color: color-mix(in srgb, var(--rzsp-accent) 28%, transparent);
	box-sizing: border-box;
	line-height: 1.2;
	animation: rzsp-pop .5s cubic-bezier(.16,.84,.44,1) both;
}
.rzsp-badge .rzsp-ico {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--rzsp-accent);
}
.rzsp-badge__text { display: flex; flex-direction: column; }
.rzsp-badge__text strong {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--rzsp-ink);
	letter-spacing: .2px;
}
.rzsp-badge__text span {
	font-size: 11px;
	color: var(--rzsp-muted);
}
.rzsp-badge--best  { background: var(--rzsp-accent-soft); }
.rzsp-badge--recent .rzsp-ico { animation: rzsp-tick 2.4s ease-in-out infinite; }

/* ------------------------------------------------------------------ *
 *  Widgets / shortcodes
 * ------------------------------------------------------------------ */
.rzsp-widget { margin: 0 0 22px; }
.rzsp-widget__title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--rzsp-accent);
	display: inline-block;
}
.rzsp-plist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
.rzsp-plist--cols-2 { grid-template-columns: repeat(2, 1fr); }
.rzsp-plist--cols-3 { grid-template-columns: repeat(3, 1fr); }
.rzsp-plist--cols-4 { grid-template-columns: repeat(4, 1fr); }
.rzsp-pitem { margin: 0; }
.rzsp-pitem__link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}
.rzsp-pitem__media {
	position: relative;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--rzsp-accent-soft);
}
.rzsp-pitem__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.rzsp-pitem__link:hover .rzsp-pitem__media img { transform: scale(1.06); }
.rzsp-pitem__rank {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-start: 4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	background: var(--rzsp-accent);
	color: var(--rzsp-accent-ink);
	box-sizing: border-box;
}
.rzsp-pitem__body { flex: 1 1 auto; min-width: 0; }
.rzsp-pitem__name {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: var(--rzsp-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rzsp-pitem__link:hover .rzsp-pitem__name { color: var(--rzsp-accent); }
.rzsp-pitem__price { display: block; font-size: 13px; margin-top: 2px; }
.rzsp-pitem__price del { color: var(--rzsp-muted); font-weight: 400; }
.rzsp-pitem__price ins { text-decoration: none; color: var(--rzsp-accent); font-weight: 700; }
.rzsp-pitem__metric {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	font-size: 11.5px;
	color: var(--rzsp-muted);
}
.rzsp-pitem__metric .rzsp-ico { width: 14px; height: 14px; color: var(--rzsp-accent); }

/* Grid layouts: stack image over body for multi-column. */
.rzsp-plist--cols-2 .rzsp-pitem__link,
.rzsp-plist--cols-3 .rzsp-pitem__link,
.rzsp-plist--cols-4 .rzsp-pitem__link { flex-direction: column; align-items: stretch; text-align: center; }
.rzsp-plist--cols-2 .rzsp-pitem__media,
.rzsp-plist--cols-3 .rzsp-pitem__media,
.rzsp-plist--cols-4 .rzsp-pitem__media { width: 100%; height: auto; aspect-ratio: 1/1; }
.rzsp-plist--cols-2 .rzsp-pitem__metric,
.rzsp-plist--cols-3 .rzsp-pitem__metric,
.rzsp-plist--cols-4 .rzsp-pitem__metric { justify-content: center; }

/* ------------------------------------------------------------------ *
 *  Animations
 * ------------------------------------------------------------------ */
@keyframes rzsp-pulse {
	0%   { box-shadow: 0 0 0 0 var(--rzsp-accent-soft); }
	70%  { box-shadow: 0 0 0 8px rgba(195, 147, 72, 0); }
	100% { box-shadow: 0 0 0 0 rgba(195, 147, 72, 0); }
}
@keyframes rzsp-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes rzsp-pop {
	from { transform: translateY(8px); opacity: 0; }
	to   { transform: translateY(0);   opacity: 1; }
}
@keyframes rzsp-tick {
	0%, 100% { transform: rotate(0); }
	10% { transform: rotate(-12deg); }
	20% { transform: rotate(12deg); }
	30% { transform: rotate(0); }
}

/* ------------------------------------------------------------------ *
 *  Mobile
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {
	.rzsp-stack {
		width: calc(100vw - 20px);
		inset-inline-start: 10px;
		inset-inline-end: 10px;
	}
	.rzsp-pos-top-left, .rzsp-pos-top-right { top: 72px; }
	.rzsp-pos-bottom-left, .rzsp-pos-bottom-right { bottom: 10px; }
	.rzsp-toast { font-size: 14px; gap: 12px; padding: 13px 42px 13px 13px; }
	.rzsp-pos-bottom-right .rzsp-toast,
	.rzsp-pos-top-right .rzsp-toast { padding: 13px 13px 13px 42px; }
	.rzsp-toast__media { width: 56px; height: 56px; }
}

/* ------------------------------------------------------------------ *
 *  Reduced motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.rzsp-toast { transition: opacity .2s ease; transform: none; }
	.rzsp-toast.is-in { transform: none; }
	.rzsp-toast.is-out { transform: none; }
	.rzsp-toast__pulse,
	.rzsp-badge,
	.rzsp-badge--recent .rzsp-ico,
	.rzsp-toast.is-counting .rzsp-toast__bar { animation: none; }
}