/* =============================================================================
   FLYPARK — WYBOR LOKALIZACJI W NAGLOWKU PODSTRON
   =============================================================================
   Plik pisany recznie (NIE jest generowany z custom-scss.scss).
   Ladowany przez wp_enqueue_style poza strona glowna, PO
   styles/flypark-location-picker.css.

   Odpowiada wylacznie za OSADZENIE gotowych komponentow z pakietu w naglowku
   bannera. Sam wyglad pigulki, dropdownu i panelu mobilnego jest juz w
   flypark-location-picker.css (sekcje 6, 7, 8, 9) — tutaj tylko:

     1. neutralizacja starych regul .banner-single__localization z theme.css
     2. przelaczanie desktop <-> mobile
     3. ograniczenie wysokosci dropdownu (pakiet nie ma tu limitu)
     4. wygaszone pozycje "wkrotce" w dropdownie zmiany lokalizacji

   Selektory celuja w atrybuty data-fp-* (stabilne API pakietu) zamiast w nazwy
   klas specyficzne dla strony glownej.
============================================================================= */


/* =============================================================================
   1. NEUTRALIZACJA STAREGO KOMPONENTU
   theme.css trzyma tu hover-liste, wlasne paddingi, a na mobile obraca caly
   kontener o 90 stopni i wyjmuje go z przeplywu. Nowy picker jest zwyklym
   elementem naglowka, wiec to wszystko trzeba cofnac.
   ============================================================================= */

.banner-single__localization {
  padding: 0;
  margin-right: 24px;
  font-style: normal;
  cursor: default;
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
}

/* Stara lista rozwijana na hover juz nie istnieje w markupie, ale gdyby
   gdzies zostala — nie moze sie pokazywac. */
.banner-single__localization .banner-single__localization-more {
  display: none;
}

.banner-single__localization svg {
  display: block;   /* inline-SVG lapie baseline gap i rozjezdza wysokosci */
}


/* =============================================================================
   1b. MIEJSCE W NAGLOWKU — pigulka przy logo, nie przy "Kup bilet"
   -----------------------------------------------------------------------------
   .banner-single__header to flex ze space-between: lewa grupa (logo) i prawa
   (.banner-single__info z CTA i burgerem). Picker siedzi teraz w lewej grupie.

   Dwa bannery maja rozna strukture:
     • banner-single.php      — logo i picker w .banner-single__block
     • banner-single-blog.php — logo i picker bezposrednio w .banner-single__header
   ============================================================================= */

.banner-single__header {
  align-items: center;
}

