.woofomo-popup-container {
	position: fixed;
	z-index: 99999;
	width: min(var(--woofomo-width, 360px), calc(100vw - 24px));
	pointer-events: none;
	--woofomo-bg: #ffffff;
	--woofomo-text: #172033;
	--woofomo-product-color: #172033;
	--woofomo-radius: 14px;
	--woofomo-width: 360px;
	--woofomo-image-size: 64px;
	--woofomo-top-offset: 24px;
	--woofomo-right-offset: 24px;
	--woofomo-bottom-offset: 24px;
	--woofomo-left-offset: 24px;
	--woofomo-border-width: 1px;
	--woofomo-border-color: #e2e8f0;
	--woofomo-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
	--woofomo-name-size: 14px;
	--woofomo-message-size: 14px;
	--woofomo-product-size: 14px;
	--woofomo-time-size: 12px;
	--woofomo-product-weight: 700;
	--woofomo-close-color: #475569;
	--woofomo-animation-duration: 240ms;
}

.woofomo-position-bottom-left {
	bottom: var(--woofomo-bottom-offset, 24px);
	left: var(--woofomo-left-offset, 24px);
}

.woofomo-position-bottom-right {
	right: var(--woofomo-right-offset, 24px);
	bottom: var(--woofomo-bottom-offset, 24px);
}

.woofomo-position-top-left {
	top: var(--woofomo-top-offset, 24px);
	left: var(--woofomo-left-offset, 24px);
}

.woofomo-position-top-right {
	top: var(--woofomo-top-offset, 24px);
	right: var(--woofomo-right-offset, 24px);
}

.woofomo-popup {
	position: relative;
	display: grid;
	grid-template-columns: var(--woofomo-image-size, 64px) 1fr;
	gap: 14px;
	align-items: center;
	width: min(var(--woofomo-width, 360px), 100%);
	min-height: 86px;
	padding: 12px 42px 12px 12px;
	background: var(--woofomo-bg, #ffffff);
	border: var(--woofomo-border-width, 1px) solid var(--woofomo-border-color, #e2e8f0);
	border-radius: var(--woofomo-radius, 14px);
	box-shadow: var(--woofomo-shadow, 0 18px 45px rgba(15, 23, 42, 0.16));
	color: var(--woofomo-text, #172033);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.35;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--woofomo-animation-duration, 240ms) ease, transform var(--woofomo-animation-duration, 240ms) ease;
	overflow: hidden;
	box-sizing: border-box;
}

.woofomo-popup--clickable {
	cursor: pointer;
}

.woofomo-popup__product--static {
	cursor: inherit;
	text-decoration: none;
}

.woofomo-popup.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.woofomo-animation-fade {
	transform: none;
}

.woofomo-animation-zoom {
	transform: scale(0.94);
}

.woofomo-animation-zoom.is-visible {
	transform: scale(1);
}

.woofomo-image-right {
	grid-template-columns: 1fr var(--woofomo-image-size, 64px);
	padding: 12px 42px 12px 14px;
}

.woofomo-image-right .woofomo-popup__image {
	order: 2;
}

.woofomo-image-right .woofomo-popup__content {
	order: 1;
}

.woofomo-image-top {
	grid-template-columns: 1fr;
	justify-items: start;
	padding-top: 14px;
}

.woofomo-image-hidden {
	grid-template-columns: 1fr;
	min-height: auto;
	padding-left: 16px;
}

.woofomo-image-hidden .woofomo-popup__image {
	display: none;
}

.woofomo-align-left {
	text-align: left;
}

.woofomo-align-center {
	text-align: center;
}

.woofomo-align-center.woofomo-image-top {
	justify-items: center;
}

.woofomo-align-right {
	text-align: right;
}

.woofomo-align-right.woofomo-image-top {
	justify-items: end;
}

.woofomo-popup__image {
	width: var(--woofomo-image-size, 64px);
	height: var(--woofomo-image-size, 64px);
	border-radius: 12px;
	object-fit: cover;
	background: #f4f6f8;
}

.woofomo-popup__content {
	min-width: 0;
}

.woofomo-popup__message {
	margin: 0;
	font-size: var(--woofomo-message-size, 14px);
	font-weight: 600;
	color: var(--woofomo-text, #172033);
}

.woofomo-popup__name {
	font-size: var(--woofomo-name-size, 14px);
}

.woofomo-popup__product {
	color: var(--woofomo-product-color, #172033);
	font-size: var(--woofomo-product-size, 14px);
	font-weight: var(--woofomo-product-weight, 700);
	text-decoration: none;
}

.woofomo-popup__product:hover {
	text-decoration: underline;
}

.woofomo-popup__time {
	display: block;
	margin-top: 4px;
	font-size: var(--woofomo-time-size, 12px);
	color: #64748b;
}

.woofomo-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: #f8fafc;
	border: 0;
	border-radius: 999px;
	color: var(--woofomo-close-color, #475569);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
}

.woofomo-popup__close:hover,
.woofomo-popup__close:focus {
	background: #e2e8f0;
	color: #0f172a;
}

@media (max-width: 600px) {
	.woofomo-popup-container {
		width: min(var(--woofomo-width, 360px), calc(100vw - 24px));
		max-width: calc(100vw - 24px);
	}

	.woofomo-position-bottom-left {
		bottom: max(12px, min(var(--woofomo-bottom-offset, 24px), 24px));
		left: max(12px, min(var(--woofomo-left-offset, 24px), 24px));
		right: auto;
	}

	.woofomo-position-bottom-right {
		right: max(12px, min(var(--woofomo-right-offset, 24px), 24px));
		bottom: max(12px, min(var(--woofomo-bottom-offset, 24px), 24px));
		left: auto;
	}

	.woofomo-position-top-left {
		top: max(12px, min(var(--woofomo-top-offset, 24px), 24px));
		left: max(12px, min(var(--woofomo-left-offset, 24px), 24px));
		right: auto;
	}

	.woofomo-position-top-right {
		top: max(12px, min(var(--woofomo-top-offset, 24px), 24px));
		right: max(12px, min(var(--woofomo-right-offset, 24px), 24px));
		left: auto;
	}

	body.woofomo-hide-mobile .woofomo-popup-container {
		display: none;
	}
}