body #message-purchased[id] {
	left: 24px;
	bottom: 24px;
	width: 352px;
	min-width: 0;
	max-width: calc(100vw - 48px);
	font-family: var(--up-pismo);
}

body #message-purchased[id] .message-purchase-main {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 40px 12px 12px;
	background: var(--up-bila);
	border: 1px solid var(--up-cara);
	border-radius: var(--up-radius-karta);
	box-shadow: var(--up-stin-velky);
	color: var(--up-text) !important;
	overflow: hidden;
}

body #message-purchased[id]:not(:has(#notify-close)) .message-purchase-main {
	padding-right: 18px;
}

body #message-purchased[id] .wn-notification-image-wrapper {
	flex: none;
	box-sizing: border-box;
	width: 56px;
	max-width: none;
	height: 56px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--up-stitek);
	overflow: hidden;
}

body #message-purchased[id] img.wn-notification-image {
	width: 50px;
	height: 50px;
	max-width: none;
	max-height: none;
	object-fit: contain;
	border-radius: 0;
	mix-blend-mode: multiply;
	transform: none;
}

body #message-purchased[id] p.wn-notification-message-container {
	display: block;
	float: none;
	flex: 1 1 auto;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 13px;
	line-height: 18px;
	font-weight: 400;
	color: var(--up-text) !important;
}

body #message-purchased[id] p a,
body #message-purchased[id] p .wn-popup-product-title {
	display: block;
	margin: 0 0 2px;
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	color: var(--up-ink) !important;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body #message-purchased[id] p a:hover {
	text-decoration: underline;
	text-decoration-color: var(--up-podtrzeni);
	text-underline-offset: 3px;
}

body #message-purchased[id] p a:focus-visible {
	outline: 2px solid var(--up-ink);
	outline-offset: 2px;
}

body #message-purchased[id] p small {
	display: block;
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 16px;
	color: inherit !important;
}

body #message-purchased[id]:not(:has(.wn-popup-product-title-with-link, .wn-popup-product-title)) .wn-notification-image-wrapper {
	display: none;
}

body #message-purchased[id]:not(:has(.wn-popup-product-title-with-link, .wn-popup-product-title)) .message-purchase-main::before {
	content: "";
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: var(--up-uspech) url("../../img/notifikace/oko.svg") center / 24px 24px no-repeat;
}

body #message-purchased[id]:not(:has(.wn-popup-product-title-with-link, .wn-popup-product-title)) p.wn-notification-message-container {
	white-space: normal;
	text-wrap: balance;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--up-ink) !important;
}

body #message-purchased[id] #notify-close {
	top: 4px;
	right: 4px;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: var(--up-popisek);
	opacity: 1;
	transition: color .15s, background-color .15s;
}

body #message-purchased[id] #notify-close::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	color: inherit;
	-webkit-mask: url("../../img/notifikace/zavrit.svg") center / 16px 16px no-repeat;
	mask: url("../../img/notifikace/zavrit.svg") center / 16px 16px no-repeat;
}

body #message-purchased[id] #notify-close:hover {
	color: var(--up-ink);
	background: var(--up-stitek);
	opacity: 1;
}

body #message-purchased[id].fade-in {
	animation: up-notifikace-objevit .2s ease-out both;
}

body #message-purchased[id].fade-out {
	animation: up-notifikace-zmizet .2s ease-in both;
}

html.up-pohyb body #message-purchased[id].fade-in {
	animation: up-notifikace-vyjet .32s cubic-bezier(.2, .8, .2, 1) both;
}

html.up-pohyb body #message-purchased[id].fade-out {
	animation: up-notifikace-sjet .24s ease-in both;
}

@keyframes up-notifikace-objevit {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes up-notifikace-zmizet {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes up-notifikace-vyjet {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@keyframes up-notifikace-sjet {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateY(8px); }
}

@media (max-width: 767px) {
	body #message-purchased[id] {
		left: 12px !important;
		right: 12px !important;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
		width: auto;
		max-width: none;
	}

	body #message-purchased[id] .message-purchase-main {
		gap: 10px;
		padding: 10px 44px 10px 10px;
	}

	body #message-purchased[id]:not(:has(#notify-close)) .message-purchase-main {
		padding-right: 14px;
	}

	body #message-purchased[id] .wn-notification-image-wrapper {
		width: 44px;
		height: 44px;
		border-radius: 10px;
	}

	body #message-purchased[id] img.wn-notification-image {
		width: 40px;
		height: 40px;
	}

	body #message-purchased[id] p.wn-notification-message-container {
		width: auto;
		font-size: 12px;
		line-height: 16px;
	}

	body #message-purchased[id] p a,
	body #message-purchased[id] p .wn-popup-product-title {
		font-size: 14px;
		line-height: 18px;
	}

	body #message-purchased[id]:not(:has(.wn-popup-product-title-with-link, .wn-popup-product-title)) .message-purchase-main::before {
		width: 44px;
		height: 44px;
		border-radius: 10px;
		background-size: 20px 20px;
	}

	body #message-purchased[id]:not(:has(.wn-popup-product-title-with-link, .wn-popup-product-title)) p.wn-notification-message-container {
		font-size: 13px;
		line-height: 18px;
	}

	body #message-purchased[id] #notify-close {
		top: 0;
		right: 0;
		width: 44px;
		height: 44px;
		background: none;
	}
}