/*
 * auth_v2.css — страницы входа, регистрации и восстановления пароля
 * (reg/login_v2.tpl, reg/reg_form_v2.tpl, reg/reg_text_v2.tpl, reg/reset_v2.tpl).
 *
 * Зачем отдельный файл: карточка и поля (.auth-*) описаны в common.css, а вот
 * кнопки (.ro-button*) лежат только в common-places.css / persons.css /
 * news_articles.css / events.css — ни один из них эти страницы не подключают.
 * Из-за этого кнопка отправки выглядела как стандартная серая кнопка браузера
 * (проверено: border 0px, padding 1px 6px, шрифт 13px). Здесь собрано всё, что
 * нужно этим страницам, и правила кнопок повторяют сайтовые один в один.
 */

/* ---------------------------------------------------------------- карточка -- */
.auth-page {
  width: auto;
  max-width: 560px;
  margin: 40px auto 70px;
  padding: 32px 40px 36px;
  background: #fff;
  border: 1px solid #e4e4e4;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.auth-page-wide {
  max-width: 760px;
}

.auth-head {
  margin-bottom: 22px;
}

.auth-title {
  font-size: 28px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: 14px;
  line-height: 1.45;
}

/* ------------------------------------------------------------------ поля --- */
.auth-form {
  margin: 0;
}

.auth-field {
  display: block;
  margin-bottom: 16px;
}

.auth-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #626262;
}

.auth-input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #d5d5d5;
  background: #fff;
  font-size: 15px;
  border-radius: 0;
}

.auth-input:focus {
  border-color: #00aeef;
  outline: none;
}

select.auth-input {
  height: 42px;
  line-height: 42px;
}

.auth-remember {
  display: block;
  margin: 4px 0 20px;
  font-size: 14px;
  cursor: pointer;
}

.auth-remember input {
  vertical-align: middle;
  margin-right: 6px;
}

.auth-hint {
  font-size: 13px;
  color: #8a949c;
  line-height: 1.45;
  margin: -6px 0 16px;
}

/* ------------------------------------------------- выбор способа (радио) --- */
.auth-choice {
  display: block;
  position: relative;
  padding: 12px 14px 12px 40px;
  margin-bottom: 10px;
  border: 1px solid #e4e4e4;
  background: #fff;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
  -webkit-transition: border-color .15s ease, background-color .15s ease;
  transition: border-color .15s ease, background-color .15s ease;
}

.auth-choice:hover {
  border-color: #9ed6ef;
  background: #f7fcfe;
}

.auth-choice input {
  position: absolute;
  left: 14px;
  top: 14px;
  margin: 0;
}

.auth-choice:has(input:checked) {
  border-color: #00aeef;
  background: #f2fafe;
}

.auth-choice:has(input:focus-visible) {
  box-shadow: 0 0 0 2px rgba(0,174,239, .25);
}

.auth-choice-title {
  display: block;
  font-weight: bold;
}

.auth-choice-note {
  display: block;
  color: #8a949c;
  font-size: 13px;
  margin-top: 2px;
}

/* -------------------------------------------------------------- сообщения -- */
.auth-error {
  margin-bottom: 16px;
  padding: 10px 14px;
  background: #fdecec;
  border: 1px solid #f3bcbc;
  color: #a12222;
  font-size: 14px;
  line-height: 1.4;
}

.auth-notice {
  margin-bottom: 16px;
  padding: 10px 14px;
  background: #eef7fb;
  border: 1px solid #b9dcec;
  color: #1d4d63;
  font-size: 14px;
  line-height: 1.4;
}

/* ------------------------------------------------------------ низ карточки -- */
.auth-links {
  margin-top: 18px;
  font-size: 14px;
  text-align: center;
}

.auth-sep {
  margin: 0 8px;
}

.auth-actions-center {
  text-align: center;
  margin-top: 6px;
}

/* ------------------------------------------------------------------ кнопки -- */
/* копия правил из common-places.css (эти страницы его не подключают) */
.ro-button {
  font-family: 'Proxima Nova', Arial, sans-serif;
  border: 2px solid #00aeef;
  border-radius: 4px;
  display: inline-block;
  padding: 6px 20px 5px;
  text-align: center;
  text-decoration: none;
  position: relative;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  color: #000;
  -webkit-transition: background-color .15s ease;
  transition: background-color .15s ease;
}

.ro-button-large {
  padding: 12px 50px 10px;
}

.ro-button-block {
  display: block;
}

.ro-button-cyan {
  color: #00aeef;
}

.ro-button-cyan-w-bg {
  color: #fff;
  border-color: #00aeef;
  background-color: #00aeef;
}

.ro-button-active,
.ro-button-highlight,
.ro-button:hover {
  color: #fff;
  border-color: #00aeef;
  background-color: #00aeef;
}

.auth-submit {
  width: 100%;
  cursor: pointer;
  font-size: 16px;
}

