/* ============================================================
   FN — Design: Logowanie/Rejestracja + Potwierdzenie zamowienia
   Wlasny arkusz mu-pluginu fn-design-account.php (NIE Woodmart
   Customizer Additional CSS — parallel-safe, patrz komentarz w PHP).
   Uzywa wspolnych zmiennych --fn-* (zdefiniowanych globalnie w
   Additional CSS) z fallbackami na wypadek kolejnosci ladowania.
   ============================================================ */

/* ------------------------------------------------------------
   0. Lokalne fallbacki tokenow marki (gdyby ten plik zaladowal
   sie zanim globalne --fn-* zostana zdefiniowane).
   NAPRAWIONE 16.07.2026 (audyt kolizji CSS): poprzednia wersja pisala
   "--fn-x: var(--fn-x, fallback)" na TYM SAMYM selektorze — to
   samoreferencja, cykl zmiennej CSS => "invalid at computed-value time"
   w calym poddrzewie .fn-auth-shell/.fn-thankyou (tlo/kolory/fonty
   znikaly). Do dzis maskowane wylacznie przez pozniejszy override w
   fn-design-qa-fixes-account.php (te same wartosci, ale literalnie,
   doladowywany zaraz po tym pliku przez wp_add_inline_style). Ten plik
   teraz sam w sobie jest poprawny (literalne wartosci, bez cyklu) —
   qa-fixes-account.php nadal dziala, tylko staje sie redundantny/
   nieszkodliwy zamiast jedynym zrodlem poprawnych kolorow. */
.fn-auth-shell,
.fn-thankyou {
  --fn-primary: #A34B65;
  --fn-primary-dark: #7E3A4F;
  --fn-secondary: #2E2321;
  --fn-accent: #C9A15A;
  --fn-accent-light: #E4C989;
  --fn-bg: #FBF7F5;
  --fn-bg-soft: #F3E9E5;
  --fn-border: #DDD0CB;
  --fn-muted: #8B7D77;
  --fn-text: #2E2321;
  --fn-white: #FFFFFF;
  --fn-success: #6B8F71;
  --fn-error: #B3423F;
  --fn-font-heading: 'Playfair Display', Georgia, serif;
  --fn-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   1. LOGOWANIE / REJESTRACJA — /moje-konto/ (wylogowany)
   ============================================================ */

.fn-auth-shell {
  max-width: 1000px;
  margin: 40px auto 70px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  border: 1px solid var(--fn-border);
  background: var(--fn-white);
  overflow: hidden;
}

/* --- panel marki (lewy, ciemny) --- */
.fn-auth-brand {
  background: var(--fn-secondary);
  color: #F5EBE7;
  padding: 44px 38px;
  display: flex;
  flex-direction: column;
}

.fn-auth-logo {
  font-family: var(--fn-font-heading);
  font-weight: 600;
  font-size: 24px;
  color: #F5EBE7;
  margin-bottom: 30px;
  letter-spacing: 0.2px;
}
.fn-auth-logo span {
  color: var(--fn-primary);
}

.fn-auth-brand-title {
  font-family: var(--fn-font-heading);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  margin: 0 0 22px;
  color: #FBF7F5;
}

.fn-auth-benefits {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fn-auth-benefits li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--fn-font-body);
  font-size: 13.5px;
  color: #CDBEB7;
  line-height: 1.45;
}
.fn-auth-benefits .fn-icon-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--fn-accent);
}

/* --- panel formularza (prawy, jasny) --- */
.fn-auth-formcol {
  background: var(--fn-white);
  padding: 40px 40px 36px;
}

.fn-auth-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--fn-border);
  margin-bottom: 28px;
}
.fn-auth-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin: 0 32px 0 0;
  padding: 0 0 14px;
  font-family: var(--fn-font-body);
  font-weight: 500;
  font-size: 15px;
  text-transform: none; /* motyw domyslnie robi z kazdego <button> WERSALIKI — to sa zakladki, nie CTA */
  letter-spacing: normal;
  color: var(--fn-muted);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.fn-auth-tab:hover {
  color: var(--fn-primary);
}
.fn-auth-tab.is-active {
  color: var(--fn-secondary);
  font-weight: 600;
  border-bottom-color: var(--fn-primary);
}

