/* =================================================================
   nav.css — górna nawigacja WLR (logo, menu, lang dropdown, login)
   Współdzielona przez wszystkie strony procesu rezerwacji:
   wyszukiwarka.html, podglad-rezerwacja.html, blad-platnosci.html,
   potwierdzenie-rezerwacji.html. Markup nawigacji jest identyczny
   na każdej z tych stron, więc style są w jednym pliku.

   Wymaga uprzedniego załadowania podglad-rezerwacja.css (lub innego
   pliku zawierającego zmienne --wlr-* z paletą: --wlr-blue,
   --wlr-blue-light, --wlr-green, --wlr-green-light, --wlr-text,
   --wlr-text-soft, --wlr-border, --wlr-border-soft, --wlr-error).
   ================================================================= */

/* =================================================================
   ZASADY OGÓLNE — dlaczego tak zaprojektowane

   1) FLEX dla całego <nav>:
      Navbar to klasyczny "lewa strona + prawa strona". Flex z
      justify-content:space-between sam rozsuwa logo na lewo,
      a <ul> z linkami na prawo — nie trzeba float-ów ani marginesów.
      flex-wrap:wrap pozwala elementom przeskoczyć do nowej linii
      na bardzo wąskich ekranach (zamiast wystawać poza viewport).

   2) DROPDOWNY — display:none zamiast opacity/visibility:
      Tu świadomie używamy display:none/block (a NIE opacity 0/1).
      Powód: dropdowny są krótkie, nie potrzebują animacji
      pojawiania, a display:none ma tę zaletę, że całkowicie usuwa
      element z flow (nie można w niego trafić tabem, czytniki
      ekranu go nie czytają). Klasa .open na rodzicu przełącza
      widoczność jednym selektorem — czyste, bez transition.

   3) aria-expanded na przyciskach:
      Każdy toggle (.wlr-lang-toggle i .wlr-nav-login.wlr-logged
      jako #wlrUserToggle) ma atrybut aria-expanded, który JS
      synchronizuje ze stanem .open. To krytyczne dla czytników
      ekranu — bez tego dropdown jest niewidoczny dla a11y.
      CSS sam nie czyta aria-expanded, ale klasa .open na rodzicu
      i wartość aria-expanded muszą iść w parze (robi to nav.js).

   4) Sortowanie reguł:
      Reguły są ułożone w kolejności występowania elementów w HTML
      (od góry <nav> do dołu), żeby łatwo było znaleźć styl
      odpowiadający konkretnemu kawałkowi widoku.
   ================================================================= */


/* =================================================================
   1) KONTENER NAWIGACJI  <nav class="wlr-nav">
   ================================================================= */

/* .wlr-nav — główny kontener nawigacji (pasek na samej górze strony).
   Białe tło + cienka dolna kreska wizualnie oddzielają navbar od treści.
   display:flex z justify-content:space-between rozkłada logo (lewa)
   i listę linków (prawa) na przeciwnych krańcach paska.
   max-width:880px + margin:auto wyrównuje navbar do tej samej szerokości
   co .wrap (kontener kart ofert), żeby wizualnie pasował do reszty layoutu.
   flex-wrap:wrap to fallback dla bardzo wąskich ekranów (lista linków
   może zejść pod logo, zamiast wypchnąć navbar poza widok). */
.wlr-nav{background:#fff;border-bottom:1px solid var(--wlr-border);
  padding:14px 18px;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  max-width:880px;margin:0 auto;}  /* szerokość taka jak .wrap (kontener ofert) */


/* =================================================================
   2) LOGO  <a class="wlr-nav-logo"><img class="wlr-logo-img"></a>
   Lewa strona navbar-a — klikalny link do strony głównej.
   ================================================================= */

/* .wlr-nav-logo — link otaczający obrazek logo (lewa strona navbar-a).
   inline-flex + align-items:center: jeśli kiedykolwiek dorzucimy
   tekst obok logo, będzie poprawnie wyśrodkowany pionowo z obrazkiem.
   line-height:1 usuwa "ducha" białej przestrzeni pod obrazkiem,
   który inline-elementy mają domyślnie (przez baseline tekstu). */
.wlr-nav-logo{display:inline-flex;align-items:center;text-decoration:none;
  line-height:1;}

/* .wlr-logo-img — sam obrazek logo SVG wewnątrz linku.
   Stała wysokość 44px daje przewidywalną wysokość paska
   (navbar dopasowuje się do logo). width:auto zachowuje proporcje SVG.
   display:block eliminuje 4px "ducha" pod obrazkiem (alternatywa
   dla vertical-align:bottom — tu wybrane block, bo czystsze). */
