:root{
  --ink:#12231f;
  --muted:#64736e;
  --surface:#fff;
  --surface-soft:#f3f7f4;
  --surface-glass:rgba(255,255,255,.92);
  --line:rgba(18,35,31,.11);
  --green:#087f6d;
  --green-dark:#056152;
  --green-soft:#dff3ed;
  --lime:#dff45d;
  --orange:#e46f43;
  --blue:#2475d0;
  --danger:#b42318;
  --warning:#b96818;
  --shadow-sm:0 8px 24px rgba(19,43,36,.10);
  --shadow:0 18px 54px rgba(19,43,36,.16);
  --safe-top:max(10px, env(safe-area-inset-top));
  --safe-bottom:max(10px, env(safe-area-inset-bottom));
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{
  overflow:hidden;
  color:var(--ink);
  background:#dce7e2;
  font-family:"Vazirmatn",Tahoma,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}
button,a{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px solid rgba(36,117,208,.28);outline-offset:2px}
[hidden]{display:none!important}

.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon,.mini-icon{display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon{width:20px;height:20px;flex:0 0 auto}
.mini-icon{width:12px;height:12px;opacity:.55}

.map-app{
  position:relative;
  width:100%;
  height:100dvh;
  min-height:520px;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  overflow:hidden;
  background:#edf3ef;
}

.app-bar{
  z-index:30;
  min-height:64px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:var(--safe-top) 14px 9px;
  border-bottom:1px solid var(--line);
  background:rgba(250,252,250,.94);
  backdrop-filter:blur(18px) saturate(145%);
}
.icon-btn{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 6px 16px rgba(18,35,31,.06);
}
.icon-btn:hover{border-color:rgba(8,127,109,.25);background:#f9fcfa}
.app-identity{min-width:0;display:flex;align-items:center;gap:10px}
.brand-mark{
  width:38px;
  height:38px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:13px 13px 13px 4px;
  background:var(--ink);
  color:var(--lime);
  box-shadow:0 8px 18px rgba(18,35,31,.14);
  font-size:18px;
  font-weight:900;
}
.app-heading{min-width:0}
.route-kicker{display:block;color:var(--green);font-size:9px;font-weight:900;letter-spacing:.09em;line-height:1.2}
h1{
  max-width:min(65vw,720px);
  margin:3px 0 0;
  overflow:hidden;
  font-size:clamp(16px,2.4vw,21px);
  font-weight:900;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.connection-badge{
  min-height:31px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 10px;
  border:1px solid rgba(8,127,109,.14);
  border-radius:999px;
  background:var(--green-soft);
  color:var(--green-dark);
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
}
.connection-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(8,127,109,.12)}
.connection-badge.offline{border-color:rgba(180,35,24,.13);background:#fff0ee;color:var(--danger)}
.connection-badge.offline .connection-dot{background:var(--danger);box-shadow:0 0 0 4px rgba(180,35,24,.10)}

.route-toolbar{
  z-index:26;
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto;
  align-items:center;
  gap:16px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.95);
}
.destination-context{min-width:0;display:flex;align-items:flex-start;gap:9px}
.destination-icon{
  width:34px;
  height:34px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  margin-top:1px;
  border-radius:12px;
  background:#fff0ea;
  color:var(--orange);
}
.destination-icon .icon{width:18px;height:18px}
.destination-copy{min-width:0}
.destination-copy>small{display:block;color:var(--muted);font-size:9px;font-weight:800}
#routeText{
  max-width:min(50vw,620px);
  margin:1px 0 0;
  overflow:hidden;
  color:var(--ink);
  font-size:11px;
  font-weight:650;
  line-height:1.55;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.place-meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.place-meta span{
  max-width:210px;
  overflow:hidden;
  padding:2px 7px;
  border-radius:999px;
  background:var(--surface-soft);
  color:#52635e;
  font-size:8px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.toolbar-controls{display:flex;align-items:center;gap:9px}
.travel-modes{
  display:flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface-soft);
}
.mode-btn,.action-btn{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 11px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#44534f;
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.mode-btn .icon,.action-btn .icon{width:17px;height:17px}
.mode-btn:hover,.action-btn:hover{background:#fff}
.mode-btn.active{border-color:rgba(18,35,31,.07);background:#fff;color:var(--ink);box-shadow:0 4px 12px rgba(18,35,31,.08)}
.mode-btn.active .icon{color:var(--green)}
.mode-btn:active,.action-btn:active{transform:scale(.98)}
.route-actions{display:flex;align-items:center;gap:5px}
.action-btn{border-color:var(--line);background:#fff}
.action-btn.primary{border-color:var(--green);background:var(--green);color:#fff;box-shadow:0 7px 16px rgba(8,127,109,.18)}
.action-btn.is-active{border-color:var(--ink);background:var(--ink);color:var(--lime)}
.action-btn.compact{padding-inline:9px}
.mode-btn:disabled,.action-btn:disabled{opacity:.52;cursor:progress;transform:none}

.map-stage{position:relative;min-height:0;overflow:hidden;background:#cbd9d2;isolation:isolate}
.map-canvas{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(135deg,#dfe9e3,#cddbd4)}
.leaflet-container{font-family:inherit;cursor:grab;background:#dce7e1}
.leaflet-container.leaflet-grabbing{cursor:grabbing}
.leaflet-control-attribution{direction:ltr!important;padding:2px 6px!important;border-radius:7px 0 0 0;background:rgba(255,255,255,.82)!important;font-size:8px!important}
.leaflet-control-attribution a{color:var(--green-dark)!important}
.leaflet-popup-content-wrapper{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
.leaflet-popup-content{direction:rtl;margin:12px 14px;font-family:inherit;font-size:11px;line-height:1.7}
.leaflet-popup-content b{font-size:12px}
.leaflet-popup-tip{box-shadow:none}

.route-casing{stroke:#fff;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;opacity:.96}
.route-line-main{stroke:var(--green);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:1}

.map-pin{
  position:relative;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border:3px solid #fff;
  border-radius:50% 50% 50% 11px;
  color:#fff;
  box-shadow:0 9px 22px rgba(18,35,31,.28);
  transform:rotate(-45deg);
}
.map-pin span{font-size:11px;font-weight:900;transform:rotate(45deg)}
.map-pin.origin{background:var(--blue)}
.map-pin.destination{background:var(--orange)}
.user-pulse{
  width:21px;
  height:21px;
  border:5px solid rgba(255,255,255,.98);
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 0 rgba(36,117,208,.38),0 5px 13px rgba(18,35,31,.18);
  animation:userPulse 2s infinite;
}
@keyframes userPulse{70%{box-shadow:0 0 0 18px rgba(36,117,208,0),0 5px 13px rgba(18,35,31,.18)}100%{box-shadow:0 0 0 0 rgba(36,117,208,0),0 5px 13px rgba(18,35,31,.18)}}

.map-status{
  position:absolute;
  top:12px;
  right:50%;
  z-index:800;
  min-height:35px;
  max-width:calc(100% - 148px);
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 11px;
  border:1px solid rgba(255,255,255,.86);
  border-radius:999px;
  background:rgba(255,255,255,.91);
  color:var(--ink);
  box-shadow:0 9px 24px rgba(18,35,31,.13);
  backdrop-filter:blur(13px) saturate(145%);
  font-size:10px;
  font-weight:850;
  transform:translateX(50%);
}
.map-status span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:#e49b27;box-shadow:0 0 0 4px rgba(228,155,39,.13)}
.map-status.ready .status-dot{background:var(--green);box-shadow:0 0 0 4px rgba(8,127,109,.12)}
.map-status.error .status-dot{background:var(--danger);box-shadow:0 0 0 4px rgba(180,35,24,.10)}
.map-status.routing .status-dot{animation:statusBlink .9s infinite}
@keyframes statusBlink{50%{opacity:.28}}

.map-controls{
  position:absolute;
  top:12px;
  left:12px;
  z-index:810;
  display:grid;
  gap:3px;
  padding:4px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:16px;
  background:rgba(255,255,255,.91);
  box-shadow:0 10px 26px rgba(18,35,31,.14);
  backdrop-filter:blur(12px);
}
.map-control-btn{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--ink);
}
.map-control-btn:hover{background:var(--surface-soft);color:var(--green)}
.map-control-btn .icon{width:18px;height:18px}
.control-separator{height:1px;margin:2px 5px;background:var(--line)}

.pick-hint{
  position:absolute;
  top:58px;
  right:50%;
  z-index:820;
  min-width:min(90%,360px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:15px;
  background:var(--ink);
  color:#fff;
  box-shadow:var(--shadow);
  font-size:10px;
  font-weight:800;
  transform:translateX(50%);
}
.pick-hint button{border:0;border-radius:999px;padding:6px 11px;background:var(--lime);color:var(--ink);font-size:9px;font-weight:900}

.route-error{
  position:absolute;
  right:50%;
  bottom:15px;
  z-index:830;
  width:min(calc(100% - 24px),560px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  border:1px solid rgba(180,35,24,.15);
  border-radius:17px;
  background:rgba(255,250,249,.95);
  color:var(--ink);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  transform:translateX(50%);
}
.route-error>div{min-width:0}
.route-error strong{display:block;font-size:11px}
.route-error small{display:block;margin-top:2px;color:#7f4b45;font-size:9px;line-height:1.55}
.route-error button,.map-empty button{
  min-height:35px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 11px;
  border:0;
  border-radius:11px;
  background:var(--ink);
  color:#fff;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}
.route-error button .icon{width:15px;height:15px}

.map-empty{
  position:absolute;
  top:50%;
  right:50%;
  z-index:840;
  width:min(calc(100% - 30px),390px);
  padding:22px;
  border:1px solid rgba(255,255,255,.84);
  border-radius:24px;
  background:rgba(255,255,255,.94);
  box-shadow:var(--shadow);
  text-align:center;
  backdrop-filter:blur(16px);
  transform:translate(50%,-50%);
}
.empty-pin{width:48px;height:48px;display:grid;place-items:center;margin:0 auto 10px;border-radius:16px;background:#fff0ea;color:var(--orange)}
.empty-pin .icon{width:24px;height:24px}
.map-empty strong{display:block;font-size:14px}
.map-empty p{margin:7px 0 14px;color:var(--muted);font-size:10px;line-height:1.8}
.map-empty button{min-height:39px;padding-inline:15px;background:var(--green)}

.route-summary{
  position:absolute;
  right:50%;
  bottom:13px;
  z-index:820;
  width:min(calc(100% - 24px),680px);
  display:grid;
  grid-template-columns:minmax(145px,1.35fr) repeat(2,minmax(88px,.7fr)) auto;
  align-items:stretch;
  gap:1px;
  padding:5px;
  border:1px solid rgba(255,255,255,.83);
  border-radius:21px;
  background:rgba(255,255,255,.93);
  box-shadow:0 16px 42px rgba(18,35,31,.20);
  backdrop-filter:blur(16px) saturate(150%);
  transform:translateX(50%);
}
.summary-primary,.summary-item{min-width:0;padding:8px 11px;border-radius:15px;background:var(--surface-soft)}
.summary-primary small,.summary-item small{display:block;color:var(--muted);font-size:8px;font-weight:750}
.summary-primary strong,.summary-item strong{display:block;margin-top:1px;overflow:hidden;color:var(--ink);font-size:14px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.summary-primary strong{font-size:16px;color:var(--green-dark)}
.summary-primary span{display:block;margin-top:2px;overflow:hidden;color:#72827d;font-size:7px;text-overflow:ellipsis;white-space:nowrap}
.steps-toggle{
  min-width:126px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 13px;
  border:0;
  border-radius:15px;
  background:var(--ink);
  color:#fff;
  font-size:10px;
  font-weight:900;
}
.steps-toggle .icon{width:18px;height:18px;color:var(--lime)}

.steps-sheet{
  position:fixed;
  right:50%;
  bottom:0;
  z-index:2100;
  width:min(100%,720px);
  max-height:min(72dvh,680px);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  padding:8px 14px calc(14px + env(safe-area-inset-bottom));
  border:1px solid var(--line);
  border-radius:27px 27px 0 0;
  background:rgba(255,255,255,.98);
  box-shadow:0 -24px 70px rgba(18,35,31,.25);
  transform:translate(50%,105%);
  transition:transform .28s cubic-bezier(.22,.8,.22,1);
}
.steps-sheet.open{transform:translate(50%,0)}
.sheet-backdrop{position:fixed;inset:0;z-index:2050;padding:0;border:0;background:rgba(10,25,21,.28);backdrop-filter:blur(2px)}
.sheet-handle{width:46px;height:5px;margin:0 auto 9px;border-radius:999px;background:#d7dfda}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sheet-head small{display:block;color:var(--green);font-size:9px;font-weight:900}
.sheet-head strong{display:block;margin-top:1px;font-size:16px}
.sheet-head .icon-btn{width:36px;height:36px;border-radius:12px}
.sheet-head .icon{width:18px;height:18px}
.route-steps{margin:0;padding:8px 0 0;overflow:auto;overscroll-behavior:contain;list-style:none;counter-reset:route-step}
.route-steps li{
  counter-increment:route-step;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px 2px;
  border-bottom:1px solid var(--line);
}
.route-steps li:before{
  content:counter(route-step,decimal-leading-zero);
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--surface-soft);
  color:var(--green-dark);
  font-size:9px;
  font-weight:900;
}
.step-main{min-width:0}
.step-main strong{display:block;font-size:11px;line-height:1.7}
.step-main small{display:block;margin-top:1px;overflow:hidden;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.step-distance{color:var(--muted);font-size:9px;font-weight:800;white-space:nowrap}

.external-actions{
  z-index:24;
  min-height:53px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:7px 12px var(--safe-bottom);
  border-top:1px solid rgba(255,255,255,.06);
  background:var(--ink);
  color:rgba(255,255,255,.72);
}
.external-label{font-size:9px;font-weight:750;white-space:nowrap}
.external-apps{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none}
.external-apps::-webkit-scrollbar{display:none}
.external-app{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:11px;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
  transition:background-color .16s ease,border-color .16s ease;
}
.external-app:hover{border-color:rgba(255,255,255,.27);background:rgba(255,255,255,.12)}
.external-app[aria-disabled="true"]{opacity:.38;pointer-events:none}
.app-mark{width:20px;height:20px;display:grid;place-items:center;border-radius:7px;background:#fff;color:var(--ink);font-size:9px;font-weight:900}
.neshan .app-mark{background:#fff;color:#9c244b}
.balad .app-mark{background:#fff4de;color:#cf741e}
.google .app-mark{background:#fff;color:#306fda}
.waze .app-mark{background:#dff6ff;color:#167c9e}

.toast{
  position:fixed;
  right:50%;
  bottom:72px;
  z-index:3000;
  max-width:min(90vw,430px);
  padding:10px 13px;
  border-radius:13px;
  background:#101a17;
  color:#fff;
  box-shadow:var(--shadow);
  font-size:10px;
  font-weight:750;
  line-height:1.7;
  opacity:0;
  pointer-events:none;
  transform:translate(50%,10px);
  transition:opacity .18s ease,transform .18s ease;
}
.toast.show{opacity:1;transform:translate(50%,0)}
noscript{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:30px;background:#fff;color:var(--ink);text-align:center}

@media(max-width:940px){
  .route-toolbar{grid-template-columns:1fr;gap:7px;padding-block:8px}
  .destination-context{display:none}
  .toolbar-controls{justify-content:space-between}
  .route-summary{grid-template-columns:minmax(130px,1.2fr) repeat(2,minmax(76px,.65fr)) auto}
}

@media(max-width:700px){
  .map-app{min-height:500px}
  .app-bar{min-height:58px;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;padding-inline:10px;padding-bottom:7px}
  .icon-btn{width:37px;height:37px;border-radius:12px}
  .brand-mark{width:34px;height:34px;border-radius:11px 11px 11px 4px;font-size:16px}
  .route-kicker{font-size:8px}
  h1{max-width:48vw;font-size:15px}
  .connection-badge{min-height:28px;padding-inline:8px;font-size:8px}
  .route-toolbar{padding:7px 8px}
  .toolbar-controls{gap:6px;overflow-x:auto;scrollbar-width:none}
  .toolbar-controls::-webkit-scrollbar{display:none}
  .travel-modes{flex:1 0 auto;border-radius:13px}
  .mode-btn{min-height:35px;padding-inline:8px;border-radius:10px;font-size:9px}
  .mode-btn .icon{width:15px;height:15px}
  .route-actions{flex:0 0 auto}
  .action-btn{min-height:35px;padding-inline:9px;border-radius:11px;font-size:9px}
  .action-btn .icon{width:15px;height:15px}
  .action-btn.compact .wide-label{display:none}
  .map-status{top:9px;min-height:32px;max-width:calc(100% - 120px);font-size:9px}
  .map-controls{top:9px;left:9px;border-radius:14px}
  .map-control-btn{width:32px;height:32px;border-radius:9px}
  .map-control-btn .icon{width:16px;height:16px}
  .route-summary{bottom:9px;width:calc(100% - 18px);grid-template-columns:1.2fr .72fr .72fr;padding:4px;border-radius:18px}
  .summary-primary,.summary-item{padding:7px 8px;border-radius:13px}
  .summary-primary strong{font-size:14px}
  .summary-item strong{font-size:11px}
  .summary-primary span{max-width:130px}
  .steps-toggle{grid-column:1/-1;min-height:36px;margin-top:3px;border-radius:13px}
  .route-error{bottom:9px;width:calc(100% - 18px);padding:9px 10px}
  .external-actions{justify-content:flex-start;gap:8px;padding-inline:9px}
  .external-label{display:none}
  .external-apps{width:100%;justify-content:space-between}
  .external-app{flex:1;justify-content:center;padding-inline:7px}
  .external-app .mini-icon{display:none}
}

@media(max-width:430px){
  .mode-btn span{display:none}
  .mode-btn{width:35px;padding:0}
  .travel-modes{flex:0 0 auto}
  .action-btn.primary span{max-width:82px;overflow:hidden;text-overflow:ellipsis}
  .action-btn:not(.primary) span{display:none}
  .action-btn:not(.primary){width:35px;padding:0}
  .external-app{gap:4px;font-size:8px}
  .app-mark{width:18px;height:18px}
}

@media(min-width:1000px){
  .map-app{width:min(100%,1480px);height:calc(100dvh - 24px);margin:12px auto;border-radius:25px;box-shadow:0 24px 80px rgba(18,35,31,.21)}
  .app-bar{border-radius:25px 25px 0 0}
  .external-actions{border-radius:0 0 25px 25px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@supports not (backdrop-filter:blur(1px)){
  .app-bar,.map-status,.map-controls,.route-summary,.route-error{background:#fff}
}