/**
 * Components CSS
 * Description: Styles for various elements - this file is shared with Editor
 * Author: Matej Kerlič (Design), Maxi Web + Mihael Zadravec (Development)
 */




/*
-----------------------------------------------------------
* BUTTONS
* Button types:
* 1. PRIMARY BUTTON - NORMAL
* 2. PRIMARY BUTTON - BIG
* 3. PRIMARY BUTTON - COLOR VARIATIONS
* 4. SECONDARY BUTTON - NORMAL
* 5. SECONDATY BUTTON - BIG
* 6. SECONDARY BUTTON - COLOR VARIATIONS
* 7. SLIDER - BRIVCI
* 8. PRICELIST
* 9. Cover video - sound toggle
* 10. Marquee scroll tracks
-----------------------------------------------------------
*/

/*
.gspb_button_wrapper {
	position:relative;
}
*/

/* 1. PRIMARY BUTTON - NORMAL
-------------------------*/
.bunker_btn-primary {
	display:flex;
	position:relative!important;
	/*clip-path: polygon(0 0, 100% 0, 100% 76%, 89% 100%, 0 100%);*/
	clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0px 100%);
	z-index:1;
	border:none;
	border-radius:0px!important;
	cursor:pointer;
	padding:15px 16px 15px 16px;
	margin:0;
	font-size:13px;
	line-height:100%;
	text-transform:uppercase;
}

.bunker_btn-primary::after {
	content: "";
	display:block;
	width:100%;
	height:100%;
	/*clip-path: polygon(0 0, 100% 0, 100% 76%, 89% 100%, 0 100%);*/
	clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0px 100%);
	z-index:0;
	position: absolute;
	bottom:0px;
	right:0px;
	pointer-events: none;
	/*background: var(--theme-button-background-initial-color);*/
	background:rgba(255,255,255,1);
	opacity:0;
	transform-origin:center center;
	transform: scaleX(0.987) scaleY(0.96);
	transition: opacity 0.3s ease;
}
.bunker_btn-primary:hover::after {
	opacity:1;
}

.bunker_btn-primary::before {
	content: "";
	position: absolute;
	top: 4px;
	right: 4px;
	border-right: 6px solid transparent;
	border-top: 6px solid white;
	transform:rotate(90deg);
	z-index:5;
}

.bunker_btn-primary:hover::before {
	content: "";
	border-top-color:var(--theme-button-background-initial-color);
}
.bunker_btn-primary span {
	display:block;
	transform:translateY(1px);
	position:relative;
	z-index:3;
	/*transform:translateY(3px);*/
	margin:0 auto;
}
.bunker_btn-primary:hover span {
	color:var(--theme-button-background-initial-color)!important;
}

/* 2. PRIMARY BUTTON - BIG
-------------------------*/
.bunker_btn-primary.btn-primary-big {
	padding:24px 25px 24px 25px;
	font-size:20px;
	clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0px 100%);
}
.bunker_btn-primary.btn-primary-big::before {
	content: "";
	position: absolute;
	top: 7px;
	right: 7px;
	border-right: 10px solid transparent;
	border-top: 10px solid white;
	transform:rotate(90deg);
	z-index:5;
}
.bunker_btn-primary.btn-primary-big:hover::before {
	content: "";
	border-top-color:var(--theme-button-background-initial-color);
}
.bunker_btn-primary.btn-primary-big::after {
	clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0px 100%);
	transform: scaleX(0.99) scaleY(0.96);
}
.bunker_btn-primary.btn-primary-big span {
	display:block;
	transform:translateY(2px);
}

@media screen and (max-width:480px) {
	.btn-primary-big {
		scale:0.6!important;
	}
	
}

/* 3. PRIMARY BUTTON - COLOR VARIATIONS
-------------------------*/
/* Primary - Green */
.bunker_btn-primary-green,
body a.bunker_btn-primary-green,
body a.bunker_btn-primary-green:visited {
	color:white;
	background: var(--theme-button-background-initial-color);
}

