/* ═══════════════════════════════════════════════
 * JeStart Marquee — Frontend Styles v1.4.0
 * Pure CSS, no dependencies
 * ═══════════════════════════════════════════════ */

.jsm-marquee {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: var(--jsm-h, 40px);
	background-color: var(--jsm-bg, #1a1a2e);
	color: var(--jsm-color, #e0e0e0);
	font-size: var(--jsm-fs, 14px);
	line-height: var(--jsm-h, 40px);
	padding: var(--jsm-pv, 0) 0;
	z-index: var(--jsm-z, 999);
	white-space: nowrap;
	box-sizing: border-box;
	display: flex;
}

/* Placeholder for smart sticky (prevents layout shift) */
.jsm-marquee-placeholder {
	width: 100%;
	box-sizing: border-box;
}

/* Track — flex row, JS injects animation via <style> tag */
.jsm-track {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
}

/* Group — one full set of segments */
.jsm-group {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	flex-shrink: 0;
}

/* Segment */
.jsm-segment {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	height: var(--jsm-h, 40px);
	padding: 0;
}

/* Links */
.jsm-marquee a {
	color: var(--jsm-link, #00d4ff);
	text-decoration: none;
	transition: opacity 0.2s ease;
	/* Prevent line-height inheritance from .jsm-marquee (which uses height as line-height).
	   inline-flex + align-items:center keeps the link text vertically centred
	   inside any flex parent (.jsm-frame, .jsm-segment) */
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.jsm-marquee a:hover {
	opacity: 0.7;
}

/* Close button */
.jsm-close {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: var(--jsm-color, #e0e0e0);
	font-size: 18px;
	cursor: pointer;
	line-height: 1;
	padding: 4px 6px;
	opacity: 0.6;
	transition: opacity 0.2s ease;
	z-index: 2;
}
.jsm-close:hover {
	opacity: 1;
}

/* Fade edges */
.jsm-marquee::before,
.jsm-marquee::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40px;
	z-index: 1;
	pointer-events: none;
}
.jsm-marquee::before {
	left: 0;
	background: linear-gradient(to right, var(--jsm-bg, #1a1a2e), transparent);
}
.jsm-marquee::after {
	right: 0;
	background: linear-gradient(to left, var(--jsm-bg, #1a1a2e), transparent);
}
.jsm-marquee:has(.jsm-close)::after {
	right: 32px;
}

/* Hidden */
.jsm-marquee--hidden {
	display: none !important;
}

/* Mobile font size */
@media (max-width: 768px) {
	.jsm-marquee {
		font-size: var(--jsm-fs-m, 12px);
	}
}