*{box-sizing:border-box}

.youplugs-map-shell{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  display:block !important;
  position:relative !important;
  overflow:hidden !important;
  clear:both !important;
}

#youplugs-map-app{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:clamp(680px, 88vh, 980px) !important;
  min-height:680px !important;
  display:block !important;
  overflow:hidden !important;
  background:#081027 !important;
  border-radius:22px !important;
  color:#fff !important;
  font-family:Arial,Helvetica,sans-serif !important;
  isolation:isolate !important;
}

#yp-map{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:1 !important;
  background:#101735 !important;
}

.leaflet-container{
  width:100% !important;
  height:100% !important;
}

.yp-panel{
  position:absolute !important;
  z-index:700 !important;
  background:rgba(7,11,31,.92) !important;
  color:white !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:18px !important;
  box-shadow:0 18px 55px rgba(0,0,0,.38) !important;
  backdrop-filter:blur(14px) !important;
}

.yp-top{
  top:12px !important;
  left:12px !important;
  right:12px !important;
  padding:10px !important;
  display:grid !important;
  grid-template-columns:minmax(260px,1fr) 145px 155px 135px 135px !important;
  gap:8px !important;
  align-items:center !important;
}

.yp-side{
  top:84px !important;
  left:12px !important;
  width:292px !important;
  padding:12px !important;
}

.yp-tools{
  top:84px !important;
  right:12px !important;
  width:260px !important;
  padding:12px !important;
}

.yp-chat{
  left:12px !important;
  right:12px !important;
  bottom:12px !important;
  padding:10px !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  max-height:235px !important;
}

.yp-mobile-toggle{
  display:none !important;
}

.yp-input,.yp-select{
  width:100% !important;
  min-width:0 !important;
  height:42px !important;
  background:rgba(255,255,255,.09) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
  border-radius:13px !important;
  padding:0 12px !important;
  outline:none !important;
  font-size:14px !important;
}

