/* ==========================================================================
   SEKCJA B2B
   ==========================================================================
   Wniosek o konto hurtowe i zakladki panelu gabinetu. Wyglad jest TUTAJ,
   a nie we wtyczce Vetted: kolory marki, kroje i odstepy maja jedno zrodlo.
   Wtyczka od 31.08.2026 nie wozi wlasnego CSS - daje znaczniki i klasy.

   Wzory: docs/makiety/rejestracja-b2b.html i docs/makiety/panel-b2b.html.
   Wpinany na stronie z formularzem i na zakladkach B2B (alpha_current_views).
   ========================================================================== */

/* ---------- uklad wniosku ---------- */

.b2b-reg__grid{display:grid;gap:var(--s4)}
@media(min-width:1000px){
  .b2b-reg__grid{
    grid-template-columns:minmax(0,1fr) 20rem;gap:var(--s5);align-items:start;
    /* Formularz idzie przez oba wiersze prawej kolumny, wiec karta w niej
       zostaje na gorze zamiast rozciagac sie na cala wysokosc. */
    grid-template-rows:auto 1fr;
  }
  .b2b-reg__korzysci{grid-column:2;grid-row:1}
  .b2b-reg__glowna{grid-column:1;grid-row:1 / span 2}
}
.b2b-reg__naglowek{max-width:62ch;margin-bottom:var(--s4)}
.b2b-reg__lead{color:var(--ink-soft);font-size:clamp(1rem,1.5vw,1.05rem);margin:0}

/* Kroki: cyfra w kolku, zdanie obok. Opisuja obie sciezki naraz i NIE
   zmieniaja sie po wyborze - tekst nie ma sie zmieniac pod reka osobie,
   ktora wlasnie go czyta. */
.kroki-info{display:flex;flex-direction:column;gap:.7rem;margin-top:var(--s3);max-width:52ch}
.krok-info{display:flex;align-items:flex-start;gap:.7rem;font-size:.85rem;margin:0}
.krok-info b{
  flex:0 0 auto;width:1.75rem;height:1.75rem;display:grid;place-items:center;
  border:1px solid var(--line-control);border-radius:99px;
  font-family:var(--font-display);font-size:.8rem;font-weight:400;
}
.krok-info > span{color:var(--ink-soft);padding-top:.2rem}

/* ---------- formularz wniosku ---------- */

.vetted-form{max-width:44rem}
.vetted-form [hidden]{display:none !important}

/* Grupy pol oddzielone kreska - bez nich jedenascie pol pod soba czyta sie
   jak jeden ciag. Pierwsza grupa bez kreski, bo nad nia sa juz kroki. */
.b2b-grupa{
  border:0;padding:var(--s4) 0 0;margin:0;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--s3);
}
.b2b-grupa:first-of-type{border-top:0;padding-top:0}
/* Legenda domyslnie siedzi NA gornej krawedzi pola i przykrywa kreske
   oddzielajaca grupy. float robi z niej zwykly wiersz nad polami. */
.b2b-grupa legend{
  float:left;width:100%;
  font-family:var(--font-display);font-size:.72rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:var(--s2);
}
.b2b-grupa legend + *{clear:both}
.b2b-grupa--zgody{gap:var(--s2)}

/* Pole: ten sam komponent co w logowaniu i na koncie (.pole--duze) - tylko
   ze wtyczka sklada wiersze sama, wiec powtarzamy tu jego reguly zamiast
   dopisywac klasy do znacznikow, ktorych nie kontrolujemy. */
.vetted-field{display:flex;flex-direction:column;gap:.35rem}
.vetted-field > label,
.vetted-field legend{
  font-family:var(--font-display);font-size:.82rem;letter-spacing:.03em;color:var(--ink);
}
.vetted-field input[type="text"],
.vetted-field input[type="email"],
.vetted-field input[type="tel"],
.vetted-field input[type="password"]{
  min-height:54px;padding:0 1rem;font-size:.95rem;width:100%;
  border:1px solid var(--line-control);border-radius:var(--radius);background:#fff;
  transition:border-color .2s;
}
.vetted-field textarea{
  padding:.85rem 1rem;font-size:.95rem;min-height:88px;width:100%;resize:vertical;
  border:1px solid var(--line-control);border-radius:var(--radius);background:#fff;
}
.vetted-field input:hover,.vetted-field textarea:hover{border-color:var(--ink)}
/* Na telefonie pole ponizej 16 px kaze przegladarce PRZYBLIZYC strone przy
   kliknieciu w nie - formularz podskakuje i traci sie miejsce w polu. */
