/**
 * Marquee/ticker styles for Smart Sales Popup.
 * Uses CSS custom properties injected by PHP layout presets.
 *
 * @package WC_Smart_Sales_Popup
 */

/* ---- Marquee Bar ---- */
/* Body padding is set dynamically by adjustFixedElements() in public-marquee.js
   to account for marquee height + fixed header height combined. */

.wc-ssp-marquee-bar {
	background: var(--wc-ssp-bar-bg, #0a2057);
	height: var(--wc-ssp-bar-height, 36px);
	overflow: hidden;
	display: none; /* shown by JS after content loads, prevents empty-bar flash */
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99998;
	box-shadow: var(--wc-ssp-bar-shadow, none);
	border: var(--wc-ssp-bar-border, none);
	backdrop-filter: var(--wc-ssp-bar-backdrop, none);
	-webkit-backdrop-filter: var(--wc-ssp-bar-backdrop, none);
}

/* When WP admin bar is visible, push marquee below it */
body.admin-bar .wc-ssp-marquee-bar {
	top: 32px;
}

/* ---- Marquee Track (seamless scroll) ---- */

.wc-ssp-marquee-track {
	display: flex;
	align-items: center;
	white-space: nowrap;
	animation: wc-ssp-marquee-scroll var(--wc-ssp-speed, 34s) linear infinite;
	will-change: transform;
}

.wc-ssp-marquee-bar:hover .wc-ssp-marquee-track {
	animation-play-state: paused;
}

/* ---- Marquee Item ---- */

.wc-ssp-marquee-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 48px;
	font-size: var(--wc-ssp-font-size, 12.5px);
	color: var(--wc-ssp-text, #c8d8f0);
	flex-shrink: 0;
}

.wc-ssp-marquee-item strong {
	color: var(--wc-ssp-strong, #fff);
	font-weight: 600;
}

/* ---- Live Dot ---- */

.wc-ssp-marquee-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wc-ssp-dot, #4ade80);
	flex-shrink: 0;
	animation: wc-ssp-pulse-dot 2s ease-in-out infinite;
}

/* ---- Time text ---- */

.wc-ssp-marquee-time {
	opacity: 0.7;
}

/* ---- Separator ---- */

.wc-ssp-marquee-sep {
	color: var(--wc-ssp-sep, rgba(255, 255, 255, 0.15));
	padding: 0 8px;
	font-size: 18px;
	flex-shrink: 0;
}

/* ---- Keyframes ---- */

@keyframes wc-ssp-marquee-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@keyframes wc-ssp-pulse-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.7); }
}

/* ---- Responsive ---- */

@media (max-width: 782px) {
	body.admin-bar .wc-ssp-marquee-bar {
		top: 46px;
	}
	.wc-ssp-marquee-bar {
		display: none; /* keep display:none override at mobile too */
	}
}

@media (max-width: 480px) {
	.wc-ssp-marquee-item {
		padding: 0 20px;
		font-size: 11px;
	}

	.wc-ssp-marquee-bar {
		height: 30px;
	}
}