// ===================== assets/css/navigator.css =====================
/* autor: Piotr Waszkiewicz | kontakt: alldomat.wro@gmail.com | www: r99.pl */

/* =========================================================
   CORE / CANVAS (OBRAZ + SVG)
   ========================================================= */
.pw-nav{position:relative; max-width:1200px; margin:0 auto;}
.pw-nav__canvas{position:relative; display:inline-block; line-height:0; width:100%;}
.pw-nav__img{width:100%; height:auto; display:block;}
.pw-nav-plan{ margin-top:12px; }

/* SVG nad obrazkiem i klikalne */
.pw-nav__svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:3;
  pointer-events:auto;
  display:block;
}
.pw-nav__svg polygon{
  pointer-events:auto;
  transition: fill .15s ease;
  stroke:none;
}

/* Podświetlenie na hover wg statusu (legacy — zostawiamy) */
.pw-nav__svg polygon.status-dostepne:hover,
.pw-nav__svg polygon.status-dostepne:focus { fill: rgba(34,197,94,.35); }

.pw-nav__svg polygon.status-sprzedane:hover,
.pw-nav__svg polygon.status-sprzedane:focus { fill: rgba(239,68,68,.35); }

.pw-nav__svg polygon.status-rezerwacja:hover,
.pw-nav__svg polygon.status-rezerwacja:focus { fill: rgba(245,158,11,.35); }

/* Tooltip (legacy) */
.pw-nav__tooltip{
  position:absolute; z-index:4;
  background:#fff; color:#111;
  border:1px solid #e5e7eb; border-radius:8px;
  padding:6px 10px; font-size:13px; box-shadow:0 6px 18px rgba(0,0,0,.12);
  user-select:none; pointer-events:none;
}

