/* ============================================================
   LOQA.RU — Map v4 «Pro Atlas»
   Полноэкранная карта, стеклянные панели, фото-маркеры,
   тёмная тема (CARTO Dark Matter), мобильный bottom-sheet.
   ============================================================ */

.map4{
  position:relative;
  width:100%;
  height:calc(100vh - var(--header-h));
  min-height:420px;
  background:var(--surface-2);
  overflow:hidden;
  isolation:isolate;
}
.map4 #loqa-map{position:absolute;inset:0;width:100%;height:100%;background:var(--surface-2);z-index:1;outline:none}

/* ---------- картография: полировка светлой + тёмная тема ---------- */
.map4 .leaflet-tile-pane{
  filter:saturate(.78) brightness(1.035) contrast(.97);
}
[data-theme="dark"] .map4 .leaflet-tile-pane{
  filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.86) saturate(.68);
}
.map4 .leaflet-container{background:var(--surface-2)}
.map4 .leaflet-control-attribution{
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  color:var(--faint);font-size:10.5px;border-radius:9px 0 0 0;padding:2px 8px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.map4 .leaflet-control-attribution a{color:var(--muted)}

/* ---------- стеклянная левая панель ---------- */
.map4-panel{
  position:absolute;top:14px;left:14px;bottom:14px;width:376px;max-width:calc(100vw - 28px);
  z-index:900;display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid color-mix(in srgb,var(--line-strong) 72%,transparent);
  border-radius:20px;box-shadow:var(--shadow-l);
  transition:transform .32s var(--ease),opacity .28s var(--ease);
  overflow:hidden;
}
.map4-panel.hidden{transform:translateX(-116%);opacity:0;pointer-events:none}

.m4p-head{padding:12px 12px 0;display:flex;flex-direction:column;gap:10px}
.m4p-search{
  display:flex;align-items:center;gap:9px;height:42px;padding:0 13px;
  background:var(--surface);border:1.5px solid var(--line);border-radius:13px;
  color:var(--faint);transition:.16s;
}
.m4p-search:focus-within{border-color:var(--brand-400);box-shadow:var(--ring)}
.m4p-search input{flex:1;border:0;outline:0;background:transparent;font-size:14px;color:var(--ink);min-width:0}
.m4p-search kbd{
  font-family:var(--font);font-size:10.5px;font-weight:700;color:var(--faint);
  border:1px solid var(--line);border-radius:6px;padding:2px 6px;background:var(--surface-2);
}
.m4p-meta{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);padding:0 4px;flex-wrap:wrap}
.m4p-meta .num{font-weight:800;color:var(--ink)}
.m4p-meta .sep{color:var(--line-strong)}
.m4p-spin{
  width:12px;height:12px;border-radius:50%;flex-shrink:0;display:none;
  border:2px solid var(--brand-200);border-top-color:var(--brand-600);animation:m4spin .7s linear infinite;
}
.m4p-meta.loading .m4p-spin{display:inline-block}
@keyframes m4spin{to{transform:rotate(360deg)}}

