/* Портал relto.pro: повна панель фільтра, обрані фільтри, сторінка карти й компактна карта на головній.
   Лише токени з relto.css (--brand, --ink, --card, --line, --soft, --muted, --radius, --shadow) — тож усі дизайни
   (html[data-design]) і світла / темна тема підхоплюються самі. Підключається після hub.css. */

.hs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- панель фільтра ---------- */
.hs { margin-bottom: 16px; min-width: 0; }
.hs-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.hs.is-empty .hs-bar { display: none; }
.hs-toggle { display: none; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.hs-toggle:hover { border-color: var(--brand); }
.hs.is-open .hs-toggle { border-color: var(--brand); }
.hs-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--brand); color: var(--card); font-size: .75rem; font-weight: 800; }
.hs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.hs-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  color: var(--ink); font-size: .88rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.hs-chip i { color: var(--muted); font-size: .8rem; }
.hs-chip:hover { border-color: var(--brand); color: var(--ink); }
.hs-chip:hover i { color: var(--ink); }
.hs-chip-reset { padding: 6px 4px; font-size: .88rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hs-chip-reset:hover { color: var(--brand); }

.hs-panel.hb-search { max-width: none; margin: 0; }
.hs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.hs-grid .hb-f select:disabled { opacity: .6; cursor: not-allowed; }
.hs-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 70px; gap: 6px; }
.hs-range-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hs-range .hs-cur { padding-left: 8px; padding-right: 4px; }
.hs-range input { padding-left: 10px; padding-right: 8px; -moz-appearance: textfield; appearance: textfield; }
.hs-range input::-webkit-outer-spin-button, .hs-range input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hs-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-pills label { position: relative; flex: 1 0 40px; }
.hs-pills input { position: absolute; opacity: 0; pointer-events: none; }
.hs-pills span { display: grid; place-items: center; height: 46px; padding: 0 8px; border: 1px solid var(--line); border-radius: min(12px, var(--radius));
  background: var(--card); color: var(--ink); font-weight: 700; cursor: pointer; user-select: none; transition: border-color .15s, background .15s; }
.hs-pills span:hover { border-color: var(--brand); }
.hs-pills input:checked + span { border: 2px solid var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--card)); }
.hs-pills input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.hs-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; min-height: 46px; }
.hs-checks .hb-check { padding: 6px 0; }
.hs-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.hs-foot .btn { min-height: 44px; }

@media (max-width: 1060px) { .hs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .hs.is-empty .hs-bar { display: flex; }
  .hs-toggle { display: inline-flex; }
  .js .hs:not(.is-open) .hs-panel { display: none; }
  .hs-foot { position: sticky; bottom: 0; margin: 14px -2px 0; padding: 10px 2px 2px; background: var(--card); }
  .hs-foot .btn { flex: 1; justify-content: center; }
}
@media (max-width: 520px) { .hs-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- сторінка карти ---------- */
.hs-mappage { padding-top: 24px; }
.hs-note { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .88rem; }
.hs-note i { color: var(--brand); }
.hs-maplayout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; max-width: 1680px; margin: 0 auto; padding: 0 24px 56px; }
.hs-map { position: relative; height: calc(100vh - 140px); min-height: 480px; max-height: 880px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--soft); overflow: hidden; z-index: 0; }
.hs-map.leaflet-container { font: inherit; font-size: 13px; }
.hs-map.is-loading { opacity: .78; transition: opacity .2s; }
.hs-maplist { height: calc(100vh - 140px); min-height: 480px; max-height: 880px; overflow-y: auto; display: flex; flex-direction: column;
  gap: 8px; padding-right: 4px; min-width: 0; overscroll-behavior: contain; }