.wlr-logo-img{height:44px;width:auto;display:block;}


/* =================================================================
   3) LISTA LINKÓW  <ul class="wlr-nav-list">
   Prawa strona navbar-a — zawiera linki "O nas", "Kontakt",
   dropdown języka i dropdown użytkownika (każdy jako <li>).
   ================================================================= */

/* .wlr-nav-list — UL będący poziomym kontenerem wszystkich elementów
   po prawej stronie navbar-a (linki + dropdowny).
   list-style:none usuwa kropki UL.
   display:flex układa <li> w poziomie zamiast kolumnowo.
   gap:2px zostawia minimalny odstęp między linkami — większy odstęp
   robi padding wewnątrz każdego <a>, gap pełni rolę "kreski oddzielającej".
   margin/padding:0 zerujemy domyślne marginesy UL. */
.wlr-nav-list{list-style:none;display:flex;align-items:center;gap:2px;
  margin:0;padding:0;}

/* .wlr-nav-list > li — każdy element listy.
   position:relative jest KLUCZOWY: dropdowny (.wlr-lang-menu,
   .wlr-user-menu) są pozycjonowane absolute względem swojego <li>,
   więc <li> musi być pozycjonowanym przodkiem (relative wystarczy). */
.wlr-nav-list > li{position:relative;}

/* .wlr-nav-list > li > a — bazowy styl linków "O nas" i "Kontakt".
   Selektor "> li > a" (bezpośrednie dziecko) celowo NIE łapie linków
   wewnątrz .wlr-lang-menu / .wlr-user-menu — te są zagnieżdżone głębiej
   i mają własne style (inny padding, układ z ikonami).
   padding:8px 14px + border-radius:6px daje dotykowy, "pigułkowaty" target.
   transition na color/background — łagodne najechanie hover.
   inline-flex + gap:6px pozwala wstawić ikonkę obok tekstu z odstępem. */
.wlr-nav-list > li > a{padding:8px 14px;text-decoration:none;
  color:var(--wlr-text);font-size:.95rem;font-weight:500;border-radius:6px;
  transition:color .15s,background .15s;display:inline-flex;align-items:center;gap:6px;}

/* hover dla linków top-level — niebieski akcent (kolor marki WLR)
   na jasnoniebieskim tle. Ten sam efekt powtarza .wlr-lang-toggle
   (patrz niżej) — wizualna spójność między linkami i przyciskiem języka. */
.wlr-nav-list > li > a:hover{color:var(--wlr-blue);background:var(--wlr-blue-light);}


/* =================================================================
   4) PRZEŁĄCZNIK JĘZYKA  <li class="wlr-nav-lang">
                          <button class="wlr-lang-toggle">
   Dropdown wyboru języka — 11 języków (polski, angielski, hiszpański,
   francuski, niemiecki, włoski, portugalski, holenderski, rosyjski,
   japoński, chiński). Flagi to inline SVG (bez requestów sieciowych).
   ================================================================= */

/* Kontener dropdownu języka — position:relative, żeby menu (.wlr-lang-menu, position:absolute)
   kotwiczyło się względem TEGO <li>. W nawigacji WLR (wyszukiwarka) daje to .wlr-nav-list > li,
   ale w bootstrapowym navbarze (booking_podglad_rezerwacja.html) trzeba to ustawić wprost. */
.wlr-nav-lang{position:relative;}

/* .wlr-lang-toggle — przycisk otwierający dropdown języka.
   To <button>, więc trzeba ręcznie zresetować jego domyślny wygląd:
   background:none + border:none + font-family:inherit sprawiają,
   że button wygląda dokładnie jak linki obok niego.
   Powtarzamy padding, border-radius, font-size, transition żeby
   wizualnie pasował do .wlr-nav-list > li > a (button nie dziedziczy
   tych styli, bo nie pasuje do selektora "li > a"). */
.wlr-lang-toggle{display:inline-flex;align-items:center;gap:8px;
  background:none;border:none;padding:8px 12px;font-family:inherit;
  font-size:.95rem;color:var(--wlr-text);cursor:pointer;border-radius:6px;
  transition:color .15s,background .15s;}

/* hover toggle języka — identyczny styl jak hover zwykłych linków
   (.wlr-nav-list > li > a:hover). Spójność wizualna jest celowa. */
