/* ProofPulse – notification styles */

.pp-container {
	position: fixed;
	z-index: 99990;
	width: min(360px, calc(100vw - 32px));
	pointer-events: none;
}
.pp-csize-sm { width: min(300px, calc(100vw - 32px)); }
.pp-csize-lg { width: min(420px, calc(100vw - 32px)); }

.pp-pos-bottom-left  { left: 20px;  bottom: 20px; }
.pp-pos-bottom-right { right: 20px; bottom: 20px; }
.pp-pos-top-left     { left: 20px;  top: 20px; }
.pp-pos-top-right    { right: 20px; top: 20px; }
.pp-pos-top-center    { left: 50%; top: 20px; transform: translateX(-50%); }
.pp-pos-bottom-center { left: 50%; bottom: 20px; transform: translateX(-50%); }
.pp-pos-center        { left: 50%; top: 50%; transform: translate(-50%, -50%); }

.admin-bar .pp-pos-top-left,
.admin-bar .pp-pos-top-center,
.admin-bar .pp-pos-top-right { top: 52px; }

@media (max-width: 640px) {
	.pp-container {
		left: 12px;
		right: 12px;
		width: auto;
		transform: none;
	}
	.pp-container.pp-mpos-bottom { top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* Base card ---------------------------------------------------------- */

.pp-notice {
	--pp-accent: #7c6cf2;
	--pp-bg: #ffffff;
	--pp-text: #1f2033;
	--pp-radius: 16px;
	--pp-shadow: 0 12px 32px -10px rgba(31, 32, 51, 0.28), 0 2px 6px rgba(31, 32, 51, 0.06);
	--pp-shift: 14px;

	position: relative;
	box-sizing: border-box;
	pointer-events: auto;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--pp-text);
	background: var(--pp-bg);
	border-radius: var(--pp-radius);
	box-shadow: var(--pp-shadow);
	opacity: 0;
	transform: translateY(var(--pp-shift));
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pp-notice *,
.pp-notice *::before,
.pp-notice *::after { box-sizing: border-box; }

.pp-pos-top-left .pp-notice,
.pp-pos-top-center .pp-notice,
.pp-pos-top-right .pp-notice { --pp-shift: -14px; }
@media (max-width: 640px) {
	.pp-mpos-bottom .pp-notice { --pp-shift: 14px; }
}

.pp-notice.pp-anim-fade { transform: none; }
.pp-notice.is-visible { opacity: 1; transform: none; }

.pp-notice.pp-no-shadow {
	box-shadow: none;
	border: 1px solid color-mix(in srgb, var(--pp-text) 12%, transparent);
}

.pp-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 40px 12px 12px;
	color: inherit;
	text-decoration: none;
	border-radius: inherit;
}
a.pp-inner:focus-visible {
	outline: 2px solid var(--pp-accent);
	outline-offset: 2px;
}

.pp-media {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: min(12px, var(--pp-radius));
	background: color-mix(in srgb, var(--pp-accent) 12%, var(--pp-bg));
	color: var(--pp-accent);
}
.pp-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}
.pp-media .pp-ico { width: 26px; height: 26px; }

.pp-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.pp-text {
	color: color-mix(in srgb, var(--pp-text) 72%, transparent);
}
.pp-name {
	font-weight: 700;
	color: var(--pp-text);
}
.pp-product {
	display: block;
	overflow: hidden;
	font-weight: 600;
	color: var(--pp-text);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.pp-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	font-size: 12px;
	color: color-mix(in srgb, var(--pp-text) 58%, transparent);
}
.pp-badge,
.pp-city {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.pp-badge { color: var(--pp-accent); font-weight: 600; }
.pp-badge .pp-ico,
.pp-city .pp-ico { width: 14px; height: 14px; }

.pp-close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--pp-text);
	opacity: 0.45;
	cursor: pointer;
	box-shadow: none;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}
.pp-close .pp-ico { width: 14px; height: 14px; }
.pp-close:hover,
.pp-close:focus-visible {
	opacity: 1;
	background: color-mix(in srgb, var(--pp-text) 8%, transparent);
}
.pp-close:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; }

/* Icons ------------------------------------------------------------------
   Drawn with a CSS mask from an SVG data image, colored with currentColor.
   Theme rules for svg/path cannot reach a mask image, so icons look the
   same on every theme. */

