/* ── Układ strony rejestracji ──
   Bez hero z ekranu logowania: tamten czyta ustawienia konkretnego studia,
   a przy rejestracji studio jeszcze nie istnieje. */
/* dvh, nie vh: `100vh` na mobilnym Safari mierzy kadr bez paska adresu, wiec
   formularz rejestracji dostawal na dole martwy pas wysokosci tego paska. */
.pg-reg-shell { min-height:100vh; min-height:100dvh; background:var(--bg); padding:40px 20px; display:flex; justify-content:center; }
.pg-reg-box { width:100%; max-width:720px; }
.pg-reg-box-narrow { max-width:480px; }

/* ── Nagłówek ── */
.pg-reg-head { text-align:center; margin-bottom:28px; }
.pg-reg-logo { width:52px; height:52px; margin:0 auto 14px; border-radius:14px; background:var(--teal); color:var(--color-on-primary); display:flex; align-items:center; justify-content:center; font-size:24px; }
.pg-reg-title { font-size:26px; font-weight:800; color:var(--text-primary); margin:0 0 6px; }
.pg-reg-sub { font-size:14px; color:var(--text-secondary); margin:0; line-height:1.6; }

/* ── Sekcje formularza ── */
.pg-reg-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.pg-reg-section-title { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:16px; }
.pg-reg-step { width:24px; height:24px; border-radius:50%; background:var(--accent-dim); color:var(--teal); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pg-reg-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* Rytm pól daje `.form-stack` ze `style.css` (16 px) - `.pg-reg-row` jest tu
   odpowiednikiem `.field`, więc dostaje ten sam odstęp z gapu kontenera. */

.pg-reg-hint { font-size:12px; color:var(--text-secondary); margin:10px 0 0; line-height:1.5; }
.pg-reg-section-title + .pg-reg-hint { margin:-4px 0 16px; }

/* Komunikat błędu tuż pod polem, którego dotyczy. Globalny .field ma
   gap 6px, więc ujemny margines zbliża go do inputa i wyraźnie oddziela
   od podpowiedzi poniżej. */
.field > .field-error { margin-top:-3px; }
.field > .field-error + .hint { margin-top:2px; }

/* Wybór planu i zgody nie mają wrappera .field, a globalny .field-error
   jest domyślnie ukryty i odsłania go dopiero .field.has-error */
.pg-reg-section > .field-error,
.pg-reg-consents > .field-error { display:block; margin-top:6px; }

/* ── Wybór planu ──
   Na pierwszym planie 0 zł, cena planu jako informacja "potem".
   Kwota z kafelka sugerowałaby płatność już przy rejestracji. */
.pg-reg-plans { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; }
.pg-reg-plan { display:flex; flex-direction:column; gap:4px; padding:14px; border:1.5px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:border-color .15s, background .15s; }
.pg-reg-plan:hover { border-color:var(--accent-dim); }
.pg-reg-plan:has(input:checked) { border-color:var(--teal); background:var(--accent-dim); }
.pg-reg-plan input { position:absolute; opacity:0; pointer-events:none; }
.pg-reg-plan-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.pg-reg-plan-name { font-size:14px; font-weight:700; color:var(--text-primary); }
.pg-reg-plan-free { font-size:20px; font-weight:800; color:var(--teal); }
.pg-reg-plan-limits { font-size:12px; color:var(--text-primary); }
.pg-reg-plan-after { font-size:11px; color:var(--text-secondary); padding-top:6px; border-top:1px solid var(--border); margin-top:4px; }
.pg-reg-plan-after strong { color:var(--text-primary); font-weight:600; }
.pg-reg-plan:has(input:checked) .pg-reg-plan-after { border-top-color:color-mix(in srgb, var(--color-primary) 25%, transparent); }

/* Wyróżnienie okresu bezpłatnego przy tytule sekcji */
.pg-reg-free-badge { display:inline-flex; align-items:center; gap:5px; margin-left:auto; padding:3px 10px; border-radius:20px; background:var(--success-dim); color:var(--success); font-size:11px; font-weight:700; }
.pg-reg-hint-lead { margin:-4px 0 16px; font-size:13px; }
.pg-reg-hint-lead strong { color:var(--text-primary); }

/* ── Adres panelu ── */
/* `min-width: 0` na polu: bez tego element siatki flex ma automatyczna
   szerokosc minimalna rowna szerokosci wlasnej <input> (domyslne `size`
   daje okolo 177 px). Razem z przyrostkiem ".domena" (okolo 87 px) grupa
   przestaje sie miescic na ekranach 320 px i wypycha poziomy pasek
   przewijania. Na 390 px jeszcze wchodzi, ale zapasu nie ma zadnego. */
.pg-reg-subdomain { display:flex; align-items:stretch; }
.pg-reg-subdomain .input { min-width: 0; }
.pg-reg-subdomain .input { border-top-right-radius:0; border-bottom-right-radius:0; }
.pg-reg-subdomain-suffix { display:flex; align-items:center; padding:0 12px; background:var(--bg); border:1px solid var(--border); border-left:none; border-radius:0 var(--radius) var(--radius) 0; font-size:13px; color:var(--text-secondary); white-space:nowrap; }
/* Pusty status znika z układu - inaczej rezerwowałby pasek między
   polem a podpowiedzią, zanim użytkownik cokolwiek wpisze */
.pg-reg-subdomain-status, .pg-reg-status { font-size:12px; }
.pg-reg-subdomain-status:empty, .pg-reg-status:empty { display:none; }
.pg-reg-subdomain-status.free, .pg-reg-status.free { color:var(--success); }
.pg-reg-subdomain-status.taken, .pg-reg-status.taken { color:var(--danger); }
.pg-reg-subdomain-status.checking, .pg-reg-status.checking { color:var(--text-secondary); }

/* ── NIP + "Pobierz z GUS" ──
   Ten sam `min-width: 0` co przy adresie panelu: przycisk obok pola nie moze
   wypchnac poziomego przewijania na 320 px. */
.pg-reg-nip { display:flex; gap:8px; align-items:stretch; }
.pg-reg-nip .input { min-width:0; }
.pg-reg-nip .btn { flex-shrink:0; white-space:nowrap; }

/* ── Zgody ──
   Checkbox z globalnego wzorca .check-label / .check-box (style.css),
   tutaj tylko odstęp między zgodami i kolor linków. */
.pg-reg-consents { display:flex; flex-direction:column; gap:12px; }

/* Globalny `.check-label` ma `align-items: center` (style.css, w. 5300), bo
   powstal dla zgod mieszczacych sie w jednej linii. Tresc obu zgod
   rejestracji zawija sie na 390 px na dwa albo trzy wiersze i kwadracik
   wisial wtedy w polowie wysokosci akapitu, oderwany od pierwszej linii.
   Panel klienta rozwiazal to samo klasa `.pg-consent-row`
   (auth-client.css, w. 283) - tutaj wystarczy nadpisac ustawienie u zrodla. */
.pg-reg-consents .check-label { align-items: flex-start; }
.pg-reg-consents .check-box   { margin-top: 2px; }
.pg-reg-consents .check-label a { color:var(--teal); }

/* ── Wysłanie ── */
.pg-reg-submit { width:100%; height:44px; font-size:15px; justify-content:center; }
.pg-reg-login { text-align:center; font-size:13px; color:var(--text-secondary); margin:16px 0 0; }
.pg-reg-login a { color:var(--teal); font-weight:600; }
.pg-reg-login strong { color:var(--text); overflow-wrap:anywhere; }

/* ── Pole-pułapka ──
   Poza ekranem zamiast display:none: część botów pomija pola ukryte
   przez display, ale wypełnia te odsunięte pozycjonowaniem. */
.pg-reg-trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ── Ekran po rejestracji ── */
.pg-reg-done { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:36px 28px; text-align:center; }
.pg-reg-done-icon { width:60px; height:60px; margin:0 auto 18px; border-radius:50%; background:var(--success-dim); color:var(--success); display:flex; align-items:center; justify-content:center; font-size:30px; }
.pg-reg-done .pg-reg-submit { margin-top:22px; }
/* Adres panelu (`prefiks.flowla.pl`) nie ma ani jednej spacji, wiec nie ma go
   gdzie zlamac - a `subdomain` przyjmuje do 40 znakow (register.php, w. 89).
   Przy 30+ znakach napis byl szerszy niz karta na 390 px i wypychal poziomy
   pasek przewijania na CALEJ stronie po udanej rejestracji. `anywhere` to ta
   sama wartosc, ktorej projekt uzywa w kartach tabel (style.css, w. 1792). */
.pg-reg-done strong { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .pg-reg-shell { padding:24px 14px; }
  .pg-reg-row { grid-template-columns:1fr; }
  .pg-reg-section { padding:16px; }
}