.wlr-lang-toggle:hover{color:var(--wlr-blue);background:var(--wlr-blue-light);}

/* .wlr-lang-flag — flaga SVG widoczna w togglu i w pozycjach dropdownu.
   22x14px to mały, ale czytelny rozmiar (proporcje 11:7 typowe dla flag).
   box-shadow z lekkim cieniem rysuje subtelną ramkę 1px — flagi
   z białymi paskami (Polska, Holandia, Japonia) nie zlewają się
   z białym tłem navbar-a.
   flex:0 0 auto — flex-item nie kurczy się i nie rośnie, ma stały rozmiar.
   object-fit:cover na wypadek, gdyby ktoś użył rastrowego <img>
   zamiast SVG (zachowa kadr). */
.wlr-lang-flag{width:22px;height:14px;border-radius:1px;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);object-fit:cover;}

/* .wlr-lang-caret — strzałka "v" obok tekstu języka.
   Klasyczny trik: pusty <span> z transparentnymi border-left/right
   i kolorowym border-top tworzy trójkąt skierowany w dół.
   currentColor sprawia, że strzałka dziedziczy kolor tekstu —
   przy hoverze (color:var(--wlr-blue)) zmienia się razem z napisem.
   opacity:.55 — strzałka ma być subtelna, nie krzyczy. */
.wlr-lang-caret{width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid currentColor;
  opacity:.55;margin-left:2px;}

/* .wlr-lang-menu — dropdown z listą języków.
   position:absolute + top:100% + right:0 — kotwiczy menu tuż pod
   przyciskiem, wyrównane do prawej krawędzi <li> (żeby nie wystawało
   poza prawą krawędź ekranu, bo jest blisko końca navbar-a).
   margin-top:6px to mały oddech między togglem a menu.
   border + border-radius + box-shadow dają wrażenie "kartki" leżącej
   nad treścią; mocniejszy cień (28px blur) sygnalizuje warstwę nad
   stroną.
   min-width:200px gwarantuje, że nazwy języków (np. "Nederlands",
   "Português") zmieszczą się w jednej linii.
   z-index:60 — nad treścią strony i innymi navbar-owymi elementami,
   ale niżej niż ewentualne globalne modale.
   display:none — domyślnie schowany; .open na rodzicu pokazuje (poniżej). */
.wlr-lang-menu{position:absolute;top:100%;right:0;margin-top:6px;
  background:#fff;border:1px solid var(--wlr-border);border-radius:8px;
  box-shadow:0 10px 28px rgba(40,55,75,.18);list-style:none;
  padding:6px 0;min-width:200px;display:none;z-index:60;}

/* Pokazanie dropdownu: gdy nav.js doda klasę .open na <li>,
   menu staje się block. Tu właśnie żyje "magia" toggle:
   JS nie dotyka samego menu, tylko klasy rodzica. */
.wlr-nav-lang.open .wlr-lang-menu{display:block;}

/* <li> w dropdownie — zerujemy padding, bo wewnętrzny <a>
   sam ma padding (cały wiersz jest klikalny, łatwiejszy w hit-testach). */
.wlr-lang-menu li{padding:0;}

/* Linki języków w dropdownie — wiersze "flaga + nazwa".
   flex + align-items:center pionowo wyrównuje flagę z tekstem.
   gap:10px — większy niż w togglu, bo to teraz pełnoprawny wiersz menu.
   padding 8/16 — pionowo komfortowe targety dotykowe. */
.wlr-lang-menu a{display:flex;align-items:center;gap:10px;padding:8px 16px;
  text-decoration:none;color:var(--wlr-text);font-size:.92rem;}

/* hover wiersza języka — ten sam niebieski akcent co reszta navbar-a. */
.wlr-lang-menu a:hover{background:var(--wlr-blue-light);color:var(--wlr-blue);}

/* .active na linku obecnego języka — pogrubiony i niebieski,
   bez tła (żeby nie mylił się z hoverem). HTML dodaje class="active"
   na właściwym linku, np. <a href="/pl/" class="active">. */
.wlr-lang-menu a.active{font-weight:700;color:var(--wlr-blue);}


/* =================================================================
   5) UŻYTKOWNIK — STAN LOGOWANIA  <li class="wlr-nav-user">
   Dwa stany w jednym <li>:
     a) WYLOGOWANY — widoczny link <a class="wlr-nav-login">"Zaloguj się"
     b) ZALOGOWANY — widoczny <button class="wlr-nav-login wlr-logged">
        "Zalogowany" + dropdown <ul class="wlr-user-menu">
   Stany przełącza JS dodając/usuwając klasę .logged na <li>.
   ================================================================= */

