/* iBlogger v138 — mobile auth renderer isolation.
   The mobile auth experience is rendered by .mobile-approved-render.
   Older !important header/layout rules were outranking the generic hide rules,
   leaving the original desktop header and original auth main visible below it. */
@media (max-width: 620px) {
  html body.auth-page.mobile-approved-rendered > header#siteHeader#siteHeader#siteHeader#siteHeader#siteHeader,
  html body.auth-page.mobile-approved-rendered > main#authMain#authMain#authMain#authMain#authMain {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }


  /* Keep the shared recovery modal and toast host usable even though the
     legacy auth page shell is hidden beneath the mobile renderer. */
  html body.auth-page.mobile-approved-rendered > #recoveryDialog.auth-dialog:not([hidden]) {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9000 !important;
  }

  html body.auth-page.mobile-approved-rendered > .auth-toast-region {
    display: grid !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  /* The approved auth header must participate in normal flow, not overlap
     the intro panel as the shared absolute-positioned header rule intended
     for other mobile pages would otherwise force it to do. */
  html body.auth-page.mobile-approved-rendered .mobile-approved-render .mar-auth > header.mar-header.mar-auth-site-header {
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 75px !important;
    margin: 0 !important;
    padding: 10px 0 0 !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
    z-index: 20 !important;
  }

  html body.auth-page.mobile-approved-rendered .mobile-approved-render .mar-auth .mar-auth-intro h1 {
    color: #fff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .22) !important;
  }

  html body.auth-page.mobile-approved-rendered .mobile-approved-render .mar-auth-card .mar-field-error {
    display: block !important;
    margin: 5px 0 0 !important;
    color: #b42345 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    text-align: right !important;
  }

  html body.auth-page.mobile-approved-rendered .mobile-approved-render .mar-auth-card .mar-field-error[hidden] {
    display: none !important;
  }

  html body.auth-page.mobile-approved-rendered .mobile-approved-render .mar-auth-card .mar-check + .mar-field-error {
    margin: -7px 0 12px !important;
    padding-inline: 2px !important;
  }

  html body.auth-page.mobile-approved-rendered .mobile-approved-render .mar-auth-site-header .mar-header-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 65px !important;
    height: 65px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  html body.auth-page.mobile-approved-rendered .mobile-approved-render {
    width: 100% !important;
    max-width: 620px !important;
    min-height: 100svh !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  html body.auth-page.mobile-approved-rendered .mobile-approved-render .mar-auth {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 30px !important;
  }


  html body.auth-page.mobile-approved-rendered .mobile-approved-render .mobile-unified-footer .muf-actions a.is-primary {
    color: #fff !important;
  }

  html body.auth-page.mobile-approved-rendered .mobile-approved-render .mobile-unified-footer {
    position: relative !important;
    clear: both !important;
    margin-top: 22px !important;
  }
}

@media (min-width: 621px) {
  html body.auth-page .mobile-approved-render {
    display: none !important;
  }
}