/* AUTH MODAL */

.modal{
  display:none;
  position:fixed;
  z-index:1000;

  left:0;
  top:0;

  width:100%;
  height:100%;

  background:rgba(10,12,18,0.75);

  backdrop-filter: blur(3px);

  justify-content:center;
  align-items:center;
}


/* окно */

.modal-content{

  width:360px;

  background:rgb(18,20,26);

  border:1px solid rgba(255,255,255,0.08);

  border-radius:12px;

  padding:25px;

  color:var(--white);

  box-shadow:
  0 10px 30px rgba(0,0,0,0.45);

}


/* заголовок */

.modal-content h2{

  font-size:20px;

  margin-bottom:20px;

}


/* inputs */

.modal-content input{

width:93%;

padding:10px 12px;

margin-bottom:12px;

background:rgb(21,23,30);

border:1px solid rgba(255,255,255,0.08);

border-radius:6px;

color:var(--white);

font-size:14px;

}

.login-error{

color:#ff4d4f;

font-size:13px;

margin-bottom:10px;

min-height:18px;

opacity:0;

transition:opacity 0.2s ease;

}

.login-error.show{

opacity:1;

}

.modal-content input:hover{

  border-color:rgba(255,255,255,0.18);

}

.modal-content form{
display:flex;
flex-direction:column;
}

.modal-content input:focus{

  outline:none;

  border-color:var(--hover);

  box-shadow:0 0 0 1px var(--hover);

}


/* кнопка */

.modal-content button{

  width:100%;

  margin-top:5px;

  background:var(--blue);

  border:none;

  padding:10px;

  border-radius:6px;

  color:white;

  font-size:14px;

  font-weight:500;

  cursor:pointer;

  transition:all 0.2s ease;

}

.modal-content button:hover{

  background:var(--hover);

}

.modal-content button:active{

  transform:scale(0.97);

}

.modal{
display:none;
position:fixed;
z-index:1000;

left:0;
top:0;

width:100%;
height:100%;

background:rgba(10,12,18,0.75);
backdrop-filter: blur(4px);

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

animation:fadeIn 0.2s ease;
}

@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}
/* крестик */

.modal-content{
position:relative;
}

.modal-close{
position:absolute;
top:12px;
right:12px;

width:28px !important;
height:28px !important;

padding:0;

background:transparent;
border:none;

color:rgba(255,255,255,0.6);

font-size:18px;
cursor:pointer;
}