/* .wlr-nav-login (BAZA) — link "Zaloguj się" w stanie wylogowanym.
   Dziedziczy padding/font/kolor po .wlr-nav-list > li > a (bo jest
   bezpośrednim dzieckiem <li> wewnątrz .wlr-nav-list).
   Tu dorzucamy tylko ramkę 1px, żeby wizualnie wyróżniał się jako
   CTA — "to jest akcja, nie zwykły link". */
.wlr-nav-login{border:1px solid var(--wlr-border);font-family:inherit;}

/* hover na CTA logowania — ramka zmienia kolor na niebieski (akcent marki).
   Tekst zmienia się dzięki :hover z .wlr-nav-list > li > a (powyżej). */
.wlr-nav-login:hover{border-color:var(--wlr-blue);}

/* Mała ikonka "osoby" wewnątrz CTA. 16px — ledwo widoczna, nie dominuje. */
.wlr-nav-login svg{width:16px;height:16px;}

/* .wlr-nav-login.wlr-logged — STAN ZALOGOWANY: button "Zalogowany"
   z zielonym akcentem (zamiast neutralnego szarego).
   Ten button musi RĘCZNIE powtórzyć typografię i padding z
   ".wlr-nav-list > li > a", bo jest <button>, nie <a>, więc nie
   pasuje do tego selektora i nie dziedziczy stylów.
   Zielony border (zamiast szarego) sygnalizuje pozytywny stan:
   "jesteś zalogowany, wszystko OK". Zielony jest też kolorem
   sukcesu w palecie WLR (--wlr-green). */
.wlr-nav-login.wlr-logged{
  padding:8px 14px;border-radius:6px;
  background:none;color:var(--wlr-text);
  font-family:inherit;font-size:.95rem;font-weight:500;
  border:1px solid var(--wlr-green);     /* zielony zamiast szarego */
  cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .15s,background .15s,border-color .15s;
}

/* hover na button "Zalogowany" ORAZ stan, gdy dropdown jest otwarty.
   Łączymy oba selektory, bo użytkownik powinien widzieć "to jest
   aktywne" zarówno gdy najeżdża, jak i gdy menu jest rozwinięte —
   ciągłość wizualna podczas interakcji. */
.wlr-nav-login.wlr-logged:hover,
.wlr-nav-user.open > .wlr-nav-login.wlr-logged{
  color:var(--wlr-green);
  background:var(--wlr-green-light);
  border-color:var(--wlr-green);
}

/* WARIANT Z AWATAREM (wyszukiwarka.html) — button „Zalogowany" pokazuje GRAFIKĘ
   awatara (avatar_user_blue.svg) zamiast ikony+tekstu. Zdejmujemy ramkę/padding/
   zielone tło, żeby widać było samą grafikę (jak w podglad-rezerwacja.html).
   Scoped klasą .has-avatar — strony z tekstowym „Zalogowany" pozostają bez zmian. */
.wlr-nav-login.wlr-logged.has-avatar{padding:2px 4px;border:none;background:none;gap:4px;}
.wlr-nav-login.wlr-logged.has-avatar:hover,
.wlr-nav-user.open > .wlr-nav-login.wlr-logged.has-avatar{background:none;border-color:transparent;}
.wlr-nav-avatar{width:32px;height:32px;display:block;}

/* ===== Kontener stanu logowania (link + przycisk + dropdown w jednym <li>) ===== */

/* .wlr-nav-user — <li> zawierające oba warianty (link + button + menu).
   position:relative jest tu KLUCZOWY: dropdown .wlr-user-menu
   pozycjonuje się absolute względem tego <li>. */
.wlr-nav-user{position:relative;}

/* DOMYŚLNIE (czyli BEZ klasy .logged):
   - widoczny link "Zaloguj się"
   - schowany button "Zalogowany"
   - schowany dropdown menu
   To selektor potomka, bez .logged — pasuje do stanu wylogowanego. */
.wlr-nav-user > button.wlr-nav-login,
.wlr-user-menu{display:none;}

/* PO DODANIU .logged (przez JS po kliknięciu "Zaloguj się"):
   chowamy link, pokazujemy button. Klasycznie: jeden klasowy
   przełącznik zmienia oba elementy naraz. */
.wlr-nav-user.logged > a.wlr-nav-login{display:none;}
.wlr-nav-user.logged > button.wlr-nav-login{display:inline-flex;align-items:center;gap:6px;}

