/* ==========================================================================
   Premium Announcement Bar Pro - Frontend Styles
   ========================================================================== */

/* Wrapper Reset & Layout */
.pab-wrapper {
	box-sizing: border-box;
	display: block;
	width: 100%;
	z-index: var(--pab-z-index);
	margin: var(--pab-margin-tb) 0;
	opacity: var(--pab-opacity);
	font-family: var(--pab-font-family);
	box-shadow: var(--pab-shadow);
	border: var(--pab-border-width) solid var(--pab-border-color);
	border-radius: var(--pab-border-radius);
	overflow: hidden;
	position: relative;
	background: var(--pab-bg-value);
	color: var(--pab-text-color);
	line-height: var(--pab-line-height);
	text-transform: var(--pab-text-transform);
}

.pab-wrapper * {
	box-sizing: border-box;
}

/* Positioning rules */
.pab-wrapper.pab-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
}

.pab-wrapper.pab-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

/* Container Width constraint */
.pab-container {
	width: var(--pab-container-width);
	max-width: var(--pab-max-width);
	margin: 0 auto;
	padding: var(--pab-padding-tb) var(--pab-padding-lr);
	position: relative;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   MARQUEE LAYOUT & ANIMATION (Pure CSS Transforms)
   -------------------------------------------------------------------------- */
.pab-track {
	display: flex;
	width: max-content;
	animation: pab-marquee var(--pab-marquee-speed) linear infinite;
	will-change: transform;
}

.pab-group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* Pause on Hover */
.pab-pause-hover:hover .pab-track {
	animation-play-state: paused;
}

@keyframes pab-marquee {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		/* Translate by 1/3 since we have 3 identical groups */
		transform: translate3d(-33.3333%, 0, 0);
	}
}

/* Items details */
.pab-item {
	display: inline-flex;
	align-items: center;
	justify-content: var(--pab-alignment);
	white-space: nowrap;
	padding: 0 var(--pab-item-spacing);
}

/* Link reset */
.pab-item-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: color 0.2s ease-in-out;
}

.pab-item-link:hover {
	color: var(--pab-hover-color);
}

/* Icon & Text spacing */
.pab-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--pab-icon-text-spacing);
	color: var(--pab-icon-color);
	font-size: 1.1em;
}

.pab-item-icon svg {
	fill: currentColor;
	width: 1.2em;
	height: 1.2em;
	vertical-align: middle;
}

.pab-item-text {
	font-weight: var(--pab-font-weight);
	letter-spacing: var(--pab-letter-spacing);
}

/* Separator styling */
.pab-separator {
	display: inline-flex;
	align-items: center;
	color: var(--pab-separator-color);
	font-size: var(--pab-separator-size);
	margin: 0 var(--pab-separator-margin);
}

.pab-separator svg {
	fill: currentColor;
	width: 1em;
	height: 1em;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   SLIDER LAYOUT & ANIMATION (Vanilla JS controlled)
   -------------------------------------------------------------------------- */
.pab-slider-track {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: var(--pab-alignment);
	align-items: center;
	min-height: 1.5em;
}

.pab-slider-item {
	display: none;
	width: 100%;
	justify-content: var(--pab-alignment);
	align-items: center;
	text-align: var(--pab-alignment);
}

.pab-slider-item.active {
	display: inline-flex;
}

/* FADE ANIMATION */
.pab-slider-item.pab-anim-fade {
	opacity: 0;
	transition: opacity var(--pab-slider-transition-speed) ease-in-out;
}

.pab-slider-item.pab-anim-fade.active {
	opacity: 1;
}

/* SLIDE ANIMATION */
.pab-slider-item.pab-anim-slide {
	transform: translateY(20px);
	opacity: 0;
	transition: transform var(--pab-slider-transition-speed) ease, opacity var(--pab-slider-transition-speed) ease;
}

.pab-slider-item.pab-anim-slide.active {
	transform: translateY(0);
	opacity: 1;
}

/* BOUNCE ANIMATION */
.pab-slider-item.pab-anim-bounce {
	transform: scale(0.8);
	opacity: 0;
	transition: transform var(--pab-slider-transition-speed) cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity var(--pab-slider-transition-speed) ease;
}

.pab-slider-item.pab-anim-bounce.active {
	transform: scale(1);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   DISMISS / CLOSE BUTTON
   -------------------------------------------------------------------------- */
.pab-close-btn {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: currentColor;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 5px;
	opacity: 0.7;
	transition: opacity 0.2s ease, transform 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.pab-close-btn:hover {
	opacity: 1;
	transform: translateY(-50%) scale(1.1);
}

/* Custom HTML block */
.pab-custom-html {
	width: 100%;
	clear: both;
}

/* --------------------------------------------------------------------------
   RESPONSIVE LAYOUT MEDIA QUERIES
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.pab-wrapper {
		font-size: var(--pab-fs-desktop);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.pab-wrapper {
		font-size: var(--pab-fs-tablet);
	}
	.pab-container {
		padding-right: 40px; /* offset close button space */
	}
}

@media (max-width: 767px) {
	.pab-wrapper {
		font-size: var(--pab-fs-mobile);
	}
	.pab-container {
		padding-right: 40px; /* offset close button space */
	}
	.pab-item {
		padding: 0 calc(var(--pab-item-spacing) / 2);
	}
	.pab-separator {
		margin: 0 calc(var(--pab-separator-margin) / 2);
	}
}