/* ==========================================================================
   MOJE KONTO
   ==========================================================================
   Uklad wprost z makiety panelu profesjonalisty (docs/makiety/panel-b2b.html):
   pasek z nazwa klienta, menu kafelkowe 16 rem i tresc obok. Konto detaliczne
   i panel gabinetu to jedna strona - zakladki Vetted sa punktami koncowymi
   WooCommerce i dziedzicza ten sam uklad.

   Wpinany na stronach konta - decyduje o tym alpha_current_views().
   ========================================================================== */

.panel{padding-block:0 var(--s5)}
.panel__grid{display:grid;gap:var(--s4)}
@media(min-width:900px){
  .panel__grid{grid-template-columns:16rem minmax(0,1fr);gap:var(--s5);align-items:start}
}

/* WooCommerce ustawia menu i tresc na plywajacych kolumnach 30%/68% - to
   starsza siatka, ktora tutaj zwezala karty zamowien do jednej trzeciej
   ekranu. Uklad robi nasza siatka, wiec plywanie zdejmujemy. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content{float:none;width:auto}

/* ---------- pasek powitalny ---------- */

.panel__gora{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;
  padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s4);
}
.panel__kto{display:flex;flex-direction:column;gap:.15rem}
.panel__kto b{font-family:var(--font-display);font-size:1.35rem;font-weight:300;letter-spacing:.01em}
.panel__kto span{font-size:.85rem;color:var(--muted)}

/* ---------- menu ---------- */

/* Kafelki z ramka, a nie goła lista: ramka rysuje pole klikniecia, zanim
   ktokolwiek najedzie kursorem - a na telefonie kursora nie ma wcale. */
.panel__nav ul{display:flex;flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none}
.panel__nav li:not(.panel__grupa){display:flex}
.panel__nav li > a{flex:1}
.panel__nav a{
  display:flex;align-items:center;gap:.6rem;min-height:48px;padding:0 .8rem;
  font-size:.92rem;color:var(--ink-soft,var(--ink));
  background:#fff;border:1px solid var(--line-control);border-radius:var(--radius);
  transition:color .2s,border-color .2s,background .2s;
}
.panel__nav a:hover{color:var(--ink);border-color:var(--ink);background:var(--porcelain)}
/* Pozycja biezaca pelnym granatem - na liscie jednakowych kafelkow to jedyny
   sposob, zeby bylo widac, gdzie sie jest, bez czytania wszystkich. */
.panel__nav a[aria-current="page"],
.panel__nav .is-active > a{
  color:#fff;background:var(--navy);border-color:var(--navy);
  font-family:var(--font-display);letter-spacing:.02em;
}
.panel__nav a[aria-current="page"]:hover{color:#fff;background:var(--navy);border-color:var(--navy)}
.panel__nav .ikona{width:16px;height:16px;flex:0 0 auto}
.panel__grupa{
  font-family:var(--font-display);font-size:.63rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);padding:var(--s3) .75rem .4rem;
}
/* Wylogowanie idzie na koncu menu, ZA zakladkami B2B - inaczej wypadaloby
   w srodku listy. Odstep mowi, ze nie nalezy do grupy nad soba. */
.woocommerce-MyAccount-navigation-link--customer-logout{margin-top:var(--s3)}
/* Telefon: SIATKA dwie kolumny, nie zawijany rzad - inaczej o podziale
   decydowala dlugosc napisow i kazdy wiersz mial inna dlugosc. */
@media(max-width:899px){
  .panel__nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
  .panel__nav a{padding:.5rem .6rem;min-height:48px;font-size:.88rem}
  .panel__grupa{grid-column:1 / -1;padding:var(--s3) 0 .2rem}
  /* Wylogowanie przez oba slupki: w siatce dwoch kolumn stalo obok
     "Zostań partnerem" i przez odstep nad soba wygladalo na przesuniete. */
  .woocommerce-MyAccount-navigation-link--customer-logout{grid-column:1 / -1}
}

/* ---------- tresc ---------- */

.panel__widok > :first-child{margin-top:0}
.panel__widok .lead{color:var(--ink-soft,var(--muted));max-width:62ch;margin:0 0 var(--s4)}
.panel__widok h2{
  font-family:var(--font-display);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:400;margin:0 0 var(--s3);
}
.panel__akcje{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 0}
@media(max-width:420px){.panel__akcje .btn{width:100%}}

