/**
 * Sales Notification — .espt-block-sales-notification
 *
 * A rotating social-proof toast. Vars set by the spec:
 *   --pop-width --edge --img-size --msg-size --meta-size --close-size
 *   --pop-bg --border-color --msg-color --hl-color --meta-color
 *   --ver-color --close-color --prog-color   (only when the user picks one)
 * Design classes on the root set the *-d fallbacks, so an explicit colour
 * (inline on the root) always wins over the preset.
 *
 * Mobile-first. Nothing may overflow a 320px viewport.
 */

.espt-block-sales-notification {
	--sn-tx: 0%;
	--sn-ty: 0%;
	--sn-dur: 0.5s;
	--sn-hold: 6s;
	--sn-bg-d: var(--bd-box-bg);
	--sn-line-d: var(--bd-line);
	--sn-ink-d: var(--bd-ink);
	--sn-hl-d: var(--bd-ink);
	--sn-meta-d: var(--bd-muted);
	--sn-ver-d: var(--bd-primary);
	--sn-close-d: var(--bd-muted);
	--sn-close-hover-d: var(--bd-ink);
	--sn-prog-d: var(--bd-primary);
	--sn-bar-d: transparent;
	--sn-media-d: color-mix(in srgb, var(--bd-ink) 8%, transparent);
}

/* A floating toast is not part of the flow — no reserved space, and no
   shared entrance animation fighting our own. */
.espt-block-sales-notification.is-mode-float {
	margin: 0;
}

.espt-block-sales-notification.is-mode-float[data-bd-anim] {
	opacity: 1;
	transform: none;
	transition: none;
}

.espt-block-sales-notification .espt-sn {
	max-width: 100%;
	min-width: 0;
}

/* ------------------------------------------------------------- the card */

.espt-block-sales-notification .espt-sn-pop {
	align-items: center;
	background: var(--pop-bg, var(--sn-bg-d));
	border: 1px solid var(--border-color, var(--sn-line-d));
	border-radius: var(--sn-radius-d, var(--bd-radius, 14px));
	color: var(--msg-color, var(--sn-ink-d));
	display: flex;
	gap: 12px;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	padding: var(--bd-pad, 14px);
	position: relative;
	transform: translate(var(--sn-tx), var(--sn-ty));
	width: var(--pop-width, 320px);
}

.espt-block-sales-notification .espt-sn-pop[hidden] {
	display: none;
}

/* The shared BD hover effects set a bare transform, which would throw a
   centred toast out of place — re-state them so the position offsets
   (--sn-tx / --sn-ty) survive the hover. With "Hover effect: none" the
   card must not move at all. */
.espt-block-sales-notification.bd-hover-lift .espt-sn-pop:hover {
	transform: translate(var(--sn-tx), calc(var(--sn-ty) - 4px));
}

.espt-block-sales-notification.bd-hover-scale .espt-sn-pop:hover {
	transform: translate(var(--sn-tx), var(--sn-ty)) scale(1.015);
}

/* Left accent stripe — designs switch --sn-bar-d on. */
.espt-block-sales-notification .espt-sn-pop::before {
	background: var(--sn-bar-d);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	top: 0;
	width: 4px;
}

/* ------------------------------------------------------------- floating */

/* A fixed box resolves % against the viewport minus the scrollbar, so
   calc(100% - …) is the safe form here — 100vw includes the scrollbar and
   would let the card poke out on a narrow desktop window. */
.espt-block-sales-notification.is-mode-float .espt-sn-pop {
	bottom: var(--edge, 12px);
	left: var(--edge, 12px);
	max-width: calc(100% - (var(--edge, 12px) * 2));
	position: fixed;
	z-index: 99990;
}

