/* ==========================================================================
   Trazo — wyszukiwarka lotów (hero search form)
   JEDYNE źródło stylów .tsf (formularz + popovery + mobile). Ładowane na
   stronie głównej ORAZ na stronach kierunków (functions.php).
   Desktop/tablet: ciemny pasek (Granat #17508A + Lazur #0E9DC9).
   Mobile ≤600px: biała karta + pełnoekranowy sheet (kalendarz/pax).
   Porządek kaskady = kolejność sekcji; bez !important (plik ładuje się RAZ).
   ========================================================================== */

#trazo-search,.tsf-scrim{
  --orange:      #0E9DC9;
  --orange-dark: #0A7EA1;
  --orange-soft: #E6F6FB;
  --orange-line: #C2E8F2;
  --graphite:    #14202e;
  --granat:      #17508A;
  --blue:        #0E9DC9;
  --blue-soft:   #E6F6FB;
  --text-2:      #5b6b7c;
  --muted:       #9aa3ab;
  --line:        #dde3e8;
  --line-soft:   #eef1f4;
  --card-line:   #e9edf1;
  --bg:          #fbfcfd;
  --danger:      #d64545;
  --radius:      18px;
  --radius-fld:  12px;
  --shadow:      0 14px 40px rgba(20,32,46,.08);
  --shadow-pop:  0 18px 50px rgba(20,32,46,.16);
}

/* ==========================================================================
   FORM — ciemny pasek (desktop/tablet)
   ========================================================================== */
