/**
 * Image Map Pro - Interactive Hotspot Fix
 * 
 * Problem: Interactive hotspots/areas are not responding to mouse hover
 * Solution: Precise CSS fixes for Image Map Pro visibility and pointer events
 * 
 * FOCUS: Only fix what's broken, don't break what works
 */

/* ============================================================================
   IMAGE MAP PRO CONTAINER - BASIC REQUIREMENTS
   ============================================================================ */

/* Ensure Image Map Pro containers have proper overflow settings */
[id*="image-map-pro"] {
  position: relative !important;
  overflow: visible !important; /* CRITICAL: Allow hotspots to be visible */
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Image Map Pro wrapper - don't clip children */
.jcm-shortcode-wrapper [id*="image-map-pro"],
.jcm-shortcode-fullwidth [id*="image-map-pro"] {
  overflow: visible !important;
}

/* ============================================================================
   HOTSPOTS/INTERACTIVE AREAS - FORCE VISIBILITY AND INTERACTION
   ============================================================================ */

/* Image Map Pro spots, shapes, and interactive areas - CRITICAL */
/* PRIORITY 1: SVG-based hotspots (Image Map Pro v6) */
[id*="image-map-pro"] svg path,
[id*="image-map-pro"] svg polygon,
[id*="image-map-pro"] svg rect,
[id*="image-map-pro"] svg circle,
[id*="image-map-pro"] svg ellipse {
  pointer-events: auto !important; /* CRITICAL: Enable mouse interaction on SVG */
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* SEPARATE HANDLING: Make polygons/shapes visible with debug outline */
[id*="image-map-pro"] svg polygon,
[id*="image-map-pro"] svg rect,
[id*="image-map-pro"] svg circle,
[id*="image-map-pro"] svg ellipse {
  fill: rgba(255, 0, 0, 0.1) !important; /* Light red fill for visibility */
  fill-opacity: 0.1 !important; /* Semi-transparent */
  stroke: rgba(255, 0, 0, 0.5) !important; /* Red outline */
  stroke-width: 2px !important;
  stroke-opacity: 0.5 !important; /* Semi-transparent border */
}

/* SEPARATE HANDLING: Paths (spots) - keep more transparent */
[id*="image-map-pro"] svg path {
  fill-opacity: 0 !important; /* Paths remain invisible until hover */
  stroke-opacity: 0 !important;
}

/* PRIORITY 2: Legacy HTML-based hotspots (fallback) */
[id*="image-map-pro"] .imp-spot,
[id*="image-map-pro"] .imp-shape,
[id*="image-map-pro"] .imp-hotspot,
[id*="image-map-pro"] .imp-area,
[id*="image-map-pro"] .imp-region,
[id*="image-map-pro"] [class*="spot"],
[id*="image-map-pro"] [class*="shape"],
[id*="image-map-pro"] [class*="hotspot"],
[id*="image-map-pro"] [class*="area"],
[id*="image-map-pro"] [class*="region"],
[id*="image-map-pro"] [data-id],
[id*="image-map-pro"] [data-spot],
[id*="image-map-pro"] [data-tooltip] {
  pointer-events: auto !important; /* CRITICAL: Enable mouse interaction */
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  position: absolute !important; /* Ensure proper positioning */
  z-index: 100 !important; /* Above base image */
}

/* SVG elements inside Image Map Pro */
[id*="image-map-pro"] svg {
  overflow: visible !important;
  pointer-events: auto !important;
  max-width: 100%;
  height: auto;
}

/* SVG hover effects - STRONG visibility on hover */
[id*="image-map-pro"] svg path:hover,
[id*="image-map-pro"] svg polygon:hover,
[id*="image-map-pro"] svg rect:hover,
[id*="image-map-pro"] svg circle:hover,
[id*="image-map-pro"] svg ellipse:hover {
  fill: rgba(0, 123, 255, 0.4) !important; /* Strong blue highlight */
  fill-opacity: 0.4 !important; 
  stroke: rgba(0, 123, 255, 1) !important; /* Solid blue border */
  stroke-width: 3px !important; /* Thicker border */
  stroke-opacity: 1 !important;
  transform: scale(1.02) !important; /* Slight zoom effect */
}

/* AGGRESSIVE POLYGON VISIBILITY - Override any conflicting styles */
[id*="image-map-pro"] svg polygon[style*="fill-opacity: 0"],
[id*="image-map-pro"] svg rect[style*="fill-opacity: 0"],
[id*="image-map-pro"] svg circle[style*="fill-opacity: 0"],
[id*="image-map-pro"] svg ellipse[style*="fill-opacity: 0"] {
  fill-opacity: 0.15 !important; /* Force visibility even if inline style says 0 */
  stroke-opacity: 0.6 !important;
}

/* FORCE DISPLAY for hidden polygons */
[id*="image-map-pro"] svg polygon[style*="display: none"],
[id*="image-map-pro"] svg rect[style*="display: none"],
[id*="image-map-pro"] svg circle[style*="display: none"],
[id*="image-map-pro"] svg ellipse[style*="display: none"] {
  display: block !important;
}

/* ============================================================================
   TOOLTIPS AND POPUPS - HIGH Z-INDEX
   ============================================================================ */

/* Image Map Pro tooltips and popups - must appear above everything */
[id*="image-map-pro"] .imp-tooltip,
[id*="image-map-pro"] .imp-popup,
[id*="image-map-pro"] .imp-ui-element,
[id*="image-map-pro"] [class*="tooltip"],
[id*="image-map-pro"] [class*="popup"] {
  z-index: 999999 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  position: absolute !important;
}

/* ============================================================================
   HIGHLIGHT/HOVER EFFECTS - MUST BE VISIBLE
   ============================================================================ */

/* Image Map Pro highlight and fill effects */
[id*="image-map-pro"] .imp-highlight,
[id*="image-map-pro"] .imp-fill,
[id*="image-map-pro"] [class*="highlight"],
[id*="image-map-pro"] [class*="fill"],
[id*="image-map-pro"] [class*="hover"] {
  pointer-events: none !important; /* Don't block parent hover */
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* ============================================================================
   BASE IMAGE - RESPONSIVE BUT DON'T BREAK POSITIONING
   ============================================================================ */

/* Base image - responsive but maintain aspect ratio */
[id*="image-map-pro"] img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  pointer-events: none !important; /* Let hotspots handle clicks */
}

/* ============================================================================
   CONTAINER FIXES - DON'T BREAK PARENT LAYOUTS
   ============================================================================ */

/* Parent containers of Image Map Pro - minimal changes */
.jcm-shortcode-wrapper {
  position: relative;
}

/* Don't force full-width changes that break layout */
.jcm-shortcode-fullwidth [id*="image-map-pro"] {
  max-width: 100% !important;
  width: 100% !important;
}

/* ============================================================================
   AGGRESSIVE FIXES - OVERRIDE ANY COMPETING STYLES
   ============================================================================ */

/* FORCE visibility on ALL potential hotspot elements */
[id*="image-map-pro"] *[class*="spot"],
[id*="image-map-pro"] *[class*="hotspot"],
[id*="image-map-pro"] *[class*="shape"],
[id*="image-map-pro"] *[class*="area"],
[id*="image-map-pro"] *[data-*],
[id*="image-map-pro"] svg *,
[id*="image-map-pro"] .imp-spot,
[id*="image-map-pro"] .imp-shape,
[id*="image-map-pro"] .imp-hotspot,
[id*="image-map-pro"] .imp-area {
  pointer-events: auto !important;
  cursor: pointer !important;
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1000 !important;
}

/* Ensure BODY and HTML don't interfere */
body [id*="image-map-pro"],
html [id*="image-map-pro"] {
  overflow: visible !important;
}

/* Override any theme/plugin CSS that might hide elements */
.jcm-single-inwestycja-container [id*="image-map-pro"],
.jcm-single-lokal-container [id*="image-map-pro"],
.elementor [id*="image-map-pro"],
div [id*="image-map-pro"] {
  overflow: visible !important;
  position: relative !important;
}

/* ============================================================================
   DEBUG - TEMPORARY VISIBILITY CHECK
   ============================================================================ */

/* TEMPORARY: Add debug visualization for hotspots (remove in production) */
/* Debug for SVG-based hotspots */
[id*="image-map-pro"] svg path,
[id*="image-map-pro"] svg polygon,
[id*="image-map-pro"] svg rect,
[id*="image-map-pro"] svg circle {
  stroke: rgba(255, 0, 0, 0.5) !important; /* Debug red stroke */
  stroke-width: 1px !important;
  stroke-opacity: 0.8 !important;
  fill: rgba(255, 0, 0, 0.1) !important; /* Debug red fill */
  fill-opacity: 0.1 !important;
}

/* Debug for HTML-based hotspots */
[id*="image-map-pro"] .imp-spot,
[id*="image-map-pro"] .imp-shape,
[id*="image-map-pro"] .imp-hotspot,
[id*="image-map-pro"] *[class*="spot"],
[id*="image-map-pro"] *[class*="hotspot"] {
  outline: 2px solid rgba(255, 0, 0, 0.3) !important;
  outline-offset: -1px !important;
}

/* Enhanced hover debug */
[id*="image-map-pro"] svg path:hover,
[id*="image-map-pro"] svg polygon:hover,
[id*="image-map-pro"] svg rect:hover,
[id*="image-map-pro"] svg circle:hover {
  stroke: rgba(255, 0, 0, 1) !important; /* Bright red on hover */
  stroke-width: 3px !important;
  fill: rgba(255, 0, 0, 0.3) !important; /* More visible fill */
  fill-opacity: 0.3 !important;
}

[id*="image-map-pro"] .imp-spot:hover,
[id*="image-map-pro"] .imp-shape:hover,
[id*="image-map-pro"] .imp-hotspot:hover {
  outline: 3px solid rgba(255, 0, 0, 0.8) !important;
  outline-offset: -2px !important;
}

/* ============================================================================
   RESPONSIVE - MOBILE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
  /* Ensure hotspots are big enough for touch */
  [id*="image-map-pro"] .imp-spot,
  [id*="image-map-pro"] .imp-shape,
  [id*="image-map-pro"] .imp-hotspot {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  
  /* Mobile tooltips */
  [id*="image-map-pro"] .imp-tooltip,
  [id*="image-map-pro"] .imp-popup {
    max-width: 90vw !important;
    font-size: 14px !important;
  }
}