.yp-select option{color:#111 !important}
.yp-input::placeholder{color:#c4caeb !important}

.yp-btn{
  height:42px !important;
  border:0 !important;
  border-radius:13px !important;
  padding:0 13px !important;
  color:white !important;
  font-weight:800 !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  background:linear-gradient(135deg,#4f7cff,#8f5cff) !important;
}

.yp-btn.secondary{background:rgba(255,255,255,.13) !important;border:1px solid rgba(255,255,255,.16) !important}
.yp-btn.taxi{background:linear-gradient(135deg,#ffb900,#ff7a00) !important}
.yp-btn.emergency{background:linear-gradient(135deg,#ff315f,#1b70ff) !important}

.yp-title{
  margin:0 0 8px !important;
  font-size:14px !important;
  font-weight:900 !important;
}

.yp-stat{
  display:flex !important;
  justify-content:space-between !important;
  gap:10px !important;
  align-items:center !important;
  padding:7px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.09) !important;
  font-size:13px !important;
}

.yp-stat span:first-child{color:#aeb8e8 !important}
.yp-stat b{text-align:right !important}

.yp-status{
  padding:9px 10px !important;
  border-radius:13px !important;
  margin:8px 0 !important;
  font-size:13px !important;
  line-height:1.35 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.07) !important;
}

.yp-status.ok{border-color:rgba(82,255,176,.35) !important;background:rgba(82,255,176,.11) !important}
.yp-status.warn{border-color:rgba(255,212,59,.5) !important;background:rgba(255,212,59,.12) !important}
.yp-status.error{border-color:rgba(255,49,95,.6) !important;background:rgba(255,49,95,.16) !important}

.yp-grid2{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  margin-top:9px !important;
}

.yp-compass{
  width:102px !important;
  height:102px !important;
  margin:0 auto 12px !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:radial-gradient(circle at center,rgba(255,255,255,.14),rgba(255,255,255,.03)) !important;
  display:grid !important;
  place-items:center !important;
  position:relative !important;
}

.yp-compass:before{content:"N";position:absolute;top:5px;font-size:12px;font-weight:900}
.yp-compass:after{content:"S";position:absolute;bottom:5px;color:#8d98c9;font-size:12px;font-weight:900}

#yp-compass-arrow{
  width:0 !important;
  height:0 !important;
  border-left:13px solid transparent !important;
  border-right:13px solid transparent !important;
  border-bottom:46px solid white !important;
  transform-origin:50% 70% !important;
  filter:drop-shadow(0 0 12px #4f7cff) !important;
}

.yp-radar{
  height:145px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  position:relative !important;
  background:radial-gradient(circle at center,transparent 0 23%,rgba(255,255,255,.14) 24% 25%,transparent 26% 49%,rgba(255,255,255,.12) 50% 51%,transparent 52%),rgba(0,0,0,.24) !important;
}

.yp-radar:after{
  content:"";
  position:absolute;
  inset:0;
  background:conic-gradient(from 0deg,rgba(79,124,255,0),rgba(79,124,255,.36),rgba(79,124,255,0) 68deg);
  animation:ypSpin 3s linear infinite;
}

@keyframes ypSpin{to{transform:rotate(360deg)}}

.yp-radar-dot{
  position:absolute !important;
  width:9px !important;
  height:9px !important;
  border-radius:50% !important;
  z-index:2 !important;
  background:#52ffb0 !important;
  box-shadow:0 0 12px currentColor !important;
}

.yp-chat-messages{
  height:120px !important;
  overflow:auto !important;
  border-radius:13px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(0,0,0,.24) !important;
  padding:8px !important;
  font-size:13px !important;
}

.yp-message{margin:0 0 7px !important;line-height:1.35 !important}
.yp-message b{color:#9db6ff !important}

.yp-chat-row{
  display:grid !important;
  grid-template-columns:120px 1fr auto !important;
  gap:8px !important;
  margin-top:8px !important;
}

.yp-selected{
  min-height:120px !important;
  max-height:172px !important;
  overflow:auto !important;
  border-radius:13px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(0,0,0,.20) !important;
  padding:10px !important;
  color:#cbd3ff !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

.yp-you-icon{
  width:28px !important;
  height:28px !important;
  background:#4f7cff !important;
  border:3px solid white !important;
  border-radius:70% 70% 70% 8% !important;
  transform:rotate(45deg) !important;
  box-shadow:0 0 24px rgba(79,124,255,.95) !important;
}

.yp-user-icon{
  width:16px !important;
  height:16px !important;
  border-radius:50% !important;
  background:#52ffb0 !important;
  border:2px solid white !important;
  box-shadow:0 0 18px #52ffb0 !important;
}

.yp-dest-icon{
  width:22px !important;
  height:22px !important;
  border-radius:50% 50% 50% 0 !important;
  background:#ffd43b !important;
  border:3px solid #fff !important;
  transform:rotate(-45deg) !important;
  box-shadow:0 0 18px #ffd43b !important;
}

.yp-tooltip{
  background:rgba(7,11,31,.95) !important;
  color:white !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:9px !important;
  padding:4px 7px !important;
}

.yp-alert-taxi .yp-you-icon,.yp-alert-taxi .yp-user-icon{animation:ypTaxi 1s infinite}
.yp-alert-emergency .yp-you-icon,.yp-alert-emergency .yp-user-icon{animation:ypEmergency .55s infinite}

@keyframes ypTaxi{
  0%,100%{background:#ffd43b;box-shadow:0 0 8px #ffd43b}
  50%{background:#ff7a00;box-shadow:0 0 34px #ffd43b}
}

@keyframes ypEmergency{
  0%,100%{background:#ff315f;box-shadow:0 0 30px #ff315f}
  50%{background:#2176ff;box-shadow:0 0 30px #2176ff}
}

.leaflet-control-container{z-index:650 !important}

@media(max-width:1100px){
  .yp-top{
    grid-template-columns:1fr 130px 140px !important;
  }
  .yp-top .yp-btn.taxi,
  .yp-top .yp-btn.emergency{
    display:none !important;
  }
}

@media(max-width:760px){
  .youplugs-map-shell{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    overflow:hidden !important;
  }

  #youplugs-map-app{
    width:100vw !important;
    max-width:100vw !important;
    height:100svh !important;
    min-height:100svh !important;
    border-radius:0 !important;
  }

  .yp-mobile-toggle{
    display:block !important;
    position:absolute !important;
    z-index:850 !important;
    left:10px !important;
    bottom:18px !important;
    height:44px !important;
    border:0 !important;
    border-radius:999px !important;
    padding:0 18px !important;
    background:linear-gradient(135deg,#4f7cff,#8f5cff) !important;
    color:#fff !important;
    font-weight:900 !important;
    box-shadow:0 14px 35px rgba(0,0,0,.35) !important;
  }

  .yp-top{
    top:8px !important;
    left:8px !important;
    right:8px !important;
    grid-template-columns:1fr 108px !important;
    padding:8px !important;
    gap:7px !important;
  }

  .yp-top #yp-address{
    grid-column:1 / -1 !important;
  }

  .yp-top #yp-route-btn{
    grid-column:1 / 2 !important;
  }

  .yp-top #yp-mode{
    grid-column:2 / 3 !important;
  }

  .yp-top #yp-taxi-btn,
  .yp-top #yp-emergency-btn{
    display:none !important;
  }

  .yp-side,
  .yp-tools,
  .yp-chat{
    position:absolute !important;
    left:8px !important;
    right:8px !important;
    top:auto !important;
    bottom:76px !important;
    width:auto !important;
    max-height:56svh !important;
    overflow:auto !important;
    transform:translateY(calc(100% + 90px)) !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:.22s ease !important;
  }

  #youplugs-map-app.yp-open .yp-side,
  #youplugs-map-app.yp-open .yp-tools,
  #youplugs-map-app.yp-open .yp-chat{
    transform:translateY(0) !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .yp-side{
    bottom:76px !important;
    padding:10px !important;
  }

  .yp-tools{
    display:none !important;
  }

  .yp-chat{
    display:none !important;
  }

  #youplugs-map-app.yp-open .yp-side{
    display:block !important;
  }

  .yp-grid2{
    grid-template-columns:1fr 1fr !important;
  }

  .yp-input,.yp-select,.yp-btn{
    height:40px !important;
    font-size:14px !important;
  }

  .leaflet-control-zoom{
    margin-top:118px !important;
  }
}

@media(max-width:420px){
  .yp-top{
    grid-template-columns:1fr !important;
  }

  .yp-top #yp-route-btn,
  .yp-top #yp-mode{
    grid-column:auto !important;
  }

  .leaflet-control-zoom{
    margin-top:162px !important;
  }
}