/* hf-mapdock.css — t_1a8bcd5b (30.09.2026): превью карты над списком (телефон) + раскрытие на весь экран + шторка фильтров поверх карты. JS — js/hf-mapdock.js. Только токены кита. */ .hf-dock { display: none; } @media (max-width: 1023.98px) { .hf-dock { display: block; position: relative; height: 176px; margin: 0 0 14px; border-radius: var(--r-lg); overflow: hidden; background: var(--map-bg) linear-gradient(135deg, var(--paper), var(--line-2)); box-shadow: 0 0 0 1px var(--line) inset; } /* раскрытая карта переносится в (hf-mapdock.js) — правила ниже по .hf-dock-pane, не по .hf-dock */ body.hf-map-open > .hf-map-pane.hf-dock-pane { display: block; position: fixed; inset: 0; z-index: 90; height: 100vh; height: 100dvh; border: 0; border-radius: 0; will-change: clip-path; } .hf-dock__slot { position: absolute; inset: 0; } /* t_a076758e: статичная подложка города — видна, пока живая карта не отрисовала тайлы */ .hf-dock__st { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hf-dock .hf-map-pane.hf-dock-pane { background: transparent; } .hf-dock .hf-map-pane.hf-dock-pane { display: block; position: absolute; inset: 0; height: auto; border: 0; border-radius: inherit; overflow: hidden; } /* в превью — только карта с пинами; служебное (область, мини-карточка, верхняя строка, ✕, «Список») спрятано */ body:not(.hf-map-open) .hf-dock .hf-maparea, body:not(.hf-map-open) .hf-dock .hf-mapcard, body:not(.hf-map-open) .hf-dock .hf-maptop, body:not(.hf-map-open) .hf-dock .hf-map-close, body:not(.hf-map-open) .hf-dock .hf-dock__list { display: none !important; } body:not(.hf-map-open) .hf-dock .hf-mpin { transform: translate(-50%, calc(-100% - 4px)) scale(.86); } .hf-dock .hf-dock__hit { position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .hf-dock__hit:active ~ .hf-dock__bar { transform: translateY(1px); } .hf-dock__bar { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; display: flex; align-items: center; gap: 8px; pointer-events: none; transition: transform .12s ease; } .hf-dock__n { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--r-pill); background: var(--glass); box-shadow: var(--sh-2); font: 600 13.5px/1 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; } .hf-dock__n span { overflow: hidden; text-overflow: ellipsis; } .hf-dock__n svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hf-dock .hf-dock__f { pointer-events: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--on-accent); box-shadow: var(--sh-2); font: 600 14px/1 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; } .hf-dock__f svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .hf-dock__f i { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--coral); color: var(--on-accent); font: 700 11px/18px var(--font); font-style: normal; text-align: center; } .hf-dock__f i[hidden] { display: none; } .hf-dock .hf-dock__f:active { transform: scale(.97); } /* раскрытая карта: пока идёт анимация, превью держит место в потоке (JS фиксирует высоту) */ body.hf-map-open .hf-dock .hf-map-pane.hf-dock-pane { position: fixed; inset: 0; z-index: 90; height: 100vh; height: 100dvh; border-radius: 0; will-change: clip-path; } body.hf-map-open .hf-dock__hit, body.hf-map-open .hf-dock__bar { visibility: hidden; } /* «Список · N» внизу по центру */ .hf-dock__list { display: none; } body.hf-map-open .hf-dock-pane .hf-dock__list { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 7; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--on-accent); box-shadow: var(--sh-4); font: 700 15px/1 var(--font); cursor: pointer; white-space: nowrap; animation: hfDockUp .3s .2s both cubic-bezier(.2,.8,.2,1); } .hf-dock__list svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } body.hf-map-open .hf-dock-pane:has(.hf-mapcard:not([hidden])) .hf-dock__list { display: none; } @keyframes hfDockUp { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } } /* шторка фильтров поверх карты: ниже, затемнение лёгкое — карта с пинами видна и живёт */ body.hf-map-open #hfFilterSheet.hf-on { max-height: 62vh !important; max-height: 62dvh !important; } body.hf-map-open .hf-scrim.hf-on { background: rgba(18, 33, 59, .12) !important; } body.hf-map-open:has(.hf-sheet.hf-on) .hf-dock__list, body.hf-map-open:has(.hf-sheet.hf-on) .hf-maparea { display: none !important; } } @media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) { body.hf-map-open .hf-dock-pane .hf-dock__list { animation: none; } }