/* Основні стилі для html та body */
html, body { 
  font-family: 'Source Sans Pro', sans-serif;
  height: 100%;
  margin: 0;
}
.page .neve-main {
        --c-vspace: 0 !important; /* Видаляємо вертикальні відступи */
    }

/* Контейнер для слайдера */
.swiper-container {
  width: 100%;
  margin-top: -30px;
  margin-bottom: -30px;
  overflow: hidden; /* Приховуємо все, що виходить за межі контейнера */
  height: 100vh; /* Вкажіть бажану висоту */
}

/* Обгортка для слайдів */
.swiper-wrapper {
  display: flex;
  height: 100%; /* Висота обгортки слайдів */
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-color: #000;
   width: 100%; /* Кожен слайд займає 100% ширини контейнера */
  height: 100%; /* Кожен слайд займає 100% висоти контейнера */
 /* width: calc(100% / 3 - 20px); *//* Для 3 слайдів з відступами */
  flex-shrink: 0;
  overflow: hidden;
  position: relative; /* Для позиціонування маски */
  
}

/* Маска */
.swiper-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1); /* Напівпрозорий фон */
  z-index: 1; /* Позаду вмісту */
  transition: opacity 0.3s ease; /* Анімація при переході */
}

/* Показуємо вміст слайду */
.swiper-slide:hover::before {
  opacity: 0; /* Зникає маска при наведенні */
}

/* Зображення в слайді */
.swiper-slide img {
  width: 100%;
  height: 100%; /* Висота зображення 100% */
  object-fit: cover;
  transform: scale(1.03); /* Встановлюємо початковий масштаб 120% */
  transition: transform 1s ease; /* Плавна анімація при наведенні */
}

/* Зменшення зображення при наведенні */
.swiper-slide:hover img {
  transform: scale(1); /* Повертаємо до 100% при наведенні */
}



///////////////////////

/* Базовий стиль кнопки */
.btn-svg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 1rem;
  padding: 10px 20px;
  overflow: hidden;
  text-transform: uppercase;
  border: none;
  background: transparent;
  color: #ffffff;
  transition: color 0.3s ease;
}
 /* Зміна кольору тексту */
/* Стиль SVG */
.btn-svg svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Не впливає на кліки */
}

.btn-svg rect {
  fill: none;
  stroke: #fff; /* Колір лінії */
  stroke-width: 2;
  stroke-dasharray: 120 60; /* Довжина видимої частини лінії */
  stroke-dashoffset: 120; /* Початковий зсув (лінія схована) */
  transition: stroke-dashoffset 1s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Анімація при наведенні */
.btn-svg:hover rect {
  stroke-dashoffset: 0; /* Показує лінію повністю */
}


/* Контейнер кнопок */


/* Контейнер кнопок */
.swiper-content-block-navigation {
  position: absolute;
  top: 50%; /* Центрування кнопок по вертикалі */
  left: -30px; /* Виправлено зсув */
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
  padding: 0 10px; /* Додає відступи для кнопок */
}





/* Кнопки навігації */
.swiper-content-block-navigation li {
  position: relative;
  pointer-events: auto; /* Увімкнення взаємодії */
  cursor: pointer;
  font-size: 1rem;
  color: #000;
  background: transparent;
  display: flex;
  align-items: center;
  padding-left: 0px;
   width: 200px;
  transition: color 0.3s ease;
}

.swiper-content-block-navigation li svg {
  width: 50px;
  height: 50px;
  overflow: visible;
}

.swiper-content-block-navigation li rect {
  stroke: #ffffff; /* Колір лінії */
  stroke-width: 1;
  stroke-dasharray: 70 70 ; /* Анімація заповнення */
  stroke-dashoffset: 280;
  transition: stroke-dashoffset 0.5s ease-in-out;
}

.swiper-content-block-navigation li:hover rect {
  stroke-dashoffset: 0;
}


.swiper-button-next:after, .swiper-button-prev:after {
	color: #ffffff;
}


.swiper-content-block-navigation li {
    -webkit-tap-highlight-color: transparent;
}



.container-fluid {
    margin-top: 0px;
	 margin-bottom: 0px;
}



.header {
	 z-index: 1000;
    position: fixed; /* Фіксуємо хедер у верхній частині */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
   	transition: transform 0.4s ease-in-out; /* Плавний перехід */
    transform: translateY(0);
}

.header.hidden {
    transform: translateY(-100%);
}




.movie-header {
    background-size: cover; /* Розтягує зображення по ширині */
   // background-position: center center; /* Центрує фон */
    background-repeat: no-repeat; /* Забороняє повторення */
    background-color: black; /* Чорний фон для порожніх зон */
    
    width: 100%;
    height: 65vh; /* Змінюйте, якщо потрібно */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: relative;
    color: white;
    text-align: center;
    overflow: auto;
	
	 -webkit-user-drag: none;
    user-drag: none;
    touch-action: none; /* Вимикає жести на мобільних */
    pointer-events: auto; /* Зберігає клікабельність */
}



.movie-header .content {
	
	 position: absolute;
    bottom: 0; /* Притискаємо до нижнього краю */
    left: 50%;
    transform: translateX(-50%); /* Центруємо по горизонталі */
    z-index: 2; /* Зміст над фоном */
    width: 80%; /* Текст займає 80% ширини екрану */
    background-color: rgba(255, 255, 255, 1); /* Напівпрозорий білий фон */
    color: black;
    padding: 50px;
	

    border-radius: 2px; /* Трохи округляємо краї */
    text-align: center; /* Центруємо текст */


}


.movie-header h1 {
    font-size: 5em; /* Великий шрифт для заголовку */
	margin: 0; /* Видаляємо зазор навколо */
    text-align: center; /* Заголовок по центру */
}

.movie-header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); 
    z-index: 1; */
}

