/* ==========================================================================
   2-strona.pl · strona v3 A · ZAKOŃCZENIE Z KRÓTKIM ZAMÓWIENIEM
   Przycisk „Chcę projekt swojej strony” rozwija się w formularz jako jeden kształt
   (data-stan: start → formularz → wyslane). Skrypt: formularz.js.
   Miejsce na kartę jest zarezerwowane od początku, więc otwarcie niczego nie przesuwa.
   Bez skryptu formularz jest po prostu otwarty.
   ========================================================================== */

.final { position: relative; isolation: isolate; overflow: clip; background: var(--zolty-miekki); padding-block: clamp(44px, 6.6vw, 96px); }
/* miękkie koła ton w ton: gradienty promieniste z rozmytą krawędzią, bez filtrów i bez ruchu.
   Koło jest motywem strony od pierwszego ekranu; tu stoi cicho pod formularzem. */
.final-kola {
  --k1: radial-gradient(circle closest-side, var(--zolty) 0 54%, rgba(255, 212, 0, 0) 100%);
  --k2: radial-gradient(circle closest-side, var(--zolty-mgla) 0 50%, rgba(255, 244, 184, 0) 100%);
  position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    var(--k1) -8% 6% / 300px 300px no-repeat,
    var(--k2) 128% 30% / 280px 280px no-repeat,
    var(--k2) -20% 104% / 240px 240px no-repeat,
    var(--k1) 118% 100% / 220px 220px no-repeat;
}
@media (min-width: 900px) {
  .final-kola {
    background:
      var(--k1) -6vw 58% / clamp(340px, 40vw, 600px) clamp(340px, 40vw, 600px) no-repeat,
      var(--k2) calc(100% + 8vw) -38% / clamp(320px, 38vw, 560px) clamp(320px, 38vw, 560px) no-repeat,
      var(--k2) 46% 120% / clamp(220px, 24vw, 360px) clamp(220px, 24vw, 360px) no-repeat,
      var(--k1) calc(100% + 3vw) 92% / clamp(180px, 18vw, 280px) clamp(180px, 18vw, 280px) no-repeat;
  }
}
.final-uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.final-glowa { display: grid; gap: 12px; align-content: start; }
.final-tytul { font-size: clamp(44px, 6.9vw, 99px); }
.final-tekst { font-weight: 700; max-width: 22em; }
.final-obok { font-size: 17px; line-height: 1.6; font-weight: 600; }

.zamowienie { position: relative; scroll-margin-top: 16px; }
/* zanim karta się rozwinie, widać jej obrys: wiadomo, że formularz jest tutaj */
.zamowienie::before {
  content: ""; position: absolute; inset: 0; border: 2px dashed var(--atrament); border-radius: 26px;
  opacity: 0; transition: opacity .2s ease-out; pointer-events: none;
}
.zamowienie[data-stan="start"]::before { opacity: .55; }
.zam-start { position: absolute; z-index: 2; left: 18px; top: 18px; }

.zam-formularz {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: clamp(16px, 2vw, 26px); border: 2px solid var(--atrament); border-radius: 26px;
  background: var(--biel); box-shadow: 8px 8px 0 var(--atrament);
  transition: box-shadow .35s var(--wyjscie);
}
@media (max-width: 380px) { .zam-formularz { padding-inline: 12px; } }
.zamowienie[data-stan="start"] .zam-formularz, .zamowienie.morfuje .zam-formularz { box-shadow: 0 0 0 var(--atrament); }
.zamowienie[data-stan="start"] .zam-formularz { pointer-events: none; visibility: hidden; }
.js.ruch .zam-formularz > * { transition: opacity .3s ease-out, transform .5s var(--wyjscie); }
.js.ruch .zamowienie[data-stan="start"] .zam-formularz > *, .js.ruch .zamowienie.morfuje .zam-formularz > * { opacity: 0; transform: translateY(14px); transition-duration: .01s; }
.zam-formularz > :nth-child(2) { transition-delay: .04s; }
.zam-formularz > :nth-child(3) { transition-delay: .08s; }
.zam-formularz > :nth-child(4) { transition-delay: .12s; }
.zam-formularz > :nth-child(n+5) { transition-delay: .16s; }

