/* ==========================================================================
   post-sections/workshops/assets/css/leaflet-pins.css
   - Leaflet: mapa + popup
   - Warsztaty: poprawki UI suwaka (jQuery UI) w stylu "jak wcześniej"
   - Fix: mapa nie może znikać (zawsze ma height)
   ========================================================================== */


/* =========================
   1) MAPA — HARD FIX (żeby nie znikała)
   ========================= */
#workshops-map,
.iwt-leaflet-map {
  width: 100%;
  height: 600px !important;
  min-height: 550px !important;
  display: block !important;
  position: relative;
  overflow: hidden;
}

@media (max-width: 991px) {
  #workshops-map,
  .iwt-leaflet-map {
    height: 400px !important;
    min-height: 350px !important;
  }
}

@media (max-width: 575px) {
  #workshops-map,
  .iwt-leaflet-map {
    height: 320px !important;
    min-height: 260px !important;
  }
}

/* Leaflet czasem dziedziczy dziwne style obrazków (motyw) */
.leaflet-container img,
.leaflet-container svg {
  max-width: none !important;
}

/* Ikony markerów — żeby motyw nie rozciągał */
.leaflet-marker-icon,
.leaflet-marker-shadow {
  width: auto !important;
  height: auto !important;
}

.leaflet-marker-icon.iwt-leaflet-marker-icon {
  object-fit: contain !important;
}


/* =========================
   2) POPUP — wygląd
   ========================= */
.iwt-leaflet-popup {
  font-size: 14px;
  line-height: 1.35;
  min-width: 220px;
}

.iwt-leaflet-popup__title {
  font-weight: 700;
  margin-bottom: 6px;
}

.iwt-leaflet-popup__row {
  margin: 2px 0;
}

.iwt-leaflet-popup__img {
  width: 100%;
  height: 120px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  margin: 10px 0;
}

.iwt-leaflet-popup__content {
  margin-top: 8px;
}

.iwt-leaflet-popup__actions {
  margin-top: 10px;
}

.iwt-leaflet-popup__btn {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  color: #111;
}

.iwt-leaflet-popup__btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
/* ===========================
   SUWAK (jQuery UI) — final
   - tor: gruby, czerwony, bez zaokrągleń (wysokość jak czerwone bloki)
   - gałka: szersza, żeby < > nie nachodziły na liczbę
   - strzałki: tekst "<" i ">"
   - min/max: przy samych krawędziach toru
   =========================== */

#workshops-distance-slider.ui-slider{
  position: relative;
  height: 31px;                 /* GRUBY tor — ustaw w razie potrzeby 36px */
  background: #CB1B22;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  margin-top: 12px;
  margin-bottom: 22px;
}

/* jeżeli jQuery UI tworzy range, to musi być taki sam */
#workshops-distance-slider .ui-slider-range{
  height: 100%;
  background: #CB1B22;
  border-radius: 0;
}

/* gałka (biały suwak) — szersza */
#workshops-distance-slider .ui-slider-handle{
  position: absolute;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 86px;                  /* DŁUŻSZA — żeby < > nie wchodziły na liczbę */
  height: 36px;

  background: #fff;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.20);
  box-shadow: 0 10px 18px rgba(0,0,0,.14);

  cursor: pointer;
  z-index: 5;
  outline: none;
  overflow: hidden;
  text-indent: 0 !important;
}

/* usuń ewentualne pseudo-elementy / kropki z motywu */
#workshops-distance-slider .ui-slider-handle::before,
#workshops-distance-slider .ui-slider-handle::after{
  content: none !important;
  display: none !important;
}

/* napis z wartością w środku */
#workshops-distance-slider .ui-slider-handle .label{
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;
  font-weight: 900;
  color: #111;
  line-height: 1;

  user-select: none;
  pointer-events: none;
}

/* strzałki jako TEKST: < i > */
#workshops-distance-slider .ui-slider-handle .label::before,
#workshops-distance-slider .ui-slider-handle .label::after{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 900;
  color: #111;
  line-height: 1;
  opacity: .95;
}

/* lewa strzałka */
#workshops-distance-slider .ui-slider-handle .label::before{
  content: "<";
  left: 10px;                   /* odstęp od krawędzi gałki */
}

/* prawa strzałka */
#workshops-distance-slider .ui-slider-handle .label::after{
  content: ">";
  right: 10px;
}

/* 5 i 1000 — przy samych krawędziach toru */
#workshops-distance-slider .range-info{
  position: absolute;
  top: calc(100% + 6px);        /* tuż pod czerwonym torem */
  font-size: 15px;              /* trochę większe */
  font-weight: 800;
  color: #fff;
  line-height: 1;
  user-select: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* maksymalnie do krawędzi */
#workshops-distance-slider .range-info.min{
  left: 0;
  transform: translateX(-2px);  /* minimalnie “na styk” */
  text-align: left;
}

#workshops-distance-slider .range-info.max{
  right: 0;
  transform: translateX(2px);   /* minimalnie “na styk” */
  text-align: right;
}

/* Mobile dopasowanie */
@media (max-width: 575px){
  #workshops-distance-slider.ui-slider{
    height: 32px;
  }
  #workshops-distance-slider .ui-slider-handle{
    width: 80px;
    height: 34px;
  }
  #workshops-distance-slider .ui-slider-handle .label{
    font-size: 12px;
  }
  #workshops-distance-slider .ui-slider-handle .label::before,
  #workshops-distance-slider .ui-slider-handle .label::after{
    font-size: 15px;
  }
  #workshops-distance-slider .range-info{
    font-size: 14px;
  }
}

/* =========================
   4) LISTA — “aktywny/nieaktywny” (jeśli JS filtruje)
   ========================= */
.workshops-category:not(.active) {
  opacity: .35;
}

.workshops-element:not(.active) {
  display: none;
}

/* Jeśli chcesz tylko przygaszać zamiast ukrywać — zamień powyższe na:
.workshops-element:not(.active){ opacity:.35; pointer-events:none; }
*/
/* =========================
   FIX: Leaflet vs Sticky Header
   (bez dotykania position headera)
   ========================= */

/* 1) Header zawsze nad mapą – UWAGA:
   NIE ustawiamy position, tylko z-index */
#masthead,
#header,
.site-header,
.header,
.sticky-header,
.header-sticky,
.iwt-header,
.iwt-topbar {
  z-index: 99999 !important;
}

/* Jeśli motyw dodaje klasę przy "sticky/fixed" */
.is-sticky,
.is-fixed,
.sticky,
.fixed {
  z-index: 99999 !important;
}

/* 2) Mapa Leaflet ma być pod headerem */
.iwt-section.type-workshops .map,
.iwt-section.type-workshops .iwt-leaflet-map,
#workshops-map,
.leaflet-container {
  position: relative;
  z-index: 1 !important;
}

/* 3) Najczęstszy winowajca: Leaflet panes i controls mają wysokie z-index */
.leaflet-pane { z-index: 100 !important; }
.leaflet-tile-pane { z-index: 200 !important; }
.leaflet-overlay-pane { z-index: 300 !important; }
.leaflet-shadow-pane { z-index: 400 !important; }
.leaflet-marker-pane { z-index: 500 !important; }
.leaflet-tooltip-pane { z-index: 650 !important; }
.leaflet-popup-pane { z-index: 700 !important; }

/* Kontrolki mapy */
.leaflet-control { z-index: 800 !important; }
.leaflet-top, .leaflet-bottom { z-index: 800 !important; }

/* 4) Popup i tooltip mają być niżej niż header (header ma ~99999) */
.leaflet-popup,
.leaflet-tooltip {
  z-index: 900 !important;
}