/**
 * Sticky Promo Bar - Common base CSS ( loads for every style ).
 *
 * Owns the shared skeleton: fixed top / bottom placement, the inner flex row
 * ( badge + icon + message + button + close ), the dismiss animation and the
 * marquee track used by the scrolling style. Per-style files paint the bar
 * chrome. CSS variables drive theme and sizing:
 *   --captwiki-promo-accent  → badge / button / highlight colour
 *   --captwiki-promo-z       → z-index when fixed
 *   --captwiki-promo-close   → close icon size
 *   --captwiki-promo-speed   → marquee loop duration
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-promo {
	--captwiki-promo-accent: #6d5efc;
	--captwiki-promo-z: 9999;
	--captwiki-promo-close: 16px;
	--captwiki-promo-speed: 18s;
	width: 100%;
	box-sizing: border-box;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.captwiki-promo *,
.captwiki-promo *::before,
.captwiki-promo *::after {
	box-sizing: border-box;
}

/* ── Fixed placement ───────────────────────────────────── */
.captwiki-promo--fixed {
	position: fixed;
	left: 0;
	right: 0;
	z-index: var( --captwiki-promo-z );
}

.captwiki-promo--fixed.captwiki-promo--top {
	top: 0;
}

.captwiki-promo--fixed.captwiki-promo--bottom {
	bottom: 0;
}

/* Editor preview - always render in place so the bar stays editable. */
.captwiki-promo--editor {
	position: relative;
	top: auto;
	bottom: auto;
}

/* ── Dismiss ───────────────────────────────────────────── */
.captwiki-promo.is-dismissed.captwiki-promo--top {
	transform: translateY( -110% );
	opacity: 0;
}

.captwiki-promo.is-dismissed.captwiki-promo--bottom {
	transform: translateY( 110% );
	opacity: 0;
}

.captwiki-promo[hidden] {
	display: none;
}

/* ── Bar row ───────────────────────────────────────────── */
.captwiki-promo__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	min-height: 48px;
	padding: 10px 20px;
	background: #1f2937;
	color: #ffffff;
}

/* Reserve room for the absolute close button only when it exists, so the
   content stays truly centred without it. */
.captwiki-promo--dismissible .captwiki-promo__bar {
	padding-right: 48px;
}

.captwiki-promo__message {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.captwiki-promo__badge {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 3px 10px;
	background: var( --captwiki-promo-accent );
	border-radius: 99px;
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.captwiki-promo__icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	font-size: 16px;
	line-height: 1;
}

.captwiki-promo__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.captwiki-promo__icon i {
	font-style: normal;
}

.captwiki-promo__text {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
}

/* ── Button ────────────────────────────────────────────── */
.captwiki-promo__btn {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 7px 18px;
	background: var( --captwiki-promo-accent );
	border-radius: 99px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.captwiki-promo__btn:hover {
	transform: translateY( -1px );
	filter: brightness( 1.08 );
}

/* ── Close ─────────────────────────────────────────────── */
.captwiki-promo__close {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc( var( --captwiki-promo-close ) + 10px );
	height: calc( var( --captwiki-promo-close ) + 10px );
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.25s ease, background-color 0.25s ease;
}

.captwiki-promo__close:hover {
	opacity: 1;
	background: rgba( 255, 255, 255, 0.14 );
}

.captwiki-promo__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	opacity: 1;
}

.captwiki-promo__close svg {
	width: var( --captwiki-promo-close );
	height: var( --captwiki-promo-close );
}

.captwiki-promo__bar {
	position: relative;
}

/* ── Marquee ( style-5 skeleton lives here so the track is shared ) ── */
.captwiki-promo__marquee {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.captwiki-promo__marquee-track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
	animation: captwiki-promo-scroll var( --captwiki-promo-speed ) linear infinite;
}

.captwiki-promo__marquee-track .captwiki-promo__message {
	padding-right: 64px;
}

.captwiki-promo__marquee:hover .captwiki-promo__marquee-track {
	animation-play-state: paused;
}

@keyframes captwiki-promo-scroll {
	to {
		transform: translateX( -50% );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.captwiki-promo__marquee-track {
		animation: none;
	}
}

/* ── Small screens ─────────────────────────────────────── */
@media ( max-width: 767px ) {
	.captwiki-promo__bar {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.captwiki-promo__text {
		white-space: normal;
	}
}