/* Walkje mobile map pinch zoom:
   - Two-finger pinch zoom works.
   - One-finger map dragging remains locked on phone.
   - Page can still scroll normally around the map.
*/

@media(max-width:900px){
  .leaflet-container,
  #findCareMap,
  #communityMap,
  #dogWalksMap,
  #walkjeMap,
  #map,
  [data-walkje-map],
  .walkje-map,
  .map,
  .map-panel{
    pointer-events:auto!important;
  }

  .leaflet-container.wj-mobile-pinch-zoom-enabled{
    touch-action:pan-y pinch-zoom!important;
    -ms-touch-action:pan-y pinch-zoom!important;
    overscroll-behavior:contain!important;
    user-select:none!important;
    -webkit-user-select:none!important;
  }

  .leaflet-container.wj-mobile-pinch-zoom-enabled::after{
    content:"Pinch to zoom";
    position:absolute;
    left:12px;
    bottom:12px;
    z-index:999;
    min-height:30px;
    padding:0 11px;
    border-radius:999px;
    background:rgba(7,19,13,.88);
    border:1px solid rgba(255,255,255,.16);
    color:#d8ffe3;
    display:flex;
    align-items:center;
    font-size:12px;
    font-weight:1000;
    pointer-events:none;
    box-shadow:0 8px 24px rgba(0,0,0,.22);
  }

  .wj-map-zoom-buttons{
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:1000;
    display:grid;
    grid-template-columns:38px 38px;
    gap:7px;
    pointer-events:auto;
  }

  .wj-map-zoom-buttons button{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    max-width:38px!important;
    max-height:38px!important;
    border-radius:14px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(7,19,13,.92)!important;
    color:#f5fff7!important;
    font-size:22px!important;
    font-weight:1000!important;
    line-height:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    box-shadow:0 8px 24px rgba(0,0,0,.24)!important;
    touch-action:manipulation!important;
  }

  .wj-map-zoom-buttons button:active{
    transform:scale(.96);
  }

  .leaflet-control-zoom{
    display:none!important;
  }
}

@media(min-width:901px){
  .wj-map-zoom-buttons{
    display:none!important;
  }
}