/* static/css/login-yeti.css */

/* Małe dopięcie: checkbox "Pokaż hasło" */
.show-pass{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  font-size: 0.95rem;
  user-select: none;
  opacity: 0.9;
}

.show-pass input{
  transform: translateY(1px);
}

/* Kontener animacji */
.yeti-box{
  display:flex;
  justify-content:center;
  margin: 2px 0 10px;
}

/* Sam yeti */
.yeti{
  width: 180px;
  height: 140px;
  position: relative;
  pointer-events: none; /* nie przeszkadza w klikaniu pól */
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.20));
}

/* Głowa */
.yeti-head{
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
  width: 160px;
  height: 120px;
  border-radius: 70px 70px 60px 60px;
  background: #f3f6fb;
  border: 2px solid rgba(0,0,0,0.08);
}

/* Twarz */
.yeti-face{
  position:absolute;
  left:50%;
  top:26px;
  transform: translateX(-50%);
  width: 130px;
  height: 86px;
  border-radius: 50px;
  background: #ffffff;
  border: 2px solid rgba(0,0,0,0.06);
}

/* Oczy */
.eyes{
  position:absolute;
  left:50%;
  top:20px;
  transform: translateX(-50%);
  display:flex;
  gap: 20px;
}

.eye{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}

.pupil{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #222;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  transition: transform 120ms linear;
}

/* Nose/snout */
.snout{
  position:absolute;
  left:50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 60px;
  height: 26px;
  border-radius: 999px;
  background: #eef1f7;
  border: 2px solid rgba(0,0,0,0.06);
}

/* Ręce */
.hands{
  position:absolute;
  left:50%;
  top: 38px;
  transform: translateX(-50%);
  width: 170px;
  height: 90px;
  pointer-events: none;
}

.hand{
  position:absolute;
  width: 70px;
  height: 44px;
  border-radius: 22px;
  background: #f3f6fb;
  border: 2px solid rgba(0,0,0,0.08);
  top: 10px;
  transition: transform 260ms ease;
}

.hand.left{
  left: 6px;
  transform: translateY(30px) rotate(-14deg);
}

.hand.right{
  right: 6px;
  transform: translateY(30px) rotate(14deg);
}

/* Stan: zasłania oczy */
.hands.cover .hand.left{
  transform: translate(35px, 0px) rotate(-8deg);
}
.hands.cover .hand.right{
  transform: translate(-35px, 0px) rotate(8deg);
}

/* Stan: podgląda przez palce */
.hands.peek .hand.left{
  transform: translate(35px, 20px) rotate(-8deg);
}
.hands.peek .hand.right{
  transform: translate(-35px, -10px) rotate(50deg);
}

/* Drobne "życie" (opcjonalne) */
.yeti-head{
  transition: transform 220ms ease;
}

body.yeti-look .yeti-head{
  transform: translateX(-50%) translateY(1px);
}

.password-wrapper {
  position: relative;
}

.password-wrapper{
  position: relative;
  display: block;
}

.password-wrapper .input{
  padding-right: 44px; /* miejsce na oko */
}

.toggle-eye{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #aaa;
}

.toggle-eye:hover{
  color: #fff;
}

.toggle-eye svg{
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}