/*! * Explorer Map Mobile Dock * * Pairs with assets/js/explorer-map-mobile-dock.js. The JS moves each * `.hfse-map-tooltip` into a portal `
` * mounted directly under `` and tags the tooltip with * `.hrtk-explorer-map-tooltip--docked`. These rules dock the card to the * bottom of the viewport with a horizontal thumbnail + content layout. * * Every styling rule is prefixed with `#hrtk-explorer-map-portal` so the * ID-level specificity wins against theme styles (YOOtheme, UIKit, etc.) * that ship `.hk-card a`-shaped !important rules and pull text back to * the brand link color. */ #hrtk-explorer-map-portal { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; contain: layout; } @media (max-width: 640px) { /* ── Card shell ───────────────────────────────────────────────────── */ #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked { pointer-events: auto; position: absolute !important; left: 12px !important; right: 12px !important; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 0 !important; border-radius: 16px !important; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.08) !important; overflow: hidden !important; transform: none !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; color: #1a1a1a !important; animation: hrtk-emm-slide-up 220ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes hrtk-emm-slide-up { from { transform: translateY(110%) !important; opacity: 0; } to { transform: none !important; opacity: 1; } } /* ── Close X (top-left over image, à la Airbnb) ───────────────────── */ #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-map-tooltip-close-btn { position: absolute !important; top: 10px !important; left: 10px !important; right: auto !important; bottom: auto !important; width: 30px !important; height: 30px !important; z-index: 3 !important; background: #fff !important; border-radius: 50% !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22) !important; display: block !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; font-size: 0 !important; color: transparent !important; } /* Hide whatever native button/SVG the plugin put inside — we draw our own X with pseudo-elements so visibility doesn't depend on UIKit JS initializing the `hk-close` widget inside our re-parented node. */ #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-map-tooltip-close-btn * { display: none !important; } #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-map-tooltip-close-btn::before, #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-map-tooltip-close-btn::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 14px !important; height: 1.6px !important; background: #1a1a1a !important; border-radius: 1px !important; display: block !important; } #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-map-tooltip-close-btn::before { transform: translate(-50%, -50%) rotate(45deg) !important; } #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-map-tooltip-close-btn::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } /* ── Card body (anchor wrapper from getPopupContent) ──────────────── */ #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-map-tooltip-content > .hk-card, #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-map-tooltip-content > .hk-card * { text-decoration: none !important; } #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-map-tooltip-content > .hk-card { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border: 0 !important; background: transparent !important; color: #1a1a1a !important; } /* Image — 108px square on the left, no rounded corners (parent handles). */ #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-property-infowindow-header { flex: 0 0 108px !important; width: 108px !important; height: 108px !important; min-width: 108px !important; aspect-ratio: 1 / 1 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; background-size: cover !important; background-position: center !important; position: relative !important; } /* Body — stacked content on the right. */ #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-property-infowindow-body { flex: 1 1 auto !important; padding: 12px 14px 12px 14px !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 4px !important; background: #fff !important; color: #1a1a1a !important; } /* Title — near-black, semibold, two-line clamp. Override `hk-h5` colour. */ #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-property-title, #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-property-title * { font-size: 15px !important; line-height: 1.25 !important; font-weight: 600 !important; color: #1a1a1a !important; margin: 0 !important; padding: 0 !important; letter-spacing: -0.005em !important; text-decoration: none !important; } #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-property-title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Subtitle — single-line muted. */ #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-property-subtitle, #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-property-subtitle * { font-size: 12px !important; line-height: 1.3 !important; color: #717171 !important; font-weight: 400 !important; margin: 0 !important; padding: 0 !important; text-decoration: none !important; } #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-property-subtitle { display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Terms row — single compact row, muted text, small inline icons. */ #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hk-flex.hk-grid-small.hk-last-column { font-size: 12px !important; color: #717171 !important; gap: 10px !important; margin: 2px 0 0 !important; flex-wrap: nowrap !important; overflow: hidden !important; display: flex !important; flex-direction: row !important; align-items: center !important; line-height: 1.2 !important; font-weight: 400 !important; } #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hk-flex.hk-grid-small.hk-last-column * { color: #717171 !important; text-decoration: none !important; font-weight: 400 !important; font-size: inherit !important; } #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hk-flex.hk-grid-small.hk-last-column > div { display: inline-flex !important; align-items: center !important; gap: 4px !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; max-width: 50% !important; } #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hk-flex.hk-grid-small.hk-last-column svg, #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hk-flex.hk-grid-small.hk-last-column .hk-icon { width: 12px !important; height: 12px !important; flex: 0 0 12px !important; color: #717171 !important; stroke: #717171 !important; } /* Price — bottom of card, bigger + bolder so it reads as the anchor. */ #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-property-infowindow-price, #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-property-infowindow-price * { font-size: 14px !important; color: #1a1a1a !important; font-weight: 600 !important; margin: 0 !important; padding: 0 !important; text-decoration: none !important; letter-spacing: -0.005em !important; } #hrtk-explorer-map-portal .hfse-map-tooltip.hrtk-explorer-map-tooltip--docked .hfse-property-infowindow-price { margin-top: 4px !important; } }