/* ==========================================
   Форма входа и регистрации в модалке (Module/Auth)
   Оболочку модалки (подложка, диалог, крестик)
   стилизует modal.css; здесь — содержимое формы.
   ========================================== */

.ds-auth {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

/* --- Заголовок и вкладки --- */

.ds-auth__head {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding-right: var(--ds-space-6); /* место под крестик модалки */
}

.ds-auth__title {
  margin: 0;
  color: var(--ds-text-heading);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-font-size-2xl);
  font-weight: 700;
  line-height: 1.2;
}

.ds-auth__tabs:not([hidden]) {
  display: flex;
  gap: var(--ds-space-1);
  padding: 3px;
  background: var(--ds-bg-overlay);
  border-radius: var(--ds-radius-md);
}

.ds-auth__tab {
  flex: 1 1 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-text-muted);
  font-family: var(--ds-font-body);
  font-size: var(--ds-font-size-base);
  cursor: pointer;
  transition: background var(--ds-transition), color var(--ds-transition);
}

.ds-auth__tab:hover { color: var(--ds-text-white); }

.ds-auth__tab.is-active {
  background: var(--ds-bg-accent);
  color: var(--ds-text-on-accent);
}

.ds-auth__tab:focus-visible {
  outline: 2px solid var(--ds-text-link);
  outline-offset: 2px;
}

/* --- Панели --- */

.ds-auth__panel[hidden] { display: none; }

.ds-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

.ds-auth__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ds-auth__label {
  color: var(--ds-text-primary);
  font-size: var(--ds-font-size-sm);
  line-height: 1.3;
}

.ds-auth__input { width: 100%; }

.ds-auth__input:disabled { opacity: .6; }

.ds-auth__captcha {
  min-height: 78px;
  /* Виджет Google фиксированной ширины 304px; на узких экранах
     модалка уже — разрешаем ему сжаться вместе с контейнером. */
  overflow: hidden;
}

/* --- Кнопки --- */

.ds-auth__submit { width: 100%; }

.ds-auth__submit.is-loading,
.ds-auth__submit[aria-disabled="true"] {
  cursor: default;
  opacity: .75;
}

.ds-auth__actions {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

/* --- Ошибки и статусы --- */

.ds-auth__error-wrap[hidden] { display: none; }

.ds-auth__error {
  margin: 0;
  padding: var(--ds-space-2) var(--ds-space-3);
  background: rgb(130 34 39 / 0.18);
  border-left: 3px solid var(--ds-bg-accent);
  border-radius: var(--ds-radius-sm);
  color: #f0b4b8;
  font-size: var(--ds-font-size-sm);
  line-height: 1.45;
}

.ds-auth__resend-link {
  margin-top: var(--ds-space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-text-link);
  font-family: var(--ds-font-body);
  font-size: var(--ds-font-size-sm);
  text-decoration: underline;
  cursor: pointer;
}

.ds-auth__resend-link:hover { color: var(--ds-text-white); }
.ds-auth__resend-link[hidden] { display: none; }

.ds-auth__status {
  margin: 0;
  padding: var(--ds-space-2) var(--ds-space-3);
  border-left: 3px solid var(--ds-border-light);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-overlay);
  color: var(--ds-text-primary);
  font-size: var(--ds-font-size-sm);
  line-height: 1.45;
}

.ds-auth__status[hidden] { display: none; }

.ds-auth__status.is-success {
  border-left-color: var(--ds-bg-success);
  background: rgb(34 130 41 / 0.18);
  color: #b7e0ba;
}

.ds-auth__status.is-error {
  border-left-color: var(--ds-bg-accent);
  background: rgb(130 34 39 / 0.18);
  color: #f0b4b8;
}

/* --- Согласия с документами --- */

/* Сноска под кнопкой «Вход»: без флажков, вход сам считается принятием. */
.ds-auth__consent {
  margin: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-sm);
  line-height: 1.45;
  text-align: center;
}

.ds-auth__consent a { color: var(--ds-text-link); }

/* Флажки регистрации: два отдельных согласия, каждое — свой ряд. */
.ds-auth__consents {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

.ds-auth__consents .ds-auth__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-2);
  text-align: left;
  cursor: pointer;
}

/* Нативный чекбокс в цветах темы; размер выровнен по первой строке текста. */
.ds-auth__checkbox {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--ds-bg-accent);
  cursor: pointer;
}

.ds-auth__consent-text { flex: 1 1 auto; }

/* Невалидный флажок (после попытки отправить): рамка-подсказка фокусируется. */
.ds-auth__checkbox:focus-visible {
  outline: 2px solid var(--ds-text-link);
  outline-offset: 2px;
}

/* --- Подсказки --- */

.ds-auth__hint {
  margin: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-sm);
  line-height: 1.45;
}

.ds-auth__hint a { color: var(--ds-text-link); }

.ds-auth__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-text-link);
  font-family: var(--ds-font-body);
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.ds-auth__link:hover { color: var(--ds-text-white); }

.ds-auth__reset-login {
  color: var(--ds-text-heading);
  font-weight: 700;
}

/* --- Панель «проверьте почту» --- */

.ds-auth__success {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  text-align: center;
}

.ds-auth__success-icon {
  color: var(--ds-bg-success);
  font-size: 40px;
  line-height: 1;
}

.ds-auth__success-title {
  margin: 0;
  color: var(--ds-text-heading);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-font-size-xl);
  font-weight: 700;
}

.ds-auth__success-text {
  margin: 0;
  color: var(--ds-text-primary);
  font-size: var(--ds-font-size-base);
  line-height: 1.5;
}

.ds-auth__success .ds-auth__hint { text-align: center; }

@media (max-width: 480px) {
  .ds-auth__head { padding-right: var(--ds-space-5); }
  .ds-auth__title { font-size: var(--ds-font-size-xl); }
  .ds-auth__captcha { min-height: 78px; }
}