/* ==========================================================================
   Adver Announcer — frontend styles
   ========================================================================== */

.adver-announcer {
	background: var(--adver-bg);
	color: var(--adver-text);
	font-family: var(--adver-ff);
	font-size: var(--adver-fs);
	font-weight: var(--adver-fw);
	font-style: var(--adver-fst);
	line-height: var(--adver-lh);
	letter-spacing: var(--adver-ls);
	text-transform: var(--adver-tt);
	width: 100%;
	box-sizing: border-box;
	z-index: 99990;
	overflow: hidden;
}

.adver-announcer * {
	box-sizing: border-box;
}

/* Fixed / sticky positioning */
.adver-pos-top.adver-fixed {
	position: fixed;
	top: 0;
	left: 0;
}
.adver-pos-bottom.adver-fixed,
.adver-pos-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
}
.adver-pos-top:not(.adver-fixed) {
	position: relative;
}
.adver-pos-inline {
	position: relative;
	border-radius: var(--adver-radius);
}

/* Inner wrapper */
.adver-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--adver-py) var(--adver-px);
	min-height: var(--adver-height);
	position: relative;
}

.adver-width-boxed .adver-inner {
	max-width: var(--adver-maxw);
	margin: 0 auto;
	border-radius: var(--adver-radius);
}

/* Viewport that clips slides */
.adver-viewport {
	flex: 1 1 auto;
	overflow: hidden;
	position: relative;
	min-height: 1.4em;
	display: flex;
	align-items: center;
	justify-content: var(--adver-align);
}

.adver-track {
	display: flex;
	align-items: center;
	width: 100%;
}

/* A single slide */
.adver-slide {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-content: var(--adver-align);
	width: 100%;
}

.adver-icon {
	color: var(--adver-icon);
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.adver-icon.dashicons {
	font-size: calc(var(--adver-fs) + 4px);
	width: auto;
	height: auto;
}
.adver-emoji {
	font-size: calc(var(--adver-fs) + 2px);
}

.adver-text strong,
.adver-text b { font-weight: 700; }

.adver-link {
	color: var(--adver-link);
	text-decoration: underline;
	font-weight: 700;
	white-space: nowrap;
}
.adver-link:hover { opacity: .85; }

/* Close & arrows */
.adver-close {
	background: transparent;
	border: 0;
	color: var(--adver-text);
	font-size: calc(var(--adver-fs) + 8px);
	line-height: 1;
	cursor: pointer;
	opacity: .7;
	padding: 0 4px;
	flex: 0 0 auto;
	transition: opacity .2s;
}
.adver-close:hover { opacity: 1; }

.adver-arrow {
	background: transparent;
	border: 0;
	color: var(--adver-text);
	cursor: pointer;
	opacity: .6;
	font-size: var(--adver-fs);
	padding: 0 6px;
	flex: 0 0 auto;
	transition: opacity .2s;
}
.adver-arrow:hover { opacity: 1; }

/* ==========================================================================
   Animation: SLIDE / FADE / SLIDE-UP / SLIDE-DOWN (one-by-one)
   JS stacks slides absolutely and toggles .is-active.
   ========================================================================== */
.adver-anim-slide .adver-track,
.adver-anim-fade .adver-track,
.adver-anim-slide-up .adver-track,
.adver-anim-slide-down .adver-track {
	display: block;
	position: relative;
	width: 100%;
}

.adver-anim-slide .adver-slide,
.adver-anim-fade .adver-slide,
.adver-anim-slide-up .adver-slide,
.adver-anim-slide-down .adver-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transition: transform var(--adver-trans) cubic-bezier(.4, 0, .2, 1),
				opacity var(--adver-trans) ease;
}

/* current slide stays in normal flow to give the track height */
.adver-anim-slide .adver-slide.is-active,
.adver-anim-fade .adver-slide.is-active,
.adver-anim-slide-up .adver-slide.is-active,
.adver-anim-slide-down .adver-slide.is-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

/* Slide (horizontal) */
.adver-anim-slide .adver-slide { transform: translateX(40px); }
.adver-anim-slide .adver-slide.is-leaving { transform: translateX(-40px); opacity: 0; }

/* Fade */
.adver-anim-fade .adver-slide { transform: none; }
.adver-anim-fade .adver-slide.is-leaving { opacity: 0; }

/* Slide up */
.adver-anim-slide-up .adver-slide { transform: translateY(100%); }
.adver-anim-slide-up .adver-slide.is-leaving { transform: translateY(-100%); opacity: 0; }

/* Slide down */
.adver-anim-slide-down .adver-slide { transform: translateY(-100%); }
.adver-anim-slide-down .adver-slide.is-leaving { transform: translateY(100%); opacity: 0; }

/* ==========================================================================
   Animation: MARQUEE (continuous scroll)
   ========================================================================== */
.adver-anim-marquee .adver-viewport { justify-content: flex-start; }
.adver-anim-marquee .adver-track {
	width: max-content;
	flex-wrap: nowrap;
	animation: adver-marquee var(--adver-marquee) linear infinite;
}
.adver-anim-marquee .adver-slide {
	width: auto;
	flex: 0 0 auto;
	padding-right: 48px;
}
.adver-anim-marquee.adver-paused .adver-track,
.adver-anim-marquee.adver-pause-hover:hover .adver-track {
	animation-play-state: paused;
}

@keyframes adver-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Dismissed state */
.adver-announcer.adver-dismissed {
	display: none !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.adver-anim-marquee .adver-track { animation: none; }
	.adver-slide { transition: opacity .2s ease !important; transform: none !important; }
}

/* Small screens */
@media (max-width: 600px) {
	.adver-announcer { font-size: calc(var(--adver-fs) - 1px); }
	.adver-inner { gap: 6px; padding: calc(var(--adver-py) * .85) 12px; }
}