.wppn-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.wppn-modal-overlay.wppn-open {
	opacity: 1;
	pointer-events: auto;
}

.wppn-modal {
	background: #fff;
	border-radius: 12px;
	max-width: 360px;
	width: 90%;
	padding: 24px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
	text-align: center;
	transform: translateY(8px);
	transition: transform 0.2s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wppn-modal-overlay.wppn-open .wppn-modal {
	transform: translateY(0);
}

.wppn-modal-logo {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	object-fit: cover;
	margin: 0 auto 14px;
	display: block;
}

.wppn-modal-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 6px;
	color: #1a1a1a;
}

.wppn-modal-body {
	font-size: 14px;
	color: #555;
	margin: 0 0 20px;
	line-height: 1.4;
}

.wppn-modal-actions {
	display: flex;
	gap: 10px;
}

.wppn-modal-actions button {
	flex: 1;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	border: 1px solid #d5d5d5;
}

.wppn-modal-later {
	background: #fff;
	color: #555;
}

.wppn-modal-allow {
	background: #2563eb;
	color: #fff;
	border-color: #2563eb;
}

.wppn-modal-allow:hover {
	background: #1d4ed8;
}

.wppn-modal-later:hover {
	background: #f5f5f5;
}

.wppn-bell-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #2563eb;
	color: #fff;
	border: none;
	font-size: 22px;
	line-height: 52px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	z-index: 999998;
	padding: 0;
}

.wppn-bell-btn:hover {
	background: #1d4ed8;
}

.wppn-bell-btn[data-state="denied"] {
	background: #9ca3af;
}

.wppn-bell-btn[data-state="denied"]:hover {
	background: #6b7280;
}

/* Subscribed (permission already granted) gets its own color + a small
   checkmark badge, so it's visually distinct from "default" (not yet
   subscribed) instead of both showing the exact same blue bell. */
.wppn-bell-btn[data-state="granted"] {
	background: #16a34a;
}

.wppn-bell-btn[data-state="granted"]:hover {
	background: #15803d;
}

.wppn-bell-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	color: #16a34a;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	font-weight: 700;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.wppn-bell-tip {
	/* Every layout-affecting property below is !important. This span is
	   injected directly into the page's own DOM (inside whatever button/
	   header markup the theme wraps it in), so it's exposed to the site's
	   theme and page-builder CSS — many of which set broad, high-
	   specificity typography resets like "span { line-height: 1.8 }" or
	   "*, *::before { box-sizing: content-box }". Before this hardening,
	   an inherited line-height from exactly that kind of host-page rule
	   is what stretched "You're subscribed" across a tall box with huge
	   gaps between words instead of a normal compact one-line tooltip —
	   the same failure mode the line-height fix below already targets,
	   just arriving from the theme instead of from .wppn-bell-btn. */
	display: block !important;
	position: absolute !important;
	bottom: 62px !important;
	right: 0 !important;
	background: #1a1a1a !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	/* Explicit line-height is the fix: without one, this span inherits
	   .wppn-bell-btn's line-height (52/40/64px, set there to vertically
	   center the bell glyph in a round button) — that's what was
	   stretching "You're subscribed" across a tall box with huge gaps
	   between words instead of a normal single-line tooltip. */
	line-height: 1.4 !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	text-align: left !important;
	/* Wide enough that short messages ("You're subscribed") always stay
	   on one line, but capped relative to the viewport so longer
	   messages (like the "blocked" tip) wrap tidily instead of running
	   off the edge of a narrow phone screen. */
	max-width: min(240px, calc(100vw - 24px)) !important;
	/* Belt-and-braces alongside max-width: without an explicit width,
	   this absolutely-positioned span (only "right" is set, not "left")
	   is supposed to shrink-to-fit its content by default — but a theme
	   rule as blunt as "span { width: 100% }" can still override that on
	   some sites. width: max-content pins it to its actual text width
	   (still capped by max-width above for the long "blocked" message),
	   so it can't be stretched wide/full-width by an outside rule. */
	width: max-content !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 9px 14px !important;
	border-radius: 8px !important;
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.wppn-bell-btn.wppn-tip-open .wppn-bell-tip {
	opacity: 1;
	transform: translateY(0);
}

