/**
 * Yield Sales Notification — storefront widget styles.
 * Scoped under #ysn-notification-container to avoid leaking into the
 * theme; uses its own CSS variables (not the admin's tokens.css) since
 * this must stay a tiny, dependency-free file shipped to every visitor.
 */

#ysn-notification-container {
	--ysn-primary: #FF7A1A;
	--ysn-text: #111827;
	--ysn-text-secondary: #6B7280;
	--ysn-surface: #FFFFFF;
	--ysn-border: #E5E7EB;
	--ysn-shadow: 0 10px 30px rgba(17, 24, 39, 0.12);

	position: fixed;
	z-index: 999999;
	pointer-events: none;
}

.ysn-card {
	position: fixed;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 340px;
	background: var(--ysn-surface);
	border-radius: 14px;
	box-shadow: var(--ysn-shadow);
	padding: 14px 16px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 220ms ease, transform 220ms ease;
	pointer-events: auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ysn-card--visible {
	opacity: 1;
	transform: translateY(0);
}

.ysn-position-bottom-left  { left: 20px; bottom: 20px; }
.ysn-position-bottom-right { right: 20px; bottom: 20px; }
.ysn-position-top-left     { left: 20px; top: 20px; }
.ysn-position-top-right    { right: 20px; top: 20px; }

.ysn-card__image {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	overflow: hidden;
	background: #F8FAFC;
}
.ysn-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ysn-card__body {
	min-width: 0;
}

.ysn-card__message {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ysn-text);
}
.ysn-card__message strong {
	color: var(--ysn-primary);
	font-weight: 600;
}

.ysn-card__stars {
	color: #F59E0B;
	font-size: 12px;
	letter-spacing: 1px;
}

.ysn-card__time {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--ysn-text-secondary);
}

.ysn-card__close {
	flex-shrink: 0;
	background: none;
	border: none;
	color: var(--ysn-text-secondary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0 0 0 6px;
	align-self: flex-start;
}
.ysn-card__close:hover {
	color: var(--ysn-text);
}

@media (max-width: 480px) {
	.ysn-card {
		max-width: calc(100vw - 32px);
		left: 16px !important;
		right: 16px !important;
	}
}

/* Token-engine accent spans (product name, customer name, etc.).
   Inherits the notification's accent color set inline by the widget. */
#ysn-notification-container .ysn-accent {
	color: var(--ysn-primary);
	font-weight: 600;
	text-decoration: none;
}
#ysn-notification-container a.ysn-accent:hover {
	text-decoration: underline;
}

/* ============================================================
   Step 6 — Animation library (separate in / out animations)
   Cards get .ysn-anim-in--{name} on show, .ysn-anim-out--{name}
   on dismiss. Names mirror common villatheme/animate.css options.
   ============================================================ */

/* Base: disable the old opacity transition when a named animation is
   used, so the two don't fight. */
.ysn-card.ysn-animated { transition: none; }

/* --- IN animations --- */
@keyframes ysnFadeIn        { from { opacity: 0; } to { opacity: 1; } }
@keyframes ysnSlideInLeft   { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ysnSlideInRight  { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ysnSlideInUp     { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ysnSlideInDown   { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ysnZoomIn        { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ysnBounceIn {
	0%   { opacity: 0; transform: scale(0.7); }
	60%  { opacity: 1; transform: scale(1.05); }
	100% { transform: scale(1); }
}

.ysn-anim-in--fade       { animation: ysnFadeIn 320ms ease both; }
.ysn-anim-in--slide-left { animation: ysnSlideInLeft 360ms cubic-bezier(0.22,1,0.36,1) both; }
.ysn-anim-in--slide-right{ animation: ysnSlideInRight 360ms cubic-bezier(0.22,1,0.36,1) both; }
.ysn-anim-in--slide-up   { animation: ysnSlideInUp 360ms cubic-bezier(0.22,1,0.36,1) both; }
.ysn-anim-in--slide-down { animation: ysnSlideInDown 360ms cubic-bezier(0.22,1,0.36,1) both; }
.ysn-anim-in--zoom       { animation: ysnZoomIn 320ms cubic-bezier(0.22,1,0.36,1) both; }
.ysn-anim-in--bounce     { animation: ysnBounceIn 520ms cubic-bezier(0.22,1,0.36,1) both; }

/* --- OUT animations --- */
@keyframes ysnFadeOut        { from { opacity: 1; } to { opacity: 0; } }
@keyframes ysnSlideOutLeft   { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-30px); } }
@keyframes ysnSlideOutRight  { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(30px); } }
@keyframes ysnSlideOutDown   { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(30px); } }
@keyframes ysnSlideOutUp     { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-30px); } }
@keyframes ysnZoomOut        { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.85); } }

.ysn-anim-out--fade        { animation: ysnFadeOut 300ms ease both; }
.ysn-anim-out--slide-left  { animation: ysnSlideOutLeft 320ms ease both; }
.ysn-anim-out--slide-right { animation: ysnSlideOutRight 320ms ease both; }
.ysn-anim-out--slide-down  { animation: ysnSlideOutDown 320ms ease both; }
.ysn-anim-out--slide-up    { animation: ysnSlideOutUp 320ms ease both; }
.ysn-anim-out--zoom        { animation: ysnZoomOut 300ms ease both; }

/* --- Image position / shape (Step 6) --- */
.ysn-card--image-right { flex-direction: row-reverse; }
.ysn-card__image--round img { border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
	[class*="ysn-anim-in--"], [class*="ysn-anim-out--"] { animation: none !important; }
}