/* Trenuje www — style map (piny, popupy, nakładka mobilna) */

/* Pin w stylu makiet: fioletowa kropla z białym znakiem */
.tm-pin-wrap { background: none; border: none; }
.tm-pin {
  width: 34px; height: 34px;
  background: var(--accent);
  border: 2.5px solid #fff;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  box-shadow: 0 4px 10px rgb(20 18 40 / 0.35);
  display: grid; place-items: center;
}
.tm-pin span {
  transform: rotate(45deg);
  color: #fff; font-family: var(--font-sans);
  font-size: 13px; font-weight: 700; line-height: 1;
}
.tm-pin-big { width: 46px; height: 46px; border-radius: 50% 50% 50% 5px; }
.tm-pin-big span { font-size: 17px; }

/* Popup — karta jak w designie */
.tm-popup .leaflet-popup-content-wrapper {
  border-radius: 16px; box-shadow: var(--shadow-high); padding: 0; overflow: hidden;
}
.tm-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.tm-popup .leaflet-popup-tip { box-shadow: var(--shadow-low); }
.tm-pop { display: flex; gap: 12px; padding: 12px; align-items: center; color: var(--text-primary); width: 300px; }
.tm-pop img { width: 92px; height: 76px; object-fit: cover; border-radius: 10px; flex: none; }
.tm-pop-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tm-pop-body strong { font-family: var(--font-sans); font-size: 14.5px; font-weight: 700; color: var(--ink); }
.tm-pop-meta { font-size: 11px; color: var(--text-secondary); line-height: 1.35; }
.tm-pop-rate { font-size: 11.5px; color: var(--text-secondary); }
.tm-pop-rate b { color: var(--accent-strong); }
.tm-pop-rate { color: var(--text-secondary); }
.tm-pop .tm-pop-rate::first-letter { color: var(--star); }
.tm-pop-btn {
  margin-top: 5px; align-self: flex-start;
  background: var(--accent); color: #fff;
  font-size: 11.5px; font-weight: 600;
  padding: 6px 14px; border-radius: 999px;
}
.tm-pop:hover .tm-pop-btn { background: var(--accent-strong); }

/* Kontenery map */
.tm-map-live { width: 100%; height: 100%; border-radius: 16px; z-index: 0; }
.tm-minimap { width: 100%; height: 132px; border-radius: 16px; z-index: 0; }

/* Mobilna nakładka pełnoekranowa */
#tm-map-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg);
  display: none; flex-direction: column;
}
#tm-map-overlay.open { display: flex; }
#tm-map-overlay .tm-ov-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: var(--surface); border-bottom: 1px solid var(--border-subtle);
}
#tm-map-overlay .tm-ov-head strong { font-size: 16px; font-weight: 700; color: var(--ink); }
#tm-map-overlay .tm-ov-close {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-sunken); color: var(--ink);
  display: grid; place-items: center; font-size: 20px; line-height: 1;
}
#tm-map-mobile { flex: 1; }

/* Atrybucja — subtelnie, w stylu strony */
.leaflet-container { font-family: var(--font-sans); background: var(--surface-sunken); }
.leaflet-control-attribution {
  font-size: 9px; background: rgba(255, 255, 255, 0.75); color: var(--text-tertiary);
}
.leaflet-control-attribution a { color: var(--text-secondary); }
.leaflet-touch .leaflet-bar { border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; }
.leaflet-touch .leaflet-bar a { color: var(--ink); }

/* Nakładka mapy na mobile: szybkie filtry nad mapą (nie sama goła mapa) */
.tm-ov-filters {
  padding: 8px 14px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
}
#tm-map-overlay.open .tm-ov-filters { display: block; }