/* WorkTrip – promień szukania + mapa z klastrowaniem (radius-map.css)
   BP = 992px (jak Bootstrapowe .col-md-*, którego już używasz w kartach ofert):
   poniżej = telefon (mapa wysuwana z prawej), od tej szerokości w górę = komputer (mapa zamiast listy). */

.rm-radius-wrap { position: relative; display: inline-flex; margin: 0 8px 8px 0; vertical-align: middle; }
.rm-radius {
  appearance: none; -webkit-appearance: none;
  border: 1px solid #ced4da; border-radius: .375rem; background: #fff;
  padding: 6px 30px 6px 12px; font-size: .95rem; color: #212529; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px;
}
.rm-radius-wrap.rm-disabled .rm-radius { opacity: .55; }
/* nakładka: prawdziwy <select disabled> w większości przeglądarek w ogóle nie wysyła kliknięć,
   więc komunikat "wybierz miasto" łapiemy tą przezroczystą warstwą, nie zdarzeniem na samym select */
.rm-radius-block { position: absolute; inset: 0; display: none; cursor: not-allowed; }
.rm-radius-wrap.rm-disabled .rm-radius-block { display: block; }

.rm-map-btn-desktop { margin-bottom: 8px; }

/* przycisk-fab na telefonie: przypięty na środku prawej krawędzi ekranu */
.rm-map-fab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1060;
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 56px; border: 0; border-radius: 12px 0 0 12px;
  background: #0d6efd; color: #fff; font-size: 1.3rem; box-shadow: -2px 2px 8px rgba(0,0,0,.25);
}
.rm-map-fab i { pointer-events: none; }

.rm-map-panel { background: #fff; }
.rm-map-panel .rm-map-close { position: absolute; top: 8px; right: 8px; z-index: 2; border: 0; background: #fff;
  border-radius: 50%; width: 34px; height: 34px; box-shadow: 0 1px 4px rgba(0,0,0,.25); font-size: 1.1rem; }
.rm-map-el { width: 100%; height: 100%; }

@media (max-width: 991px) {
  .rm-map-fab { display: flex; }
  .rm-map-btn-desktop { display: none; }
  .rm-map-panel {
    position: fixed; inset: 0; z-index: 1055;
    transform: translateX(100%); transition: transform .35s ease;
  }
  .rm-map-panel.rm-open { transform: translateX(0); }
}
@media (min-width: 992px) {
  .rm-map-fab { display: none; }
  .rm-map-panel { display: none; height: 70vh; margin-bottom: 16px; border-radius: 8px; overflow: hidden; position: relative; }
  .rm-map-panel.rm-open { display: block; }
  .rm-map-panel .rm-map-close { display: none; } /* na komputerze zamyka to samo "Pokaż mapę / Pokaż listę" */
}

/* Leaflet dorzuca własny CSS dla klastrów (kółka z liczbą ofert) — nic więcej nie trzeba stylować */

/* Wolniejsze rozjeżdżanie się klastrów przy zoomie (klasa .rm-slow-anim dokłada radius-map.js tylko
   na czas przybliżania/oddalania). Wyższa specyficzność niż w MarkerCluster.css, więc wygrywa
   niezależnie od kolejności ładowania. Zmieniasz tempo? Zmień .65s tutaj oraz SLOW_ANIM_MS w JS. */
.rm-slow-anim .leaflet-cluster-anim .leaflet-marker-icon,
.rm-slow-anim .leaflet-cluster-anim .leaflet-marker-shadow {
  transition: transform .65s ease-in-out, opacity .65s ease-in-out;
}

/* wizytówka oferty w dymku na mapie */
.rm-popup { min-width: 160px; }
.rm-popup-title { display: block; font-weight: 600; font-size: .95rem; color: #0d6efd; text-decoration: none; cursor: pointer; }
.rm-popup-title:hover { text-decoration: underline; }
.rm-popup-sub { font-size: .8rem; color: #6b7280; margin-top: 2px; }

/* krótkie podświetlenie karty na liście po powrocie z mapy */
[data-id].rm-highlight { animation: rm-flash 2s ease; }
@keyframes rm-flash {
  0%, 100% { box-shadow: none; }
  15%, 60% { box-shadow: 0 0 0 3px #0d6efd; }
}