/* RUNNER unified map experience — V2.0
   Stable on Android Chrome/WebView: no post-init map wrapping and no GPU containment hacks. */
:root{--runner-map-radius:24px;--runner-map-border:#e2e5e9;--runner-map-shadow:0 16px 38px rgba(8,9,11,.10);--runner-map-red:#e50914;--runner-map-ink:#08090b}

/* The Leaflet container itself is the interaction host. Never re-parent it after L.map(). */
.runner-map-surface{position:relative!important;overflow:hidden!important;border-radius:var(--runner-map-radius);background:#e7edf2!important;-webkit-tap-highlight-color:transparent;transform:none!important;-webkit-transform:none!important;backface-visibility:visible!important;contain:none!important}
.runner-map-surface .leaflet-map-pane,.runner-map-surface .leaflet-tile-pane{transform-origin:0 0}
.runner-map-surface .leaflet-tile{max-width:none!important;max-height:none!important;image-rendering:auto!important}
.runner-map-surface .leaflet-control-container{font-family:inherit}
.runner-map-surface .leaflet-control-zoom{border:0!important;border-radius:14px!important;overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,.18)!important}
.runner-map-surface .leaflet-control-zoom a{border:0!important;background:#fff!important;color:#111!important}
.runner-map-surface .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.88)!important}

/* A transparent guard catches gestures while locked. It allows vertical page scrolling. */
.runner-map-guard{position:absolute;z-index:1000;inset:0;background:transparent;touch-action:pan-y pinch-zoom;cursor:pointer}
.runner-map-guard[hidden]{display:none!important}
.runner-map-locked{touch-action:pan-y pinch-zoom!important}
.runner-map-is-active{touch-action:none!important}

