/* ============================================================
   Resinos POS — prihlasovacia stránka
   Stavia na tokenoch zo style.css
   ============================================================ */

.login-body{ background:var(--paper); }

.login-split{
  display:grid; grid-template-columns:0.92fr 1.08fr;
  min-height:100vh;
  min-height:100svh;
}

/* ---------- ľavý panel: značka + video ---------- */
.login-brand{
  position:relative; overflow:hidden;
  color:var(--paper);
}
.login-media{ position:absolute; inset:0; }
.login-media .video-slot,
.login-media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.login-tint{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(143,16,7,.8) 0%, rgba(208,58,5,.6) 50%, rgba(240,127,18,.45) 100%);
  mix-blend-mode:multiply;
}
.login-shade{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(70,8,0,.5) 0%, transparent 40%),
             linear-gradient(180deg, rgba(70,8,0,.35) 0%, transparent 26%);
}
.login-brand-inner{
  position:relative; min-height:100%;
  display:flex; flex-direction:column;
  padding:30px 38px 34px;
}
.login-top{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.login-top .lang-switch a{ box-shadow:0 0 0 1px rgba(255,244,228,.35); }
.login-top .lang-switch a.active{ box-shadow:0 0 0 2px rgba(255,227,160,.85); }
.login-back{
  align-self:flex-start;
  font-size:14px; font-weight:500; color:rgba(255,244,228,.85);
  padding:8px 0;
  transition:color .25s ease, transform .25s ease;
}
.login-back:hover{ color:var(--paper); transform:translateX(-3px); }
.login-brand-center{
  margin:auto 0; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  animation:rise .8s cubic-bezier(.22,.6,.2,1) both;
}
.login-logo-card{
  position:relative;
  margin-bottom:26px;
}
.login-logo{
  width:clamp(220px, 22vw, 300px); height:auto;
  filter:drop-shadow(0 24px 60px rgba(40,5,0,.5));
}
.login-laser{
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 42%, rgba(255,246,220,.95) 50%, transparent 58%);
  background-size:300% 300%; background-repeat:no-repeat;
  background-position:-50% 0;
  -webkit-mask:url("../assets/logo.svg") center/contain no-repeat;
  mask:url("../assets/logo.svg") center/contain no-repeat;
  animation:laser 5.5s ease-in-out infinite;
  pointer-events:none;
}
.login-word{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(40px, 4.6vw, 58px);
  line-height:1; letter-spacing:.01em;
  color:var(--paper);
}
.login-claim{
  margin-top:12px;
  font-size:15px; color:#FFE3C9; max-width:300px;
}
.login-trust{
  text-align:center;
  font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,227,201,.7);
}

/* ---------- pravý panel: formulár ---------- */
.login-panel{
  display:flex; align-items:center; justify-content:center;
  padding:48px 28px;
}
.login-card{
  width:min(430px, 100%);
  animation:rise .8s cubic-bezier(.22,.6,.2,1) .12s both;
}
.login-title{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(36px, 4.4vw, 50px);
  line-height:1.05; letter-spacing:-.015em;
  margin-bottom:10px;
}
.login-sub{
  font-size:16px; color:var(--ink-3);
  margin-bottom:34px;
}
.field{ display:block; margin-bottom:20px; }
.field-label{
  display:block;
  font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:8px;
}
.field input[type="email"],
.field input[type="password"],
.field input[type="text"]{
  width:100%;
  font-family:var(--font-body); font-size:15.5px; color:var(--ink);
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field input::placeholder{ color:#C9AE99; }
.field input:hover{ border-color:rgba(240,127,18,.4); }
.field input:focus{
  border-color:var(--fire-orange);
  box-shadow:0 0 0 4px rgba(240,127,18,.18);
}
.field-pwd{ position:relative; display:block; }
.field-pwd input{ padding-right:52px; }
.pwd-toggle{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  color:var(--ink-3); border-radius:10px;
  transition:color .25s ease, background-color .25s ease;
}
.pwd-toggle:hover{ color:var(--fire-crimson); background:rgba(240,127,18,.08); }
.pwd-toggle svg{ width:20px; height:20px; }
.login-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin:4px 0 26px;
}
.remember{
  display:flex; align-items:center; gap:9px;
  font-size:14px; color:var(--ink-2); cursor:pointer;
}
.remember input{
  appearance:none;
  width:19px; height:19px;
  border:1.5px solid rgba(140,30,0,.3);
  border-radius:6px;
  background:var(--white);
  cursor:pointer; position:relative;
  transition:background .2s ease, border-color .2s ease;
}
.remember input:checked{
  background:var(--grad-cta);
  border-color:transparent;
}
.remember input:checked::after{
  content:"";
  position:absolute; left:5px; top:2.5px;
  width:5px; height:9px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(40deg);
}
.login-link{
  font-size:14px; font-weight:500;
  color:var(--fire-crimson);
  transition:color .25s ease;
}
.login-link:hover{ color:var(--fire-orange); }
.login-submit{
  width:100%;
  font-size:16px; padding:15px 28px;
}
.login-alt{
  margin-top:26px; text-align:center;
  font-size:14.5px; color:var(--ink-3);
}

@keyframes rise{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:none; }
}

/* ---------- responzivita ---------- */
@media (max-width: 880px){
  .login-split{ grid-template-columns:1fr; min-height:auto; }
  .login-brand-inner{ padding:22px 24px 26px; }
  .login-brand-center{ margin:18px 0 22px; }
  .login-logo-card{ margin-bottom:18px; }
  .login-logo{ width:170px; }
  .login-word{ font-size:36px; }
  .login-claim{ display:none; }
  .login-trust{ font-size:10px; }
  .login-panel{ padding:38px 22px 56px; }
}

@media (prefers-reduced-motion: reduce){
  .login-laser{ animation:none; }
  .login-brand-center, .login-card{ animation:none; }
}