/* =====================================================================
   REZERWACJE — dostępność klientki · Elwira Kusz
   style.css
   ---------------------------------------------------------------------
   Ten sam świat, co „Za 10 lat": ciemna scena, jedno źródło światła
   z górnego lewego rogu, Didone na tytuły i geometryczny grotesk
   w rozstrzeleniu na wszystko, co jest metryczką. Formularz ma wyglądać
   jak dalszy ciąg gry, z której klientka tu przyszła — a nie jak
   panel administracyjny doklejony do fotografii.

   Zasady przeniesione z gra-b i obowiązujące tu tak samo:
   · zero zaokrągleń — prostokąt jest prostokątem,
   · zero cieni „materiałowych" poza kartonem przycisku,
   · jeden kolor akcentu (róż-taupe) i nigdy na dłuższym tekście,
   · wersaliki z trackingiem dostają `text-indent` równy trackingowi,
     inaczej doklejona z prawej spacja przesuwa napis optycznie w lewo.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENY — te same wartości co w gra-b/style.css
   ------------------------------------------------------------------ */
:root {
  --ink:          #0e0e0f;
  --ink-soft:     #17171a;

  --paper:        #fbf9f5;
  --paper-ink:    #1b1917;

  --cream:        #f4f1ec;
  --muted:        #918b83;

  --accent:       #c3a89c;
  --accent-soft:  rgba(195, 168, 156, .34);

  --line:         rgba(244, 241, 236, .17);
  --line-soft:    rgba(244, 241, 236, .085);

  --skip:         #b06a5c;

  --font-display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --ease:         cubic-bezier(.25, 1, .5, 1);
  --ease-soft:    cubic-bezier(.4, 0, .2, 1);

  --pad:          clamp(20px, 6vw, 30px);

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);

  /* Ziarno 35 mm jako SVG w adresie — bez osobnego pliku do wdrażania.
     `feTurbulence` daje szum bezszwowy z definicji, więc kafel nigdy
     nie pokaże szwu, niezależnie od rozmiaru ekranu. */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: calc(38px + var(--sat)) var(--pad) calc(60px + var(--sab));
}

button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   3. SCENA — tło, przesłona, ziarno, winieta
   ---------------------------------------------------------------------
   Zdjęcie jest nieruchome (`fixed`), a treść przesuwa się po nim.
   Przy przewijaniu formularza tło, które jedzie razem z tekstem, czyta
   się jak tapeta; nieruchome — jak ściana, przed którą to wszystko stoi.
   ------------------------------------------------------------------ */
.scena {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ink);
}

.scena__foto {
  position: absolute;
  inset: 0;
  background: url('tlo.webp') center / cover no-repeat;
  /* Delikatne powiększenie przy wejściu — kadr „osiada", zamiast
     pojawić się gotowy. Raz, bez pętli: to tło, nie animacja. */
  animation: osiadanie 8s var(--ease) both;
}
@keyframes osiadanie {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Tekstu jest tu dużo i czytelność wygrywa z kadrem — stąd przesłona
   mocniejsza niż w grze. */
.scena__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(11, 11, 12, .82) 0%,
      rgba(11, 11, 12, .70) 34%,
      rgba(11, 11, 12, .80) 66%,
      rgba(11, 11, 12, .94) 100%);
}

.scena__ziarno {
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 256px 256px;
  opacity: .17;
  mix-blend-mode: overlay;
  animation: ziarno 700ms steps(1) infinite;
}
@keyframes ziarno {
  0%   { background-position:   0px   0px; }
  20%  { background-position: -37px  19px; }
  40%  { background-position:  23px -31px; }
  60%  { background-position: -18px -13px; }
  80%  { background-position:  31px  27px; }
  100% { background-position:   0px   0px; }
}

