/* Start:/local/templates/main/components/bitrix/system.auth.authorize/popup/style.css?17556149307053*/
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap');

/* Overlay для затемнения фона */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000 !important; /* Убедитесь, что попап поверх остального контента */
  /* По умолчанию может быть скрыт, например: display: none; */
  
}

/* Стили основного контейнера попапа из инспектора */
.login-popup {
  background-color: #FFFFFF;
  width: 815px; /* Ширина из инспектора */
  /* height: 544px; */ /* Высота из инспектора */
  padding: 32px; /* Отступы из инспектора */
  display: flex; /* Flexbox для содержимого */
  flex-direction: column; /* Элементы располагаются по вертикали */
  /* justify-content и align-items из инспектора применены к modal-overlay для центрирования самого попапа */
  border-radius: 8px; /* Примерный border-radius */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Примерная тень */
  position: relative; /* Для позиционирования QR-кода */
  font-family: 'Onest', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Применяем шрифт */
  margin: 20px;
}

/* Адаптивность для попапа */
@media (max-width: 850px) {
  .login-popup {
    width: 90%; /* Уменьшаем ширину на маленьких экранах */
    height: auto; /* Высота авто */
    max-height: 90%; /* Ограничиваем максимальную высоту */
    overflow-y: auto; /* Добавляем скролл, если контент не помещается */
  }
}

@media (max-width: 500px) {
  .login-popup {
    padding: 20px; /* Уменьшаем отступы */
  }
}


/* Стилизация элементов внутри попапа */
.login-popup h1 {
    color:#181032;
    font-family: Onest;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 114%; /* 41.04px */
    margin: 0;
}

.login-popup p {
    color: var(--Text-Primary, #181032);
    font-family: Onest;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 114%; /* 22.8px */
    margin: 20px 0;
}

.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 17px;
  color: var(--Text-Primary, #181032);
  font-family: Onest;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 114%; /* 22.8px */
}

.form-group input[type="text"],
.form-group input[type="password"] {
  padding: 10px 15px;
  border: 1px solid #e0e0e0; /* Используем цвет из template_styles */
  border-radius: 4px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus {
  border-color: #5ecfc5; /* Цвет при фокусе из template_styles */
}

.button-group {
  display: flex;
  gap: 15px; /* Отступ между кнопками */
  margin-top: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap; /* Перенос кнопок на новую строку при необходимости */
  align-self: center; /* Центрируем блок кнопок */
}

.button-group button {
  padding: 12px 24px;
  border: none;
  border-radius: 50px; /* Скругленные углы как в template_styles */
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-login {
  display: flex;
  width: 154px;
  height: 45px;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 20px;
  border: 1px solid var(--Secondary, #17897C) !important;
  background: #EFF8F6;
  transition: background-color 0.3s ease;
  color: #17897C;
}

.btn-login:hover {
  background-color: #e0e0e0;
}

.btn-register {
  display: flex;
  width: 200px;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  /* align-self: stretch; */ /* Убрано, так как фиксированная ширина задана явно */
  border-radius: 23px;
  background: #17897C; /* Используем hex цвет из var(--Secondary, #17897C) */
  transition: background-color 0.3s ease;
  text-decoration: none;
}

.btn-register:hover {
  background-color: #4bb6ac; /* Цвет при наведении из template_styles */
}

.forgot-password {
    color: #17897C;
    font-family: Onest;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 114%; /* 22.8px */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.forgot-password:hover {
  text-decoration: underline;
}


.contact-info p {
    color: #181032;
    font-family: Onest;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 114%; /* 22.8px */
    margin-top: 32px;
}

.whatsapp-link {
    color: #17897C;
    font-family: Onest;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 114%; /* 22.8px */
    text-decoration-line: none;
}

.whatsapp-link:hover {
  text-decoration: underline;
}

.qr-code {
    position: absolute;
    bottom: 37px; /* Отступ снизу как padding попапа */
    right: 32px; /* Отступ справа как padding попапа */
    width: 100px; /* Примерный размер QR-кода */
    height: 100px; /* Примерный размер QR-кода */
}

.qr-code img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Сохраняем пропорции изображения */
}


/* Медиа-запросы для адаптивности */
@media (max-width: 960px) {
  /* Стили для экранов <= 960px */
  .login-popup h1 {
        font-size: 22px;
    }
  .login-popup p {
    font-size: 16px;
  }
  .form-group label {
    font-size: 16px;
  }
  .form-group input[type="text"],
  .form-group input[type="password"] {
    font-size: 16px;
  }
  .forgot-password {
    font-size: 16px;
  }
  .contact-info p {
    max-width: 306px;
    font-size: 16px;
  }
  .whatsapp-link {
    font-size: 16px;
  }
  .qr-code {
    bottom: 35px;
  }
  .qr-code img {}
}

@media (max-width: 480px) {

  .btn-login {
    width: 100%;
  }
  .btn-register {
    width: 100%;
  }

  .qr-code img {
    display: none;
  }
}
/* End */
/* /local/templates/main/components/bitrix/system.auth.authorize/popup/style.css?17556149307053 */