/* ============================
   Converse Login — Minimal Mode
   ============================ */

/* 0) Базовое центрирование */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1) Прячем всё вне Converse */
header, nav, footer {
  display: none !important;
}

/* 2) Контейнер Converse по центру */
#conversejs {
  width: 100% !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 3) Убираем всё лишнее внутри Converse */
#conversejs a,
#conversejs .brand-heading,
#conversejs .brand-subtitle,
#conversejs .converse-branding,
#conversejs .converse-footer,
#conversejs .converse-version,
#conversejs .login-bottom,
#conversejs .login-register,
#conversejs .register-account,
#conversejs .create-account,
#conversejs .register-link,
#conversejs .helptext,
#conversejs small,
#conversejs .info,
#conversejs [class*="help"],
#conversejs [class*="brand"],
#conversejs [class*="footer"],
#conversejs [class*="version"] {
  display: none !important;
}

/* 4) Форма */
#conversejs form {
  width: min(460px, 92vw) !important;
  margin: 0 !important;
}

/* 5) Поля ввода */
#conversejs input[type="text"],
#conversejs input[type="email"],
#conversejs input[type="password"],
#conversejs input[type="search"] {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 48px !important;
  border-radius: 12px !important;
}

/* 6) Кнопка логина */
#conversejs button,
#conversejs input[type="submit"] {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
}

/* ============================
   Trusted Device — ровно и аккуратно
   ============================ */

/* Контейнер строки с чекбоксом */
#conversejs .form-check,
#conversejs .checkbox,
#conversejs .field-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 14px 0 18px 0 !important;
  font-size: 14px !important;
  opacity: 0.9;
}

/* Сам чекбокс */
#conversejs input[type="checkbox"] {
  display: inline-block !important;
  margin: 0 !important;
  transform: scale(1.15);
  vertical-align: middle !important;
}

/* Подпись рядом с чекбоксом */
#conversejs input[type="checkbox"] + label,
#conversejs input[type="checkbox"] ~ label,
#conversejs input[type="checkbox"] + span,
#conversejs input[type="checkbox"] ~ span {
  display: inline-block !important;
  margin: 0 !important;
  font-size: 14px !important;
  opacity: 0.9;
  vertical-align: middle !important;
}

/* Прячем info-иконки */
#conversejs [class*="info"],
#conversejs [class*="fa-info"],
#conversejs [class*="info-circle"] {
  display: none !important;
}

/* 7) Убираем любые <p> на логине */
#conversejs p {
  display: none !important;
}

/* ============================
   Жёсткое центрирование формы
   ============================ */

/* Убираем влияние внутренних контейнеров */
#conversejs > div,
#conversejs .converse-container,
#conversejs .login-container,
#conversejs .row {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

/* Центрируем саму форму */
#conversejs form {
  margin: 0 auto !important;
}