.scena__winieta {
  position: absolute;
  inset: 0;
  background: radial-gradient(122% 86% at 50% 42%, transparent 44%, rgba(6, 6, 7, .58) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .scena__ziarno { animation: none; }
  .scena__foto { animation: none; }
}

/* ---------------------------------------------------------------------
   4. UKŁAD
   ------------------------------------------------------------------ */
.wrap {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
   5. TYPOGRAFIA — dwa głosy i nic poza nimi
   ------------------------------------------------------------------ */
h1, h2, .godziny, .podglad__tresc, .koniec__zdanie {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}

h1 {
  font-size: clamp(38px, 12vw, 52px);
  line-height: 1.02;
  margin-bottom: 4px;
}
h1 em { font-style: italic; }

h2 {
  font-size: 21px;
  line-height: 1.2;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .44em;
  text-indent: .44em;
  text-transform: uppercase;
  color: var(--muted);
}

.rule {
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: 22px auto;
  opacity: .7;
}

.lede {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(244, 241, 236, .78);
  max-width: 40ch;
}

.naglowek { text-align: center; margin-bottom: 34px; }
.naglowek .lede { margin: 0 auto; }

/* wejście elementów — jak w grze, tylko krócej */
.reveal { opacity: 0; transform: translateY(14px); filter: blur(6px);
          animation: wejscie .9s var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes wejscie { to { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; filter: none; }
}

/* ---------------------------------------------------------------------
   6. KARTY
   ---------------------------------------------------------------------
   Nie „karta" w sensie interfejsu — ciemna płyta odcinająca się od tła
   samą włosową kreską i minimalnym rozjaśnieniem. Wszystko inne
   (cienie, ramki, promienie) rozbijałoby zdjęcie pod spodem.
   ------------------------------------------------------------------ */
.karta {
  background: rgba(14, 14, 15, .58);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 24px var(--pad) 26px;
  margin-bottom: 14px;
}

.karta > h2 { margin-bottom: 3px; }
.karta__nota {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------------
   7. POLA
   ------------------------------------------------------------------ */
.pole { margin-bottom: 14px; }
.pole:last-child { margin-bottom: 0; }

.pole label,
.etykieta {
  display: block;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.wymagane { color: var(--accent); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  background: rgba(14, 14, 15, .55);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 15px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  transition: border-color .3s var(--ease);
}
input::placeholder, textarea::placeholder { color: rgba(145, 139, 131, .8); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input.zle, select.zle, textarea.zle { border-color: var(--skip); }

textarea { resize: vertical; line-height: 1.6; }

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 22px, calc(100% - 14px) 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select option { background: var(--ink-soft); color: var(--cream); }

/* Kalendarz systemowy jest jasny; bez tego ikonka znika na ciemnym tle. */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.75); cursor: pointer; }

.dwie { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 400px) { .dwie { grid-template-columns: 1fr; gap: 0; } }

.podpowiedz {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted);
  margin-top: 7px;
}
.licznik { text-align: right; }

/* ---------------------------------------------------------------------
   8. DZIEŃ — ptaszek, nazwa, godziny, suwak
   ---------------------------------------------------------------------
   Jeden wiersz na dzień. Ptaszek wyłącza cały dzień: wiersz przygasa,
   godziny ustępują miejsca słowu „nie mogę", a suwak przestaje reagować.
   Dzień wyłączony ma zniknąć z uwagi, ale zostać na swoim miejscu —
   inaczej lista skacze przy każdym kliknięciu.
   ------------------------------------------------------------------ */
.dzien {
  padding: 16px 0 14px;
  border-top: 1px solid var(--line-soft);
  transition: opacity .3s var(--ease);
}
.dzien:first-of-type { border-top: none; padding-top: 4px; }
.dzien.wylaczony { opacity: .34; }

.dzien__gora {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* --- ptaszek --- */
.ptaszek {
  position: relative;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  cursor: pointer;
}
.ptaszek input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ptaszek__ramka {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(244, 241, 236, .34);
  background: rgba(14, 14, 15, .5);
  transition: border-color .2s var(--ease-soft), background-color .2s var(--ease-soft);
  pointer-events: none;
}
.ptaszek__ramka::after {
  content: '';
  position: absolute;
  left: 5px; top: 2px;
  width: 6px; height: 11px;
  border: solid var(--ink);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) scale(.4);
  opacity: 0;
  transition: opacity .18s var(--ease-soft), transform .18s var(--ease-soft);
}
.ptaszek input:checked + .ptaszek__ramka {
  background: var(--accent);
  border-color: var(--accent);
}
.ptaszek input:checked + .ptaszek__ramka::after { opacity: 1; transform: rotate(45deg) scale(1); }
.ptaszek input:focus-visible + .ptaszek__ramka { border-color: var(--cream); box-shadow: 0 0 0 3px rgba(195, 168, 156, .22); }

.dzien__nazwa {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, .9);
  cursor: pointer;
}

.godziny {
  margin-left: auto;
  font-size: 19px;
  letter-spacing: .01em;
  color: var(--cream);
  white-space: nowrap;
}
.dzien.wylaczony .godziny {
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- suwak dwóch uchwytów --- */
.tor {
  position: relative;
  height: 30px;
  margin: 0 2px;
}
.tor__tlo, .tor__wypelnienie {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  pointer-events: none;
}
.tor__tlo { left: 0; right: 0; background: var(--line); }
.tor__wypelnienie { background: var(--accent); height: 2px; transition: background-color .3s var(--ease); }
.dzien.wylaczony .tor__wypelnienie { background: rgba(244, 241, 236, .22); }

/* Dwa zwykłe suwaki jeden na drugim. Tor nie łapie kliknięć — chwytać
   można wyłącznie uchwyty, inaczej dotknięcie toru przeskakiwałoby
   losowym uchwytem i wybierało godzinę, której nikt nie wskazał. */
.suwak {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 30px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  pointer-events: none;
}
.suwak:focus { outline: none; }

.suwak::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--cream);
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
  cursor: grab;
  transition: transform .15s var(--ease-soft), background-color .2s var(--ease-soft);
}
.suwak::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.22); }

