
/* =========================================================
   NIHH CYCLE YATRA - LIVE MAP
   Additive styles only; existing cycle-yatra.css remains intact.
========================================================= */
.live-map-section{background:linear-gradient(180deg,#f8fbf5 0%,#fff 100%)}
.live-map-shell{background:#fff;border:1px solid rgba(21,92,53,.14);border-radius:24px;overflow:hidden;box-shadow:0 18px 50px rgba(20,65,40,.10)}
.live-map-topbar{display:flex;align-items:center;gap:18px;padding:14px 18px;border-bottom:1px solid #e8eee8;background:#fbfdfb}
.live-status{display:flex;align-items:center;gap:9px;font-weight:700;color:#174d32}
.live-status #liveDot{width:10px;height:10px;border-radius:50%;background:#aaa;display:inline-block}
.live-status.live #liveDot{background:#19a85b;box-shadow:0 0 0 5px rgba(25,168,91,.12);animation:livePulse 1.6s infinite}
.live-status.stale #liveDot{background:#e39b1c}
.live-updated{margin-left:auto;color:#66756b;font-size:.86rem}
.map-refresh-btn{border:0;background:#155c35;color:#fff;border-radius:10px;padding:10px 14px;font:600 13px Poppins,sans-serif;cursor:pointer}
.map-refresh-btn:hover{filter:brightness(.94)}
.live-map-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.65fr);min-height:590px}
.map-canvas-wrap{position:relative;min-height:590px;overflow:hidden}
#cycleLiveMap{width:100%;height:590px;min-height:590px;background:#eaf1e8;position:relative;z-index:1}
/* Leaflet must control tile dimensions and tile-container size.
   Do NOT constrain .leaflet-tile-container to 256px; Leaflet expands it
   across the map viewport as tiles are added. */
#cycleLiveMap .leaflet-container{font-family:Poppins,sans-serif;width:100%;height:100%;background:#eaf1e8}
#cycleLiveMap .leaflet-pane img.leaflet-tile{
  width:256px!important;
  height:256px!important;
  max-width:none!important;
  max-height:none!important;
  display:block!important;
}

.map-legend{position:absolute;z-index:500;left:14px;bottom:14px;background:rgba(255,255,255,.95);backdrop-filter:blur(7px);border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:9px 11px;display:flex;flex-wrap:wrap;gap:9px 13px;font-size:11px;color:#415148;box-shadow:0 8px 22px rgba(0,0,0,.10)}
.map-legend span{display:flex;align-items:center;gap:5px}.map-legend i{display:inline-block;width:10px;height:10px;border-radius:50%}
.legend-start{background:#e97818}.legend-current{background:#0a78d1}.legend-end{background:#a82b2b}.legend-route{width:22px!important;height:4px!important;border-radius:4px!important;background:#1e6db5}
.live-info-panel{padding:24px;background:#f7faf6;border-left:1px solid #e4ece4;display:flex;flex-direction:column;gap:18px}
.current-rider-card{display:flex;gap:13px;align-items:center;padding:16px;border-radius:16px;background:#fff;border:1px solid #e0e9df}
.current-rider-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#eaf5ed;color:#155c35;font-size:22px}
.panel-label{font-size:10px;letter-spacing:.13em;font-weight:800;color:#789081}.current-rider-card h3{margin:2px 0 2px;font-size:19px;color:#153d29}.current-rider-card p{margin:0;color:#65736b;font-size:12px}
.live-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.live-stat{padding:13px;background:#fff;border:1px solid #e4ebe3;border-radius:13px}.live-stat span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#7a887f}.live-stat strong{display:block;margin-top:5px;font-size:15px;color:#183f2b}
.live-message-box{padding:15px;background:#fff;border-left:4px solid #d98a25;border-radius:10px;box-shadow:0 4px 15px rgba(0,0,0,.04)}.live-message-box p{margin:7px 0 0;color:#4e5c53;font-size:13px;line-height:1.6}
.live-coordinates{font-size:11px;color:#66746c}.admin-map-link{margin-top:auto;text-align:center;text-decoration:none!important;background:#153f2a;color:#fff!important;padding:12px;border-radius:11px;font-weight:700;font-size:12px}
.current-bike-marker{background:transparent!important;border:0!important}.bike-marker-wrap{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;border:4px solid #0a78d1;color:#0a78d1;box-shadow:0 5px 18px rgba(0,0,0,.22);font-size:21px;z-index:2;animation:gpsBlink 1.25s infinite}.bike-marker-wrap:before,.bike-marker-wrap:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(10,120,209,.45);animation:gpsRing 1.8s infinite}.bike-marker-wrap:after{inset:-17px;border-color:rgba(10,120,209,.22);animation-delay:.35s}.bike-marker-wrap i{position:relative;z-index:3}
.map-popup h4{margin:0 0 4px;color:#155c35}.map-popup p{margin:2px 0;font-size:12px;color:#526158}
@keyframes livePulse{50%{opacity:.45}}
@keyframes gpsBlink{0%,100%{transform:scale(1);box-shadow:0 5px 18px rgba(0,0,0,.22),0 0 0 0 rgba(10,120,209,.45)}50%{transform:scale(1.10);box-shadow:0 5px 20px rgba(0,0,0,.24),0 0 0 9px rgba(10,120,209,.10)}}
@keyframes gpsRing{0%{transform:scale(.72);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{transform:scale(1.25);opacity:0}}
@media(max-width:900px){.live-map-grid{grid-template-columns:1fr}.live-info-panel{border-left:0;border-top:1px solid #e4ece4}.map-canvas-wrap,#cycleLiveMap{min-height:470px;height:470px}.live-map-topbar{flex-wrap:wrap}.live-updated{margin-left:0}}
@media(max-width:560px){.live-map-shell{border-radius:16px}.live-map-topbar{gap:10px;padding:12px}.live-updated{width:100%;order:3}.map-refresh-btn{margin-left:auto}.live-stat-grid{grid-template-columns:1fr 1fr}.map-legend{left:8px;right:8px;bottom:8px}}
