/**
 * Wimmelbild Frontend CSS
 * Styles für die Frontend-Darstellung
 */

/* --- Block-Container --- */

.wp-block-wimmelbild-map {
    position: relative; /* damit Nav-Buttons absolut darin positioniert werden können */
}

/* Sichtbarer Bereich, in dem gescrollt und gedragt wird */
/* .wimmelbild-map-viewport, */
.wimmelbild-map-container {
    width: 100%;
    height: calc(100dvh - env(safe-area-inset-bottom));   /* z.B. 60% der Viewport-Höhe – kannst du nach Geschmack anpassen */
    overflow: auto;
    cursor: grab;
    scrollbar-width: none;       
    -ms-overflow-style: none; 
}

/* .wimmelbild-map-viewport::-webkit-scrollbar, */
.wimmelbild-map-container::-webkit-scrollbar {
    display: none;               /* Chrome, Safari, etc. */
}

/* Während des Draggens */
/* .wimmelbild-map-viewport.is-dragging, */
.wimmelbild-map-container.is-dragging {
    cursor: grabbing;
}

/* Container für Bild + Punkte */
/* .wimmelbild-map-container {
    position: relative;
    display: inline-block;
} */

/* Punkte-Overlay bleibt wie gehabt */
.wimmelbild-map-points {
    position: absolute;
    inset: 0;
    pointer-events: none;
}



/* --- Bild + innerer Wrapper --- */

.wimmelbild-map-inner {
    position: relative;
}

/* Das Bild selbst */
.wimmelbild-map-image {
    display: block;
    height: auto;
    max-width: none;  /* wichtig, damit die Karte größer als der Viewport sein kann */
    width: auto;
}

/* --- Punkte / Marker --- */

.wimmelbild-point {
    position: absolute;
    pointer-events: all;
    cursor: pointer;

    /* zentriert den Punkt auf top/left (in %) */
    transform: translate(-50%, -50%);

    font-size: 28px;
    color: var(--color-secondary);
    transition: all 0.3s ease;
    z-index: 10;

    background: rgba(255, 255, 255, 0.9);
    width: 40px;
    height: 40px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

    /* Pulsierender Effekt für bessere Sichtbarkeit */
    animation: pulse 2s infinite;
}

.wimmelbild-point:hover {
    /* transform: translate(-50%, -50%) scale(1.2); */
    /* transform: scale(1.2); */
    color: var(--color-secondary-hover);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: none;
}

.wimmelbild-point:focus, .wimmelbild-point:focus, .wimmelbild-point:focus-visible, .wimmelbild-point:active {
    /* transform: translate(-50%, -50%) scale(1.2); */
    /* transform: scale(1.2); */
    color: var(--color-secondary-hover);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: none;
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}


.wimmelbild-point i {
    font-size: 20px;
}

/* Puls-Effekt */
@keyframes pulse {
    0%, 100% {
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.2),
            0 0 0 0 rgba(170, 0, 0, 0.4);
    }
    50% {
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.2),
            0 0 0 10px rgba(170, 0, 0, 0);
    }
}

/* --- Navigationsbuttons für Scrollen --- */

.wimmelbild-nav-button {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    cursor: pointer;
    user-select: none;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.wimmelbild-nav-button:hover {
    /* transform: scale(1.05); */
    background: rgba(0, 0, 0, 0.7);
}

.wimmelbild-nav-button.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Positionen im Block */
.wimmelbild-nav-up {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
}

.wimmelbild-nav-down {
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
}

.wimmelbild-nav-left {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.wimmelbild-nav-right {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/* --- Modal-Anpassungen --- */
.wimmelbild-modal{
}

.wimmelbild-modal .modal-content{
    --bs-modal-padding: 1rem;  
    --bs-modal-header-padding: 1rem; 
    border: none;
    border-radius: 0;
}    


.wimmelbild-modal .modal-header h5 {
   margin: 0;
}

.wimmelbild-modal .modal-body {
    max-height: 60vh;
}

.wimmelbild-modal .modal-body p:last-child {
    margin-bottom: 0;
}

/* --- Responsive Anpassungen --- */

@media (max-width: 768px) {
    .wimmelbild-point {
        font-size: 24px;
        width: 36px;
        height: 36px;
    }

    .wimmelbild-point i {
        font-size: 18px;
    }

    .wimmelbild-nav-button {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .wimmelbild-point {
        font-size: 20px;
        width: 32px;
        height: 32px;
    }

    .wimmelbild-point i {
        font-size: 16px;
    }
}