/* ============================================================ Hotspot Maps Widget – Frontend CSS v2.0 (Leaflet) ============================================================ */ .hmw-map-outer { position: relative; overflow: visible !important; width: 100%; } .hmw-map-canvas { width: 100%; height: 520px; display: block; } /* Leaflet container: overflow visible zodat popup buiten kaartrand kan uitsteken */ .hmw-map-canvas .leaflet-pane, .hmw-map-canvas .leaflet-map-pane, .hmw-map-canvas .leaflet-overlay-pane { overflow: visible; } /* ── Leaflet DivIcon wrapper ── Leaflet positioneert .hmw-leaflet-marker als position:absolute. Wij verwijderen de standaard border/achtergrond zodat alleen onze marker zichtbaar is. */ .hmw-leaflet-marker { background: transparent !important; border: none !important; overflow: visible !important; } /* ── Marker wrapper ── position:relative zodat de pulse ::before/::after correct worden gepositioneerd. */ .hmw-marker-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: var(--hmw-pw, var(--hmw-ps, 36px)); height: var(--hmw-ph, var(--hmw-ps, 36px)); cursor: pointer; } /* ── Pulsatie ringen ── */ .hmw-pulse::before, .hmw-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--hmw-pc, #2563eb); opacity: 0; animation: hmwPulse 2.6s ease-out infinite; pointer-events: none; } .hmw-pulse::after { animation-delay: 1.3s; } @keyframes hmwPulse { 0% { transform: scale(0.55); opacity: 0.65; } 70% { transform: scale(2.0); opacity: 0; } 100% { opacity: 0; } } /* ── Gekleurde stip ── */ .hmw-marker-dot { width: calc(var(--hmw-ps, 36px) * 0.58); height: calc(var(--hmw-ps, 36px) * 0.58); border-radius: 50%; background: var(--hmw-pc, #2563eb); border: 3px solid #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.25); position: relative; z-index: 2; cursor: pointer; transition: transform 0.15s ease; } .hmw-marker-wrap:hover .hmw-marker-dot { transform: scale(1.15); } /* ── Icon wrapper hover ── */ .hmw-marker-icon-wrap { transition: transform 0.15s ease; } .hmw-marker-wrap:hover .hmw-marker-icon-wrap { transform: scale(1.1); } /* ── Afbeelding-marker ── */ .hmw-marker-img { display: block; object-fit: contain; border: 3px solid #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.22); position: relative; z-index: 2; transition: transform 0.15s ease; } .hmw-marker-wrap:hover .hmw-marker-img { transform: scale(1.1); } /* ── Popup ── position:fixed op zodat overflow van de kaartcontainer nooit afknipt. */ .hmw-popup { overflow: hidden; box-shadow: 0 6px 28px rgba(0,0,0,0.18); z-index: 99999; font-family: inherit; min-width: 160px; pointer-events: auto; animation: hmwPopIn 0.18s ease; } @keyframes hmwPopIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Pijltje onderaan popup */ .hmw-popup::after { content: ''; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid var(--hmw-popup-bg, #ffffff); pointer-events: none; } .hmw-popup-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; line-height: 1.3; } .hmw-popup-text { font-size: 12.5px; line-height: 1.55; margin-bottom: 10px; } .hmw-popup-btn { display: inline-block; padding: 6px 14px; font-size: 12px; font-weight: 500; text-decoration: none; transition: opacity 0.15s ease; } .hmw-popup-btn:hover { opacity: 0.82; } .hmw-popup-close { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.38); color: #ffffff; border: none; font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 10; transition: background 0.15s ease; } .hmw-popup-close:hover { background: rgba(0,0,0,0.6); } /* ============================================================ Zijbalk hotspots ============================================================ */ .hmw-widget-layout { display: flex; align-items: stretch; gap: 16px; width: 100%; } .hmw-widget-layout .hmw-map-outer { flex: 1 1 0%; min-width: 0; min-height: 0; } /* .hmw-sidebar-pos-left plaatst de zijbalk vóór de kaart in de markup; flexbox toont ze dus al in de juiste volgorde, geen order-regel nodig. */ .hmw-sidebar { /* Hoogte komt van de "Kaarthoogte"-control (zelfde waarde als .hmw-map-canvas, incl. tablet/mobiel-varianten) zodat de zijbalk nooit langer wordt dan de kaart en de lijst hieronder intern scrolt in plaats van de pagina te rekken. */ box-sizing: border-box; display: flex; flex-direction: column; height: 520px; /* fallback, gelijk aan default kaarthoogte; control-waarde overschrijft dit */ min-height: 0; gap: 8px; overflow-y: auto; padding: 12px; border-radius: 10px; } .hmw-sidebar-btn { box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; /* laat titel/adres altijd exact de knopbreedte aanhouden, i.p.v. mee te krimpen op de inhoud */ gap: 2px; width: 100%; min-width: 0; border: none; cursor: pointer; text-align: left; font-family: inherit; /* Overschrijft eventuele thema-/Elementor-basisstijl voor