/* =============================================================================
   FLYPARK — WYBÓR LOKALIZACJI • ARKUSZ STYLÓW DO WDROŻENIA (WordPress)
   =============================================================================

   Zakres: WYŁĄCZNIE komponenty wyboru lokalizacji:
     • przycisk-trigger na stronie głównej (desktop + mobile)
     • dropdown na stronie głównej (wyszukiwarka + 2 listy: funkcjonujące / w budowie)
     • pigułka-trigger zmiany lokalizacji na podstronie parku
     • dropdown zmiany lokalizacji (z oznaczeniem „wybrana”)
     • modal pełnoekranowy na mobile (strona główna)
     • panel zmiany lokalizacji na mobile (strona parku)

   Poza zakresem: layout hero, marquee, przycisk „Kup bilet”, nawigacja WP.

   ---------------------------------------------------------------------------
   JAK TEGO UŻYĆ (dla Claude Code / dewelopera):
   HTML w WordPressie może się różnić od makiety. Dlatego:
   1. Wszystkie kolory / rozmiary są zdefiniowane jako zmienne w :root poniżej,
      z DOKŁADNYM opisem CO DANY KOLOR OZNACZA. Zmieniaj wartości TU, nie w regułach.
   2. Klasy mają jednoznaczne nazwy z prefiksem `fp-`. Podklasy elementów
      opisane są w komentarzach z sugerowaną strukturą HTML.
   3. Jeśli WordPress generuje inne znaczniki (np. <ul><li> zamiast <div>),
      przypnij te klasy do odpowiadających elementów — reguły nie zależą od
      konkretnego tagu (używam selektorów klasowych, nie tagowych).
   ---------------------------------------------------------------------------
============================================================================= */


/* =============================================================================
   1. TOKENY / ZMIENNE — TU ZMIENIASZ WARTOŚCI GLOBALNIE
   ============================================================================= */
