/* =================================================================
   wyszukiwarka.css — style dedykowane stronie wyszukiwarki ofert
   (formularz wyszukiwania z pickerem dat, nagłówek wyników,
    siatka kart apartamentów, karta "brak wolnych apartamentów").

   Wymaga uprzedniego załadowania podglad-rezerwacja.css — stamtąd
   pochodzą zmienne CSS (--wlr-blue, --wlr-blue-light, --wlr-blue-dark,
   --wlr-green, --wlr-green-light, --wlr-amber, --wlr-amber-light,
   --wlr-error, --wlr-card, --wlr-text, --wlr-text-soft,
   --wlr-text-faint, --wlr-border, --wlr-border-soft, --radius, --shadow)
   oraz reset i bazowa typografia.

   UWAGA o sortowaniu: reguły poniżej są ułożone w kolejności, w jakiej
   odpowiadające im elementy pojawiają się w wyszukiwarka.html — od
   formularza na górze strony, przez nagłówek wyników i siatkę kart,
   aż po sekcję "brak wyników" i media queries na końcu.
   ================================================================= */


/* =================================================================
   1. FORMULARZ WYSZUKIWANIA (białe pudełko nad listą wyników)
   HTML: .search-form-card → <form class="search-form"> (ok. linia 143)
   ================================================================= */

/* Białe pudełko z cieniem, w którym siedzi cały formularz wyszukiwania.
   Używa wspólnego radiusa i cienia z motywu, żeby wpasować się wizualnie
   w pozostałe karty na stronie (np. .no-results, .apt-card). */