/* Komunikat WooCommerce o potwierdzeniu adresu ma w znacznikach przycisk
   PRZED zdaniem, ktore go tlumaczy. Kolumna odwrocona stawia zdanie na
   gorze, a przycisk pod nim - bez ruszania znacznikow rdzenia. */
.panel__widok .woocommerce-info,
.panel__widok .alert--info{
  display:flex;flex-direction:column-reverse;align-items:flex-start;gap:var(--s2);
}
.panel__widok .woocommerce-info .button{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:.6rem 1.1rem;background:none;border:1px solid var(--ink);color:var(--ink);
  font-family:var(--font-display);font-size:.72rem;letter-spacing:var(--track);text-transform:uppercase;
}
.panel__widok .woocommerce-info .button:hover{background:var(--ink);color:#fff}

/* ---------- pulpit: karty stanu ---------- */

.status-karty{display:grid;gap:var(--s3);margin:0}
@media(min-width:520px){.status-karty{grid-template-columns:repeat(2,minmax(0,1fr))}}
.status-karta{background:var(--porcelain);padding:var(--s3)}
.status-karta dt{
  font-family:var(--font-display);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.status-karta dd{margin:.3rem 0 0;font-family:var(--font-display);font-size:1.5rem;font-weight:300}
.status-karta p{margin:.2rem 0 0;font-size:.85rem;color:var(--muted)}

/* ---------- lista zamowien ---------- */

/* Karty zamiast tabeli: piec kolumn na telefonie i tak rozpada sie na
   etykiety z podpisami, a miniatury mowia, ktore to zamowienie, szybciej
   niz jego numer. */
.zamowienia{display:grid;gap:var(--s3);margin:0;padding:0;list-style:none}
.zamowienie{border:1px solid var(--line);padding:var(--s3)}
.zamowienie__gora{display:flex;flex-wrap:wrap;gap:.4rem var(--s3);align-items:baseline}
.zamowienie__numer{margin:0;font-family:var(--font-display);font-size:1.05rem;font-weight:300}
.zamowienie__numer a{color:var(--ink)}
.zamowienie__numer a{position:relative;display:inline-block}
.zamowienie__numer a:hover{text-decoration:underline;text-underline-offset:3px}
/* Pole dotyku 44 px pod samym napisem - ta sama sztuczka co w rachunku. */
.zamowienie__numer a::after{content:"";position:absolute;left:0;right:0;top:50%;translate:0 -50%;height:44px}
.zamowienie__status{
  margin:0 0 0 auto;padding:.25rem .6rem;background:var(--porcelain);
  font-family:var(--font-display);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
/* Stan, ktory czegos od klientki wymaga, dostaje kolor akcentu - reszta
   zostaje szara, zeby kolor nie stracil znaczenia. */
.zamowienie__status[data-status="on-hold"],
.zamowienie__status[data-status="pending"],
.zamowienie__status[data-status="failed"]{color:var(--ink);background:var(--blush,var(--porcelain))}
.zamowienie__meta{margin:.5rem 0 0;font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.35rem}
.zamowienie__meta b{color:var(--ink);font-weight:500}
.zamowienie__foto{display:flex;flex-wrap:wrap;gap:.4rem;margin:var(--s3) 0 0}
.zamowienie__foto span{width:56px;height:56px;background:var(--porcelain);overflow:hidden;flex:0 0 auto}
.zamowienie__foto img{width:100%;height:100%;object-fit:cover;display:block}
.zamowienie__akcje{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0 0}
.zamowienie__akcje .btn{min-height:44px;padding:.6rem 1.1rem}
.zamowienia__strony{display:flex;gap:var(--s2);margin-top:var(--s4)}

/* ---------- podglad zamowienia ---------- */

.zamowienie-stan{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);
  margin:0 0 var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line);
}
.zamowienie-stan dt{
  font-family:var(--font-display);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.3rem;
}
.zamowienie-stan dd{margin:0;font-size:.95rem}
.zamowienie-notatki{margin-top:var(--s4)}
.zamowienie-notatki ol{margin:0;padding:0;list-style:none;display:grid;gap:var(--s3)}
.zamowienie-notatki li{padding-left:var(--s3);border-left:2px solid var(--line)}
.zamowienie-notatki li p{margin:0}
.zamowienie-notatki__data{font-size:.78rem;color:var(--muted);margin-bottom:.2rem !important}

/* Rachunek na koncie nie stoi w waskiej karcie jak na podziekowaniu,
   wiec dostaje ramke, zeby nie zlewal sie z reszta strony. */
.panel__widok .rachunek{border:1px solid var(--line);padding:var(--s3)}

/* ---------- adresy ---------- */

.adresy{display:grid;gap:var(--s3)}
@media(min-width:620px){.adresy{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}}
.adres{border:1px solid var(--line);padding:var(--s3);display:flex;flex-direction:column}
.adres address{font-style:normal;line-height:1.7;margin:0;padding:0;border:0}
.adres__akcja{margin:var(--s3) 0 0}
.adres__akcja .btn{min-height:44px;padding:.6rem 1.1rem}

/* ---------- formularze konta ---------- */

/* Pole formularza to komponent .pole ze style.css (etykieta w kroju
   naglowkowym, pole 54 px) - tutaj zostaje wylacznie to, czego WooCommerce
   nie ustawia samo: plywanie wierszy i uklad w dwie kolumny. */
/* WooCommerce ustawia wiersze na plywajacych polowkach (.form-row-first
   ma 47% i float) - waga selektora rdzenia jest wyzsza niz sama klasa,
   wiec powtarzamy ja z formularzem w srodku. Uklad w dwie kolumny robi
   siatka .konto-form__pola, a nie plywanie. */
.woocommerce form.konto-form .form-row,
.woocommerce-page form.konto-form .form-row,
.konto-form .form-row{width:auto;float:none;margin:0 0 var(--s3);padding:0}
/* CLEARFIX WOOCOMMERCE ZNIKA W CALOSCI. Wtyczka wiesza na kazdym .form-row
   parę ::before/::after z 'content:" "' - relikt ukladu na float. W wierszu
   ulozonym na flexie ::before staje sie PELNOPRAWNYM ELEMENTEM: zjada jedna
   przerwe (gap) i przesuwa przycisk o 20 px w prawo, poza krawedz pol nad nim.
   Kasowalismy dotad samo ::after - i to bez skutku, bo regula wtyczki
   (.woocommerce form .form-row) ma WYZSZA specyficznosc niz nasza. Stad
   ".woocommerce" z przodu. Audyt 02.09.2026. */
.woocommerce .konto-form .form-row::before,
.woocommerce .konto-form .form-row::after{content:none}
.konto-form label .required,
.konto-form label .wymagane{color:#b3261e;margin-left:.15rem}
.konto-form label .optional{color:var(--muted);font-size:.8em}
.konto-form--waska{max-width:32rem}
@media(min-width:520px){
  .konto-form__para,
  .konto-form__pola{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s3)}
  .konto-form__pola .form-row-wide,
  .konto-form__pola .form-row-full{grid-column:1 / -1}
}
.konto-haslo{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.konto-haslo__info{margin:0 0 var(--s3);font-size:.85rem;color:var(--muted)}
.konto-adres h2{margin-bottom:var(--s3)}

/* ---------- logowanie, rejestracja, nowe haslo ---------- */

/* Jezyk formularza z makiety wniosku B2B: bez ramki wokol calosci, etykieta
   w kroju naglowkowym, pole 54 px, porcelanowa karta poboczna obok.
   Komponenty .pole i .bok-karta stoja w style.css - beda ich uzywac takze
   strony B2B, gdy powstana. */

/* PELNA SZEROKOSC KOLUMNY. Brama konta stala w 49rem, czyli konczyla sie
   380 px przed prawa krawedzia tresci - naglowek, okruszki i stopka szly do
   konca, a sama strona logowania nie. Kolumny rzadza sie teraz siatka nizej,
   a nie sztywnym ograniczeniem calosci. */
.konto-brama{max-width:none}
.konto-brama__grid{display:grid;gap:var(--s4)}
@media(min-width:900px){
  /* Formularz bierze cala wolna przestrzen, karta "Nie masz jeszcze konta?"
     stoi przy prawej krawedzi tresci. Pola ida na pelna szerokosc kolumny -
     tak samo jak we wniosku o konto profesjonalne. */
  .konto-brama__grid{grid-template-columns:minmax(0,1fr) minmax(0,21rem);gap:var(--s6);align-items:start}
}
.konto-brama__lead{margin:0 0 var(--s4)}
/* Bez ograniczenia szerokosci: pola wypelniaja kolumne, ktora i tak jest
   weższa od tresci strony o karte poboczna. */
.konto-brama__glowna .konto-form{max-width:none}

.konto-brama__pamietaj{margin-bottom:var(--s3) !important}
/* SELEKTOR Z ".woocommerce" Z PRZODU, bo wtyczka ma dla tego pola az dwie
   mocniejsze reguly (".woocommerce form .form-row label.checkbox{display:inline}"
   i ".woocommerce .woocommerce-form-login__rememberme{display:inline-block}").
   Bez tego etykieta zostawala elementem liniowym, min-height nie robilo nic
   i pole dotyku "Zapamietaj mnie" mialo na telefonie 18 px wysokosci zamiast
   44. Liczy sie tez liczba SELEKTOROW TYPU: regula wtyczki ma ich dwa
   (form, label), wiec nasza musi miec o klase wiecej. Audyt mobilny
   02.09.2026. */
.woocommerce form.konto-form .form-row label.checkbox{
  display:flex;align-items:flex-start;gap:.6rem;min-height:44px;margin:0;font-size:.9rem;
}
.woocommerce form.konto-form .form-row.konto-brama__pamietaj label.checkbox{align-items:center}
/* Zgoda marketingowa lamie sie na dwa wiersze na waskim ekranie - haczyk ma
   zostac przy pierwszym, a nie wysrodkowac sie miedzy nimi. */
.konto-form__zgoda label.checkbox input{margin-top:.15rem}
.konto-form__zgoda{margin-top:var(--s3)}
.konto-brama__pamietaj input[type="checkbox"]{width:20px;height:20px;flex:0 0 auto;accent-color:var(--ink)}

.konto-brama__wyslij{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:0 !important}
@media(max-width:420px){
  .konto-brama__wyslij{align-items:stretch;flex-direction:column;gap:var(--s2)}
  .konto-brama__wyslij .btn{width:100%}
  /* Odnosnik ma zostac szerokosci napisu - rozciagniety przez stretch
     ciagnal podkreslenie az poza formularz. */
  .konto-brama__haslo{align-self:flex-start}
}
.konto-brama__haslo{font-size:.85rem}

/* SELEKTOR Z ".bok-karta", bo sama karta ma dla akapitow regule "margin:0"
   i "p + p{margin-top:var(--s2)}" - obie mocniejsze od samej klasy. Bez tego
   przycisk "Zaloz konto" przyklejal sie do listy korzysci (0 px), a przypis
   o koncie B2B stal 12 px pod przyciskiem. */
.bok-karta p.konto-brama__bok-akcja{margin-top:var(--s4)}
.bok-karta p.konto-brama__bok-b2b{
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);font-size:.82rem;
}
.konto-brama__bok-b2b a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.konto-brama__rejestracja{
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);
}
.konto-brama__rejestracja:focus{outline:none}
.konto-brama__rejestracja h2{
  font-family:var(--font-display);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:400;margin:0 0 var(--s3);
}
/* Pola rejestracji konczyly sie 24 px przed linia oddzielajaca sekcje -
   prawa krawedz formularza nie trzymala sie zadnej innej krawedzi na stronie. */
.konto-brama__rejestracja .konto-form{max-width:100%}

/* WooCommerce oprawia formularze logowania i rejestracji wlasna ramka
   z zaokragleniem - w makiecie formularz ramki nie ma. */
.woocommerce .konto-brama form.login,
.woocommerce .konto-brama form.register,
.woocommerce .panel__widok form.lost_reset_password,
.woocommerce-page .panel__widok form.lost_reset_password{
  border:0;padding:0;border-radius:0;margin:0;
}
/* Zgoda RODO doklada WooCommerce z ustawien - nie ma jej w naszym szablonie. */
.woocommerce-privacy-policy-text{margin:0 0 var(--s3);font-size:.8rem;color:var(--muted);line-height:1.6}
.woocommerce-privacy-policy-text a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}