/* WonderLab Migration Bonus — frontend banners (v1.0.4)
 * !important throughout to defeat Divi / theme specificity. */

:root {
	--wlmb-burgundy:      #851625;
	--wlmb-burgundy-dark: #5e0f1a;
	--wlmb-burgundy-soft: rgba(133, 22, 37, 0.10);
	--wlmb-ivory:         #FFFBF1;
	--wlmb-border:        #e7e2db;
	--wlmb-ink:           #1f2430;
	--wlmb-ink-soft:      #555;
	--wlmb-ink-muted:     #8a8a8a;
}

/* ===========================================================
 * Typography scoping for both banners + popup
 * ======================================================== */

.wlmb-banner,
.wlmb-banner *,
.wlmb-popup-overlay,
.wlmb-popup-overlay * {
	font-family: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	box-sizing: border-box !important;
}

/* Restore Font Awesome's own font-family on icon elements — the universal
 * brand-font rule above would otherwise force Geologica onto <i> tags and
 * the unicode FA glyphs would render as blank squares.
 *
 * Higher specificity (selector + attribute selector) beats `* !important`.
 * Works for both the plugin's enqueued copy and a theme-loaded copy
 * (Divi global option, etc.) — we just have to win the cascade. */
.wlmb-banner i.fa-solid,
.wlmb-popup-overlay i.fa-solid,
.wlmb-banner i.fas,
.wlmb-popup-overlay i.fas {
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
	font-weight: 900 !important;
}

.wlmb-banner i.fa-regular,
.wlmb-popup-overlay i.fa-regular,
.wlmb-banner i.far,
.wlmb-popup-overlay i.far {
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
	font-weight: 400 !important;
}

.wlmb-banner i.fa-brands,
.wlmb-popup-overlay i.fa-brands,
.wlmb-banner i.fab,
.wlmb-popup-overlay i.fab {
	font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
	font-weight: 400 !important;
}

/* ===========================================================
 * Floating banner — bottom-left card with icon-on-the-left
 * ======================================================== */

.wlmb-banner {
	position: fixed !important;
	left: 24px !important;
	bottom: 24px !important;
	width: 360px !important;
	max-width: calc(100vw - 48px) !important;
	background: var(--wlmb-ivory) !important;
	border: 1px solid var(--wlmb-border) !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 36px rgba(133, 22, 37, 0.14) !important;
	overflow: hidden !important;
	z-index: 9999 !important;
	color: var(--wlmb-ink-soft) !important;
}

@media (max-width: 480px) {
	.wlmb-banner {
		left: 12px !important;
		right: 12px !important;
		bottom: 12px !important;
		width: auto !important;
		max-width: none !important;
	}
}

.wlmb-banner::before {
	content: '' !important;
	display: block !important;
	height: 4px !important;
	background: var(--wlmb-burgundy) !important;
}

.wlmb-banner .wlmb-banner-inner {
	padding: 20px 22px 22px !important;
	position: relative !important;
}

.wlmb-banner .wlmb-banner-close {
	position: absolute !important;
	top: 8px !important;
	right: 10px !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--wlmb-ink-muted) !important;
	font-size: 22px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 6px 10px !important;
	border-radius: 4px !important;
	transition: background 0.15s, color 0.15s !important;
	z-index: 2 !important;
	pointer-events: auto !important;
}
.wlmb-banner .wlmb-banner-close:hover {
	background: rgba(0,0,0,0.05) !important;
	color: var(--wlmb-burgundy) !important;
}

.wlmb-banner .wlmb-banner-header {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 36px 10px 0 !important;
}

.wlmb-banner .wlmb-banner-visual {
	flex: 0 0 44px !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background: var(--wlmb-burgundy-soft) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
}

.wlmb-banner .wlmb-banner-visual i {
	color: var(--wlmb-burgundy) !important;
	font-size: 20px !important;
	line-height: 1 !important;
}

.wlmb-banner .wlmb-banner-visual img {
	width: 44px !important;
	height: 44px !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 50% !important;
}

.wlmb-banner .wlmb-banner-title {
	font-weight: 700 !important;
	font-size: 18px !important;
	color: var(--wlmb-burgundy) !important;
	margin: 0 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.3px !important;
	flex: 1 1 auto !important;
}

.wlmb-banner .wlmb-banner-body {
	font-size: 14px !important;
	color: var(--wlmb-ink-soft) !important;
	line-height: 1.6 !important;
	margin: 0 0 18px 0 !important;
}

/* TinyMCE wraps paragraphs in <p> — keep tight spacing inside the card. */
.wlmb-banner .wlmb-banner-body p {
	margin: 0 0 10px 0 !important;
}
.wlmb-banner .wlmb-banner-body p:last-child {
	margin-bottom: 0 !important;
}
.wlmb-banner .wlmb-banner-body ul,
.wlmb-banner .wlmb-banner-body ol {
	margin: 0 0 10px 18px !important;
	padding: 0 !important;
}