/* --- Bell size variants (medium = unchanged default, 52px) --- */
.wppn-bell-btn.wppn-bell-size-small {
	width: 40px;
	height: 40px;
	font-size: 17px;
	line-height: 40px;
}

.wppn-bell-btn.wppn-bell-size-large {
	width: 64px;
	height: 64px;
	font-size: 28px;
	line-height: 64px;
}

/* --- Bell position variants (bottom-right = unchanged default) --- */
.wppn-bell-btn.wppn-bell-pos-top-left {
	top: 20px; bottom: auto; left: 20px; right: auto;
}
.wppn-bell-btn.wppn-bell-pos-top-center {
	top: 20px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
}
.wppn-bell-btn.wppn-bell-pos-top-right {
	top: 20px; bottom: auto; left: auto; right: 20px;
}
.wppn-bell-btn.wppn-bell-pos-middle-left {
	top: 50%; bottom: auto; left: 20px; right: auto; transform: translateY(-50%);
}
.wppn-bell-btn.wppn-bell-pos-middle-right {
	top: 50%; bottom: auto; left: auto; right: 20px; transform: translateY(-50%);
}
.wppn-bell-btn.wppn-bell-pos-bottom-left {
	bottom: 20px; top: auto; left: 20px; right: auto;
}
.wppn-bell-btn.wppn-bell-pos-bottom-center {
	bottom: 20px; top: auto; left: 50%; right: auto; transform: translateX(-50%);
}
/* bottom-right needs no override — it's the base .wppn-bell-btn rule */

/* Tooltip flips to below the bell when the bell sits in the top half. */
.wppn-bell-pos-top-left .wppn-bell-tip,
.wppn-bell-pos-top-center .wppn-bell-tip,
.wppn-bell-pos-top-right .wppn-bell-tip {
	bottom: auto;
	top: 62px;
}

/* The tooltip was always anchored with right:0 (expanding leftward),
   which is correct for a bell on the right side of the screen but runs
   the text off the left edge of the viewport — unreadable — when the
   bell itself sits on the left. Flip the anchor to expand rightward
   instead for every left-side position. */
.wppn-bell-pos-top-left .wppn-bell-tip,
.wppn-bell-pos-middle-left .wppn-bell-tip,
.wppn-bell-pos-bottom-left .wppn-bell-tip {
	right: auto;
	left: 0;
}

/* Safety net for narrow mobile screens: even correctly-anchored tips can
   hit a viewport edge on a small phone. Let long messages wrap instead
   of running off-screen unreadable. */
.wppn-bell-tip {
	max-width: min(70vw, 260px);
	white-space: normal;
}

/* --- Toast (used for "connecting…" / permission-outcome feedback) --- */
.wppn-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(12px);
	max-width: min(90vw, 420px);
	background: #1a1a1a;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	padding: 12px 18px;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 1000000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wppn-toast.wppn-open {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

/* --- Modal size variants (medium = unchanged default, 360px) --- */
.wppn-modal-size-small .wppn-modal {
	max-width: 280px;
	padding: 18px;
}
.wppn-modal-size-large .wppn-modal {
	max-width: 440px;
	padding: 30px;
}

/* --- Modal position variants (center = unchanged default) ---
   Corner/edge positions keep the same dimmed backdrop, just move where
   the card sits within it — a small, safe change from the existing
   centered design, not a different interaction model. */
.wppn-pos-top-left { align-items: flex-start; justify-content: flex-start; }
.wppn-pos-top-right { align-items: flex-start; justify-content: flex-end; }
.wppn-pos-bottom-left { align-items: flex-end; justify-content: flex-start; }
.wppn-pos-bottom-center { align-items: flex-end; justify-content: center; }
.wppn-pos-bottom-right { align-items: flex-end; justify-content: flex-end; }
.wppn-pos-middle-left { align-items: center; justify-content: flex-start; }
.wppn-pos-middle-right { align-items: center; justify-content: flex-end; }

