.zm{
  --zm-card:#ffffff;
  --zm-card-2:#f4f8fb;
  --zm-fg:#16232e;
  --zm-fg2:#4a5f72;
  --zm-fg3:#5a7085;
  --zm-line:#e2ebf2;
  --zm-line-2:#cfdeea;
  --zm-acc:#1e92d1;
  --zm-acc-2:#146a9c;
  --zm-acc-3:#0e5379;
  --zm-acc-soft:#e3f2fb;
  --zm-acc-fg:#ffffff;
  --zm-warm:#e69745;
  --zm-warm-soft:#fdf1e3;
  --zm-warm-txt:#b96f22;
  --zm-warm-fg:#3a2003;
  --zm-ok:#12a06b;
  --zm-ok-soft:#e2f6ef;
  --zm-radius:28px;
  --zm-shadow:0 44px 100px -34px rgba(12,28,40,.55);
  --zm-head:"Plus Jakarta Sans",system-ui,sans-serif;
  --zm-ease:cubic-bezier(.22,.8,.28,1);

  position:fixed;inset:0;z-index:1200;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.zm.open{display:flex}
.zm *{box-sizing:border-box}
.zm [hidden]{display:none!important}

.zm-backdrop{position:absolute;inset:0;background:rgba(6,12,20,.66);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:zmFade .3s ease}
@keyframes zmFade{from{opacity:0}to{opacity:1}}

.zm-card{position:relative;width:100%;max-width:640px;max-height:calc(100dvh - 40px);
  overflow-y:auto;background:var(--zm-card);color:var(--zm-fg);
  border:1px solid var(--zm-line);border-radius:var(--zm-radius);padding:36px;
  box-shadow:var(--zm-shadow);animation:zmIn .45s var(--zm-ease)}
@keyframes zmIn{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}}

.zm-x{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:13px;border:0;
  background:none;color:var(--zm-fg3);cursor:pointer;display:grid;place-items:center;transition:.2s var(--zm-ease)}
.zm-x:hover{background:var(--zm-acc-soft);color:var(--zm-fg)}
.zm-x svg{width:20px;height:20px}

.zm-head{display:flex;gap:17px;align-items:flex-start;margin-bottom:28px;padding-right:44px}
.zm-ico{width:54px;height:54px;border-radius:17px;background:var(--zm-acc-soft);color:var(--zm-acc);
  display:grid;place-items:center;flex-shrink:0}
.zm-ico svg{width:26px;height:26px}
.zm h2{font-family:var(--zm-head);font-size:clamp(1.25rem,2.4vw,1.5rem);font-weight:800;
  letter-spacing:-.025em;margin:0;line-height:1.2;color:var(--zm-fg)}
.zm-head p{margin:8px 0 0;font-size:0.925rem;line-height:1.55;color:var(--zm-fg2)}

.zm-step[hidden]{display:none}
.zm-lab{display:block;font-size:0.7812rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--zm-fg3);margin-bottom:9px}

.zm-field{display:flex;gap:11px;align-items:stretch;flex-wrap:wrap}
.zm-inp{flex:1 1 200px;display:flex;align-items:center;gap:12px;height:60px;padding:0 18px;
  border-radius:16px;background:var(--zm-card-2);border:2px solid var(--zm-line);transition:.2s var(--zm-ease)}
.zm-inp:focus-within{border-color:var(--zm-acc);box-shadow:0 0 0 4px var(--zm-acc-soft)}
.zm-inp svg{width:20px;height:20px;color:var(--zm-fg3);flex-shrink:0}
.zm-inp input{flex:1;min-width:0;border:0;outline:none;background:none;color:var(--zm-fg);
  font:800 1.3125rem/1 var(--zm-head);letter-spacing:.16em}
.zm-inp input::placeholder{color:var(--zm-fg3);font-weight:600;letter-spacing:.14em}

.zm-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
  padding:0 26px;min-height:60px;border-radius:16px;font-family:var(--zm-head);font-weight:700;
  font-size:0.9688rem;transition:.25s var(--zm-ease);white-space:nowrap}
.zm-btn svg{width:18px;height:18px}
.zm-btn-p{background:var(--zm-acc-2);color:var(--zm-acc-fg);box-shadow:0 12px 26px -12px rgba(20,106,156,.6)}
.zm-btn-p:hover{background:var(--zm-acc-3);transform:translateY(-2px)}
.zm-btn-w{background:var(--zm-warm);color:var(--zm-warm-fg);box-shadow:0 12px 26px -12px var(--zm-warm)}
.zm-btn-w:hover{transform:translateY(-2px)}
.zm-btn-o{background:none;border:1.5px solid var(--zm-line-2);color:var(--zm-fg)}
.zm-btn-o:hover{border-color:var(--zm-acc);color:var(--zm-acc)}
.zm-btn-sm{min-height:50px;padding:0 20px;font-size:0.9062rem;border-radius:14px}

