[data-custom-block="interactive-map"] { margin:40px 0; position: relative;} 
[data-custom-block="interactive-map"] h2.hidden { position: absolute; right:-9000px } 

[data-custom-block="interactive-map"] nav { position: absolute; top: 20px; z-index: 2; max-width: 1200px; left: 0; right: 0; margin: auto; padding:10px 20px; border-radius:10px; background:#fff; } 
[data-custom-block="interactive-map"] nav form {display:flex; gap:20px; justify-content: space-between; }
[data-custom-block="interactive-map"] nav form .search-wrapper { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; background-color: #ECECEC; border-radius: 9px; min-width: 500px; border: 0px; } 
[data-custom-block="interactive-map"] nav form .search-wrapper input[type="text"] { border:none; width:100%; background-color:#ECECEC; color:#000000; font-family:open-sans, sans-serif; font-size:1rem; padding:8px; border-radius:9px; order:1; } 
[data-custom-block="interactive-map"] nav form .search-wrapper .submit { position:relative;; margin-left:10px; order:0; } 
[data-custom-block="interactive-map"] nav form .search-wrapper .submit input { border:none; cursor:pointer; font-size:0; width:30px; height:30px; background-color: transparent; } 
[data-custom-block="interactive-map"] nav form .search-wrapper .submit::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:20px; height:20px; background-image:url(../core/icons/search.svg); background-repeat:no-repeat; background-position:center; background-size:contain; display:block; pointer-events:none; } 
[data-custom-block="interactive-map"] nav .category-wrapper { display: flex; flex-direction: row; align-items: center; gap:20px; } 
[data-custom-block="interactive-map"] nav .category-wrapper select { border:none; width:100%;height: 100%; background-color:#ECECEC; color:#000000; font-family:open-sans, sans-serif; font-size:1rem; padding:8px; border-radius:9px; order:1; } 
[data-custom-block="interactive-map"] nav .map-view-wrapper { display: flex; flex-direction: row; align-items: center; gap:10px; } 
[data-custom-block="interactive-map"] nav .map-view-wrapper div {margin-right: 20px;}
[data-custom-block="interactive-map"] nav .map-view-wrapper button {border:none; cursor:pointer; font-size:0; width:32px; height:32px; padding:0px; background-color: transparent; position: relative; opacity:0.45} 
[data-custom-block="interactive-map"] nav .map-view-wrapper button::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:32px; height:32px; background-image:url(../blocks/icons/map_list.png); background-repeat:no-repeat; background-position:center; background-size:contain; display:block; pointer-events:none; } 
[data-custom-block="interactive-map"] nav .map-view-wrapper button#map-view-btn::after { background-image:url(../blocks/icons/map_gps.png); }
[data-custom-block="interactive-map"] nav .map-view-wrapper button#list-view-btn::after { background-image:url(../blocks/icons/map_list.png); }
[data-custom-block="interactive-map"] nav .map-view-wrapper button.active{opacity:1;}

[data-custom-block="interactive-map"] #fullWidthMap { width:100%; height:100vh; } 
[data-custom-block="interactive-map"] #fullWidthMap .listing { align-items: center; height: 60px; width: 60px; position: relative; transition: all 0.3s ease-out; transform: translateY(-20px); } 
[data-custom-block="interactive-map"] #fullWidthMap .listing .details { display: none; } 
[data-custom-block="interactive-map"] #fullWidthMap .listing.highlight .details { display:block; position: absolute; bottom:80px; width: 260px; border-radius:20px; padding:40px 20px; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); background-color:#fff; color:#000; font-size:12px; font-weight:500; transform: translateX(calc(-50% + 20px)); } 
[data-custom-block="interactive-map"] #fullWidthMap .listing.highlight .details::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 20px solid transparent; border-top-color: #ffffff; border-bottom: 0; margin-left: -20px; margin-bottom: -20px;; } 
[data-custom-block="interactive-map"][data-mode="list"]  #fullWidthMap .listing .details { display: none!important; } 

[data-custom-block="interactive-map"] #listings{position: absolute; z-index: 10;top:100px;max-width:1200px; left: 0; right: 0; margin: auto;}
[data-custom-block="interactive-map"] #listings .listings-container{background-color: #fff;border-radius: 20px;width:100%;max-width:550px;padding:40px 60px;overflow: hidden;}
[data-custom-block="interactive-map"] #listings .controls-container{width:100%;max-width:550px;overflow: hidden;}
[data-custom-block="interactive-map"] #listings .listings-container .listings-wrapper{ max-height: calc(75vh - 60px);overflow-y:scroll}
[data-custom-block="interactive-map"] #listings .listings-container .listings-wrapper .listing {margin-bottom: 20px;}
[data-custom-block="interactive-map"][data-mode="map"] #listings { display: none!important; } 
 
[data-custom-block="interactive-map"] .listing h3.name { font-size:15px; font-weight:700; text-transform:uppercase; margin-bottom:5px; } 
[data-custom-block="interactive-map"] .listing .address { margin-bottom:5px; } 
[data-custom-block="interactive-map"] .listing a { display:block; text-decoration:none; color:inherit; margin-bottom:5px; } 
[data-custom-block="interactive-map"] .listing h4 { font-size:14px; font-weight:700; } 
[data-custom-block="interactive-map"] .listing .categories { display:flex; flex-wrap:wrap; gap:10px; margin:5px 0px; } 
[data-custom-block="interactive-map"] .listing .categories .category { padding:5px; border-radius:10px; border:1px solid black; font-size:9px; } 

.map-controls {display: flex;gap:8px;background-color: #d9d9d9;padding:5px;border-radius: 8px;width: 180px;}
.map-controls button {background-color: #fff;width: 42px;height: 42px;border-radius: 8px;border:1px solid transparent;background-position: center;background-repeat: no-repeat;background-size: 50% ;}
.map-controls button:hover, .map-controls button:focus {border-color:#000;cursor: pointer;}
.map-controls button.zoom-in {background-image: url("./icons/mapzoom.svg");}
.map-controls button.zoom-out {background-image: url("./icons/mapzoom2.svg");}
.map-controls button.focus-search {background-image: url("./icons/mapfsearch.svg");margin-right: 10px;background-color: transparent;background-size: 60% ;}
.map-controls.map-view {position: absolute;bottom: 40px;right: 40px;z-index: 10;}
.map-controls.list-view {margin-top: 10px;margin-left: auto;}
[data-custom-block="interactive-map"][data-mode="map"] .map-controls.list-view { display: none!important; } 
[data-custom-block="interactive-map"][data-mode="list"] .map-controls.map-view { display: none!important; } 



@media (max-width:1280px){
    [data-custom-block="interactive-map"] nav{width: calc(100% - 80px);left:40px;right:40px}
    [data-custom-block="interactive-map"] #listings{width: calc(100% - 80px);left:40px;right:40px;top:150px}
    [data-custom-block="interactive-map"] #listings .listings-container .listings-wrapper{ max-height: calc(75vh - 160px);}
    
    [data-custom-block="interactive-map"] nav form {flex-wrap: wrap;}
    [data-custom-block="interactive-map"] nav form .search-wrapper {min-width: unset;width: 100%;}
    
    
}
@media (max-width:680px){
    [data-custom-block="interactive-map"] nav .category-wrapper {width: 100%;}
    [data-custom-block="interactive-map"] #listings{top:190px}
    [data-custom-block="interactive-map"] #listings .listings-container .listings-wrapper{ max-height: calc(75vh - 190px);}
}
@media (max-width:650px){
    [data-custom-block="interactive-map"] #listings .listings-container {padding:20px}
}