/* =========================================
   МАРКЕРИ ФОТОГРАФІЙ НА КАРТІ
========================================= */
.custom-photo-marker {
    background: transparent;
    border: none;
}

.photo-marker-container {
    position: relative;
    width: 32px;
    height: 32px;
}

.photo-marker-body {
    width: 25px;
    height: 25px;
    background-color: #ff5d5d;
    border: 2px solid #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.photo-marker-arrow {
    position: absolute;
    top: -16px; 
    left: 50%;
    margin-left: -2px; 
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;    
    border-right: 8px solid transparent;   
    border-bottom: 14px solid #ffffff; 
    filter: drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000);
    pointer-events: none;
    transition: border-bottom-color 0.2s;
}

.photo-camera-icon i {
    color: #000000;
    font-size: 14px;
}

/* Ефекти наведення та активного стану */
.photo-marker-container:hover .photo-marker-body,
.custom-photo-marker.active-marker .photo-marker-body {
    background-color: #fff64b !important;
    border-color: #000 !important;
    transform: scale(1.15);
}

.photo-marker-container:hover .photo-marker-arrow,
.custom-photo-marker.active-marker .photo-marker-arrow {
    border-bottom-color: #fff64b !important; 
}

.photo-marker-container:hover .photo-camera-icon i,
.custom-photo-marker.active-marker .photo-camera-icon i {
    color: #000 !important;
}
/* =========================================
   ІНФОРМАЦІЙНА ПЛАШКА
========================================= */
.photo-panel {
    position: fixed; top: 0; left: 0; /* За замовчуванням зліва */
    width: 50%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85); 
    z-index: 2000;
    display: flex; flex-direction: column; padding: 20px; box-sizing: border-box;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    backdrop-filter: blur(5px);
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.photo-panel.hidden { 
    transform: translateX(-100%); 
    opacity: 0; 
    visibility: hidden; /* Додатково повністю ховаємо елемент від подій і рендерингу */
    pointer-events: none; 
}

/* МОДИФІКАТОР: Плашка виїжджає СПРАВА (перекриває праву карту) */
.photo-panel.panel-right { left: auto; right: 0; }
.photo-panel.panel-right.hidden { transform: translateX(100%); }

.photo-panel-close {
    position: absolute; top: 15px; right: 20px; background: none; border: none;
    color: #fff; font-size: 30px; line-height: 1; cursor: pointer; z-index: 2010; transition: color 0.2s;
}
.photo-panel-close:hover { color: #fff64b; }

.photo-panel-content {
    flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
    overflow-y: auto; margin-top: 30px; padding-bottom: 20px;
}
.photo-panel-content img {
    max-width: 100%; max-height: 60vh; height: auto; border: 3px solid #333; border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.7); box-sizing: border-box;
}
.photo-panel-desc { color: #fff; font-size: 16px; font-family: 'Google Sans', Arial, sans-serif; margin-top: 20px; text-align: center; max-width: 85%; }
.photo-panel-author { color: #aaa; font-size: 13px; margin-top: 10px; text-align: center; max-width: 85%; }

/* =========================================
   АДАПТИВНІСТЬ ДЛЯ МОБІЛЬНИХ ПРИСТРОЇВ
========================================= */
@media (max-width: 768px) {
    .photo-panel { width: 100%; height: 50%; left: 0 !important; right: auto !important; top: 0; }
    .photo-panel.hidden { transform: translateY(-100%); }
    
    /* МОДИФІКАТОР МОБІЛЬНИЙ: Плашка виїжджає ЗНИЗУ (перекриває нижню карту) */
    .photo-panel.panel-right { top: auto; bottom: 0; }
    .photo-panel.panel-right.hidden { transform: translateY(100%); }

    .photo-panel-content { margin-top: 20px; justify-content: flex-start; }
    .photo-panel-content img { max-height: 25vh; max-width: 100%; width: auto; }
    .photo-panel-desc { font-size: 13px; margin-top: 10px; max-width: 100%; line-height: 1.3; }
    .photo-panel-author { font-size: 11px; margin-top: 6px; max-width: 100%; }
    .photo-panel-close { top: 8px; right: 12px; font-size: 26px; }
}



.photo-panel-author a {
    color: #4da6ff; /* Світло-блакитний колір для гарної видимості на темному */
    text-decoration: underline;
}

.photo-panel-author a:hover {
    color: #ff0000; 
}

/* Прозорий контейнер маркера */
.fast-photo-marker {
    background: transparent;
    border: none;
    cursor: pointer;
}

/* Стандартний стан: червоний колір, нормальний розмір */
.fast-photo-marker .marker-dot {
    fill: #ff0000;
    transition: transform 0.2s ease;
    transform-origin: center;
}
.fast-photo-marker .marker-ray {
    fill: #ff0000;
    fill-opacity: 0.4;
    transition: transform 0.2s ease;
    transform-origin: center;
}

/* Стан при наведенні (Hover) та коли фото відкрите (Active): стає жовтим і збільшується */
.fast-photo-marker:hover .marker-dot,
.active-marker .marker-dot {
    fill: #ffcc00; /* Жовтий */
    transform: scale(1.4); /* Збільшуємо центральну точку */
}

.fast-photo-marker:hover .marker-ray,
.active-marker .marker-ray {
    fill: #ffcc00; /* Жовтий промінь */
    fill-opacity: 0.6;
    transform: scale(1.25); /* Збільшуємо промінь */
}

/* 1. Робимо невидимий квадрат маркера прозорим для мишки/пальця */
.fast-photo-marker {
    pointer-events: none !important; 
}

/* 2. Повертаємо клікабельність ТІЛЬКИ самим червоним намальованим елементам */
.fast-photo-marker svg circle,
.fast-photo-marker svg polygon {
    pointer-events: auto !important;
    cursor: pointer;
}

/* 3. Активний маркер (який зараз відкрито у панелі) гарантовано лежить поверх усіх інших */
.fast-photo-marker.active-marker {
    z-index: 99999 !important;
}