.espt-block-sales-notification.is-position-top-left .espt-sn-pop { bottom: auto; top: var(--edge, 12px); }
.espt-block-sales-notification.is-position-top-right .espt-sn-pop { bottom: auto; left: auto; right: var(--edge, 12px); top: var(--edge, 12px); }
.espt-block-sales-notification.is-position-bottom-right .espt-sn-pop { left: auto; right: var(--edge, 12px); }
.espt-block-sales-notification.is-position-center-left .espt-sn-pop { --sn-ty: -50%; bottom: auto; top: 50%; }
.espt-block-sales-notification.is-position-center-right .espt-sn-pop { --sn-ty: -50%; bottom: auto; left: auto; right: var(--edge, 12px); top: 50%; }
.espt-block-sales-notification.is-position-top-center .espt-sn-pop { --sn-tx: -50%; bottom: auto; left: 50%; top: var(--edge, 12px); }
.espt-block-sales-notification.is-position-bottom-center .espt-sn-pop { --sn-tx: -50%; left: 50%; }
.espt-block-sales-notification.is-position-center .espt-sn-pop { --sn-tx: -50%; --sn-ty: -50%; bottom: auto; left: 50%; top: 50%; }

/* Inline (in the content flow) and the editor preview. */
.espt-block-sales-notification.is-mode-inline .espt-sn-pop,
.espt-block-sales-notification .espt-sn.is-preview .espt-sn-pop {
	--sn-tx: 0%;
	--sn-ty: 0%;
	bottom: auto;
	left: auto;
	margin-inline: 0;
	position: relative;
	right: auto;
	top: auto;
	z-index: 1;
}

.espt-block-sales-notification.is-mode-inline.is-position-top-center .espt-sn-pop,
.espt-block-sales-notification.is-mode-inline.is-position-bottom-center .espt-sn-pop,
.espt-block-sales-notification.is-mode-inline.is-position-center .espt-sn-pop {
	margin-inline: auto;
}

.espt-block-sales-notification.is-mode-inline.is-position-top-right .espt-sn-pop,
.espt-block-sales-notification.is-mode-inline.is-position-center-right .espt-sn-pop,
.espt-block-sales-notification.is-mode-inline.is-position-bottom-right .espt-sn-pop {
	margin-inline: auto 0;
}

/* In the flow the card keeps its space between cycles — no layout jump.
   Gated on .is-live (added by the JS as soon as it takes over) so a page
   with the script blocked collapses the card instead of reserving a blank
   slot that is never filled. */
.espt-block-sales-notification.is-mode-inline .espt-sn.is-live .espt-sn-pop[hidden],
.espt-block-sales-notification .espt-sn.is-preview .espt-sn-pop[hidden] {
	display: flex;
	opacity: 0;
	visibility: hidden;
}

/* The editor preview sits in the flow, so it keeps the block spacing. */
.espt-block-sales-notification .espt-sn.is-preview {
	display: block;
	margin-bottom: 24px;
}

/* Dismissed for this browser session (JS): collapse completely, so the
   inline card leaves no reserved empty slot behind. */
.espt-block-sales-notification .espt-sn.is-done {
	display: none;
}

.espt-block-sales-notification .espt-sn-note {
	color: var(--bd-muted);
	font-size: 12px;
	margin: 0 0 8px;
}

/* ---------------------------------------------------------------- media */

.espt-block-sales-notification .espt-sn-media {
	background: var(--sn-media-d);
	border-radius: 10px;
	display: block;
	flex: 0 0 auto;
	height: var(--img-size, 46px);
	overflow: hidden;
	width: var(--img-size, 46px);
}

.espt-block-sales-notification .espt-sn-media[hidden] {
	display: none;
}

.espt-block-sales-notification .espt-sn-img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.espt-block-sales-notification.is-img-shape-circle .espt-sn-media { border-radius: 50%; }
.espt-block-sales-notification.is-img-shape-square .espt-sn-media { border-radius: 0; }

/* Hide-on-mobile: mobile-first, so the toast is suppressed below the tablet
   breakpoint and restored above it. Hiding the wrapper (not the card) keeps
   it clear of the [hidden] display rules the rotation relies on. */