.zm-err{margin:12px 0 0;font-size:0.875rem;color:#d94a4a;display:flex;align-items:center;gap:8px}
.zm-err svg{width:17px;height:17px;flex-shrink:0}

.zm-codes{margin-top:22px;padding-top:20px;border-top:1px solid var(--zm-line)}
.zm-codes>span{display:block;font-size:0.8125rem;color:var(--zm-fg3);margin-bottom:11px}
.zm-codes-grid{display:flex;gap:8px;flex-wrap:wrap}
.zm-code{border:1px solid var(--zm-line-2);background:var(--zm-card-2);color:var(--zm-fg2);
  padding:9px 14px;border-radius:12px;cursor:pointer;font:700 0.875rem/1 var(--zm-head);
  letter-spacing:.04em;transition:.2s var(--zm-ease)}
.zm-code:hover{border-color:var(--zm-acc);color:var(--zm-acc);background:var(--zm-acc-soft)}
.zm-code i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px}
.zm-code i.f{background:var(--zm-acc)}
.zm-code i.r{background:var(--zm-warm)}
.zm-code i.b{background:var(--zm-ok)}

.zm-sub{font-size:0.9375rem;color:var(--zm-fg2);margin:0 0 18px}
.zm-sub b{color:var(--zm-fg);font-family:var(--zm-head);letter-spacing:.06em}

.zm-cities{display:grid;gap:10px}
.zm-city{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  padding:16px 18px;border-radius:17px;border:1.5px solid var(--zm-line);background:var(--zm-card-2);
  color:var(--zm-fg);transition:.22s var(--zm-ease);font-family:inherit}
.zm-city:hover{border-color:var(--zm-acc);background:var(--zm-acc-soft);transform:translateX(3px)}
.zm-city svg{width:19px;height:19px;color:var(--zm-fg3);flex-shrink:0}
.zm-city b{font-family:var(--zm-head);font-size:1rem;font-weight:700}
.zm-tag{margin-left:auto;font-size:0.7188rem;font-weight:700;padding:5px 11px;border-radius:999px;
  font-family:var(--zm-head);letter-spacing:.02em;white-space:nowrap}
.zm-tag-f{background:var(--zm-acc-soft);color:var(--zm-acc-2)}
.zm-tag-r{background:var(--zm-warm-soft);color:var(--zm-warm-txt)}
.zm-tag-b{background:var(--zm-ok-soft);color:var(--zm-ok)}

.zm-result{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:20px;
  background:var(--zm-card-2);border:1px solid var(--zm-line);margin-bottom:22px}
.zm-res-ic{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;flex-shrink:0}
.zm-res-ic svg{width:25px;height:25px}
.zm-result.ok .zm-res-ic{background:var(--zm-ok-soft);color:var(--zm-ok)}
.zm-result.warn .zm-res-ic{background:var(--zm-warm-soft);color:var(--zm-warm-txt)}
.zm-result.no .zm-res-ic{background:var(--zm-line);color:var(--zm-fg3)}
.zm-result h3{margin:0;font-family:var(--zm-head);font-size:1.125rem;font-weight:800;letter-spacing:-.02em}
.zm-result p{margin:6px 0 0;font-size:0.8938rem;line-height:1.55;color:var(--zm-fg2)}
.zm-result p b{color:var(--zm-fg)}

.zm-plans{display:grid;gap:9px;margin-bottom:22px}
.zm-plan{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;
  border:1.5px solid var(--zm-line);background:var(--zm-card);transition:.22s var(--zm-ease);position:relative}
.zm-plan:hover{border-color:var(--zm-acc);transform:translateX(3px)}
.zm-plan.best{border-color:var(--zm-acc);background:var(--zm-acc-soft)}
.zm-plan-speed{font-family:var(--zm-head);font-weight:800;font-size:1.375rem;letter-spacing:-.03em;
  color:var(--zm-acc-2);min-width:96px}
.zm-plan.radio .zm-plan-speed{color:var(--zm-warm-txt)}
.zm-plan-speed span{font-size:0.7812rem;font-weight:700;color:var(--zm-fg3);margin-left:3px;letter-spacing:0}
.zm-plan-up{font-size:0.825rem;color:var(--zm-fg2)}
.zm-plan-price{margin-left:auto;font-family:var(--zm-head);font-weight:800;font-size:1.1875rem;
  letter-spacing:-.02em;white-space:nowrap}
.zm-plan-price span{font-size:0.7812rem;font-weight:600;color:var(--zm-fg3)}
.zm-badge{position:absolute;top:-9px;left:16px;font:800 0.625rem/1 var(--zm-head);letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--zm-acc);color:var(--zm-acc-fg)}

.zm-note{font-size:0.825rem;color:var(--zm-fg3);margin:-10px 0 20px}

