/**
 * Restyle for the MemberPress ReadyLaunch login page, loaded as a dependent
 * of MemberPress's own "mp-pro-theme"/"mp-pro-login" styles (see
 * class-mepr-readylaunch-overrides.php) so it always loads after them in the
 * cascade. Targets the "em-mepr-auth-*" classes added in
 * mepr-views/readylaunch/login/form.php, which sit alongside MemberPress's
 * own classes rather than replacing them -- MemberPress's own rules still
 * apply first, these refine on top.
 *
 * Palette matches frontend-next's brand tokens (frontend-next/src/app/globals.css):
 * --brand-primary #f59e0b, --brand-primary-strong #d97706,
 * --brand-on-primary #1a1205, --brand-secondary #2271b1.
 */

/*
 * The background lives on <body>, not #mepro-login-hero: that element has
 * its own max-width (640px) from MemberPress's login.css, meant to cap the
 * login box's content width -- fine for the box, but it also clipped the
 * background to that width, leaving bare space on either side on wide
 * screens. <body> has no such constraint, so the gradient now paints the
 * full viewport regardless of how wide the content column is.
 */
/*
 * !important alone isn't enough here: MemberPress's own
 * ReadyLaunchCtrl::theme_style() injects "body.mepr-guest-layout{
 * background:#ffffff!important}" as an inline <style> block on every
 * request, with the *same* specificity as a plain "body.mepr-guest-layout"
 * rule -- and it prints later in <head> than this stylesheet, so on a
 * specificity tie it would still win the source-order tiebreak. Adding the
 * redundant "html" type selector bumps specificity just enough to win
 * outright, regardless of print order.
 */
html body.mepr-guest-layout {
  background:
    radial-gradient(circle at 18% 12%, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0) 42%),
    radial-gradient(circle at 86% 90%, rgba(34, 113, 177, 0.1), rgba(34, 113, 177, 0) 45%),
    #fffdfb !important;
}

/*
 * The theme's own header bar only ever shows an unconfigured, empty
 * WordPress Site Identity logo on this page (a separate concern from the
 * brand lockup already added inside the login card itself in form.php) --
 * hiding it also reclaims the vertical space it was reserving above the
 * card.
 */
#masthead.site-header {
  display: none;
}

#mepro-login-hero.em-mepr-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
}

/*
 * Their own ".mepr-pro-template #primary > #mepro-login-hero { padding-left:
 * 0; padding-right: 0; }" (login.css) has TWO id selectors (#primary and
 * #mepro-login-hero) against this rule's one -- it wins regardless of
 * load order, specificity trumps source order within the same
 * !important tier. Invisible on wide screens (the centred 420px-max
 * card leaves huge margins either way), but on a narrow screen it zeroes
 * the only thing keeping the card off the viewport edge. Matches their
 * selector chain (same two ids plus the ".mepr-pro-template" ancestor
 * class) to be unambiguously stronger rather than tie on count. Shared by
 * all four "#mepro-login-hero" pages (login, forgot-password, its
 * confirmation screen, and reset-password) -- one fix here covers all of
 * them.
 */
.mepr-pro-template #primary #mepro-login-hero.em-mepr-auth {
  padding-left: 16px;
  padding-right: 16px;
}

#mepro-login-hero.em-mepr-auth .em-mepr-auth-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04), 0 16px 40px -16px rgba(26, 26, 26, 0.18);
  padding: 0;
  display: flex;
  flex-direction: column;
}

#mepro-login-hero.em-mepr-auth.with-sidebar .em-mepr-auth-card {
  max-width: 920px;
  flex-direction: row;
  overflow: hidden;
}

#mepro-login-hero.em-mepr-auth .em-mepr-auth-card-inner {
  padding: 40px 32px;
  flex: 1 1 auto;
  min-width: 0;
}

.em-mepr-auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.em-mepr-auth-logo {
  height: 48px;
  width: auto;
}

.em-mepr-auth-title.em-mepr-auth-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  margin: 0 0 4px;
}

.em-mepr-auth-subtitle {
  font-size: 0.9rem;
  color: #6b6b6b;
  text-align: center;
  margin: 0 0 24px;
}

.em-mepr-auth-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fef3e2;
  color: #92400e;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.875rem;
  margin-bottom: 20px;
}

.em-mepr-auth-notice svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.em-mepr-auth-field {
  margin-bottom: 16px;
}

.em-mepr-auth-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #3a3a3a;
  margin-bottom: 6px;
}

/*
 * The username/password fields use MemberPress's own floating-label
 * pattern: label.placeholder-text sits visually on top of the input via
 * "position:absolute" (see plugins/memberpress/css/ui/theme.css) until
 * MemberPress's own JS adds an ".active" class on focus/input, which
 * transforms it up into a small label above the value. That JS only
 * listens for focus/input events, which browsers don't reliably fire when
 * autofilling a saved password -- so an autofilled field can end up with
 * the filled value AND the "placeholder" label overlapping, with the label
 * drawn on top since it's the later/higher element in paint order.
 *
 * :has(input:autofill) alone turned out not reliable enough in practice.
 * The primary mechanism now is :not(:placeholder-shown): both inputs carry
 * a (visually blank) placeholder=" " attribute in form.php specifically so
 * this pseudo-class has something to toggle on, and -- unlike :autofill --
 * it reflects "does this input have a value" directly, which is true
 * whether that value arrived by typing or by autofill, in every modern
 * browser, with no autofill-detection heuristics involved. :has() is still
 * needed structurally since the label sits *before* the input in the DOM
 * (for the username row) or as its sibling-via-wrapper (for the password
 * row) -- there's no plain CSS combinator that selects a preceding sibling,
 * so the shared ".mp-form-row" ancestor is what :has() tests instead.
 * input:autofill is kept as a second, belt-and-belt check.
 *
 * The "#mepr_loginform" prefix below isn't decorative: MemberPress's own
 * base rule for this label is "#mepr_loginform .mp-form-label
 * label.placeholder-text" -- an id selector, specificity (1,2,1). A version
 * of this rule without an id, however many classes it stacks, can only ever
 * reach specificity (0,n,n) and loses to theirs regardless of load order
 * (confirmed: the rule matched correctly but silently lost the cascade
 * until this was added). Prefixing with the same id matches rather than
 * out-ranks it, keeping the fix legible instead of reaching for !important
 * on every property.
 */