/* PO DODANIU .open (przez JS po kliknięciu w button "Zalogowany"):
   pokazujemy dropdown menu. Wymagane jednoczesne .logged.open,
   bo open bez logged nie ma sensu (button niewidoczny, więc i menu nie).
   To zabezpieczenie przed "duchami" — jeśli ktoś ręcznie wymusi .open
   na wylogowanym <li>, menu i tak się nie pokaże. */
.wlr-nav-user.logged.open .wlr-user-menu{display:block;}

/* WARIANT POJEDYNCZEGO AWATARA (wyszukiwarka.html) — JEDEN przełącznik (awatar) dla OBU
   stanów, sterowany serwerowo ({% if user.is_authenticated %} w szablonie). Button jest
   ZAWSZE widoczny (nie zależy od .logged), a dropdown pokazuje się na .open. Zakresowo przez
   --avatar, więc stary układ (link „Zaloguj się" + button „Zalogowany") na pozostałych
   stronach pozostaje bez zmian. Reguły PO domyślnych — wygrywają kolejnością źródła. */
.wlr-nav-user--avatar > button.wlr-nav-login{display:inline-flex;align-items:center;}
.wlr-nav-user--avatar.open .wlr-user-menu{display:block;}


/* =================================================================
   6) DROPDOWN UŻYTKOWNIKA  <ul class="wlr-user-menu">
   Zawiera dwa wiersze: "Mój profil" i "Wyloguj" (z separatorem).
   ================================================================= */

/* .wlr-user-menu — sam kontener menu (UL).
   Pozycjonowanie identyczne jak .wlr-lang-menu: absolute, top:100%,
   right:0 (kotwiczone do prawej, bo <li> jest na końcu navbar-a).
   Trochę szersze (min-width:220px) niż lang-menu, żeby pomieścić
   "Mój profil" + 20px ikonkę + odstępy.
   Cień i ramka takie same jak w lang-menu — wizualna spójność
   dropdownów. */
.wlr-user-menu{position:absolute;top:100%;right:0;margin:6px 0 0;padding:6px 0;
  list-style:none;background:#fff;border:1px solid var(--wlr-border);
  border-radius:8px;box-shadow:0 10px 28px rgba(40,55,75,.18);
  min-width:220px;z-index:60;}

/* <li> w menu — zerujemy padding (cały <a> jest klikalny). */
.wlr-user-menu li{padding:0;}

/* Wiersz menu — ikonka + tekst. min-height:44px to rekomendowany
   minimalny dotykowy target (WCAG 2.5.5 — "Target Size").
   Większy padding pionowy (12px) niż w lang-menu, bo wierszy jest
   tylko dwa, można sobie pozwolić na "luźniejsze" menu.
   transition łagodzi zmianę tła przy hover. */
.wlr-user-menu a{display:flex;align-items:center;gap:12px;
  padding:12px 18px;min-height:44px;
  text-decoration:none;color:var(--wlr-text);font-size:.95rem;font-weight:500;
  transition:background .12s,color .12s;}

/* hover ORAZ focus — łączymy oba, żeby nawigacja klawiaturą (TAB)
   dawała ten sam efekt wizualny co mysz. outline:none, bo własne
   tło + kolor zastępują domyślny outline przeglądarki (i wygląda
   spójniej z resztą navbar-a). */
.wlr-user-menu a:hover,.wlr-user-menu a:focus{background:var(--wlr-blue-light);
  color:var(--wlr-blue);outline:none;}

/* Ikonka SVG w wierszu menu. Większa (20px) niż w togglu (16px),
   bo to teraz pełnoprawne menu, gdzie ikonka pomaga w skanowaniu wzrokiem.
   Kolor "soft" (przygaszony) w stanie spoczynku — żeby nie konkurował
   z tekstem. flex:0 0 auto — ikonka nie kurczy się przy wąskim menu. */
.wlr-user-menu a svg{width:20px;height:20px;flex:0 0 auto;color:var(--wlr-text-soft);}
/* Ikony pozycji menu jako pliki SVG (img) — jak w podglad-rezerwacja.html (icon_user_*.svg). */
.wlr-user-menu a img{width:20px;height:20px;flex:0 0 auto;}

/* Na hoverze ikonka łapie ten sam niebieski akcent co tekst —
   wiersz wygląda spójnie podczas najechania. */
.wlr-user-menu a:hover svg,.wlr-user-menu a:focus svg{color:var(--wlr-blue);}