:root {

  /* --- KOLORY MARKI -------------------------------------------------------- */

  /* GŁÓWNY ŻÓŁTY marki. Używany na: ramkę triggera, ikony pinezek,
     tekst wybranej lokalizacji, akcenty, ptaszek „zaznaczone”, nagłówek „Odwiedź nas”. */
  --fp-gold: #e9ac23;

  /* ŻÓŁTY HOVER (jaśniejszy) — tylko dla linków <a>:hover. */
  --fp-gold-hover: #ffc257;

  /* Żółty w wersji półprzezroczystej — TŁO wiersza po najechaniu (hover) na liście parków. */
  --fp-gold-hover-bg: rgba(233, 172, 35, 0.10);

  /* Żółty półprzezroczysty — TŁO wiersza „wybrana lokalizacja” (mocniejszy niż hover). */
  --fp-gold-selected-bg: rgba(233, 172, 35, 0.14);
  --fp-gold-selected-bg-mobile: rgba(233, 172, 35, 0.13);

  /* Żółty półprzezroczysty — OBRAMOWANIE pigułki-triggera zmiany lokalizacji. */
  --fp-gold-border: rgba(233, 172, 35, 0.55);


  /* --- TŁA (ciemny motyw) -------------------------------------------------- */

  /* TŁO przycisku-triggera „Wybierz lokalizację” (stan spoczynku). */
  --fp-trigger-bg: #161616;

  /* TŁO panelu dropdownu na STRONIE GŁÓWNEJ (lista funkcjonujące/w budowie). */
  --fp-panel-bg: #1b1b1b;

  /* TŁO panelu dropdownu ZMIANY LOKALIZACJI na podstronie parku (jaśniejsze). */
  --fp-panel-bg-loc: #292929;

  /* TŁO pola wyszukiwania (input) w dropdownie na stronie głównej. */
  --fp-search-bg: #111111;

  /* TŁO pola wyszukiwania (input) w modalu mobilnym. */
  --fp-search-bg-mobile: #191919;

  /* TŁO pigułki-triggera zmiany lokalizacji (podstrona parku, desktop + mobile). */
  --fp-pill-bg: #191919;

  /* TŁO modala pełnoekranowego na mobile (strona główna). */
  --fp-modal-bg: #0e0e0e;

  /* TŁO listy zmiany lokalizacji na mobile (strona parku). */
  --fp-mobile-list-bg: #101010;


  /* --- OBRAMOWANIA / LINIE ------------------------------------------------- */

  /* Delikatne obramowanie panelu dropdownu (biel ~9% krycia). */
  --fp-border-panel: rgba(255, 255, 255, 0.09);

  /* Obramowanie pól input (biel ~10%). */
  --fp-border-input: rgba(255, 255, 255, 0.10);

  /* Linia oddzielająca wiersze list na mobile (biel ~7%). */
  --fp-divider: rgba(255, 255, 255, 0.07);

  /* Linia-separator między sekcjami / grubsza (biel ~8–10%). */
  --fp-divider-strong: rgba(255, 255, 255, 0.10);

  /* Tło wiersza po najechaniu w dropdownie ZMIANY LOKALIZACJI (biel ~5%). */
  --fp-row-hover-loc: rgba(255, 255, 255, 0.05);

  /* Kolor lewego paska akcentu przy „wybranej” lokalizacji. */
  --fp-selected-accent: var(--fp-gold);


  /* --- TEKST --------------------------------------------------------------- */

  /* Tekst etykiety w triggerze „Wybierz lokalizację” (jasnoszary). */
  --fp-text-trigger: #e9e9e9;

  /* Tekst nazw parków FUNKCJONUJĄCYCH na liście (prawie biały). */
  --fp-text-item: #eaeaea;

  /* Tekst nazw parków W BUDOWIE (wygaszony szary — nieaktywne). */
  --fp-text-item-muted: #6f6f6f;

  /* Ikona pinezki przy parku W BUDOWIE (szara, nie żółta). */
  --fp-icon-muted: #5c5c5c;

  /* Nagłówek sekcji „WKRÓTCE OTWARCIE” (szary). */
  --fp-heading-muted: #8a8a8a;

  /* Tekst wpisywany w pole wyszukiwania. */
  --fp-text-input: #f0f0f0;

  /* Placeholder / ikona lupy w wyszukiwarce. */
  --fp-text-placeholder: #8a8a8a;

  /* Tekst nazwy WYBRANEJ lokalizacji (czysta biel). */
  --fp-text-selected: #ffffff;

  /* Ikona strzałki „>” po prawej stronie wiersza (mobile). */
  --fp-chevron: #9a9a9a;

  /* Strzałka rozwijania „v” w triggerze na stronie głównej. */
  --fp-chevron-trigger: #cfcfcf;


  /* --- PROMIENIE ZAOKRĄGLEŃ ------------------------------------------------ */
  --fp-radius-trigger: 9px;    /* przycisk-trigger strony głównej */
  --fp-radius-panel: 11px;     /* panel dropdownu strony głównej */
  --fp-radius-panel-loc: 12px; /* panel dropdownu zmiany lokalizacji */
  --fp-radius-input: 8px;      /* pole wyszukiwania */
  --fp-radius-row: 7px;        /* wiersz listy (hover highlight) */
  --fp-radius-pill: 24px;      /* pigułka zmiany lokalizacji */

  /* --- CIENIE -------------------------------------------------------------- */
  --fp-shadow-panel: 0 24px 50px rgba(0, 0, 0, 0.50);
  --fp-shadow-panel-loc: 0 26px 55px rgba(0, 0, 0, 0.55);

  /* --- TYPOGRAFIA ---------------------------------------------------------- */
  /* Font marki. Załaduj Poppins (np. przez wp_enqueue lub <link> w <head>). */
  --fp-font: 'Poppins', system-ui, -apple-system, sans-serif;
}


/* =============================================================================
   2. ANIMACJE
   ============================================================================= */

/* Wejście dropdownu / modala (delikatne wysunięcie + fade). */
@keyframes fp-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}


/* =============================================================================
   3. WSPÓLNE — PASEK PRZEWIJANIA WEWNĄTRZ LIST
   Dotyczy: list wewnątrz dropdownu i modala. Wg wytycznych klienta listy
   mogą być długie i mają mieć własny scroll.
   ============================================================================= */
