/* The form pages: вход и регистрация, восстановление пароля, поиск анкеты,
   обратная связь. The panels and the controls themselves live in base.css. */

/*-------------------------------
		Login page
-------------------------------*/

.login-form form {display: grid; grid-template-columns: max-content auto; align-items: center;}

.login-form label {text-align: right; padding: 2px 4px;}

.login-form input {width: 200px; font-weight: bold;}

.login-form .actions, .login-form .alternatives {grid-column: 1 / -1; text-align: center;}

.login-form .alternatives a {display: block; margin: 5px;}

.login-form .alternatives a:last-child {margin: 10px;}

/*-------------------------------
		Telegram notes
-------------------------------*/
/* Registration, password recovery and feedback happen through the bot;
   the pages carry a note instead of a form. */

.tg {color: #4ca5d2; font-weight: bold;}

.bot-note {margin: 10px 0; color: #bbb; font-size: 16px; line-height: 25px;}

.bot-note p {text-indent: 0; padding: 0; margin: 0;}

.bot-note a {display: inline-block; margin: 2px 0 10px;}

/*-------------------------------
		Search form
-------------------------------*/

.search-form form {display: grid; grid-template-columns: max-content auto;
	align-items: center; gap: 2px 4px; text-align: left;}

.search-form label {text-align: right; max-width: 145px;}

.search-form form > hr, .search-form .or, .search-form .actions {grid-column: 1 / -1;}

.search-form .or {text-align: center; color: var(--text); font-style: italic;}

.search-form .actions {text-align: center;}

.search-form .hint {display: block; color: var(--text); font-style: italic;}

.search-form input[name="no"] {width: 40px;}

.search-form input[name="name"], .search-form input[name="phone-any"] {width: 150px;}

.search-form input[name="phone-local"] {width: 70px;}

/*-------------------------------
		Advanced search
-------------------------------*/

/* label | from | to — three columns; wide rows span the last two */
.search-advanced form {grid-template-columns: max-content auto auto;}

.search-advanced .wide {grid-column: 2 / -1;}

.search-advanced .legend {text-align: right;}

.search-advanced input {width: 50px;}

.search-advanced .range {white-space: nowrap;}

.search-advanced .checks {color: var(--text-muted); text-align: left;}

.search-advanced .checks label {display: block; margin: 2px 0;}

.search-advanced .checks input {width: auto;}

.search-advanced .services {grid-column: 1 / -1; border: 0; text-align: center;}

.search-advanced .services-header {display: block; color: var(--link); margin: 5px 0;}

.search-advanced .services .only {color: var(--text-muted);}

.search-advanced .services ul {columns: 2; column-gap: 10px; list-style: none;
	text-align: left; margin: 8px 0 0; color: var(--text-muted);}

.search-advanced .services li {margin: 3px 0; break-inside: avoid;}

.search-advanced .services input {width: auto;}

/*---------------------------------------------------------------
  Продакшн-состояния и починки
---------------------------------------------------------------*/


.bot-note,
.login-form {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.auth-steps {
  max-width: 520px;
  margin: 12px auto;
  padding-left: 28px;
  text-align: left;
}

.auth-steps li {
  margin: 7px 0;
}

@media only screen and (max-width: 620px) {
  .login-form form {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    text-align: left;
  }

  .login-form label {
    text-align: left;
  }

  .login-form input {
    box-sizing: border-box;
    width: 100%;
  }

  .login-form .actions,
  .login-form .alternatives {
    grid-column: 1;
    text-align: center;
  }

  .auth-steps {
    padding-left: 24px;
  }
}