.pp-ico {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--pp-ico) center / contain no-repeat;
	mask: var(--pp-ico) center / contain no-repeat;
}
.pp-ico-bag   { --pp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7Z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
.pp-ico-check { --pp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.4 1.8 3 .1.9 2.9 2.3 1.9-1 2.8 1 2.8-2.3 1.9-.9 2.9-3 .1L12 21l-2.4-1.8-3-.1-.9-2.9L3.4 14.3l1-2.8-1-2.8 2.3-1.9.9-2.9 3-.1L12 3Z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.2-4.4'/%3E%3C/svg%3E"); }
.pp-ico-pin   { --pp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.1 7-11.5A7 7 0 0 0 5 9.5C5 14.9 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.pp-ico-close { --pp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }

/* Sizes -------------------------------------------------------------- */

.pp-size-sm { font-size: 13px; }
.pp-size-sm .pp-inner { gap: 10px; padding: 10px 36px 10px 10px; }
.pp-size-sm .pp-media { flex-basis: 44px; width: 44px; height: 44px; }
.pp-size-sm .pp-media .pp-ico { width: 22px; height: 22px; }
.pp-size-sm .pp-meta { font-size: 11.5px; }

.pp-size-lg { font-size: 15px; }
.pp-size-lg .pp-inner { gap: 14px; padding: 14px 44px 14px 14px; }
.pp-size-lg .pp-media { flex-basis: 68px; width: 68px; height: 68px; }
.pp-size-lg .pp-media .pp-ico { width: 30px; height: 30px; }
.pp-size-lg .pp-meta { font-size: 12.5px; }

/* Template: Accent --------------------------------------------------- */

.pp-tpl-accent { overflow: hidden; }
.pp-tpl-accent::before {
	content: "";
	position: absolute;
	inset: 14px auto 14px 0;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: var(--pp-accent);
}
.pp-tpl-accent .pp-inner { padding-left: 18px; }
.pp-tpl-accent .pp-product { color: var(--pp-accent); }

/* Theme protection ---------------------------------------------------
   Themes often style every button, link, image and icon globally. These
   rules pin what matters to the notification only, and never touch
   anything outside .pp-notice.
   Their strength comes from the selector, not from !important:
   :is(#pp-protect, .pp-notice) matches every notification and counts as
   an ID, so it outranks ordinary theme rules. (No element needs that ID.)
   !important is used only where themes themselves force values with it.
   Custom CSS: use the same prefix, or !important. */


.pp-notice:is(#pp-protect, .pp-notice) {
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}
.pp-notice:is(#pp-protect, .pp-notice).pp-size-sm { font-size: 13px; }
.pp-notice:is(#pp-protect, .pp-notice).pp-size-lg { font-size: 15px; }

.pp-notice:is(#pp-protect, .pp-notice) *,
.pp-notice:is(#pp-protect, .pp-notice) *::before,
.pp-notice:is(#pp-protect, .pp-notice) *::after {
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	line-height: inherit;
	font-family: inherit;
}
.pp-notice:is(#pp-protect, .pp-notice) span,
.pp-notice:is(#pp-protect, .pp-notice) strong,
.pp-notice:is(#pp-protect, .pp-notice) a {
	font-size: inherit;
}

/* Link wrapper */
.pp-notice:is(#pp-protect, .pp-notice) .pp-inner,
.pp-notice:is(#pp-protect, .pp-notice) .pp-inner:hover,
.pp-notice:is(#pp-protect, .pp-notice) .pp-inner:focus,
.pp-notice:is(#pp-protect, .pp-notice) .pp-inner:visited {
	color: inherit;
	background: transparent;
	border: 0;
	box-shadow: none;
	text-decoration: none;
}

/* Text */
.pp-notice:is(#pp-protect, .pp-notice) .pp-text { color: color-mix(in srgb, var(--pp-text) 72%, transparent); }
.pp-notice:is(#pp-protect, .pp-notice) .pp-name { color: var(--pp-text); font-weight: 700; }
.pp-notice:is(#pp-protect, .pp-notice) .pp-product { color: var(--pp-text); font-weight: 600; }
.pp-notice:is(#pp-protect, .pp-notice).pp-tpl-accent .pp-product { color: var(--pp-accent); }
.pp-notice:is(#pp-protect, .pp-notice) .pp-meta { font-size: 12px; color: color-mix(in srgb, var(--pp-text) 58%, transparent); }
.pp-notice:is(#pp-protect, .pp-notice).pp-size-sm .pp-meta { font-size: 11.5px; }
.pp-notice:is(#pp-protect, .pp-notice).pp-size-lg .pp-meta { font-size: 12.5px; }
.pp-notice:is(#pp-protect, .pp-notice).pp-tpl-pill .pp-meta { font-size: 11.5px; }
.pp-notice:is(#pp-protect, .pp-notice) .pp-badge { color: var(--pp-accent); font-weight: 600; }

/* Product image */
.pp-notice:is(#pp-protect, .pp-notice) .pp-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

/* Spans inside the notification take their color from the notification,
   never from theme rules such as "a span" (the notification is a link).
   The specific rules below are stronger and still set their own colors. */
.pp-notice:is(#pp-protect, .pp-notice) span {
	color: inherit;
}
.pp-notice:is(#pp-protect, .pp-notice) .pp-media {
	color: var(--pp-accent);
}

/* Icons (mask-based spans; pin the box, the mask itself is unreachable) */
.pp-notice:is(#pp-protect, .pp-notice) .pp-ico {
	display: inline-block;
	color: inherit;
	box-sizing: content-box;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: currentColor;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	-webkit-mask: var(--pp-ico) center / contain no-repeat;
	mask: var(--pp-ico) center / contain no-repeat;
}
.pp-notice:is(#pp-protect, .pp-notice) .pp-media .pp-ico { width: 26px; height: 26px; }
.pp-notice:is(#pp-protect, .pp-notice).pp-size-sm .pp-media .pp-ico { width: 22px; height: 22px; }
.pp-notice:is(#pp-protect, .pp-notice).pp-size-lg .pp-media .pp-ico { width: 30px; height: 30px; }
.pp-notice:is(#pp-protect, .pp-notice) .pp-badge .pp-ico,
.pp-notice:is(#pp-protect, .pp-notice) .pp-city .pp-ico,
.pp-notice:is(#pp-protect, .pp-notice) .pp-close .pp-ico { width: 14px; height: 14px; }

/* Close button */
.pp-notice:is(#pp-protect, .pp-notice) .pp-close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	min-width: 0;
	min-height: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* !important only here: some themes force button colors with !important. */
	background: transparent !important;
	color: var(--pp-text) !important;
	opacity: 0.45;
	box-shadow: none;
	font-size: 0;
	line-height: 0;
	transform: none;
	cursor: pointer;
}
.pp-notice:is(#pp-protect, .pp-notice) .pp-close:hover,
.pp-notice:is(#pp-protect, .pp-notice) .pp-close:focus-visible {
	opacity: 1;
	background: color-mix(in srgb, var(--pp-text) 8%, transparent) !important;
	color: var(--pp-text) !important;
}
.pp-notice:is(#pp-protect, .pp-notice) .pp-close .pp-ico { width: 14px; height: 14px; }
.pp-notice:is(#pp-protect, .pp-notice).pp-tpl-pill .pp-close {
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

/* Motion while visible ---------------------------------------------- */
/* Uses the individual "translate"/"rotate" properties, so it never fights
   with the entrance transition, which animates "transform". */

.pp-motion-float.is-visible {
	animation: pp-float 4.5s ease-in-out 0.8s infinite;
}
@keyframes pp-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -4px; }
}

/* Any motion stops while the visitor points at or focuses the notification.
   The strong selector outranks the motion rules (also from .pp-notice:is(#pp-protect, .pp-notice)ro), which use
   the animation shorthand and would otherwise reset the play state. */
.pp-notice:is(#pp-protect, .pp-notice):hover,
.pp-notice:is(#pp-protect, .pp-notice):focus-within,
.pp-notice:is(#pp-protect, .pp-notice):hover *,
.pp-notice:is(#pp-protect, .pp-notice):focus-within *,
.pp-notice:is(#pp-protect, .pp-notice):hover::after,
.pp-notice:is(#pp-protect, .pp-notice):focus-within::after {
	animation-play-state: paused;
}

/* Motion preference -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.pp-notice,
	.pp-notice.pp-anim-slide {
		transform: none;
		transition: opacity 0.2s linear;
	}
	.pp-notice:is(#pp-protect, .pp-notice),
	.pp-notice:is(#pp-protect, .pp-notice) *,
	.pp-notice:is(#pp-protect, .pp-notice)::after {
		animation: none;
	}
}