/**
 * Wimmelbild Map Block - Styles (Frontend & Editor)
 */

:root {
  --img-width: 2560px; /* Mit Js setzen */
  --img-height: 1808px; /* Mit Js setzen */
  --scale-factor: 1;
}

@media (min-width: 2400px) {
  :root {
    --scale-factor: 1.3; /* oder welcher Wert sinnvoll ist */
  }
}

.wimmelbild-map-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.wimmelbild-map-image {
    /* max-width: 100%; */
    width: calc(var(--img-width) * var(--scale-factor));
    height: calc(var(--img-height) * var(--scale-factor));
    display: block;
}

.wimmelbild-map-points {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--img-width) * var(--scale-factor));
    height: calc(var(--img-height) * var(--scale-factor));
    /* width: 100%;
    height: 100%; */
    pointer-events: none;
}

.wimmelbild-point {
    pointer-events: all;
    cursor: pointer;
    font-size: 24px;
    color: var(--color-primary);
    transition: all 0.3s ease;
    z-index: 10;
}

.wimmelbild-point:hover {
    transform: translate(-50%, -50%) scale(1.2);
    color: var(--color-primary-dark);
}

.wimmelbild-point i {
    /* filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); */
}

/* Editor-spezifische Styles */
.wimmelbild-map-editor .wimmelbild-map-image-container {
    position: relative;
    margin-bottom: 15px;
}

.wimmelbild-map-editor .wimmelbild-map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.wimmelbild-point-preview {
    font-size: 24px;
    color: #0073aa;
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.wimmelbild-point-preview.is-selected {
    color: #d63638;
}

.wimmelbild-point-hover-label {
    margin-top: 4px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 11px;
    border-radius: 2px;
    white-space: nowrap;
}

.wimmelbild-point-popover {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -110%);
    z-index: 20;
    pointer-events: auto;
}

.wimmelbild-point-popover-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5px;

}

.wimmelbild-point-popover-body {
    padding-bottom: 5px;
}

.wimmelbild-point-preview i {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}