/* =========================================================================
   ta-login.css · Widok 01 · Logowanie i rejestracja
   WooCommerce: myaccount/form-login.php (nadpisanie w motywie potomnym Flatsome)
   Kolejność ładowania: ta-fonts.css → ta-tokens.css → ta-login.css

   Breakpointy liczone od SZEROKOŚCI KONTENERA .ta-auth (container queries).
   Przy szablonie strony pełnej szerokości = szerokość okna.
     < 700 px     telefon  (makieta 390)  · 1 kolumna, style mobilne
     700–849 px   tablet   (makieta 834)  · 2 kolumny, style mobilne
     ≥ 850 px     desktop  (makieta 1440) · 2 kolumny, style desktopowe
   Plik jest mobile-first: najpierw wartości telefonu, niżej nadpisania.

   Specyficzność: każdy selektor zaczyna się od .ta-auth (min. 0,2,0),
   więc wygrywa z regułami Flatsome dla input/label/button/h1/h2/a
   bez użycia !important. Nie dodawaj !important.
   ========================================================================= */

/* ---------- 0. Kontener i reset w obrębie widoku ---------- */
.ta-auth {
  container: ta-auth / inline-size;
  width: 100%;
  font-family: var(--ta-font);
  color: var(--ta-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.ta-auth *,
.ta-auth *::before,
.ta-auth *::after { box-sizing: border-box; }
.ta-auth p { margin: 0; }
.ta-auth svg { display: block; flex: none; }

/* ---------- A. Sekcja (siatka) ---------- */
.ta-auth .ta-auth__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 28px 16px 56px;
}
.ta-auth .ta-auth__grid--single { grid-template-columns: minmax(0, 1fr); }

/* ---------- D. Komunikaty WooCommerce (błąd / sukces / info) ---------- */
.ta-auth .ta-auth__notices { padding: 28px 16px 0; }
.ta-auth .ta-auth__notices:not([hidden]) + .ta-auth__grid { padding-top: 16px; }
.ta-auth .ta-auth__notices .woocommerce-notices-wrapper { display: flex; flex-direction: column; gap: 10px; }
.ta-auth .ta-auth__notices .woocommerce-notices-wrapper:empty { display: none; }
.ta-auth .ta-auth__notices .woocommerce-error,
.ta-auth .ta-auth__notices .woocommerce-message,
.ta-auth .ta-auth__notices .woocommerce-info {
  display: block;
  margin: 0;
  padding: 14px 18px;
  list-style: none;
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-radius-sm);
  background: var(--ta-cream);
  box-shadow: none;
  font: 500 14px/1.5 var(--ta-font);
  text-align: left;
  color: var(--ta-ink);
}
.ta-auth .ta-auth__notices .woocommerce-error { color: var(--ta-error); }
.ta-auth .ta-auth__notices .woocommerce-message { color: var(--ta-green); }
.ta-auth .ta-auth__notices li { margin: 0; padding: 0; list-style: none; }
.ta-auth .ta-auth__notices li + li { margin-top: 6px; }
.ta-auth .ta-auth__notices strong { font-weight: 600; }
.ta-auth .ta-auth__notices a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ta-auth .ta-auth__notices .woocommerce-error::before,
.ta-auth .ta-auth__notices .woocommerce-message::before,
.ta-auth .ta-auth__notices .woocommerce-info::before { content: none; display: none; }
/* Flatsome: własny markup komunikatów (message-wrapper / message-container / message-icon) */
.ta-auth .ta-auth__notices .message-container { max-width: none; margin: 0; padding: 0; text-align: left; color: inherit; }
.ta-auth .ta-auth__notices .message-icon,
.ta-auth .ta-auth__notices .message-container > i { display: none; } /* Regalia: Flatsome 3.20 wstawia ikonę sukcesu jako <i class="icon-checkmark"> */
/* Regalia: WooCommerce przenosi fokus na komunikat (tabindex="-1", czytnik ekranu go odczyta). To nie jest kontrolka,
   więc bez obrysu fokusu przeglądarki (inaczej niebieska ramka wokół pudełka D). */
.ta-auth .ta-auth__notices [tabindex="-1"]:focus { outline: none; }

/* ---------- B / C. Panele ---------- */
.ta-auth .ta-auth__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 24px 18px;
  border: 0;
  border-radius: var(--ta-radius-md);
}
.ta-auth .ta-auth__panel--login { background: var(--ta-white); }
.ta-auth .ta-auth__panel--register { background: var(--ta-sand); }

/* Regalia: WooCommerce (atrybucja zamówień) wstawia do formularza rejestracji pusty element
   z ukrytymi polami. W kolumnie flex dokładałby drugi odstęp (gap) między C3 a C4.
   display: none nie blokuje wysyłki ukrytych pól. */
.ta-auth .ta-auth__panel > wc-order-attribution-inputs { display: none; }