.suwak::-moz-range-thumb {
  pointer-events: auto;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--cream);
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .75);
  cursor: grab;
}
.suwak::-moz-range-track { background: none; border: none; }

.suwak:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(195, 168, 156, .3); }
.suwak:focus-visible::-moz-range-thumb     { box-shadow: 0 0 0 4px rgba(195, 168, 156, .3); }

.dzien.wylaczony .suwak { pointer-events: none; }
.dzien.wylaczony .suwak::-webkit-slider-thumb { background: rgba(244, 241, 236, .3); }
.dzien.wylaczony .suwak::-moz-range-thumb     { background: rgba(244, 241, 236, .3); }

.skala {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  letter-spacing: .22em;
  text-indent: .22em;
  color: rgba(145, 139, 131, .72);
  margin: -2px 2px 0;
}

/* Skrót „wszystkie dni tak samo" — bez niego siedem par uchwytów
   ustawia się siedem razy. */
.szybkie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

/* ---------------------------------------------------------------------
   9. PRZEDMIOTY DO KLIKANIA — karton i włosowa zakładka (jak w gra-b)
   ------------------------------------------------------------------ */
.plaque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px 32px;
  border: none;
  border-radius: 0;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: var(--paper-ink);
  background: var(--paper);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 26px -12px rgba(0, 0, 0, .85);
  transition: transform .16s var(--ease-soft), box-shadow .16s var(--ease-soft),
              background-color .16s var(--ease-soft), opacity .2s var(--ease-soft);
}
.plaque:hover { background: #fff; transform: translateY(-1px);
                box-shadow: 0 2px 3px rgba(0, 0, 0, .5), 0 18px 34px -14px rgba(0, 0, 0, .9); }
.plaque:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.plaque:disabled { opacity: .5; cursor: default; transform: none; }

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, .03);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, .82);
  cursor: pointer;
  transition: border-color .2s var(--ease-soft), color .2s var(--ease-soft),
              background-color .2s var(--ease-soft);
}
.tab:hover { border-color: rgba(244, 241, 236, .38); color: var(--cream); background: rgba(255, 255, 255, .07); }
.tab:active { background: rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------------
   10. ZGODA, PODGLĄD, BŁĄD
   ------------------------------------------------------------------ */
.zgoda { display: flex; gap: 11px; align-items: flex-start; margin-top: 18px; cursor: pointer; }
.zgoda .ptaszek { margin-top: 2px; }
.zgoda span { font-size: 11.5px; line-height: 1.65; color: rgba(145, 139, 131, .95); }
.zgoda.zle span { color: var(--skip); }

.podglad {
  border: 1px solid var(--line-soft);
  border-left: 1px solid var(--accent-soft);
  background: rgba(14, 14, 15, .38);
  padding: 20px var(--pad);
  margin-bottom: 14px;
}
.podglad .etykieta { margin-bottom: 12px; }
.podglad__tresc {
  font-size: 16px;
  line-height: 1.85;
  color: rgba(244, 241, 236, .88);
  white-space: pre-line;
}

.blad {
  color: var(--skip);
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: .04em;
  margin: 2px 0 12px;
}
.blad:empty { display: none; }

.stopka-wysylki {
  text-align: center;
  font-size: 9.5px;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 16px;
}

/* pułapka na boty — niewidoczna, ale nie `display:none`: część botów
   pomija pola całkiem ukryte, a to ma zostać wypełnione */
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------
   11. PODZIĘKOWANIE
   ------------------------------------------------------------------ */
.koniec { text-align: center; padding: 52px var(--pad) 46px; }
.koniec h1 { font-size: clamp(34px, 10vw, 44px); }
.koniec__zdanie {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(244, 241, 236, .9);
  max-width: 32ch;
  margin: 0 auto;
}
.koniec .podglad { text-align: left; margin: 30px 0 0; }

.wroc {
  display: inline-block;
  margin-top: 30px;
  font-size: 9.5px;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.wroc:hover { color: var(--cream); border-color: var(--accent); }

.sygnatura {
  text-align: center;
  margin-top: 34px;
  font-size: 9px;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: rgba(145, 139, 131, .7);
}