/* ---------------------------------------------------------------------
   KLOCKI FORMULARZY - USLUGI I ZLECENIA (wlasciciel 29.10, makiety
   uslugi-formularz u1-u3, zlecenia-formularz z1-z3, galeria pick). Jedno
   zrodlo wygladu klockow (`resources/views/fk/*`), gotowe takze dla ofert
   i wpisow. Przedrostek `fk-`. Kolory - zmienne `--z-*` z `.b12` (dwa motywy).
   Telefon jest baza; od 1024 px formularz to waska kolumna na srodku
   z guzikami pod trescia (bez przyklejenia). Bez punktiru: kafel "Galeria"
   ma linie ciagla. Promienie 8-14 px; kolo tylko tam, gdzie rysuje je makieta
   (numer wybranego pliku, przycisk wyboru).
--------------------------------------------------------------------- */
.fk{padding:12px 16px 0}
.fk [hidden]{display:none!important}
.fk .fk-nad{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--z-szary)}
.fk .fk-nad span{flex:1;min-width:0}
.fk .fk-h1{margin-top:4px;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.4px;color:var(--z-tytul)}
.fk .fk-pod{margin-top:4px;font-size:14px;line-height:1.4;font-weight:600;color:var(--z-pod)}
.fk .fk-czas{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--z-szary)}
.fk-kroki{display:flex;gap:6px;margin-top:12px}
.fk-kroki i{flex:1;height:3px;border-radius:2px;background:var(--z-pole-r)}
.fk-kroki i.on{background:linear-gradient(90deg,#F2CF68,#C99A33)}

/* "?" pomoc kroku */
.fk-pomoc{position:relative;flex:none}
.fk-pomoc>summary{list-style:none;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--z-zl);border:1px solid var(--z-ramka);background:var(--z-karta);cursor:pointer}
.fk-pomoc>summary::-webkit-details-marker{display:none}
.fk-pomoc-t{position:absolute;right:0;top:38px;z-index:30;width:min(300px,calc(100vw - 32px));padding:12px 14px;border-radius:12px;background:var(--z-karta);border:1px solid var(--z-ramka);box-shadow:0 10px 30px rgba(0,0,0,.18);letter-spacing:0;text-transform:none;font-size:13.5px;line-height:1.45;font-weight:600;color:var(--z-t)}
.fk-pomoc-t a{display:inline-block;margin-top:8px;color:var(--z-zl);font-weight:800}

/* Etykiety */
.fk .fk-et{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:18px 0 8px;font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--z-szary)}
.fk .fk-et small{font-size:10.5px;letter-spacing:.4px;text-transform:none;font-weight:700;color:var(--z-nad)}
.fk .fk-et b{color:var(--z-zl);letter-spacing:0}
.fk .fk-blad{margin-top:6px;font-size:13px;font-weight:700;color:var(--z-czer)}
.fk-pole-blad{scroll-margin-top:90px}
.fk-pole-blad .fk-chip,.fk-pole-blad .fk-in,.fk-pole-blad .fk-kafel{border-color:var(--z-czer)}
.fk .fk-nota{display:flex;gap:7px;margin-top:8px;font-size:12.5px;line-height:1.4;font-weight:600;color:var(--z-pod)}
.fk .fk-nota .fk-i{flex:none;color:var(--z-zl);margin-top:1px}

