/* ============================================================ Hotspot Maps Widget – Frontend CSS v1.2 ============================================================ */ /* Outer wrapper: overflow visible zodat popup buiten kaartrand kan uitsteken */ .hmw-map-outer { position: relative; overflow: visible !important; width: 100%; } /* De kaartcanvas zelf mag overflow:hidden houden (Google Maps vereist dat intern), maar de Google floatPane wordt buiten deze div geplaatst, dus popup knipt nooit af. */ .hmw-map-canvas { width: 100%; height: 520px; display: block; } /* Google Maps container div heeft soms overflow:hidden — forceer zichtbaarheid op floatPane niveau */ .hmw-map-canvas > div, .gm-style { overflow: visible !important; } /* ── Marker wrapper ── */ .hmw-marker-wrap { position: absolute; display: flex; align-items: center; justify-content: center; width: var(--hmw-ps, 36px); height: var(--hmw-ps, 36px); cursor: pointer; z-index: 10; } /* ── 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/icoon marker ── */ .hmw-marker-img { border-radius: 50%; object-fit: cover; 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 ── positie wordt via JS als position:fixed op gezet zodat overflow:hidden van de kaartcontainer nooit kan afknippen */ .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-img { overflow: hidden; flex-shrink: 0; } .hmw-popup-body { padding: 12px 14px 14px; } .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); } /* ── Rich text in popup ── */ .hmw-popup-richtext p { margin: 0 0 6px; } .hmw-popup-richtext p:last-child { margin-bottom: 0; } .hmw-popup-richtext strong, .hmw-popup-richtext b { font-weight: 700; } .hmw-popup-richtext em, .hmw-popup-richtext i { font-style: italic; } .hmw-popup-richtext u { text-decoration: underline; } .hmw-popup-richtext ul, .hmw-popup-richtext ol { margin: 4px 0 6px 16px; padding: 0; } .hmw-popup-richtext li { margin-bottom: 2px; }