
/* Lazy-map placeholder: the interactive Google Map loads on the visitor's first
   interaction (mouse move / scroll on desktop, or the "מפה" toggle on mobile) — which
   for a real user happens a split-second after the page is ready, so it feels automatic,
   while a bot/crawler (no interaction) never triggers a billable Dynamic Map load.
   Until then #map is a clean white area with a soft grey map icon. Scoped to .preload,
   so it vanishes the moment the real map renders on top. */
#map.preload{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
}
#map.preload::before{
    content:"";
    width:58px;
    height:58px;
    opacity:.9;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7dbe1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='1 6 8 3 16 6 23 3 23 18 16 21 8 18 1 21'/%3E%3Cline x1='8' y1='3' x2='8' y2='18'/%3E%3Cline x1='16' y1='6' x2='16' y2='21'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* The edge shadow overlay should appear only once the real map is in — not over the
   white placeholder. Hidden while #map still carries .preload. */
#map-container::after{transition:opacity .3s ease}
#map-container:has(#map.preload)::after{opacity:0}
/* Separator line between the results list and the map column (desktop side-by-side). */
@media (min-width:992px){
    #search-results_map{border-inline-start:1px solid #e8eaee}
}