.fp-scroll { overflow-y: auto; }
.fp-scroll::-webkit-scrollbar { width: 8px; }
.fp-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 8px; }
.fp-scroll::-webkit-scrollbar-track { background: transparent; }


/* =============================================================================
   4. STRONA GŁÓWNA — PRZYCISK-TRIGGER „WYBIERZ LOKALIZACJĘ”
   -----------------------------------------------------------------------------
   Sugerowany HTML:
     <button class="fp-trigger">
       <svg class="fp-trigger__pin">…pinezka…</svg>
       <span class="fp-trigger__label">Wybierz lokalizację</span>
       <svg class="fp-trigger__chevron">…strzałka w dół…</svg>
     </button>
   ============================================================================= */
.fp-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 400px;                 /* desktop; na mobile użyj width:100% (patrz sekcja 9) */
  max-width: 100%;
  height: 56px;
  padding: 0 18px;
  background: var(--fp-trigger-bg);
  border: 1.5px solid var(--fp-gold);   /* ŻÓŁTA RAMKA = główny akcent */
  border-radius: var(--fp-radius-trigger);
  cursor: pointer;
  font-family: var(--fp-font);
}
.fp-trigger__pin  { width: 18px; height: 18px; fill: var(--fp-gold); flex-shrink: 0; }
.fp-trigger__label {
  flex: 1;
  text-align: left;
  color: var(--fp-text-trigger);
  font-size: 16px;
  font-weight: 500;
}
.fp-trigger__chevron {
  width: 18px; height: 18px; flex-shrink: 0;
  stroke: var(--fp-chevron-trigger); fill: none; stroke-width: 2.2;
}


/* =============================================================================
   5. STRONA GŁÓWNA — PANEL DROPDOWNU
   -----------------------------------------------------------------------------
   Sugerowany HTML:
     <div class="fp-dropdown">
       <div class="fp-search">…input…</div>
       <div class="fp-section-title fp-section-title--active">Odwiedź nas</div>
       <div class="fp-list fp-scroll fp-list--func">…wiersze…</div>
       <div class="fp-list-divider"></div>
       <div class="fp-section-title">Wkrótce otwarcie</div>
       <div class="fp-list fp-scroll fp-list--soon">…wiersze…</div>
     </div>
   ============================================================================= */
.fp-dropdown {
  width: 400px;                 /* równa szerokości triggera */
  max-width: 100%;
  margin-top: 10px;             /* odstęp od triggera */
  padding: 14px;
  background: var(--fp-panel-bg);
  border: 1px solid var(--fp-border-panel);
  border-radius: var(--fp-radius-panel);
  box-shadow: var(--fp-shadow-panel);
  text-align: left;
  animation: fp-in 0.18s ease both;
}

/* --- Pole wyszukiwania (opcjonalne, wg wytycznych klienta „dodaj wyszukiwanie”) */
.fp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 11px 13px;
  background: var(--fp-search-bg);
  border: 1px solid var(--fp-border-input);
  border-radius: var(--fp-radius-input);
}
.fp-search__icon { width: 17px; height: 17px; stroke: var(--fp-text-placeholder); fill: none; stroke-width: 2; flex-shrink: 0; }
.fp-search__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fp-text-input);
  font-family: var(--fp-font);
  font-size: 14px;
  font-weight: 500;
}
.fp-search__input::placeholder { color: var(--fp-text-placeholder); }

/* --- Nagłówki sekcji ----------------------------------------------------- */
/* Wersja domyślna = szara (dla „WKRÓTCE OTWARCIE”). */
.fp-section-title {
  margin: 10px 4px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--fp-heading-muted);
}
/* Modyfikator ŻÓŁTY — dla aktywnej sekcji „ODWIEDŹ NAS”. */
.fp-section-title--active { color: var(--fp-gold); margin-top: 2px; }

/* --- Kontener listy (ze scrollem) --------------------------------------- */
/* Klient: „w środku listy może pojawić się scroll, żeby dropdown nie był za długi”.
   Ustaw max-height wg potrzeb — dwie osobne listy mają własny scroll. */