.movie-header .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('<?php echo esc_url($movie->baner_v); ?>');
    background-size: 100% 100%; /* Масштабування фону по 100% на ширину та висоту */
    background-position: center;
    z-index: -1; /* Фон позаду */
    will-change: transform; /* Для оптимізації при скролі */
}

.movie-header .info {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Відстань між елементами */
	 /*font-style: italic;*/
    font-size: 1.2em;
	flex-wrap: wrap;
}

.movie-header .photography-link {
    text-decoration: none;
    color: #242830;
    font-weight: bold;
	/* font-style: italic;*/
    transition: color 0.3s ease-in-out;
}

.movie-header .photography-link:hover {
    color: #bcd5e1; /* Зміна кольору при наведенні */
}

.movie-header .info span {
    display: inline-flex;
    align-items: center;
}

.movie-header .info span strong {
     color: #242830; /* Колір для кожного елементу інформації */
}

.movie-header .info span:first-child {
    margin-left: 0; /* Для вирівнювання між першим елементом */
}

.movie-header .info span:last-child {
    margin-right: 0; /* Для вирівнювання між останнім елементом */
}

.banner-image {
    transition: transform 0.3s ease-in-out; /* Плавний перехід */
    transform-origin: center center; /* Встановлює точку масштабування в центр */
}

.movie-banner:hover .banner-image {
    transform: scale(1.03);  /* Масштабування на 1.5 або більше */
}





/*             single-movie           */


.movie-links {
    display: flex;
   // justify-content: center;
    gap: 15px;
    margin: 40px auto;
}

.animated-btn {
     position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
   // width: 100%;
    height: 48px;
   /* border-radius: 50%;*/
    overflow: hidden;
	    background: transparent;
    transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out;
}


/* SVG-іконка */
.icon {
    
    height: 48px;
    transition: transform 0.3s ease-in-out;
}

/* Анімація при наведенні */
.animated-btn:hover {
    background: transparent;
   /* transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);*/
}

.animated-btn:hover .icon {
   /* transform: rotate(360deg) scale(0.8);*/
}

/* Анімація при кліку */
.animated-btn:active {
    transform: scale(0.9);
}


/*             galery                  */


/* Стилі для другого слайдера */



.swiper-container .swiper-gallery {
  width: 30%;
 /* height: 100vh; *//* Встановлюємо висоту на 100% висоти вікна */
  position: relative;
  overflow: hidden; /* Приховуємо все, що виходить за межі контейнера */
  height: 100vh; /* Вкажіть бажану висоту */
}



/* Показуємо вміст слайду */
.swiper-gallery .swiper-slide2:hover::before {
  opacity: 0; /* Зникає маска при наведенні */
}