@media(max-width:620px){
  .vetted-field input[type="text"],
  .vetted-field input[type="email"],
  .vetted-field input[type="tel"],
  .vetted-field input[type="password"],
  .vetted-field textarea{font-size:16px}
}
.vetted-field input[type="file"]{font-size:.9rem}
.vetted-hint{font-size:.78rem;color:var(--muted);margin:0}
.vetted-req{color:#b3261e}
.vetted-opt{color:var(--muted);font-size:.8em;letter-spacing:0}
.vetted-field.has-error input,
.vetted-field.has-error textarea{border-color:#b3261e}
.vetted-field .field-error{display:flex;align-items:flex-start;gap:.4rem;font-size:.82rem;color:#b3261e;margin:0}

/* Wybor sciezki: dwa kafelki, nie dwie kropki. Ten wybor decyduje o calej
   reszcie wniosku i o tym, czy konto aktywuje sie samo. */
.vetted-field--radio fieldset{border:0;padding:0;margin:0}
.vetted-rodzaje{display:grid;gap:.6rem}
@media(min-width:560px){.vetted-rodzaje{grid-template-columns:1fr 1fr}}
.vetted-radio{
  display:flex;align-items:flex-start;gap:.7rem;padding:var(--s2) var(--s3);
  border:1px solid var(--line-control);cursor:pointer;min-height:44px;
  transition:border-color .2s,background .2s;
}
.vetted-radio:hover{border-color:var(--ink);background:var(--porcelain)}
.vetted-radio:has(input:checked){border-color:var(--ink);background:var(--porcelain)}
.vetted-radio:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:1px}
.vetted-radio input{width:22px;height:22px;margin-top:.15rem;flex:0 0 auto;accent-color:var(--ink)}
.vetted-radio b{display:block;font-family:var(--font-display);font-size:.9rem;font-weight:400;letter-spacing:.02em}
.vetted-radio span span{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem}

/* Zgody: dwa wiersze z haczykiem, tekst przypisu. */
.vetted-check{
  display:flex;gap:var(--s2);align-items:flex-start;min-height:44px;padding-block:.35rem;
  font-family:var(--text);font-size:.8rem;letter-spacing:0;color:var(--ink-soft);line-height:1.5;cursor:pointer;
}
.vetted-check input{margin-top:.2rem;width:22px;height:22px;flex:0 0 auto;accent-color:var(--ink)}
.vetted-field--checkbox{gap:0}

/* NIP i przycisk GUS w jednym wierszu. Etykieta, podpowiedz i komunikat
   stoja POZA wierszem - inaczej przycisk rownal sie do gory calego bloku,
   czyli do etykiety, a nie do pola. */
/* Wiersze wskazane WPROST, bo przycisk stoi w znacznikach za podpowiedzia -
   przy automatycznym ukladaniu ladowal pod nia zamiast obok pola. */
.vetted-field--nip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem .6rem}
.vetted-field--nip > label{grid-area:1 / 1 / 2 / -1}
.vetted-field--nip input{grid-area:2 / 1 / 3 / 2}
.vetted-field--nip .vetted-gus{grid-area:2 / 2 / 3 / 3}
.vetted-field--nip .vetted-hint{grid-area:3 / 1 / 4 / -1}
.vetted-field--nip .vetted-gus__msg{grid-area:4 / 1 / 5 / -1}
.vetted-field--nip .field-error{grid-area:5 / 1 / 6 / -1}
.vetted-gus{margin:0;display:flex;align-items:center;gap:.5rem}
@media(max-width:520px){
  .vetted-field--nip{grid-template-columns:minmax(0,1fr)}
  .vetted-field--nip input{grid-area:2 / 1 / 3 / -1}
  .vetted-field--nip .vetted-gus{grid-area:3 / 1 / 4 / -1}
  .vetted-field--nip .vetted-hint{grid-area:4 / 1 / 5 / -1}
  .vetted-field--nip .vetted-gus__msg{grid-area:5 / 1 / 6 / -1}
  .vetted-field--nip .field-error{grid-area:6 / 1 / 7 / -1}
  .vetted-gus__btn{width:100%;justify-content:center}
}
.vetted-gus__btn{
  min-height:54px;padding:0 1.1rem;border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-family:var(--font-display);font-size:.72rem;letter-spacing:var(--track);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;cursor:pointer;
}
.vetted-gus__btn:hover{background:var(--navy);border-color:var(--navy)}
.vetted-gus__btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.vetted-gus__msg{margin:0;font-size:.83rem;min-height:1.2em;color:var(--ink-soft)}
.vetted-gus__msg.is-error{color:#b3261e}
.vetted-gus__msg.is-warn{color:var(--sienna)}
.vetted-gus__spin{display:none}
.vetted-gus__spin.is-on{
  display:inline-block;width:1em;height:1em;
  border:2px solid var(--line-control);border-top-color:transparent;border-radius:50%;
  animation:vetted-spin .7s linear infinite;
}
@keyframes vetted-spin{to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){.vetted-gus__spin.is-on{animation:none}}

/* Stopka formularza: przycisk i zdanie o recznej weryfikacji. */
.b2b-form__stopka{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;margin:var(--s4) 0 0}
.b2b-form__stopka .btn{min-width:14rem}
.b2b-form__info{font-size:.8rem;color:var(--muted);flex:1 1 14rem}
@media(max-width:420px){
  .b2b-form__stopka .btn{width:100%;min-width:0}
}

/* Podsumowanie bledow nad formularzem - ten sam blok co w kasie. */
.vetted-summary{
  background:var(--porcelain);border-left:3px solid #b3261e;
  padding:var(--s3);margin:0 0 var(--s4);
}
.vetted-summary ul{margin:var(--s2) 0 0;padding:0;list-style:none;display:grid;gap:.35rem}
.vetted-summary li{position:relative;padding-left:1rem;font-size:.88rem}
.vetted-summary li::before{content:"–";position:absolute;left:0;color:var(--muted)}
.vetted-summary a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   PANEL GABINETU
   ==========================================================================
   Zakladki dokladane przez Vetted do "Mojego konta". Powloka, menu i naglowki
   sa wspolne z kontem detalicznym (account.css) - tutaj jest tylko to, co
   maja w srodku.
   ========================================================================== */

.vetted-konto > :first-child{margin-top:0}
.vetted-konto p{max-width:62ch}

/* ---------- plakietka statusu ---------- */

.vetted-status{
  display:inline-flex;align-items:center;gap:.45rem;margin:0 0 var(--s3);
  padding:.4rem .75rem;background:var(--porcelain);
  font-family:var(--font-display);font-size:.78rem;letter-spacing:.06em;
}
/* Ptaszek i zegar rysowane krawedziami - bez ikon, bo to jedyne dwa stany. */
.vetted-status::before{
  content:"";width:10px;height:6px;flex:0 0 auto;
  border-left:1.6px solid var(--navy);border-bottom:1.6px solid var(--navy);rotate:-45deg;
  translate:0 -2px;
}
.vetted-status--pending::before,
.vetted-status--rejected::before{
  width:11px;height:11px;border:1.6px solid var(--muted);border-radius:99px;rotate:0deg;translate:0 0;
}

/* ---------- dane firmy ---------- */

.vetted-dane{display:grid;gap:0;max-width:44rem;margin:0 0 var(--s3)}
.vetted-dane dt{
  font-size:.85rem;color:var(--muted);padding-top:var(--s3);
}
.vetted-dane dd{margin:0 0 0;padding-bottom:var(--s3);border-bottom:1px solid var(--line);white-space:pre-line}
@media(min-width:620px){
  .vetted-dane{grid-template-columns:12rem minmax(0,1fr)}
  .vetted-dane dt{border-bottom:1px solid var(--line);padding-bottom:var(--s3)}
  .vetted-dane dd{padding-top:var(--s3)}
}
.vetted-zrodlo{
  margin:0 0 var(--s3);padding:var(--s3);background:var(--porcelain);
  font-size:.85rem;color:var(--ink-soft);max-width:44rem;
}

/* ---------- materialy szkoleniowe ---------- */

.vetted-mat-filters ul{
  display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 var(--s4);padding:0;
}
.vetted-mat-filters a{
  display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.1rem;
  border:1px solid var(--line-control);border-radius:99px;
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);
}
.vetted-mat-filters a:hover{border-color:var(--ink);color:var(--ink)}
.vetted-mat-filters a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}