/* Primary - White */
.bunker_btn-primary-white,
body a.bunker_btn-primary-white,
body a.bunker_btn-primary-white:visited {
	color: var(--theme-button-background-initial-color)!important;
	background:white;
}
.bunker_btn-primary.bunker_btn-primary-white:hover {
	background:white;
}
.bunker_btn-primary.bunker_btn-primary-white:hover span {
	color:white!important;
}
.bunker_btn-primary.bunker_btn-primary-white::before {
	border-top-color: var(--theme-button-background-initial-color);
}
.bunker_btn-primary.bunker_btn-primary-white:hover::before {
	border-top-color: white;
}
.bunker_btn-primary.bunker_btn-primary-white::after {
	background: var(--theme-button-background-initial-color);
}


/* 4. SECONDARY BUTTON - NORMAL
-------------------------*/
.bunker_btn-secondary {
	position:relative;
	background:transparent!important;
	border:none;
	border-radius:0px!important;
	cursor:pointer;
	padding:15px 0px 15px 20px;
	margin:0;
	font-size:13px;
	line-height:100%;
	text-transform:uppercase;
	color:black;
	display:flex;
	flex-direction:row;
}

.bunker_btn-secondary::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0px;
	border-right: 6px solid transparent;
	border-top: 6px solid black;
	transform:rotate(135deg) translateX(-5px);
	z-index:5;
	transition: border-color 1s ease;
}

.bunker_btn-secondary span {
	display:block;
	position:relative;
	z-index:3;
	transition: color 1s ease, transform 0.3s ease;
}
.bunker_btn-secondary:hover span {
	transform: translateX(4px);
}

body.transparent-header header .bunker_btn-secondary {
	color:white!important;
	transition: color 1s ease;
}
body.transparent-header header .bunker_btn-secondary::before {
	border-top-color:white;
}
body.transparent-header header.active .bunker_btn-secondary,
/*body.header-status-displayed .ybunker_btn-secondary,*/
body.transparent-header header.active-header .bunker_btn-secondary {
	color:black!important;
}

body.transparent-header header .bunker_btn-secondary::before {
	border-top-color:white;
}
body.transparent-header header.active .bunker_btn-secondary::before,
body.transparent-header header.active-header .bunker_btn-secondary::before {
	border-top-color:black;
}

/* 5. SECONDARY BUTTON - BIG
-------------------------*/
.bunker_btn-secondary.btn-secondary-big {
	font-size:16px;
}

/* 6. SECONDARY BUTTON - COLOR VARIATIONS
-------------------------*/
/* Secondary - BLACK */
.bunker_btn-secondary-black,
body a.bunker_btn-secondary-black,
body a.bunker_btn-secondary-black:visited {
	color:black!important;
}
/* Secondary - WHITE */
.bunker_btn-secondary-white,
body a.bunker_btn-secondary-white,
body a.bunker_btn-secondary-white:visited {
	color:white!important;
}
.bunker_btn-secondary-white::before {
	border-top-color:white!important;
}
/* Secondary - GREEN */
.bunker_btn-secondary-green,
body a.bunker_btn-secondary-green,
body a.bunker_btn-secondary-green:visited {
	color:var(--theme-link-initial-color);
}
.bunker_btn-secondary-green::before {
	border-top-color:var(--theme-link-initial-color);
}



/* 7. SLIDER - BRIVCI
-------------------------*/
.slider-brivci {
	/*border:solid 1px red;*/
	cursor:none;
}
.slider-brivci * {
	text-transform:uppercase;
}
.slider-brivci .rank {
	text-transform:none!important;
}
.slider-brivci .rank img {
	width:25px;
}

.slider-brivci h3 {
	font-size: var(--bunker-text-big)!important;
	font-weight: 400;
	line-height:100%;
	margin-top:-10px;
	margin-bottom:5px;
	padding:0;
}

.slider-brivci li {
	border-radius:0!important;
	border:none!important;
	pointer-events: none;
}

.slider-brivci .brivec-img-wrap {
	position:relative;
	margin-bottom:0.4vw;
}
@media screen and (max-width:480px) {
	.slider-brivci li {
		pointer-events:all;
	}
	.slider-brivci .brivec-img-wrap {
		margin-bottom:2vw;
	}
}

.slider-brivci .brivec-img-wrap::before {
	content: "";
	position: absolute;
	bottom: 0px;
	right: 0px;
	border-right: 10px solid transparent;
	border-top: 10px solid var(--theme-palette-color-2);
	transform:rotate(180deg);
	z-index:5;
}
@media screen and (max-width:480px) {
	.slider-brivci .brivec-img-wrap::before {
		border-right: 8px solid transparent;
		border-top: 8px solid var(--theme-palette-color-2);
	}
}

