/**
 * Common CSS for all bars. This file can be overriden.
 *
 * @since 1.0.0
 * @package Top Bar Notification & Sticky Banners
 */


/* Defaults for fallback */
:root{
	--top--bar--nsb--adminBarHeight: 0px;
	--top--bar--nsb--topHeight:150px;
	--top--bar--nsb--botHeight:150px;
}

/********************************************
  Wrapper, move page up/down & admin bar
 ********************************************/
.topbarnsb-topwrapper,
.topbarnsb-botwrapper {
	position: fixed;
	overflow: hidden;
	top:  calc( -1 * ( var(--top--bar--nsb--topHeight) - var(--top--bar--nsb--adminBarHeight) ) );
	left: 0;
	right: 0;
	z-index: 9999998;
	transition: top [spacer_top_time]ms linear;
	height: var(--top--bar--nsb--topHeight);
}
.topbarnsb-botwrapper {
	top: auto;
	transition: height [bot_animation_time]ms linear;
	bottom: 0;	
	height: 0;
}
.topbarnsb-addBg-wrapper {
	background: #fff;
}

@media screen and (min-width: [top_breakpoint]px) {
	#wpadminbar {
		z-index: 9999999 !important;
	}
	html {
		transition: margin-top [spacer_top_time]ms linear, margin-bottom [top_animation_time]ms linear;
	}
	html.show-topbarnsb-top {
		margin-top: calc( var(--top--bar--nsb--topHeight) + var(--top--bar--nsb--adminBarHeight) ) !important;
	}
	html.overlap-topbarnsb-top .topbarnsb-topwrapper,
	html.show-topbarnsb-top .topbarnsb-topwrapper {
		top: var(--top--bar--nsb--adminBarHeight);
	}
	body.has-topbarnsb {
		position:relative;
	}
	
	/* Try move fixed (all) */
	.topbarnsb-move-fixed {
		margin-top: var(--top--bar--nsb--topHeight) !important;
	}
	/* Try move fixed (elementor) */
	.topbarnsb-trymf_elementor .elementor-sticky { 
		position: fixed !important; 
		top: 0 !important; 
		z-index:1000;
	}
	.show-topbarnsb-top .topbarnsb-trymf_elementor .elementor-sticky {
		/* background: #f00 !important; */ 
		margin-top: var(--top--bar--nsb--topHeight) !important;
	}
	/* Try move fixed (js2) */
	.topbarnsb-trymf_js2 .topbarnsb-target-move-fixed {
		position: fixed !important; 
		top: 0 !important; left: 0; right: 0; 
		z-index:1000;
	}
	.show-topbarnsb-top .topbarnsb-trymf_js2 .topbarnsb-target-move-fixed {
		/* background: #f00 !important; */ 
		margin-top: var(--top--bar--nsb--topHeight) !important;
	}
	/* admin bar */
	.topbarnsb-trymf_elementor.admin-bar .elementor-sticky,
	.topbarnsb-trymf_js2.admin-bar .topbarnsb-target-move-fixed {
		margin-top: var(--top--bar--nsb--adminBarHeight) !important;
	}
	.show-topbarnsb-top .topbarnsb-trymf_elementor.admin-bar .elementor-sticky,
	.show-topbarnsb-top .topbarnsb-trymf_js2.admin-bar .topbarnsb-target-move-fixed {
		margin-top: calc( var(--top--bar--nsb--topHeight) + var(--top--bar--nsb--adminBarHeight) ) !important;
	}
}
@media screen and ( max-width: calc([top_breakpoint]px - 1px) ) {
	.topbarnsb-topwrapper {
		display: none !important;
	}
}

@media screen and (min-width: [bot_breakpoint]px) {
	html.topbarnsb-bot-margin-preview,
	html.show-topbarnsb-bot {
		margin-bottom: var(--top--bar--nsb--botHeight) !important;
	}
	html.overlap-topbarnsb-bot .topbarnsb-botwrapper,
	html.show-topbarnsb-bot .topbarnsb-botwrapper {
		bottom: 0;
		height: var(--top--bar--nsb--botHeight);
	}
}

@media screen and ( max-width: calc([bot_breakpoint]px - 1px) ) {
	.topbarnsb-botwrapper {
		display: none !important;
	}
}

