/* public/assets/css/app-auth-mobile.css */
/* Мобильная версия login.php + register.php */
/* Цвета НЕ меняем — используем существующие переменные */

html.mhk-app-webview,
html.mhk-app-webview body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html.mhk-app-webview * {
  box-sizing: border-box;
}

html.mhk-app-webview body {
  min-height: 100svh !important;
  height: auto !important;

  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;

  margin: 0 !important;
  padding: calc(10px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom)) !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Декоративные большие круги на мобильном уменьшаем */
html.mhk-app-webview body::before {
  width: 190px !important;
  height: 190px !important;
  left: -70px !important;
  bottom: -70px !important;
}

html.mhk-app-webview body::after {
  width: 170px !important;
  height: 170px !important;
  right: -70px !important;
  top: -70px !important;
}

/* Страница */
html.mhk-app-webview .page {
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Язык */
html.mhk-app-webview .mhk-lang-floating {
  position: static !important;
  width: 100% !important;

  display: flex !important;
  justify-content: flex-end !important;

  margin: 0 0 10px !important;
  padding: 0 !important;
}

html.mhk-app-webview .mhk-lang-custom {
  max-width: 100% !important;
}

html.mhk-app-webview .lang-btn {
  min-height: 38px !important;
  border-radius: 999px !important;
  padding: 8px 11px !important;
}

html.mhk-app-webview .lang-list {
  right: 0 !important;
  min-width: 150px !important;
  border-radius: 16px !important;
}

/* Общая сетка */
html.mhk-app-webview .wrap {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;

  align-items: stretch !important;
}

/* Промо-блок на мобильном прячем, чтобы форма была сразу доступна */
html.mhk-app-webview .promo {
  display: none !important;
}

/* Карточка формы */
html.mhk-app-webview .card {
  width: 100% !important;
  min-height: auto !important;
  max-width: 100% !important;

  border-radius: 26px !important;
  padding: 18px !important;

  justify-content: flex-start !important;
}

/* Верх карточки */
html.mhk-app-webview .card__top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;

  margin-bottom: 16px !important;
}

html.mhk-app-webview .card__brand {
  min-width: 0 !important;
  gap: 10px !important;
}

html.mhk-app-webview .card__mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  font-size: 17px !important;
  flex: 0 0 auto !important;
}

html.mhk-app-webview .card__eyebrow {
  max-width: 100% !important;
  padding: 5px 9px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}

html.mhk-app-webview .card__title {
  font-size: 21px !important;
  line-height: 1.15 !important;
}

html.mhk-app-webview .card__subtitle {
  margin-top: 5px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html.mhk-app-webview .card__meta {
  display: none !important;
}

/* Ошибки */
html.mhk-app-webview .errors {
  border-radius: 18px !important;
  padding: 12px 13px !important;
  margin-bottom: 14px !important;

  font-size: 13px !important;
  line-height: 1.35 !important;
}

html.mhk-app-webview .errors ul {
  padding-left: 18px !important;
}

/* Форма */
html.mhk-app-webview form {
  gap: 13px !important;
}

html.mhk-app-webview .field-label {
  margin-bottom: 7px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

/* Поля */
html.mhk-app-webview .field-input {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;

  border-radius: 16px !important;
  padding: 0 13px !important;

  font-size: 16px !important;
  line-height: 1.2 !important;
}

html.mhk-app-webview .input-inline {
  width: 100% !important;
  display: flex !important;
  align-items: stretch !important;
}

html.mhk-app-webview .prefix {
  min-width: 72px !important;
  height: 48px !important;

  border-radius: 16px 0 0 16px !important;
  padding: 0 12px !important;

  font-size: 14px !important;
}

html.mhk-app-webview .input-inline .field-input {
  border-radius: 0 16px 16px 0 !important;
  min-width: 0 !important;
}

/* Подсказки */
html.mhk-app-webview .field-hint,
html.mhk-app-webview .phone-check-msg,
html.mhk-app-webview .small-muted {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

html.mhk-app-webview .field-hint {
  margin-top: 7px !important;
}

html.mhk-app-webview .small-muted {
  margin-top: 10px !important;
}

/* Legal block на регистрации */
html.mhk-app-webview .legal-box {
  border-radius: 18px !important;
  padding: 12px 13px !important;
}

html.mhk-app-webview .legal-check {
  gap: 10px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

html.mhk-app-webview .legal-check input {
  width: 20px !important;
  height: 20px !important;
  margin-top: 1px !important;
}

html.mhk-app-webview .legal-links {
  margin-top: 10px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

html.mhk-app-webview .legal-link-btn {
  width: 100% !important;
  min-height: 36px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Кнопки */
html.mhk-app-webview .actions {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;

  margin-top: 8px !important;
}

html.mhk-app-webview .btn-primary {
  width: 100% !important;
  min-height: 50px !important;

  border-radius: 17px !important;
  padding: 0 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 14px !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

html.mhk-app-webview .btn-primary:hover {
  transform: none !important;
}

html.mhk-app-webview .btn-link {
  width: 100% !important;
  min-height: 42px !important;

  border-radius: 15px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 13px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

/* Модалка правил на регистрации */
html.mhk-app-webview .legal-modal {
  padding: 12px !important;
  align-items: flex-end !important;
}

html.mhk-app-webview .legal-modal__box {
  width: 100% !important;
  max-height: 86svh !important;
  border-radius: 24px 24px 18px 18px !important;
}

html.mhk-app-webview .legal-modal__head {
  padding: 14px 15px !important;
}

html.mhk-app-webview .legal-modal__title {
  font-size: 17px !important;
  line-height: 1.2 !important;
}

html.mhk-app-webview .legal-modal__close {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 auto !important;
}

html.mhk-app-webview .legal-modal__body {
  padding: 14px 15px calc(18px + env(safe-area-inset-bottom)) !important;
}

html.mhk-app-webview .legal-section h4 {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

html.mhk-app-webview .legal-section p {
  font-size: 12px !important;
  line-height: 1.55 !important;
}

/* Маленькие экраны */
@media (max-width: 380px) {
  html.mhk-app-webview body {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html.mhk-app-webview .card {
    padding: 16px !important;
    border-radius: 24px !important;
  }

  html.mhk-app-webview .card__mark {
    width: 38px !important;
    height: 38px !important;
  }

  html.mhk-app-webview .card__title {
    font-size: 19px !important;
  }

  html.mhk-app-webview .card__subtitle {
    font-size: 11px !important;
  }

  html.mhk-app-webview .prefix {
    min-width: 66px !important;
    font-size: 13px !important;
  }
}