/* ──────────────────────────────────────────────────────────────────────────
   Wspolne poprawki pol formularzy. Wczytywane na kazdej stronie, bo pola daty
   sa w pieciu szablonach (home, melex, melex-route, tour, transfers) i kazda
   poprawka robiona osobno w kazdym z nich rozjedzie sie przy pierwszej zmianie.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Pole daty: nie moze wychodzic poza okienko ──
   Safari nadaje polu typu date wlasna szerokosc wewnetrzna wynikajaca z
   dlugosci daty i nie pozwala jej zejsc ponizej tej wartosci, dopoki nie
   zdejmie sie systemowego wygladu i nie zezwoli na kurczenie. W waskim
   okienku rezerwacji pole wystawalo przez to poza krawedz karty. */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Pole daty bylo o 2 px wyzsze od kazdego innego pola w tym samym formularzu
   (zmierzone: 51 kontra 49 px w transferach, 53 kontra 51 w melexie).
   Wnetrze pola tekstowego ma 25 px, a wnetrze edytora daty 27 px.
   Przymierzylem siedem wariantow i zmierzylem kazdy (_pole-daty-proby.cjs);
   ten jest najmniej inwazyjny: nie wpisuje na sztywno ani wysokosci, ani
   wypelnienia, wiec dziala tak samo w obu formularzach, ktore maja rozne
   wypelnienia pol (11 i 12 px). Zerowanie wypelnienia edytora oraz ustawianie
   wysokosci wiersza NIE dzialaly.
   Pomiar: yk-audit/zh/_wysokosci-pol.cjs */
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
    margin-block: -1px;
}

/* ── Pole daty: puste ma podpowiadac, czego sie od goscia chce ──
   Safari, inaczej niz Chrome, nie pokazuje w pustym polu wzoru daty. Zostawal
   goly prostokat, po ktorym nie widac, ze to cokolwiek do klikniecia.
   Podpowiedz to OSOBNY element nalozony na pole, a nie pseudoelement pola:
   pseudoelementy na polach formularza dziala tylko czesc silnikow, wiec
   wygladaloby to inaczej na iPhonie niz na Androidzie.
   Wzoru NIE wpisujemy jako wartosci pola: nikt nie moze wyslac daty, ktorej
   sam nie wybral. Element wstawia i przelacza public/js/formularze.js. */
/* Otoczka opina SAMO pole, nie cala grupe z etykieta: inaczej podpowiedz
   srodkuje sie wzgledem etykiety i pola naraz i wisi za wysoko.
   `display: block` z pelna szerokoscia, zeby pole zachowalo swoja szerokosc,
   a `line-height: 0` zeby otoczka nie dokladala wiersza tekstu i pole daty
   nie bylo wyzsze od sasiadujacego pola z liczba osob. */
.pole-daty {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
}
.pole-daty__wzor {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 13px;
    font-size: 0.92rem;
    line-height: 1;
    color: rgba(100, 116, 139, 0.8);
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box;
}
.pole-daty--puste .pole-daty__wzor { display: flex; }

/* Gdy pokazujemy wlasna podpowiedz, chowamy systemowa (Chrome rysuje swoja
   "dd.mm.rrrr"), zeby nie bylo dwoch napisow jeden na drugim. */
.pole-daty--puste input[type="date"]::-webkit-datetime-edit { opacity: 0; }

/* Na ciemnych kartach podpowiedz musi byc jasniejsza, inaczej ginie w tle. */
.cb-field.pole-daty .pole-daty__wzor,
[data-on-dark] .pole-daty__wzor {
    color: rgba(255, 255, 255, 0.42);
}