/* =================================================================
   7) "WYLOGUJ" — wiersz akcji destruktywnej
   ================================================================= */

/* separator + akcent ostrzegawczy przy "Wyloguj" */
/* .wlr-user-menu-logout — drugi <li> w menu (Wyloguj).
   border-top + margin/padding-top:4px tworzy wizualny separator
   oddzielający "neutralny" wiersz profilu od destruktywnej akcji
   wylogowania — użytkownik nie pomyli się przy klikaniu. */
.wlr-user-menu-logout{border-top:1px solid var(--wlr-border-soft);margin-top:4px;
  padding-top:4px;}

/* hover/focus na wierszu "Wyloguj" — inny zestaw kolorów niż reszta menu.
   Beżowo-pomarańczowe tło (#fdf3e3) + czerwony tekst (--wlr-error)
   sygnalizują "uwaga, to akcja niszcząca". To celowo NIE czysty
   czerwony tylko stonowany — nie chcemy straszyć użytkownika,
   tylko subtelnie ostrzec. */
.wlr-user-menu-logout a:hover,.wlr-user-menu-logout a:focus{
  background:#fdf3e3;color:var(--wlr-error);}

/* Na hoverze ikonka wylogowania też dostaje czerwony akcent —
   wizualna spójność z tekstem. */
.wlr-user-menu-logout a:hover svg,.wlr-user-menu-logout a:focus svg{
  color:var(--wlr-error);}


/* =================================================================
   8) RESPONSYWNOŚĆ — media queries
   ================================================================= */

/* ===== Mobile: większe targety dotykowe w dropdownie ===== */
/* Bardzo wąskie ekrany (telefony, <=480px):
   - menu szersze (240px) i lekko odsunięte od prawej krawędzi
     (right:8px zamiast 0) — żeby nie przylegało do brzegu ekranu;
   - większe padding/min-height wierszy (48px) — wygodniejsze klikanie
     palcem (WCAG zaleca min. 44px, dajemy 48 dla pewności);
   - font-size:1rem i większe ikonki — czytelniej na małym ekranie. */
@media (max-width:480px){
  .wlr-user-menu{min-width:240px;right:8px;}
  .wlr-user-menu a{padding:14px 18px;min-height:48px;font-size:1rem;}
  .wlr-user-menu a svg{width:22px;height:22px;}
}

/* Tablety i mniejsze (<=760px) — zagęszczamy navbar:
   - mniejszy padding navbar-a i logo (oszczędzamy pionową przestrzeń);
   - mniejszy padding/font linków, żeby zmieściło się więcej w wierszu;
   - chowamy tekst "polski" w togglu języka — zostaje sama flaga + strzałka
     (selektor :not(.wlr-lang-caret) chowa span z nazwą, ale ZOSTAWIA
     strzałkę, bo ona też jest <span>);
   - analogicznie chowamy tekst "Zaloguj się"/"Zalogowany" przy buttonach
     logowania — ikonka osoby wystarcza, button zostaje jako kompaktowy
     przycisk z chevronem. */
@media (max-width:760px){
  .wlr-nav{padding:10px 14px;}
  .wlr-logo-img{height:34px;}
  .wlr-nav-list > li > a,.wlr-lang-toggle{padding:8px 8px;font-size:.88rem;}
  .wlr-lang-toggle span:not(.wlr-lang-caret){display:none;}
  /* tekst "Zaloguj się"/"Zalogowany" chowamy; chevron na buttonie pokazujemy */
  .wlr-nav-login > span:not(.wlr-lang-caret){display:none;}
}


/* =================================================================
   6) NAVBAR BOOTSTRAP — styl ze strony głównej (1:1).
   Używany na stronie podglądu rezerwacji (markup .navbar). Reguły dotyczą
   tylko elementów .navbar — reszta stron (z .wlr-nav powyżej) bez zmian.
   ================================================================= */
.navbar__img {
  padding: 0.3em 0;
  height: 60px;
}
.navbar-toggler {
  padding: 1em;
}
.navbar-toggler:focus {
  outline: 5px solid #08b4ffff;
}
.navbar .nav-item {
  margin: 0.3em 1em;
  padding: 0.5em 0;
  text-transform: uppercase;
  font-weight: bold;
}
.navbar .nav-item .nav-link {
  color:#8f8f8f!important;
}
.navbar .nav-item .nav-link:hover {
  color:#08b4ffff!important;
}
.navbar .dropdown-item {
  font-size: 1.2rem;
}