.wppn-pos-top-left .wppn-modal,
.wppn-pos-top-right .wppn-modal,
.wppn-pos-bottom-left .wppn-modal,
.wppn-pos-bottom-center .wppn-modal,
.wppn-pos-bottom-right .wppn-modal,
.wppn-pos-middle-left .wppn-modal,
.wppn-pos-middle-right .wppn-modal {
	margin: 24px;
}

/* "Top Center" doubles as the header-style banner some sites use: full
   width, flush against the top, no dimmed backdrop, slides down instead
   of fading in. Everything else about it (logo, text, buttons, Later/
   Allow behavior) is identical to the standard popup. */
.wppn-pos-top-center {
	background: transparent;
	align-items: flex-start;
	justify-content: center;
}
.wppn-pos-top-center .wppn-modal {
	max-width: 100%;
	width: 100%;
	border-radius: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	text-align: left;
	transform: translateY(-100%);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.wppn-pos-top-center.wppn-open .wppn-modal {
	transform: translateY(0);
}
.wppn-pos-top-center .wppn-modal-logo {
	margin: 0;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
}
.wppn-pos-top-center .wppn-modal-title,
.wppn-pos-top-center .wppn-modal-body {
	margin: 0;
}
.wppn-pos-top-center .wppn-modal-body {
	flex: 1;
}
.wppn-pos-top-center .wppn-modal-actions {
	flex-shrink: 0;
	width: auto;
}
.wppn-pos-top-center .wppn-modal-actions button {
	flex: none;
	padding: 8px 14px;
}

/* --- Thank-you prompt: separate from the soft-ask modal, always
   centered, always 2/3 of the viewport width (capped so it doesn't get
   huge on large monitors), closed with an X rather than a decision. --- */
.wppn-thankyou-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.wppn-thankyou-overlay.wppn-open {
	opacity: 1;
	pointer-events: auto;
}

.wppn-thankyou-card {
	position: relative;
	background: #fff;
	border-radius: 12px;
	width: 44vw;
	max-width: 380px;
	padding: 24px 22px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
	text-align: center;
	transform: translateY(8px);
	transition: transform 0.2s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wppn-thankyou-overlay.wppn-open .wppn-thankyou-card {
	transform: translateY(0);
}

.wppn-thankyou-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: #888;
	cursor: pointer;
	padding: 6px;
}

.wppn-thankyou-close:hover {
	color: #333;
}

.wppn-thankyou-logo {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	object-fit: cover;
	margin: 0 auto 14px;
	display: block;
}

.wppn-thankyou-title {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px;
	color: #1a1a1a;
}

.wppn-thankyou-body {
	font-size: 14px;
	color: #555;
	margin: 0;
	line-height: 1.5;
}

@media (max-width: 600px) {
	.wppn-thankyou-card {
		width: 82vw;
	}

	/* Corner/edge-positioned popups (including bell-anchored opens, which
	   always use one of these classes) keep a smaller margin on narrow
	   screens so the card doesn't crowd into the edge or overlap the bell
	   itself, and the card is allowed to use more of the available width
	   instead of staying pinned to its desktop max-width. */
	.wppn-pos-top-left .wppn-modal,
	.wppn-pos-top-right .wppn-modal,
	.wppn-pos-bottom-left .wppn-modal,
	.wppn-pos-bottom-right .wppn-modal,
	.wppn-pos-middle-left .wppn-modal,
	.wppn-pos-middle-right .wppn-modal {
		margin: 12px;
		width: calc(100% - 24px);
	}
}

/* The bell picture (SVG). It takes the button's text colour and is sized from the button's font size. */
.wppn-bell-btn .wppn-bell-svg {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: middle;
	margin-top: -3px;
	pointer-events: none;
}