.runner-map-toggle{position:absolute;z-index:1200;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:0;border-radius:999px;background:rgba(8,9,11,.94);color:#fff;font:inherit;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.30);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.runner-map-toggle:before{content:'⌖';font-size:17px;line-height:1}
.runner-map-toggle.active{left:auto;right:12px;bottom:auto;top:12px;transform:none;background:var(--runner-map-red);padding:9px 13px;min-height:40px;font-size:12px}
.runner-map-toggle.active:before{content:'×';font-size:18px}
.runner-map-surface.runner-map-locked:after{content:'';position:absolute;z-index:900;inset:0;background:linear-gradient(to top,rgba(8,9,11,.12),transparent 36%);pointer-events:none}
.runner-map-surface.runner-map-is-active:after{display:none}

/* Normalize common Runner map surfaces without forcing page-specific height. */
#adminFleetMap,#customerHomeMap,#customerLiveMap,#checkoutMap,#driverHomeMap,#driverNavigationMap,#trackingMap,#createDeliveryMap,#marketCheckoutMap,#merchantOrderMap,#map,[data-map-picker],.live-map,.runner-map{background:#e7edf2!important}

/* V2.0 used transform/contain rules on live maps. They can clip Leaflet tiles in Android WebView. */
.live-map,.runner-driver-map,.customer-live-map,#driverNavigationMap,#checkoutMap{transform:none!important;-webkit-transform:none!important;backface-visibility:visible!important;contain:none!important}

@media(max-width:760px){:root{--runner-map-radius:18px}.runner-map-toggle{bottom:12px;min-height:46px;padding:11px 17px}.runner-map-toggle.active{top:10px;right:10px;bottom:auto}}
@media(prefers-reduced-motion:reduce){.runner-map-toggle{transition:none!important}}

/* v3.2.13 map failure state: never leave users staring at an endless spinner. */
.runner-map-surface{position:relative!important;overflow:hidden!important;}
.runner-map-status{position:absolute!important;left:50%!important;top:50%!important;z-index:1200!important;transform:translate(-50%,-50%)!important;width:min(86%,360px)!important;padding:16px 18px!important;border:1px solid #dbe2e9!important;border-radius:16px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 14px 36px rgba(15,23,42,.14)!important;text-align:center!important;color:#475569!important;pointer-events:none!important;}
.runner-map-status b{display:block!important;color:#111827!important;font-size:15px!important;margin-bottom:5px!important;}
.runner-map-status small{display:block!important;color:#64748b!important;line-height:1.45!important;}
.runner-map-status .btn{pointer-events:auto!important;margin-top:10px!important;}
.runner-map-surface.map-ready .runner-map-status{display:none!important;}
.runner-map-surface.map-error .runner-map-status{display:block!important;}


/* v3.2.17: contained mobile map interaction — never hijack page scrolling. */
.runner-map-surface,.runner-map-surface .leaflet-container{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:auto!important}
.runner-map-surface{isolation:isolate;contain:paint!important}
.runner-map-surface.runner-map-locked .leaflet-container{touch-action:pan-y pinch-zoom!important}
.runner-map-surface.runner-map-is-active .leaflet-container{touch-action:none!important}
.runner-map-toggle:focus-visible{outline:3px solid rgba(229,9,20,.35);outline-offset:3px}
@media(max-width:520px){.runner-map-toggle{max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}.runner-map-surface{border-radius:16px}}


/* v3.2.17 MAP BOUNDS FIX
   Every Leaflet host MUST have a finite block size. Without an explicit height,
   Leaflet can paint tile rows outside the intended card and make the page appear
   infinitely tall on mobile. These bounds keep each map inside its own section. */
#customerHomeMap,
#merchantHomeMap,
#createDeliveryMap,
#marketCheckoutMap,
#checkoutMap,
#trackingMap,
#driverNavigationMap,
#merchantOrderMap,
#map,
[data-map-picker],
.home-map,
.create-map,
.delivery-map,
.stable-map,
.checkout-map,
.tracking-map{
  display:block!important;
  width:100%!important;
  height:340px!important;
  min-height:280px!important;
  max-height:440px!important;
  box-sizing:border-box!important;
  flex:0 0 auto!important;
  position:relative!important;
  overflow:hidden!important;
}
#createDeliveryMap,.create-map{height:360px!important;min-height:320px!important;max-height:420px!important;}
#checkoutMap,.checkout-map{height:320px!important;min-height:280px!important;max-height:380px!important;}
#marketCheckoutMap,.delivery-map,.stable-map{height:340px!important;min-height:300px!important;max-height:400px!important;}
#trackingMap,.tracking-map{height:360px!important;min-height:300px!important;max-height:420px!important;}
#merchantOrderMap{height:360px!important;min-height:300px!important;max-height:420px!important;}
#driverNavigationMap{height:340px!important;min-height:300px!important;max-height:380px!important;}
#customerHomeMap,#merchantHomeMap,.home-map{height:340px!important;min-height:300px!important;max-height:380px!important;}
/* Driver home already has a bounded shell; the map fills only that shell. */
.runner-driver-map-shell{height:330px!important;min-height:300px!important;max-height:360px!important;overflow:hidden!important;position:relative!important;}
.runner-driver-map{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;min-height:0!important;}
/* Keep the map's own overlays inside its bounds. */
.runner-map-surface>.leaflet-container{width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;}


/* v3.2.17 final map containment: one finite host, never an expanding Leaflet canvas. */
.runner-map-surface{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:clamp(280px,55vw,360px)!important;
  min-height:280px!important;
  max-height:360px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  flex:0 0 auto!important;
}
.runner-map-surface > .leaflet-container{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
}
#adminFleetMap.runner-map-surface{height:clamp(300px,42vw,440px)!important;min-height:300px!important;max-height:440px!important;}
@media(max-width:767px){
  .runner-map-surface{height:300px!important;min-height:300px!important;max-height:300px!important;border-radius:16px!important;}
  #adminFleetMap.runner-map-surface{height:330px!important;min-height:280px!important;max-height:330px!important;}
}
@media(min-width:768px) and (max-width:1100px){.runner-map-surface{height:340px!important;min-height:300px!important;max-height:360px!important;}}

/* v3.2.17 FINAL: protect Leaflet's tile geometry from Runner's global image rules.
   Global `img{width:100%;height:100%}` must NEVER apply to Leaflet tiles. */
.runner-map-surface .leaflet-container{position:relative!important;width:100%!important;height:100%!important;overflow:hidden!important;outline:0!important;}
.runner-map-surface .leaflet-map-pane,
.runner-map-surface .leaflet-tile-pane,
.runner-map-surface .leaflet-overlay-pane,
.runner-map-surface .leaflet-shadow-pane,
.runner-map-surface .leaflet-marker-pane,
.runner-map-surface .leaflet-tooltip-pane,
.runner-map-surface .leaflet-popup-pane{position:absolute!important;left:0;top:0;}
.runner-map-surface .leaflet-tile-pane{z-index:200;}
.runner-map-surface .leaflet-overlay-pane{z-index:400;}
.runner-map-surface .leaflet-shadow-pane{z-index:500;}
.runner-map-surface .leaflet-marker-pane{z-index:600;}
.runner-map-surface .leaflet-tooltip-pane{z-index:650;}
.runner-map-surface .leaflet-popup-pane{z-index:700;}
.runner-map-surface .leaflet-tile-container{position:absolute!important;left:0;top:0;}
.runner-map-surface img.leaflet-tile{position:absolute!important;width:256px!important;height:256px!important;max-width:none!important;max-height:none!important;object-fit:initial!important;display:block!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;}
.runner-map-surface .leaflet-marker-icon,
.runner-map-surface .leaflet-marker-shadow{position:absolute!important;display:block!important;max-width:none!important;max-height:none!important;object-fit:initial!important;margin:0!important;}
.runner-map-surface .leaflet-zoom-animated{position:absolute!important;left:0;top:0;transform-origin:0 0;}
.runner-map-surface .leaflet-control-container{position:absolute!important;left:0;top:0;right:0;bottom:0;pointer-events:none;}
.runner-map-surface .leaflet-control{position:relative;z-index:800;pointer-events:auto;}
.runner-map-surface .leaflet-top{position:absolute!important;top:0;pointer-events:none;}
.runner-map-surface .leaflet-bottom{position:absolute!important;bottom:0;pointer-events:none;}
.runner-map-surface .leaflet-left{left:0;}.runner-map-surface .leaflet-right{right:0;}
.runner-map-surface .leaflet-top .leaflet-control,.runner-map-surface .leaflet-bottom .leaflet-control{pointer-events:auto;}
/* Keep one finite viewport; don't use paint containment on Leaflet itself. */
.runner-map-surface{contain:none!important;}