.tsf { position: relative; z-index: 60; } /* > scrim(45) i > badge'y kart (2): popovery zawsze na wierzchu */
/* --- typ podróży --- */
.tsf__trip { display:inline-flex; gap:4px; padding:4px; margin-bottom:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:12px; }
.tsf__trip-opt { padding:9px 18px; font-weight:700; font-size:14px; color:#a9bccf; border-radius:9px; white-space:nowrap; transition:.15s; }
.tsf__trip-opt:hover { color:#fff; }
.tsf__trip-opt.is-active { background:#fff; color:var(--sky, #17508A); }
/* --- pasek pól --- */
.tsf__bar { display:flex; align-items:stretch; gap:0; padding:8px; background:#102A46; border:1px solid rgba(255,255,255,.09); border-radius:18px; box-shadow:0 24px 60px rgba(9,26,45,.35); }
.tsf__field { position:relative; display:flex; align-items:center; gap:11px; padding:11px 16px; border-radius:12px; text-align:left; min-width:0; transition:background .15s, box-shadow .15s; }
.tsf__field + .tsf__field::before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:1px; background:rgba(255,255,255,.08); }
.tsf__field:hover { background:rgba(255,255,255,.05); }
.tsf__field.is-open, .tsf__field:focus-within { background:#17385C; box-shadow:inset 0 0 0 1.5px rgba(22,182,224,.55); }
.tsf__field--city { flex:1.35; }
.tsf__field--date { flex:1; }
.tsf__field--pax { flex:1.15; }
.tsf__inner { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; cursor:pointer; }
.tsf__label { font-size:11px; font-weight:700; color:#7f95ab; text-transform:uppercase; letter-spacing:.05em; }
.tsf__value { font-size:16px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tsf__value--placeholder { color:#7f95ab; font-weight:600; }
.tsf__input { border:none; outline:none; background:transparent; padding:0; font-size:16px; font-weight:700; color:#fff; width:100%; min-width:0; }
.tsf__input::placeholder { color:#7f95ab; font-weight:600; }
/* ikony pól */
.tsf__ico { flex:none; width:20px; height:20px; background-repeat:no-repeat; background-position:center; background-size:contain; }
.tsf__field--city .tsf__ico { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316B6E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>"); }
.tsf__field--date .tsf__ico { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316B6E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>"); }
.tsf__field--pax .tsf__ico { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316B6E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13A4 4 0 0 1 16 11'/></svg>"); }
/* stan błędu */
.tsf__field.is-error { box-shadow:inset 0 0 0 1.5px var(--danger); background:#fef6f6; }
.tsf__err { position:absolute; left:14px; bottom:-19px; font-size:11.5px; font-weight:700; color:var(--danger); white-space:nowrap; }
/* swap */
.tsf__swap { flex:none; align-self:center; width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.18); background:#102A46; color:#a9bccf; display:flex; align-items:center; justify-content:center; margin:0 -13px; z-index:3; transition:.15s; }
.tsf__swap:hover { border-color:#16B6E0; color:#16B6E0; transform:rotate(180deg); }
/* submit */
.tsf__submit { flex:none; margin-left:6px; background:var(--accent, #0E9DC9); color:#fff; border-radius:12px; padding:0 26px; font-weight:800; font-size:16px; display:flex; align-items:center; gap:9px; transition:background .15s; }
.tsf__submit:hover { background:var(--accent-hover, #0B87AD); }
.tsf__submit:focus-visible { outline:3px solid rgba(14,157,201,.45); outline-offset:2px; }
/* trust line */
.tsf__trust { margin:14px 2px 0; font-size:13px; color:var(--muted, #5b6b7c); font-weight:600; }
/* Powrót ukryty w one-way */
.tsf.is-oneway .tsf__field--return-hidden { display:none; }

/* ==========================================================================
   POPOVERY (kalendarz, pasażerowie, autocomplete)
   ========================================================================== */
.tsf__ac{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:40;
  background:#fff; border:1px solid var(--card-line); border-radius:14px;
  box-shadow:var(--shadow-pop); padding:6px; max-height:340px; overflow:auto;
  min-width:280px;
}
.tsf__ac-item{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:11px 12px; border-radius:9px; text-align:left; transition:background .12s;
}
.tsf__ac-item:hover, .tsf__ac-item.is-hl{ background:var(--blue-soft); }
.tsf__ac-item__pin{ flex:none; width:18px; height:18px; color:var(--muted); }
.tsf__ac-item__body{ flex:1; min-width:0; }
.tsf__ac-item__city{ font-weight:700; font-size:15px; color:var(--graphite); }
.tsf__ac-item__country{ font-size:13px; color:var(--text-2); }
.tsf__ac-item__iata{
  flex:none; font-weight:800; font-size:12px; color:var(--text-2);
  background:var(--line-soft); border-radius:6px; padding:4px 8px; letter-spacing:.04em;
}
.tsf__ac-empty{ padding:20px 14px; text-align:center; color:var(--text-2); font-size:14px; font-weight:600; }
.tsf__ac-skel{ display:flex; align-items:center; gap:12px; padding:11px 12px; }
.tsf__ac-skel span{ height:12px; border-radius:6px; background:linear-gradient(90deg,#eef1f4,#f6f8fa,#eef1f4); background-size:200% 100%; animation:tsf-shimmer 1.2s infinite; }
@keyframes tsf-shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* --- popover shell (kalendarz + pax) --- */
.tsf-pop{
  position:absolute; top:calc(100% + 8px); z-index:50;
  background:#fff; border:1px solid var(--card-line); border-radius:16px;
  box-shadow:var(--shadow-pop); padding:20px;
}
.tsf-pop--cal{ left:50%; transform:translateX(-50%); }
.tsf-pop--pax{ right:8px; width:340px; }
/* --- kalendarz --- */
.tsf-cal{ display:flex; gap:28px; }
.tsf-cal__month{ width:262px; }
.tsf-cal__head{ display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:12px; }
.tsf-cal__title{ font-weight:800; font-size:15px; text-transform:capitalize; }
.tsf-cal__nav{ position:absolute; width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--graphite); }
.tsf-cal__nav:hover{ background:var(--line-soft); }
.tsf-cal__nav:disabled{ opacity:.28; cursor:default; }
.tsf-cal__nav--prev{ left:0; }
.tsf-cal__nav--next{ right:0; }
.tsf-cal__nav--next.is-hidden, .tsf-cal__nav--prev.is-hidden{ visibility:hidden; }
.tsf-cal__dow{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; }
.tsf-cal__dow span{ text-align:center; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; }
.tsf-cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.tsf-cal__day{
  height:36px; border-radius:9px; font-size:14px; font-weight:600; color:var(--graphite);
  display:flex; align-items:center; justify-content:center; position:relative; transition:background .1s;
}
/* hover ТОЛЬКО на устройствах с мышью: на iOS «залипший» hover тапнутой ячейки
   специфичнее .is-selected и ПЕРЕКРЫВАЛ синее выделение даты до следующего скролла */
@media (hover:hover){ .tsf-cal__day:hover:not(:disabled){ background:var(--line-soft); } }
.tsf-cal__day:disabled{ color:#cfd6dc; cursor:default; }
.tsf-cal__day.is-empty{ visibility:hidden; }
/* poziomy cen (TP month-matrix, jak Kayak): p1 tanio · p2 średnio · p3 drogo */
.tsf-cal__day.is-p1{ background:#DCF3E3; color:#0B7A35; }
.tsf-cal__day.is-p2{ background:#F3F5F7; color:#5b6b7c; }
.tsf-cal__day.is-p3{ background:#FADBDB; color:#B02A2A; }
@media (hover:hover){
.tsf-cal__day.is-p1:hover:not(:disabled){ background:#C9EBD4; }
.tsf-cal__day.is-p2:hover:not(:disabled){ background:#E7EBEF; }
.tsf-cal__day.is-p3:hover:not(:disabled){ background:#F5C6C6; }
.tsf-cal__day.in-range:hover:not(:disabled){ background:#B4DFF0; }
.tsf-cal__day.is-selected:hover:not(:disabled){ background:var(--orange-dark); color:#fff; }
}
/* legenda cen — widoczna tylko gdy są dane (klasa has-prices na .tsf-pop) */
.tsf-cal__legend{ display:none; gap:8px; padding:12px 20px 0; }
.tsf-pop.has-prices .tsf-cal__legend{ display:flex; }
.tsf-cal__legend .lg{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:6px; }
.tsf-cal__legend .lg-1{ background:#DCF3E3; color:#0B7A35; }
.tsf-cal__legend .lg-2{ background:#F3F5F7; color:#5b6b7c; }
.tsf-cal__legend .lg-3{ background:#FADBDB; color:#B02A2A; }
.tsf-cal__day.in-range{ background:#C8E9F6; border-radius:0; color:var(--granat); font-weight:700; }
.tsf-cal__day.range-start{ background:#C8E9F6; border-radius:9px 0 0 9px; }
.tsf-cal__day.range-end{ background:#C8E9F6; border-radius:0 9px 9px 0; }
.tsf-cal__day.is-selected{ background:var(--orange); color:#fff; border-radius:9px; z-index:1; }
.tsf-cal__foot{ display:none; }
/* --- pasażerowie --- */
.tsf-pax__row{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.tsf-pax__row:first-child{ padding-top:0; }
.tsf-pax__info{ flex:1; min-width:0; }
.tsf-pax__title{ font-weight:700; font-size:15px; }
.tsf-pax__sub{ font-size:12.5px; color:var(--text-2); }
.tsf-pax__step{ flex:none; display:flex; align-items:center; gap:12px; }
.tsf-pax__btn{
  width:34px; height:34px; border-radius:9px; border:1.5px solid var(--line);
  color:var(--graphite); display:flex; align-items:center; justify-content:center; font-weight:700; transition:.12s;
}
.tsf-pax__btn:hover:not(:disabled){ border-color:var(--graphite); }
.tsf-pax__btn:disabled{ opacity:.35; cursor:default; }
.tsf-pax__num{ width:20px; text-align:center; font-weight:800; font-size:16px; }
.tsf-pax__cabin{ margin:16px 0 4px; }
.tsf-pax__cabin-lbl{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.tsf-pax__seg{ display:flex; gap:6px; }
.tsf-pax__seg button{
  flex:1; padding:10px 6px; border:1.5px solid var(--line); border-radius:10px;
  font-weight:700; font-size:13px; color:var(--text-2); transition:.12s;
}
.tsf-pax__seg button:hover{ border-color:var(--graphite); color:var(--graphite); }
.tsf-pax__seg button.is-active{ border-color:var(--orange); background:var(--orange-soft); color:var(--orange-dark); }
.tsf-pax__done{
  width:100%; margin-top:16px; background:var(--granat); color:#fff;
  border-radius:11px; padding:12px; font-weight:800; font-size:15px; transition:.15s;
}
.tsf-pax__done:hover{ background:#0c1620; }
/* sheet header (mobile) */
.tsf-sheet-hd{ display:none; }
/* scrim */
.tsf-scrim{ position:fixed; inset:0; background:rgba(20,32,46,.35); z-index:45; }

/* ==========================================================================
   TABLET 561–999px
   ========================================================================== */
@media (max-width:999px) and (min-width:561px){
  .tsf__bar{ flex-wrap:wrap; }
  .tsf__field--pax{ flex:1 1 100%; }
  .tsf__field--pax + .tsf__submit{ flex:1 1 100%; margin-left:0; margin-top:4px; justify-content:center; }
}

/* ============================================================================
   MOBILE ≤600px — biała karta w stylu TOP (Skyscanner/momondo/Kayak):
   zakładki na górze · białe rozdzielone pola · jedno pole dat →
   pełnoekranowy sheet (kalendarz/pax). Desktop bez zmian.
   ============================================================================ */
@media (max-width:600px){
  .tsf{ z-index:auto; }
  .tsf__trip{ display:flex; width:100%; gap:0; margin:0 0 12px; padding:0; background:transparent; border:none; border-radius:0; box-shadow:none; }
  .tsf__trip-opt{ flex:1; text-align:center; padding:12px 6px; font-size:13.5px; font-weight:800; color:#8a97a5; background:transparent; border:1px solid #e6ebf1; border-right:none; }
  .tsf__trip-opt:first-child{ border-radius:12px 0 0 12px; }
  .tsf__trip-opt:last-child{ border-radius:0 12px 12px 0; border-right:1px solid #e6ebf1; }
  .tsf__trip-opt.is-active{ background:#eaf4f9; color:#17508A; border-color:#bfe0ee; }
  .tsf__bar{ flex-direction:column; align-items:stretch; gap:0; padding:0; background:#fff; border:1px solid #e6ebf1; border-radius:16px; box-shadow:0 8px 22px rgba(23,80,138,.10); position:relative; overflow:visible; }
  .tsf__field{ width:100%; min-height:60px; margin:0; padding:12px 15px; border-radius:0; border:none; border-bottom:1px solid #e6ebf1; background:#fff; gap:12px; }
  .tsf__field + .tsf__field::before{ display:none; }
  .tsf__field:hover{ background:#fff; }
  .tsf__field.is-open, .tsf__field:focus-within{ background:#f4f9fc; box-shadow:none; }
  .tsf__label{ display:none; }
  .tsf__value{ color:#14202e; white-space:normal; font-weight:800; }
  .tsf__value--placeholder{ color:#9aa7b4; font-weight:700; }
  .tsf__input{ color:#14202e; font-size:15px; font-weight:800; }
  .tsf__input::placeholder{ color:#9aa7b4; font-weight:700; }
  .tsf__ico{ width:34px; height:34px; border-radius:9px; background-color:#eaf4f9; background-size:18px; background-position:center; }
  .tsf__swap{ position:absolute; right:12px; top:42px; align-self:auto; width:36px; height:36px; margin:0; background:#fff; border:1px solid #e6ebf1; color:#0E9DC9; box-shadow:0 3px 8px rgba(23,80,138,.14); }
  .tsf__swap:hover{ background:#fff; border-color:#0E9DC9; }
  .tsf__field--date[data-field="return"]{ display:none; }
  .tsf__submit{ margin:12px; width:calc(100% - 24px); justify-content:center; background:#0E9DC9; border-radius:12px; padding:14px; font-size:16px; }
  .tsf__submit:hover{ background:#0B87AD; }
  .tsf__trust{ margin:12px 2px 0; text-align:center; color:#5b6b7c; }

  /* pełnoekranowy sheet (kalendarz / pasażerowie), jak Kayak */
  .tsf-pop{ position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:auto; max-height:none; transform:none; border:none; border-radius:0; padding:0; background:#fff; z-index:99999; display:flex; flex-direction:column; overflow:hidden; box-shadow:none; }
  .tsf-scrim{ z-index:99990; }
  .tsf-sheet-hd{ display:flex; flex:none; align-items:center; justify-content:space-between; padding:16px 18px 10px; border-bottom:1px solid #eef2f6; }
  .tsf-sheet-hd__t{ font-weight:800; font-size:16px; }
  /* BEZ -webkit-overflow-scrolling:touch — na iOS tworzy warstwę, która NIE przerysowuje
     zmienionych klas komórek do następnego scrolla (bug: wybrana data bez podświetlenia) */
  .tsf-pop--cal .tsf-cal-wrap{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:10px 16px 8px; }
  .tsf-cal__legend{ flex:none; padding:10px 16px 0; }
  .tsf-cal{ flex-direction:column; gap:18px; }
  .tsf-cal__month{ width:100%; }
  .tsf-cal__day{ height:42px; font-size:15px; }
  .tsf-cal__foot{ display:flex; flex-direction:column; gap:10px; flex:none; padding:12px 16px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid #eef2f6; background:#fff; }
  .tsf-cal__sum{ display:flex; gap:16px; }
  .tsf-cal__sum-c{ flex:1; }
  .tsf-cal__sum-l{ display:block; font-size:11px; color:#8a97a5; font-weight:700; }
  .tsf-cal__sum-v{ display:block; font-size:14px; font-weight:800; margin-top:2px; text-transform:capitalize; }
  .tsf-cal__done{ width:100%; background:#0E9DC9; color:#fff; border-radius:12px; padding:14px; font-weight:800; font-size:15px; }
  .tsf-pop--pax{ right:0; width:100%; padding:0; }
  .tsf-pop--pax .tsf-pax{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 18px; }
  .tsf-pop--pax .tsf-pax__done{ margin:6px 18px 18px; width:calc(100% - 36px); }

  /* pełnoekranowy sheet wyboru miasta (Skąd?/Dokąd?) — jak Kayak/momondo */
  .tsf-city-wrap{ flex:1; display:flex; flex-direction:column; overflow:hidden; padding:12px 16px 0; }
  .tsf-city__input{ flex:none; width:100%; border:1.5px solid #dde3e8; border-radius:12px; padding:13px 14px; font-size:16px; font-weight:700; color:#14202e; background:#fff; outline:none; }
  .tsf-city__input:focus{ border-color:#0E9DC9; box-shadow:0 0 0 3px rgba(14,157,201,.15); }
  .tsf-city__input::placeholder{ color:#9aa7b4; font-weight:600; }
  .tsf__ac--sheet{ position:static; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; box-shadow:none; border:none; border-radius:0; padding:6px 0 16px; max-height:none; min-width:0; margin-top:6px; }
  .tsf__ac--sheet .tsf__ac-item{ padding:13px 10px; }
}