.slider-brivci .brivec-img-wrap img {
	clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0px 100%);
}


.slider-brivci .brivec-info-wrap {
	position:relative;
	clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0px 100%);
	background:var(--theme-palette-color-2);
	padding:1.4vw;
}

@media screen and (max-width:480px) {
	.slider-brivci .brivec-info-wrap {
		padding:20px;
		font-size:11px;
	}
	.slider-brivci h3 {
		font-size: 20px!important;
	}
}


.slider-brivci .brivec-info-wrap * {
	z-index:2;
}

.slider-brivci .brivec-info-wrap::after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:1;
	clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0px 100%);
	background:white;
	transform: scaleX(0.992) scaleY(0.99);
}


.slider-brivci .brivec-info {
	position:relative;
	border-bottom:solid 1px rgba(0,0,0,0.1);
	padding:6px 0 4px 0;
	color:black;
	white-space:nowrap;
	gap:5px;
}
.brivec-info-wrap .brivec-info:nth-of-type(2) {
	border-top:solid 1px rgba(0,0,0,0.1);
}
.slider-brivci .brivec-info:last-child {
	border-bottom:none;
}
.slider-brivci .brivec-info div.bi-label {
	color: var(--theme-palette-color-2)!important;
}

.slider-brivci .brivec-info div {
	/*overflow:hidden;*/
}

.slider-brivci .brivec-info div.bi-data {
	/*overflow:hidden;*/
	height:auto;
	pointer-events: none;
}



/* Slide left on hover */
/*
.brivec-info-wrap:hover .bi-data {
	transform: translateX(-100%); 
  }
  
 
  .brivec-info-wrap:not(:hover) .bi-data {
	transform: translateX(0%);
  }
	*/

.slider-brivci .swiper-button-prev,
.slider-brivci .swiper-button-next {
	display:none!important;
}
/* Slider Brivci custom cursror */
body:not(.wp-admin) .slider-brivci {
    cursor: none;
}
body.wp-admin .slider-brivci {
	cursor: default;
}


/*
.slider-brivci .brivec-info::after {
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	background:red;
}
	*/



/* 8. PRICELIST
-------------------------*/
.bunker-pricelist {
	margin:0;
	padding:0;
	list-style:none;
}

/* Pricelist group title (h3) */
.bunker-pricelist-group,
body h3.bunker-pricelist-group {
	display:flex;
	align-items:center;
	justify-content: center;
	background:var(--theme-palette-color-2);
	color:white;
	text-align:center;
	font-size:var(--bunker-text-big);
	text-transform:uppercase;
	font-weight:400!important;
	height:2.57vw;
	line-height:100%;
	margin:0!important;
	padding:0!important;
}
.bunker-pricelist-group span,
body h3.bunker-pricelist-group span {
	transform:translateY(1px);
}
@media screen and (max-width:480px) {
	.bunker-pricelist-group,
	body h3.bunker-pricelist-group {
		padding:12px!important;
		height:45px;
		line-height:100%;
		justify-content: flex-start;
		position:relative;
		font-size:var(--bunker-text-small);
	}
	.bunker-pricelist-group::after,
	body h3.bunker-pricelist-group::after {
		content:"+";
		font-size:16px;
		font-weight:normal;
		position:absolute;
		top:50%;
		transform: translateY(-50%);
		right:12px;
		color:white;
	}
	.accordion-open .bunker-pricelist-group::after,
	.accordion-ope body h3.bunker-pricelist-group::after {
		content:"-";
	}
}


.bunker-pricelist-item {
	position:relative;
	width:100%;
	height:2.57vw;
	line-height:100%;
	display:flex;
	flex-direction: row;
	align-items:center;
	justify-content: space-between;
	padding:12px;
	border-bottom:solid 1px rgba(0,0,0,0.1);
	transition: all 0.5s ease;
	overflow:hidden;
}
body .bunker-pricelist .bunker-pricelist-item h4,
body .bunker-pricelist .bunker-pricelist-item p {
	text-transform:uppercase!important;
	font-size:var(--bunker-text-big)!important;
	font-weight:400;
	margin:0!important;
	padding:0!important;
	transform: translateY(2px);
}