.search-form-card{background:var(--wlr-card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 20px;margin-bottom:24px;}

/* Sam <form>: pola ustawione w wierszu z flex-wrap, żeby na wąskich
   ekranach mogły się zawinąć. align-items:flex-end zapewnia, że
   przycisk "Szukaj" (50px wysokości) ląduje na tej samej linii co dolne
   krawędzie pól dat i klawiszy gości — niezależnie od wysokości etykiet. */
.search-form{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;}

/* Pojedyncze pole formularza (etykieta + kontrolka).
   position:relative jest potrzebny dla absolutnie pozycjonowanego
   popupu pickera dat (.dr-popup), który ma się rozwijać dokładnie
   pod polem dat. min-width:0 zapobiega rozpychaniu się flexboxa przez
   długie wartości tekstowe wewnątrz. */
.search-form-field{display:flex;flex-direction:column;min-width:0;position:relative;}

/* Pole "Termin pobytu" — bardziej elastyczne, bo zawiera dwa
   przyciski (zameldowanie + wymeldowanie). flex:1 1 360px pozwala
   mu wziąć całą dostępną przestrzeń, ale nie kurczyć się poniżej
   360px (poniżej tej granicy zawija się na nowy wiersz). */
.search-form-field-dates{flex:1 1 360px;}

/* Pole "Liczba gości" — minimalna szerokość (4 przyciski liczbowe),
   nie powiększa się ponad zawartość (flex:0 0 auto). */
.search-form-field-guests{flex:0 0 auto;}

/* Etykietki nad polami ("TERMIN POBYTU", "LIZCBA GOŚCI") —
   mała, gruba kapitalik z literspacingiem dla efektu "field label". */
.search-form-label{font-size:.72rem;font-weight:700;color:var(--wlr-text-soft);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em;}


/* =================================================================
   2. DATE RANGE PICKER — dwa pola dat z popupem kalendarza
   HTML: .dr-fields → .dr-input/.dr-divider (linie ~149-173),
         .dr-popup wypełniany dynamicznie przez JS (linia 178)
   ================================================================= */

/* Wspólne ramki obu pól (zameldowanie + ikona strzałki + wymeldowanie)
   sklejone w jeden "input-look". Wysokość 50px jest dobrana tak, żeby
   pasowała 1:1 do .search-submit-btn i .guest-count button — wszystko
   na jednej linii bazowej. overflow:hidden chowa zaokrąglenia
   wewnętrznych przycisków przy hoverze. */
.dr-fields{display:flex;align-items:stretch;
  border:1px solid var(--wlr-border);border-radius:7px;
  background:#fff;overflow:hidden;height:50px;}

/* Sam przycisk daty (klikalny, otwiera popup).
   Dwa wiersze tekstu: małe "ZAMELDOWANIE/WYMELDOWANIE" + większa data,
   stąd flex-direction:column. Bez własnego tła/borderu, bo siedzi
   w ramce .dr-fields. min-width:0 + biały kolor tekstu w span'ach
   pozwalają poprawnie ucinać długie daty z ellipsis. */
.dr-input{flex:1;background:none;border:none;
  padding:6px 14px;text-align:left;font-family:inherit;color:var(--wlr-text);
  cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:2px;
  transition:background .15s,box-shadow .15s;min-width:0;}

/* Hover — delikatne, niebieskawe tło sugerujące klikalność. */
.dr-input:hover{background:var(--wlr-blue-light);}

/* Stan aktywny — gdy użytkownik kliknął w pole i picker je "śledzi"
   (np. wybiera datę startu). inset box-shadow daje grubszą niebieską
   ramkę bez przesuwania layoutu (border by zmienił rozmiar pola). */
.dr-input.dr-active{background:var(--wlr-blue-light);
  box-shadow:inset 0 0 0 2px var(--wlr-blue);}

/* Mały label nad datą (np. "ZAMELDOWANIE"). */
.dr-input-sub{font-size:.65rem;font-weight:700;color:var(--wlr-text-soft);
  text-transform:uppercase;letter-spacing:.06em;}

/* Sama wartość daty (np. "28 lipca 2026"). Ellipsis, gdy się nie mieści. */
.dr-input-val{font-size:.95rem;font-weight:600;color:var(--wlr-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Wąski separator z ikoną strzałki między dwoma datami. Dwa cienkie
   bordery (lewy i prawy) dają wrażenie zagnieżdżonego elementu mimo
   transparentnego tła. */
.dr-divider{display:flex;align-items:center;justify-content:center;
  color:var(--wlr-text-faint);padding:0 6px;flex:0 0 auto;
  border-left:1px solid var(--wlr-border-soft);
  border-right:1px solid var(--wlr-border-soft);}
.dr-divider svg{width:16px;height:16px;}

/* Popup z dwoma kalendarzami pojawiający się pod polem dat.
   position:absolute względem .search-form-field; z-index:100 wynosi go
   ponad sąsiednie karty i sticky-bary. top:calc(100% + 8px) dodaje
   małą szczelinę między polem a popupem. display:none — domyślnie
   ukryty, otwierany przez dodanie .open w JS. max-width zabezpiecza
   przed wystawaniem poza viewport na małych ekranach. */
.dr-popup{position:absolute;z-index:100;top:calc(100% + 8px);left:0;
  background:#fff;border:1px solid var(--wlr-border);
  border-radius:var(--radius);box-shadow:0 14px 40px rgba(40,55,75,.22);
  padding:16px;display:none;max-width:calc(100vw - 32px);}
.dr-popup.open{display:block;}

/* Pasek nagłówka popupu: strzałka wstecz | tytuły miesięcy | strzałka naprzód */
.dr-popup-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;}

/* Okrągłe przyciski "<" i ">" do przewijania miesięcy. */
.dr-popup-nav{background:none;border:none;width:34px;height:34px;
  border-radius:50%;font-size:1.4rem;line-height:1;color:var(--wlr-blue);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:inherit;transition:background .15s;flex:0 0 auto;}
.dr-popup-nav:hover{background:var(--wlr-blue-light);}

/* Kontener na tytuły obu miesięcy (np. "lipiec 2026" | "sierpień 2026"). */
.dr-popup-titles{flex:1;display:flex;justify-content:space-around;gap:20px;}
.dr-popup-month-title{font-weight:700;font-size:.95rem;
  color:var(--wlr-text);text-transform:capitalize;}

/* Dwa miesiące obok siebie (desktop). Na mobile (≤700px) lecą jeden pod drugim. */
.dr-popup-months{display:flex;gap:24px;}
.dr-popup-month{width:240px;}

/* Rządek skrótów dni tygodnia (Pn Wt Śr Cz Pt So Nd). */
.dr-popup-weekdays{display:grid;grid-template-columns:repeat(7,1fr);
  gap:2px;margin-bottom:4px;}
.dr-popup-weekday{text-align:center;font-size:.72rem;font-weight:700;
  color:var(--wlr-text-soft);text-transform:uppercase;letter-spacing:.04em;
  padding:4px 0;}

/* Siatka 7-kolumnowa z dniami miesiąca. */
.dr-popup-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}

/* Pojedyncza komórka dnia — kwadrat (aspect-ratio:1), zaokrąglona,
   z aktywnym hover-stanem. */
.dr-popup-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:.88rem;color:var(--wlr-text);border-radius:6px;cursor:pointer;
  user-select:none;transition:background .12s,color .12s;}

/* Hover tylko na dniach klikalnych (pomijamy puste sloty, zablokowane
   i przeszłe — :not pipeline). */
.dr-popup-day:hover:not(.dr-popup-day-empty):not(.dr-popup-day-disabled):not(.dr-popup-day-past){
  background:var(--wlr-blue-light);color:var(--wlr-blue);}

/* Puste sloty na początku/końcu miesiąca (dla wyrównania siatki). */
.dr-popup-day-empty{cursor:default;pointer-events:none;}

/* Dni z przeszłości i zablokowane (np. zajęte) — przygaszone, nieklikalne. */
.dr-popup-day-past,.dr-popup-day-disabled{
  color:var(--wlr-text-faint);cursor:not-allowed;opacity:.55;}

/* Dzisiejszy dzień — cienka niebieska obwódka inset (bez ruszania
   wymiarów komórki). */
.dr-popup-day-today{box-shadow:inset 0 0 0 1px var(--wlr-blue);font-weight:700;}

/* Wybrany dzień startu/końca zakresu — pełne niebieskie tło, biały tekst.
   !important wygrywa z hover-stanami i in-range. */
.dr-popup-day-start,.dr-popup-day-end{
  background:var(--wlr-blue) !important;color:#fff !important;font-weight:700;}

/* Dni między startem a końcem zakresu — jasnoniebieski podkład. */
.dr-popup-day-in-range{background:var(--wlr-blue-light);color:var(--wlr-blue);}

/* Podgląd zakresu przy hoverze (przed kliknięciem daty końca). */
.dr-popup-day-hover-range{background:var(--wlr-blue-light);color:var(--wlr-blue);}
.dr-popup-day-hover-end{background:var(--wlr-blue) !important;color:#fff !important;}

/* Stopka popupu z podsumowaniem (np. "2 noce") + przyciski. */
.dr-popup-footer{margin-top:12px;padding-top:10px;
  border-top:1px solid var(--wlr-border-soft);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.85rem;color:var(--wlr-text-soft);}
.dr-popup-footer b{color:var(--wlr-blue);font-weight:700;}

/* "Pigułka" z liczbą nocy w stopce popupu. */
.dr-popup-nights{background:var(--wlr-blue-light);color:var(--wlr-blue);
  padding:4px 10px;border-radius:14px;font-weight:600;font-size:.82rem;}


/* =================================================================
   3. LICZBA GOŚCI — przyciski 1/2/3/4
   HTML: .guest-count (linia ~185)
   ================================================================= */

/* Rząd 4 przycisków liczbowych — gap mały, żeby trzymały się w jednym
   "module" wizualnym obok pola dat. */
.guest-count{display:inline-flex;gap:6px;}

/* Pojedynczy przycisk liczbowy. Wysokość 50px = parytet z polami dat
   i przyciskiem szukaj — wszystko ląduje na jednej linii bazowej. */
.guest-count button{width:46px;height:50px;padding:0;
  background:#fff;border:1px solid var(--wlr-border);
  font-family:inherit;font-size:1rem;font-weight:700;
  color:var(--wlr-text);cursor:pointer;border-radius:7px;
  transition:border-color .15s,background .15s,color .15s,transform .1s;}

/* Hover — niebieska obwódka i tekst. */
.guest-count button:hover{border-color:var(--wlr-blue);color:var(--wlr-blue);}

/* Wybrany przycisk (klasa .active dodawana przez JS) — pełne tło. */
.guest-count button.active{background:var(--wlr-blue);border-color:var(--wlr-blue);
  color:#fff;}

/* Mikroanimacja kliknięcia — przycisk "wciska się". */
.guest-count button:active{transform:translateY(1px);}


/* =================================================================
   4. PRZYCISK "SZUKAJ"
   HTML: .search-submit-btn (linia ~201)
   ================================================================= */

/* Główny CTA formularza. inline-flex + gap dla SVG-lupki + napisu.
   Wysokość 50px = ta sama linia co pola dat i guzików gości.
   flex:0 0 auto — przycisk nie rozciąga się ponad swoją zawartość. */
.search-submit-btn{display:inline-flex;align-items:center;justify-content:center;
  gap:8px;flex:0 0 auto;height:50px;padding:0 26px;
  background:var(--wlr-blue);color:#fff;border:none;border-radius:7px;
  font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;
  transition:background .15s,transform .1s;}
.search-submit-btn:hover{background:var(--wlr-blue-dark);}
.search-submit-btn:active{transform:translateY(1px);}
.search-submit-btn svg{width:16px;height:16px;flex:0 0 auto;}


/* =================================================================
   5. (opcjonalny) STICKY BAR Z KRYTERIAMI WYSZUKIWANIA
   Style przygotowane pod alternatywny wariant strony, w którym
   nad wynikami pojawia się przyklejony pasek z chipami "od kiedy",
   "do kiedy", "ilu gości" + przycisk "Edytuj". W obecnym HTML
   (wyszukiwarka.html) ta sekcja NIE jest używana — pełny formularz
   pokazany jest zamiast tego. Zostawione na wypadek włączenia.
   ================================================================= */

/* Sticky:top=0 sprawia, że pasek "lepi się" do góry viewportu przy
   scrollu — użytkownik ciągle widzi, czego szuka. z-index:30 wyżej
   niż karty wyników, ale niżej niż popup pickera dat (z-index:100). */
.search-criteria{position:sticky;top:0;z-index:30;
  background:var(--wlr-card);border-bottom:1px solid var(--wlr-border);
  padding:14px 0;margin-bottom:24px;
  box-shadow:0 2px 12px rgba(40,55,75,.06);}

/* Wnętrze paska — chipy w wierszu, zawijają się na wąskim ekranie. */
.search-criteria-inner{display:flex;align-items:center;gap:18px;
  flex-wrap:wrap;}

/* "Pigułka" z kryterium (np. "28 lip – 30 lip"). Niebieska, bo to
   główny akcent — szybko przyciąga wzrok. */
.search-chip{display:inline-flex;align-items:center;gap:8px;
  background:var(--wlr-blue-light);color:var(--wlr-blue);
  padding:8px 14px;border-radius:20px;font-weight:600;font-size:.92rem;}
.search-chip svg{width:16px;height:16px;flex:0 0 auto;}

/* Dopisek przy chipie (np. "(2 noce)") — szary, mniejszy. */
.search-chip-sub{color:var(--wlr-text-soft);font-weight:500;font-size:.88rem;}

/* Przycisk "Edytuj" wepchnięty na koniec paska przez margin-left:auto
   — flexbox sam go zepchnie w prawo. */
.search-edit-btn{margin-left:auto;background:none;border:1px solid var(--wlr-border);
  color:var(--wlr-text);padding:8px 16px;border-radius:7px;
  font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;
  transition:border-color .15s,color .15s;}
.search-edit-btn:hover{border-color:var(--wlr-blue);color:var(--wlr-blue);}


/* =================================================================
   6. NAGŁÓWEK WYNIKÓW + SORTOWANIE
   HTML: .search-meta z <h1> i .search-sort (linie ~213-239)
   ================================================================= */

/* Wiersz: po lewej "Dostępne apartamenty (5)", po prawej dropdown
   sortowania. space-between rozsuwa je do krawędzi.
   flex-wrap pozwala dropdownowi zejść na nowy wiersz na mobile. */
.search-meta{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;margin-bottom:22px;}

/* Główny H1 strony. <b> w środku jest niebieskie — wyróżnia liczbę wyników. */
.search-meta h1{font-size:1.6rem;font-weight:700;color:var(--wlr-text);}
.search-meta h1 b{color:var(--wlr-blue);}

/* Grupka "Sortuj: [select]". */
.search-sort{display:flex;align-items:center;gap:10px;}
.search-sort label{font-size:.88rem;color:var(--wlr-text-soft);font-weight:600;margin:0;}

/* width:auto przebija ewentualne globalne width:100% dla <select>
   z bazowego stylu — chcemy, żeby select dopasował się do treści. */
.search-sort select{width:auto;padding:8px 30px 8px 12px;font-size:.9rem;}


/* =================================================================
   7. SIATKA KART APARTAMENTÓW
   HTML: .apt-grid (linia 242)
   ================================================================= */

/* Auto-fill + minmax(310px, 1fr) = responsywna siatka bez media queries:
   tyle kolumn ile się zmieści, każda min. 310px (poniżej tej szerokości
   karta wyglądałaby ciasno — zdjęcie + 2 przyciski w stopce). gap:22px
   daje odpowiedni "oddech" między kartami. */
.apt-grid{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:22px;margin-bottom:36px;}


/* =================================================================
   8. KARTA APARTAMENTU — kontener + animacja hover
   HTML: <article class="apt-card"> (linie 245, 307, 370, 425, 485)
   ================================================================= */

/* Biała karta z cieniem, treść układana w kolumnie.
   overflow:hidden potrzebny żeby zaokrąglone narożniki obcięły
   zdjęcie u góry. transition na transform+shadow obsługuje efekt
   "lewitującej" karty przy hoverze. */
.apt-card{background:var(--wlr-card);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;}

/* Hover — karta unosi się o 3px i dostaje mocniejszy cień. */
.apt-card:hover{transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(40,55,75,.16);}


/* =================================================================
   9. ZDJĘCIE NA KARCIE + NAKŁADKI (badge, mapa, licznik zdjęć)
   HTML: .apt-card-photo (linia ~246) i jego dzieci
   ================================================================= */

/* Wrapper na zdjęcie. aspect-ratio:16/10 utrzymuje stałe proporcje
   niezależnie od rzeczywistego rozmiaru pliku — wszystkie karty mają
   identyczną wysokość zdjęcia, co stabilizuje siatkę. position:relative
   służy jako układ odniesienia dla absolutnie pozycjonowanych nakładek
   (.apt-badges, .apt-map, .apt-photo-count). Szare tło pełni rolę
   placeholdera podczas ładowania obrazka. */
.apt-card-photo{position:relative;width:100%;aspect-ratio:16/10;
  overflow:hidden;background:#d4dde3;}

/* Samo <img> — wypełnia wrapper z object-fit:cover (kadrowanie zachowuje
   proporcje). transition na transform jest spinany z .apt-card:hover. */
.apt-card-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;}

/* Subtelny zoom zdjęcia przy hoverze karty — "życie" w galerii. */
.apt-card:hover .apt-card-photo img{transform:scale(1.05);}

/* Stosik odznaczek w LEWYM-GÓRNYM rogu zdjęcia.
   max-width:calc(100% - 70px) zostawia ~70px miejsca na ikonkę mapy
   w prawym rogu, gdyby było dużo badge'y. */
.apt-badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap;
  max-width:calc(100% - 70px);}

/* Pojedynczy badge ("Popularny", "Nowość", "−15%" itp.). Wszystkie
   wspólnie: białe litery, mały caps, lekki cień dla czytelności na
   dowolnym tle zdjęcia. Konkretne kolory dodają warianty poniżej. */
.apt-badge{font-size:.7rem;font-weight:800;letter-spacing:.04em;
  padding:5px 11px;border-radius:20px;color:#fff;text-transform:uppercase;
  box-shadow:0 2px 6px rgba(0,0,0,.18);}

/* Warianty badge'y — kolory dobrane do znaczenia:
   - popular: fiolet (wyróżnienie marketingowe)
   - deal: bursztynowy z motywu (promocja)
   - last-minute: czerwony (pilność)
   - new: zielony z motywu (nowość)
   - btc: czarny z pomarańczowym napisem (kolory marki Bitcoin)
   - unavailable: czerwony (niedostępność) */
.apt-badge.popular{background:#7c3aed;}
.apt-badge.deal{background:var(--wlr-amber);}
.apt-badge.last-minute{background:var(--wlr-error);}
.apt-badge.new{background:var(--wlr-green);}
.apt-badge.btc{background:#000;color:#f7931a;}
.apt-badge.unavailable{background:var(--wlr-error);}

/* Okrągła ikonka Google Maps w PRAWYM-GÓRNYM rogu zdjęcia.
   rgba(255,255,255,.95) — prawie biała, żeby ikona była czytelna nawet
   na jasnym zdjęciu. color #ea4335 to czerwień marki Google Maps. */
.apt-map{position:absolute;top:12px;right:12px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.95);color:#ea4335;     /* Google Maps red */
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  transition:transform .15s,background .15s;}
.apt-map svg{width:20px;height:20px;}
.apt-map:hover{background:#fff;transform:scale(1.1);text-decoration:none;color:#ea4335;}

/* Licznik zdjęć w PRAWYM-DOLNYM rogu fotki (np. "12 zdjęć"). Półprzezroczyste
   czarne tło — czytelne na dowolnym tle, nieinwazyjne wizualnie. */
.apt-photo-count{position:absolute;bottom:12px;right:12px;
  background:rgba(0,0,0,.6);color:#fff;
  padding:4px 10px;border-radius:14px;
  font-size:.78rem;font-weight:600;
  display:inline-flex;align-items:center;gap:5px;}
.apt-photo-count svg{width:14px;height:14px;}


/* =================================================================
   10. KORPUS KARTY — nazwa apartamentu i adres
   HTML: .apt-card-body → .apt-card-name + .apt-card-address (linie ~271-283)
   ================================================================= */

/* Treść karty pod zdjęciem. flex:1 wymusza wypełnienie pozostałej
   wysokości — dzięki temu stopka z ceną (margin-top:auto) zawsze
   "klei się" do dołu, niezależnie od długości adresu. */
.apt-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;
  flex:1;gap:12px;}

/* Nazwa apartamentu — niebieska, bo to "tytuł oferty". */
.apt-card-name{font-size:1.2rem;font-weight:700;color:var(--wlr-blue);
  line-height:1.2;margin-bottom:2px;}

/* Adres pod nazwą — szary, mniejszy, ikona pinezki obok.
   align-items:flex-start trzyma ikonę u góry przy adresach łamiących
   się na dwa wiersze. */
.apt-card-address{font-size:.85rem;color:var(--wlr-text-soft);
  display:flex;align-items:flex-start;gap:5px;line-height:1.4;}
.apt-card-address svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;}


/* =================================================================
   11. STOPKA KARTY — ceny + przyciski akcji
   HTML: .apt-footer → .apt-price-block + .apt-actions (linie ~285-302)
   ================================================================= */

/* margin-top:auto przykleja stopkę do dołu .apt-card-body — wszystkie
   karty mają cenę i przyciski na tej samej wysokości, niezależnie
   od długości adresu. Cienka linia na górze oddziela stopkę od reszty. */
.apt-footer{margin-top:auto;display:flex;flex-direction:column;gap:12px;
  padding-top:14px;border-top:1px solid var(--wlr-border-soft);}

/* Wiersz z ceną. align-items:baseline wyrównuje pełną cenę i cenę
   przekreśloną po linii bazowej tekstu — wygląda jak jeden napis. */
.apt-price-block{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}

/* Główna cena w PLN — duża, gruba, ciemna. */
.apt-price-main{font-size:1.5rem;font-weight:700;color:var(--wlr-text);
  line-height:1;}

/* Cena "było" (przekreślona) — pokazuje promocję. Mniejsza i bladsza. */
.apt-price-was{font-size:.85rem;text-decoration:line-through;
  color:var(--wlr-text-faint);font-weight:500;}

/* Linijka pod ceną PLN z orientacyjnymi kwotami w EUR/USD/BTC.
   width:100% wymusza złamanie na nowy wiersz w obrębie flex-containera.
   Drobny, jasnoszary — info "do orientacji", nie konkurujące z PLN. */
.apt-price-currencies{font-size:.72rem;color:var(--wlr-text-faint);font-weight:400;
  width:100%;margin-top:-2px;}

/* Dwa przyciski obok siebie ("Szczegóły" + "Zarezerwuj").
   Każdy bierze równe pół (flex:1) i centruje tekst. */
.apt-actions{display:flex;gap:8px;}
.apt-actions > a{flex:1;text-align:center;justify-content:center;}

/* "Szczegóły" — przycisk wtórny: biały z niebieską obwódką.
   Border 1.5px zamiast 1px, żeby na hoverze (kiedy tło robi się
   niebieskie) nie skakał układ. */
.btn-outline{background:#fff;color:var(--wlr-blue);
  border:1.5px solid var(--wlr-blue);font-family:inherit;
  font-size:.9rem;font-weight:600;padding:10px 16px;
  border-radius:7px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;
  transition:background .15s,color .15s;}
.btn-outline:hover{background:var(--wlr-blue);color:#fff;text-decoration:none;}

/* "Zarezerwuj" — główne CTA karty: pełne niebieskie tło. */
.btn-card-cta{background:var(--wlr-blue);color:#fff;border:1.5px solid var(--wlr-blue);
  font-family:inherit;font-size:.9rem;font-weight:700;padding:10px 18px;
  border-radius:7px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;
  transition:background .15s,border-color .15s,transform .1s;}
.btn-card-cta:hover{background:var(--wlr-blue-dark);border-color:var(--wlr-blue-dark);
  color:#fff;text-decoration:none;}
.btn-card-cta:active{transform:translateY(1px);}


/* =================================================================
   12. KARTA NIEDOSTĘPNA — ostatni apartament (Chmielna I) i WhatsApp
   HTML: <article class="apt-card unavailable"> (linia 485),
         .apt-unavailable-info (linia 524), .btn-whatsapp (linia 539)
   ================================================================= */

/* Karta oznaczona klasą .unavailable — bardzo delikatne przyciemnienie
   (opacity 96%) sygnalizuje "nieaktywność", ale nie psuje czytelności. */
.apt-card.unavailable{opacity:.96;}

/* Wyłączamy efekt "lewitowania" — karta nie zachęca do interakcji
   tak mocno jak aktywne oferty. */
.apt-card.unavailable:hover{transform:none;box-shadow:var(--shadow);}

/* Zdjęcie w skali szarości + przygaszone — wizualnie odróżnia
   "wyszarzoną" ofertę od aktywnych. */
.apt-card.unavailable .apt-card-photo img{filter:grayscale(75%) brightness(.92);}

/* I bez zoomu zdjęcia na hover — spójne z brakiem unoszenia karty. */
.apt-card.unavailable:hover .apt-card-photo img{transform:none;}

/* Bursztynowy baner z wyjaśnieniem dlaczego rezerwacja online jest
   niedostępna. Lewy pasek 3px ułatwia identyfikację jako "notatka/info".
   flex-direction:row + align-items:flex-start trzyma ikonę u góry
   przy wielowierszowym tekście. */
.apt-unavailable-info{background:var(--wlr-amber-light);
  border-left:3px solid var(--wlr-amber);
  padding:11px 14px;border-radius:6px;
  font-size:.85rem;color:var(--wlr-text);line-height:1.5;
  display:flex;gap:10px;align-items:flex-start;}
.apt-unavailable-info svg{width:20px;height:20px;flex:0 0 auto;
  color:var(--wlr-amber);margin-top:1px;}
/* Ciemnobursztynowy bold w treści — wyróżnia kluczową informację. */
.apt-unavailable-info b{color:#8a5a00;font-weight:700;}

/* Przycisk "Napisz na WhatsApp" — pełna szerokość stopki, zielony
   w korporacyjnym odcieniu marki WhatsAppa (#25d366 / hover #1ebe5a).
   Markowy kolor sygnalizuje od razu o jaki kanał chodzi. */
.btn-whatsapp{display:inline-flex;align-items:center;justify-content:center;
  gap:9px;background:#25d366;color:#fff;border:none;
  font-family:inherit;font-size:.92rem;font-weight:700;
  padding:11px 18px;border-radius:7px;text-decoration:none;
  transition:background .15s,transform .1s;width:100%;}
.btn-whatsapp:hover{background:#1ebe5a;color:#fff;text-decoration:none;}
.btn-whatsapp:active{transform:translateY(1px);}
.btn-whatsapp svg{width:18px;height:18px;flex:0 0 auto;fill:currentColor;}


/* =================================================================
   13. BRAK WOLNYCH APARTAMENTÓW — karta z formularzem powiadomienia
   HTML: .no-results (linia 555) — wyświetlana, gdy backend zwróci 0 wyników
   ================================================================= */

/* Karta wycentrowana, węższa od reszty (max-width:560px) — czytelny
   "single column" dla treści informacyjnej + formularza zapisu na
   powiadomienie. */
.no-results{background:var(--wlr-card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:34px 28px;
  margin:0 auto 36px;text-align:center;max-width:560px;}

/* Duża okrągła ikona u góry karty. transition na background+color
   działa razem ze stanem .submitted (zmiana niebieski → zielony). */
.no-results-icon{display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;
  background:var(--wlr-blue-light);color:var(--wlr-blue);
  margin-bottom:18px;transition:background .25s,color .25s;}
.no-results-icon svg{width:36px;height:36px;}

/* Tytuł "Z przykrością informujemy…" — wyśrodkowany, gruby. */
.no-results-title{font-size:1.3rem;font-weight:700;color:var(--wlr-text);
  margin-bottom:10px;line-height:1.3;}

/* Akapit z wyjaśnieniem — szary, dobrze "oddychający" line-height. */
.no-results-text{font-size:.95rem;color:var(--wlr-text-soft);
  line-height:1.6;margin-bottom:22px;}
.no-results-text b{color:var(--wlr-text);font-weight:600;}

/* Formularz: input e-mail + przycisk "Wyślij" obok siebie.
   Na mobile (≤600px) zawija się na dwa wiersze (media query niżej). */
.no-results-form{display:flex;gap:8px;margin-bottom:10px;}
.no-results-form input{flex:1;padding:11px 14px;font-size:.95rem;
  text-align:left;}

/* Przycisk "Wyślij" — flex:0 0 auto żeby zachował swoją szerokość
   i nie kradł miejsca inputowi. height:42px = parytet z inputem. */
.no-results-form button{flex:0 0 auto;padding:0 22px;height:42px;
  background:var(--wlr-blue);color:#fff;border:none;border-radius:7px;
  font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;
  transition:background .15s,transform .1s;}
.no-results-form button:hover{background:var(--wlr-blue-dark);}
.no-results-form button:active{transform:translateY(1px);}

/* Subtekst pod formularzem ("maks. jedno powiadomienie, bez spamu"). */
.no-results-hint{font-size:.78rem;color:var(--wlr-text-faint);
  margin-top:0;line-height:1.4;}

/* Stan po wysłaniu — zielony "toast" z fajką pojawia się w miejscu
   formularza. display:none w stanie domyślnym, .submitted poniżej
   pokazuje go i chowa formularz + hint. */
.no-results-success{display:none;align-items:center;justify-content:center;
  gap:8px;font-size:.95rem;color:var(--wlr-green);font-weight:600;
  background:var(--wlr-green-light);padding:14px 16px;border-radius:8px;
  line-height:1.4;}
.no-results-success svg{width:22px;height:22px;flex:0 0 auto;}

/* Klasa .submitted dodawana przez JS po wysłaniu maila:
   - chowa formularz i hint,
   - pokazuje "toast" sukcesu,
   - przebarwia ikonę u góry karty z niebieskiej na zieloną
     (animowane transitionem zdefiniowanym wyżej). */
.no-results.submitted .no-results-form,
.no-results.submitted .no-results-hint{display:none;}
.no-results.submitted .no-results-success{display:flex;}
.no-results.submitted .no-results-icon{background:var(--wlr-green-light);
  color:var(--wlr-green);}


/* =================================================================
   14. RESPONSYWNOŚĆ — MOBILE
   ================================================================= */

/* ≤600px — telefony.
   - Siatka kart schodzi do 1 kolumny (mało sensu w kafelkach na ekranie 360px).
   - Nagłówek "wyników + sortowanie" w kolumnie (zbyt wąsko na space-between).
   - Mniejszy H1.
   - Sticky-bar kryteriów dostaje mniej paddingu.
   - Zdjęcie karty zmienia proporcje na 16/9 — bardziej "panoramiczne"
     i krótsze, żeby karta zmieściła się w jednym widoku.
   - Przyciski akcji jeden pod drugim (na 360px dwa obok siebie były ciasne).
   - Ikona mapy minimalnie mniejsza.
   - Karta "brak wyników" mniej paddingu, formularz w kolumnie,
     przycisk pełnoekranowy. */
@media (max-width:600px){
  .apt-grid{grid-template-columns:1fr;gap:18px;}
  .search-meta{flex-direction:column;align-items:flex-start;}
  .search-meta h1{font-size:1.3rem;}
  .search-criteria{padding:12px 0;}
  .apt-card-photo{aspect-ratio:16/9;}
  .apt-actions{flex-direction:column;}
  .apt-map{width:34px;height:34px;}
  .apt-map svg{width:18px;height:18px;}
  .no-results{padding:26px 18px;}
  .no-results-form{flex-direction:column;gap:10px;}
  .no-results-form button{width:100%;}

  /* Formularz wyszukiwania — pola na pełną szerokość, przycisk Szukaj
     też 100% (na desktopie jest wąski). */
  .search-form{gap:10px;}
  .search-form-field{flex:1 1 100%;}
  .search-submit-btn{width:100%;}
}

/* ≤700px — picker dat.
   Dwa miesiące jeden pod drugim (zamiast obok siebie), tytuły miesięcy
   wycentrowane, drugi tytuł chowamy bo i tak miesiące są wertykalnie
   pod sobą i własny tytuł ma każdy z nich. */
@media (max-width:700px){
  .dr-popup{padding:12px;}
  .dr-popup-months{flex-direction:column;gap:16px;}
  .dr-popup-month{width:auto;}
  .dr-popup-titles{flex-direction:column;align-items:center;gap:0;}
  .dr-popup-month-title:nth-child(2){display:none;}
}


/* =================================================================
   POBYT ŁĄCZONY (split-stay) — propozycje podziału na 2–3 apartamenty
   HTML: wyszukiwarka.html → SEKCJA 4a ({% if split_options %})
   oraz strona podsumowania pobyt_laczony.html (te same klasy).

   Pokazywane, gdy żaden POJEDYNCZY apartament nie jest wolny na cały
   termin, a backend znalazł kombinacje (views → services.split_stay).
   ================================================================= */

/* Baner: brak jednego apartamentu, ale pobyt można podzielić (bursztyn). */
.split-note{background:var(--wlr-amber-light);border:1px solid var(--wlr-amber);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:26px;display:flex;gap:14px;align-items:flex-start;}
.split-note svg{width:26px;height:26px;flex:0 0 auto;color:var(--wlr-amber);margin-top:1px;}
.split-note b{color:#8a5a00;}
.split-note .muted{color:var(--wlr-text-soft);font-size:.92rem;}

/* Karta jednego wariantu podziału. container-type:inline-size → o złożeniu
   segmentów w pion (container query niżej) decyduje REALNA szerokość tego
   bloku, a nie szerokość okna (split-stay może żyć w węższej kolumnie). */
.split-option{background:var(--wlr-card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px 22px;margin-bottom:24px;container-type:inline-size;}
.split-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.split-head .label{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--wlr-text-soft);}
.split-head .title{font-size:1.15rem;font-weight:700;color:var(--wlr-text);}
.split-head .sub{color:var(--wlr-text-soft);font-size:.9rem;font-weight:500;}

/* Sekwencja segmentów: karta apartamentu → przeprowadzka → karta apartamentu.
   ZAWSZE w jednym rzędzie (nowrap), karty kurczą się równo (flex:1 1 0; min-width:0),
   żeby 2–3 zmieściły się obok siebie. Na wąsko (container query) przełączamy na pion. */
.seg-flow{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;}
.seg-card{flex:1 1 0;min-width:0;border:1px solid var(--wlr-border);border-radius:9px;overflow:hidden;display:flex;flex-direction:column;}
/* Cienki pasek-nagłówek kafelka: plakietka „Noce X" po lewej, ikonka po prawej. */
.seg-photo{position:relative;background:linear-gradient(135deg,#1eaae0,#1577a8);
  display:flex;align-items:center;justify-content:space-between;padding:5px 10px;}
.seg-photo .dot{background:rgba(255,255,255,.92);color:var(--wlr-text);
  font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:20px;}
.seg-photo svg{width:17px;height:17px;color:rgba(255,255,255,.9);}
/* Ciało kafelka: dwie kolumny — lewa (nazwa/adres/daty), prawa (cena całkowita). */
.seg-body{padding:9px 11px 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex:1;}
.seg-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.seg-name{font-weight:700;color:var(--wlr-blue);font-size:.88rem;line-height:1.2;}
.seg-addr{color:var(--wlr-text-soft);font-size:.74rem;}
.seg-dates{font-size:.78rem;margin-top:3px;}
.seg-dates b{color:var(--wlr-text);}
.seg-rng{white-space:nowrap;}   /* zakres dat „14 lip → 17 lip" nie łamie się w środku */
.seg-price{flex:0 0 auto;font-weight:700;color:var(--wlr-text);font-size:1.06rem;white-space:nowrap;}

/* Łącznik „przeprowadzka" między segmentami. */
.seg-move{flex:0 0 58px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;color:var(--wlr-text-soft);padding:0 3px;}
.seg-move svg{width:22px;height:22px;color:var(--wlr-blue);}
.seg-move span{font-size:.64rem;text-align:center;line-height:1.15;}
.seg-move b{color:var(--wlr-text);display:block;}

/* Stopka wariantu: suma + przycisk „Zarezerwuj pobyt łączony". */
.split-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--wlr-border-soft);}
.split-total .lbl{font-size:.78rem;color:var(--wlr-text-soft);text-transform:uppercase;letter-spacing:.05em;}
.split-total .val{font-size:1.5rem;font-weight:700;color:var(--wlr-text);line-height:1;}
.split-total .val small{font-size:.8rem;font-weight:500;color:var(--wlr-text-faint);}
.btn-cta{background:var(--wlr-blue);color:#fff;border:none;border-radius:8px;font-family:inherit;
  font-size:.95rem;font-weight:700;padding:13px 22px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;}
.btn-cta:hover{background:var(--wlr-blue-dark);}
.btn-cta svg{width:17px;height:17px;}

/* Składanie segmentów w PION zależnie od REALNEJ szerokości .split-option (container query),
   nie od szerokości okna. Próg tak dobrany, by każda karta miała ~≥200px:
      • 2 apartamenty:  2×200 + łącznik 58            ≈ 460px
      • 3 apartamenty:  3×200 + 2 łączniki (2×58=116) ≈ 720px   ← składa się WCZEŚNIEJ
   W kolumnie karty muszą mieć flex:0 0 auto (wysokość treści) — inaczej flex:1 1 0
   z układu w rzędzie zapadłoby ich wysokość do zera i zostałyby same strzałki. */
@container (max-width:460px){
  .seg-2{flex-direction:column;}
  .seg-2 .seg-card{flex:0 0 auto;}
  .seg-2 .seg-move{flex:0 0 auto;flex-direction:row;padding:10px 0;}
  .seg-2 .seg-move svg{transform:rotate(90deg);}
}
@container (max-width:720px){
  .seg-3{flex-direction:column;}
  .seg-3 .seg-card{flex:0 0 auto;}
  .seg-3 .seg-move{flex:0 0 auto;flex-direction:row;padding:10px 0;}
  .seg-3 .seg-move svg{transform:rotate(90deg);}
}