/* ==========================================================================
   Pano2VR 3D Floor Navigation Hotspot CSS
   ==========================================================================
   Файл підключається через HTML Output -> HTML Template -> "Include external CSS file".
   ========================================================================== */

/* ========================================================================== */
/* #region 0. CUSTOM FONTS (Google Fonts Import & Classes)                   */
/* ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Marck+Script&family=Pacifico&family=Amatic+SC:wght@700&display=swap');

/* ========================================================================== */
/* #endregion */
/* ========================================================================== */


/* ========================================================================== */
/* #region 1. СТРІЛКА НА ПІДЛОЗІ (SLIDE ARROW)                               */
/* ========================================================================== */

/* 
   ШВИДКА ШПАРГАЛКА ДЛЯ РЕГУЛЮВАННЯ СТРІЛКИ:
   1. Позиція по вертикалі (вище/нижче):
      - Змінюйте значення translateY(-48px). Більше від'ємне — вище, менше — нижче.
      - ВАЖЛИВО: Змінюйте це значення однаково в 0%, 100% та у блоці :hover!
   2. Довжина амплітуди кроку:
      - Різниця між стартом 0% (-48px) та точкою 50% (-65px). Збільшуйте або зменшуйте 50%.
   3. Швидкість руху:
      - Змінюйте час у властивості animation (наприклад, 1.4s).
*/

/* Контейнер хотспота стрілки (вмикаємо 3D-простір) */
.floor-arrow-wrapper {
	transform-style: preserve-3d !important; /* Увімкнення 3D-режиму */
	perspective: 600px !important;          /* Глибина 3D-перспективи кадру */
}

/* Анімація тіла стрілки (рух вглиб кадру і повернення) */
@keyframes slideArrowOnFloor {
	0%, 100% {
		transform: rotateX(65deg) translateY(-48px) translateZ(0px) scale(0.8, 1.15); /* Старт/фініш позиція */
		opacity: 0.85;                                                         /* Початкова прозорість */
	}
	50% {
		transform: rotateX(65deg) translateY(-65px) translateZ(-12px) scale(0.84, 1.2075); /* Пік висунення вперед */
		opacity: 1;                                                            /* Повна видимість у піку */
	}
}

/* Анімація тіні (синхронний рух та пульсація розмиття) */
@keyframes pulseShadowOnFloor {
	0%, 100% {
		transform: rotateX(65deg) translateY(-48px) translateZ(0px) scale(0.72, 1.035); /* Старт/фініш тіні */
		opacity: 0.35;                                                         /* Початкова розмитість тіні */
	}
	50% {
		transform: rotateX(65deg) translateY(-65px) translateZ(-12px) scale(0.816, 1.173); /* Пік тіні */
		opacity: 0.6;                                                          /* Насиченість тіні у піку */
	}
}

/* Базові стилі та плавність для тіла стрілки */
.floor-arrow-body {
	animation: slideArrowOnFloor 1.4s infinite ease-in-out !important; /* Назва анімації, час, зациклення */
	transform-origin: 50% 50% !important;                              /* Центр нахилу елемента */
	transition: transform 0.25s ease-out, opacity 0.25s ease-out !important; /* Плавність при hover */
}

/* Базові стилі та плавність для тіні стрілки */
.floor-arrow-shadow {
	animation: pulseShadowOnFloor 1.4s infinite ease-in-out !important; /* Назва анімації тіні */
	transform-origin: 50% 50% !important;                              /* Центр нахилу тіні */
	transition: transform 0.25s ease-out, opacity 0.25s ease-out !important; /* Плавність при hover */
}

/* Стан при наведенні курсора (:hover) для тіла стрілки */
.floor-arrow-wrapper:hover .floor-arrow-body {
	animation: none !important;                                        /* Зупинка анімації */
	transform: rotateX(65deg) translateY(-48px) translateZ(0px) scale(0.8, 1.15) !important; /* Фіксація позиції */
	opacity: 0.85 !important;                                          /* Фіксація прозорості */
}