.fp-list { }
.fp-list--func { max-height: 196px; margin-bottom: 8px; }  /* parki funkcjonujące */
.fp-list--soon { max-height: 150px; }                       /* parki w budowie */

/* --- Separator między listą funkcjonujące a w budowie -------------------- */
.fp-list-divider {
  height: 1px;
  margin: 8px 4px 12px;
  background: var(--fp-divider-strong);
}

/* --- Wiersz listy: PARK FUNKCJONUJĄCY (klikalny) ------------------------- */
.fp-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 6px;
  border-radius: var(--fp-radius-row);
  cursor: pointer;
}
.fp-item__pin  { width: 15px; height: 15px; fill: var(--fp-gold); flex-shrink: 0; }
.fp-item__name { color: var(--fp-text-item); font-size: 15px; font-weight: 600; }
/* HOVER — delikatne żółte podświetlenie tła. */
.fp-item:hover { background: var(--fp-gold-hover-bg); }

/* --- Wiersz listy: PARK W BUDOWIE (nieaktywny, bez hovera, bez klikania) - */
.fp-item--soon { cursor: default; }
.fp-item--soon .fp-item__pin  { fill: var(--fp-icon-muted); }
.fp-item--soon .fp-item__name { color: var(--fp-text-item-muted); }
.fp-item--soon:hover { background: transparent; }


/* =============================================================================
   6. PODSTRONA PARKU — PIGUŁKA-TRIGGER ZMIANY LOKALIZACJI
   -----------------------------------------------------------------------------
   Sugerowany HTML:
     <button class="fp-pill">
       <svg class="fp-pill__pin">…pinezka…</svg>
       <span class="fp-pill__name">Rzeszów</span>
       <svg class="fp-pill__chevron">…strzałka…</svg>
     </button>
   ============================================================================= */
.fp-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  background: var(--fp-pill-bg);
  border: 1px solid var(--fp-gold-border);   /* ŻÓŁTE obramowanie ~55% krycia */
  border-radius: var(--fp-radius-pill);
  cursor: pointer;
  font-family: var(--fp-font);
}
.fp-pill__pin     { width: 16px; height: 16px; fill: var(--fp-gold); flex-shrink: 0; }
.fp-pill__name    { color: var(--fp-gold); font-size: 15px; font-weight: 700; }
.fp-pill__chevron { width: 15px; height: 15px; stroke: var(--fp-gold); fill: none; stroke-width: 2.4; flex-shrink: 0; }


/* =============================================================================
   7. PODSTRONA PARKU — DROPDOWN ZMIANY LOKALIZACJI (desktop)
   -----------------------------------------------------------------------------
   Zasada: aktualnie wybrany park jest ZAWSZE pierwszy i wyróżniony.
   Oznaczenie „wybrana” = TŁO żółte + LEWY PASEK żółty + mała etykieta „WYBRANA”
   + kółko z ptaszkiem. (NIE polegamy na kolejności ani na długości nazwy —
   działa też dla „Bielsko-Biała”, bo wyróżnienie jest wizualne, nie tekstowe.)

   Sugerowany HTML:
     <div class="fp-loc-dropdown">
       <div class="fp-loc-dropdown__title">Zmiana lokalizacji</div>
       <div class="fp-loc-selected">                     ← wybrana (pierwsza)
         <svg class="fp-loc-selected__pin">…</svg>
         <div class="fp-loc-selected__text">
           <div class="fp-loc-selected__label">Wybrana</div>
           <div class="fp-loc-selected__name">Bielsko-Biała</div>
         </div>
         <span class="fp-loc-selected__check"><svg>…ptaszek…</svg></span>
       </div>
       <div class="fp-loc-item">…pozostałe parki (klikalne)…</div>
     </div>
   ============================================================================= */
.fp-loc-dropdown {
  width: 250px;
  padding: 14px 8px;
  background: var(--fp-panel-bg-loc);
  border: 1px solid var(--fp-border-panel);
  border-radius: var(--fp-radius-panel-loc);
  box-shadow: var(--fp-shadow-panel-loc);
  animation: fp-in 0.18s ease both;
}
.fp-loc-dropdown__title {
  margin: 2px 12px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fp-heading-muted);
}

