/* Sigov - formularz prośby o próbkę: okno i formularz osadzony (landing/assets/formularz.js, ADR-0431, ADR-0458).
   Własne zmienne --sf-*, bez zależności od segment.css: ten sam arkusz działa na /dla/, na stronie
   głównej i w dark.html. Kolory jasne = tokeny szablonu /dla/ (segment.css); ciemne = tokeny
   dark.html, włączane atrybutem data-sf-motyw="ciemny" na <html> (ustawia go dark.html), a nie
   preferencją systemu - ciemna strona to osobny wariant, nie tryb przeglądarki. */
:root {
  --sf-tlo: #ffffff; --sf-tlo-2: #f2f5f8; --sf-tekst: #0f1a26; --sf-przygaszony: #46566a;
  --sf-linia: #c3cdd8; --sf-akcent: #0b4da2; --sf-akcent-ciemny: #083a7c; --sf-na-akcencie: #ffffff;
  --sf-blad: #b3172e; --sf-pasek: #d2233c; --sf-cien: 0 24px 60px -20px rgba(15, 26, 38, .35);
  --sf-tlo-za: rgba(15, 26, 38, .55); --sf-promien: 6px; --sf-promien-btn: 4px;
  --sf-naglowek: Georgia, "Times New Roman", Times, serif; --sf-naglowek-waga: 400;
  --sf-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sf-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace
}
html[data-sf-motyw="ciemny"] {
  --sf-tlo: #11151e; --sf-tlo-2: #161b26; --sf-tekst: #eef1f7; --sf-przygaszony: #9aa4b8;
  --sf-linia: rgba(233, 238, 247, .16); --sf-akcent: #f0b429; --sf-akcent-ciemny: #f6c749; --sf-na-akcencie: #0b0e14;
  --sf-blad: #ff8a8a; --sf-pasek: #f0b429; --sf-cien: 0 24px 60px -20px rgba(0, 0, 0, .8);
  --sf-tlo-za: rgba(4, 6, 10, .72); --sf-promien: 12px; --sf-promien-btn: 9px;
  --sf-naglowek: var(--sf-sans); --sf-naglowek-waga: 600
}

/* Strona pod otwartym oknem nie przewija się - przewija się samo okno. */
html:has(dialog.sf[open]) { overflow: hidden }

/* .sf = wspólna karta formularza: okno (dialog.sf) i formularz osadzony w treści strony (.sf-osadzony,
   kontener [data-formularz-osadzony], landing /probka/). */
.sf {
  box-sizing: border-box; border: 1px solid var(--sf-linia); border-top: 3px solid var(--sf-pasek);
  border-radius: var(--sf-promien); background: var(--sf-tlo); color: var(--sf-tekst); box-shadow: var(--sf-cien);
  font-family: var(--sf-sans); font-size: 16px; line-height: 1.5
}
dialog.sf {
  width: min(560px, calc(100% - 32px)); max-width: none;
  max-height: calc(100% - 32px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain
}
dialog.sf::backdrop { background: var(--sf-tlo-za) }
.sf-osadzony { max-width: 720px; margin: 0 auto }
.sf *, .sf *::before, .sf *::after { box-sizing: border-box }
.sf [hidden] { display: none !important }

.sf-form, .sf-dzieki { position: relative; padding: 28px clamp(18px, 5vw, 32px) 26px }
.sf-tytul {
  margin: 0 40px 20px 0; font-family: var(--sf-naglowek); font-weight: var(--sf-naglowek-waga);
  font-size: clamp(24px, 5vw, 30px); line-height: 1.15; letter-spacing: -.01em; color: var(--sf-tekst)
}
.sf-zamknij {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: var(--sf-promien-btn); background: transparent; color: var(--sf-przygaszony);
  font-size: 26px; line-height: 1; cursor: pointer
}
.sf-zamknij:hover { background: var(--sf-tlo-2); color: var(--sf-tekst) }

.sf-pole { margin: 0 0 14px; min-width: 0 }
.sf-pole label, .sf-zgody legend, .sf-pora legend {
  display: block; margin: 0 0 5px; padding: 0; font-family: var(--sf-mono); font-size: 12px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-przygaszony)
}
.sf-podpowiedz { margin: -2px 0 6px; font-size: 13px; color: var(--sf-przygaszony) }
.sf-pole input, .sf-pole select, .sf-pole textarea {
  display: block; width: 100%; min-height: 44px; margin: 0; padding: 9px 12px;
  border: 1px solid var(--sf-linia); border-radius: var(--sf-promien-btn);
  background: var(--sf-tlo-2); color: var(--sf-tekst); font: inherit; font-size: 16px
}
.sf-pole textarea { min-height: 88px; resize: vertical; line-height: 1.45 }
.sf-pole select option { background: var(--sf-tlo); color: var(--sf-tekst) }
.sf-pole input:focus, .sf-pole select:focus, .sf-pole textarea:focus { border-color: var(--sf-akcent) }
.sf :focus-visible { outline: 2px solid var(--sf-akcent); outline-offset: 2px }
.sf-pole [aria-invalid="true"], .sf-zgoda [aria-invalid="true"] { border-color: var(--sf-blad); outline-color: var(--sf-blad) }