/* Pola */
.fk-in,.fk-ta{display:block;width:100%;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--z-pole-r);background:var(--z-karta);color:var(--z-tytul);font:700 16px/1.3 Manrope,system-ui,sans-serif;outline:none;min-width:0;max-width:100%}
.fk-ta{min-height:110px;padding:12px 14px;resize:vertical;font-weight:600}
.fk-in:focus,.fk-ta:focus{border-color:#C99A33;box-shadow:0 0 0 3px var(--z-zl-tlo)}
.fk-in::placeholder,.fk-ta::placeholder{color:var(--z-szary);font-weight:600}
.fk-ikpole{position:relative}
.fk-ikpole>.fk-i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--z-zl);pointer-events:none}
.fk-ikpole .fk-in{padding-left:42px}
.fk-szuk .fk-in{border:1.5px solid #D9B65A}
.fk-dwa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fk-dwa>*{min-width:0}
.fk-dwa .fk-et{margin-top:14px}
.fk-kw{display:flex;align-items:center;gap:8px}
.fk-kw .fk-in{flex:1}
.fk-kw span{font-weight:800;color:var(--z-pod)}

/* Kafle grup (4 w rzedzie) */
.fk-kafle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:359px){.fk-kafle{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fk-kafel{position:relative;min-height:76px;padding:8px 4px;border-radius:12px;border:1px solid var(--z-ramka);background:var(--z-karta);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;font-size:10.5px;line-height:1.15;font-weight:800;color:var(--z-t);cursor:pointer;hyphens:auto}
.fk-kafel .fk-i{color:var(--z-zl)}
.fk-kafel input{position:absolute;opacity:0;pointer-events:none}
.fk-kafel:has(input:checked){border:1.5px solid #C99A33;background:var(--z-zl-tlo)}
.fk-kafel:has(input:focus-visible){outline:2px solid #C99A33;outline-offset:2px}

/* Chipy (guziki wyboru) */
.fk-chipy{display:flex;flex-wrap:wrap;gap:8px}
.fk-chip{position:relative;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--z-pole-r);background:var(--z-karta);display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:800;color:var(--z-t);cursor:pointer;user-select:none}
.fk-chip input{position:absolute;opacity:0;pointer-events:none}
.fk-chip:has(input:checked){background:linear-gradient(90deg,#F2CF68,#C99A33);border-color:transparent;color:#1b1608}
.fk-chip:has(input:focus-visible){outline:2px solid #C99A33;outline-offset:2px}
.fk-chip.pilne:not(:has(input:checked)){border-color:#C99A33;color:var(--z-zl)}
.fk-chip.pilne .fk-i{color:currentColor}
.fk-chip.szary,.fk-chip:has(input:disabled){opacity:.45;cursor:not-allowed}
.fk-inne{margin-top:8px}
.fk-inne[hidden]{display:none}

/* Segment (jedna linia) */
.fk-seg{display:flex;min-height:44px;padding:3px;border-radius:12px;border:1px solid var(--z-pole-r);background:var(--z-karta)}
.fk-seg label{position:relative;flex:1 1 0;min-width:0;overflow-wrap:anywhere;display:flex;align-items:center;justify-content:center;padding:0 6px;border-radius:9px;font-size:13.5px;font-weight:800;color:var(--z-pod);text-align:center;cursor:pointer}
.fk-seg input{position:absolute;opacity:0;pointer-events:none}
.fk-seg label:has(input:checked){background:linear-gradient(90deg,#F2CF68,#C99A33);color:#1b1608}
.fk-seg label:has(input:focus-visible){outline:2px solid #C99A33}

/* Karty wyboru (format, rodzaj zlecenia) */
.fk-opcje{display:flex;flex-direction:column;gap:8px}
.fk-opcja{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--z-ramka);background:var(--z-karta);cursor:pointer}
.fk-opcja input{position:absolute;opacity:0;pointer-events:none}
.fk-opcja-ik{flex:none;width:40px;height:40px;border-radius:11px;background:var(--z-zl-tlo);color:var(--z-zl);display:flex;align-items:center;justify-content:center}
.fk-opcja-t{flex:1;min-width:0}
.fk-opcja-t b{display:block;font-size:15px;font-weight:800;color:var(--z-tytul)}
.fk-opcja-t small{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;font-weight:600;color:var(--z-pod)}
.fk-radio{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--z-pole-r)}
.fk-opcja:has(input:checked){border:1.5px solid #C99A33;background:var(--z-zl-tlo)}
.fk-opcja:has(input:checked) .fk-radio{border:7px solid #C99A33}
.fk-opcja:has(input[type=checkbox]) .fk-radio{border-radius:6px}
.fk-opcja:has(input:focus-visible){outline:2px solid #C99A33;outline-offset:2px}
.fk-opcja.szary{opacity:.5;cursor:not-allowed}
.fk-opcja.szary .fk-opcja-ik{filter:grayscale(1)}
.fk-opcja.rozp{box-shadow:0 0 0 3px var(--z-zl-tlo)}
.fk-rozp{display:flex;align-items:center;gap:8px;margin-top:8px;padding:9px 12px;border-radius:10px;background:var(--z-zl-tlo);font-size:13.5px;font-weight:700;color:var(--z-t)}
.fk-rozp[hidden]{display:none}
.fk-rozp .fk-i{color:var(--z-zl)}

/* Miejsce */
.fk-miejsce .fk-chipy+.fk-chipy{margin-top:8px}
.fk-gdzie-ja{color:var(--z-zl)}
.fk-dzielnice[hidden]{display:none}
.fk-podp{list-style:none;margin:6px 0 0;padding:4px;border-radius:12px;border:1px solid var(--z-ramka);background:var(--z-karta)}
.fk-podp[hidden]{display:none}
.fk-podp li{padding:10px 12px;border-radius:9px;font-size:15px;font-weight:700;cursor:pointer}
.fk-podp li small{margin-left:6px;font-weight:600;color:var(--z-szary)}
.fk-podp li[aria-selected=true],.fk-podp li:hover{background:var(--z-zl-tlo)}

/* Media */
.fk-media{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.fk-m{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--z-karta2) center/cover no-repeat;border:1px solid var(--z-ramka)}
.fk-m img{width:100%;height:100%;object-fit:cover;display:block}
.fk-m-dodaj{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--z-zl-tlo);border:1.5px solid #D9B65A;color:var(--z-zl);font-size:12px;font-weight:800;cursor:pointer}
.fk-m-n{position:absolute;right:5px;top:5px;width:20px;height:20px;border-radius:50%;background:#C99A33;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.fk-m-czas{position:absolute;left:5px;bottom:5px;padding:1px 5px;border-radius:5px;background:rgba(0,0,0,.6);color:#fff;font-size:10.5px;font-weight:800}
.fk-m-x{position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:8px;border:0;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center}
.fk-m-pasek{position:absolute;left:6px;right:6px;bottom:6px;height:4px;border-radius:2px;background:rgba(255,255,255,.4);overflow:hidden}
.fk-m-pasek i{display:block;height:100%;width:0;background:#F2CF68;transition:width .2s}
.fk-m.czeka::after{content:attr(data-stan);position:absolute;inset:auto 4px 14px;font-size:10px;font-weight:800;color:#fff;text-align:center;text-shadow:0 1px 2px #000}
.fk-m-dok{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;color:var(--z-zl);font-size:11px;font-weight:800;text-align:center;word-break:break-all}

/* Galeria (makieta pick) - na caly ekran */
.fk-gal{position:fixed;inset:0;z-index:1200;display:flex;flex-direction:column;background:#0d0d0f;color:#fff}
.fk-gal[hidden]{display:none}
.fk-gal-g{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px}
.fk-gal-g b{flex:1;font-size:18px;font-weight:800}
.fk-gal-g button{border:0;background:none;color:#fff;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}
.fk-gal-z{display:flex;gap:2px}
.fk-gal-z button{min-width:auto;padding:0 10px;height:32px;border-radius:9px;font:800 13px Manrope,system-ui,sans-serif;color:#cfcabf}
.fk-gal-z button.on{background:linear-gradient(90deg,#F2CF68,#C99A33);color:#15120a}
.fk-gal-s{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;align-content:start}
.fk-gal-k{position:relative;aspect-ratio:1;border:0;padding:0;background:#1d1d22 center/cover no-repeat;cursor:pointer}
.fk-gal-k img{width:100%;height:100%;object-fit:cover;display:block}
.fk-gal-k .o{position:absolute;right:7px;top:7px;width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.9);background:rgba(0,0,0,.2)}
.fk-gal-k.on .o{border:0;background:#C99A33;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.fk-gal-k .t{position:absolute;left:6px;bottom:6px;font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 3px #000}
.fk-gal-k.wyl{opacity:.35}
.fk-gal-pusto{grid-column:1/-1;padding:40px 20px;text-align:center;color:#a9a49a;font-weight:600;font-size:14px}
.fk-gal-d{display:flex;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#0d0d0f;border-top:1px solid #222}
.fk-gal-d span{flex:1;font-size:14px;font-weight:700;color:#cfcabf}
.fk-gal-d button{min-height:46px;padding:0 22px;border-radius:13px;border:0;background:linear-gradient(90deg,#F2CF68,#C99A33);color:#15120a;font:800 16px Manrope,system-ui,sans-serif}
.fk-gal-d button:disabled{opacity:.45}
.fk-gal-d .fk-gal-sys{background:none;border:1px solid #444;color:#fff;padding:0 14px}

/* Opis z mikrofonem */
.fk-opis{position:relative}
.fk-opis .fk-ta{padding-right:56px}
.fk-mik{position:absolute;right:8px;top:8px;width:42px;height:42px;border-radius:11px;border:1px solid var(--z-ramka);background:var(--z-zl-tlo);color:var(--z-zl);display:flex;align-items:center;justify-content:center}
.fk-mik.on{background:linear-gradient(90deg,#F2CF68,#C99A33);color:#15120a}
.fk-mik[hidden]{display:none}

/* Cennik pozycji */
.fk-poz{display:grid;grid-template-columns:1fr 78px 92px 40px;gap:6px;margin-top:6px}
.fk-poz .fk-in{min-height:44px;padding:0 10px}
.fk-poz-x{border:1px solid var(--z-ramka);border-radius:10px;background:var(--z-karta);color:var(--z-szary);display:flex;align-items:center;justify-content:center}
.fk-poz-dodaj{margin-top:8px;min-height:40px;border:1px solid var(--z-ramka);border-radius:10px;background:var(--z-karta);color:var(--z-zl);font:800 14px Manrope,system-ui,sans-serif;padding:0 14px;display:inline-flex;align-items:center;gap:6px}
.fk-poz-dodaj[hidden]{display:none}

/* Szkic "Kontynuowac?" i karty informacji */
.fk .fk-info{display:flex;gap:10px;margin-top:14px;padding:12px 14px;border-radius:12px;border:1px solid var(--z-zl-r);background:var(--z-zl-tlo);font-size:13.5px;line-height:1.4;font-weight:700;color:var(--z-t)}
.fk .fk-info .fk-i{flex:none;color:var(--z-zl)}
.fk .fk-info div{flex:1;min-width:0}
.fk .fk-info .fk-info-g{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.fk .fk-info .fk-info-g a,.fk-info .fk-info-g button{min-height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--z-ramka);background:var(--z-karta);color:var(--z-t);font:800 13.5px Manrope,system-ui,sans-serif;display:inline-flex;align-items:center}
.fk .fk-info .fk-info-g .zl{background:linear-gradient(90deg,#F2CF68,#C99A33);border-color:transparent;color:#15120a}
.fk .fk-info.ostrz{border-color:var(--z-czer-r);background:var(--z-czer-tlo)}
.fk .fk-info.ostrz .fk-i{color:var(--z-czer)}

/* Podglad "Tak zobacza..." */
.fk-podglad{margin:14px auto 0}
.fk .fk-podglad.b13{padding:0;min-height:0;max-width:none;margin-top:14px}
.fk-podglad .b13-u,.fk-podglad .b13-z{margin:0}
.fk-blok{margin-top:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--z-ramka);background:var(--z-karta)}
.fk .fk-blok-g{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--z-szary)}
.fk .fk-blok-g a{letter-spacing:0;text-transform:none;font-size:13.5px;color:var(--z-zl);min-height:32px;display:inline-flex;align-items:center}
.fk .fk-blok p{margin-top:4px;font-size:15px;line-height:1.4;font-weight:700;color:var(--z-tytul)}
.fk .fk-blok p small{display:block;font-size:13px;font-weight:600;color:var(--z-pod)}

/* Co dalej */
.fk .fk-dalej{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;counter-reset:fk}
.fk .fk-dalej li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--z-ramka);background:var(--z-karta);font-size:14px;line-height:1.4;font-weight:700;color:var(--z-t)}
.fk .fk-dalej li::before{counter-increment:fk;content:counter(fk);flex:none;width:26px;height:26px;border-radius:50%;background:var(--z-zl-tlo);color:var(--z-zl);display:flex;align-items:center;justify-content:center;font-weight:800}
.fk .fk-dalej li small{display:block;font-weight:600;color:var(--z-pod)}

/* Guziki na dole (nad paskiem) */
.fk-dol{position:sticky;bottom:calc(var(--tabbar-h,64px) + 6px);z-index:20;display:flex;gap:8px;margin:22px -16px 0;padding:10px 16px 4px;background:linear-gradient(180deg,transparent,var(--z-tlo) 22%)}
.fk-dol>*{flex:1;min-height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font:800 16px Manrope,system-ui,sans-serif;border:1px solid var(--z-pole-r);background:var(--z-karta);color:var(--z-tytul);cursor:pointer;text-align:center;padding:0 10px}
.fk-dol>.zl{flex:1.6;border:0;background:linear-gradient(90deg,#F2CF68,#C99A33);color:#15120a}
.fk-dol form{display:contents}

@media (min-width:1024px){
  .fk{max-width:560px;margin:0 auto;padding-top:24px}
  .fk-dol{position:static;margin:26px 0 0;padding:0;background:none}
  .fk-kafle{grid-template-columns:repeat(5,1fr)}
  .fk-gal{inset:6vh 50% auto;transform:translateX(-50%);width:560px;height:88vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
}
.us-wyb{position:relative}