/* Nagłówki natywne "Logowanie"/"Zarejestruj się" nad kazda kolumna sa
   zbedne — zastepuja je zakladki .fn-auth-tab powyzej. */
.fn-auth-formcol .wd-login-title {
  display: none;
}

/* Natywny grid Woodmart (#customer_login) ma wlasny uklad 2-kolumnowy —
   wymuszamy 1 kolumne (widoczna jest tylko jedna z .col-login/.col-register
   naraz, patrz nizej) i usuwamy separator/odstepy zaprojektowane pod 2 kol. */
.fn-auth-panes .wd-registration-page {
  max-width: none;
  margin: 0;
}
.fn-auth-panes #customer_login {
  display: block !important;
}
.fn-auth-panes #customer_login > div {
  border-inline-start: none !important;
  padding: 0 !important;
}

.fn-auth-panes .col-register {
  display: none;
}
.fn-auth-formcol.is-register-active .col-login {
  display: none;
}
.fn-auth-formcol.is-register-active .col-register {
  display: block;
}
.fn-auth-panes .col-login,
.fn-auth-panes .col-register {
  animation: fnAuthFade .3s ease;
}
@keyframes fnAuthFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- pola formularza: layout (kolory/obramowania/focus juz pokrywa
   wspolny brand.css w Additional CSS — tu tylko odstepy i typografia
   specyficzne dla tego ukladu) --- */
.fn-auth-panes .form-row {
  margin-bottom: 16px;
}
.fn-auth-panes label {
  display: block;
  font-family: var(--fn-font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fn-secondary);
  margin-bottom: 7px;
}
.fn-auth-panes .form-row-first {
  float: none;
  display: inline-block;
  width: calc(50% - 7px);
  margin-right: 14px;
}
.fn-auth-panes .form-row-last {
  float: none;
  display: inline-block;
  width: calc(50% - 7px);
  margin-right: 0;
}
.fn-auth-panes input.input-text,
.fn-auth-panes input[type="text"],
.fn-auth-panes input[type="email"],
.fn-auth-panes input[type="password"] {
  width: 100%;
  padding: 13px 14px;
  font-size: 14px;
}

/* przycisk submit na pelna szerokosc — kolory/hover juz nadaje wspolny
   brand.css (.woocommerce button.button), tu tylko wymiar/odstep */
.fn-auth-panes .form-row-btn {
  margin-top: 4px;
}
.fn-auth-panes .form-row-btn button {
  width: 100%;
  padding: 15px;
  font-size: 15px;
}

/* checkboxy (Zapamiętaj mnie / konto firmowe / zgoda RODO pluginu polski)
   — prosty, bezpieczny sposob na kolor marki bez przepisywania markupu */
.fn-auth-panes input[type="checkbox"] {
  accent-color: var(--fn-accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 8px;
}
.fn-auth-panes .fn-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 12.5px;
  color: #5b4a45;
  cursor: pointer;
}
.fn-auth-panes .woocommerce-form-login__rememberme,
.fn-auth-panes .polski-legal-checkboxes label {
  font-size: 12.5px;
  color: #5b4a45;
}

.fn-auth-panes .login-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.fn-auth-panes .lost_password {
  font-size: 12.5px;
}

/* firma / NIP */
.fn-reg-company-row {
  margin-top: 4px;
}
.fn-reg-nip-row {
  transition: opacity .15s ease;
}

/* info "haslo zostanie wyslane mailem" (bo generowanie hasla jest
   automatyczne) — stylizacja spojna z reszta formularza */
.fn-auth-panes .woocommerce-form-register > p:not([class]) {
  font-family: var(--fn-font-body);
  font-size: 12.5px;
  color: var(--fn-muted);
  line-height: 1.5;
  margin: -6px 0 16px;
}

