/**
 * 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. */

/* The bar is position:fixed with left:0/right:0, sized against the layout
   viewport. On mobile browsers (notably iOS Safari) that viewport can be a
   few px wider than the visual viewport, letting the bar overhang the right
   edge and make the whole page horizontally scrollable. Contain it here
   instead of relying on the bar's own width. */
html,
body {
	overflow-x: hidden;
}

.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;
	}
}

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

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