/**********************
  Move banners
 **********************/
 
 .topbarnsb-item {
	position: absolute;
	z-index: 0;
	left: 0;
	right: 0;
	top: calc( -1 * var(--top--bar--nsb--topHeight) );
	transition: top [top_animation_time]ms linear;
	height: var(--top--bar--nsb--topHeight);
}
	.topbarnsb-item.next,
	.topbarnsb-item.current {
		top: 0;
		z-index: 1;
	}
	.topbarnsb-item.next {
		z-index: 2;
	}

	.topbarnsb-botwrapper .topbarnsb-item {
		top: auto;
		bottom: calc( -1 * var(--top--bar--nsb--botHeight) );
		transition: bottom [bot_animation_time]ms linear;
		height: var(--top--bar--nsb--botHeight);
	}
	.topbarnsb-botwrapper .topbarnsb-item.next,
	.topbarnsb-botwrapper .topbarnsb-item.current {
		top: auto;
		bottom: 0;
	}

 
 /**********************
  Banner look & feel
 **********************/

.topbarnsb-close {
	position: absolute;
	right: 24px;
	top: 50%;
	margin-top: -10px;
	z-index: 3;
}
	.topbarnsb-close span {
		position: relative;
		display: block;
		width: 20px; /* Amplada de la icona */
		height: 20px; /* Alçada de la icona */
	}

	.topbarnsb-close span::before,
	.topbarnsb-close span::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 4px; /* Gruix de la línia */
		background-color: [top_dismiss_color]; /* Color de la creu */
		transform-origin: center;
	}
	.topbarnsb-close span:hover::before,
	.topbarnsb-close span:hover::after {
		background-color: [top_dismiss_color_hover]; /* Color de la creu */
	}

	.topbarnsb-close span::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.topbarnsb-close span::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	
	.topbarnsb-botwrapper .topbarnsb-close span::before,
	.topbarnsb-botwrapper .topbarnsb-close span::after {
		background-color: [bot_dismiss_color]; /* Color de la creu */
	}
	.topbarnsb-botwrapper .topbarnsb-close span:hover::before,
	.topbarnsb-botwrapper .topbarnsb-close span:hover::after {
		background-color: [bot_dismiss_color_hover]; /* Color de la creu */
	}
	

 .topbarnsb-item {
	background: #777777;
	color: #fff;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

	.topbarnsb-item .inner {
		padding: 16px 40px;
		display: flex;
		gap: 20px;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
.topbarnsb-topwrapper.has-dismiss .inner,
.topbarnsb-botwrapper.has-dismiss .inner {
	padding-right: 70px;
}
	
	.topbarnsb-item a {
		color: #000;
	}
		.topbarnsb-item a:hover {
			color: #000;
			text-decoration: underline !important;
		}

	.topbarnsb-item p {
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		text-align: center;
		line-height: 1.2em;
	}


	.topbarnsb-item img {
		max-width: 100%;
		height: auto;
	}
	.topbarnsb-item .cta a {
		display: inline-block;
		text-align: center;
		background: #444;
		color: #eee;
		font-weight: bold;
		text-decoration: none !important;
		padding: 8px 16px;
		border-radius: 3px;
		line-height: 1em;
	}
	.topbarnsb-item .cta a:hover {
		background: #000;
		color: #fff;
	}

/* RTL support */
[dir="rtl"] .topbarnsb-topwrapper.has-dismiss .inner,
[dir="rtl"] .topbarnsb-botwrapper.has-dismiss .inner {
	padding-left: 70px;
	padding-right: 40px;
}
	[dir="rtl"] .topbarnsb-close {
		right: auto;
		left: 24px;
	}


/* responsive banners */
.topbarnsb-mobile {
    display: none;
}

.topbarnsb-desktop {
    display: block;
}

/* Show .topbarnsb-mobile` in small screens only */
@media (max-width: 768px) {
    .topbarnsb-mobile {
        display: block;
    }
    .topbarnsb-desktop {
        display: none;
    }
}
 /**********************
  Layouts
 **********************/

.topbarnsb-item.all-left .inner {
	justify-content: flex-start;
}
.topbarnsb-item.all-right .inner {
	justify-content: flex-end;
}
.topbarnsb-item.button-right .text {
	flex: 1;
}
.topbarnsb-item.expanded .inner {
	justify-content: space-between;
}
.topbarnsb-item[class*="below"] .inner {
	display: block;
}
	.topbarnsb-item[class*="below"] .cta {
		margin-top: 10px;
	}
	.topbarnsb-item.button-below .cta {
		text-align: center;
	}
.topbarnsb-item.right-below p,
.topbarnsb-item.right-below .cta {
	text-align: right;
}
.topbarnsb-item.left-below p,
.topbarnsb-item.left-below .cta {
	text-align: left;
}