/* Okno PerfoState (okno.js) - jeden wzorzec okienka na środku ekranu dla „Pomóż mi wybrać” (wybór usługi i ankieta
   planu), decyzja właściciela 12.10.2026. Tytuł w nagłówku, X w prawym górnym rogu, przyciemnione i lekko rozmyte tło,
   treść przewija się w środku okna, mieści się na 320 px. Kolor akcentu z kategorii (--kat, --kat-tlo). */
.ps-okno{width:min(640px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:8px;background:#fff;color:var(--ink, #161616);box-shadow:0 24px 64px rgb(22 22 22 / 28%);overflow:hidden}
.ps-okno[open]{display:flex;flex-direction:column;animation:ps-okno-wejscie 200ms ease-out}
.ps-okno::backdrop{background:rgb(22 22 22 / 55%);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@keyframes ps-okno-wejscie{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
/* Zamykanie (okno.js, klasa ps-okno--zamyka): to samo co otwieranie, tylko w drugą stronę, okno i tło razem. */
.ps-okno[open]::backdrop{animation:ps-okno-tlo 200ms ease-out}
.ps-okno.ps-okno--zamyka{animation:ps-okno-wyjscie 200ms ease-out forwards}
.ps-okno.ps-okno--zamyka::backdrop{animation:ps-okno-tlo-wyjscie 200ms ease-out forwards}
@keyframes ps-okno-wyjscie{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes ps-okno-tlo{from{opacity:0}to{opacity:1}}
@keyframes ps-okno-tlo-wyjscie{from{opacity:1}to{opacity:0}}
.ps-okno__glowa{display:flex;align-items:center;gap:12px;flex:none;padding:14px 14px 14px 24px;border-bottom:1px solid var(--line, #dce2e9)}
.ps-okno__ikona{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:6px;background:var(--kat-tlo, #eaf2ff);color:var(--kat, var(--action, #0068df))}
.ps-okno__ikona .ins-ikona{width:20px;height:20px}
.ps-okno__glowa h2{flex:1;min-width:0;margin:0;font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.ps-okno__glowa h2:focus{outline:none}
.ps-okno__zamknij{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--color-surface, #f6f8fb);color:var(--ink, #161616);cursor:pointer;transition:background 160ms ease}
.ps-okno__zamknij:hover{background:#e6eaf0}
.ps-okno__zamknij:focus-visible{outline:2px solid var(--focus, #0076fd);outline-offset:2px;background:#e6eaf0}
.ps-okno__tresc{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 24px 24px}
.ps-okno__wstep{margin:0 0 4px;color:var(--muted, #586477)}
.ps-okno__czeka{margin:12px 0 0;color:var(--muted, #586477)}
.ps-wybor__podsumowanie .ps-okno__czeka{margin:0}
@media(max-width:520px){
 .ps-okno__glowa{gap:10px;padding:10px 10px 10px 16px}
 .ps-okno__glowa h2{font-size:18px}
 .ps-okno__ikona{width:32px;height:32px}
 .ps-okno__tresc{padding:12px 16px 20px}
}
@media(prefers-reduced-motion:reduce){.ps-okno[open],.ps-okno[open]::backdrop,.ps-okno.ps-okno--zamyka,.ps-okno.ps-okno--zamyka::backdrop{animation:none}}