/* =========================================================================
   Petratide Live Feed — Frontend toast styles
   - 3 themes: glassmorphic (Petratide), minimal-light, minimal-dark
   - 8 anchor positions
   - Responsive scaling on tablet & mobile
   - CSS custom properties so JS can override per-toast hue (category tinting)
   ========================================================================= */

#live-cart-root {
	position: fixed !important;
	z-index: 2147483640 !important;   /* near max-int — beats sticky headers, cookie banners, etc. */
	pointer-events: none;
	width: auto;
	max-width: calc(100vw - 24px);
	isolation: isolate;               /* new stacking context, immune to parent z-index/transform */
}
#live-cart-root .live-cart { pointer-events: auto; }

/* --- Anchor positions ----------------------------------------------- */
.live-cart--pos-top-left      { top: 24px;    left: 24px;   }
.live-cart--pos-top-center    { top: 24px;    left: 50%; transform: translateX(-50%); }
.live-cart--pos-top-right     { top: 24px;    right: 24px; }
.live-cart--pos-middle-left   { top: 50%;     left: 24px;  transform: translateY(-50%); }
.live-cart--pos-middle-right  { top: 50%;     right: 24px; transform: translateY(-50%); }
.live-cart--pos-bottom-left   { bottom: 24px; left: 24px;  }
.live-cart--pos-bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); }
.live-cart--pos-bottom-right  { bottom: 24px; right: 24px; }

/* --- Toast base ----------------------------------------------------- */
.live-cart {
	--lcf-hue: #a43fff;             /* JS overrides per-toast for category tinting */
	--lcf-hue-soft: rgba(164,63,255,.25);
	--lcf-card-w: 340px;
	--lcf-card-h: 120px;

	width: var(--lcf-card-w);
	min-height: var(--lcf-card-h);
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto 1fr auto;     /* avatar | body | cta */
	column-gap: 12px;
	align-items: center;
	padding: 12px 14px;
	border-radius: 14px;
	font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	font-size: 13px;
	line-height: 1.35;
	letter-spacing: .01em;
	overflow: hidden;
	position: relative;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .35s ease, transform .35s ease;
	will-change: transform, opacity;
}
.live-cart.is-visible { opacity: 1; transform: translateY(0); }
.live-cart.is-leaving { opacity: 0; transform: translateY(10px); }