#mepr_loginform .mp-form-row:has(input:not(:placeholder-shown)) label.placeholder-text,
#mepr_loginform .mp-form-row:has(input:autofill) label.placeholder-text,
#mepr_loginform .mp-form-row:has(input:-webkit-autofill) label.placeholder-text {
  transform: translate(0, -20px);
  padding: 0 5px;
  background: #fffdfb;
  color: #3a3a3a;
  font-size: 0.75rem !important;
  z-index: 1000;
}

.em-mepr-auth-field--static-label label {
  position: static;
  font-size: 0.8rem;
}

.em-mepr-auth-field input[type="text"],
.em-mepr-auth-field input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid #e2ded6;
  border-radius: 10px;
  font-size: 0.95rem;
  color: #1a1a1a;
  background: #fffdfb;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.em-mepr-auth-field input[type="text"]:focus,
.em-mepr-auth-field input[type="password"]:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
}

.em-mepr-auth-field input[aria-invalid="true"] {
  border-color: #dc2626;
}

.em-mepr-auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  color: #3a3a3a;
}

.em-mepr-auth-remember input[type="checkbox"] {
  accent-color: #f59e0b;
  width: 16px;
  height: 16px;
}

.em-mepr-auth-submit {
  margin-bottom: 4px;
}

/*
 * MemberPress's own login.css has a rule scoped under the (also original,
 * preserved) "#mepr-template-login" wrapper id, giving it higher
 * specificity than a plain class selector regardless of load order
 * (#mepr-template-login .mepro-form input[type="submit"] { background:
 * #737373 }). Matching that same id prefix here beats it on specificity
 * rather than reaching for !important.
 */
#mepr-template-login .em-mepr-auth-submit input[type="submit"] {
  width: 100%;
  background: #f59e0b;
  border-color: #f59e0b;
  color: #1a1205;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#mepr-template-login .em-mepr-auth-submit input[type="submit"]:hover {
  background: #d97706;
  border-color: #d97706;
  color: #ffffff;
}

.em-mepr-auth-submit input[type="submit"]:focus-visible {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
}

/*
 * The password-strength meter on the reset-password page (plugins/
 * memberpress/js/zxcvbn-async.js + css/zxcvbn.css) is plain, boxy,
 * flat-colored 2012-era WP-admin styling: a fixed-width bordered block in
 * saturated orange/green. Restyled as a small rounded pill instead, in
 * the same soft/rounded language as the rest of this form. The markup
 * (.mp-password-strength-area > .mp-password-strength-display.mp-<level>)
 * is generated by that JS, not something a view override controls, so
 * this only recolors/reshapes it -- the four MemberPress-defined level
 * classes (nopass/weakpass/mediumpass/strongpass) are kept as the hooks.
 * The "#mepr-template-login" prefix matches zxcvbn.css's plain class
 * selectors on specificity for the same reason as the submit button above.
 */
#mepr-template-login .mp-password-strength-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 16px;
}

#mepr-template-login .mp-password-strength-display {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 4px 12px;
  border: none;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}

/* The JS always appends an empty "<br><small></small>" after the level
   text; collapsing it to inline keeps the pill single-line and compact
   instead of reserving a second, empty line inside it. */
#mepr-template-login .mp-password-strength-display br,
#mepr-template-login .mp-password-strength-display small {
  display: none;
}

#mepr-template-login .mp-password-strength-area > span:not(.mp-password-strength-display) {
  font-size: 0.8rem;
  color: #6b6b6b;
}

#mepr-template-login .mp-password-strength-area > span:not(.mp-password-strength-display) small {
  display: inline;
}

#mepr-template-login .mp-nopass {
  background: #f1efe9;
  color: #6b6b6b;
}

#mepr-template-login .mp-weakpass {
  background: #fde2e2;
  color: #b42318;
}

#mepr-template-login .mp-mediumpass {
  background: #fef3e2;
  color: #92400e;
}

#mepr-template-login .mp-strongpass {
  background: #e5f2e9;
  color: #1e7a42;
}

.em-mepr-auth-actions {
  text-align: center;
}

.em-mepr-auth-actions a {
  font-size: 0.875rem;
  color: #2271b1;
  text-decoration: none;
}

.em-mepr-auth-actions a:hover {
  color: #1b5c91;
  text-decoration: underline;
}

.em-mepr-auth-hero-image {
  flex: 1 1 40%;
  margin: 0;
  display: none;
}

.em-mepr-auth-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  #mepro-login-hero.em-mepr-auth.with-sidebar .em-mepr-auth-hero-image {
    display: block;
  }
}

@media (max-width: 480px) {
  #mepro-login-hero.em-mepr-auth .em-mepr-auth-card-inner {
    padding: 28px 20px;
  }
}