/* v3 (01.10): style obszaru auth - dopisywane przez zadanie tego obszaru; tokeny i komponenty w ne-v3.css */
/* Widoki: resources/views/auth/*.blade.php w layouts.guest ("Gate": grafika + .ne-gate__card). Klasy ne-auth-*.
   Komponenty wspolne (.ne-field, .ne-pass, .ne-meter, .ne-rules, .ne-captcha, .ne-gate__*) tylko DOSTRAJANE w .ne-auth. */

/* ------------------------------------------------------------------ grafika Gate (layouts.guest uzywaja tylko widoki auth)
   Smok: przy 30% leb Huang Longa byl uciety lewa krawedzia panelu - kadr przesuniety na glowe i petle ciala. */
.ne-gate--dragon .ne-gate__art img { object-position: 2% 30%; }

/* ------------------------------------------------------------------ naglowek karty */
.ne-auth { position: relative; }
.ne-auth-head { margin-bottom: var(--sp-7); }
.ne-auth-head .ne-eyebrow { margin-bottom: var(--sp-3); }
.ne-auth-head .ne-eyebrow::after { width: 56px; }
.ne-auth-head h1 { margin-bottom: 10px; text-wrap: balance; }
.ne-auth-head .ne-gate__sub { margin: 0; max-width: 44ch; font-size: 1.0625rem; line-height: 1.55; color: var(--t-3); text-wrap: balance; }

/* znak przeplywu (klucz / klodka / koperta / tarcza) zamiast eyebrow na stronach pomocniczych */
.ne-auth-badge {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--sp-5);
  border-radius: var(--r-4); color: var(--gold-200); font-size: 1.25rem;
  background: rgba(var(--gold-rgb), .10);
  border: 1px solid rgba(var(--gold-rgb), .34);
}

/* Hu Lan (rejestracja): karmazyn tylko w akcentach naglowka - zloto zostaje kolorem akcji */
.ne-gate--tiger .ne-auth-head .ne-eyebrow { color: var(--crimson-200); }
.ne-gate--tiger .ne-auth-head .ne-eyebrow::after { background: linear-gradient(90deg, transparent, var(--crimson-400)); }

/* ------------------------------------------------------------------ pola */
.ne-auth .ne-field { margin-bottom: 22px; }
.ne-auth .form-label { display: block; margin-bottom: 8px; color: var(--t-2); letter-spacing: .01em; }
.ne-auth .form-control { min-height: 48px; }
.ne-auth .invalid-feedback { margin-top: 8px; line-height: 1.45; }
.ne-auth .invalid-feedback strong { color: inherit; font-weight: 600; }

/* pokaz/ukryj haslo - cel dotyku 44 px w polu 48 px */
.ne-auth .ne-pass__toggle { width: 44px; height: 44px; inset-inline-end: 2px; display: grid; place-items: center; font-size: 1rem; transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.ne-auth .ne-pass__toggle:hover { background: rgba(255, 255, 255, .04); }
.ne-auth .ne-pass__toggle[aria-pressed="true"] { color: var(--gold-200); }

/* podpowiedzi pod polem */
.ne-auth-hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; line-height: 1.45; }
.ne-auth-hint i { flex: none; margin-top: .22em; font-size: .75rem; color: var(--gold-500); }

/* sila hasla + zasady (podpowiedz; wladza = serwer) */
.ne-auth .ne-meter { margin-top: 10px; gap: 6px; }
.ne-auth .ne-meter span { height: 4px; }
.ne-auth .ne-rules { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; }
.ne-auth .ne-rules li { transition: color var(--dur-2) var(--ease-out); }
.ne-auth .ne-rules li::before { transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.ne-auth .ne-rules + .ne-auth-hint { margin-top: 10px; }

/* Turnstile: bez podwojnego marginesu partiala; pusty kontener (widzet wylaczony) nie zostawia dziury */
.ne-auth .ne-captcha { margin-bottom: 22px; }
.ne-auth .ne-captcha > .mb-3 { margin-bottom: 0 !important; }
.ne-auth .ne-captcha:not(:has(.cf-turnstile)) { display: none; }

/* ------------------------------------------------------------------ checkboxy (zapamietaj / regulamin) */
.ne-auth .form-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding-inline-start: 0; }
.ne-auth .form-check .form-check-input { float: none; flex: none; margin: 0; cursor: pointer; }
.ne-auth .form-check-label { cursor: pointer; color: var(--t-2); }
.ne-auth .ne-gate__row { margin-bottom: 22px; row-gap: 0; }

