/* ============================================================================
 * Modern UI — customer sign-in screens (login, forgot / reset password)
 * ----------------------------------------------------------------------------
 * Mirrors the staff sign-in (mvx-ui-auth.css supplies the form controls and the
 * showcase-panel cards) inside the customers-area layout: html.mpx-auth is set
 * pre-paint by mvx_ui_portal_head(), hiding the portal nav / footer, and
 * views/portal_auth.php renders the stock theme view inside .mpa-form.
 * Split from 1024px; below that it is a single centred form column.
 * ========================================================================== */
html.mpx-auth body.customers { background: #fff !important; font-family: var(--au-font); }
html.mpx-auth body.customers::before { display: none; }
html.mpx-auth body.customers .navbar.header,
html.mpx-auth body.customers footer.footer,
html.mpx-auth body.customers .customer-top-submenu { display: none !important; }
html.mpx-auth body.customers #wrapper, html.mpx-auth body.customers #content { padding: 0 !important; margin: 0; min-height: 0; }
html.mpx-auth body.customers #content > .container { width: auto; max-width: none; padding: 0; margin: 0; }
html.mpx-auth body.customers #content > .container > .row { margin: 0; }
html.mpx-auth body.customers #content > .container > .row:empty { display: none; }
html.mpx-auth body.customers #content { view-transition-name: none; }

/* ── Shell ────────────────────────────────────────────────────────────────── */
.mpa-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.mpa-main { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: 28px 20px 24px; }
.mpa-logo { animation: au-rise .5s var(--au-ease) both; }
.mpa-logo a { display: inline-block; }
.mpa-logo img { max-height: 40px; width: auto; }
.mpa-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 12.5px; color: var(--au-faint); animation: au-rise .5s var(--au-ease) .25s both; }
.mpa-foot a { color: var(--au-muted) !important; font-weight: 500; }
.mpa-foot a:hover { color: var(--au-ink) !important; }
@media (min-width: 1024px) {
  .mpa-shell { grid-template-columns: minmax(440px, 1fr) minmax(0, 1.08fr); }
  .mpa-main { padding: 36px 56px 28px; }
  .mpa-aside { min-height: calc(100vh - 20px); }
}

/* ── Form column: neutralise the stock bootstrap grid inside it ───────────── */
html.mvx-ui .mpa-form[class*="authentication-form-wrapp"] {
  width: 100%; max-width: 380px !important; margin: auto !important; padding: 48px 0 !important;
}
.mpa-form .container, .mpa-form .row { width: auto; padding: 0; margin: 0; }
.mpa-form [class*="col-md-"], .mpa-form [class*="col-sm-"] { width: 100% !important; float: none !important; margin-left: 0 !important; padding: 0 !important; }
.mpa-form .mtop40 { margin-top: 0 !important; }
.mpa-form .text-center:not(.btn) { text-align: left !important; }
.mpa-form h1 { font-size: 30px !important; text-align: left !important; margin: 0 0 30px !important; }
.mpa-form h1::after { content: var(--mpa-sub, ''); display: block; margin-top: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--au-muted); }
.mpa-form .panel_s, .mpa-form .panel { background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0; animation: au-rise .55s var(--au-ease) .14s both; }
html.mvx-ui body.customers .mpa-form .panel-body { padding: 0 !important; }
.mpa-form .form-group { margin-bottom: 18px; }
.mpa-form .tw-mt-6 { margin-top: 22px !important; }
.mpa-form .btn-block + .btn-block { margin-top: 10px; }
html.mvx-ui .mpa-form .btn-default {
  height: 42px; border-radius: 9px; font-weight: 500; font-size: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--au-card); border: 1px solid var(--au-line-2); color: var(--au-ink) !important; box-shadow: 0 1px 2px rgba(9, 9, 11, .05);
  transition: background .15s, border-color .15s, transform .12s;
}
html.mvx-ui .mpa-form .btn-default:hover { background: #fafafa; border-color: color-mix(in srgb, var(--au-line-2) 55%, var(--au-muted)); }
html.mvx-ui .mpa-form .btn:active { transform: scale(.98); }
html.mvx-ui .mpa-form .btn-primary { width: 100%; }
.mpa-form .bootstrap-select.form-control { border: 0 !important; padding: 0 !important; box-shadow: none !important; height: auto !important; background: transparent !important; }
.mpa-form .bootstrap-select > .dropdown-toggle { height: 42px; border-radius: 9px !important; border: 1px solid var(--au-line-2) !important; background: var(--au-input) !important; box-shadow: 0 1px 2px rgba(9, 9, 11, .05) !important; }
.mpa-form .bootstrap-select .filter-option-inner-inner { line-height: 26px; color: var(--au-ink); }
.mpa-form .text-danger, .mpa-form p.text-danger { font-size: 12.5px; margin: 6px 0 0; }
.mpa-form .g-recaptcha { transform-origin: 0 0; }

.mpa-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px; padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 500;
  color: var(--au-ink-2); background: #fafafa; border: 1px solid var(--au-line); animation: au-rise .5s var(--au-ease) both;
}
.mpa-eyebrow i { font-size: 10px; color: var(--ui-accent); }

/* ── Showcase panel: customer-flavoured extras on top of the staff cards ──── */
html.mvx-ui body.customers .mvx-aa-copy h2 { color: #fafafa !important; font-family: var(--au-font); }
.mpa-doc { color: #0b0b0f; font-size: 10.5px; }
.mpa-reply { gap: 10px !important; }
.mpa-reply b { color: #fafafa; font-weight: 500; }
.mpa-reply-dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ui-accent) 70%, #fff); position: relative; flex: none; }
.mpa-reply-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: mpa-ping 2s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes mpa-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
.mvx-aa-ok i { font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .mpa-shell *, .mpa-shell *::before, .mpa-shell *::after { animation: none !important; transition: none !important; }
}