.sf-rzad { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px }
@media (max-width: 600px) { .sf-rzad { grid-template-columns: 1fr } }

.sf-blad { margin: 4px 0 0; font-size: 13.5px; color: var(--sf-blad) }
.sf-blad:empty { display: none }
.sf-ogolny { margin: 14px 0 0; font-size: 15px }

.sf-zgoda { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-size: 14.5px; color: var(--sf-tekst) }
.sf-zgoda input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--sf-akcent) }
.sf-zgoda label { min-width: 0; cursor: pointer }
.sf-zgoda a { color: var(--sf-akcent); text-decoration: underline; text-underline-offset: 2px }
.sf-dopisek { color: var(--sf-przygaszony) }
.sf-oddzwon { margin-top: 4px; font-weight: 600 }

.sf-pora, .sf-zgody { margin: 0 0 14px; padding: 0; border: 0; min-width: 0 }
.sf-pora { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -2px 0 16px 30px }
.sf-pora legend { width: 100%; margin-bottom: 6px }
.sf-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; cursor: pointer }
.sf-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--sf-akcent) }
.sf-zgody { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sf-linia) }
.sf-zgody legend { float: left; width: 100%; margin-bottom: 10px }
.sf-zgody legend + * { clear: both }

/* Pułapka na boty: poza ekranem, nie display:none (część botów pomija ukryte pola). */
.sf-pulapka { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden }

.sf-turnstile:empty { display: none }
.sf-turnstile { margin: 6px 0 0 }

.sf-awaria { margin: 10px 0 0 }
.sf-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px }
.sf-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 22px;
  border: 1px solid var(--sf-akcent); border-radius: var(--sf-promien-btn);
  background: var(--sf-akcent); color: var(--sf-na-akcencie); font-family: var(--sf-mono); font-size: 13px;
  font-weight: 600; letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s
}
.sf-btn:hover { background: var(--sf-akcent-ciemny); border-color: var(--sf-akcent-ciemny) }
.sf-btn:disabled { opacity: .65; cursor: progress }
.sf-btn-ghost { background: transparent; color: var(--sf-akcent) }
.sf-btn-ghost:hover { background: var(--sf-tlo-2); color: var(--sf-akcent) }
.sf-link { font-family: var(--sf-mono); font-size: 13px; font-weight: 600; color: var(--sf-akcent); text-decoration: underline; text-underline-offset: 3px }
@media (max-width: 600px) { .sf-akcje .sf-btn { width: 100% } }

.sf-dzieki { padding-top: 56px }
.sf-osadzony .sf-dzieki { padding-top: 28px }
.sf-osadzony .sf-link { display: inline-flex; align-items: center; min-height: 44px }
.sf-dzieki-tekst { margin: 0 0 22px; font-family: var(--sf-naglowek); font-size: 21px; line-height: 1.4 }
.sf-dzieki-tekst:focus { outline: none }