.vetted-materials{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.vetted-material{
  border:1px solid var(--line);padding:var(--s3);transition:border-color .2s;
  display:flex;flex-direction:column;gap:.35rem;
}
.vetted-material:hover{border-color:var(--line-control)}
.vetted-material h3{
  font-family:var(--font-display);font-size:.98rem;font-weight:400;letter-spacing:.02em;margin:0;
}
.vetted-material__desc{font-size:.85rem;color:var(--ink-soft)}
.vetted-material__desc p{margin:0}
.vetted-material p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
/* Plakietka rodzaju i wagi pliku: "PDF · 1,2 MB". */
.vetted-material__meta{
  font-family:var(--font-display);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:.15rem .4rem;border:1px solid var(--line-control);
}
/* WooCommerce maluje kazdy .button na szaro (.woocommerce a.button) - jego
   selektor ma wyzsza wage niz sama klasa, wiec dokladamy element. */
.vetted-material a.button,
.vetted-material .button{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 .9rem;
  border:1px solid var(--ink);background:none;color:var(--ink);
  font-family:var(--font-display);font-size:.74rem;letter-spacing:var(--track);text-transform:uppercase;
}
.vetted-material a.button:hover,
.vetted-material .button:hover{background:var(--ink);color:#fff}

/* ---------- zostan partnerem / status wniosku ---------- */

.vetted-konto--partner a.button,
.vetted-konto--wniosek a.button,
.vetted-konto--partner .button,
.vetted-konto--wniosek .button{
  display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:.9rem 1.75rem;
  background:var(--ink);color:#fff;border:0;
  font-family:var(--font-display);font-size:.78rem;letter-spacing:var(--track);text-transform:uppercase;
}
.vetted-konto--partner a.button:hover,
.vetted-konto--wniosek a.button:hover{background:var(--navy)}
.vetted-konto--partner p + p,
.vetted-konto--wniosek p + p{margin-top:var(--s3)}

/* ---------- ekran po wyslaniu wniosku ---------- */

/* Uklad z makiety: ptaszek w kolku, naglowek, dwa zdania i dwa wyjscia.
   Wczesniej bylo tu jedno zdanie w bloku komunikatu - a to jedyny ekran,
   ktory widzi kazdy, kto zlozyl wniosek. */
.potwierdzenie{max-width:46rem}
.potwierdzenie:focus{outline:none}
.potwierdzenie__ikona{
  width:56px;height:56px;display:grid;place-items:center;border-radius:99px;
  background:var(--porcelain);margin-bottom:var(--s3);
}
.potwierdzenie__ikona svg{width:26px;height:26px;stroke:var(--navy);fill:none;stroke-width:1.8}
.potwierdzenie h2{
  font-family:var(--font-display);font-size:1.35rem;font-weight:300;letter-spacing:.01em;
  margin:0 0 var(--s2);
}
.potwierdzenie p{color:var(--ink-soft);max-width:56ch;margin:0 0 var(--s2)}
.potwierdzenie__co{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}
@media(max-width:420px){
  .potwierdzenie__co{flex-direction:column;align-items:stretch}
  .potwierdzenie__co .btn{width:100%}
  .potwierdzenie__co .link-u{align-self:flex-start}
}

/* ---------- migawka odpowiedzi rejestru REGON ---------- */

/* Pokazuje sie po pobraniu danych z GUS: status wpisu, forma prawna i kody
   PKD. To na tych danych opiera sie decyzja, wiec klientka ma je widziec,
   zanim wysle wniosek. */
.migawka{
  grid-column:1 / -1;
  border:1px solid var(--line);background:var(--porcelain);padding:var(--s3);
  display:flex;flex-direction:column;gap:.6rem;
}
.migawka[hidden]{display:none}
.migawka__tytul{
  font-family:var(--font-display);font-size:.68rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);margin:0;
}
.migawka dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;font-size:.85rem;margin:0}
.migawka dt{color:var(--muted)}
.migawka dd{margin:0}
.migawka__kody[hidden]{display:none}
.migawka__pkd{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.35rem}
/* Kod z dopasowaniem do branzy dostaje obwodke w kolorze akcentu, kod
   wymagajacy oceny - szara. Kolor NIE jest jedynym nosnikiem: pod spodem
   stoi zdanie, ktore mowi to samo slowami (WCAG 1.4.1). */
.pkd{
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.04em;
  padding:.2rem .5rem;border:1px solid var(--line-control);background:#fff;color:var(--ink-soft);
}
.pkd--a{border-color:var(--akcja);color:var(--ink)}
.pkd--b{border-color:var(--ink);color:var(--ink)}
.migawka__ocena{font-size:.82rem;color:var(--ink-soft);margin:0}