/* B1 / C1. Nagłówki */
.ta-auth .ta-auth__title {
  width: auto;
  margin: 0;
  padding: 0;
  font: 300 28px/1.15 var(--ta-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ta-ink);
}
.ta-auth .ta-auth__panel--register .ta-auth__title { font-size: 26px; }

/* B2 / B3 / C3. Pola tekstowe */
.ta-auth .ta-auth__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.ta-auth .ta-auth__label {
  display: block;
  margin: 0;
  padding: 0;
  font: 500 12.5px/20px var(--ta-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ta-ink);
}
.ta-auth .ta-auth__input {
  display: block;
  width: 100%;
  max-width: none;
  height: 52px;                  /* łącznie z obramowaniem (box-sizing: border-box) */
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-radius-sm);
  background: var(--ta-white);
  box-shadow: none;
  outline: none;
  font: 400 16px/1.5 var(--ta-font);   /* 16 px na mobile: iOS nie powiększa strony przy focusie */
  letter-spacing: 0;
  color: var(--ta-ink);
  -webkit-appearance: none;
  appearance: none;
  transition: none;
}
.ta-auth .ta-auth__input::placeholder { color: var(--ta-placeholder); opacity: 1; }
.ta-auth .ta-auth__input:focus { border-color: var(--ta-green); box-shadow: none; outline: none; }
.ta-auth .ta-auth__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--ta-white) inset;
  -webkit-text-fill-color: var(--ta-ink);
}
.ta-auth .ta-auth__panel--register .ta-auth__input { border-color: var(--ta-border-sand); }
/* Regalia: Flatsome ma .woocommerce-form input[type="password"] { padding: 0 2em 0 .75em } (0,2,1), co wygrywa z .ta-auth .ta-auth__input (0,2,0). */
.ta-auth .ta-auth__input[type="password"] { padding: 0 14px; }
.ta-auth .ta-auth__panel--register .ta-auth__input:focus { border-color: var(--ta-green); }

/* B4 / B5. Wiersz: Zapamiętaj mnie + Nie pamiętasz hasła? */
.ta-auth .ta-auth__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font: 400 13.5px/20px var(--ta-font);
  color: var(--ta-ink);
}
.ta-auth .ta-auth__check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;              /* pole dotyku na telefonie */
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ta-ink);
  cursor: pointer;
}
.ta-auth .ta-auth__checkbox {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--ta-green);
  cursor: pointer;
}
.ta-auth .ta-auth__link {
  color: var(--ta-green);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .2s ease;
}
.ta-auth .ta-auth__link:hover { color: var(--ta-rust); }

/* B6 / C5. Przyciski */
.ta-auth .ta-auth__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: none;
  height: 52px;
  min-height: 0;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: var(--ta-radius-sm);
  box-shadow: none;
  text-shadow: none;
  font: 500 13px/1.5 var(--ta-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ta-auth .ta-auth__btn--primary {
  background-color: var(--ta-green);
  background-image: none;
  color: var(--ta-white);
  transition: background-color .25s ease;
}
.ta-auth .ta-auth__btn--primary:hover { background-color: var(--ta-green-hover); color: var(--ta-white); }
.ta-auth .ta-auth__btn--register {
  background-color: var(--ta-rust);
  background-image: none;
  color: var(--ta-white);
  transition: background-color .25s ease;
}
.ta-auth .ta-auth__btn--register:hover { background-color: var(--ta-rust-hover); color: var(--ta-white); }

/* B7. Separator „lub” */
.ta-auth .ta-auth__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font: 400 13px/20px var(--ta-font);
  color: var(--ta-ink-muted);
}
.ta-auth .ta-auth__divider::before,
.ta-auth .ta-auth__divider::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--ta-line);
}

/* B8. Logowanie przez Google / Facebook */
.ta-auth .ta-auth__social { display: flex; flex-wrap: wrap; gap: 10px; }
.ta-auth .ta-auth__social-btn {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-radius-sm);
  background: var(--ta-white);
  font: 500 14px/1.5 var(--ta-font);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ta-ink);
  cursor: pointer;
  transition: border-color .2s ease;
}
.ta-auth .ta-auth__social-btn:hover { border-color: var(--ta-ink); color: var(--ta-ink); }
.ta-auth .ta-auth__social-btn svg { width: 18px; height: 18px; }

/* B9. Notka o zakupach bez konta */
.ta-auth .ta-auth__note {
  font: 400 12.5px/1.6 var(--ta-font);
  text-align: center;
  color: var(--ta-ink-muted);
}

/* C2. Lista korzyści */
.ta-auth .ta-auth__benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 13.5px/1.45 var(--ta-font);
  color: var(--ta-ink);
}
.ta-auth .ta-auth__benefit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ta-auth .ta-auth__benefit-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--ta-green);
}
.ta-auth .ta-auth__icon-check { width: 18px; height: 18px; }
.ta-auth .ta-auth__icon-check-sm { display: none; width: 11px; height: 11px; }