.espt-block-sales-notification.is-hide-mobile.is-mode-float .espt-sn:not(.is-preview) {
	display: none;
}

/* ----------------------------------------------------------------- text */

.espt-block-sales-notification .espt-sn-body {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.espt-block-sales-notification .espt-sn-head {
	color: var(--meta-color, var(--sn-meta-d));
	display: block;
	font-size: calc(var(--meta-size, 12px) * 0.94);
	letter-spacing: 0.04em;
	margin-bottom: 2px;
	text-transform: uppercase;
}

/* min() caps a large chosen size on a narrow phone only — at ≥380px the
   px value always wins, so the control behaves exactly as set. */
.espt-block-sales-notification .espt-sn-msg {
	color: var(--msg-color, var(--sn-ink-d));
	display: block;
	font-size: min(var(--msg-size, 14px), 5.2vw);
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.espt-block-sales-notification .espt-sn-hl {
	color: var(--hl-color, var(--sn-hl-d));
	font-weight: 700;
}

.espt-block-sales-notification .espt-sn-city {
	font-weight: 600;
	opacity: 0.92;
}

.espt-block-sales-notification .espt-sn-meta {
	align-items: center;
	color: var(--meta-color, var(--sn-meta-d));
	display: flex;
	flex-wrap: wrap;
	font-size: min(var(--meta-size, 12px), 4.4vw);
	gap: 2px 10px;
	margin-top: 4px;
}

.espt-block-sales-notification .espt-sn-time {
	align-items: center;
	display: inline-flex;
	gap: 5px;
	min-width: 0;
}

.espt-block-sales-notification .espt-sn-time[hidden] {
	display: none;
}

.espt-block-sales-notification .espt-sn-time-t {
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-sales-notification .espt-sn-dot {
	background: var(--ver-color, var(--sn-ver-d));
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
	height: 7px;
	position: relative;
	width: 7px;
}

.espt-block-sales-notification .espt-sn-dot::after {
	animation: espt-sn-ping 1.8s ease-out infinite;
	background: inherit;
	border-radius: 50%;
	content: "";
	inset: 0;
	position: absolute;
}

.espt-block-sales-notification .espt-sn-verified {
	align-items: center;
	color: var(--ver-color, var(--sn-ver-d));
	display: inline-flex;
	font-weight: 600;
	gap: 4px;
	min-width: 0;
}

.espt-block-sales-notification .espt-sn-verified .espt-ic svg {
	height: 1.05em;
	width: 1.05em;
}

/* --------------------------------------------------------------- close */

.espt-block-sales-notification .espt-sn-close {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--close-color, var(--sn-close-d));
	cursor: pointer;
	display: inline-flex;
	/* Never smaller than a comfortable tap target, whatever the icon size. */
	height: max(calc(var(--close-size, 15px) * 1.7), 28px);
	justify-content: center;
	line-height: 0;
	padding: 0;
	position: absolute;
	right: 5px;
	top: 5px;
	transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
	width: max(calc(var(--close-size, 15px) * 1.7), 28px);
	z-index: 3;
}

.espt-block-sales-notification .espt-sn-close svg {
	height: var(--close-size, 15px);
	width: var(--close-size, 15px);
}

.espt-block-sales-notification .espt-sn-close:hover,
.espt-block-sales-notification .espt-sn-close:focus-visible {
	background: color-mix(in srgb, currentColor 14%, transparent);
	color: var(--close-color, var(--sn-close-hover-d));
	transform: rotate(90deg);
}

/* Keep the text clear of the close button. The button is a square of
   max(icon * 1.7, 28px) inset 5px from the card edge, so the part of it that
   overhangs the body is (button + 5px) minus the card padding — plus a few
   px of breathing room. With a generous card padding it reaches 0. */
.espt-block-sales-notification .espt-sn-close ~ .espt-sn-body {
	padding-right: max(0px, calc(max(calc(var(--close-size, 15px) * 1.7), 28px) + 9px - var(--bd-pad, 14px)));
}

/* ------------------------------------------------------- link + progress */

.espt-block-sales-notification .espt-sn-link {
	border-radius: inherit;
	inset: 0;
	position: absolute;
	z-index: 2;
}

.espt-block-sales-notification .espt-sn-link[hidden] {
	display: none;
}

/* Sits above the full-card link, so it must not swallow the click. */
.espt-block-sales-notification .espt-sn-prog {
	background: color-mix(in srgb, currentColor 12%, transparent);
	bottom: 0;
	display: block;
	height: 3px;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 3;
}

.espt-block-sales-notification .espt-sn-prog i {
	background: var(--prog-color, var(--sn-prog-d));
	display: block;
	height: 100%;
	transform: scaleX(1);
	transform-origin: left center;
	width: 100%;
}

/* .is-run spans the whole visible period; .is-show only the entrance (JS
   drops it on animationend so :hover can transform the card again). */
.espt-block-sales-notification .espt-sn-pop.is-run .espt-sn-prog i {
	animation: espt-sn-drain var(--sn-hold, 6s) linear both;
}

.espt-block-sales-notification .espt-sn-pop.is-paused .espt-sn-prog i {
	animation-play-state: paused;
}

/* -------------------------------------------------------------- designs */

.espt-block-sales-notification.is-design-classic {
	--sn-line-d: transparent;
	--sn-hl-d: var(--bd-primary-dark);
}

/* Only "pill" overrides --sn-radius-d: it is the identity of that preset.
   The others leave the corner radius to the Design panel's own control
   (--bd-radius), which is always emitted and would otherwise be dead. */
.espt-block-sales-notification.is-design-outline {
	--sn-line-d: color-mix(in srgb, var(--bd-ink) 16%, transparent);
	--sn-hl-d: var(--bd-ink);
}

.espt-block-sales-notification.is-design-outline .espt-sn-pop {
	border-width: 2px;
}

.espt-block-sales-notification.is-design-accent {
	--sn-line-d: var(--bd-line);
	--sn-bar-d: var(--bd-primary);
	--sn-hl-d: var(--bd-primary-dark);
}

.espt-block-sales-notification.is-design-accent .espt-sn-pop {
	padding-left: calc(var(--bd-pad, 14px) + 6px);
}

.espt-block-sales-notification.is-design-soft {
	--sn-bg-d: var(--bd-soft);
	--sn-line-d: var(--bd-soft-line);
	--sn-hl-d: var(--bd-primary-dark);
	--sn-media-d: color-mix(in srgb, var(--bd-primary) 12%, #fff);
}

.espt-block-sales-notification.is-design-pill {
	--sn-radius-d: 999px;
	--sn-line-d: transparent;
	--sn-hl-d: var(--bd-primary-dark);
}

/* Scoped to the default shape so an explicit "Square"/"Circle" still wins. */
.espt-block-sales-notification.is-design-pill.is-img-shape-rounded .espt-sn-media { border-radius: 50%; }
.espt-block-sales-notification.is-design-pill .espt-sn-pop { padding-right: calc(var(--bd-pad, 14px) + 10px); }
.espt-block-sales-notification.is-design-pill .espt-sn-prog { display: none; }

.espt-block-sales-notification.is-design-dark {
	--sn-bg-d: #1f2937;
	--sn-line-d: #374151;
	--sn-ink-d: #f9fafb;
	--sn-hl-d: #ffffff;
	--sn-meta-d: #9ca3af;
	--sn-ver-d: #34d399;
	--sn-close-d: #9ca3af;
	--sn-close-hover-d: #f3f4f6;
	--sn-media-d: #374151;
	--sn-prog-d: #34d399;
}

.espt-block-sales-notification.is-design-gradient {
	--sn-line-d: transparent;
	--sn-ink-d: #ffffff;
	--sn-hl-d: #ffffff;
	--sn-meta-d: rgba(255, 255, 255, 0.86);
	--sn-ver-d: #a7f3d0;
	--sn-close-d: rgba(255, 255, 255, 0.75);
	--sn-close-hover-d: #ffffff;
	--sn-media-d: rgba(255, 255, 255, 0.18);
	--sn-prog-d: rgba(255, 255, 255, 0.9);
}

.espt-block-sales-notification.is-design-gradient .espt-sn-pop {
	background: var(--pop-bg, linear-gradient(135deg, var(--bd-primary) 0%, var(--bd-primary-dark) 55%, var(--bd-deep) 100%));
}

.espt-block-sales-notification.is-design-glass {
	--sn-line-d: rgba(255, 255, 255, 0.6);
	--sn-media-d: rgba(255, 255, 255, 0.45);
}

.espt-block-sales-notification.is-design-glass .espt-sn-pop {
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	background: var(--pop-bg, rgba(255, 255, 255, 0.62));
	box-shadow: 0 10px 34px -12px rgba(15, 23, 42, 0.32);
}

.espt-block-sales-notification.is-design-neon {
	--sn-bg-d: #0b1020;
	--sn-line-d: color-mix(in srgb, var(--bd-primary) 55%, transparent);
	--sn-ink-d: #e2e8f0;
	--sn-hl-d: var(--bd-accent);
	--sn-meta-d: #94a3b8;
	--sn-ver-d: var(--bd-accent);
	--sn-close-d: #94a3b8;
	--sn-close-hover-d: #ffffff;
	--sn-media-d: #111a33;
	--sn-prog-d: var(--bd-accent);
}

.espt-block-sales-notification.is-design-neon .espt-sn-pop {
	box-shadow: 0 0 22px -2px color-mix(in srgb, var(--bd-primary) 45%, transparent),
		inset 0 0 14px color-mix(in srgb, var(--bd-primary) 16%, transparent);
}

.espt-block-sales-notification.is-design-neon .espt-sn-hl {
	text-shadow: 0 0 10px color-mix(in srgb, var(--bd-accent) 55%, transparent);
}

/* ----------------------------------------------------------- animations */

@keyframes espt-sn-ping {
	0% { opacity: 0.7; transform: scale(1); }
	70%, 100% { opacity: 0; transform: scale(2.6); }
}

@keyframes espt-sn-drain {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

@keyframes espt-sn-in-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes espt-sn-in-left {
	from { opacity: 0; transform: translate(calc(var(--sn-tx) - 130%), var(--sn-ty)); }
	to { opacity: 1; transform: translate(var(--sn-tx), var(--sn-ty)); }
}

@keyframes espt-sn-in-right {
	from { opacity: 0; transform: translate(calc(var(--sn-tx) + 130%), var(--sn-ty)); }
	to { opacity: 1; transform: translate(var(--sn-tx), var(--sn-ty)); }
}

@keyframes espt-sn-in-down {
	from { opacity: 0; transform: translate(var(--sn-tx), calc(var(--sn-ty) - 150%)); }
	to { opacity: 1; transform: translate(var(--sn-tx), var(--sn-ty)); }
}

@keyframes espt-sn-in-up {
	from { opacity: 0; transform: translate(var(--sn-tx), calc(var(--sn-ty) + 150%)); }
	to { opacity: 1; transform: translate(var(--sn-tx), var(--sn-ty)); }
}

@keyframes espt-sn-in-zoom {
	from { opacity: 0; transform: translate(var(--sn-tx), var(--sn-ty)) scale(0.62); }
	to { opacity: 1; transform: translate(var(--sn-tx), var(--sn-ty)) scale(1); }
}

@keyframes espt-sn-in-bounce {
	0% { opacity: 0; transform: translate(var(--sn-tx), calc(var(--sn-ty) + 50px)); }
	60% { opacity: 1; transform: translate(var(--sn-tx), calc(var(--sn-ty) - 10px)); }
	80% { transform: translate(var(--sn-tx), calc(var(--sn-ty) + 4px)); }
	100% { transform: translate(var(--sn-tx), var(--sn-ty)); }
}

@keyframes espt-sn-out {
	from { opacity: 1; }
	to { opacity: 0; transform: translate(var(--sn-tx), calc(var(--sn-ty) + 12px)); }
}

.espt-block-sales-notification .espt-sn-pop.is-show {
	animation: espt-sn-in-fade var(--sn-dur) ease both;
}

.espt-block-sales-notification.is-anim-none .espt-sn-pop.is-show {
	animation: none;
}

.espt-block-sales-notification.is-anim-zoom .espt-sn-pop.is-show { animation-name: espt-sn-in-zoom; }
.espt-block-sales-notification.is-anim-bounce .espt-sn-pop.is-show { animation-name: espt-sn-in-bounce; }

/* Slide arrives from the nearest screen edge. */
.espt-block-sales-notification.is-anim-slide.is-position-top-left .espt-sn-pop.is-show,
.espt-block-sales-notification.is-anim-slide.is-position-center-left .espt-sn-pop.is-show,
.espt-block-sales-notification.is-anim-slide.is-position-bottom-left .espt-sn-pop.is-show { animation-name: espt-sn-in-left; }
.espt-block-sales-notification.is-anim-slide.is-position-top-right .espt-sn-pop.is-show,
.espt-block-sales-notification.is-anim-slide.is-position-center-right .espt-sn-pop.is-show,
.espt-block-sales-notification.is-anim-slide.is-position-bottom-right .espt-sn-pop.is-show { animation-name: espt-sn-in-right; }
.espt-block-sales-notification.is-anim-slide.is-position-top-center .espt-sn-pop.is-show { animation-name: espt-sn-in-down; }
.espt-block-sales-notification.is-anim-slide.is-position-bottom-center .espt-sn-pop.is-show,
.espt-block-sales-notification.is-anim-slide.is-position-center .espt-sn-pop.is-show { animation-name: espt-sn-in-up; }
.espt-block-sales-notification.is-anim-slide.is-mode-inline .espt-sn-pop.is-show,
.espt-block-sales-notification.is-anim-slide .espt-sn.is-preview .espt-sn-pop.is-show { animation-name: espt-sn-in-left; }

.espt-block-sales-notification .espt-sn-pop.is-hide {
	animation: espt-sn-out 0.3s ease both;
}

.espt-block-sales-notification.is-speed-slow { --sn-dur: 0.9s; }
.espt-block-sales-notification.is-speed-fast { --sn-dur: 0.3s; }

/* --------------------------------------------------------- breakpoints */

@media (min-width: 768px) {
	.espt-block-sales-notification .espt-sn-pop {
		gap: 14px;
	}

	.espt-block-sales-notification.is-hide-mobile.is-mode-float .espt-sn:not(.is-preview):not(.is-done) {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-sales-notification .espt-sn-pop,
	.espt-block-sales-notification .espt-sn-pop.is-show,
	.espt-block-sales-notification .espt-sn-pop.is-hide,
	.espt-block-sales-notification .espt-sn-close,
	.espt-block-sales-notification .espt-sn-dot::after,
	.espt-block-sales-notification .espt-sn-pop.is-run .espt-sn-prog i {
		animation: none;
		transition: none;
	}

	.espt-block-sales-notification .espt-sn-pop:hover,
	.espt-block-sales-notification.bd-hover-lift .espt-sn-pop:hover,
	.espt-block-sales-notification.bd-hover-scale .espt-sn-pop:hover {
		transform: translate(var(--sn-tx), var(--sn-ty));
	}

	.espt-block-sales-notification .espt-sn-close:hover,
	.espt-block-sales-notification .espt-sn-close:focus-visible {
		transform: none;
	}
}