/*
 * Стили блока авторизации (.vse-login) + вспомогательные стили, от которых он зависит.
 * Источник: templates/demomarket/css/style.css, templates/demomarket/css/preloader.css
 *
 * Примечание: шрифт "Manrope" на исходном сайте подключается отдельно
 * (см. templates/demomarket/php/layout/head.phtml -> fonts/manrope-*.woff2).
 * Если на целевом сайте такого шрифта нет, .button будет использовать fallback
 * "Arial", sans-serif — подключите шрифт сами, если нужно точное совпадение.
 */

/*
 * ===== Блок .vse-login =====
 * Класс намеренно не называется просто ".login" — это самое частое имя
 * для страницы авторизации, и на текущем сайте (см. style.min.css) уже
 * есть свои .login, .login__container, .login__form, .login__input
 * с другими стилями. Если бы этот блок использовал такие же имена, при
 * подключении custom.css вместе со style.min.css классы конфликтовали бы:
 * часть свойств из style.min.css «протекала» бы в этот блок (лишние
 * margin, display:flex+gap, рамка и т.п.), портя вёрстку. Префикс
 * "vse-" делает имена уникальными и безопасными для переноса на любой
 * сайт.
 */
.vse-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}
.vse-login .vse-login__form.vse-login__form--2 {
  display: none;
}
.vse-login--sms .vse-login__form.vse-login__form--1 {
  display: none;
}
.vse-login--sms .vse-login__form.vse-login__form--2 {
  display: flex;
}
.vse-login--sms .vse-login__buttons {
  display: flex;
}

.vse-login__container {
  width: calc(100% - 40px);
  max-width: 438px;
  margin: 0 20px;
  padding: 40px 20px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 1px 1px 10px #bdbdbd;
}

.vse-login__title {
  margin: 0;
  margin-bottom: 18px;
  text-align: center;
  font-size: 38px;
  font-weight: 800;
  line-height: 52px;
  color: #9b51e0;
}

.vse-login__label {
  display: block;
  margin-bottom: 18px;
  color: rgb(79, 79, 79);
}
.vse-login__label:last-of-type {
  margin-bottom: 30px;
}
.vse-login__label span {
  display: block;
  margin-bottom: 12px;
}

.vse-login__input {
  width: 100%;
  padding: 12px 24px;
  border: none;
  border-radius: 50px;
  background-color: rgb(242, 242, 242);
}

.vse-login__button {
  width: 100%;
  padding: 11px;
}

.vse-login__buttons {
  display: none;
  margin-top: 62px;
  justify-content: space-between;
}

.vse-login__send-again {
  text-decoration: underline;
  color: rgb(79, 79, 79);
  border: none;
  background-color: transparent;
}

.vse-login__change-number {
  text-decoration: underline;
  color: #9b51e0;
  border: none;
  background-color: transparent;
}

@media (min-width: 1024px) {
  .vse-login__container {
    padding: 24px 36px 63px 36px;
  }
}

.vse-login__form {
  position: relative;
}

.forgot__password {
  position: absolute;
  top: calc(100% + 1rem);
  padding-block: 0px;
  padding-inline: 0px;
  border-width: 0px;
  border-style: outset;
  color: #9b51e0;
  border-color: buttonborder;
  background-color: unset;
  border-image: initial;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
}
.forgot__password:hover {
  color: #6a00cc;
}

.vse-login__form--password {
  position: relative;
}

.password-error {
  position: absolute;
  top: 100%;
  color: red;
}

.password-message {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  color: #9b51e0;
}

/* Утилитарный класс, используемый внутри .login (и не только) */
.none {
  display: none !important;
}

/* ===== Кнопка .button, используемая в .vse-login__button ===== */
.button {
  display: flex;
  padding: 7px 24px;
  cursor: pointer;
  font-family: "Manrope", "Arial", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  border: 2px solid #09cf5c;
  border-radius: 50px;
  background-color: #09cf5c;
  justify-content: center;
  align-items: center;
}
.button svg {
  fill: #ffffff;
}
.button:hover,
.button:focus,
.button:active {
  color: #333333;
  background-color: #ffffff;
}
.button:hover svg,
.button:focus svg,
.button:active svg {
  fill: #09cf5c;
}

/* ===== Прелоадер, задействуемый js_vse.js во время AJAX-запроса ===== */
.preloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(224, 224, 224, 0.5);
  z-index: 1001;
}

.preloader__row {
  position: relative;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  margin-top: -35px;
  margin-left: -35px;
  text-align: center;
  animation: preloader-rotate 2s infinite linear;
}

.preloader__item {
  position: absolute;
  display: inline-block;
  top: 0;
  background-color: #337ab7;
  border-radius: 100%;
  width: 35px;
  height: 35px;
  animation: preloader-bounce 2s infinite ease-in-out;
}

.preloader__item:last-child {
  top: auto;
  bottom: 0;
  animation-delay: -1s;
}

@keyframes preloader-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes preloader-bounce {
  0%,
  100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

.loaded_hiding .preloader {
  transition: 0.3s opacity;
  opacity: 0;
}