.zm-acts{display:flex;gap:10px;flex-wrap:wrap}
.zm-acts .zm-btn{flex:1 1 auto}

.zm-back{margin-top:18px;background:none;border:0;cursor:pointer;color:var(--zm-fg3);
  font-size:0.8625rem;font-family:inherit;padding:6px 0;transition:.2s}
.zm-back:hover{color:var(--zm-acc)}

.zm-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--zm-line);
  font-size:0.7875rem;color:var(--zm-fg3);line-height:1.5}

.zm-open-link{background:none;border:0;cursor:pointer;font:inherit;font-size:0.8438rem;
  font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:0;
  display:inline-flex;align-items:center;gap:6px;transition:.2s}
.zm-open-link svg{width:15px;height:15px}

@media (max-width:640px){
  .zm{padding:12px}
  .zm-card{padding:26px 20px;border-radius:24px}
  .zm-head{gap:13px;margin-bottom:22px;padding-right:38px}
  .zm-ico{width:46px;height:46px;border-radius:14px}
  .zm-ico svg{width:22px;height:22px}
  .zm-field{flex-direction:column}
  .zm-inp{flex:0 0 auto}
  .zm-btn{width:100%}
  .zm-plan{flex-wrap:wrap;gap:8px 12px}
  .zm-plan-speed{min-width:0}
  .zm-plan-up{width:100%;order:3}
  .zm-acts{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .zm-card,.zm-backdrop{animation:none}
  .zm-city:hover,.zm-plan:hover,.zm-btn:hover{transform:none}
}

.zm-or{display:flex;align-items:center;gap:14px;margin:22px 0 16px;color:var(--zm-fg3);
  font-size:0.7812rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.zm-or::before,.zm-or::after{content:"";flex:1;height:1px;background:var(--zm-line)}
.zm-alt{display:flex;gap:10px;flex-wrap:wrap}
.zm-alt .zm-btn{flex:1 1 200px}

.zm-map-wrap{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--zm-line);
  background:var(--zm-card-2)}
.zm-map{height:320px;width:100%}
.zm-map .leaflet-control-attribution{font-size:0.6562rem}
.zm-map-geo{position:absolute;right:12px;bottom:12px;z-index:500;display:inline-flex;align-items:center;
  gap:8px;padding:10px 15px;border-radius:13px;border:1px solid var(--zm-line-2);cursor:pointer;
  background:var(--zm-card);color:var(--zm-fg);font:600 0.8438rem/1 var(--zm-head);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.55);transition:.2s var(--zm-ease)}
.zm-map-geo:hover{border-color:var(--zm-acc);color:var(--zm-acc)}
.zm-map-geo svg{width:17px;height:17px}
.zm-map-hint{margin-bottom:14px}

.zm-geo-state{margin:14px 0 0;font-size:0.875rem;line-height:1.5;padding:12px 15px;border-radius:14px;
  background:var(--zm-card-2);border:1px solid var(--zm-line);color:var(--zm-fg2)}
.zm-geo-state.ok{background:var(--zm-ok-soft);border-color:transparent;color:var(--zm-ok)}
.zm-geo-state.warn{background:var(--zm-warm-soft);border-color:transparent;color:var(--zm-warm-txt)}
.zm-geo-state.no{background:var(--zm-line);border-color:transparent;color:var(--zm-fg3)}
.zm-geo-note{margin-top:14px!important;padding-top:0!important;border-top:0!important}

.zm-step[data-step="map"] .zm-acts{margin-top:18px}
.zm-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.zm-btn[disabled]:hover{transform:none}

@media (max-width:640px){
  .zm-map{height:260px}
  .zm-alt .zm-btn{flex:1 1 100%}
  .zm-map-geo span{display:none}
  .zm-map-geo{padding:11px;border-radius:12px}
}

:root[data-theme="dark"] .zm{
  --zm-card:#0e1a27; --zm-card-2:#0b1420; --zm-fg:#eef4fb; --zm-fg2:#9fb2c6; --zm-fg3:#8aa2b8;
  --zm-line:rgba(255,255,255,.14); --zm-line-2:rgba(255,255,255,.22);
  --zm-acc:#38e1ff; --zm-acc-2:#38e1ff; --zm-acc-3:#7fecff; --zm-acc-soft:rgba(56,225,255,.14); --zm-acc-fg:#04121c;
  --zm-warm:#e69745; --zm-warm-soft:rgba(230,151,69,.16); --zm-warm-txt:#f0b273; --zm-warm-fg:#160d02;
  --zm-ok:#3ecf9a; --zm-ok-soft:rgba(62,207,154,.16);
  --zm-shadow:0 44px 100px -34px rgba(0,0,0,.85);
}
:root[data-theme="dark"] .zm-back{background:rgba(4,9,16,.72)}
.zm :focus-visible{outline:3px solid var(--zm-acc-2);outline-offset:3px}

.zm-tag-r{color:#96570f}
