/* robotatut.pl - formularz ogloszenia firmy (/firma/ogloszenia/nowe i /{id})

   Kolory z MOTYWU (--paper, --card, --ink, --yl, --gline), nie wpisane
   wprost: to jest ekran firmy w portalu, a portal ma jasny i ciemny
   wariant. Kroje tez z portalu (--f-display / --f-body / --f-cond) -
   makieta prosi o Archivo i Barlow, a te NIE MAJA CYRYLICY, wiec
   ukrainski i rosyjski rysowalaby czcionka systemowa telefonu.

   `--gold` jest GRADIENTEM - wolno go uzyc tylko jako tla. Do koloru
   napisu i obwodki sluzy `--yl`; w `color` czy `border` gradient
   przegladarka odrzuca cala deklaracje bez slowa w logu. */

.fm{max-width:520px;margin:0 auto;padding:0 18px 24px;color:var(--ink)}
.fm *{box-sizing:border-box}

/* ---- gora: nazwa, kroki, pasek postepu */
.fm-gora{padding:18px 0 4px}
.fm-tytul{font-family:var(--f-cond);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink2)}
.fm-kroki{display:flex;gap:6px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.fm-kroki::-webkit-scrollbar{display:none}
.fm-kroki[hidden],.fm-postep[hidden]{display:none}
.fm-krokg{flex:0 0 auto;font:600 12px/1 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;
  padding:8px 10px;border:1px solid var(--gline,var(--line));background:none;color:var(--ink2);cursor:pointer}
.fm-krokg-n{opacity:.7}
.fm-krokg[aria-pressed="true"]{background:var(--gold,var(--yl));color:var(--ctafg,#0A0A0C);border-color:transparent}
.fm-krokg.fm-krokg-blad{border-color:var(--red);color:var(--red)}
.fm-postep{display:flex;gap:4px;margin-top:10px}
.fm-postep i{flex:1;height:3px;background:var(--gline2,var(--line))}
.fm-postep i.on{background:var(--gold,var(--yl))}

/* ---- komunikaty nad formularzem */
.fm-odrzut{margin-top:14px;border:1px solid var(--red);padding:13px 14px;font-size:14px;color:var(--ink)}
.fm-odrzut b{display:block;color:var(--red);font:600 11.5px/1.3 var(--f-cond);letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:5px}
.fm-uwaga{margin-top:14px;border-left:2px solid var(--yl);background:var(--gsoft,var(--card));
  padding:12px 14px;font-size:14px;color:var(--ink2)}
.fm-uwaga-ok{border-left-color:var(--green)}
.fm-bledy{margin-top:14px;color:var(--red);font-size:14px;font-weight:600}

/* ---- krok */
.fm-krok{padding-top:8px}
/* Bez skryptu widac wszystkie kroki; ze skryptem - jeden. */
.fm[data-fm-gotowe] .fm-krok:not(.on){display:none}
.fm-glowa{padding:18px 0 4px}
.fm-k{font:600 11px/1.3 var(--f-cond);letter-spacing:.22em;text-transform:uppercase;color:var(--yl)}
.fm-glowa h1{font-family:var(--f-display);font-size:clamp(25px,7vw,32px);font-weight:800;
  letter-spacing:-.03em;line-height:1.08;margin:8px 0 0}
.fm-glowa p{color:var(--ink2);font-size:14.5px;margin:10px 0 0}
.fm-pola{padding:14px 0 4px}

.fm-l{display:block;font:600 11px/1.3 var(--f-cond);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink2);margin:18px 0 7px}
.fm-pola > .fm-l:first-child{margin-top:0}
.fm input[type=text],.fm input[type=number],.fm input[type=date],.fm textarea,.fm select{
  width:100%;padding:13px 14px;background:var(--card);border:1px solid var(--gline,var(--line));
  color:var(--ink);font:inherit;font-size:16px;border-radius:0}
.fm textarea{min-height:150px;resize:vertical;line-height:1.5}
.fm input:focus-visible,.fm textarea:focus-visible,.fm select:focus-visible{outline:2px solid var(--yl);outline-offset:0}
.fm input::placeholder,.fm textarea::placeholder{color:var(--ink2)}
.fm .fm-krotkie{max-width:140px}
.fm .fm-data{margin-top:8px;max-width:220px}
.fm-hint{color:var(--ink2);font-size:12.5px;margin-top:7px;line-height:1.45}
.fm-hint-bez-gory{margin-top:0}
.fm-blad{color:var(--red);font-size:13px;margin-top:7px;font-weight:600}

/* SIATKA, NIE FLEX: element flexu nie zwezi sie ponizej swojej tresci
   i przy 360 px wypchnalby pole za ekran. */
.fm-dwa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}

/* ---- chipy (grupy, warunki, umowa, start) */
.fm-chipy{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fm-chip{position:relative;display:inline-flex;align-items:center;font:600 12px/1.25 var(--f-cond);
  letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--gline,var(--line));
  padding:8px 11px;color:var(--ink2);background:none;cursor:pointer;max-width:100%}
.fm-chip-duzy{font-size:13px;padding:10px 12px}
.fm-chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
/* Zaznaczony chip poznaje skrypt i stawia `on`. Bez `:has()` - starsze
   telefony go nie znaja, a regula z nim w liscie przepada CALA. */
.fm-chip[aria-pressed="true"],.fm-chip.on{border-color:var(--yl);color:var(--yl);background:var(--gsoft,transparent)}
.fm-chip input:focus-visible + span{outline:2px solid var(--yl);outline-offset:3px}
/* `hidden` przegrywa z wlasnym `display` klasy - regula musi stac wprost. */
.fm-chip[hidden],.fm-gen[hidden],.fm-rynek[hidden],.fm-pasek [hidden],.fm-pyt [hidden]{display:none}

/* ---- segmenty (za co, brutto/netto) */
.fm-seg{display:flex;border:1px solid var(--gline,var(--line))}
.fm-seg label{flex:1;position:relative;cursor:pointer}
.fm-seg input{position:absolute;opacity:0;width:1px;height:1px}
.fm-seg span{display:block;padding:12px 6px;text-align:center;font:600 12px/1.2 var(--f-cond);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.fm-seg input:checked + span{background:var(--gold,var(--yl));color:var(--ctafg,#0A0A0C)}
.fm-seg input:focus-visible + span{outline:2px solid var(--yl);outline-offset:-2px}

/* ---- skala rynku */
.fm-rynek{border:1px solid var(--gline,var(--line));background:var(--card);padding:14px;margin-top:16px}
.fm-rynek-t{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.fm-rynek-t b{font-family:var(--f-display);font-weight:800;font-size:19px;
  background:var(--gtx,none);-webkit-background-clip:text;background-clip:text;color:var(--yl)}
@supports (-webkit-background-clip:text){.fm-rynek-t b{color:transparent}}
.fm-rynek-t small{color:var(--ink2);font-size:12.5px}
.fm-skala{position:relative;height:6px;background:var(--gline2,var(--line));margin:14px 0 8px}
.fm-skala i{position:absolute;top:0;bottom:0;background:var(--gold,var(--yl));opacity:.55}
.fm-skala u{position:absolute;top:-5px;width:2px;height:16px;background:var(--ink)}
.fm-skala s{position:absolute;top:-5px;width:2px;height:16px;background:var(--yl)}
.fm-skala-l{display:flex;justify-content:space-between;gap:6px;color:var(--ink2);font-size:11px}

/* ---- opis */
.fm-gen{border:1px dashed var(--gline,var(--line));padding:14px;background:var(--card)}
.fm-gen b{display:block;font-family:var(--f-display);font-weight:700;font-size:15px}
.fm-gen small{display:block;color:var(--ink2);font-size:12.5px;margin-top:4px}
.fm-gen .fm-g2{margin-top:11px}
.fm-jezyki{display:grid;gap:1px;background:var(--gline2,var(--line));border:1px solid var(--gline2,var(--line))}
.fm-jezyk{background:var(--paper);padding:11px 12px;display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.fm-jezyk b{font:600 13px/1 var(--f-cond);letter-spacing:.12em}
.fm-jezyk-t{color:var(--ink2);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-jezyk-czeka{font-style:italic}
.fm-jezyk em{font-style:normal;color:var(--green);font:600 11px/1 var(--f-cond);letter-spacing:.08em;text-transform:uppercase}
.fm-popraw{grid-column:1/-1}
.fm-popraw summary{cursor:pointer;color:var(--yl);font-size:13px;font-weight:600}
.fm-popraw input,.fm-popraw textarea{margin-top:8px}

/* ---- pytania */
.fm-pyt{position:relative;border:1px solid var(--gline,var(--line));background:var(--card);padding:12px 40px 12px 12px;margin-top:10px}
.fm-pyt-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;background:none;
  color:var(--ink2);font-size:20px;line-height:1;cursor:pointer}
.fm-pyt-d{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:8px;margin-top:8px}
.fm-pyt-d select{padding:10px}
.fm-licznik{font:600 11px/1.3 var(--f-cond);letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin-top:12px}

/* ---- podglad: prawdziwa karta, bez dzialajacych odnosnikow */
.fm-podglad-l{display:flex;align-items:center;gap:8px;margin-top:26px}
.fm-podglad-l span:last-child{font:600 11px/1.3 var(--f-cond);letter-spacing:.22em;text-transform:uppercase;color:var(--ink2)}
.fm-romb{width:7px;height:7px;background:var(--gold,var(--yl));transform:rotate(45deg);flex:0 0 auto}
.fm-podglad{margin-top:10px}
.fm-podglad a{pointer-events:none}
.fm-podglad .offer{margin:0}

.fm-notka{margin-top:18px;border-left:2px solid var(--yl);background:var(--card);padding:13px 14px;
  font-size:13.5px;color:var(--ink2)}
.fm-notka b{color:var(--ink);font-weight:600}

/* ---- pasek z guzikami: przypiety u dolu, NAD dolnym menu portalu */
.fm-pasek{position:sticky;bottom:0;z-index:50;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:18px -18px 0;padding:10px 18px calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--paper);border-top:1px solid var(--gline,var(--line))}
@media (max-width:760px){.fm-pasek{bottom:calc(66px + env(safe-area-inset-bottom,0px));padding-bottom:10px}}
@media (display-mode:standalone){.fm-pasek{bottom:calc(66px + env(safe-area-inset-bottom,0px));padding-bottom:10px}}
.fm-pasek-s{font:600 11px/1.3 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);
  flex:1 1 auto;min-width:0}
.fm-g{padding:13px 20px;background:var(--gold,var(--yl));color:var(--ctafg,#0A0A0C);border:0;cursor:pointer;
  font:800 15px/1.1 var(--f-display)}
.fm-g2{display:inline-block;padding:11px 14px;border:1px solid var(--gline,var(--line));background:none;
  color:var(--ink);cursor:pointer;font:600 12.5px/1.1 var(--f-cond);letter-spacing:.12em;text-transform:uppercase}
.fm-g[hidden],.fm-g2[hidden]{display:none}

/* ---- ekran po wyslaniu (na liscie ogloszen) */
.fm-gotowe{max-width:520px;margin:0 auto;padding:22px 0 8px;text-align:center}
.fm-gotowe-znak{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;border:1px solid var(--yl);
  display:grid;place-items:center}
.fm-gotowe-znak svg{width:28px;height:28px;fill:none;stroke:var(--yl);stroke-width:1.8}
.fm-gotowe h2{font-family:var(--f-display);font-weight:900;font-size:26px;letter-spacing:-.03em;line-height:1.1;margin:0}
.fm-gotowe > p{color:var(--ink2);margin:10px 0 0;font-size:14.5px}
.fm-karta{border:1px solid var(--gline,var(--line));background:var(--card);padding:15px;margin-top:14px;text-align:left}
.fm-karta b{display:block;font-family:var(--f-display);font-weight:700;font-size:15px}
.fm-karta small{display:block;color:var(--ink2);font-size:13px;margin-top:4px}
.fm-karta .fm-g2{margin-top:11px;text-decoration:none}

/* ---- lista ogloszen: brak stawki */
.fm-brak{display:inline-block;background:var(--brakbg,#F5D46B);color:var(--brakfg,#1A1405);font:700 11px/1.3 var(--f-cond);
  letter-spacing:.08em;text-transform:uppercase;padding:3px 7px}
.fm-brak-a{margin-left:6px;font-size:13px;font-weight:600;color:var(--yl)}
.fm-termin{display:block;font-size:12px;color:var(--ink2);margin-top:3px}
.fm .fm-data[hidden],.fm-rynek[hidden],.fm-gen[hidden],.fm-chip[hidden],.fm-pyt input[hidden]{display:none}

/* ================================================================
   TELEFON JEST BAZA (od 360 px, sprawdzane 320-430), LAPTOP OSOBNO.
   ================================================================ */

/* Palec: kazda cel dotyku ma co najmniej 44 px. */
.fm-chip,.fm-krokg,.fm-g,.fm-g2{min-height:44px}
.fm-seg span{min-height:44px;display:flex;align-items:center;justify-content:center}
.fm-pyt{padding-right:52px}
.fm-pyt-x{top:4px;right:4px;width:44px;height:44px}
.fm-popraw summary{min-height:44px;display:flex;align-items:center}
.fm-g2{display:inline-flex;align-items:center;justify-content:center}

/* Dlugie slowa (nazwa firmy, zawod, czterocyfrowa stawka) lamia sie,
   zamiast wypychac strone w bok. */
.fm-chip,.fm-karta,.fm-odrzut,.fm-uwaga,.fm-podglad{overflow-wrap:anywhere}
.fm select{text-overflow:ellipsis}

/* Na 320 px nie ma miejsca na napis stanu obok trzech guzikow -
   napis idzie w osobny wiersz, guziki dziela reszte rowno. */
@media (max-width:400px){
  .fm-pasek-s{flex-basis:100%}
  .fm-pasek .fm-g,.fm-pasek .fm-g2{flex:1 1 0;padding-left:10px;padding-right:10px}
}

/* Lista ogloszen: tabela przewija sie w swoim pudelku. */
.fm-tabela{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* Widoczny fokus z klawiatury na kazdym guziku. */
.fm-chip:focus-visible,.fm-krokg:focus-visible,.fm-g:focus-visible,.fm-g2:focus-visible,
.fm-pyt-x:focus-visible,.fm-popraw summary:focus-visible,.fm-brak-a:focus-visible{outline:2px solid var(--yl);outline-offset:2px}

/* Najechanie mysza - tylko tam, gdzie mysz jest (telefon "przykleja"
   stan hover po dotknieciu). */
@media (hover:hover){
  .fm-chip:hover,.fm-krokg:hover,.fm-g2:hover{border-color:var(--yl);color:var(--yl)}
  .fm-krokg[aria-pressed="true"]:hover{color:var(--ctafg,#0A0A0C)}
  .fm-g:hover{filter:brightness(1.08)}
  .fm-seg label:hover span{color:var(--ink)}
  .fm-karta{transition:border-color .15s}
  .fm-karta:hover{border-color:var(--yl)}
}

/* ---- LAPTOP: z lewej kroki, z prawej przypiety zywy podglad. */
@media (min-width:1024px){
  .fm{max-width:1240px;padding:0 32px 40px}
  .fm-gora,.fm-odrzut,.fm-uwaga,.fm-bledy{max-width:720px}
  .fm-glowa{padding-top:34px}
  .fm-glowa h1{font-size:48px}
  .fm-glowa p{font-size:16px;max-width:620px}
  .fm-pola{padding-top:22px}

  .fm form[data-fm-form]{display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:56px;align-items:start}
  .fm form[data-fm-form] > *{grid-column:1}
  .fm-bok{grid-column:2 !important;grid-row:1 / span 20;position:sticky;top:84px;align-self:start}
  .fm-bok .fm-podglad-l{margin-top:34px}
  .fm-pasek{grid-column:1 / -1 !important;margin:24px 0 0;padding-left:0;padding-right:0}

  .fm-gotowe{max-width:1100px}
  .fm-gotowe h2{font-size:40px}
  .fm-karty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:10px}
}
@media (min-width:1440px){
  .fm-glowa h1{font-size:56px}
  .fm form[data-fm-form]{grid-template-columns:minmax(0,1fr) 460px;column-gap:72px}
}

/* Wybor wstawki (`biz._wybor-wstawki`) ma wlasny arkusz - tu tylko cel
   dotyku w tym formularzu, bez ruszania wspolnego pliku. */
.fm .pk-pasek-guzik{min-height:44px}
.fm .fw-pusto a{display:inline-flex;align-items:center;min-height:44px}

/* "Dalej" przewija na poczatek kroku - a gorny pasek portalu jest
   przypiety, wiec bez odstepu nawigacja krokow wchodzi pod niego. */
.fm{scroll-margin-top:72px}

/* ================================================================
   JASNY MOTYW - twarde reguly wlasciciela (ciemny zostaje bez zmian).

   1. Na ZLOTEJ ZALEWCE tylko jasny napis #FFFDF6, a sama zalewka jest
      CIEMNYM zlotem. Szary napis na zlocie i jasne zloto pod tekstem
      sa w jasnym motywie zakazane.
   2. Zloto JAKO NAPIS - wylacznie pelne #7E5C0C, bez gradientu: jasny
      koniec gradientu na papierze daje 2.1:1.
   3. Podpisy wersalikami - `--ink2`, nie jasniej.

   Nazwy zmiennych sa PORTALU (--paper, --card, --yl, --gold, --gtx...),
   a wartosci z listy wlasciciela. Stoja na kontenerach tej strony, bo
   `gold.css` jest wspolny - jego zmiana idzie do sesji motywu.
   `--gtx` zostaje GRADIENTEM z dwoch takich samych barw: karta oferty
   (`.rate`) rysuje go przez `background-clip:text` przy `color:transparent`,
   wiec `none` zrobiloby kwote NIEWIDZIALNA.
   ================================================================ */
:root:not([data-theme="dark"]) .fm,
:root:not([data-theme="dark"]) .fm-lista{
  --paper:#F4F1E8; --card:#FFFEFB; --bg3:#F7F3E8;
  --ink:#14130F; --ink2:#5A5446;
  --line:rgba(126,92,12,.45); --gline:rgba(126,92,12,.45); --gline2:rgba(20,19,15,.14);
  --yl:#7E5C0C; --goldt:#7E5C0C;
  --gold:linear-gradient(135deg,#6E5008,#8A6510); --goldbtn:linear-gradient(135deg,#6E5008,#8A6510);
  --gtx:linear-gradient(#7E5C0C,#7E5C0C);
  --ctafg:#FFFDF6;
  --gsoft:#F7F3E8;
  --green:#0C7743; --red:#A32116;
  --brakbg:linear-gradient(135deg,#6E5008,#8A6510); --brakfg:#FFFDF6;
}
/* Napis na zlotym przycisku ma jeden kolor - takze po najechaniu. */
:root:not([data-theme="dark"]) .fm-g,
:root:not([data-theme="dark"]) .fm-g:hover{color:#FFFDF6}
/* Pole wyboru i placeholder: ten sam poziom co tekst drugiego rzedu. */
:root:not([data-theme="dark"]) .fm input::placeholder,
:root:not([data-theme="dark"]) .fm textarea::placeholder{color:#5A5446;opacity:1}

/* Obwodka POLA I GUZIKA niesie granice elementu, wiec ma 3:1 do tla
   (norma WCAG dla granic). Ozdobne kreski (`--gline`) zostaja lekkie. */
.fm{--fm-obw:rgba(212,175,55,.6)}
:root:not([data-theme="dark"]) .fm{--fm-obw:rgba(126,92,12,.8)}
.fm input[type=text],.fm input[type=number],.fm input[type=date],.fm textarea,.fm select,
.fm-chip,.fm-krokg,.fm-g2,.fm-seg{border-color:var(--fm-obw)}
.fm-chip[aria-pressed="true"],.fm-chip.on{border-color:var(--yl)}
.fm-krokg[aria-pressed="true"]{border-color:transparent}
.fm-lista .fm-g2{border-color:var(--fm-obw,rgba(212,175,55,.6))}
.fm-lista{--fm-obw:rgba(212,175,55,.6)}
:root:not([data-theme="dark"]) .fm-lista{--fm-obw:rgba(126,92,12,.8)}

/* Jasny motyw na liscie ogloszen i w pasku wstawki: zlota zalewka -
   ciemne zloto z jasnym napisem, zloty napis - pelne #7E5C0C. */
:root:not([data-theme="dark"]) .fm-lista .btn-y,
:root:not([data-theme="dark"]) .fm-lista .st.active,
:root:not([data-theme="dark"]) .fm-lista .st.moderacja,
:root:not([data-theme="dark"]) .fm-lista .st.pending{
  background:linear-gradient(135deg,#6E5008,#8A6510);color:#FFFDF6;border-color:#6E5008}
:root:not([data-theme="dark"]) .fm .pk-pasek-guzik{color:#7E5C0C;border-color:#7E5C0C}
:root[data-theme="dark"] .fm .pk-pasek-guzik{color:var(--yl)}