/* ========================================
   POI MARKERS & POPUPS - v1.8.2
   ========================================
   Liquid Glass Design for Map POI Markers

   v1.8.2 - Z-Index Hierarchy Fix (CRITICAL BUGFIX):
   - POPUP FIX: Mapbox Popups jetzt z-index: 100 (immer über Markern)
   - MARKER FIX: POI Markers z-index: 1 (niedrigste Ebene)
   - CLUSTER FIX: Cluster Markers z-index: 2 (über POIs, unter Popups)
   - REASON: Popups wurden von benachbarten Markern überlagert
   - RESULT: Popups liegen IMMER über allen Markern (korrekte Layering)

   v1.8.1 - Enhanced Visibility (USER FEEDBACK):
   - VISIBILITY FIX: Thick dark blue border now DEFAULT on all markers (not just active)
   - ACTIVE STATE: Solid dark blue fill (#003566) + WHITE icon (improved contrast)
   - REASON: Better POI marker visibility at all zoom levels
   - RESULT: Inactive markers more visible, active markers clearly distinguished

   v1.8.0 - POI Clustering System (PERFORMANCE OPTIMIZATION):
   - NEW FEATURE: Cluster markers for grouped POIs
   - ZOOM-BASED: z<=13 (heavy), z14-15 (medium), z>=16 (no clustering)
   - LIQUID GLASS: Identical design to individual POI markers (larger: 36px/18px)
   - CLUSTER COUNT: Shows number of POIs in cluster instead of category icon
   - INTERACTIVE: Click to zoom in + show POI breakdown popup
   - FILTER-AWARE: Clusters update dynamically when category filters change
   - PERFORMANCE: Reduces DOM elements from 138 → ~20-30 markers (at low zoom)

   v1.7.0 - Transition Fix (CRITICAL BUGFIX):
   - CRITICAL FIX: Removed transition from .poi-marker element
   - CRITICAL FIX: Replaced transition:all with specific properties in .poi-marker-inner
   - GRUND: transition:all animiert auch Mapbox's transform → Marker bewegten sich mit Karte!
   - RESULT: POI Marker bleiben PERFEKT fixiert - kein verzögertes Bewegen mehr!

   v1.6.0 - Hide Instead of Ghost (UX Improvement):
   - CHANGE: .ghosted nutzt display:none statt opacity:0.3
   - GRUND: Cleaner UX - deaktivierte POIs komplett ausblenden
   - RESULT: Karte ist übersichtlicher, keine grau transparenten Marker mehr

   v1.5.0 - Mapbox Transform Conflict Fix (CRITICAL):
   - CRITICAL FIX: transform: scale() von .poi-marker-inner auf .poi-marker-icon verschoben
   - GRUND: Mapbox nutzt transform: translate3d() auf .poi-marker für Geo-Positionierung
   - KONFLIKT: Scale auf .poi-marker-inner überschrieb Mapbox translate → POIs bewegten sich!
   - LÖSUNG: Scale nur auf inneres Icon-Element → keine Interferenz mit Mapbox positioning
   - RESULT: POI Marker bleiben PERFEKT fixiert bei Pan/Zoom/Hover/Active!

   v1.4.0 - Transform Optimization (PHASE 4 COMPLETE):
   - TRANSFORM: transform-origin: center center (explicit origin)
   - PERFORMANCE: will-change: transform (GPU acceleration)
   - RESULT: Cleaner scaling without Mapbox positioning conflicts! (teilweise - v1.5.0 komplett gefixt)

   v1.3.0 - Position Fix + Dunkelblau Styling:
   - CRITICAL FIX: position:relative entfernt aus .poi-marker-inner
   - Grund: Mapbox manage Transform-Positioning, position:relative stört!
   - ICONS: Dunkelblau #003566 (wie Lagebewertung Active State)
   - ACTIVE BORDER: 3px dunkelblau statt category color
   - RESULT: POI Marker bleiben FIX an Geo-Koordinaten!

   v1.2.0 - Performance Fix + Whiter Popup:
   - PERFORMANCE: Top 5 POIs per category (35 statt 297 markers)
   - POPUP: rgba(255,255,255,.95) - Viel sichtbarer!
   - RESULT: Smooth Map Movement + lesbares Popup

   v1.1.0 - Smaller, Whiter, Fixed Position:
   - SIZES: 24px (desktop), 12px (mobile)
   - ICONS: 12px (desktop), 6px (mobile)
   - BACKGROUND: rgba(255,255,255,.9) - Viel weißer!
   - BOX-SHADOW: rgba(255,255,255,.95) - Fast opaque
   - POSITION: Keine position:relative - Mapbox managed das!
   - RESULT: Kleinere, sichtbarere Marker

   v1.0.0 - Initial Release:
   - Frosted Glass effect (backdrop-filter)
   - Responsive: 48px (desktop), 24px (mobile)
   - Category-based colors
   - Ghosted state (filtered POIs)
   - Custom Mapbox Popup styling
   ======================================== */