/* ---- pola ---- */
.pole-para { display: grid; gap: 12px; }
.pole { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; align-content: start; }
/* etykieta pola: tylko ta, która stoi bezpośrednio w polu (odpowiedzi wyboru i zgoda mają własny krój) */
.pole > label:not(.zgoda), .wybor legend { padding: 0; font: 700 16px/1.3 var(--kroj-tekst); }
.wybor legend { margin-bottom: 6px; }
.wpis {
  width: 100%; min-height: 52px; padding: 0 14px;
  border: 2px solid var(--atrament); border-radius: var(--r-pole); background: var(--biel);
  font: 600 17px/1.2 var(--kroj-tekst); color: var(--atrament);
  -webkit-appearance: none; appearance: none;
  transition: box-shadow var(--czas) var(--wyjscie), transform var(--czas) var(--wyjscie), background-color var(--czas) ease-out;
}
.wpis:hover, .wpis.stan-najechany { box-shadow: 3px 3px 0 var(--atrament); }
.wpis:focus, .wpis.stan-fokus { outline: 3px solid var(--kobalt); outline-offset: 2px; box-shadow: 4px 4px 0 var(--zolty); transform: translate(-2px, -2px); }
.wpis[aria-invalid="true"], .wpis.stan-blad { background: #FFF3BF; border-style: dashed; }
.blad { display: flex; align-items: center; gap: 8px; font: 700 15px/1.3 var(--kroj-tekst); color: var(--atrament); }
.blad::before { content: "!"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--zolty); border: 2px solid var(--atrament); font: 800 14px/1 var(--kroj-tekst); }
@media (prefers-reduced-motion: no-preference) { .blad:not([hidden]) { animation: blad-w .5s var(--sprezyna) both; } }
@keyframes blad-w { from { opacity: 0; transform: translateX(-10px); } }

