.universal-listing-map {
  --ulm-ink: var(--ink, #14202a);
  --ulm-muted: var(--muted, #667481);
  --ulm-line: var(--line, #dbe3ea);
  --ulm-brand: var(--brand, #0e5a63);
  --ulm-brand-strong: var(--brand-strong, #083d43);
  --ulm-success: var(--success, #157a4c);
  --ulm-gold: #a86e09;
  --ulm-surface: #fff;
  --ulm-soft: #f4f7f8;
  min-width: 0;
}

.ulm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.ulm-count-wrap { display: grid; gap: 3px; }
.ulm-count { color: var(--ulm-ink); font-size: 16px; font-weight: 850; }
.ulm-count-note { color: var(--ulm-muted); font-size: 12px; line-height: 1.35; }

.ulm-view-switch {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  padding: 3px;
  border: 1px solid var(--ulm-line);
  border-radius: 6px;
  background: var(--ulm-soft);
}

.ulm-view-switch button {
  min-height: 38px;
  border: 0;
  border-radius: 4px;
  padding: 7px 12px;
  color: var(--ulm-muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.ulm-view-switch button:hover { color: var(--ulm-brand); }
.ulm-view-switch button.is-active { color: var(--ulm-ink); background: #fff; box-shadow: 0 1px 4px rgba(20,32,42,.12); }
.ulm-view-switch button:focus-visible,
.ulm-map-icon-button:focus-visible,
.ulm-area-button:focus-visible,
.card-map-action:focus-visible { outline: 3px solid rgba(14,90,99,.25); outline-offset: 2px; }

.ulm-layout { min-width: 0; }
.ulm-map-panel {
  position: relative;
  min-width: 0;
  height: min(720px, calc(100vh - 128px));
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--ulm-line);
  border-radius: 8px;
  background: #dfe9e8;
}

.ulm-map-canvas { width: 100%; height: 100%; }
.ulm-map-status {
  position: absolute;
  z-index: 500;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 40px);
  border: 1px solid var(--ulm-line);
  border-radius: 6px;
  padding: 12px 14px;
  color: var(--ulm-muted);
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 24px rgba(20,32,42,.12);
  text-align: center;
}

.ulm-map-tools {
  position: absolute;
  z-index: 520;
  top: 12px;
  right: 12px;
  display: grid;
  gap: 7px;
}

.ulm-map-icon-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(20,32,42,.22);
  border-radius: 6px;
  padding: 0;
  color: var(--ulm-ink);
  background: rgba(255,255,255,.96);
  box-shadow: 0 2px 8px rgba(20,32,42,.12);
  font: inherit;
  font-size: 21px;
  cursor: pointer;
}

.ulm-map-icon-button:hover { color: var(--ulm-brand); background: #fff; }
.ulm-area-actions {
  position: absolute;
  z-index: 520;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.ulm-area-button {
  min-height: 40px;
  border: 1px solid rgba(20,32,42,.22);
  border-radius: 6px;
  padding: 8px 13px;
  color: var(--ulm-ink);
  background: rgba(255,255,255,.96);
  box-shadow: 0 2px 8px rgba(20,32,42,.12);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.ulm-area-button:hover { color: var(--ulm-brand); background: #fff; }
.ulm-area-button[hidden], .ulm-map-status[hidden] { display: none; }

.universal-listing-map[data-map-view="list"] .ulm-map-panel { display: none; }
.universal-listing-map[data-map-view="list"] [data-map-list] { display: grid; }
.universal-listing-map[data-map-view="map"] [data-map-list] { display: none; }
.universal-listing-map[data-map-view="map"] .ulm-map-panel { display: block; }
.universal-listing-map[data-map-view="split"] .ulm-layout {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(400px, 1.22fr);
  gap: 14px;
  align-items: stretch;
}

.universal-listing-map[data-map-view="split"] [data-map-list] {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  align-content: start;
  max-height: min(720px, calc(100vh - 128px));
  overflow: auto;
  padding-right: 5px;
  scrollbar-gutter: stable;
}

.universal-listing-map[data-map-view="split"] .stay-card { min-height: 270px; height: max-content; }
.universal-listing-map[data-map-view="map"] .ulm-map-panel { height: min(760px, calc(100vh - 116px)); }

.stay-card[data-listing-id] { transition: border-color .18s ease, box-shadow .18s ease; }
.stay-card[data-listing-id].is-map-selected { border-color: var(--ulm-brand); box-shadow: 0 0 0 3px rgba(14,90,99,.12); }
.stay-card[data-listing-id][hidden] { display: none !important; }
.card-actions { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.card-actions .card-action { margin-top: 0; padding-top: 0; }
.card-map-action {
  border: 0;
  padding: 5px 0;
  color: var(--ulm-muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.card-map-action:hover { color: var(--ulm-brand); }

.ulm-marker-icon {
  display: grid !important;
  place-items: center;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--ulm-brand);
  box-shadow: 0 2px 5px rgba(20,32,42,.3);
}
.ulm-marker-icon span { font-size: 7px; font-weight: 900; line-height: 1; }
.ulm-marker--verified { background: #15935a; }
.ulm-marker--public { background: var(--ulm-brand); }
.ulm-marker--draft { color: #5b3a05; background: #ffd978; }
.ulm-marker--group { border-width: 1.5px; background: var(--ulm-brand-strong); }
.ulm-marker--price {
  width: auto !important;
  min-width: 40px;
  height: 21px !important;
  border-radius: 4px;
  padding: 0 5px;
  border-width: 1px;
  background: #815300;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(20,32,42,.24);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.ulm-marker--price::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 6px;
  height: 6px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.ulm-marker--price span { position: relative; z-index: 1; font-size: 10px; font-weight: 800; }

.ulm-cluster-icon {
  display: grid !important;
  place-items: center;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 50%;
  color: #fff;
  background: var(--ulm-brand-strong);
  box-shadow: 0 2px 6px rgba(20,32,42,.28);
}
.ulm-cluster-icon span { font-size: 8px; font-weight: 900; }

.ulm-popup .leaflet-popup-content-wrapper { border: 1px solid rgba(14,90,99,.12); border-radius: 6px; box-shadow: 0 8px 24px rgba(20,32,42,.16); }
.ulm-popup .leaflet-popup-content { margin: 11px 12px 12px; }
.ulm-popup-content { display: grid; gap: 6px; color: var(--ulm-ink); }
.ulm-popup-topline { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.ulm-status { width: fit-content; border-radius: 999px; padding: 3px 6px; font-size: 9px; font-weight: 850; }
.ulm-status--verified { color: #fff; background: #15935a; }
.ulm-status--public { color: #fff; background: var(--ulm-brand); }
.ulm-status--draft { color: #5b3a05; background: #ffe7a3; }
.ulm-popup-title, .ulm-popup-location { font-size: 16px; line-height: 1.18; }
.ulm-popup-address, .ulm-popup-precision, .ulm-popup-more { color: var(--ulm-muted); font-size: 11px; line-height: 1.35; }
.ulm-popup-precision { font-style: italic; }
.ulm-popup-offer { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.ulm-popup-price { color: var(--ulm-brand-strong); font-size: 14px; }
.ulm-popup-stars { color: var(--ulm-gold); font-size: 12px; letter-spacing: 0; }
.ulm-popup-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 1px; }
.ulm-popup-link { width: fit-content; color: var(--ulm-brand); font-size: 12px; font-weight: 850; }
.ulm-popup-list { display: grid; max-height: 250px; overflow: auto; border-top: 1px solid var(--ulm-line); }
.ulm-popup-listing { display: grid; gap: 2px; padding: 9px 2px; border-bottom: 1px solid var(--ulm-line); color: var(--ulm-ink); text-decoration: none; }
.ulm-popup-listing:hover span { color: var(--ulm-brand); }
.ulm-popup-listing span { font-size: 13px; font-weight: 800; line-height: 1.25; }
.ulm-popup-listing small { color: var(--ulm-muted); font-size: 11px; }

.universal-listing-map.ulm-fullscreen {
  position: fixed;
  z-index: 1000;
  inset: 0;
  padding: 12px;
  background: #fff;
}
.universal-listing-map.ulm-fullscreen .ulm-toolbar { margin-bottom: 10px; }
.universal-listing-map.ulm-fullscreen .ulm-layout,
.universal-listing-map.ulm-fullscreen .ulm-map-panel { height: calc(100vh - 72px); max-height: none; }
.universal-listing-map.ulm-fullscreen[data-map-view="split"] [data-map-list] { max-height: calc(100vh - 72px); }
body.ulm-lock-scroll { overflow: hidden; }

@media (max-width: 1180px) {
  .universal-listing-map[data-map-view="split"] .ulm-layout { grid-template-columns: minmax(280px, .72fr) minmax(360px, 1.28fr); }
}

@media (max-width: 980px) {
  .ulm-view-switch { grid-template-columns: repeat(2, auto); }
  .ulm-view-switch [data-map-view="split"] { display: none; }
  .universal-listing-map[data-map-view="split"] .ulm-layout { display: block; }
  .universal-listing-map[data-map-view="split"] .ulm-map-panel { display: none; }
  .universal-listing-map[data-map-view="split"] [data-map-list] { max-height: none; overflow: visible; padding-right: 0; }
  .ulm-map-panel,
  .universal-listing-map[data-map-view="map"] .ulm-map-panel { height: min(680px, 72svh); min-height: 460px; }
}

@media (max-width: 700px) {
  .ulm-toolbar { align-items: end; }
  .ulm-count-note { max-width: 180px; }
  .ulm-view-switch button { min-height: 40px; padding: 7px 11px; }
  .ulm-map-panel,
  .universal-listing-map[data-map-view="map"] .ulm-map-panel { min-height: 520px; height: 72svh; border-radius: 6px; }
  .ulm-area-actions { top: 10px; max-width: calc(100% - 116px); }
  .ulm-area-button { overflow: hidden; max-width: 210px; text-overflow: ellipsis; }
  .ulm-map-tools { top: 10px; right: 10px; }
  .universal-listing-map.ulm-fullscreen { padding: 8px; }
  .universal-listing-map.ulm-fullscreen .ulm-toolbar { margin-bottom: 7px; }
  .universal-listing-map.ulm-fullscreen .ulm-layout,
  .universal-listing-map.ulm-fullscreen .ulm-map-panel { height: calc(100svh - 68px); min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stay-card[data-listing-id] { transition: none; }
}

/* The list column holds the cards and the pager; in split view the whole column scrolls. */
.ulm-list-column { min-width: 0; }
.universal-listing-map[data-map-view="map"] .ulm-list-column { display: none; }
.universal-listing-map[data-map-view="split"] .ulm-list-column { max-height: min(720px, calc(100vh - 128px)); overflow: auto; padding-right: 5px; scrollbar-gutter: stable; }
.universal-listing-map[data-map-view="split"] .ulm-list-column [data-map-list] { max-height: none; overflow: visible; padding-right: 0; }
.universal-listing-map.ulm-fullscreen[data-map-view="split"] .ulm-list-column { max-height: calc(100vh - 72px); }
@media (max-width: 980px) {
  .universal-listing-map[data-map-view="split"] .ulm-list-column { max-height: none; overflow: visible; padding-right: 0; }
}


/* Map availability markers (Jan, 10. 10.): light shines when the night is free. */
.ulm-pin { background: none; border: 0; }
.ulm-pin .ulm-pin-svg { position: absolute; inset: 0; overflow: visible; transition: transform .15s ease; }
.ulm-pin .ulm-pin-halo { fill: #f4b740; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .15s ease, transform .15s ease; }
.ulm-pin--free .ulm-pin-halo { opacity: .35; }
.ulm-pin:hover .ulm-pin-halo, .ulm-pin:focus-visible .ulm-pin-halo, .ulm-pin.is-selected .ulm-pin-halo { opacity: .6; transform: scale(1.35); }
.ulm-pin--occupied:hover .ulm-pin-halo, .ulm-pin--occupied.is-selected .ulm-pin-halo { fill: #9aa8a6; opacity: .25; }
.ulm-pin.is-approx .ulm-pin-svg { transform: scale(.78); }
.ulm-pin.is-approx:hover .ulm-pin-svg, .ulm-pin.is-approx.is-selected .ulm-pin-svg { transform: scale(.9); }
.ulm-pin .ulm-pin-price { position: absolute; left: 30px; top: 9px; padding: 2px 7px; border-radius: 20px; background: #fff; color: #164e4a; font: 700 12px/1.3 Inter, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 1px 4px rgba(19,48,46,.25); pointer-events: none; }
/* Name label: text only with a white halo, no chip (Jan chose variant C, 11. 10.). */
.ulm-pin .ulm-pin-label { display: none; position: absolute; left: 34px; top: 11px; padding: 0 2px; color: #1f4f4b; font: 600 12px/1.3 Inter, system-ui, sans-serif; white-space: nowrap; text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 6px #fff; pointer-events: none; }
.ulm-pin.is-selected .ulm-pin-label { display: block; }
@media (max-width: 640px) { .ulm-pin .ulm-pin-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } }
.ulm-pin.is-selected .ulm-pin-price { display: none; }
/* Name on hover (mouse only) and keyboard focus, instead of the browser tooltip (Jan, 11. 10.). */
@media (hover: hover) { .ulm-pin:hover .ulm-pin-label { display: block; } .ulm-pin:hover .ulm-pin-price { display: none; } .ulm-pin:hover { z-index: 1000 !important; } }
.ulm-pin:focus-visible .ulm-pin-label { display: block; }
.ulm-pin:focus-visible .ulm-pin-price { display: none; }
.ulm-pin--group .ulm-group-count, .ulm-cluster-icon .ulm-cluster-count { position: absolute; left: 6px; top: 6px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #164e4a; color: #fff; font: 700 12px/1 Inter, system-ui, sans-serif; box-shadow: 0 0 0 4px rgba(244,183,64,.18); }
.ulm-cluster-icon { background: none !important; border: 0 !important; }
.ulm-cluster-icon .ulm-cluster-dot, .ulm-pin--group .ulm-cluster-dot { position: absolute; right: 4px; top: 3px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #f4b740; }
.ulm-availability { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.ulm-availability--free { color: #164e4a; background: #fff4d6; }
.ulm-availability--occupied { color: #4b5a58; background: #eef1f0; }
.ulm-availability--unknown { color: #164e4a; background: #f2f6f5; }
.ulm-popup-next, .ulm-popup-nearby { display: block; margin-top: 6px; font-size: 13px; }
.ulm-popup-nearby { color: #164e4a; font-weight: 700; }
.ulm-popup-call { margin-right: 8px; font-weight: 700; color: #164e4a; }
.ulm-legend { position: absolute; left: 10px; bottom: 22px; z-index: 500; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; max-width: calc(100% - 20px); padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.94); box-shadow: 0 1px 5px rgba(0,0,0,.15); font-size: 12px; }
.ulm-legend span { display: inline-flex; align-items: center; gap: 2px; }
.ulm-legend small { flex-basis: 100%; color: #5a6b69; font-size: 11px; }

/* Single-accommodation popup (Jan, 11. 10.): compact card, 10 % see-through, small house with a firefly window. */
.ulm-popup--single .leaflet-popup-content-wrapper { border: 0; border-radius: 10px; background: rgba(255,255,255,.90); box-shadow: 0 3px 10px rgba(20,32,42,.10); }
.ulm-popup--single .leaflet-popup-tip { background: rgba(255,255,255,.90); box-shadow: none; }
.ulm-popup--single .leaflet-popup-content { margin: 6px 22px 6px 8px; }
.ulm-popup--single a.leaflet-popup-close-button { top: 3px; right: 3px; color: #9aa4aa; font-weight: 400; }
.ulm-popup-content--single { display: flex; gap: 8px; align-items: center; }
.ulm-popup-house { position: relative; flex: none; width: 28px; height: 28px; }
/* House colour: #1f4f4b with 10 % less saturation (Jan, 11. 10.). */
.ulm-popup-house svg { display: block; width: 28px; height: 28px; fill: #224d49; stroke: #224d49; stroke-width: 2; stroke-linejoin: round; }
.ulm-firefly { position: absolute; left: 12px; top: 15.5px; width: 4px; height: 4px; border-radius: 50%; background: #ffc94a; box-shadow: 0 0 3px 1px rgba(255,201,74,.75), 0 0 7px 2px rgba(244,183,64,.35); animation: ulm-firefly 3.2s ease-in-out infinite; }
.is-occupied .ulm-firefly { background: #8e9c9a; box-shadow: none; animation: none; }
@keyframes ulm-firefly { 0%, 100% { opacity: .7; box-shadow: 0 0 2px 1px rgba(255,201,74,.6), 0 0 5px 1px rgba(244,183,64,.25); } 50% { opacity: 1; box-shadow: 0 0 4px 1px rgba(255,201,74,.85), 0 0 9px 3px rgba(244,183,64,.4); } }
@media (prefers-reduced-motion: reduce) { .ulm-firefly { animation: none; } }
.ulm-popup-text { display: grid; gap: 1px; min-width: 0; }
.ulm-popup-content--single .ulm-popup-state { font-size: 9px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #8a959d; }
.ulm-popup-content--single.is-free .ulm-popup-state { color: #8a6412; }
.ulm-popup-content--single .ulm-popup-title { font-size: 13px; font-weight: 500; line-height: 1.25; color: #2a363d; }
.ulm-popup-content--single .ulm-popup-line { font-size: 11px; line-height: 1.4; color: #5a6770; }
.ulm-popup-content--single .ulm-popup-price { color: #2a363d; font-size: 11px; font-weight: 500; }
.ulm-popup-content--single .ulm-popup-stars { color: #8a959d; font-size: 10.5px; }
.ulm-popup-content--single .ulm-popup-sep { color: #b3bcc1; }
.ulm-popup-content--single .ulm-popup-call, .ulm-popup-content--single .ulm-popup-link { margin: 0; color: #1f6a73; font-size: 11px; font-weight: 500; }
.ulm-popup-content--single .ulm-popup-next, .ulm-popup-content--single .ulm-popup-nearby { margin: 0; font-size: 11px; font-weight: 500; }
.ulm-popup-content--single .ulm-popup-precision { font-size: 10px; }

/* Tile seams (Jan, 11. 10.): Leaflet 1.9.4 draws tiles with mix-blend-mode: plus-lighter, which ADDS the colours
   where two tiles meet on a fractional pixel -> a white line. Tiles are drawn 1 px larger (universal-map.js) and
   painted normally, so the overlap simply covers the edge. */
.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }

/* Map over the header (Jan, 11. 10.): Leaflet's layers use z-index 400–1000 and, without a stacking context,
   they competed with the sticky header (z-index 20) and covered its menu. Each map now keeps its layers inside. */
.ulm-map-panel, .leaflet-container, .profile-location-gallery, .ph-gallery-map { isolation: isolate; }

/* Ján, 18. 10. 2026: on touch screens a finger on the side edge of the map scrolls the page; the map moves only
   from the middle. The left strip starts below the zoom buttons, the right one ends above the attribution;
   the area button, tools and legend sit above the strips. Not in full screen, where there is no page to scroll. */
.ulm-scroll-edge { display: none; }
@media (pointer: coarse) {
  .ulm-scroll-edge { display: block; position: absolute; z-index: 450; top: 0; bottom: 0; width: 32px; touch-action: pan-y; }
  .ulm-scroll-edge-left { left: 0; top: 84px; }
  .ulm-scroll-edge-right { right: 0; bottom: 24px; }
  .universal-listing-map.ulm-fullscreen .ulm-scroll-edge { display: none; }
}

/* Ján, 18. 10. 2026: "Zoznam a mapa" in two even halves; the list flows with the page (nothing cut off at the
   bottom) and the map stays in view beside it; a card under the pointer lights up its marker. */
.universal-listing-map[data-map-view="split"] .ulm-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.universal-listing-map[data-map-view="split"] [data-map-list] { max-height: none; overflow: visible; padding-right: 0; }
.universal-listing-map[data-map-view="split"] .ulm-map-panel { position: sticky; top: 88px; height: calc(100vh - 108px); min-height: 460px; }
.ulm-pin.is-hovered .ulm-pin-halo { opacity: .6; transform: scale(1.35); }
.ulm-pin.is-hovered .ulm-pin-label { display: block; }
.leaflet-marker-icon.is-hovered { z-index: 100000 !important; }
@media (max-width: 1180px) {
  .universal-listing-map[data-map-view="split"] .ulm-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.universal-listing-map[data-map-view="split"] .stay-card { min-height: 0; }
.universal-listing-map[data-map-view="split"] .ulm-list-column { max-height: none; overflow: visible; padding-right: 0; }
/* Ján, 18. 10. 2026: with the preview banner above the sticky header the header is 36 px taller – the sticky map
   (and the filters) must start below it, otherwise the zoom buttons slide under the header while scrolling. */
.preview-banner ~ main .universal-listing-map[data-map-view="split"] .ulm-map-panel { top: 124px; height: calc(100vh - 144px); }
/* Ján, 18. 10. 2026: in "Mapa" the map ends level with the filter column (it fills the row height). */
@media (min-width: 981px) {
  .results-layout:has(.universal-listing-map[data-map-view="map"]) { align-items: stretch; }
  .universal-listing-map[data-map-view="map"] { display: flex; flex-direction: column; }
  .universal-listing-map[data-map-view="map"] .ulm-layout { display: flex; flex: 1 1 auto; }
  .universal-listing-map[data-map-view="map"] .ulm-map-panel { flex: 1 1 auto; height: auto; min-height: 560px; }
}