/**
 * Smart Marquee Public Stylesheet
 */

/* Main Container */
.smart-marquee-container {
	width: 100%;
	height: 48px;
	background-color: var(--sm-bar-bg, #ffffff);
	border: 1px solid var(--sm-bar-border, #e5e7eb);
	border-radius: 6px;
	overflow: hidden;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	margin: 0;
}

.smart-marquee-wrapper {
	display: flex;
	align-items: center;
	height: 100%;
	width: 100%;
	position: relative;
}

/* Positions styling */
.smart-marquee-container.sm-position-top_fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	border-radius: 0;
	border-left: none;
	border-right: none;
	border-top: none;
	margin: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Admin bar adjustment */
.admin-bar .smart-marquee-container.sm-position-top_fixed {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar .smart-marquee-container.sm-position-top_fixed {
		top: 46px;
	}
}

.smart-marquee-container.sm-position-top_static {
	border-radius: 0;
	border-left: none;
	border-right: none;
	border-top: none;
	margin: 0;
}

.smart-marquee-container.sm-position-bottom_fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	border-radius: 0;
	border-left: none;
	border-right: none;
	border-bottom: none;
	margin: 0;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

/* Label (e.g. "NOTIFICATION") */
.smart-marquee-label {
	display: inline-flex;
	align-items: center;
	height: 100%;
	background-color: var(--sm-label-bg, #991b1b);
	color: var(--sm-label-text, #ffffff);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	padding: 0 35px 0 20px;
	position: relative;
	flex-shrink: 0;
	z-index: 2;
	/* Slanted right edge */
	clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
}

.smart-marquee-icon {
	margin-right: 8px;
	font-size: 16px;
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.smart-marquee-label-txt {
	white-space: nowrap;
}

/* Marquee Scrolling Body */
.smart-marquee-body {
	flex-grow: 1;
	overflow: hidden;
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	z-index: 1;
}

.smart-marquee-track {
	display: flex;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	white-space: nowrap;
	will-change: transform;
}

.smart-marquee-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
	height: 100%;
}

.smart-marquee-item {
	display: inline-flex;
	align-items: center;
	padding: 0 20px;
	flex-shrink: 0;
	height: 100%;
	box-sizing: border-box;
}

/* Post links */
.smart-marquee-post-link {
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	transition: opacity 0.2s ease-in-out;
}

.smart-marquee-post-link:hover {
	opacity: 0.8;
	text-decoration: none;
}

/* NEW Badge */
.smart-marquee-new-badge {
	background-color: #ffe4e6; /* rose-100 */
	color: #e11d48; /* rose-600 */
	border: 1px solid #fecdd3; /* rose-200 */
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 1px 6px;
	border-radius: 4px;
	margin-right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	letter-spacing: 0.4px;
	animation: smart-marquee-blink 1.2s infinite ease-in-out;
}

/* Horizontal separators */
.smart-marquee-body[data-direction="horizontal"] .smart-marquee-item::after {
	content: "|";
	color: #d1d5db; /* gray-300 */
	margin-left: 24px;
	font-weight: 300;
	pointer-events: none;
}

/* Vertical marquee adjustments */
.smart-marquee-body[data-direction="vertical"] .smart-marquee-track {
	flex-direction: column;
	width: 100%;
	left: 0;
	top: 0;
}

.smart-marquee-body[data-direction="vertical"] .smart-marquee-list {
	flex-direction: column;
	width: 100%;
	height: auto;
}

.smart-marquee-body[data-direction="vertical"] .smart-marquee-item {
	width: 100%;
	justify-content: flex-start;
	padding: 0 20px;
}

.smart-marquee-body[data-direction="vertical"] .smart-marquee-item::after {
	display: none;
}

/* View All Link Area */
.smart-marquee-viewall {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 20px;
	border-left: 1px solid var(--sm-bar-border, #e5e7eb);
	background-color: var(--sm-bar-bg, #ffffff);
	flex-shrink: 0;
	z-index: 2;
}

.smart-marquee-viewall-link {
	color: var(--sm-label-bg, #991b1b);
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	transition: opacity 0.2s ease;
	white-space: nowrap;
}

.smart-marquee-viewall-link:hover {
	opacity: 0.8;
	text-decoration: underline;
}

/* Responsive details */
@media screen and (max-width: 600px) {
	.smart-marquee-container {
		height: 40px;
	}
	.smart-marquee-label {
		padding: 0 20px 0 10px;
		font-size: 11px;
		clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	}
	.smart-marquee-icon {
		font-size: 14px;
		width: 14px;
		height: 14px;
		margin-right: 4px;
	}
	.smart-marquee-viewall {
		padding: 0 10px;
	}
	.smart-marquee-viewall-link {
		font-size: 11px;
	}
	.smart-marquee-post-link {
		font-size: 12px;
	}
	.smart-marquee-new-badge {
		font-size: 8px;
		padding: 1px 4px;
	}
}

/* Forcefully remove Elementor container margins/padding around the marquee container */
.elementor-element.elementor-element-0fe0cd2 {
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
}

.elementor-element.elementor-element-fea8813 {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.elementor-element.elementor-element-8cf0c03 {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Keyframes for blinking NEW badge */
@keyframes smart-marquee-blink {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.2;
	}
}
