.map_elements_wrap { display: none; } /* Strip Mapbox popup chrome so only your Webflow card shows */ .mapboxgl-popup-content { padding: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } /* Hide Mapbox’s default close button (we’re using your .map_popup_close) */ .mapboxgl-popup-close-button { display: none !important; } /* Optional: remove Mapbox default max width */ .mapboxgl-popup { max-width: none !important; } .mapboxgl-popup-tip { display: none !important; width: 0 !important; height: 0 !important; border: 0 !important; } /* Chrome, Edge, Arc, Safari */ .map_sidebar::-webkit-scrollbar { width: 10px; } .map_sidebar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 999px; } .map_sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 999px; } .map_sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); } .map_sidebar { overflow-y: auto; overflow-x: hidden; /* ✅ prevents the corner square */ } /* Search bar - GEOCODER */ .mapboxgl-ctrl-geocoder * { font-family: "Space Grotesk" !important; } .mapboxgl-ctrl-geocoder { height: clamp(3rem, 3.33vw, 6rem); border-radius: clamp(0.5rem, 0.56vw, 1rem); display: flex; position: relative; align-items: center; background: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(0.5rem) !important; width: clamp(15rem, 16.67vw, 30rem) !important; max-width: none !important; } .mapboxgl-ctrl-geocoder input, .mapboxgl-ctrl-geocoder--input { padding-left: clamp(1rem, 1.11vw, 2rem) !important; background: transparent !important; color: #fff !important; width: 100% !important; font-size: clamp(1rem, 1.11vw, 2rem); } .mapboxgl-ctrl-geocoder input::placeholder { color: rgba(255, 255, 255, 0.5) !important; font-size: clamp(0.875rem, 0.97vw, 1.75rem); } .mapboxgl-ctrl-geocoder--icon-search { display: none !important; } /* Remove focus border / outline */ .mapboxgl-ctrl-geocoder--input:focus { outline: none !important; box-shadow: none !important; border: none !important; color: #fff !important; } /* Also remove container focus style */ .mapboxgl-ctrl-geocoder:focus-within { box-shadow: none !important; border: none !important; } /* Close button */ .mapboxgl-ctrl-geocoder--button { background: transparent !important; border: none !important; height: clamp(2.5rem, 2.78vw, 5rem); width: clamp(2.5rem, 2.78vw, 5rem); display: flex ; align-items: center ; justify-content: center ; position: absolute !important; right: 0 !important; top: 0 !important; } /* Hover state - close button */ .mapboxgl-ctrl-geocoder--button:hover { background: transparent !important; } .mapboxgl-ctrl-geocoder--powered-by { display: none !important; } .mapboxgl-ctrl-geocoder .suggestions { background: #101010 !important; } .mapboxgl-ctrl-geocoder .suggestions li a { padding: clamp(0.75rem, 0.83vw, 1.5rem) clamp(1rem, 1.11vw, 2rem) !important; } .mapboxgl-ctrl-geocoder .suggestions li a:hover { background: rgba(255,255,255,0.04) !important; color: #ffffff; } .mapboxgl-ctrl-geocoder .suggestions li.active > a { background: rgba(255,255,255,0.04) !important; color: #fff !important; } .mapboxgl-ctrl-geocoder--suggestion-title { color: white; font-size: clamp(0.75rem, 0.83vw, 1.5rem) !important; line-height: 1.4; } .mapboxgl-ctrl-geocoder--suggestion-address { color: rgb(255, 255, 255, 0.5); font-size: clamp(0.75rem, 0.83vw, 1.5rem) !important; line-height: 1.4; }