/* OF Engage overlay — reads the theme's --of-* variables when present, falls back to brand values otherwise so this plugin doesn't depend on a specific theme. */
.oe-overlay {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(20, 23, 32, 0.6);
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	opacity: 0; visibility: hidden;
	transition: opacity 0.2s ease;
}
.oe-overlay[hidden] { display: flex; } /* still transition out before hidden attr lands */
.oe-overlay.is-visible { opacity: 1; visibility: visible; }

.oe-box {
	background: #fff;
	border-radius: var(--of-radius, 14px);
	max-width: 420px; width: 100%;
	padding: 30px 26px 26px;
	position: relative;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	transform: translateY(10px);
	transition: transform 0.2s ease;
}
.oe-overlay.is-visible .oe-box { transform: translateY(0); }

.oe-close {
	position: absolute; top: 10px; right: 12px;
	background: none; border: 0; font-size: 1.6rem; line-height: 1;
	cursor: pointer; color: var(--of-muted, #8a8f9c);
	padding: 6px;
}
.oe-close:hover { color: var(--of-ink, #1f2430); }

.oe-heading {
	margin: 0 0 14px; font-size: 1.3rem; color: var(--of-ink, #1f2430);
}

.oe-block { margin-bottom: 18px; }
.oe-block-title { font-weight: 700; margin: 0 0 4px; color: var(--of-ink, #1f2430); }
.oe-block-text { margin: 0 0 12px; font-size: 0.9rem; color: var(--of-muted, #8a8f9c); }
.oe-newsletter-form input[type="email"],
.oe-newsletter-form input[type="text"] { width: 100%; box-sizing: border-box; }

.oe-socials { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.oe-social-btn {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 11px 16px; border-radius: 999px;
	font-weight: 600; font-size: 0.9rem;
	text-decoration: none !important;
	color: #fff;
	transition: transform 0.12s ease, opacity 0.12s ease;
}
.oe-social-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.oe-social-instagram { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4); }
.oe-social-facebook { background: #1877f2; }
.oe-social-tiktok { background: #010101; }

@media (max-width: 480px) {
	.oe-box { padding: 24px 18px 20px; }
}