/* ==========================================================================
   ИНТЕРФЕЙС МАКРО-КАРТЫ MOLA (ОБХОД ОГРАНИЧЕНИЙ MAP-LAYOUT)
   ========================================================================== */

/* Базовое состояние блока до клика */
.mola-zoom-wrapper {
    display: block;
    padding: 15px; 
    min-height: auto; 
    position: relative; 
    border: 1px dashed #caa684; 
    background: rgba(202, 166, 132, 0.03);
    cursor: zoom-in;
    box-sizing: border-box;
    z-index: 10;
    margin-bottom: 20px;
    width: 100%;
}

.mola-hud-badge {
    position: absolute; 
    top: 0; 
    left: 0; 
    background: #caa684; 
    color: #05050d; 
    font-size: 9px; 
    font-family: monospace; 
    padding: 2px 8px; 
    text-transform: uppercase; 
    font-weight: bold; 
    letter-spacing: 1px; 
    box-shadow: 0 0 10px rgba(202, 166, 132, 0.3); 
    z-index: 12;
}

.mola-target-img {
    width: 100%; 
    height: auto; 
    display: block; 
    margin-top: 15px; 
    border: 1px solid #1a1a3a; 
    filter: saturate(0.6) brightness(0.85); 
    transition: all 0.3s ease;
}

.mola-zoom-wrapper:hover .mola-target-img {
    filter: none; 
    border-color: #caa684;
}

/* Динамический вывод текста подсказки */
.mola-action-text::after {
    content: attr(data-normal);
    display: block;
    color: #caa684; 
    font-family: monospace; 
    font-size: 11px; 
    margin-top: 10px; 
    text-align: center; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    font-weight: bold;
    text-shadow: 0 0 8px rgba(202, 166, 132, 0.2);
}

/* ==========================================================================
   АКТИВАЦИЯ ПОЛНОГО ЭКРАНА В ОБХОД КОНТЕЙНЕРА MAP-LAYOUT
   ========================================================================== */

/* Магия CSS: когда чекбокс снаружи включен, мы принудительно вырываем блок наружу */
#mola-fullscreen-trigger:checked ~ .map-layout .mola-zoom-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 40px 30px 30px 30px !important;
    background: rgba(5, 5, 13, 0.98) !important;
    backdrop-filter: blur(15px) !important;
    z-index: 99999 !important; /* Становится поверх всех окон и шапок сайта */
    cursor: zoom-out;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Картинка во весь экран */
#mola-fullscreen-trigger:checked ~ .map-layout .mola-zoom-wrapper .mola-target-img {
    max-width: 95vw !important;
    max-height: 80vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: auto !important;
    filter: none !important;
    border-color: #caa684 !important;
    box-shadow: 0 0 50px rgba(202, 166, 132, 0.25);
}

/* Переключение текста подсказки на активное состояние */
#mola-fullscreen-trigger:checked ~ .map-layout .mola-zoom-wrapper .mola-action-text {
    margin-top: auto !important;
    padding-top: 15px;
}
#mola-fullscreen-trigger:checked ~ .map-layout .mola-zoom-wrapper .mola-action-text::after {
    content: attr(data-active);
    font-size: 12px;
    letter-spacing: 2px;
}

/* Оптимизация под мобильные дисплеи телефонов */
@media (max-width: 768px) {
    #mola-fullscreen-trigger:checked ~ .map-layout .mola-zoom-wrapper {
        padding: 30px 15px !important;
    }
    
    #mola-fullscreen-trigger:checked ~ .map-layout .mola-zoom-wrapper .mola-target-img {
        max-width: 100vw !important;
        max-height: 70vh !important;
        width: 100% !important;
        height: auto !important;
    }
}