.banner-single__block {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Wariant bez .banner-single__block: margin-right:auto zabiera cala wolna
   przestrzen, wiec pigulka zostaje przy logo, a .banner-single__info dalej
   ląduje przy prawej krawedzi. */
.banner-single__header > .banner-single__localization {
  margin-left: 24px;
  margin-right: auto;
}


/* =============================================================================
   2. PRZELACZANIE DESKTOP <-> MOBILE
   Prog 980px: ponizej dziala pelnoekranowy panel, powyzej dropdown.
   ============================================================================= */

/* Desktop: widoczny dropdown (anchor), ukryty wyzwalacz panelu mobilnego. */
.banner-single__localization [data-fp-open] {
  display: none;
}

@media (max-width: 980px) {
  .banner-single__localization [data-fp-anchor] {
    display: none;
  }

  .banner-single__localization [data-fp-open] {
    display: flex;
  }
}

@media (min-width: 980.02px) {
  /* Panel mobilny nie moze wyskoczyc na desktopie — np. gdy ktos otworzyl go
     na waskim oknie i je rozszerzyl. !important, bo regula pakietu
     [data-fp-modal].is-open{display:flex} ma taka sama specyficznosc. */
  .fp-modal.fp-switch-modal,
  .banner-single__localization ~ .fp-modal {
    display: none !important;
  }
}


/* =============================================================================
   2b. PRZYCISK MENU (burger)
   theme.css chowa go regula @media (min-width: 768px) i ta sama regula wylacza
   .menu-mobile.active — czyli powyzej 768px naglowek nie ma zadnej nawigacji.
   Przywracamy oba az do 991.98px: dokladnie tam znika "Kup bilet", wiec prawa
   strona naglowka nigdy nie zostaje pusta.
   ============================================================================= */

@media (max-width: 991.98px) {
  .banner-single__info .menu-mobile__burger {
    display: flex;   /* (0,2,0) bije regule motywu (0,1,0) */
  }

  .menu-mobile.active {
    display: block;  /* rowna specyficznosc — wygrywa kolejnoscia wczytania */
  }
}


/* =============================================================================
   3. NAGLOWEK: pigulka w przeplywie
   Na mobile "Kup bilet" (.btn--banner) jest ukryty ponizej 992px, wiec obok
   logo i burgera jest miejsce na pigulke — dokladnie jak na projekcie.
   ============================================================================= */

@media (max-width: 767.98px) {
  /* theme.css wyjmuje tu caly kontener z przeplywu i obraca go o 90 stopni
     (pionowa zakladka przy prawej krawedzi). Nowa pigulka ma stac normalnie
     w naglowku, wiec cofamy komplet tych regul. */
  .banner-single__localization {
    position: static;
    transform: none;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
    margin-right: 0;
  }

  .banner-single__header > .banner-single__localization {
    margin-left: 14px;
  }

  .banner-single__block {
    gap: 14px;
  }

  /* --- proporcje wg mocka: logo + pigulka + burger w jednym wierszu --------
     Przy 360px trzeba zmiescic sie w ok. 330px tresci, a domyslnie jest to
     140 (logo) + 148 (pigulka) + 64 (burger) = ponad 350px. */

  .banner-single__logo {
    min-width: 112px;
    width: 112px;
  }

  /* Burger: NIE zmieniamy width/height — kreski w srodku sa pozycjonowane
     absolutnie (top: 20/30/40px, left: 16px) pod okrag 64px, a animacja X ma
     zaszyte left: 21px. transform: scale() zmniejsza calosc razem z geometria,
     a ujemny margines sprawia, ze element zajmuje w ukladzie tyle, ile widac:
     64px * 0.7 = ok. 45px, kompensacja = (64 - 45) / 2 = 9.6px na strone. */
  .banner-single__info .menu-mobile__burger {
    transform: scale(0.7);
    margin: 0 -9.6px;
  }

  .banner-single__localization .fp-pill {
    height: 38px;
    padding: 0 12px;
    gap: 7px;
    max-width: 44vw;
  }

  .banner-single__localization .fp-pill__name {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .banner-single__localization .fp-pill__pin {
    width: 14px;
    height: 14px;
  }

  .banner-single__localization .fp-pill__chevron {
    width: 13px;
    height: 13px;
  }
}

@media (max-width: 500px) {
  .banner-single__logo {
    min-width: 96px;
    width: 96px;
  }

  .banner-single__block {
    gap: 16px;
  }

  .banner-single__header > .banner-single__localization {
    margin-left: 16px;
  }

  .banner-single__info .menu-mobile__burger {
    transform: scale(0.63);   /* ok. 40px */
    margin: 0 -11.8px;
  }

  .banner-single__localization .fp-pill {
    height: 36px;
    padding: 0 10px;
  }
}


/* =============================================================================
   4. DROPDOWN ZMIANY LOKALIZACJI — limit wysokosci
   Pakiet nie ogranicza .fp-loc-dropdown w zaden sposob, wiec przy dluzszej
   liscie parkow panel wyszedlby poza ekran.
   ============================================================================= */

.fp-loc-dropdown .fp-loc-list {
  max-height: 320px;
  overflow-y: auto;
}

@media (max-height: 760px) {
  .fp-loc-dropdown .fp-loc-list {
    max-height: 240px;
  }
}

/* Suwak w pakiecie ma alfa 0.14 — na ciemnym tle prawie niewidoczny. */
.fp-loc-dropdown .fp-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.fp-loc-dropdown .fp-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}


/* =============================================================================
   5. PARKI "WKROTCE OTWARCIE" W DROPDOWNIE ZMIANY LOKALIZACJI
   Pakiet ma wariant wygaszony tylko dla listy na stronie glownej (.fp-item--soon).
   Tutaj ten sam zamysl dla wierszy .fp-loc-item — dzieki temu park w budowie
   jest widoczny, ale nieklikalny (dzis jest martwym linkiem do "#").
   ============================================================================= */

.fp-loc-soon-title {
  margin: 12px 12px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #8a8a8a;
}

.fp-loc-item--soon {
  cursor: default;
}

.fp-loc-item--soon .fp-loc-item__pin {
  fill: #5c5c5c;
}

.fp-loc-item--soon .fp-loc-item__name {
  color: #6f6f6f;
}

.fp-loc-item--soon:hover {
  background: transparent;
}

/* Ten sam wariant w panelu mobilnym. */
.fp-switch-modal .fp-section-title--inloc {
  padding: 0 24px;
  margin-top: 18px;
}


/* =============================================================================
   6. PANEL MOBILNY — dopiecia
   ============================================================================= */

.fp-switch-modal {
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
}

.fp-switch-modal .fp-mobile-loc {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.fp-switch-modal svg {
  display: block;
}

/* Wiersze miast w panelu zmiany lokalizacji maja szerszy padding niz na
   stronie glownej (wg fragments.html, wariant D). */
.fp-switch-modal .fp-mobile-item--loc {
  padding: 17px 24px;
}

.fp-switch-modal .fp-mobile-loc-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.fp-switch-modal .fp-mobile-loc-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}


/* =============================================================================
   7. WARIANT "WYBIERZ LOKALIZACJE" W BANNERZE (domena glowna, brak biezacego parku)
   Uzywa tego samego komponentu co strona glowna, ale bez szerokosci hero.
   ============================================================================= */

.fp-banner__picker {
  width: 320px;
  max-width: 100%;
}

.banner-single__localization .fp-trigger {
  height: 48px;
  font-family: inherit;
  text-align: left;
}

@media (max-width: 767.98px) {
  .fp-banner__picker {
    width: auto;
  }

  .banner-single__localization .fp-trigger {
    width: auto;
    max-width: 46vw;
  }

  .banner-single__localization .fp-trigger__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}