/* user form */

/* Общая стилизация формы */
.user-login-form {
  max-width: 400px;      /* ограничение по ширине */
  margin: 50px auto;     /* центрирование по горизонтали */
  padding: 40px 30px;    /* внутренние отступы */
  background-color: #fff; /* фон формы */
  border-radius: 12px;   /* скругление углов */
  box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* тень */
  display: flex;
  flex-direction: column;
  gap: 20px; /* расстояние между полями */
  font-family: 'Inter', sans-serif;
}

/* Стили для полей ввода */
.user-login-form input[type="text"],
.user-login-form input[type="password"] {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
}

/* Эффект при фокусе */
.user-login-form input[type="text"]:focus,
.user-login-form input[type="password"]:focus {
  border-color: #3e747b;
  box-shadow: 0 0 0 3px rgba(62, 116, 123, 0.2);
  outline: none;
}

/* Стилизация лейблов */
.user-login-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

/* Стилизация кнопки */
/* Стилизация кнопки */
.user-login-form .form-submit {
  display: flex;                /* включаем flex */
  align-items: center;          /* вертикальное выравнивание по центру */
  justify-content: center;      /* горизонтальное центрирование */
  padding: 14px;                /* внутренние отступы */
  background-color: #3e747b;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 50px;                 /* фиксированная высота, чтобы текст точно центрировался */
  line-height: normal;           /* сброс стандартного line-height */
}


/* Эффект при наведении на кнопку */
.user-login-form .form-submit:hover {
  background-color: #356366;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Адаптивность для мобильных */
@media (max-width: 480px) {
  .user-login-form {
    margin: 20px;
    padding: 30px 20px;
  }

  .user-login-form input[type="text"],
  .user-login-form input[type="password"] {
    padding: 12px 14px;
    font-size: 15px;
  }

  .user-login-form .form-submit {
    padding: 12px;
    font-size: 15px;
  }
}