.swiper-gallery .swiper-slide2 {
   // width: 33.33vh; /* Висота для слайдів другого слайдера */
	 display: flex;
	
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-color: #000;

  width: calc(100% / 3 - 20px); /* Для 3 слайдів з відступами */
  flex-shrink: 0;
  overflow: hidden;
  position: relative; /* Для позиціонування маски */
  border-radius: 10px; /* Закруглені краї слайдів */
}



.swiper-gallery .swiper-slide2 img {
  width: 100%;
  /*height: 100%;*/ /* Висота зображення 100% */
  object-fit: cover;
  transform: scale(1.2); /* Встановлюємо початковий масштаб 120% */
  transition: transform 1s ease; /* Плавна анімація при наведенні */
}

.swiper-gallery .swiper-slide2:hover img {
    transform: scale(1); /* Масштабування при наведенні для другого слайдера */
}


/* Слайди */
.swiper-gallery .swiper-wrapper {
  display: flex;
  justify-content: center;
   gap: 15px; /* Відстань між слайдами 10px */
}


/*                                */

/* Модальне вікно */
.image-modal {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

/* Swiper у модальному вікні */
.modal-swiper {
    width: 90%;
    height: 90%;
   /* background: black;*/
	 background: transparent !important; /* Прозорий фон */
}

.modal-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
	 background: transparent !important; /* Прозорий фон */
}

.modal-swiper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.modal-swiper .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Кнопка закриття */
.close {
    position: absolute;
    top: 75px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 11;
}


/*               ---- footer  --- */

.footer--row.footer-bottom {
    display: none !important; 
}


.footer--row-inner {
    height: 50px !important;
    display: flex;
    align-items:  flex-end;;
   /* justify-content: center;*/
}

.site-footer p:last-child {
    font-family: 'Source Sans Pro', sans-serif;
    margin-bottom: 0;
}




@media (max-width: 768px) {
    .header {
        transform: translateY(0) !important; /* Завжди видно на мобільних */
		background-color: black;
		
    }
	

	
   
	html, body { 
  font-family: 'Source Sans Pro', sans-serif;
	height: 100%;
	padding-top: 40px;
	
	}
	body.home {
    background-color: #000; /* Чорний фон */
	padding-top: 0;
   
}
	
			/* Контейнер для слайдера */
		.swiper-container {
		  width: 100vw;
		  margin-top: 30px;
		  margin-bottom: 0;
		  height: min-content;
		  overflow: hidden; /* Приховуємо все, що виходить за межі контейнера */
  
		}

		/* Обгортка для слайдів */
		.swiper-wrapper {
			
		  display: flex;
		  //align-items: baseline;
		  align-items: center;
		}
		
		.swiper-slide {
			
			width: 100%;
			height: auto;
			}
			
			/* Для мобільних пристроїв кнопки переміщуються вниз */

  .swiper-content-block-navigation {
    top: auto;
    bottom: 25vh; /* Відступ знизу */
    transform: none;
  }
	/*іштпду ьщмшу*/
	
	
	
   
    .movie-details {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
        max-width: 100%;
    }

    .movie-banner,
    .movie-description,
    .movie-links,
    .movie-trailer,
    .movie-news,
    .movie-screenshots {
        width: 90%;
        max-width: 500px;
    }

    .movie-banner img {
        width: 100%;
        height: auto;
    }

    .movie-screenshots {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .movie-screenshots img {
        width: 80px;
        height: 80px;
        object-fit: cover;
    }

    .movie-links {
        text-align: center;
    }

    .movie-trailer iframe {
        height: 180px;
    }


    .movie-header {
		background-position: center center; /* Центрує фон */
		background-size: cover; /* На мобільних банер заповнює всю ширину */
        height: 40vh; /* Менша висота для компактності */
    }

.movie-header h1 {
    font-size: 3em; /* Великий шрифт для заголовку */
	margin: 0; /* Видаляємо зазор навколо */
    text-align: center; /* Заголовок по центру */
}

.movie-header .content {
          position: absolute;
        /* bottom: -49px; */
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        width: 80%;
        background-color: rgba(255, 255, 255, 1);
        color: black;
        padding: 20px 50px 0;
        border-radius: 2px;
        text-align: center;
}

	.movie-header .info {
    display: flex
;
        gap: 5px;
        /* font-style: italic; */
        font-size: 1.2em;
        padding-top: 20px;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        align-items: flex-start;
		
		

}
.info span.separator {
        display: none;
    }
	

	
}