.fn-auth-panes .woocommerce-privacy-policy-text p {
  font-size: 11.5px;
  color: var(--fn-muted);
  line-height: 1.5;
}

/* ------------------------------------------------------------
   Responsywnosc — mobile-first (ruch ~86% mobilny wg specyfikacji)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .fn-auth-shell {
    grid-template-columns: 1fr;
    margin: 16px auto 40px;
  }
  .fn-auth-brand {
    padding: 28px 24px 24px;
  }
  .fn-auth-brand-title {
    font-size: 21px;
    margin-bottom: 16px;
  }
  .fn-auth-benefits {
    gap: 10px;
  }
  .fn-auth-formcol {
    padding: 26px 20px 22px;
  }
  .fn-auth-tabs {
    margin-bottom: 20px;
  }
  .fn-auth-tab {
    font-size: 14px;
    margin-right: 24px;
    padding-bottom: 12px;
  }
}

@media (max-width: 480px) {
  .fn-auth-panes .form-row-first,
  .fn-auth-panes .form-row-last {
    width: 100%;
    margin-right: 0;
    display: block;
  }
}

/* ============================================================
   2. POTWIERDZENIE ZAMOWIENIA — thank-you (order-received)
   ============================================================ */

.fn-thankyou {
  max-width: 720px;
  margin: 50px auto 80px;
  padding: 0 24px;
  text-align: center;
}

.fn-thankyou-icon {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--fn-success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 26px;
}
.fn-thankyou-icon svg {
  width: 40px;
  height: 40px;
  color: var(--fn-white);
}

.fn-thankyou-title {
  font-family: var(--fn-font-heading);
  font-weight: 600;
  font-size: 36px;
  margin: 0 0 12px;
  color: var(--fn-secondary);
}

.fn-thankyou-sub {
  font-family: var(--fn-font-body);
  font-size: 15px;
  color: #5b4a45;
  line-height: 1.6;
  margin: 0 0 8px;
}

.fn-thankyou-ordernum {
  font-family: var(--fn-font-body);
  font-size: 13.5px;
  color: var(--fn-muted);
  margin-bottom: 34px;
}
.fn-thankyou-ordernum strong {
  color: var(--fn-primary);
  font-weight: 600;
}

.fn-thankyou-summary {
  background: var(--fn-white);
  border: 1px solid var(--fn-border);
  padding: 28px 30px;
  text-align: left;
  margin-bottom: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px;
}

.fn-summary-label {
  font-family: var(--fn-font-body);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fn-muted);
  margin-bottom: 6px;
}
.fn-summary-value {
  font-family: var(--fn-font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fn-text);
  display: flex;
  align-items: center;
  gap: 7px;
}
.fn-summary-value svg {
  width: 16px;
  height: 16px;
  color: var(--fn-primary);
  flex-shrink: 0;
}
.fn-summary-total {
  font-family: var(--fn-font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--fn-secondary);
}

.fn-thankyou-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.fn-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  font-family: var(--fn-font-body);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.fn-btn svg {
  width: 18px;
  height: 18px;
}
.fn-btn-primary {
  background: var(--fn-primary);
  color: var(--fn-white);
}
.fn-btn-primary:hover {
  background: var(--fn-primary-dark);
  color: var(--fn-white);
}
.fn-btn-outline {
  background: transparent;
  color: var(--fn-secondary);
  border-color: var(--fn-border);
  font-weight: 500;
}
.fn-btn-outline:hover {
  border-color: var(--fn-primary);
  color: var(--fn-primary);
}

@media (max-width: 576px) {
  .fn-thankyou {
    margin: 30px auto 56px;
  }
  .fn-thankyou-title {
    font-size: 27px;
  }
  .fn-thankyou-summary {
    grid-template-columns: 1fr;
    padding: 22px 20px;
    gap: 16px;
  }
  .fn-thankyou-actions {
    flex-direction: column;
  }
  .fn-btn {
    width: 100%;
    justify-content: center;
  }
}