.ne-auth-terms.form-check {
  flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; margin-bottom: 22px; padding: 14px 16px;
  border: 1px solid var(--line-1); border-radius: var(--r-3); background: rgba(255, 236, 196, .02);
}
.ne-auth-terms .form-check-input { margin-top: .15em; }
.ne-auth-terms .form-check-label { flex: 1 1 0; min-width: 0; font-size: .9375rem; line-height: 1.55; }
.ne-auth-terms .invalid-feedback { flex-basis: 100%; margin-top: 0; padding-inline-start: calc(1.25em + 12px); }

/* ------------------------------------------------------------------ akcje */
.ne-auth-submit { width: 100%; min-height: 52px; margin-top: 2px; }
.ne-auth-submit i { font-size: .9375rem; transition: transform var(--dur-2) var(--ease-out); }
.ne-auth-submit:hover .fa-arrow-right-long { transform: translateX(3px); }
[dir="rtl"] .ne-auth .fa-arrow-right-long, [dir="rtl"] .ne-auth .fa-arrow-left-long { transform: scaleX(-1); }
[dir="rtl"] .ne-auth-submit:hover .fa-arrow-right-long { transform: scaleX(-1) translateX(3px); }

.ne-auth-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--gold-300); font-weight: 600; text-decoration: none;
}
.ne-auth-link:hover, .ne-auth-link:focus-visible { color: var(--gold-100); text-decoration: underline; }
.ne-auth-linkbtn { padding: 0 2px; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.ne-auth-back i { font-size: .875rem; transition: transform var(--dur-2) var(--ease-out); }
.ne-auth-back:hover i { transform: translateX(-3px); }
[dir="rtl"] .ne-auth-back:hover i { transform: scaleX(-1) translateX(-3px); }

.ne-auth .ne-gate__alt { margin-top: var(--sp-7); padding-top: var(--sp-3); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; margin-bottom: 0; }

/* ------------------------------------------------------------------ komunikaty */
.ne-auth .alert { margin-bottom: 22px; font-size: .9375rem; line-height: 1.5; }
.ne-auth-lead { color: var(--t-2); font-size: 1.0625rem; line-height: 1.6; margin-bottom: var(--sp-5); text-wrap: pretty; }
.ne-auth-note {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--sp-6); padding: 12px 14px;
  border-radius: var(--r-2); border: 1px solid rgba(242, 174, 69, .28); background: var(--warn-bg);
  color: #f7d9a8; font-size: .9375rem; line-height: 1.5;
}
.ne-auth-note i { flex: none; margin-top: .2em; color: var(--warn); }
.ne-auth--verify .ne-auth-head { margin-bottom: var(--sp-5); }

/* zaproszenie (?invite=) - odslaniane przez ne-v3.js */
.ne-auth-invite { margin-bottom: 22px; }

/* ------------------------------------------------------------------ kod jednorazowy */
.ne-auth-otp.form-control {
  min-height: 68px; padding-inline: 12px; text-align: center; text-indent: .42em;
  font-family: var(--ff-ui); font-size: 1.875rem; font-weight: 700; letter-spacing: .42em;
  font-variant-numeric: tabular-nums lining-nums; color: var(--gold-50); caret-color: var(--gold-300);
  border-radius: var(--r-3);
}
.ne-auth-otp.form-control::placeholder { color: var(--t-disabled); opacity: .45; letter-spacing: .42em; }
.ne-auth-otp.form-control.is-invalid { padding-inline-end: 12px; }

/* ------------------------------------------------------------------ telefon / tablet: grafika jako baner nad karta */
@media (max-width: 991.98px) {
  /* baner konczy sie czystym --s-0; zlota poswiata formularza przy samej krawedzi dawala widoczny szew pod banerem */
  .ne-gate__form { background: var(--s-0); }
  .ne-auth { margin-top: -28px; }
  .ne-auth-head { margin-bottom: var(--sp-6); }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .ne-gate__art { height: 300px; }   /* tablet: szeroki, plaski baner 220 px ucinal glowe smoka / Hu Lana */
}
@media (max-width: 575.98px) {
  .ne-auth-head .ne-gate__sub, .ne-auth-lead { font-size: 1rem; }
  .ne-auth-otp.form-control { font-size: 1.625rem; letter-spacing: .32em; text-indent: .32em; }
  .ne-auth-otp.form-control::placeholder { letter-spacing: .32em; }
}
@media (prefers-reduced-motion: reduce) {
  .ne-auth-submit i, .ne-auth-back i, .ne-auth .ne-rules li, .ne-auth .ne-rules li::before { transition: none; }
}
