/* Strona przed logowaniem: prezentacja StokPilot (/site/*) z prawdziwym logowaniem w panelu klienta.
   Tylko pola formularza i układ panelu – reszta wyglądu pochodzi z arkuszy prezentacji. */
[hidden] { display: none !important; }

/* Panel: logo u góry, formularz pośrodku, stopka na dole; przy dłuższych krokach (kod QR) panel się przewija */
.login-panel { justify-content: flex-start; overflow-y: auto; padding-top: clamp(32px, 7vh, 84px); padding-bottom: 32px; }
.login-panel .brand.large { margin-bottom: clamp(24px, 5vh, 56px); flex: none; }
.login-content { margin: auto 0; width: 100%; }
.login-panel .login-footer { position: static; margin-top: 40px; flex: none; }

.lp-form { display: grid; gap: 16px; }
.lp-form .eyebrow { margin-bottom: -4px; }
.lp-form h2 { margin-top: 4px; }
.lp-lead { font-size: 14px; line-height: 1.65; color: #acbab6; margin: -4px 0 6px; max-width: 34ch; }

.lp-field { display: grid; gap: 7px; }
.lp-field > span { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #b5c1bc; }
.lp-field small { font-size: 12px; color: #8fa19b; }
.lp-field input {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 6px;
  background: rgba(5, 12, 14, .55); border: 1px solid rgba(255, 255, 255, .16); color: var(--paper);
  font-size: 15px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.lp-field input:hover { border-color: rgba(255, 255, 255, .26); }
.lp-field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(228, 197, 138, .18); background: rgba(5, 12, 14, .75); }
.lp-field input::placeholder { color: #5f7072; }
/* autouzupełnianie przeglądarki – ciemne tło zamiast jasnożółtego */
.lp-field input:-webkit-autofill { -webkit-text-fill-color: var(--paper); box-shadow: 0 0 0 40px #0b1518 inset; caret-color: var(--paper); }
.lp-pw { position: relative; display: block; }
.lp-pw input { padding-right: 48px; }
.lp-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #95a5a6; }
.lp-eye:hover { color: var(--paper); background: rgba(255, 255, 255, .06); }
.lp-eye svg { width: 20px; height: 20px; }
.lp-code { font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; font-size: 22px !important; letter-spacing: 6px; text-align: center; }

.lp-form .login-button { margin-top: 6px; width: 100%; }
.lp-form .login-button:disabled { opacity: .6; transform: none; }

.lp-err, .lp-ok { padding: 10px 13px; border-radius: 6px; font-size: 13.5px; line-height: 1.45; font-weight: 600; }
.lp-err { background: rgba(232, 96, 80, .13); color: #F2A79D; border: 1px solid rgba(232, 96, 80, .32); }
.lp-ok { background: rgba(128, 175, 157, .14); color: #A9D3C2; border: 1px solid rgba(128, 175, 157, .32); }

.lp-links { display: flex; justify-content: center; }
.lp-links-2 { gap: 6px 22px; flex-wrap: wrap; }
.lp-link { border: 0; background: none; padding: 4px 6px; font-size: 13px; color: #b7c6bb; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(183, 198, 187, .4); }
.lp-link:hover { color: var(--gold); text-decoration-color: currentColor; }
.lp-form .access-line { margin: 6px 0 0; justify-content: center; text-align: left; }

/* weryfikacja dwuetapowa – pierwsze logowanie: kod QR */
.lp-enroll { display: grid; gap: 12px; }
.lp-steps { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13px; line-height: 1.5; color: #c4d0cb; }
.lp-qr { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 8px; background: #fff; color: #15191E; }
.lp-qr img { width: 132px; height: 132px; flex: none; }
.lp-qr small { display: block; font-size: 11.5px; color: #4d575f; line-height: 1.4; }
.lp-qr code { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; color: #15191E; }

/* telefon i tablet: panel logowania jest pod obrazem – skrót w górnej nawigacji */
.hero-nav .nav-login { display: none; }
@media (max-width: 800px) {
  .hero-nav .nav-login { display: inline-flex; border-color: var(--gold); color: var(--gold); }
  .login-panel { overflow: visible; padding-top: 120px; padding-bottom: 48px; }
  .login-content { margin: 0; }
  /* prezentacja chowa na telefonie nagłówek panelu – przy formularzu logowania zostaje (mniejszy) */
  .lp-form .eyebrow { display: flex; }
  .lp-form h2 { display: block; font-size: 30px; letter-spacing: -1px; }
  .lp-form h2 br { display: none; }
}
/* wąski telefon: cztery przyciski nie mieszczą się w górnym rzędzie – „Cennik” ustępuje miejsca „Zaloguj się” (cennik jest niżej na stronie) */
@media (max-width: 580px) {
  .hero-nav .nav-pill[href$="#cennik"] { display: none; }
}
.footer .site-legal { font-size: 11px; color: #7f9191; letter-spacing: .02em; }
.footer .site-legal .legal-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; margin-left: 10px; white-space: nowrap; }
.footer .site-legal .legal-link:hover { color: #d9c49a; }
.login-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; padding-left: 30px; font-size: 11px; letter-spacing: .02em; }
.login-legal a { color: #7f9191; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.login-legal a:hover { color: #d9c49a; }
@media (max-width: 760px) {
  .footer .site-legal { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .footer .site-legal .legal-link { margin-left: 0; }
}

/* telefon i tablet: panel logowania jest pod obrazem – skrót „Zaloguj się” w górnym rogu obrazu */
.m-login { display: none; }
@media (max-width: 800px) {
  .m-login { position: absolute; z-index: 6; top: 16px; right: 20px; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 16px;
    border: 1px solid var(--gold); border-radius: 999px; background: rgba(16, 26, 30, .72); color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: .02em;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .m-login svg { width: 16px; height: 16px; }
  .hero-editorial-label span:last-child { display: none; }
}
@media (max-width: 580px) { .login-panel { padding-top: 112px; } .m-login { right: 16px; } }

/* stopka: informacja o niezależności StokPilot (brak powiązań z markami i firmami) */
.site-end-disclaimer { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid rgba(213, 191, 130, .14); max-width: 980px; font-size: 11.5px; line-height: 1.7; color: #7f9191; letter-spacing: .01em; }
.site-end-disclaimer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-end-disclaimer a:hover { color: #d9c49a; }