@keyframes lcf-fadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Avatar (researcher) -------------------------------------------- */
.live-cart__avatar {
	flex-shrink: 0;
	width: 44px; height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255,255,255,.06);
	border: 1px solid var(--lcf-hue-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .04em;
	align-self: start;
	margin-top: 2px;
}
.live-cart__avatar img { width: 100%; height: 100%; object-fit: cover; }
.live-cart__initials {
	/* Default fallback. The JS overrides this with a name-hashed color so
	   each researcher gets a consistent, varied avatar background. */
	background: linear-gradient(135deg, #a43fff 0%, rgba(255,255,255,.1) 100%);
	color: #fff;
}

/* --- Body ----------------------------------------------------------- */
.live-cart__body { min-width: 0; align-self: center; }
.live-cart__line1 {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 13px;
}
.live-cart__line1 .live-cart__user { font-weight: 700; }

/* --- Product row (thumb + name + price) ----------------------------- */
.live-cart__product {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	min-width: 0;
}
.live-cart__thumb {
	width: 40px; height: 40px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--lcf-hue-soft);
	background: rgba(255,255,255,.04);
}
.live-cart__product-meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.live-cart__product-name {
	font-weight: 600;
	font-size: 12.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: inherit;
}
.live-cart__price {
	font-weight: 700;
	font-size: 12px;
	color: var(--lcf-hue);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Sale price markup (WC <del> + <ins>) ------------------------------- */
/* <del> = original price: small, gray, struck through */
.live-cart__price del {
	color: #b5acd9;                  /* default: light lavender-gray, reads on dark glassmorphic */
	font-weight: 500;
	font-size: 10.5px;
	margin-right: 5px;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	opacity: .8;
}
/* <ins> = sale price: bold, hue color (inherits --lcf-hue, so category tinting applies) */
.live-cart__price ins {
	text-decoration: none;
	color: var(--lcf-hue);
	font-weight: 700;
}
.live-cart__price .woocommerce-Price-currencySymbol { margin-right: 1px; }
/* Theme-specific overrides so the strikethrough is readable on each background */
.live-cart--theme-minimal-light .live-cart__price del { color: #7a7a8a; opacity: 1; }
.live-cart--theme-minimal-dark  .live-cart__price del { color: #9c9cb0; opacity: 1; }

/* --- Text card variant ---------------------------------------------- */
.live-cart--text .live-cart__line1 {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.45;
	font-weight: 500;
}
.live-cart--text .live-cart__line1 .live-cart__user { font-weight: 700; }

/* --- CTA button (Add to cart) -------------------------------------- */
.live-cart__cta {
	flex-shrink: 0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid var(--lcf-hue);
	background: var(--lcf-hue);
	color: #fff;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform .12s, box-shadow .2s;
	text-decoration: none;             /* for anchor variant on text cards */
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}
a.live-cart__cta:hover { color: #fff; }

/* Text card content gets slightly more line-height since there's no price row */
.live-cart__text { line-height: 1.45; white-space: normal; overflow: visible; text-overflow: clip; }
.live-cart__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(164,63,255,.32); }
.live-cart__cta:active { transform: translateY(0); }
.live-cart__cta[disabled] { opacity: .75; cursor: default; }

/* Ripple effect (matches Petratide pattern) */
.live-cart__cta .live-cart__ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	background: rgba(255,255,255,.55);
	animation: live-cart__ripple .55s linear;
	pointer-events: none;
}
@keyframes live-cart__ripple {
	to { transform: scale(2.5); opacity: 0; }
}

/* --- Close ---------------------------------------------------------- */
.live-cart__close {
	position: absolute;
	top: 6px; right: 8px;
	background: transparent;
	border: 0;
	color: inherit;
	opacity: .55;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 2px 4px;
}
.live-cart__close:hover { opacity: 1; }

/* =========================================================================
   THEME: glassmorphic (Petratide Montserrat) — DEFAULT
   ========================================================================= */
.live-cart--theme-glassmorphic .live-cart {
	background: linear-gradient(135deg, rgba(14,12,26,.82) 0%, rgba(28,18,52,.78) 100%);
	color: #f3eaff;
	border: 1px solid var(--lcf-hue-soft);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow:
		0 14px 40px rgba(10, 4, 30, .45),
		0 0 0 1px rgba(255,255,255,.02) inset,
		0 0 28px var(--lcf-hue-soft);
}
.live-cart--theme-glassmorphic .live-cart__line2 { color: #d8c8ff; }
.live-cart--theme-glassmorphic .live-cart__line1 .live-cart__verb { color: #c280ff; font-weight: 500; }

/* Ambient blob behind avatar (very Petratide) */
.live-cart--theme-glassmorphic .live-cart::before {
	content: '';
	position: absolute;
	width: 120px; height: 120px;
	left: -30px; top: -30px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--lcf-hue) 0%, transparent 70%);
	opacity: .18;
	filter: blur(20px);
	pointer-events: none;
}

/* =========================================================================
   THEME: minimal-light
   ========================================================================= */
.live-cart--theme-minimal-light .live-cart {
	background: #ffffff;
	color: #1b1b2b;
	border: 1px solid #e6e6f0;
	box-shadow: 0 10px 30px rgba(20, 14, 40, .12);
}
.live-cart--theme-minimal-light .live-cart__line2 { color: #595972; }
.live-cart--theme-minimal-light .live-cart__cta { color: #fff; }

/* =========================================================================
   THEME: minimal-dark
   ========================================================================= */
.live-cart--theme-minimal-dark .live-cart {
	background: #16161f;
	color: #f0f0f8;
	border: 1px solid #2a2a3a;
	box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.live-cart--theme-minimal-dark .live-cart__line2 { color: #b8b8c8; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {
	.live-cart { --lcf-card-w: 320px; font-size: 12.5px; }
	.live-cart__avatar { width: 40px; height: 40px; }
	.live-cart__thumb  { width: 36px; height: 36px; }
}
@media (max-width: 600px) {
	#live-cart-root.live-cart--pos-top-left,
	#live-cart-root.live-cart--pos-top-right,
	#live-cart-root.live-cart--pos-bottom-left,
	#live-cart-root.live-cart--pos-bottom-right,
	#live-cart-root.live-cart--pos-middle-left,
	#live-cart-root.live-cart--pos-middle-right {
		left: 12px; right: 12px;
		transform: none;
		width: auto;
	}
	#live-cart-root.live-cart--pos-top-center,
	#live-cart-root.live-cart--pos-bottom-center {
		left: 12px; right: 12px;
		transform: none;
	}
	.live-cart {
		--lcf-card-w: 100%;
		width: 100%;
		padding: 10px 12px;
		column-gap: 10px;
		font-size: 12px;
	}
	.live-cart__avatar { width: 38px; height: 38px; }
	.live-cart__thumb  { width: 34px; height: 34px; }
	.live-cart__cta    { font-size: 11px; padding: 7px 10px; }
	.live-cart__product-name { font-size: 12px; }
	.live-cart__price        { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.live-cart { transition: opacity .15s linear; transform: none !important; }
}