/* Why Not Notification Bar — all front-end selectors are intentionally namespaced. */
.wnanb-shell,
.wnanb-shell * {
	box-sizing: border-box;
}

.wnanb-shell[hidden] {
	display: none !important;
}

.wnanb-shell {
	--wnanb-bg: #111111;
	--wnanb-text: #ffffff;
	--wnanb-button-bg: #ffffff;
	--wnanb-button-bg-hover: #e6e6e6;
	--wnanb-button-text: #111111;
	--wnanb-button-text-hover: #000000;
	--wnanb-overlay: #000000;
	--wnanb-overlay-opacity: 0;
	--wnanb-image: none;
	--wnanb-image-opacity: 1;
	--wnanb-blur: 0px;
	--wnanb-height: 58px;
	--wnanb-edge: 0px;
	--wnanb-text-size: 16px;
	--wnanb-text-align: center;
	--wnanb-button-radius: 999px;
	--wnanb-z: 999;
	position: relative;
	font-family: inherit;
	font-size: var(--wnanb-text-size);
	line-height: 1.35;
	z-index: var(--wnanb-z);
}

.wnanb-placement-top,
.wnanb-placement-bottom {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	z-index: var(--wnanb-z);
}

.wnanb-placement-top { top: var(--wnanb-edge); }
.wnanb-placement-bottom { bottom: var(--wnanb-edge); }
body.admin-bar .wnanb-placement-top { top: calc(var(--wnanb-edge) + 32px); }

/* Embedded shortcode mode: the notification participates in the theme/header
   builder's normal layout instead of being fixed to the viewport. This is the
   preferred mode for builders such as Divi when the navigation section itself
   controls sticky behavior. */
.wnanb-placement-embedded {
	position: relative !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	width: 100vw;
	max-width: none;
	margin: 0 calc(50% - 50vw);
	z-index: var(--wnanb-z);
}

.wnanb-placement-embedded .wnanb-bar {
	width: 100%;
	margin: 0;
}

/* Divi Text modules/rows add their own spacing around shortcode content.
   These classes are applied only to wrappers that actually contain an embedded
   notification, so the rest of the Theme Builder header remains untouched. */