/* C4. Zgoda */
.ta-auth .ta-auth__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  font: 400 12.5px/1.55 var(--ta-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ta-ink);
  cursor: pointer;
}
.ta-auth .ta-auth__consent .ta-auth__checkbox { margin-top: 1px; }
.ta-auth .ta-auth__consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.ta-auth .ta-auth__consent a:hover { color: var(--ta-rust); }

/* Fokus z klawiatury (tylko :focus-visible, mysz go nie pokazuje) */
.ta-auth .ta-auth__btn:focus-visible,
.ta-auth .ta-auth__social-btn:focus-visible,
.ta-auth .ta-auth__link:focus-visible,
.ta-auth .ta-auth__consent a:focus-visible,
.ta-auth .ta-auth__checkbox:focus-visible {
  outline: 2px solid var(--ta-green);
  outline-offset: 2px;
}

/* ---------- Tablet: 700–849 px ---------- */
@container ta-auth (min-width: 700px) {
  .ta-auth .ta-auth__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-right: 32px;
    padding-left: 32px;
  }
  .ta-auth .ta-auth__grid--single {
    grid-template-columns: minmax(0, 544px);
    justify-content: center;
  }
  .ta-auth .ta-auth__notices { padding-right: 32px; padding-left: 32px; }
}

/* ---------- Desktop: ≥ 850 px ---------- */
@container ta-auth (min-width: 850px) {
  .ta-auth .ta-auth__grid {
    box-sizing: content-box;
    max-width: 1120px;
    margin: 0 auto;
    padding: 64px 40px 104px;
    gap: 32px;
    align-items: stretch;          /* oba panele mają równą wysokość */
  }
  .ta-auth .ta-auth__notices {
    box-sizing: content-box;
    max-width: 1120px;
    margin: 0 auto;
    padding: 64px 40px 0;
  }
  .ta-auth .ta-auth__notices:not([hidden]) + .ta-auth__grid { padding-top: 24px; }

  .ta-auth .ta-auth__panel { gap: 18px; padding: 44px; }
  .ta-auth .ta-auth__panel--register { background: var(--ta-beige); }

  .ta-auth .ta-auth__title,
  .ta-auth .ta-auth__panel--register .ta-auth__title {
    margin-bottom: 6px;
    font-size: 36px;
    line-height: 1.1;
  }

  .ta-auth .ta-auth__field { gap: 8px; }
  .ta-auth .ta-auth__label { font-size: 13px; }
  .ta-auth .ta-auth__input { padding: 0 16px; font-size: 15px; }
  .ta-auth .ta-auth__input[type="password"] { padding: 0 16px; }
  .ta-auth .ta-auth__panel--register .ta-auth__input { border-color: var(--ta-border); }

  .ta-auth .ta-auth__row { gap: 8px 16px; font-size: 14px; line-height: 21px; }
  .ta-auth .ta-auth__check { min-height: 0; }
  .ta-auth .ta-auth__checkbox { width: 16px; height: 16px; }

  .ta-auth .ta-auth__btn { height: 54px; }
  .ta-auth .ta-auth__btn--primary { margin-top: 6px; }
  .ta-auth .ta-auth__social-btn { height: 50px; }
  .ta-auth .ta-auth__note { font-size: 13px; }

  .ta-auth .ta-auth__benefits { gap: 12px; margin-bottom: 6px; font-size: 15px; line-height: 1.5; }
  .ta-auth .ta-auth__benefit { gap: 12px; }
  .ta-auth .ta-auth__benefit-icon {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--ta-green);
    color: var(--ta-white);
  }
  .ta-auth .ta-auth__icon-check { display: none; }
  .ta-auth .ta-auth__icon-check-sm { display: block; }

  .ta-auth .ta-auth__consent { font-size: 13px; line-height: 1.5; color: var(--ta-ink-muted); }
  .ta-auth .ta-auth__consent .ta-auth__checkbox { margin-top: 3px; }

  /* C5 na desktopie: obrys + wypełnienie przesuwane od lewej na hover */
  .ta-auth .ta-auth__btn--register {
    margin-top: auto;              /* przycisk dociśnięty do dołu panelu */
    padding: 0 30px;
    border: 1px solid var(--ta-green);
    background-color: transparent;
    background-image: linear-gradient(var(--ta-green), var(--ta-green));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    color: var(--ta-green);
    transition: background-size .45s var(--ta-ease), color .3s ease;
  }
  .ta-auth .ta-auth__btn--register:hover {
    background-color: transparent;
    background-size: 100% 100%;
    color: var(--ta-white);
  }
}

/* Ograniczony ruch: bez animacji wypełnienia */
@media (prefers-reduced-motion: reduce) {
  .ta-auth .ta-auth__btn,
  .ta-auth .ta-auth__social-btn,
  .ta-auth .ta-auth__link { transition: none; }
}