/*
 * WordPress login page in the 2026 design (MPJE Review and MedExPrep).
 * Same look as the in-app sign-in screen (auth.css). Only styling changes;
 * the WordPress forms and every login plugin keep working underneath.
 */
html body.login.mpj-login {
  --ml-accent: var(--mpj-auth-accent, var(--mpj-blue, #1a4f9c));
  --ml-accent-hover: var(--mpj-auth-accent-hover, var(--mpj-blue-hover, #153f7d));
  --ml-ink: var(--mpj-auth-ink, linear-gradient(150deg, #10234a 0%, #17386b 52%, #135566 100%));
  --ml-tick: var(--mpj-auth-tick, #7fd8d4);
  display: grid !important;
  grid-template-columns: minmax(380px, 0.95fr) minmax(0, 1.25fr);
  grid-auto-rows: min-content;
  align-content: start;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--mpj-paper, #f5f7fa) !important;
  color: var(--mpj-text, #1c2738);
  font-family: var(--mpj-sans) !important;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
html body.login.mpj-login *:not(.dashicons):not([class*="dashicons-"]) { font-family: inherit; }
html body.login.mpj-login .dashicons,
html body.login.mpj-login .dashicons::before { font-family: dashicons !important; }
html body.login.mpj-login *,
html body.login.mpj-login *::before,
html body.login.mpj-login *::after { box-sizing: border-box; }

/* Earlier login skins (theme split panel, background art) step aside. */
html body.login.mpj-login .login-split,
html body.login.mpj-login .split-overlay,
html body.login.mpj-login > .language-switcher { display: none !important; }
html body.login.mpj-login::before,
html body.login.mpj-login::after { content: none !important; display: none !important; }

/* Every direct child sits in the form column; the brand panel spans all rows. */
html body.login.mpj-login > * { grid-column: 2; }
html body.login.mpj-login > .mpj-login__aside {
  grid-column: 1;
  grid-row: 1 / span 40;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 56px clamp(32px, 4.5vw, 72px) 40px;
  background: var(--ml-ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.mpj-login__aside::before,
.mpj-login__aside::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.mpj-login__aside::before { width: 520px; height: 520px; right: -220px; top: -180px; background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 68%); }
.mpj-login__aside::after { width: 420px; height: 420px; left: -160px; bottom: -200px; background: radial-gradient(circle, rgba(127,216,212,.16) 0%, rgba(127,216,212,0) 70%); }
.mpj-login__asideInner { margin: auto 0; max-width: 440px; }
.mpj-login__eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.mpj-login__pitch { margin: 0 0 28px; font-family: var(--mpj-serif, var(--mpj-sans)) !important; font-size: clamp(28px, 2.6vw, 38px); font-weight: 600; line-height: 1.18; letter-spacing: -.01em; color: #fff; }
.mpj-login__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mpj-login__points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.9); }
.mpj-login__tick { flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--ml-tick); }
.mpj-login__tick svg { width: 16px; height: 16px; }
.mpj-login__asideFoot { margin: 0; font-size: 13px; color: rgba(255,255,255,.62); max-width: 440px; }

/* Form column */
html body.login.mpj-login #login {
  width: 100% !important;
  max-width: 488px !important;
  margin: 0 auto !important;
  padding: clamp(32px, 9vh, 96px) 24px 16px !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  background: none !important;
  box-shadow: none !important;
  float: none !important;
}

/* Logo (each site's own) */
html body.login.mpj-login #login h1,
html body.login.mpj-login #login h1.wp-login-logo { margin: 0 0 28px !important; padding: 0 !important; text-align: left !important; }
html body.login.mpj-login #login h1 a {
  display: block !important;
  width: 200px !important;
  height: 44px !important;
  margin: 0 !important;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  text-indent: -9999px;
  overflow: hidden;
}
html body.login.mpj-login #login h1 a:has(img) { text-indent: 0; width: auto !important; height: auto !important; background: none !important; }
html body.login.mpj-login #login h1 a img { display: block; height: 44px !important; width: auto !important; max-width: 200px !important; object-fit: contain; }

/* Heading added above each form */
.mpj-login__head { margin: 0 0 20px; }
html body.login.mpj-login .mpj-login__title {
  margin: 0 0 6px !important;
  font-family: var(--mpj-serif, var(--mpj-sans)) !important;
  font-size: 30px !important;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--mpj-navy, #162c55) !important;
  text-align: left !important;
}
.mpj-login__lede { margin: 0; color: var(--mpj-muted, #5a6879); font-size: 15px; }

/* WordPress notices */
html body.login.mpj-login #login .message,
html body.login.mpj-login #login .notice,
html body.login.mpj-login #login #login_error,
html body.login.mpj-login #login .success {
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--mpj-blue-line, #c9d8ef) !important;
  border-left-width: 1px !important;
  border-radius: 10px !important;
  background: var(--mpj-blue-soft, #eaf1fb) !important;
  color: var(--mpj-text, #1c2738) !important;
  box-shadow: none !important;
  font-size: 14px;
  line-height: 1.5;
}
html body.login.mpj-login #login #login_error,
html body.login.mpj-login #login .notice-error {
  border-color: #f1c9c9 !important;
  background: var(--mpj-danger-bg, #fbecec) !important;
  color: var(--mpj-danger, #a33030) !important;
}
html body.login.mpj-login #login #login_error a { color: inherit !important; font-weight: 600; }

/* The card */
html body.login.mpj-login #loginform,
html body.login.mpj-login #registerform,
html body.login.mpj-login #lostpasswordform,
html body.login.mpj-login #resetpassform {
  margin: 0 !important;
  padding: 32px 32px 28px !important;
  background: var(--mpj-surface, #fff) !important;
  border: 1px solid var(--mpj-line, #dde3eb) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(15,33,66,.05), 0 12px 32px rgba(15,33,66,.08) !important;
  overflow: visible !important;
}
html body.login.mpj-login #login form p,
html body.login.mpj-login #login form .user-pass-wrap { margin: 0 0 18px !important; }
html body.login.mpj-login #login form label {
  display: block;
  margin: 0 0 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--mpj-text, #1c2738) !important;
}
html body.login.mpj-login #login form input[type="text"],
html body.login.mpj-login #login form input[type="email"],
html body.login.mpj-login #login form input[type="password"] {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--mpj-line-strong, #c6cfdb) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--mpj-text, #1c2738) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  box-shadow: inset 0 1px 1px rgba(15,33,66,.04) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html body.login.mpj-login #login form input[type="text"]:focus,
html body.login.mpj-login #login form input[type="email"]:focus,
html body.login.mpj-login #login form input[type="password"]:focus {
  outline: none !important;
  border-color: var(--ml-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ml-accent) 22%, transparent) !important;
}
html body.login.mpj-login #login .wp-pwd { position: relative; margin: 0 !important; }
html body.login.mpj-login #login .wp-pwd input[type="password"],
html body.login.mpj-login #login .wp-pwd input[type="text"] { padding-right: 52px !important; }
html body.login.mpj-login #login .wp-pwd .button.wp-hide-pw {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 42px !important;
  height: 40px !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--mpj-muted, #5a6879) !important;
  box-shadow: none !important;
}
html body.login.mpj-login #login .wp-pwd .button.wp-hide-pw:hover { background: var(--mpj-sunken, #f0f3f7) !important; }
html body.login.mpj-login #login .wp-pwd .button.wp-hide-pw:focus { box-shadow: 0 0 0 2px var(--ml-accent) !important; }

/* Remember me + submit: stacked, full-width button */
html body.login.mpj-login #login .forgetmenot {
  float: none !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 2px 0 20px !important;
}
html body.login.mpj-login #login .forgetmenot label { display: inline !important; margin: 0 !important; font-weight: 500 !important; color: var(--mpj-muted, #5a6879) !important; }
html body.login.mpj-login #login input[type="checkbox"] {
  width: 18px !important; height: 18px !important; min-width: 18px;
  margin: 0 !important;
  border-radius: 4px !important;
  accent-color: var(--ml-accent);
}
html body.login.mpj-login #login input[type="checkbox"]:checked::before { margin: -2px 0 0 -2px; }
html body.login.mpj-login #login .forgetmenot .wp-tooltip,
html body.login.mpj-login #login .forgetmenot .wp-is-toggletip { margin-left: 2px; }
html body.login.mpj-login #login p.submit { float: none !important; clear: both; margin: 0 !important; }
html body.login.mpj-login #login .submit .button-primary,
html body.login.mpj-login #login #wp-submit {
  float: none !important;
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--ml-accent) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 50px !important;
  text-shadow: none !important;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,33,66,.12), 0 6px 16px color-mix(in srgb, var(--ml-accent) 28%, transparent) !important;
  transition: background-color .15s ease, transform .15s ease;
}
html body.login.mpj-login #login #wp-submit:hover { background: var(--ml-accent-hover) !important; }
html body.login.mpj-login #login #wp-submit:active { transform: translateY(1px); }
html body.login.mpj-login #login #wp-submit:focus { outline: 3px solid color-mix(in srgb, var(--ml-accent) 40%, transparent) !important; outline-offset: 2px; }
html body.login.mpj-login #login #wp-submit.is-busy { opacity: .8; cursor: progress; }
html body.login.mpj-login #login .indicator-hint,
html body.login.mpj-login #login #pass-strength-result { margin: 10px 0 0 !important; border-radius: 8px; font-size: 13px; }
html body.login.mpj-login #login #reg_passmail { color: var(--mpj-muted, #5a6879); font-size: 14px; }

/* Social sign-in (Nextend), below or above the button */
html body.login.mpj-login #nsl-custom-login-form-main { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--mpj-line, #dde3eb); }
html body.login.mpj-login #nsl-custom-login-form-main .nsl-container { margin: 0 !important; padding: 0 !important; }
html body.login.mpj-login #nsl-custom-login-form-main .nsl-container-buttons { display: grid !important; gap: 10px; padding: 0 !important; }
html body.login.mpj-login #nsl-custom-login-form-main .nsl-container-buttons a { display: block !important; width: 100% !important; margin: 0 !important; }
html body.login.mpj-login #nsl-custom-login-form-main .nsl-button {
  width: 100% !important;
  min-height: 46px;
  justify-content: center;
  border-radius: 10px !important;
  box-shadow: none !important;
  border: 1px solid var(--mpj-line-strong, #c6cfdb) !important;
}

/* Links under the card */
html body.login.mpj-login #login #nav,
html body.login.mpj-login #login #backtoblog,
html body.login.mpj-login #login .privacy-policy-page-link {
  margin: 20px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 14px !important;
  color: var(--mpj-faint, #8592a3) !important;
  text-shadow: none !important;
}
html body.login.mpj-login #login #backtoblog { margin-top: 10px !important; }
html body.login.mpj-login #login #nav a,
html body.login.mpj-login #login #backtoblog a,
html body.login.mpj-login #login .privacy-policy-page-link a {
  color: var(--ml-accent) !important;
  font-weight: 600;
  text-decoration: none !important;
}
html body.login.mpj-login #login #backtoblog a,
html body.login.mpj-login #login .privacy-policy-page-link a { color: var(--mpj-muted, #5a6879) !important; font-weight: 500; }
html body.login.mpj-login #login #nav a:hover,
html body.login.mpj-login #login #backtoblog a:hover,
html body.login.mpj-login #login .privacy-policy-page-link a:hover { text-decoration: underline !important; }
html body.login.mpj-login a:focus { box-shadow: none; outline: 2px solid var(--ml-accent); outline-offset: 2px; border-radius: 4px; }

html body.login.mpj-login.admin-bar > .mpj-login__aside { top: 32px; height: calc(100vh - 32px); }

@media (max-width: 960px) {
  html body.login.mpj-login { grid-template-columns: 1fr; }
  html body.login.mpj-login > * { grid-column: 1; }
  html body.login.mpj-login > .mpj-login__aside { display: none !important; }
  html body.login.mpj-login #login { padding-top: 40px !important; }
}
@media (max-width: 480px) {
  html body.login.mpj-login #login { padding: 28px 16px 16px !important; }
  html body.login.mpj-login #loginform,
  html body.login.mpj-login #registerform,
  html body.login.mpj-login #lostpasswordform,
  html body.login.mpj-login #resetpassform { padding: 24px 20px 22px !important; border-radius: 14px !important; }
  html body.login.mpj-login .mpj-login__title { font-size: 25px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body.login.mpj-login * { transition: none !important; }
}