/* ==========================================================================
   ДИЗАЙН-ЭТАЛОН-1 (п.9): страница входа и регистрации — по макету
   sign in_registration.psd.

   Макет: тёмная панель #00121a во всю ширину сразу под шапкой; по центру
   логотип; табы «ВОЙТИ / РЕГИСТРАЦИЯ» с линией активного таба #408ed6 70×5;
   поля 284 × 50 (белые, без рамки, скругление 3 px, подсказка #555555 16 px);
   кнопка 286 × 56 заливкой #00aeef, белый капс 20 px; разделитель.

   Разметку даёт reg/login_v2.tpl и reg/reg_form_v2.tpl: обёртка .auth-dark,
   логотип .auth-logo, табы .auth-tabs. Соцкнопки 45×45 из макета не переносим:
   входа через соцсети на сайте нет — это была бы нерабочая ссылка.
   ========================================================================== */

.auth-dark {
  background-color: #00121a;
  padding: 36px 0 80px;
}

.auth-dark .auth-page {
  width: 286px;                 /* ширина кнопки из макета */
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.auth-dark .auth-page-wide {
  width: 286px;
}

/* логотип: тот же i/logo.png (белый), что в шапке */
.auth-logo {
  display: block;
  width: 200px;
  height: 22px;
  margin: 0 auto 28px;
  background: url('i/logo.png') no-repeat 50% 50%;
}

/* табы «Войти / Регистрация»: активный — белым, под ним линия #408ed6 5 px */
.auth-tabs {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 24px;
}

.auth-tab {
  position: relative;
  display: table-cell;
  width: 50%;
  padding-bottom: 17px;
  font-family: 'Proxima Nova Condensed Bold';
  font-size: 20px;
  line-height: 20px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: #6b7c85;
}

.auth-tab:hover {
  color: #b9c7cf;
}

.auth-tab-active,
.auth-tab-active:hover {
  color: #fff;
}

/* линия активного таба — 70 × 5 px, цвет #408ed6 (из макета) */
.auth-tab-active:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70px;
  height: 5px;
  margin-left: -35px;
  background-color: #408ed6;
}

/* заголовок дублировал бы активный таб — оставляем только подсказку, бледную */
.auth-dark .auth-head {
  margin-bottom: 18px;
}

.auth-dark .auth-title {
  display: none;
}

.auth-dark .auth-subtitle {
  font-size: 13px;
  line-height: 1.4;
  color: #8a949c;
  text-align: center;
}

/* поля 284 × 50: белые, без рамки, на тёмной панели */
.auth-dark .auth-input {
  width: 284px;
  max-width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 0;
  border-radius: 3px;
  background: #fff;
  color: #000;
  font-size: 16px;
}

.auth-dark select.auth-input {
  height: 50px;
  line-height: 50px;
}

.auth-dark .auth-input:focus {
  border: 0;
  outline: 2px solid #408ed6;
  outline-offset: 0;
}

.auth-dark .auth-input::placeholder {
  color: #555555;
}

/* подпись поля остаётся в разметке для скринридеров, но в макете её не видно:
   текст подсказки стоит прямо в поле (placeholder) */
.auth-dark .auth-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.auth-dark .auth-remember {
  color: #b9c7cf;
  font-size: 13px;
}

.auth-dark .auth-field {
  margin-bottom: 14px;
}

.auth-dark .auth-mark .red,
.auth-dark .auth-mark {
  color: #e9a9a4;
}

.auth-dark .auth-hint,
.auth-dark .auth-hint-body {
  color: #8a949c;
  font-size: 12px;
}

.auth-dark .auth-hint-body {
  background: #0c1f29;
  border-color: #1d3a47;
}

.auth-dark .auth-hint-link {
  color: #8a949c;
}

.auth-dark .auth-captcha-row img {
  max-width: 100%;
  height: auto;
}

.auth-dark .auth-captcha-reload {
  color: #8a949c;
}

/* кнопка отправки 286 × 56 заливкой акцентом, белый капс 20 px */
.auth-dark .ro-button.auth-submit,
.auth-dark .auth-submit {
  display: block;
  box-sizing: border-box;
  width: 286px;
  max-width: 100%;
  height: 56px;
  min-height: 56px;
  line-height: 56px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background-color: #00aeef;
  color: #fff;
  font-family: 'Proxima Nova Regular';
  font-size: 20px;
  text-transform: uppercase;
  cursor: pointer;
}

.auth-dark .auth-submit:hover {
  background-color: #0099d2;
  color: #fff;
}

/* ссылки под формой — на тёмном фоне */
.auth-dark .auth-links {
  margin-top: 22px;
  font-size: 13px;
  color: #8a949c;
}

.auth-dark .auth-links a {
  color: #8a949c;
}

.auth-dark .auth-links a:hover {
  color: #fff;
}

/* сообщения об ошибках на тёмной панели остаются красными */
.auth-dark .auth-error {
  background: #3a1216;
  border-color: #7d2b2b;
  color: #f3b7b7;
}