/*  custom CSS  */
:root {
	--height-pc: 500px;	
}
  .header-map-block .header-map .point .info { display: block; background: #ffffff; }
	.header-map-block .header-map .point .info .title:not(:first-child) { margin-top: 20px; }
	.header-map-block .header-map .point .info .text a { color: #337ab7; text-decoration: underline; }
	
	.header-map-block .title {
  position: relative;
  max-width: 635px;
  padding-top: 20px;
  z-index: 1;
}
	
.header-map-block .header-map {
  position: relative;
  margin-top: -100px;
}
.header-map-block .header-map img {
  width: 100%;
}
.header-map-block .header-map .points {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.header-map-block .header-map .point {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.header-map-block .header-map .point .dot {
  position: relative;
  /*width: 20px;*/
  /*height: 20px;*/
  /*background: url(/wp-content/themes/prostor_restyling/dist/img/map-dot.svg) no-repeat center;*/
  border-radius: 50%;
  border: 7px solid #d92251;
  background: #fff;
  animation: radial-pulse 2s infinite;
  z-index: 1;
}
.header-map-block .header-map .point:nth-child(1) {
/*  top: 151px;
  left: 428px;*/
  top: 29.3%;
  left: 45.5%;
}
.header-map-block .header-map .point:nth-child(2) {
/*  top: 217px;
  left: 592px;*/
  top: 42.1%;
  left: 63%;
}
.header-map-block .header-map .point:nth-child(3) {
/*  top: 265px;
  left: 135px;*/
  top: 51.5%;
  left: 14.4%;
}
.header-map-block .header-map .point:nth-child(4) {
/*  top: 282px;
  left: 282px;*/
  top: 54.8%;
  left: 30%;
}
.header-map-block .header-map .point:nth-child(5) {
/*  top: 282px;
  left: 870px;*/
  top: 54.8%;
  left: 92.6%;
}
.header-map-block .header-map .point:nth-child(6) {
/*  top: 363px;
  left: 495px;*/
  top: 70.5%;
  left: 52.7%;
}
.header-map-block .header-map .point .info {
  /*display: none;*/
  position: absolute;
  top: 50%;
  left: 50%;
  /*bottom: 0;*/
  width: 100vw;
  max-width: 320px;
  padding: 20px;
  box-shadow: 0 6px 19px rgba(0, 0, 0, 0.17);
  border-radius: 19px;
  /*background: rgba(255, 255, 255, 0.7);*/
  transform: scale(0);
  transform-origin: left top;
  transition: all 0.4s ease;
}
.header-map-block .header-map .point .info .title {
  padding: 0;
  color: #464646;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Comfortaa', cursive;
  line-height: 1;
}
.header-map-block .header-map .point .info .text {
  padding: 5px 0 0 5px;
  color: #282828;
  font-size: 14px;
  line-height: 22.65px;
}
.header-map-block .header-map .point.active {
  z-index: 1;
}
.header-map-block .header-map .point.active .dot {
  padding: 5px;
  border-width: 6px;
  animation: none;
}
.header-map-block .header-map .point.active .info {
  /*display: block;*/
  transform: scale(1);
}
.header-map-block .header-map .point:nth-child(5) .info {
  left: auto;
  right: 50%;
  transform-origin: right top;
}

.advantages .header__ico {
	min-width: 44px;
}

.wifi_access-item {
	
}
.wifi_access-item .item-ico {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 50px auto;
}
.wifi_access-item .item-ico .ico {
	
}
.wifi_access-item .item-ico .days {
	color: #9199a3;
	font-size: 12px;
	line-height: 1;
	font-weight: bold;
	text-align: center;
	/*background: url(/wp-content/themes/prostor_restyling/dist/img/wifi_access-bg-arrow.svg) no-repeat right bottom 20px;*/
}
.wifi_access-item .item-title {
	margin-top: 20px;
	color: #464646;
	font-size: 16px;
	font-weight: 700;
	font-family: Comfortaa;
}
.wifi_access-item .item-text {
	margin-top: 10px;
	color: #9199a3;
	font-size: 12px;
	line-height: 1.6;
}

@media (max-width: 991px) {
	.grid-how_to {
		grid-template-columns: auto auto;
	}
}

@media (max-width: 767px) {
  .header-map-block .header-map .point .info {
    /*display: none;*/
  }
	.wifi_access-item .item-ico {
		align-items: center;
	}
	.wifi_access-item .item-ico .days {
		text-align: left;
		background: none;
	}
}
	
@keyframes radial-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(217, 34, 81, 1);
  }
 
  100% {
    box-shadow: 0 0 0 10px rgba(217, 34, 81, 0);
  }
}	
/*	.header-map-block {
		background-color: #ccc;
	}	

.header-map-block {
  background-color: #ccc;  Цвет фона для всего блока карты 
}
*/
.header-map-block .header-map {
  position: relative;
  margin-top: -100px; /* Сдвиг карты вверх */
}

.header-map-block .header-map img {
  width: 100%; /* Карта на всю ширину контейнера */
}

.header-map-block .header-map .points {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.header-map-block .header-map .point {
  position: absolute;
  transform: translate(-50%, -50%); /* Центрирование точки */
  cursor: pointer;
  z-index: 0; /* По умолчанию точки под информацией */
}

.header-map-block .header-map .point .dot {
  position: relative;
  border-radius: 50%;
  border: 7px solid #d92251;
  background: #fff;
  animation: radial-pulse 2s infinite;
  z-index: 1; /* Кружок точки поверх фона карты */
}

.header-map-block .header-map .point .info {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  max-width: 320px;
  padding: 20px;
  box-shadow: 0 6px 19px rgba(0, 0, 0, 0.17);
  border-radius: 19px;
  background: #fff; /* Убрал прозрачность */
  transform: scale(0);
  transform-origin: left top;
  transition: all 0.4s ease;
  z-index: 2; /* Информация поверх точки */
  display: block; /* По умолчанию отображаем информацию (как в вашем HTML) */
}

.header-map-block .header-map .point .info .title {
  padding: 0;
  color: #464646;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Comfortaa', cursive;
  line-height: 1;
}

.header-map-block .header-map .point .info .title:not(:first-child) {
  margin-top: 20px; /* Отступ между несколькими заголовками */
}

.header-map-block .header-map .point .info .text {
  padding: 5px 0 0 0; /* Убрал левый отступ, чтобы текст был ровнее */
  color: #282828;
  font-size: 14px;
  line-height: 22.65px;
}

.header-map-block .header-map .point .info .text a {
  color: #337ab7;
  text-decoration: underline;
}

.header-map-block .header-map .point.active {
  z-index: 3; /* Активная точка поверх всего */
}

.header-map-block .header-map .point.active .dot {
  padding: 5px;
  border-width: 6px;
  animation: none;
}

.header-map-block .header-map .point.active .info {
  transform: scale(1); /* Показываем информацию активной точки */
}

.header-map-block .header-map .point:nth-child(5) .info {
  left: auto;
  right: 50%;
  transform-origin: right top;
}

/* Стили для заголовка блока (если он есть) */
.header-map-block .title {
  position: relative;
  max-width: 635px;
  padding-top: 20px;
  z-index: 1;
}

/* Стили для элементов wifi_access (вынесены, так как не относятся напрямую к карте) */
.wifi_access-item .item-ico {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 50px auto;
  align-items: center; /* Центрирование по вертикали */
}

.wifi_access-item .item-ico .days {
  color: #9199a3;
  font-size: 12px;
  line-height: 1;
  font-weight: bold;
  text-align: left; /* Изменено на left для мобильной версии */
  background: none; /* Убрано фоновое изображение */
}

.wifi_access-item .item-title {
  margin-top: 20px;
  color: #464646;
  font-size: 16px;
  font-weight: 700;
  font-family: Comfortaa;
}

.wifi_access-item .item-text {
  margin-top: 10px;
  color: #9199a3;
  font-size: 12px;
  line-height: 1.6;
}

/* Медиа-запросы */
@media (max-width: 991px) {
  .grid-how_to {
    grid-template-columns: auto auto;
  }
}

@media (max-width: 767px) {
  /* Информация о точке всегда видна на мобильных устройствах */
  .header-map-block .header-map .point .info {
    transform: scale(1);
    position: relative; /* Чтобы не вылезала за пределы */
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    max-width: 100%;
    margin-top: 10px; /* Отступ от точки */
  }
  .wifi_access-item .item-ico .days {
    text-align: left;
    background: none;
  }
}

/* Анимация */
@keyframes radial-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(217, 34, 81, 1);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(217, 34, 81, 0);
  }
}

/* Серая волна сверху */
.site-header {
	padding: 30px 0 70px;
    margin-bottom: 120px;
    background: url(/wp-content/uploads/2025/04/header.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 20px;
}

/* Убрать фон у шапки и мега-меню, чтобы было видно серую волну */
.ast-below-header-bar, 
.ast-above-header.ast-above-header-bar,
.ast-primary-header-bar,
.main-header-bar,
.site-below-footer-wrap[data-section="section-below-footer-builder"] {
		background-color: transparent;
		border: none;
}

/* Вращение логотипа */
/* Базовые стили для контейнера логотипа */
.site-logo-img {
    display: inline-block;
    line-height: 0; /* Убираем лишние отступы вокруг изображения */
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

/* Ссылка логотипа */
.custom-logo-link {
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
    outline: none;
}

/* Изображение логотипа */
.custom-logo {
    max-width: 100%;
    height: auto;
    display: block;
    border: none;
    box-shadow: none;
}

/* Специфичные стили для SVG логотипа */
.astra-logo-svg {
    width: 205px; /* Фиксированные размеры из атрибутов img */
    height: 205px;
}

/* Эффект при наведении (уменьшение прозрачности) */
.custom-logo-link:hover {
    opacity: 0.9;
}

/* постоянное вращение без наведения */
.astra-logo-svg {
    animation: rotateY 8s linear infinite;
}

/* 3D-эффект с перспективой */
.site-logo-img {
    perspective: 200px;
    display: inline-block;
}

.astra-logo-svg {
    transform-style: preserve-3d;
    transition: transform 1s;
}

.site-logo-img:hover .astra-logo-svg {
    transform: rotateY(180deg);
}

/* Тень и границы для логотипа */
.custom-logo {
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
    border-radius: 5px;
}

@keyframes rotateY {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

/* Для мобильных устройств */
@media (max-width: 768px) {
    .astra-logo-svg {
        width: 150px;
        height: 150px;
    }
}

/* Нижняя серая волна 
#page .site-content {
		background-image: url(/wp-content/uploads/2025/04/section2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}*/


/* Волны*/
#sineWave{
      /*width: 100%;
      height: 300px;*/
      position: absolute;
      top: 200px;
      /*left: 0;
      transform: translateY(-50%);
      display: block;*/
		z-index: 100;
		pointer-events: none
    }

.main-header-bar-wrap {
		z-index: 200;
		pointer-events: auto;
}

#full-width {
		position: absolute;
    left: 0;
    right: 0;
    height: var(--height-pc);
		background-color: grey;
}
#panel-4-2-0-1{
		height: var(--height-pc);
		
}
#colophon {
		height: 400px;
		display: flex;
    flex-direction: column-reverse;
		background-image: url(/wp-content/uploads/2025/04/section2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* Галерея изображений */ 

#gallery-main {
		position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: url(/wp-content/themes/astra-child/image/background/background.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
    perspective: 1200px;
}

.gallery-container {
    position: relative;
    width: 100vw;
    height: 500px;
    transform-style: preserve-3d;
    transform: rotateX(-15deg);
    animation: rotate 30s infinite linear;
}

.gallery-item {
    position: absolute;
    width: 200px;
    height: 150px;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -75px;
    transform-origin: center center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.2);
}

.caption {
    position: absolute;
    bottom: -30px;
    width: 100%;
    text-align: center;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 5px;
    border-radius: 3px;
    pointer-events: none;
}

.gallery-item:hover .caption {
    opacity: 1;
}

.fullscreen-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.fullscreen-overlay.active {
    display: flex;
}

.fullscreen-image {
    max-width: 90%;
    max-height: 90%;
}

@keyframes rotate {
    from { transform: rotateY(0); }
    to { transform: rotateY(360deg); }
}