.bunker-pricelist-item span {
	font-size: var(--bunker-text-small);
}

.bunker-pricelist .bunker-pricelist-item::before,
.bunker-pricelist .bunker-pricelist-item::after {
	content:"";
	display:block;
	height:calc(100% - 1px);
	width:2px;
	background:#FFF;
	position:absolute;
	top:0px;
	left:0px;
	transition: all 0.3s ease;
}
.bunker-pricelist .bunker-pricelist-item::after {
	left:calc(100% - 2px);
}
.bunker-pricelist .bunker-pricelist-item:hover::before,
.bunker-pricelist .bunker-pricelist-item:hover::after {
	background:#2FAC65;
}

@media screen and (max-width:480px) {
	.bunker-pricelist {
		margin-left:20px;
		margin-right:20px;
		margin-bottom:20px;
	}
	.bunker-pricelist-item {
		height:auto;
	}
	.bunker-pricelist-item span {
		display:block;
		margin-top:3px;
		margin-bottom:2px;
		font-size:11px;
		line-height:102%;
	}
	.accordion-label {
		margin-bottom:1px;
	}
}



/**
* 9. Cover video - sound toggle
*/
.sound-toggle {
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
	align-items: center;
	justify-content: center;
	gap:5px;
    z-index: 10;
	color:white;
	/*border:solid 1px white;*/
	text-transform:uppercase;
	background: rgba(255,255,255,0.1);
	clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0px 100%);
	backdrop-filter: blur(10px);
}

.sound-toggle::before {
	content: "";
	position: absolute;
	top: 4px;
	right: 4px;
	border-right: 6px solid transparent;
	border-top: 6px solid rgba(255,255,255,0.5);
	transform:rotate(90deg);
	z-index:5;
}

.sound-bars {
    width:11px;
    height:11px;
    display:flex;
    flex-direction:row;
    gap:1px;
    align-items: center;
    justify-content: center;
	margin-right:7px;
}

.sound-bars span {
    display: block;
    width: 3px;
    height: 3px;
    background: #fff;
    transform-origin: bottom;
}


/* 10. Marquee scoll track */
.marquee-wrap {
	background:black;
	border: solid 1px white;
	border-width:1px 0;
	width:200vw;
	min-width:200vw;
	margin-left:-50vw;
	overflow:hidden;
}

.marquee-1 {
	position:absolute;
	top:-9vw;
	left:0;
	transform-origin: top left;
    transform: rotate(15deg);
	z-index:1;
}
.marquee-2 {
	position:absolute;
	top:-2vw;
	right:0;
	transform-origin: top right;
    transform: rotate(-30deg);
	z-index:2;
}
.marquee-3 {
	position:absolute;
	top:35vw;
	left:0;
	transform-origin: top left;
    transform: rotate(5deg);
	z-index:3;
}
.marquee-4 {
	opacity:0;
}

.marquee-track {
	display:flex;
	flex-direction: row;
	flex-wrap:nowrap;
	gap:4vw;

}
.marquee-track p {
	transform: translateY(0.6vw);
}

@media (max-width: 480px) {
	.marquee-3 {
		position:absolute;
		top:60vw;
		left:0;
		transform-origin: top left;
		transform: rotate(10deg);
		z-index:1;
	}
	.marquee-4 {
		opacity:1;
		position:absolute;
		top:120vw;
		left:0;
		transform-origin: top left;
		transform: rotate(-10deg);
		z-index:3;
	}
}


/* 10.1 Music player
------------------------------------*/
.music-player-wrap iframe {
	height:352px!important;
}
@media screen and (max-width:480px) {
	.music-player-wrap {
		width:100%;
	}
	.music-player-wrap iframe {
		height:150px!important;
	}
}


/**
* 11. Carousel gallery
*/
.carousel .swiper-slide img {
	width:100%;
	height:100%;
	object-fit: cover;
	aspect-ratio: 1/1;
}

/* 12. Marquee - hair styles - because editor doesn't a responsive GAP setting
-------------------------*/
body .gspb_marquee_content {
	gap: 8vw;
}
@media screen and (max-width:480px ) {
	body .gspb_marquee_content {
		gap: 13vw;
	}
}