/* OC Exit Intent — small, elegant retention card, no images.
   --solid-white is Foxiz's own surface-color token: it already flips
   between light/dark automatically, so this card needs no dark-mode
   CSS of its own. */

.ocei-card {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	max-width: 300px;
	padding: 16px 34px 16px 18px;
	background: var(--solid-white, #fff);
	color: var(--body-fcolor, inherit);
	border-radius: var(--round-7, 7px);
	box-shadow: 0 12px 40px var(--shadow-12, rgba(0, 0, 0, 0.18));
	font-family: var(--meta-family, inherit);
	opacity: 0;
	transform: translateY(16px);
	transition: var(--effect, opacity 0.3s ease, transform 0.3s ease);
	pointer-events: none;
}

.ocei-card.ocei-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.ocei-close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 24px;
	height: 24px;
	background: none;
	border: none;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: 0.5;
}

.ocei-close:hover {
	opacity: 1;
}

.ocei-label {
	display: block;
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--g-color, #ff184e);
	margin-bottom: 6px;
}

.ocei-category {
	display: block;
	margin-bottom: 4px;
	font-size: 0.85em;
}

.ocei-title {
	margin: 0;
	font-family: var(--h3-family, inherit);
	font-size: 1em;
	line-height: 1.35;
}

.ocei-title a {
	color: inherit;
	text-decoration: none;
}

.ocei-title a:hover {
	color: var(--g-color, currentColor);
}

@media (max-width: 480px) {
	.ocei-card {
		left: 12px;
		right: 12px;
		max-width: none;
	}
}