/* wybór sposobu kontaktu: dwie duże odpowiedzi */
.wybor-pary { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wybor-opcja {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 6px;
  min-height: 76px; padding: 8px 6px; border: 2px solid var(--atrament); border-radius: 18px;
  font: 800 15px/1.15 var(--kroj-tekst); text-align: center; text-wrap: balance; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--czas) ease-out, transform var(--czas-dotyk) ease-out;
}
.wybor-opcja:active { transform: scale(.97); }
.wybor-opcja input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wybor-ikona { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--zolty); color: var(--atrament); transition: transform var(--sprezyna-czas) var(--sprezyna); }
.wybor-ikona svg { width: 20px; height: 20px; }
.wybor-opcja:has(input:checked) { color: var(--biel); }
.wybor-opcja:has(input:checked) .wybor-ikona { transform: rotate(-10deg) scale(1.12); }
.wybor-opcja:has(input:focus-visible) { outline: 3px solid var(--kobalt); outline-offset: 3px; }
html:not(.js) .wybor-opcja:has(input:checked) { background: var(--atrament); }
.wybor-wskaznik {
  position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: calc(50% - 4px); border-radius: 18px; background: var(--atrament);
  opacity: 0; transform: translateX(0) scale(.8);
  transition: transform var(--sprezyna-czas) var(--sprezyna), opacity .2s ease-out;
}
.wybor-pary[data-wybor="telefon"] .wybor-wskaznik { opacity: 1; transform: translateX(0) scale(1); }
.wybor-pary[data-wybor="email"] .wybor-wskaznik { opacity: 1; transform: translateX(calc(100% + 8px)) scale(1); }
@media (hover: hover) { .wybor-opcja:hover .wybor-ikona { transform: rotate(-10deg) scale(1.12); } }
.wybor[aria-invalid="true"] .wybor-opcja { border-style: dashed; background: #FFF3BF; }

/* pole, które pokazuje się po wyborze */
.pole-warunkowe { grid-template-rows: 1fr; gap: 0; }
.pole-warunkowe-srodek { display: grid; gap: 6px; min-height: 0; overflow: hidden; padding: 4px 6px 8px 4px; margin: -4px -6px -8px -4px; }
.js .pole-warunkowe { transition: grid-template-rows .4s var(--wyjscie), margin-top .4s var(--wyjscie), opacity .25s ease-out, visibility 0s linear 0s; }
.js .pole-warunkowe:not(.pokazane) { grid-template-rows: 0fr; margin-top: -12px; opacity: 0; visibility: hidden; transition: grid-template-rows .32s var(--wyjscie), margin-top .32s var(--wyjscie), opacity .18s ease-out, visibility 0s linear .32s; }

.zam-uwaga { font-size: 16px; line-height: 1.4; font-weight: 600; }
.zgoda { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 48px; font-size: 16px; line-height: 1.35; font-weight: 600; cursor: pointer; }
.zgoda input { position: absolute; left: 0; top: 50%; width: 32px; height: 32px; margin: -16px 0 0; opacity: 0; cursor: pointer; }
.zgoda-kratka {
  display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--atrament); border-radius: 9px; background: var(--biel); color: var(--zolty);
  transition: background-color var(--czas) ease-out, transform var(--sprezyna-czas) var(--sprezyna);
}
.zgoda-kratka svg { width: 20px; height: 20px; transform: scale(0) rotate(-40deg); transition: transform var(--sprezyna-czas) var(--sprezyna); }
.zgoda input:checked + .zgoda-kratka, .zgoda-kratka.stan-zaznaczony { background: var(--atrament); }
.zgoda input:checked + .zgoda-kratka svg, .zgoda-kratka.stan-zaznaczony svg { transform: none; }
.zgoda input:focus-visible + .zgoda-kratka { outline: 3px solid var(--kobalt); outline-offset: 3px; }
.zgoda input[aria-invalid="true"] + .zgoda-kratka { background: #FFF3BF; border-style: dashed; }
.zgoda a { position: relative; z-index: 1; font-weight: 800; }
/* miejsce na zabezpieczenie przed robotami (do 300 x 65 px): puste nie zajmuje miejsca */
#ds-weryfikacja { min-height: 65px; max-width: 100%; }
#ds-weryfikacja:empty { display: none; }
.final .zam-wyslij { min-height: 56px; justify-content: space-between; padding-left: 22px; }
/* najwęższe telefony: przycisk wysyłki mieści się w karcie razem z kołem strzałki */
@media (max-width: 380px) { .final .zam-wyslij { padding-left: 16px; gap: 8px; font-size: 16px; } }
.zam-wyslij[aria-busy="true"] { cursor: progress; opacity: .72; }
.zam-wyslij[aria-busy="true"] .btn-kolo { animation: wyslij-kreci .9s linear infinite; }
@keyframes wyslij-kreci { to { transform: rotate(360deg); } }
.zam-drobne { font-size: 13px; line-height: 1.45; color: var(--atrament-2); }

/* ---- po wysłaniu ---- */
.zam-dziekujemy {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center;
  min-height: 345px; padding: clamp(22px, 3vw, 40px) 18px; border: 2px solid var(--atrament); border-radius: 26px;
  background: var(--biel); box-shadow: 8px 8px 0 var(--atrament); overflow: hidden; isolation: isolate;
}
.dz-odznaka { position: relative; display: grid; place-items: center; width: 116px; height: 116px; margin-bottom: 10px; }
/* miękkie żółte koło za odznaką (ten sam motyw co tło zakończenia) */
.dz-promienie {
  position: absolute; z-index: -1; left: 50%; top: 50%; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--zolty-miekki) 0 30%, rgba(255, 229, 102, 0) 100%);
}
.dz-kolo { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: var(--atrament); color: var(--zolty); box-shadow: 0 0 0 7px var(--pomarancz), 0 0 0 9px var(--atrament); }
.dz-kolo svg { width: 54px; height: 54px; }
.dz-tytul { font: 900 clamp(60px, 6.2vw, 90px)/.86 var(--kroj-plakat); text-transform: uppercase; outline: none; }
.dz-tekst { font-size: 19px; font-weight: 700; line-height: 1.35; max-width: 16em; text-wrap: balance; }
.konfetti { position: absolute; left: 50%; top: 120px; width: 12px; height: 12px; margin: -6px; border-radius: 50%; pointer-events: none; }
.konfetti-pasek { width: 8px; height: 18px; border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .zam-dziekujemy:not([hidden]) .dz-promienie { animation: dz-promienie 1.2s cubic-bezier(.1, .6, .2, 1) both; }
  .zam-dziekujemy:not([hidden]) .dz-kolo { animation: dz-wskok .9s var(--sprezyna) both .1s; }
  .zam-dziekujemy:not([hidden]) .dz-kolo svg { animation: dz-wskok .8s var(--sprezyna) both .45s; }
  .zam-dziekujemy:not([hidden]) .dz-tytul { animation: dz-wjazd .8s var(--sprezyna) both .5s; }
  .zam-dziekujemy:not([hidden]) .dz-tekst { animation: dz-wjazd .8s var(--sprezyna) both .65s; }
}
@keyframes dz-promienie { from { transform: scale(.2); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes dz-wskok { from { transform: scale(0) rotate(-50deg); } }
@keyframes dz-wjazd { from { opacity: 0; transform: translateY(40px); } }

@media (min-width: 900px) {
  .final-uklad { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 42px; align-items: start; }
  /* skok do formularza pokazuje zakończenie od jego górnej krawędzi (88 px to zapas na pasek z baza.css) */
  .zamowienie { scroll-margin-top: calc(clamp(44px, 6.6vw, 96px) - 88px); }
  .final-glowa { position: sticky; top: 120px; }
  .pole-para { grid-template-columns: 1fr 1fr; }
}