/* ==========================================================================
   si-login.css — prisijungimo ekranai.

   Atskiras failas, nes prisijungimo puslapiai neturi navigacijos ir gyvena
   savo taisyklėmis, o sistemos stilius jiems tinka tik iš dalies.
   ========================================================================== */

body.si-login{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--font); min-height:100vh;
}
.lg-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:28px 16px;
}
.lg-box{
  width:100%; max-width:392px; background:var(--paper);
  border-radius:24px; padding:30px 30px 26px;
  box-shadow:0 1px 2px rgba(44,44,43,.05), 0 8px 30px rgba(44,44,43,.08);
}
.lg-box.lg-wide{ max-width:440px; }


.lg-box h1{ font-size:21px; letter-spacing:-.02em; margin:0 0 6px; }
.lg-lead{ font-size:13.5px; line-height:1.6; color:var(--gray); margin:0 0 20px; }

.lg-box label{ display:block; margin-bottom:13px; }
.lg-box label > span{
  display:block; font-size:10.5px; letter-spacing:0; text-transform:none;
  color:var(--gray); margin-bottom:6px;
}
.lg-box input{
  width:100%; box-sizing:border-box; border:none; background:var(--paper-2);
  border-radius:980px; height:46px; padding:0 17px;
  font-family:var(--font); font-size:15px; color:var(--ink);
}
.lg-box input:focus{
  outline:2px solid var(--accent); outline-offset:-2px; background:var(--paper);
}
.lg-box button{
  width:100%; margin-top:8px; border:none; cursor:pointer;
  background:var(--ink); color:var(--paper); border-radius:980px;
  height:46px; font-family:var(--font); font-size:15px; font-weight:500;
}
.lg-box button:hover{ background:#000; }

.lg-err{
  background:var(--bad-bg); color:var(--bad-t); border-radius:16px;
  padding:12px 15px; font-size:13px; line-height:1.5; margin-bottom:18px;
}
.lg-foot{ margin:16px 0 0; font-size:12.5px; color:var(--gray); text-align:center; }
.lg-foot a{ color:var(--accent); }

/* ---------- 2FA įjungimas ---------- */
.lg-steps{
  margin:0 0 18px; padding:0 0 0 20px; font-size:13.5px; line-height:1.7; color:var(--gray);
}
.lg-steps b{ color:var(--ink); font-weight:600; }
.lg-qr{
  display:flex; justify-content:center; padding:18px;
  background:var(--paper-2); border-radius:20px; margin-bottom:12px;
}
.lg-qr img, .lg-qr canvas{ display:block; border-radius:8px; }
.lg-manual{ margin-bottom:18px; }
.lg-manual summary{
  cursor:pointer; font-size:12.5px; color:var(--gray); list-style:none;
  padding:8px 0;
}
.lg-manual summary::-webkit-details-marker{ display:none; }
.lg-manual summary:hover{ color:var(--ink); }
.lg-manual p{ margin:4px 0 8px; font-size:12.5px; color:var(--gray); }
.lg-manual code{
  display:block; background:var(--paper-2); border-radius:14px; padding:12px 14px;
  font-size:14px; letter-spacing:.14em; word-break:break-all; color:var(--ink);
}

/* ---------- atsarginiai kodai ---------- */
.lg-codes{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:6px 0 18px;
}
.lg-codes span{
  background:var(--paper-2); border-radius:12px; padding:11px 8px;
  text-align:center; font-size:14px; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.lg-note{ font-size:12px; color:var(--gray); line-height:1.55; margin:0 0 20px; }
.lg-go{
  display:block; text-align:center; text-decoration:none;
  background:var(--ink); color:var(--paper); border-radius:980px;
  padding:14px; font-size:15px; font-weight:500;
}

@media (max-width:460px){
  .lg-box{ padding:24px 20px 22px; border-radius:20px; }
  .lg-codes{ grid-template-columns:1fr 1fr; }
}

/* Tas pats aukštis kaip kliento emblemos — abu ženklai lygiaverčiai. */


/* ==========================================================================
   Prekės ženklai prisijungimo lange.
   Centruota eilutė: Rėja su priedu, plona linija, pilnas kliento logotipas.
   Jokių tekstinių prierašų — logotipai kalba patys.
   ========================================================================== */
.lg-brands{
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding-bottom:18px; margin-bottom:24px; border-bottom:1px solid var(--line);
}
.lg-brands .lg-prod{
  display:flex; flex-direction:column; align-items:center; gap:5px; flex:0 0 auto;
}
.lg-brands .lg-prod img{ height:30px; width:auto; display:block; }
.lg-brands .lg-tag{
  font-size:10.5px; color:var(--gray-soft); letter-spacing:.02em; line-height:1;
  white-space:nowrap;
}
.lg-brands .lg-div{ width:1px; height:34px; background:var(--line); flex:0 0 auto; }
/* Kliento logotipas horizontalus ir platus (400x53), todėl ribojamas ir plotis,
   ir aukštis — kitaip jis išlįstų už dėžės ir nustelbtų Rėją. */
.lg-brands .lg-client-logo{
  max-height:24px; max-width:160px; width:auto; height:auto;
  display:block; flex:0 1 auto; object-fit:contain;
}

@media (max-width:460px){
  .lg-brands{ gap:13px; }
  .lg-brands .lg-prod img{ height:26px; }
  .lg-brands .lg-div{ height:30px; }
  .lg-brands .lg-client-logo{ max-height:20px; max-width:120px; }
}

/* Face ID / Touch ID — pagrindinis kelias, todėl virš formos ir tamsus. */
.lg-pk{ display:flex; flex-direction:column; gap:12px; margin:6px 0 4px; }
.lg-pk[hidden]{ display:none; }
.lg-pk-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:52px; border:none; border-radius:999px; cursor:pointer;
  background:var(--ink); color:var(--paper); font-family:var(--font); font-size:15.5px; font-weight:500;
}
.lg-pk-btn:disabled{ opacity:.6; cursor:default; }
.lg-pk-err{
  margin:0; font-size:13px; color:var(--bad-t); background:var(--bad-bg);
  border-radius:12px; padding:10px 14px;
}
.lg-pk-err[hidden]{ display:none; }
.lg-or{ display:flex; align-items:center; gap:12px; color:var(--gray-soft); font-size:12px; }
.lg-or::before, .lg-or::after{ content:''; flex:1; height:1px; background:var(--line); }