/**
 * Auth pages — centered login card (login, forgot/reset password, activation).
 * Scoped to .mkt-auth-* so client/admin workspace forms are untouched.
 */

body.auth-page main.page-main.p9-content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: auto;
  padding: calc(var(--header-h) + clamp(1rem, 2.5vw, 1.5rem)) clamp(1rem, 4vw, 1.5rem)
    clamp(2.5rem, 6vw, 4rem) !important;
}

body.auth-page main.page-main.p9-content > .container {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: min(42rem, 100%);
  padding-inline: 0;
  width: 100%;
}

body.auth-page .mkt-auth-shell {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  margin-inline: auto;
  max-width: 100%;
  width: 100%;
}

body.auth-page .mkt-auth-card {
  background: var(--p9-bg-card, var(--bg-card));
  border: 1px solid var(--border-hi, rgba(20, 200, 255, 0.35));
  border-radius: var(--p9-radius-xl, 1.25rem);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(20, 200, 255, 0.08),
    0 0 48px rgba(59, 45, 92, 0.16);
  box-sizing: border-box;
  margin-inline: auto;
  max-width: min(42rem, 100%);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  width: 100%;
}

body.auth-page .mkt-auth-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  max-width: 100%;
  padding: 0 !important;
  width: 100%;
}

body.auth-page .mkt-auth-form .mb-3,
body.auth-page .mkt-auth-form .mb-4 {
  max-width: 100%;
}

body.auth-page .mkt-auth-form .form-control {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}

body.auth-page .mkt-auth-form .password-field-wrap {
  max-width: 100%;
  width: 100%;
}

body.auth-page .mkt-auth-form .btn-primary,
body.auth-page .mkt-auth-form .btn-outline-secondary {
  max-width: 100%;
}

@media (max-width: 575.98px) {
  body.auth-page .mkt-auth-card {
    border-radius: var(--p9-radius-lg, 1rem);
    padding: 1.5rem 1.25rem;
  }

  body.auth-page main.page-main.p9-content {
    padding-inline: 1rem !important;
  }
}