.pw-nav-btn{ display:inline-block; padding:10px 14px; border:1px solid #111; border-radius:10px; text-decoration:none; }

/* ===== Tooltip (nowy) ===== */
.pw-nav-tip{
  position:fixed;
  z-index:10050;
  min-width: 220px;
  max-width: 260px;
  background: var(--pw-tip-bg);
  color: var(--pw-tip-text);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  display:none;
}
.pw-nav-tip.is-on{ display:block; }
.pw-nav-tip__title{ font-size:22px; line-height:1.1; margin:0 0 8px; }
.pw-nav-tip__row{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; }
.pw-nav-tip__row span{ opacity:.85; }
.pw-nav-tip__dot{
  position:absolute; right:12px; top:12px;
  width:16px; height:16px; border-radius:999px;
  background:#999;
}

/* ===== Polygon colors by status ===== */
.pw-nav__svg polygon[data-st="wolne"]{ fill: color-mix(in srgb, var(--pw-st-wolne) 22%, transparent); stroke: var(--pw-st-wolne); }
.pw-nav__svg polygon[data-st="rezerwacja"]{ fill: color-mix(in srgb, var(--pw-st-rezerwacja) 22%, transparent); stroke: var(--pw-st-rezerwacja); }
.pw-nav__svg polygon[data-st="sprzedane"]{ fill: color-mix(in srgb, var(--pw-st-sprzedane) 22%, transparent); stroke: var(--pw-st-sprzedane); }
.pw-nav__svg polygon[data-st="wkrotce"]{ fill: color-mix(in srgb, var(--pw-st-wkrotce) 22%, transparent); stroke: var(--pw-st-wkrotce); }

.pw-nav__svg polygon{ stroke-width:2; cursor:pointer; }
.pw-nav__svg polygon:hover{ filter: brightness(1.05); }

/* === PW NAV — obraz inwestycji: radius + border === */
.pw-nav__canvas{
  border-radius: var(--pw-img-radius, 16px);
  overflow: hidden; /* przycina też SVG */
  border: var(--pw-img-border-w, 0px) solid var(--pw-img-border-color, transparent);
}
.pw-nav__img,
.pw-nav__svg{
  border-radius: inherit;
}

/* =========================================================
   PANEL / MODAL (PRAWY)
   ========================================================= */

/* OVERLAY + rozmycie tła (dla panelu lokalu) */
.pw-nav__panel{
  position:fixed; inset:0;
  background: var(--pw-overlay, rgba(0,0,0,.35));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:none;
  z-index:9999;
}
.pw-nav__panel.is-open{
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  padding:0;
}

/* prawa karta */
.pw-nav-modal{
  width: min(380px, 92vw);
  height: 100%;
  max-height: 100vh;
  background: var(--pw-modal-bg,#fff);
  color: var(--pw-modal-text,#111);
  border-radius: 0;
  box-shadow: -18px 0 50px rgba(0,0,0,.25);
  padding: 18px;
  position: relative;
  overflow:auto;
  padding-top: 20px;
}

/* X */
.pw-nav-close{
  position:absolute; right:12px; top:10px;
  border:0; background:#111; color:#fff;
  width:34px; height:34px; border-radius:10px;
  font-size:20px; cursor:pointer;
}

.pw-nav-head{ display:flex; gap:10px; align-items:center; justify-content:space-between; }
.pw-nav-title{ margin:0; font-size:22px; padding-right: 44px; } /* miejsce na X */

/* tabs layout: lewa część + badge po prawej */
.pw-nav-tabs{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:12px 0 14px;
}
.pw-nav-tabs__left{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pw-nav-tab{
  border:1px solid #e5e7eb; background:#fff; padding:7px 10px;
  border-radius:999px; cursor:pointer; color:#111;
}
.pw-nav-tab.is-active{ border-color:var(--pw-modal-accent,#0f766e); color:var(--pw-modal-accent,#0f766e); }

.pw-nav-tabpanel{ display:none; }
.pw-nav-tabpanel.is-active{ display:block; }

/* badge w panelu */
.pw-nav-badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  white-space:nowrap;
  border:1px solid transparent;
}
.pw-nav-badge.is-ok{
  background:#e8f5ee;
  color:#14532d;
  border-color:#b7e3c8;
}
.pw-nav-badge.is-sold{
  background:#fde8e8;
  color:#7f1d1d;
  border-color:#f8b4b4;
}

.pw-nav-list{ display:flex; flex-direction:column; gap:10px; }
.pw-nav-row{ display:flex; justify-content:space-between; gap:10px; }
.pw-nav-row span{ color:#111; opacity:.7; }
.pw-nav-row b{ color:#111; }

.pw-nav-desc{
  font-weight: 500;
  line-height: 1.35;
  color: var(--pw-modal-text, #111);
  max-width: 100%;
}
.pw-nav-row .pw-nav-desc{
  margin-left: auto;
  text-align: right;
  max-width: 60%;
}
@media (max-width: 640px){
  .pw-nav-row .pw-nav-desc{ max-width: 100%; text-align: left; margin-left: 0; }
}

.pw-nav-cta{
  width:100%;
  border:0;
  border-radius:12px;
  padding:12px 14px;
  background:var(--pw-cta-bg,#0f766e);
  color:var(--pw-cta-text,#fff) !important;
  font-weight:800;
  cursor:pointer;
  transition: .15s ease;
  border:1px solid transparent;
}
.pw-nav-cta:hover{
  background:#fff;
  color:#111 !important;
  border-color: rgba(0,0,0,.25);
}

/* galeria w panelu */
.pw-nav-gallery{ margin:12px 0 14px; }
.pw-nav-gallery__track{ display:flex; gap:8px; overflow:auto; padding-bottom:4px; }
.pw-nav-gallery__thumb{ border:0; padding:0; background:transparent; cursor:pointer; flex:0 0 auto; }
.pw-nav-gallery__thumb img{ width:72px; height:56px; object-fit:cover; border-radius:10px; display:block; }

/* historia cen (Omnibus) */
.pw-pricehist{ margin-top:10px; border-top:1px solid rgba(0,0,0,.08); padding-top:10px; }
.pw-pricehist__toggle{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:transparent;
  border:0;
  padding:8px 0;
  font-weight:700;
  cursor:pointer;
}
.pw-pricehist__body{
  padding:8px 0 0;
  font-size:13px;
}
.pw-hrow{
  display:flex;
  gap:8px;
  padding:6px 0;
  border-bottom:1px dashed rgba(0,0,0,.10);
}
.pw-hnone{ opacity:.7; padding:6px 0; }

.pw-price-label{ color:#6b7280; margin-right:8px; white-space:nowrap; }
.pw-old{ text-decoration: line-through; opacity:.6; }
.pw-new{ font-weight:700; }
.pw-omnibus{ margin-top:6px; font-size:12px; opacity:.85; }

/* =========================================================
   FORMULARZ "ZAPYTAJ"
   ========================================================= */
.pw-nav-ask{ display:none; position:fixed; inset:0; z-index:10000; }
.pw-nav-ask.is-open{ display:block; }
.pw-nav-ask__overlay{
  position:absolute; inset:0;
  background: var(--pw-overlay, rgba(0,0,0,.45));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pw-nav-ask__box{
  position:relative;
  width:min(520px, 100%);
  margin:10vh auto 0;
  background:var(--pw-modal-bg,#fff);
  border-radius:18px;
  padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.pw-nav-ask__x{ position:absolute; right:10px; top:10px; border:0; background:transparent; font-size:26px; cursor:pointer; color:var(--pw-modal-muted,#666); }
.pw-nav-ask__title{ margin:0 0 12px; }
.pw-nav-ask__form input, .pw-nav-ask__form textarea{
  width:100%; border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; margin:0 0 10px;
  font:inherit;
  background:#fff;
  color:#111 !important;
}
.pw-nav-ask__form input::placeholder,
.pw-nav-ask__form textarea::placeholder{ color:#6b7280; }
.pw-nav-ask__send{ width:100%; border:0; border-radius:12px; padding:12px 14px; background:var(--pw-cta-bg,#0f766e); color:var(--pw-cta-text,#fff); font-weight:700; cursor:pointer; }
.pw-nav-ask__note{ margin:10px 0 0; color:var(--pw-modal-muted,#6b7280); font-size:13px; }

/* =========================================================
   TOOLS POD OBRAZKIEM (legend + search)
   ========================================================= */
.pw-nav-tools{ margin:14px 0 10px; display:flex; flex-direction:column; gap:12px; }

.pw-nav-legend{ display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap; }
.pw-leg{ display:inline-flex; gap:10px; align-items:center; font-weight:600; }
.pw-leg i{ width:16px; height:16px; border-radius:999px; display:inline-block; background:#999; }
.pw-leg[data-k="wolne"] i{ background:var(--pw-st-wolne); }
.pw-leg[data-k="rezerwacja"] i{ background:var(--pw-st-rezerwacja); }
.pw-leg[data-k="sprzedane"] i{ background:var(--pw-st-sprzedane); }
.pw-leg[data-k="wkrotce"] i{ background:var(--pw-st-wkrotce); }

.pw-nav-search{
  background:#e5e7eb;
  border-radius:16px;
  padding:14px;
  display:grid;
  grid-template-columns: 1.2fr .9fr 1fr auto;
  gap:12px;
  align-items:end;
}
.pw-f label{ display:block; font-weight:700; margin:0 0 6px; color:#111; }
.pw-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pw-nav-search input, .pw-nav-search select{
  width:100%; border:0; border-radius:10px; padding:10px 12px;
  color: #111 !important;
  background: #fff;
}
.pw-nav-search input::placeholder{ color: #6b7280; }
.pw-nav-search option{ color:#111; background:#fff; }
.pw-search-btn{
  border:0; border-radius:12px; padding:10px 16px;
  background:var(--pw-cta-bg); color:var(--pw-cta-text); font-weight:800; cursor:pointer;
}
@media (max-width: 820px){
  .pw-nav-search{ grid-template-columns:1fr; }
}

/* =========================================================
   TABELA (jeśli używana)
   ========================================================= */
.pw-nav__table{margin-top:24px; overflow:auto;}
.pw-nav__table table{width:100%; border-collapse:collapse;}
.pw-nav__table th, .pw-nav__table td{border-bottom:1px solid #eee; padding:10px; text-align:left;}
.pw-nav__table th{background:#f9fafb; position:sticky; top:0;}

.pw-nav-card{border:1px solid #e5e7eb; border-radius:12px; padding:16px; margin-bottom:14px;}

/* =========================================================
   LISTA LOKALI (FINAL — jedna wersja, bez konfliktów)
   ========================================================= */

/* wrapper */
.pw-nav__list{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  color:#111;
}

/* karta */
.pw-nav-li{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;               /* ważne: obraz równo z kontenerem */
  cursor:pointer;
}

/* grid wnętrza (u Ciebie JS buduje .pw-nav-li__grid) */
.pw-nav-li__grid{
  display:grid;
  grid-template-columns: 240px 260px 220px 1fr 170px;
  gap:28px;
  align-items:stretch;           /* KLUCZ: żadnego “centrowania” pionowego */
  padding:0;                     /* brak “luzu” */
  min-height:170px;              /* stabilna wysokość kafla */
}

/* kolumna media */
.pw-nav-li__media{
  margin:0;
  padding:0;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  height:100%;
  line-height:0;                 /* usuwa baseline gap */
  overflow:hidden;
}

/* obrazek */
.pw-nav-li__img,
.pw-nav-li__media img{
  display:block;                 /* usuwa baseline gap */
  width:100%;
  height:100%;
  object-fit:cover;
}

/* kolumny tekstowe (żeby były “w środku” karty) */
.pw-nav-li__titlecol,
.pw-nav-li__featcol,
.pw-nav-li__pricecol,
.pw-nav-li__actions{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

/* tytuł */
.pw-nav-li__title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:700;
  line-height:1.15;
  color:#111;
}

/* status badge przy tytule */
.pw-nav-li__statusBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.02em;
  width:max-content;
}

/* bardziej zielone, wyraźne */
.pw-nav-li__statusBadge.is-wolne{
  background: rgba(22,163,74,.14);
  color: #15803d;
  border: 1px solid rgba(22,163,74,.35);
}
.pw-nav-li__statusBadge.is-rezerwacja{
  background: rgba(245,158,11,.14);
  color: #b45309;
  border: 1px solid rgba(245,158,11,.35);
}
.pw-nav-li__statusBadge.is-sprzedane{
  background: rgba(239,68,68,.12);
  color: #b91c1c;
  border: 1px solid rgba(239,68,68,.30);
}
.pw-nav-li__statusBadge.is-wkrotce{
  background: rgba(156,163,175,.20);
  color: #374151;
  border: 1px solid rgba(156,163,175,.35);
}

/* wiersze cech */
.pw-nav-li__feat{
  display:flex;
  gap:10px;
  align-items:baseline;
  line-height:1.35;
  white-space:nowrap;
}
.pw-li-k{ opacity:.75; min-width: 120px; }
.pw-li-v{ font-weight:700; }

/* ceny */
.pw-nav-li__pricecol .pw-nav-li__feat{ justify-content:space-between; }
.pw-nav-li__feat--muted .pw-li-k{ opacity:.6; }

/* CTA kolumna */
.pw-nav-li__actions{
  gap:12px;
  align-items:flex-end;
}

/* przycisk listy (Zapytaj + ewentualnie Zobacz szczegóły — oba z JS mają .pw-nav-cta) */
.pw-nav .pw-nav-cta.pw-nav-cta--list{
  width:100%;
  background:#fff;
  color:#111 !important;
  border:1px solid #111;
  border-radius:14px;
  padding:10px 18px;
  font-weight:800;
  cursor:pointer;
  transition:.15s ease;
}
.pw-nav .pw-nav-cta.pw-nav-cta--list:hover{
  background: var(--pw-cta-bg, #0f766e);
  color:#fff !important;
  border-color: var(--pw-cta-bg, #0f766e);
}

/* PANEL: CTA – utrzymujemy zielony */
.pw-nav .pw-nav-cta.pw-nav-cta--panel{
  background: var(--pw-cta-bg, #0f766e);
  color:#fff !important;
  border:1px solid transparent;
}
.pw-nav .pw-nav-cta.pw-nav-cta--panel:hover{
  background:#fff;
  color:#111 !important;
  border-color:#111;
}

/* mobile / tablet */
@media (max-width: 980px){
  .pw-nav-li__grid{
    grid-template-columns: 140px 1fr;
    grid-template-areas:
      "img title"
      "img feat"
      "img price"
      "img act";
    gap:14px;
    min-height: unset;
    padding: 12px 12px 12px 0; /* lekki oddech na mobile */
  }
  .pw-nav-li__media{ grid-area: img; }
  .pw-nav-li__titlecol{ grid-area: title; }
  .pw-nav-li__featcol{ grid-area: feat; }
  .pw-nav-li__pricecol{ grid-area: price; }
  .pw-nav-li__actions{ grid-area: act; align-items:flex-start; }
  .pw-li-k{ min-width: 110px; }
}
@media (max-width: 520px){
  .pw-nav-li__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "title"
      "feat"
      "price"
      "act";
    padding:12px;
  }
  .pw-nav-li__media{
    height: 200px;
    border-radius:12px;
  }
}

/* =========================================================
   DROBNE — jeśli gdzieś CTA miało zły kontrast
   ========================================================= */
.pw-nav .pw-nav-cta,
.pw-nav .pw-nav-li__ask{
  color:inherit;
}

/* LISTA — odstęp przycisków od prawej krawędzi (bez ruszania zdjęcia) */
.pw-nav__list .pw-nav-li__actions{
  padding-right: 18px; /* możesz zmienić na 14/16/20 */
  box-sizing: border-box;
}

/* opcjonalnie: delikatny oddech pionowy dla kolumny przycisków */
.pw-nav__list .pw-nav-li__actions{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* mobile: jak przyciski są pod spodem i też dotykają krawędzi */
@media (max-width: 980px){
  .pw-nav__list .pw-nav-li__actions{
    padding-right: 18px;
    padding-left: 18px;
  }
}

/* ===== FIX: etykieta + wartość bez nachodzenia (Pow. działki itp.) ===== */
.pw-nav-li__feat{
  display: grid !important;
  grid-template-columns: 190px 1fr; /* <-- możesz zwiększyć np. do 210px jeśli dalej ciasno */
  column-gap: 14px;
  align-items: baseline;
  line-height: 1.35;
  white-space: normal;
}

.pw-li-k{
  min-width: 0 !important;
  opacity: .75;
  white-space: nowrap;     /* etykieta w 1 linii */
}

.pw-li-v{
  font-weight: 700;
  justify-self: end;       /* wartość do prawej */
  text-align: right;
  white-space: nowrap;     /* liczby zawsze w 1 linii */
}

/* mobile – etykieta krótsza, żeby było wygodnie */
@media (max-width: 980px){
  .pw-nav-li__feat{
    grid-template-columns: 160px 1fr;
  }
}

/* === FIX: nakładanie się kolumn (feat -> price) === */
.pw-nav-li__grid{
  /* więcej miejsca na kolumnę z danymi + stałe CTA */
  grid-template-columns: 240px 240px 360px 260px 180px !important;
  column-gap: 32px !important;
}

/* kolumny w środku niech mogą się kurczyć bez "wypychania" */
.pw-nav-li__titlecol,
.pw-nav-li__featcol,
.pw-nav-li__pricecol{
  min-width: 0 !important;
}

/* rzędy w kolumnach: label po lewej, wartość po prawej */
.pw-nav-li__feat,
.pw-nav-li__pRow{
  justify-content: space-between !important;
  gap: 16px !important;
}

/* label ma stałą szerokość, żeby liczby nie "wchodziły" na tekst */
.pw-li-k{
  min-width: 160px !important;
  flex: 0 0 160px !important;
  white-space: nowrap !important;
}

/* wartość zawsze po prawej i bez zawijania */
.pw-li-v{
  flex: 1 1 auto !important;
  text-align: right !important;
  white-space: nowrap !important;
  justify-self: end !important;
}

/* Ujednolicenie CTA w panelu (button + a) */
.pw-nav .pw-nav-cta.pw-nav-cta--panel {
  display: block;
  width: 100%;
  margin-top: 24px;          /* odstęp od góry */
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 600;
  text-align: center;
}

/* Link (Karta lokalu) ma wyglądać jak button */
.pw-nav .pw-nav-tabpanel a.pw-nav-cta {
  text-decoration: none;
}
/* Odstęp w panelu KARTA LOKALU */
.pw-nav .pw-nav-tabpanel[data-panel="karta"] {
  padding-top: 12px;
}
.pw-nav .pw-nav-cta--panel {
  background: var(--pw-cta-bg, #2f5d3a);
  color: #fff !important;
  border: none;
}

.pw-nav .pw-nav-cta--panel:hover {
  background: #244a2f;
}

/* ===== WYSZUKIWARKA — RÓWNA WYSOKOŚĆ POL ===== */
.pw-nav-search input,
.pw-nav-search select,
.pw-nav-search .pw-search-btn {
  height: 44px;                 /* JEDNA wysokość dla wszystkich */
  box-sizing: border-box;
  border-radius: 12px;
  font-size: 15px;
}

/* inputy */
.pw-nav-search input {
  padding: 0 14px;
}

/* select (Status) */
.pw-nav-search select {
  padding: 0 14px;
  appearance: none;             /* usuwa natywny styl */
  -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}

/* przycisk Szukaj */
.pw-search-btn {
  padding: 0 20px;
  font-weight: 700;
}

/* Historia zmian cen — czytelny układ 1 pod drugim */
.pw-pricehist__body { padding-top: 8px; }

.pw-hrow{
  display: grid;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,.08);
}

.pw-hline{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.pw-hk{
  font-size: 12px;
  opacity: .75;
  line-height: 1.35;
}

.pw-hv{
  font-weight: 800;
  white-space: nowrap;
}