html .wnanb-embed-host-module,
html .wnanb-embed-host-inner {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

html .wnanb-embed-host-module--dedicated,
html .wnanb-embed-host-inner--dedicated {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	line-height: 0 !important;
}

html .wnanb-embed-host-inner--dedicated > .wnanb-embed-empty-node {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
	min-height: 0 !important;
}

html .wnanb-embed-host-row--dedicated {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

html .wnanb-embed-host-row--dedicated > .wnanb-embed-host-column--dedicated,
html .wnanb-embed-host-column--dedicated {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}

/* Once Divi's dedicated shortcode row has been normalized, it already spans
   the viewport. Avoid the generic 100vw breakout so no builder width math can
   distort neighboring header rows. */
.wnanb-placement-embedded.wnanb-embed-in-dedicated-row {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.wnanb-bar {
	position: relative;
	isolation: isolate;
	min-height: var(--wnanb-height);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 52px 10px 24px;
	overflow: hidden;
	background: var(--wnanb-bg);
	color: var(--wnanb-text);
	box-shadow: 0 4px 18px rgba(0,0,0,.12);
}

.wnanb-placement-bottom .wnanb-bar {
	box-shadow: 0 -4px 18px rgba(0,0,0,.12);
}

.wnanb-background,
.wnanb-overlay,
.wnanb-effects {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.wnanb-background {
	z-index: -3;
	background-image: var(--wnanb-image);
	background-size: cover;
	background-position: center;
	opacity: var(--wnanb-image-opacity);
	filter: blur(var(--wnanb-blur));
	transform: scale(1.08);
}

.wnanb-overlay {
	z-index: -2;
	background: var(--wnanb-overlay);
	opacity: var(--wnanb-overlay-opacity);
}

.wnanb-effects {
	z-index: -1;
	overflow: hidden;
}

.wnanb-bar-content {
	position: relative;
	z-index: 2;
	width: min(100%, 1440px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: var(--wnanb-text-align);
}

.wnanb-message {
	color: var(--wnanb-text);
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	margin: 0;
	padding: 0;
}

/* Restricted WYSIWYG content. These selectors deliberately reset common
   theme typography so notification copy remains self-contained. */
.wnanb-message p {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}
.wnanb-message p + p { margin-top: .35em; }
.wnanb-message strong,
.wnanb-message b { color: inherit; font: inherit; font-weight: 700; }
.wnanb-message em,
.wnanb-message i { color: inherit; font: inherit; font-style: italic; }
.wnanb-message u { color: inherit; font: inherit; text-decoration: underline; }
.wnanb-message s,
.wnanb-message strike,
.wnanb-message del { color: inherit; font: inherit; text-decoration: line-through; }
.wnanb-message sup,
.wnanb-message sub { color: inherit; font-family: inherit; font-size: .75em; line-height: 0; }
.wnanb-message a { color: inherit; font: inherit; text-decoration: underline; }
.wnanb-message a:hover,
.wnanb-message a:focus-visible { color: inherit; text-decoration-thickness: 2px; }

.wnanb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 36px;
	padding: 8px 18px;
	border: 0;
	border-radius: var(--wnanb-button-radius);
	background: var(--wnanb-button-bg);
	color: var(--wnanb-button-text);
	font: inherit;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
	outline-offset: 3px;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.wnanb-button:hover,
.wnanb-button:focus-visible {
	background: var(--wnanb-button-bg-hover);
	color: var(--wnanb-button-text-hover);
	text-decoration: none;
	transform: translateY(-1px);
}

.wnanb-dismiss,
.wnanb-panel-close,
.wnanb-badge {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	cursor: pointer;
}

.wnanb-dismiss--icon {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wnanb-text);
	font-size: 26px;
	line-height: 28px;
	opacity: .75;
}
.wnanb-dismiss--icon:hover,
.wnanb-dismiss--icon:focus-visible { opacity: 1; }

.wnanb-spacer {
	width: 100%;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Sidebar + badge */
.wnanb-placement-sidebar {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: var(--wnanb-z);
}

.wnanb-badge {
	position: fixed;
	top: var(--wnanb-badge-position);
	transform: translateY(-50%);
	z-index: calc(var(--wnanb-z) + 2);
	pointer-events: auto;
	border: 0;
	background: var(--wnanb-badge-bg);
	color: var(--wnanb-badge-text);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.wnanb-side-right .wnanb-badge { right: var(--wnanb-edge); }
.wnanb-side-left .wnanb-badge { left: var(--wnanb-edge); }
.wnanb-badge-vertical .wnanb-badge { padding: 16px 10px; border-radius: var(--wnanb-badge-radius) 0 0 var(--wnanb-badge-radius); writing-mode: vertical-rl; }
.wnanb-side-left.wnanb-badge-vertical .wnanb-badge { border-radius: 0 var(--wnanb-badge-radius) var(--wnanb-badge-radius) 0; writing-mode: vertical-lr; }
.wnanb-badge-horizontal .wnanb-badge { padding: 11px 16px; border-radius: var(--wnanb-badge-radius); }
.wnanb-badge:hover,
.wnanb-badge:focus-visible { background: var(--wnanb-badge-bg-hover); color: var(--wnanb-badge-text-hover); }
.wnanb-badge-horizontal .wnanb-badge:hover,
.wnanb-badge-horizontal .wnanb-badge:focus-visible { transform: translateY(calc(-50% - 1px)); }

.wnanb-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	width: min(var(--wnanb-sidebar-width), calc(100vw - 36px));
	z-index: calc(var(--wnanb-z) + 1);
	pointer-events: auto;
	overflow-x: hidden;
	overflow-y: auto;
	isolation: isolate;
	background: var(--wnanb-bg);
	color: var(--wnanb-text);
	box-shadow: 0 0 32px rgba(0,0,0,.22);
	transition: transform .3s ease, visibility .3s ease;
	visibility: hidden;
}
.wnanb-side-right .wnanb-panel { right: 0; transform: translateX(102%); }
.wnanb-side-left .wnanb-panel { left: 0; transform: translateX(-102%); }
.wnanb-placement-sidebar.is-panel-open .wnanb-panel { transform: translateX(0); visibility: visible; }

.wnanb-panel-content {
	position: relative;
	z-index: 3;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
	padding: 72px 36px 44px;
	text-align: var(--wnanb-text-align);
}
.wnanb-panel .wnanb-message { font-size: var(--wnanb-text-size); }
.wnanb-panel-close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 5;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.12);
	color: var(--wnanb-text);
	font-size: 28px;
	line-height: 36px;
}
.wnanb-side-left .wnanb-panel-close { right: auto; left: 18px; }
.wnanb-dismiss--panel {
	border: 0;
	background: transparent;
	color: var(--wnanb-text);
	font-size: 12px;
	text-decoration: underline;
	opacity: .75;
	padding: 0;
}
.wnanb-dismiss--panel:hover,
.wnanb-dismiss--panel:focus-visible { opacity: 1; }

/* Effects */
.wnanb-particle {
	position: absolute;
	left: var(--x, 50%);
	top: -20px;
	opacity: var(--opacity, .65);
	font-size: var(--size, 12px);
	animation-delay: var(--delay, 0s);
	animation-duration: var(--duration, 8s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform, opacity;
}
.wnanb-effect-snow .wnanb-particle,
.wnanb-effect-hearts .wnanb-particle,
.wnanb-effect-leaves .wnanb-particle { animation-name: wnanb-fall; }
.wnanb-effect-rain .wnanb-particle {
	width: 1px;
	height: var(--size, 12px);
	background: rgba(255,255,255,.55);
	animation-name: wnanb-rain;
}
.wnanb-effect-sparkles .wnanb-particle {
	top: var(--y, 50%);
	animation-name: wnanb-sparkle;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.wnanb-effect-confetti .wnanb-particle {
	width: var(--size, 7px);
	height: calc(var(--size, 7px) * 1.7);
	background: hsl(var(--hue, 0) 80% 62%);
	animation-name: wnanb-confetti;
}
.wnanb-effect-hearts .wnanb-particle { color: rgba(255,130,160,.72); }
.wnanb-effect-snow .wnanb-particle { color: rgba(255,255,255,.8); }
.wnanb-effect-sparkles .wnanb-particle:nth-child(3n+1) { color: rgba(255,80,80,.75); }
.wnanb-effect-sparkles .wnanb-particle:nth-child(3n+2) { color: rgba(255,255,255,.9); }
.wnanb-effect-sparkles .wnanb-particle:nth-child(3n) { color: rgba(90,145,255,.8); }
.wnanb-effect-leaves .wnanb-particle { color: rgba(215,135,55,.7); }

/* Optional single-color effect modes for easier site branding.
 * !important is intentional here: the patriotic sparkle nth-child rules are
 * more specific, and some themes also style generic inline elements. These
 * declarations are scoped to the plugin shell and only affect particles. */
.wnanb-effect-color-white .wnanb-particle {
	color: rgba(255,255,255,.94) !important;
}
.wnanb-effect-color-black .wnanb-particle {
	color: rgba(0,0,0,.88) !important;
}
.wnanb-effect-color-white.wnanb-effect-rain .wnanb-particle,
.wnanb-effect-color-white.wnanb-effect-confetti .wnanb-particle {
	background: rgba(255,255,255,.94) !important;
	background-color: rgba(255,255,255,.94) !important;
}
.wnanb-effect-color-black.wnanb-effect-rain .wnanb-particle,
.wnanb-effect-color-black.wnanb-effect-confetti .wnanb-particle {
	background: rgba(0,0,0,.88) !important;
	background-color: rgba(0,0,0,.88) !important;
}

@keyframes wnanb-fall {
	0% { transform: translate3d(0,-15px,0) rotate(0deg); opacity: 0; }
	12% { opacity: var(--opacity,.65); }
	100% { transform: translate3d(var(--drift, 24px), calc(var(--travel, 120px) + 40px),0) rotate(var(--spin,360deg)); opacity: 0; }
}
@keyframes wnanb-rain {
	0% { transform: translate3d(0,-20px,0) rotate(12deg); opacity: 0; }
	12% { opacity: var(--opacity,.5); }
	100% { transform: translate3d(-18px, calc(var(--travel, 120px) + 50px),0) rotate(12deg); opacity: 0; }
}
@keyframes wnanb-sparkle {
	0% { transform: scale(.45) rotate(0deg); opacity: .15; }
	100% { transform: scale(1.15) rotate(45deg); opacity: var(--opacity,.85); }
}
@keyframes wnanb-confetti {
	0% { transform: translate3d(0,-20px,0) rotate(0deg); opacity: 0; }
	12% { opacity: var(--opacity,.65); }
	100% { transform: translate3d(var(--drift,20px), calc(var(--travel,120px) + 50px),0) rotate(var(--spin,540deg)); opacity: 0; }
}

@media (max-width: 782px) {
	body.admin-bar .wnanb-placement-top { top: calc(var(--wnanb-edge) + 46px); }
}

@media (max-width: 700px) {
	.wnanb-bar { padding: 10px 46px 10px 16px; }
	.wnanb-bar-content { flex-direction: column; gap: 8px; }
	.wnanb-button { min-height: 34px; padding: 7px 15px; }
	.wnanb-panel-content { padding: 68px 26px 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.wnanb-shell *,
	.wnanb-shell *::before,
	.wnanb-shell *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.wnanb-effects { display: none !important; }
}

/* Divi Theme Builder inline sticky stack (v1.0.12).
   Instead of repeatedly chasing Divi's nested sticky states, the notification
   becomes a real sticky element in document flow and the entire Theme Builder
   header becomes the second sticky item in the stack. Divi's nested sticky
   modules are neutralized while the notification is active, so they never try
   to slide underneath the notification or inject a 32px admin-bar offset. */
html.wnanb-divi-inline-stack .wnanb-shell.wnanb-placement-top.wnanb-inline-stack {
	position: sticky !important;
	margin-top: var(--wnanb-edge);
	margin-bottom: 0;
}

html.wnanb-divi-inline-stack .et-l--header,
html.wnanb-divi-inline-stack header.et-l--header {
	position: sticky !important;
	top: var(--wnanb-stack-top, 0px) !important;
	z-index: var(--wnanb-stack-header-z, 998) !important;
	transition-property: background-color, box-shadow, opacity !important;
}

/* Divi is free to add/remove its sticky classes for styling, but it no longer
   gets to reposition nested header modules. One parent sticky container owns
   the complete header position for the duration of the notification. */
html.wnanb-divi-inline-stack .et-l--header .et_pb_sticky_module,
html.wnanb-divi-inline-stack .et-l--header .et_pb_sticky,
html.wnanb-divi-inline-stack .et-l--header .et_pb_sticky--top,
html.wnanb-divi-inline-stack .et-l--header [class*="et_pb_sticky"] {
	position: relative !important;
	top: 0 !important;
	bottom: auto !important;
	transform: none !important;
	transition-property: background-color, box-shadow, opacity !important;
}

html.wnanb-divi-inline-stack .et-l--header .et_pb_sticky_placeholder,
html.wnanb-divi-inline-stack .et-l--header [class*="sticky_placeholder"] {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}