.wlmb-banner .wlmb-banner-body strong {
	color: var(--wlmb-burgundy) !important;
	font-weight: 700 !important;
}

.wlmb-banner .wlmb-banner-cta {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	background: var(--wlmb-burgundy) !important;
	color: #fff !important;
	text-decoration: none !important;
	padding: 13px 20px !important;
	border-radius: 4px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	letter-spacing: 0.3px !important;
	transition: background 0.15s !important;
	border: 0 !important;
	cursor: pointer !important;
}
.wlmb-banner .wlmb-banner-cta:hover,
.wlmb-banner .wlmb-banner-cta:focus {
	background: var(--wlmb-burgundy-dark) !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* ===========================================================
 * Login-page popup (modal)
 * ======================================================== */

.wlmb-popup-overlay {
	position: fixed !important;
	inset: 0 !important;
	top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
	background: rgba(31, 36, 48, 0.55) !important;
	z-index: 99999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity 0.2s ease !important;
}

.wlmb-popup-overlay.is-open {
	opacity: 1 !important;
	pointer-events: auto !important;
}

.wlmb-popup-dialog {
	position: relative !important;
	background: var(--wlmb-ivory) !important;
	width: 100% !important;
	max-width: 460px !important;
	border-radius: 16px !important;
	box-shadow: 0 24px 60px rgba(0,0,0,0.25) !important;
	padding: 36px 32px 32px !important;
	text-align: center !important;
	transform: translateY(12px) scale(0.98) !important;
	transition: transform 0.25s ease !important;
	overflow: hidden !important;
}

.wlmb-popup-overlay.is-open .wlmb-popup-dialog {
	transform: translateY(0) scale(1) !important;
}

.wlmb-popup-dialog::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 4px !important;
	background: var(--wlmb-burgundy) !important;
}

.wlmb-popup-close {
	position: absolute !important;
	top: 12px !important;
	right: 14px !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--wlmb-ink-muted) !important;
	font-size: 26px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 6px 10px !important;
	border-radius: 6px !important;
	transition: background 0.15s, color 0.15s !important;
	z-index: 2 !important;
	pointer-events: auto !important;
}
.wlmb-popup-close:hover {
	background: rgba(0,0,0,0.06) !important;
	color: var(--wlmb-burgundy) !important;
}

.wlmb-popup-visual {
	width: 72px !important;
	height: 72px !important;
	margin: 4px auto 18px !important;
	border-radius: 50% !important;
	background: var(--wlmb-burgundy-soft) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
}

.wlmb-popup-visual i {
	color: var(--wlmb-burgundy) !important;
	font-size: 30px !important;
	line-height: 1 !important;
}

.wlmb-popup-visual img {
	width: 72px !important;
	height: 72px !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 50% !important;
}

.wlmb-popup-title {
	font-weight: 700 !important;
	font-size: 24px !important;
	color: var(--wlmb-burgundy) !important;
	letter-spacing: -0.4px !important;
	line-height: 1.25 !important;
	margin: 0 0 10px !important;
}

.wlmb-popup-body {
	font-size: 15px !important;
	color: var(--wlmb-ink-soft) !important;
	line-height: 1.6 !important;
	margin: 0 auto 22px !important;
	max-width: 380px !important;
}

/* TinyMCE wraps paragraphs in <p> — keep them tight inside the modal. */
.wlmb-popup-overlay .wlmb-popup-body p {
	margin: 0 0 10px 0 !important;
}
.wlmb-popup-overlay .wlmb-popup-body p:last-child {
	margin-bottom: 0 !important;
}
.wlmb-popup-overlay .wlmb-popup-body ul,
.wlmb-popup-overlay .wlmb-popup-body ol {
	margin: 0 0 10px 18px !important;
	padding: 0 !important;
	text-align: left !important;
}

.wlmb-popup-body strong {
	color: var(--wlmb-burgundy) !important;
	font-weight: 700 !important;
}

.wlmb-popup-cta {
	display: inline-block !important;
	background: var(--wlmb-burgundy) !important;
	color: #fff !important;
	text-decoration: none !important;
	padding: 13px 28px !important;
	border-radius: 4px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	letter-spacing: 0.3px !important;
	transition: background 0.15s !important;
	border: 0 !important;
	cursor: pointer !important;
	min-width: 200px !important;
}
.wlmb-popup-cta:hover,
.wlmb-popup-cta:focus {
	background: var(--wlmb-burgundy-dark) !important;
	color: #fff !important;
	text-decoration: none !important;
}

@media (max-width: 480px) {
	.wlmb-popup-dialog {
		padding: 32px 22px 26px !important;
	}
	.wlmb-popup-title { font-size: 21px !important; }
	.wlmb-popup-body  { font-size: 14px !important; }
}

/* Prevent body scroll when popup is open */
body.wlmb-popup-open {
	overflow: hidden !important;
}