/* --- WIERSZ WYBRANEJ LOKALIZACJI (wyróżniony) --------------------------- */
.fp-loc-selected {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--fp-gold-selected-bg);            /* żółte tło */
  border-left: 3px solid var(--fp-selected-accent); /* żółty pasek z lewej */
}
.fp-loc-selected__pin  { width: 16px; height: 16px; fill: var(--fp-gold); flex-shrink: 0; }
.fp-loc-selected__text { flex: 1; min-width: 0; }   /* min-width:0 = poprawne ucinanie długich nazw */
.fp-loc-selected__label {
  margin-bottom: 1px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--fp-gold);
}
.fp-loc-selected__name {
  color: var(--fp-text-selected);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;      /* długa nazwa (np. „Bielsko-Biała”) ucinana wielokropkiem */
}
.fp-loc-selected__check {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--fp-gold);    /* żółte kółko */
}
.fp-loc-selected__check svg { width: 13px; height: 13px; stroke: #111; fill: none; stroke-width: 3; }

/* --- WIERSZE POZOSTAŁYCH PARKÓW (klikalne) ------------------------------ */
.fp-loc-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.fp-loc-item__pin  { width: 16px; height: 16px; fill: var(--fp-gold); flex-shrink: 0; }
.fp-loc-item__name { color: #e6e6e6; font-size: 15px; font-weight: 600; }
.fp-loc-item:hover { background: var(--fp-row-hover-loc); }


/* =============================================================================
   8. MOBILE — MODAL PEŁNOEKRANOWY (strona główna)
   -----------------------------------------------------------------------------
   Klient: modal otwiera się na całą szerokość i wysokość, ze scrollem gdy
   lokalizacji jest dużo.

   Sugerowany HTML:
     <div class="fp-modal">
       <div class="fp-modal__head">
         <div class="fp-modal__title">Wybierz swój <span>FlyPark</span></div>
         <button class="fp-modal__close"><svg>…X…</svg></button>
       </div>
       <div class="fp-modal__body fp-scroll">
         <div class="fp-search">…</div>
         <div class="fp-section-title fp-section-title--active">Odwiedź nas</div>
         <div class="fp-mobile-item">…</div>
         <div class="fp-section-title">Wkrótce otwarcie</div>
         <div class="fp-mobile-item fp-mobile-item--soon">…</div>
       </div>
     </div>
   ============================================================================= */
.fp-modal {
  position: fixed;
  inset: 0;                       /* pełny ekran */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: var(--fp-modal-bg);
  animation: fp-in 0.2s ease both;
}
.fp-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 14px;
  flex-shrink: 0;
}
.fp-modal__title {
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
}
.fp-modal__title span { color: var(--fp-gold); }   /* słowo „FlyPark” na żółto */
.fp-modal__close {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--fp-gold);     /* żółte kółko z X */
  cursor: pointer;
}
.fp-modal__close svg { width: 18px; height: 18px; stroke: #111; fill: none; stroke-width: 2.6; }

/* Ciało modala — TU jest scroll przy długiej liście. */
.fp-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 32px;
}

/* --- Wiersz miasta na mobile (większy, z separatorem i strzałką) -------- */
.fp-mobile-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--fp-divider);
  cursor: pointer;
}
.fp-mobile-item__pin  { width: 19px; height: 19px; fill: var(--fp-gold); flex-shrink: 0; }
.fp-mobile-item__name {
  flex: 1;
  color: #f0f0f0;
  font-size: 19px;
  font-weight: 800;
  font-style: italic;
}
.fp-mobile-item__chevron { width: 18px; height: 18px; stroke: var(--fp-chevron); fill: none; stroke-width: 2.4; flex-shrink: 0; }

/* Wariant „W BUDOWIE” na mobile — wygaszony, bez strzałki, bez klikania. */
.fp-mobile-item--soon { cursor: default; border-bottom-color: rgba(255,255,255,0.05); }
.fp-mobile-item--soon .fp-mobile-item__pin  { fill: var(--fp-icon-muted); }
.fp-mobile-item--soon .fp-mobile-item__name { color: var(--fp-text-item-muted); }