/* Стан при наведенні курсора (:hover) для тіні стрілки */
.floor-arrow-wrapper:hover .floor-arrow-shadow {
	animation: none !important;                                        /* Зупинка анімації тіні */
	transform: rotateX(65deg) translateY(-48px) translateZ(0px) scale(0.72, 1.035) !important; /* Фіксація тіні */
	opacity: 0.35 !important;                                          /* Фіксація прозорості тіні */
}

/* ========================================================================== */
/* #endregion */
/* ========================================================================== */

/* ========================================================================== */
/* #region 2. АКОРДЕОН МЕНЮ (ACCORDION NAVIGATION MENU - GLASSMORPHISM)      */
/* ========================================================================== */

/* Базовий контейнер для всього меню акордеона */
.p2vr-accordion-container {
	box-sizing: border-box !important;
	width: 100% !important;
	padding: 6px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 13px !important;
	color: rgba(255, 255, 255, 0.9) !important;
	user-select: none !important;
}

/* Окремий головний пункт меню (картка туру/корпусу) у вигляді матового скла */
.p2vr-acc-item {
	margin-bottom: 6px !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	background: rgba(20, 26, 38, 0.55) !important;
	backdrop-filter: blur(16px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(16px) saturate(180%) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.p2vr-acc-item:last-child {
	margin-bottom: 0 !important;
}

/* Шапка головного пункту меню */
.p2vr-acc-header {
	position: relative !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 11px 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.3px !important;
	cursor: pointer !important;
	color: rgba(255, 255, 255, 0.85) !important;
	background: rgba(255, 255, 255, 0.03) !important;
	/* Анімуємо ТІЛЬКИ колір та фон, щоб уникнути сіпання при зникненні */
	transition: background 0.25s ease, color 0.25s ease, text-shadow 0.25s ease !important;
	overflow: hidden !important;
	border-top-left-radius: 8px !important;
	border-top-right-radius: 7px !important;
	border-bottom-left-radius: 8px !important;
	border-bottom-right-radius: 7px !important;
}

/* Коли картка відкрита, прибираємо нижнє закруглення шапки, щоб вона з'єдналася з підменю */
.p2vr-acc-item.open .p2vr-acc-header {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/* Ефект світлового бліку при наведенні миші на заголовок */
.p2vr-acc-header::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: -100% !important;
	width: 60% !important;
	height: 100% !important;
	background: linear-gradient(
		90deg, 
		transparent, 
		rgba(255, 255, 255, 0.08), 
		transparent
	) !important;
	transition: left 0.6s ease !important;
}

.p2vr-acc-header:hover::before {
	left: 140% !important;
}

.p2vr-acc-header:hover {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.08) !important;
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
}

/* Стрілочка-шеврон праворуч у шапці */
.p2vr-acc-arrow {
	width: 7px !important;
	height: 7px !important;
	border-right: 2px solid rgba(255, 255, 255, 0.6) !important;
	border-bottom: 2px solid rgba(255, 255, 255, 0.6) !important;
	transform: rotate(45deg) !important;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease !important;
}

.p2vr-acc-header:hover .p2vr-acc-arrow {
	border-color: #ffffff !important;
}

.p2vr-acc-item.open .p2vr-acc-arrow {
	transform: rotate(-135deg) !important;
	border-color: #00d2ff !important;
}

/* Контейнер підменю (закруглюється знизу у відкритому стані) */
.p2vr-acc-submenu {
	max-height: 0;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.18) !important;
	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
	border-bottom-left-radius: 7px !important;
	border-bottom-right-radius: 7px !important;
}

/* Коли картка відкрита: додаємо відступи зверху/знизу, а також по 4px зліва і справа 
   для дочірніх елементів, щоб вони не прилипали до країв головної рамки */
.p2vr-acc-item.open .p2vr-acc-submenu {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	padding-left: 4px !important;
	padding-right: 4px !important;
	border-bottom-left-radius: 7px !important;
	border-bottom-right-radius: 7px !important;
}