.hs-maplist-head { position: sticky; top: 0; z-index: 1; background: var(--bg); padding: 2px 0 8px; font-weight: 700; color: var(--ink); }
.hs-maplist-head b { color: var(--brand); }
.hs-maplist-hint { padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; font-size: .9rem; }
.hs-maplist-hint.is-error { border-style: solid; }
.hs-li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--ink); transition: border-color .15s, box-shadow .15s; flex: none; }
.hs-li:hover, .hs-li:focus-visible { border-color: var(--brand); box-shadow: var(--shadow); color: var(--ink); }
.hs-li-img { width: 96px; height: 78px; object-fit: cover; border-radius: min(10px, var(--radius)); background: var(--soft); display: block; }
.hs-li-noimg { display: grid; place-items: center; color: var(--muted); font-size: 1.3rem; }
.hs-li-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hs-li-price { font-weight: 800; color: var(--ink); }
.hs-li-title { font-size: .9rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs-li-meta { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-li-meta i { color: var(--brand); }
.hs-approx { display: inline-block; margin-left: 4px; padding: 0 7px; border: 1px dashed var(--muted); border-radius: 999px; color: var(--muted);
  font-size: .72rem; font-weight: 700; line-height: 1.5; vertical-align: 1px; }
@media (max-width: 960px) {
  .hs-maplayout { grid-template-columns: minmax(0, 1fr); padding: 0 16px 40px; }
  .hs-map { height: 62vh; min-height: 340px; }
  .hs-maplist { height: auto; min-height: 0; max-height: none; overflow: visible; padding-right: 0; }
}
@media (max-width: 560px) { .hs-maplayout { padding: 0 16px 32px; } .hs-li { grid-template-columns: 84px minmax(0, 1fr); } .hs-li-img { width: 84px; height: 70px; } }

/* маркери: точна точка — шпилька кольору бренду, наближена — пунктирне коло (hub-search.js) */
.leaflet-div-icon.hs-pin { background: none; border: 0; }
.hs-pin span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .4); }
.hs-map .marker-cluster { background: color-mix(in srgb, var(--brand) 28%, transparent); }
.hs-map .marker-cluster div { background: var(--brand); color: var(--card); font-weight: 800; }

/* картка в спливаючому вікні */
.hs-pop-wrap .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: var(--shadow-lg, var(--shadow)); }
.hs-pop-wrap .leaflet-popup-tip { background: var(--card); }
.hs-pop-wrap .leaflet-popup-content { margin: 0; width: 240px !important; font: inherit; font-size: 13px; line-height: 1.4; }
.hs-pop-wrap a.leaflet-popup-close-button { top: 6px; right: 6px; width: 24px; height: 24px; line-height: 22px; border-radius: 50%; background: rgba(15, 23, 42, .55); color: #fff; font-size: 18px; }
.hs-pop-wrap a.leaflet-popup-close-button:hover { background: rgba(15, 23, 42, .8); color: #fff; }
.hs-pop-img img { width: 100%; height: 140px; object-fit: cover; display: block; }
.hs-pop-body { display: grid; gap: 3px; padding: 10px 12px 12px; }
.hs-pop-price { font-size: 15px; font-weight: 800; color: var(--ink); }
.hs-pop-wrap a.hs-pop-title { color: var(--ink); font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs-pop-wrap a.hs-pop-title:hover { color: var(--brand); }
.hs-pop-meta { color: var(--muted); font-size: 12px; }
.hs-pop-meta:empty { display: none; }
.hs-pop-meta i { color: var(--brand); }
.hs-pop-wrap a.hs-pop-more { margin-top: 4px; font-weight: 700; color: var(--brand); }

/* ---------- карта на головній ---------- */
.hs-mini { position: relative; }
.hs-map-mini { height: 380px; min-height: 0; max-height: none; }
.hs-mini-cta { position: absolute; left: 16px; bottom: 16px; z-index: 500; box-shadow: var(--shadow-lg, var(--shadow)); }
@media (max-width: 560px) { .hs-map-mini { height: 300px; } .hs-mini-cta { left: 12px; right: 12px; bottom: 12px; justify-content: center; } }

/* темна тема: приглушені плитки карти, елементи керування в кольорах теми */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hs-map .leaflet-bar a { background: var(--card); color: var(--ink); border-color: var(--line); }
  :root:not([data-theme="light"]) .hs-map .leaflet-control-attribution { background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--muted); }
}
:root[data-theme="dark"] .hs-map .leaflet-bar a { background: var(--card); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .hs-map .leaflet-control-attribution { background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--muted); }