/* ==========================================================================
   Modal logowania - JEDEN wyglad dla portalu i marketplace'u.
   ==========================================================================
   Zrodlo: zeglarski/styles.css (blok .authmodal / .authform / .authsocial).
   Ten plik jest KOPIA tamtego bloku wyciagnieta dla stron, ktore nie ladują
   calego arkusza portalu - dzis marketplace pod /ogloszenia. Skrypt jest ten
   SAM plik (/auth.js), wiec zachowanie nie moze sie rozjechac; rozjechac moze
   sie tylko wyglad, dlatego zmieniajac modal w portalu popraw takze ten plik.

   TOKENY definiujemy lokalnie na .authmodal zamiast polegac na zmiennych
   strony-gospodarza. Powod jest konkretny: marketplace ma wlasne :root, w
   ktorym --red to PRAWDZIWA czerwien (#c11f12), a w portalu ta sama nazwa
   znaczy niebieski akcent. --red-dark i --bg-soft nie istnieja tam wcale.
   Bez tego bloku modal renderowalby sie w obcych kolorach albo z brakami.
   ========================================================================== */
.authmodal {
  --navy: #0a2540;
  --ink: #16202c;
  --muted: #5d6b7a;
  --line: #e4e8ee;
  --blue: #2f6cb0;
  --red-dark: #1160b8;
  --bg: #ffffff;
  --bg-soft: #f5f7fa;
}

.authmodal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; }
.authmodal__backdrop { position: fixed; inset: 0; background: rgba(8,18,32,.55); backdrop-filter: blur(2px); }
/* Popover celowo MOWI TYM SAMYM JEZYKIEM co podstrona /logowanie (partial
   auth-style.ejs w CMS): karta 14 px z miekkim cieniem, pola 8 px z ramka
   #cfd5db i granatowym fokusem, granatowy przycisk na cala szerokosc,
   separator wersalikami. Uzytkownik widzi oba ekrany wymiennie - roznice
   w wygladzie czytaly sie jak dwa rozne serwisy. Przy zmianach tutaj
   aktualizuj tez tamten partial (i odwrotnie). */
.authmodal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 460px; background: #fff; border: 1px solid #e6eaef;
  border-radius: 14px; box-shadow: 0 24px 70px -20px rgba(10,37,64,.45); padding: 32px; max-height: 92vh; overflow-y: auto;
  animation: authpop .18s ease;
}
@keyframes authpop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.authmodal__x {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; background: transparent;
  cursor: pointer; font-size: 26px; line-height: 1; color: var(--faint); border-radius: 999px;
}
.authmodal__x:hover { background: var(--bg-soft); color: var(--navy); }
.authmodal__tabs { display: flex; gap: 4px; background: #eef1f4; padding: 4px; border-radius: 8px; margin-bottom: 22px; }
.authmodal__tab {
  flex: 1; padding: 10px; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--muted); border-radius: 6px;
}
.authmodal__tab.is-active { background: #fff; color: #0a2540; box-shadow: 0 2px 8px -3px rgba(10,37,64,.35); }
.authmodal__title { margin: 0 0 6px; font-size: 24px; color: var(--navy); }
/* Logowanie spoleczne: neutralne biale przyciski z logotypem - wytyczne obu
   marek zabraniaja przemalowywania znaku, wiec kolor niesie sam logotyp. */
.authsocial { margin: 0 0 18px; }
.authsocial__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px 16px; margin-bottom: 10px; border: 1px solid #cfd5db; border-radius: 8px; background: #fff; color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .1s; }
.authsocial__btn:hover { border-color: #0a2540; box-shadow: 0 6px 16px -10px rgba(10,37,64,.4); }
.authsocial__btn:active { transform: translateY(1px); }
.authsocial__btn svg { flex: 0 0 auto; }
.authsocial__terms { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; }
.authsocial__terms a { color: var(--muted); text-decoration: underline; }
.authsocial__sep { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; color: #8a939e; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.authsocial__sep::before, .authsocial__sep::after { content: ""; flex: 1; height: 1px; background: #e6eaef; }
.authmodal__sub { margin: 0 0 18px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.authmodal__error {
  margin: 0 0 16px; padding: 10px 12px; background: #fdeaea; border-radius: 8px;
  color: #a33; font-size: 13.5px; font-weight: 500;
}
.authform { display: flex; flex-direction: column; gap: 14px; }
.authfield { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.authfield input {
  font-family: inherit; font-size: 15px; font-weight: 400; color: var(--ink); padding: 9px 11px;
  border: 1px solid #cfd5db; border-radius: 8px; background: #fff; width: 100%;
}
.authfield input:focus { outline: 2px solid #0a2540; outline-offset: 0; border-color: #0a2540; box-shadow: none; }
.authform__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.authcheck { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; line-height: 1.45; }
.authcheck input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--blue); }
.authcheck--terms { font-size: 12.5px; }
.authcheck a { color: var(--blue); text-decoration: underline; }
.authlink { border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--blue); padding: 0; text-decoration: underline; }
.authlink:hover { color: var(--red-dark); }
/* Jawne wartosci zamiast dziedziczenia z globalnego .btn - przycisk ma byc
   identyczny z .btn-primary podstrony niezaleznie od zmian w .btn. */
.authform__submit { width: 100%; justify-content: center; margin-top: 4px; background: #0a2540; color: #fff; border: 0; border-radius: 8px; padding: 11px 20px; font-weight: 600; }
.authform__submit:hover { background: #133a63; }
.authform__back { align-self: center; margin-top: 8px; text-decoration: none; }
.authmodal__demo { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); line-height: 1.5; }
.authmodal__demo strong { color: var(--navy); }

/* Komunikaty auth.js. Marketplace ma wlasny .toast, ale pokazuje go klasa
   `.show`, a auth.js dodaje `.is-show` - bez tej reguly potwierdzenia
   logowania powstawaly w DOM-ie i zostawaly niewidoczne za krawedzia ekranu.
   Arkusz ladujemy PO arkuszu strony, wiec przy rownej wagowo regule wygrywa
   ten plik i nie trzeba !important. */
.toast.is-show { transform: translateX(-50%) translateY(0); opacity: 1; }