/* Стилі для дочірніх кнопок */
.p2vr-acc-submenu .p2vr-acc-header {
	padding: 9px 14px 9px 26px !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	border-radius: 6px !important; /* Закруглюємо кожен дочірній елемент окремо, щоб вони виглядали акуратними плашками */
	margin-bottom: 0px !important;  /* Невеликий вертикальний зазор між дочірніми елементами */
	border-top: none !important;
}

.p2vr-acc-submenu .p2vr-acc-header:last-child {
	margin-bottom: 0 !important;
}

.p2vr-acc-submenu .p2vr-acc-header:hover {
	background: rgba(0, 210, 255, 0.08) !important;
	color: #ffffff !important;
}

/* Активний стан поточного відкритого поверху/панорами */
.p2vr-acc-header.active {
	font-weight: 700 !important;
	color: #00d2ff !important; /* Яскраво-блакитний колір тексту */
	background: rgba(0, 210, 255, 0.22) !important; /* Контрастний фон */
	border-left: 4px solid #00d2ff !important; /* Товста лінія зліва */
	box-shadow: inset 0 0 14px rgba(0, 210, 255, 0.35), 0 0 8px rgba(0, 210, 255, 0.2) !important;
	text-shadow: 0 0 8px rgba(0, 210, 255, 0.8) !important;
}

/* Підсвічування для вкладених підпунктів поверхів */
.p2vr-acc-submenu .p2vr-acc-header.active {
	background: linear-gradient(90deg, rgba(0, 210, 255, 0.3) 0%, rgba(0, 210, 255, 0.08) 100%) !important;
	border-left: 4px solid #00d2ff !important;
}

/* Підсвітка та рамка головної картки у розгорнутому стані */
.p2vr-acc-item.open {
	border-color: rgba(0, 210, 255, 0.3) !important;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 210, 255, 0.1) !important;
}

/* ========================================================================== */
/* МАРКЕР ПОТОЧНОГО РОЗТАШУВАННЯ ПАНОРАМИ (Червоний кружечок)                  */
/* ========================================================================== */

.p2vr-acc-target.current-pano-location span::after {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	background-color: #ff3b30; /* Яскраво-червоний колір маркера */
	border-radius: 50%;
	margin-left: 8px;
	vertical-align: middle;
	box-shadow: 0 0 6px rgba(255, 59, 48, 0.8);
	animation: p2vr-dot-pulse 2s infinite ease-in-out;
}

@keyframes p2vr-dot-pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 0.85;
	}
	50% {
		transform: scale(1.35);
		opacity: 1;
	}
}

/* ========================================================================== */
/* #endregion */
/* ========================================================================== */

/* ========================================================================== */
/* #region 2.1. РОЗДІЛЬНИК ГОЛОВНОГО  МЕНЮ (Accordion)                           */
/* ========================================================================== */

.p2vr-acc-divider {
    height: 2px !important;                 /* Товщина лінії (1 піксель) */
    margin: 4px 4px !important;             /* Зовнішні відступи: 4px зверху/знизу, 6px зліва/справа */
    
    background: linear-gradient(
        90deg,                              /* Напрямок градієнта: зліва направо (горизонтально) */
        rgba(255, 255, 255, 0) 0%,        /* Початок лінії (лівий край): повністю прозорий */
        rgba(37, 201, 19, 0.753) 50%,       /* Центр лінії: */
        rgba(255, 255, 255, 0) 100%       /* Кінець лінії (правий край): повністю прозорий */
    ) !important;
    
    box-shadow: 0 0 6px rgba(0, 210, 255, 0.2) !important; /* Розмита неонова підсвітка навколо лінії (блакитне свічення) */
}

/* ========================================================================== */
/* #endregion                                                                 */
/* ========================================================================== */

/* ========================================================================== */
/* #region 3. УНІВЕРСАЛЬНІ СТИЛІ ДЛЯ ВСІХ КАРТ ТА ПЛАНІВ ПОВЕРХІВ             */
/* ========================================================================== */