/* ========================================
   POI MARKER CIRCLE
   ======================================== */

.poi-marker {
    width: 24px;
    height: 24px;
    cursor: pointer;
    /* ✅ FIX: No transition on marker element - Mapbox transform must be instant! */
    /* Keine position - Mapbox managed das! */
    /* v1.8.2: z-index reduced to allow popups on top */
    z-index: 1;
}

.poi-marker-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* CRITICAL FIX: No position - Mapbox manages positioning! */

    /* Viel weißer - weniger transparent! */
    background: rgba(255, 255, 255, .9);
    border: 2px solid transparent;
    /* v1.8.1: Thick dark blue border now DEFAULT (better visibility) */
    box-shadow: 0 0 0 3px #003566;
    backdrop-filter: url(#frosted);
    -webkit-backdrop-filter: url(#frosted);

    /* ✅ FIX: Only transition specific properties, NOT transform! */
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon inside marker */
.poi-marker-icon {
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #003566;  /* Dunkelblau wie Lagebewertung Active State */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.poi-marker-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

/* ========================================
   STATES
   ======================================== */

/* Hover State */
.poi-marker:hover .poi-marker-inner {
    /* ✅ FIX: Removed transform scale to prevent Mapbox positioning conflict */
    background: rgba(255, 255, 255, .95);
    /* v1.8.1: Keep dark blue border on hover */
    box-shadow: 0 0 0 3px #003566;
}

/* Scale icon instead of container to avoid Mapbox transform conflict */
.poi-marker:hover .poi-marker-icon {
    transform: scale(1.1);
    transform-origin: center center;
    will-change: transform;
}

/* Active State (when popup is open) */
.poi-marker.active .poi-marker-inner {
    /* ✅ FIX: Removed transform scale to prevent Mapbox positioning conflict */
    /* v1.8.1: Solid dark blue fill for active state (improved visibility) */
    background: #003566;
    box-shadow: 0 0 0 3px #003566;  /* Dunkelblau wie Lagebewertung */
}

/* Scale icon instead of container to avoid Mapbox transform conflict */
.poi-marker.active .poi-marker-icon {
    /* v1.8.1: WHITE icon for visibility against dark blue fill */
    color: #FFFFFF;
    transform: scale(1.15);
    transform-origin: center center;
    will-change: transform;
}

/* Ghosted State (filtered out) - Komplett ausblenden statt opacity */
.poi-marker.ghosted {
    display: none;  /* ✅ FIX v1.6.0: Komplett ausblenden statt ghosted (opacity: 0.3) */
}

/* ========================================
   RESPONSIVE (Mobile)
   ======================================== */

@media (max-width: 767px) {
    .poi-marker {
        width: 12px;
        height: 12px;
    }

    .poi-marker-icon {
        width: 6px;
        height: 6px;
    }

    .poi-marker-inner {
        border: 1px solid transparent;
        /* v1.8.1: Dark blue border DEFAULT on mobile too */
        box-shadow: 0 0 0 2px #003566;
    }

    .poi-marker:hover .poi-marker-inner {
        /* v1.8.1: Keep dark blue border on hover */
        box-shadow: 0 0 0 2px #003566;
    }

    .poi-marker.active .poi-marker-inner {
        box-shadow: 0 0 0 2px #003566;  /* Dunkelblau Mobile */
    }
}

/* ========================================
   MAPBOX POPUP OVERRIDE (Liquid Glass)
   ======================================== */

/* Popup z-index (v1.8.2: ALWAYS above markers) */
.mapboxgl-popup {
    z-index: 100;  /* Above all markers (POI: z:1, Cluster: z:2) */
}

/* Popup Container */
.mapboxgl-popup-content {
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 12px;
    overflow: hidden;
}

/* Remove default close button styling */
.mapboxgl-popup-close-button {
    display: none;
}

/* Remove arrow/tip */
.mapboxgl-popup-tip {
    display: none;
}

/* POI Popup Content */
.poi-popup {
    padding: 12px 16px;
    min-width: 160px;

    /* Viel weißer - wie POI Markers! */
    background: rgba(255, 255, 255, .95);
    border: 2px solid transparent;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1);
    backdrop-filter: url(#frosted);
    -webkit-backdrop-filter: url(#frosted);

    border-radius: 12px;
    font-family: "Satoshi", -apple-system, BlinkMacSystemFont, sans-serif;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* POI Name */
.poi-popup-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
    line-height: 1.3;
}

/* POI Distance */
.poi-popup-distance {
    font-size: 12px;
    font-weight: 500;
    color: #666666;
    font-family: "SF Mono", "Monaco", "Courier New", monospace;
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .poi-popup {
        padding: 10px 12px;
        min-width: 140px;
    }

    .poi-popup-name {
        font-size: 13px;
    }

    .poi-popup-distance {
        font-size: 11px;
    }
}

/* ========================================
   POI CLUSTER MARKERS (v1.0.0)
   ========================================
   Liquid Glass cluster markers for grouped POIs
   - Same design as individual POI markers (larger)
   - Shows count instead of category icon
   - Desktop: 36px, Mobile: 18px
   ======================================== */

/* Cluster Marker Circle (Larger than individual POIs) */
.poi-cluster-marker {
    width: 36px;
    height: 36px;
    cursor: pointer;
    /* No transition on marker - Mapbox transform must be instant */
    /* v1.8.2: z-index reduced to allow popups on top */
    z-index: 2;  /* Higher than individual POIs (z:1), lower than popups (z:100) */
}

.poi-cluster-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Liquid Glass (identical to POI markers) */
    background: rgba(255, 255, 255, .9);
    border: 2px solid transparent;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .95);
    backdrop-filter: url(#frosted);
    -webkit-backdrop-filter: url(#frosted);

    /* Specific transitions (NOT transform) */
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cluster Count (instead of icon) */
.poi-cluster-count {
    font-family: "Satoshi", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #003566;  /* Dark blue */
    line-height: 1;
    user-select: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover State */
.poi-cluster-marker:hover .poi-cluster-inner {
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1);
}

.poi-cluster-marker:hover .poi-cluster-count {
    transform: scale(1.1);
}

/* Active State (when popup is open) */
.poi-cluster-marker.active .poi-cluster-inner {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px #003566;
}

.poi-cluster-marker.active .poi-cluster-count {
    transform: scale(1.15);
}

/* Mobile: Smaller cluster markers */
@media (max-width: 767px) {
    .poi-cluster-marker {
        width: 18px;
        height: 18px;
    }

    .poi-cluster-count {
        font-size: 9px;
    }

    .poi-cluster-inner {
        border: 1px solid transparent;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .95);
    }

    .poi-cluster-marker:hover .poi-cluster-inner {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 1);
    }

    .poi-cluster-marker.active .poi-cluster-inner {
        box-shadow: 0 0 0 2px #003566;
    }
}

/* ========================================
   POI CLUSTER POPUP STYLES
   ======================================== */

.poi-cluster-popup {
    padding: 14px 18px;
    min-width: 180px;

    /* Liquid Glass (same as POI popup) */
    background: rgba(255, 255, 255, .95);
    border: 2px solid transparent;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1);
    backdrop-filter: url(#frosted);
    -webkit-backdrop-filter: url(#frosted);

    border-radius: 12px;
    font-family: "Satoshi", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Cluster Popup Title */
.poi-cluster-popup-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
    line-height: 1.3;
}

/* Cluster Popup Subtitle */
.poi-cluster-popup-subtitle {
    font-size: 12px;
    font-weight: 500;
    color: #666666;
    margin-bottom: 10px;
    font-style: italic;
}

/* Category Breakdown */
.cluster-categories {
    margin-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 8px;
}

.cluster-category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
}

.cluster-category-name {
    font-weight: 500;
    color: #334155;
}

.cluster-category-count {
    font-weight: 600;
    color: #003566;
    font-family: "SF Mono", "Monaco", "Courier New", monospace;
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .poi-cluster-popup {
        padding: 12px 14px;
        min-width: 160px;
    }

    .poi-cluster-popup-title {
        font-size: 14px;
    }

    .poi-cluster-popup-subtitle {
        font-size: 11px;
    }

    .cluster-category {
        font-size: 12px;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus state for keyboard navigation */
.poi-marker:focus {
    outline: 2px solid var(--marker-color);
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .poi-marker,
    .poi-marker-inner,
    .poi-marker-icon,
    .poi-popup {
        transition: none;
    }
}