/* =============================================================================
   9. MOBILE — PANEL ZMIANY LOKALIZACJI (podstrona parku)
   -----------------------------------------------------------------------------
   Lista może być bardzo długa → własny scroll (kontener .fp-mobile-loc-list).
   Wybrana lokalizacja wyróżniona jak w sekcji 7 (tło + lewy pasek + etykieta
   + ptaszek), niezależnie od długości nazwy.

   Sugerowany HTML:
     <div class="fp-mobile-loc">
       <div class="fp-mobile-loc__head">
         <div class="fp-mobile-loc__title">Zmiana <span>lokalizacji</span></div>
         <button class="fp-modal__close">…X…</button>
       </div>
       <div class="fp-mobile-loc-list fp-scroll">
         <div class="fp-mobile-selected">…wybrana…</div>
         <div class="fp-mobile-loc-divider"></div>
         <div class="fp-mobile-item">…pozostałe…</div>
       </div>
     </div>
   ============================================================================= */
.fp-mobile-loc { background: var(--fp-mobile-list-bg); }
.fp-mobile-loc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 16px;
}
.fp-mobile-loc__title {
  font-size: 22px; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--fp-heading-muted);
}
.fp-mobile-loc__title span { color: var(--fp-heading-muted); }

/* Kontener listy z własnym scrollem (ustaw max-height wg wysokości ekranu). */
.fp-mobile-loc-list { overflow-y: auto; }

/* Wiersz WYBRANEJ lokalizacji (mobile). */
.fp-mobile-selected {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  background: var(--fp-gold-selected-bg-mobile);
  border-left: 4px solid var(--fp-selected-accent);
}
.fp-mobile-selected__pin  { width: 21px; height: 21px; fill: var(--fp-gold); flex-shrink: 0; }
.fp-mobile-selected__text { flex: 1; min-width: 0; }
.fp-mobile-selected__label {
  margin-bottom: 3px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--fp-gold);
}
.fp-mobile-selected__name {
  color: #fff; font-size: 21px; font-weight: 800; font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-mobile-selected__check {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%; background: var(--fp-gold);
}
.fp-mobile-selected__check svg { width: 16px; height: 16px; stroke: #111; fill: none; stroke-width: 3; }

/* Separator pod wybraną lokalizacją. */
.fp-mobile-loc-divider {
  height: 1px;
  margin: 4px 24px;
  background: var(--fp-divider-strong);
}
/* (pozostałe wiersze używają .fp-mobile-item z sekcji 8 — padding można podnieść do 17px 24px) */


/* =============================================================================
   10. POMOCNICZE — POZYCJONOWANIE DROPDOWNU (desktop)
   Jeśli dropdown ma się rozwijać pod triggerem jako warstwa (nie w flow):
   ============================================================================= */
.fp-anchor { position: relative; }        /* opakowanie triggera + dropdownu */
.fp-anchor .fp-dropdown,
.fp-anchor .fp-loc-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 200;
}


/* =============================================================================
   11. STANY WIDOCZNOŚCI — sterowane przez flypark-location-picker.js
   Skrypt dodaje/zdejmuje klasę `is-open` na [data-fp-panel] i [data-fp-modal].
   ============================================================================= */

/* Dropdowny desktop: domyślnie ukryte, widoczne po dodaniu .is-open. */
[data-fp-panel] { display: none; }
[data-fp-panel].is-open { display: block; }

/* Modal / panel mobilny: domyślnie ukryty, widoczny po .is-open. */
[data-fp-modal] { display: none; }
[data-fp-modal].is-open { display: flex; }

/* Obrót strzałki triggera po otwarciu (v → ^). */
[data-fp-chevron] { transition: transform 0.18s ease; }
[data-fp-chevron].is-open { transform: rotate(180deg); }

/* Komunikat „brak wyników” — domyślnie ukryty (skrypt pokazuje). */
[data-fp-empty] {
  display: none;
  padding: 18px 6px;
  color: var(--fp-text-item-muted);
  font-size: 14px;
  font-weight: 500;
}