/* Закріплюємо меню та карти на відповідних шарах */
#menu_container,
.menu_container,
.p2vr-accordion-container {
	z-index: 9999 !important;
}

.p2vr-map-overlay,
[class*="ggskin_map"],
[class*="plan_"],
[class*="map_"] {
	/* z-index: 100 !important; */
	transition: opacity 0.2s ease-in-out !important; /* Анімуємо ТІЛЬКИ opacity */
}

/* КРИТИЧНО: Приховані Pano2VR карти МИТТЄВО гасять усі дочірні зелені маркери */
[style*="visibility: hidden"] .ggskin_mark,
[style*="visibility: hidden"] div[class*="mark"],
[style*="display: none"] .ggskin_mark,
[style*="display: none"] div[class*="mark"],
.p2vr-map-overlay[style*="visibility: hidden"] *,
.p2vr-map-overlay[style*="display: none"] * {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* 1. Зовнішній контейнер головної карти */
.p2vr-map-overlay {
    background-color: transparent !important;
    background: none !important;
    border: none !important;

    /* Адаптація пропорцій контейнера під екран пристрою */
    aspect-ratio: 3984 / 3170 !important; /* Ваші реальні пропорції */
    max-width: 100% !important;
    max-height: 100% !important;
    margin: auto !important;
}

/* 2. Прибираємо фони у внутрішніх елементів */
.p2vr-map-overlay * {
    background-color: transparent !important;
    background: none !important;
}

/* 3. Рамка та закруглення через внутрішній контейнер */
.p2vr-map-overlay > div {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.p2vr-map-overlay > div::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 3px solid #007bff !important;
    border-radius: 12px !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
}

/* 4. Очищаємо стилі з самого зображення/холста */
.p2vr-map-overlay > div > img:first-child,
.p2vr-map-overlay > div > canvas:first-child,
.p2vr-map-overlay > img:first-child,
.p2vr-map-overlay > canvas:first-child {
    border: none !important;
    box-shadow: none !important;
}

.p2vr-map-overlay div[class*="mark"] img,
.p2vr-map-overlay div[class*="icon"] img,
.p2vr-map-overlay div[class*="hotspot"] img {
    border: none !important;
    border-radius: 0 !important;
}

/* Керування закругленням векторних плашок полігонів/маркерів (SVG) */
.p2vr-map-overlay svg rect,
.p2vr-map-overlay div[class*="mark"] svg rect,
.p2vr-map-overlay .map-bind svg rect {
    rx: 2px !important; /* Радіус кутів по горизонталі (0px — повністю гострі кути) */
    ry: 2px !important; /* Радіус кутів по вертикалі */
}

/* 5. Пропуск кліків крізь прозорі поля */
.p2vr-map-overlay {
    pointer-events: none !important;
}

/* 6. Реакція на кліки ТІЛЬКИ у видимого контейнера карти */
.p2vr-map-overlay:not([style*="visibility: hidden"]) img,
.p2vr-map-overlay:not([style*="visibility: hidden"]) canvas,
.p2vr-map-overlay:not([style*="visibility: hidden"]) div[class*="mark"],
.p2vr-map-overlay:not([style*="visibility: hidden"]) .ggskin_mark {
    pointer-events: auto !important;
}



/* ========================================================================== */
/* #endregion */
/* ========================================================================== */

/* ========================================================================== */
/* #region 4. НАПИСИ ТА МАРКЕРИ НА КАРТІ (MAP LABELS)                        */
/* ========================================================================== */

/* Напис "Ви тут" - форматування */
.ggskin_map .map-text-on-top {
    font-style: italic !important;
    font-family: 'Marck Script', cursive !important;
    text-shadow: 0 0 8px #ffffff, 0 0 18px #ffffff, 2px 2px 5px #ffffff !important;
}

/* ========================================================================== */
/* #endregion */
/* ========================================================================== */