.m4p-kinds{
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 12px 2px;
  -webkit-overflow-scrolling:touch;
}
.m4p-kinds::-webkit-scrollbar{display:none}
.m4-kind{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;
  height:32px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:700;
  color:var(--muted);background:var(--surface);border:1.5px solid var(--line);
  text-decoration:none;transition:.15s;
}
.m4-kind::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--kc,#10b981);opacity:.85}
.m4-kind:hover{border-color:var(--brand-300);color:var(--brand-700)}
.m4-kind.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
[data-theme="dark"] .m4-kind.on{background:var(--brand-500);border-color:var(--brand-500);color:#04120c}

/* ---------- список результатов ---------- */
.m4p-list{flex:1;overflow-y:auto;padding:8px 10px 12px;scrollbar-width:thin;overscroll-behavior:contain}
.m4p-empty{
  padding:44px 26px;text-align:center;color:var(--faint);font-size:13.5px;line-height:1.6;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.m4p-empty svg{opacity:.5}
.m4p-empty b{color:var(--muted)}

.m4-item{
  display:flex;align-items:center;gap:11px;padding:9px;border-radius:14px;
  text-decoration:none;border:1px solid transparent;transition:.14s;position:relative;
}
.m4-item:hover,.m4-item.is-hi{background:var(--brand-50);border-color:var(--brand-200)}
[data-theme="dark"] .m4-item:hover,[data-theme="dark"] .m4-item.is-hi{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.2)}
.m4-item.is-active{background:var(--brand-50);border-color:var(--brand-400)}
[data-theme="dark"] .m4-item.is-active{background:rgba(52,211,153,.1)}
.m4-thumb{
  width:54px;height:54px;border-radius:12px;flex-shrink:0;background:var(--surface-2);
  background-size:cover;background-position:center;position:relative;overflow:hidden;
  box-shadow:var(--shadow-s);
}
.m4-thumb.noimg{display:grid;place-items:center}
.m4-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.m4-item-t{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m4-item-m{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m4-item-r{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.m4-item-p{font-size:13px;font-weight:800;color:var(--brand-700);white-space:nowrap}
[data-theme="dark"] .m4-item-p{color:var(--brand-400)}
.m4-item-d{width:8px;height:8px;border-radius:50%;background:var(--kc,#10b981)}

/* ---------- панель скрыта: кнопка показать ---------- */
.m4-expand{
  position:absolute;top:14px;left:14px;z-index:890;height:42px;padding:0 15px;
  display:inline-flex;align-items:center;gap:8px;border-radius:13px;font-size:13px;font-weight:800;
  color:var(--ink);background:color-mix(in srgb,var(--surface) 90%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--line-strong) 75%,transparent);
  box-shadow:var(--shadow-m);cursor:pointer;transition:.16s;
}
.m4-expand:hover{border-color:var(--brand-300);color:var(--brand-700)}
.m4-expand b{color:var(--brand-700)}
[data-theme="dark"] .m4-expand b{color:var(--brand-400)}
.m4-expand .num{font-weight:800}

/* ---------- правый стек контролов ---------- */
.map4-ctrl{
  position:absolute;right:14px;bottom:22px;z-index:880;
  display:flex;flex-direction:column;gap:9px;align-items:center;
}
.m4-ctl{
  width:42px;height:42px;border-radius:13px;border:1px solid color-mix(in srgb,var(--line-strong) 75%,transparent);
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.15s;
  box-shadow:var(--shadow-m);padding:0;
}
.m4-ctl:hover{color:var(--brand-700);border-color:var(--brand-300);transform:translateY(-1px)}
[data-theme="dark"] .m4-ctl:hover{color:var(--brand-400)}
.m4-ctl.busy{animation:m4pulse 1s infinite}
@keyframes m4pulse{50%{opacity:.45}}
.m4-zoom{display:flex;flex-direction:column;border-radius:13px;overflow:hidden;box-shadow:var(--shadow-m)}
.m4-zoom .m4-ctl{border-radius:0;box-shadow:none;border:0;border-bottom:1px solid var(--line)}
.m4-zoom .m4-ctl:last-child{border-bottom:0}

/* ---------- статус-таблетка сверху ---------- */
.m4-status{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:870;
  height:38px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;font-size:12.5px;font-weight:700;color:var(--ink);
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--line-strong) 70%,transparent);
  box-shadow:var(--shadow-m);white-space:nowrap;
}
.m4-status .num{font-weight:800}
.m4-status .m4p-spin{border-width:2px}
.m4-status.loading .m4p-spin{display:inline-block}

/* ---------- маркеры-фотокарточки ---------- */
.m4-marker{background:none;border:none}
.m4-pin{
  position:relative;width:52px;height:52px;cursor:pointer;
  transition:transform .18s var(--ease);
  will-change:transform;
}
.m4-pin-img{
  width:52px;height:52px;border-radius:14px;background-size:cover;background-position:center;
  border:3px solid var(--surface);box-shadow:0 4px 14px -2px rgba(8,44,33,.35);
}
[data-theme="dark"] .m4-pin-img{border-color:#232d27}
.m4-pin-img.noimg{display:grid;place-items:center;color:#fff}
.m4-pin-dot{
  position:absolute;right:-4px;top:-4px;width:16px;height:16px;border-radius:50%;
  background:var(--kc,#10b981);border:2.5px solid var(--surface);
}
[data-theme="dark"] .m4-pin-dot{border-color:#232d27}
.m4-pin-price{
  position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);
  max-width:74px;height:19px;padding:0 8px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--ink);font-size:10.5px;font-weight:800;white-space:nowrap;
  box-shadow:0 2px 8px -1px rgba(8,44,33,.28);border:1px solid rgba(8,44,33,.06);
  overflow:hidden;text-overflow:ellipsis;
}
.m4-pin:hover{transform:translateY(-3px) scale(1.06)}
.m4-pin.is-active{transform:translateY(-3px) scale(1.1)}
.m4-pin.is-active .m4-pin-img{border-color:var(--brand-500)}
.m4-pin.is-hover .m4-pin-img{border-color:var(--brand-400);box-shadow:0 0 0 4px rgba(16,185,129,.25),0 6px 18px -4px rgba(8,44,33,.4)}

/* ---------- кластеры ---------- */
.m4-cluster{background:none;border:none}
.m4-cl{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1.5px solid var(--line-strong);color:var(--ink);
  font-size:13px;font-weight:800;letter-spacing:-.02em;
  box-shadow:0 4px 16px -3px rgba(8,44,33,.3);
  transition:transform .16s var(--ease);cursor:pointer;position:relative;
}
.m4-cl::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--brand-400) 35%,transparent)}
.m4-cl.s{width:36px;height:36px;font-size:12px}
.m4-cl.l{width:54px;height:54px;font-size:14.5px}
.m4-cl:hover{transform:scale(1.08)}

/* ---------- попап ---------- */
.leaflet-popup-content-wrapper{border-radius:18px;box-shadow:var(--shadow-l);padding:0;overflow:hidden;background:var(--surface);color:var(--ink)}
.leaflet-popup-content{margin:0;width:264px !important;line-height:1.4}
.leaflet-popup-tip{background:var(--surface);box-shadow:none}
.leaflet-container a.leaflet-popup-close-button{
  top:10px;right:10px;width:26px;height:26px;padding:0;border-radius:50%;
  background:rgba(10,20,15,.45);color:#fff;border:0;font-size:15px;line-height:26px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.leaflet-container a.leaflet-popup-close-button:hover{background:rgba(10,20,15,.7)}
.m4-pop{position:relative}
.m4-pop-img{height:132px;background-size:cover;background-position:center;display:grid;place-items:center}
.m4-pop-img.noimg{color:#fff}
.m4-pop-kind{
  position:absolute;top:10px;left:10px;height:24px;padding:0 10px;border-radius:999px;
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:#fff;
  background:var(--kc,#10b981);box-shadow:0 2px 8px rgba(8,44,33,.3);
}
.m4-pop-kind::before{content:'';width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.9)}
.m4-pop-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:7px}
.m4-pop-t{
  font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.3;text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.m4-pop-t:hover{color:var(--brand-700)}
[data-theme="dark"] .m4-pop-t:hover{color:var(--brand-400)}
.m4-pop-m{font-size:12px;color:var(--muted);display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.m4-pop-foot{display:flex;align-items:center;gap:10px;margin-top:2px}
.m4-pop-p{font-size:16px;font-weight:900;color:var(--brand-700);letter-spacing:-.01em}
[data-theme="dark"] .m4-pop-p{color:var(--brand-400)}
.m4-pop-btn{
  margin-left:auto;height:34px;padding:0 14px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;
  background:var(--brand-600);color:#fff;font-size:12.5px;font-weight:800;text-decoration:none;transition:.15s;
}
.m4-pop-btn:hover{background:var(--brand-700);color:#fff}

/* ---------- геоточка ---------- */
.m4-me{background:none;border:none}
.m4-me-dot{
  width:18px;height:18px;border-radius:50%;background:var(--brand-500);position:relative;
  border:3px solid #fff;box-shadow:0 2px 10px rgba(16,185,129,.6);
}
.m4-me-dot::after{
  content:'';position:absolute;inset:-10px;border-radius:50%;
  border:2px solid rgba(16,185,129,.4);animation:m4ping 1.8s var(--ease) infinite;
}
@keyframes m4ping{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.5);opacity:0}}

/* ---------- тост об ошибке ---------- */
.m4-toast{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:910;
  height:40px;padding:0 16px;display:inline-flex;align-items:center;gap:10px;
  border-radius:12px;font-size:12.5px;font-weight:700;color:var(--ink);
  background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line-strong);
  box-shadow:var(--shadow-l);opacity:0;pointer-events:none;transition:.25s;white-space:nowrap;
}
.m4-toast.show{opacity:1;pointer-events:auto}
.m4-toast button{
  border:0;background:var(--brand-600);color:#fff;font-size:12px;font-weight:800;
  border-radius:8px;padding:6px 11px;cursor:pointer;
}

/* ---------- мобильная версия: bottom-sheet ---------- */
@media (max-width:900px){
  .map4{height:calc(100vh - var(--header-h) - 64px)}
  .map4-panel{
    top:auto;left:8px;right:8px;bottom:8px;width:auto;max-width:none;
    max-height:min(66vh,560px);
    transform:translateY(calc(100% - 46px));
    border-radius:20px 20px 16px 16px;
    transition:transform .34s var(--ease);
  }
  .map4-panel.open{transform:translateY(0)}
  .map4-panel.hidden{transform:translateY(calc(100% - 46px)) translateX(0);opacity:1;pointer-events:auto}
  .map4-panel.hidden .m4p-grip-chevron svg{transform:rotate(180deg)}
  .m4p-grip{
    display:flex;align-items:center;justify-content:center;gap:8px;height:46px;flex-shrink:0;
    cursor:pointer;user-select:none;touch-action:none;background:transparent;border:0;width:100%;
  }
  .m4p-grip-bar{width:40px;height:4.5px;border-radius:99px;background:var(--line-strong)}
  .m4p-grip-count{font-size:12.5px;font-weight:800;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
  .m4p-grip-chevron{display:grid;place-items:center;color:var(--muted);margin-left:2px}
  .m4p-grip-chevron svg{transition:transform .3s var(--ease)}
  .map4-panel.open .m4p-grip-chevron svg{transform:rotate(180deg)}
  .map4-panel:not(.open) .m4p-head,.map4-panel:not(.open) .m4p-kinds,.map4-panel:not(.open) .m4p-list{display:none}
  .m4p-head{padding-top:0}
  .map4-ctrl{bottom:70px;right:10px;gap:8px}
  .m4-zoom{display:none}
  .m4-status{top:10px;font-size:12px;height:34px;padding:0 13px;max-width:calc(100vw - 90px);overflow:hidden}
  .m4-expand{display:none}
  .m4-toast{bottom:64px;max-width:calc(100vw - 24px)}
  .leaflet-popup-content{width:236px !important}
  .m4-pop-img{height:108px}
}
@media (min-width:901px){
  .m4p-grip{display:none}
}