/* ============================================================
   betterMood — custom login page (p52 theme)
   Ported from design: "betterMood Login (standalone).html"
   Loaded after amember.css so it wins on the login page.
   Scoped to body.am-page-login to avoid touching other pages.
   ============================================================ */

:root {
  /* brand warm — accent only */
  --o-700: oklch(0.64 0.17 45);
  --o-600: oklch(0.70 0.165 48);
  --o-500: oklch(0.745 0.155 52);
  --amber: oklch(0.84 0.115 72);
  --o-100: oklch(0.965 0.02 60);

  /* clean white + COOL neutrals */
  --bg:        #FFFFFF;
  --surface:   #F2F4F7;
  --surface-2: #F7F8FA;
  --line:      #E9ECF1;
  --line-2:    #DFE3EA;

  --ink:       oklch(0.30 0.018 255);
  --ink-soft:  oklch(0.46 0.015 255);
  --ink-faint: oklch(0.60 0.012 255);

  --err:      oklch(0.55 0.19 25);
  --err-bg:   oklch(0.965 0.025 22);
  --err-line: oklch(0.88 0.06 22);
}

/* ---------- reset ----------
   The standalone design relied on a universal `box-sizing: border-box`.
   Without it the card's width is content-box and its padding pushes it past
   the viewport on narrow screens (right side gets cut off). Scope it to the
   login page so we don't disturb the rest of aMember. */
body.am-page-login,
body.am-page-login *,
body.am-page-login *::before,
body.am-page-login *::after { box-sizing: border-box; }

/* ---------- page shell ---------- */
body.am-page-login {
  font-family: "Nunito", system-ui, sans-serif;
  background: #eef0f3;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* "safe" keeps the top reachable (no clipping) when the card is taller
     than the viewport — falls back to start-alignment instead of centering */
  align-items: safe center;
  justify-content: safe center;
  padding: 28px 18px;
}

/* Neutralise aMember chrome that the standalone layout doesn't use */
body.am-page-login .am-account-toolbar,
body.am-page-login .am-body-content-top,
body.am-page-login .am-footer { display: none; }

/* ---------- card ---------- */
/* Constrain the wrappers (not the cards) to the target width. The flex body
   centres them, and each card fills 100% of its wrapper — so the login and
   "reset password" cards are always the same width regardless of their
   content (otherwise the centred flex item shrink-wraps to its own text). */
.am-page-login .am-login-form-wrapper,
.am-page-login .am-sendpass-form-wrapper { width: min(420px, 100%); }

.am-page-login .card {
  width: 100%;
  background: var(--bg); border-radius: 22px;
  box-shadow: 0 14px 40px rgba(40,46,60,0.10);
  padding: 30px 30px 32px;
  border: none;
  margin: 0 auto;
}
.am-page-login .card h1 {
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 22px;
  letter-spacing: -0.01em; color: var(--ink); text-align: center;
  margin: 0 0 26px;
  padding: 0; border: none;
}

/* aMember wraps the form fields in <fieldset><legend>; flatten it */
.am-page-login .card fieldset { border: none; margin: 0; padding: 0; }
.am-page-login .card legend { display: none; }

/* ---------- errors ---------- */
/* aMember renders server-side errors as <ul class="am-errors"> via formErrors() */
.am-page-login .am-errors,
.am-page-login .alert {
  list-style: none;
  align-items: flex-start; gap: 10px;
  background: var(--err-bg); border: 1px solid var(--err-line); border-radius: 14px;
  padding: 12px 14px; margin: 0 0 20px;
  font-size: 13.5px; font-weight: 700; line-height: 1.45; color: var(--err);
  text-wrap: pretty;
}
.am-page-login .am-errors { display: block; }
.am-page-login .am-errors li { list-style: none; }
.am-page-login .am-errors li + li { margin-top: 4px; }

/* ---------- fields ---------- */
.am-page-login .field,
.am-page-login .am-row-login-login,
.am-page-login .am-row-login-pass,
.am-page-login .am-row-sendpass-email { margin-bottom: 18px; }

.am-page-login .field label,
.am-page-login .am-element-title label,
.am-page-login .am-row-sendpass-email label {
  display: block; font-size: 13px; font-weight: 800; color: var(--ink-soft);
  letter-spacing: 0.02em; margin-bottom: 7px; text-align: left;
}

.am-page-login .inwrap {
  position: relative; display: flex; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 14px;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.am-page-login .inwrap:focus-within {
  border-color: var(--o-500); box-shadow: 0 0 0 3px var(--o-100); background: #fff;
}
.am-page-login .inwrap .lead {
  flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); pointer-events: none;
}
.am-page-login .inwrap .lead svg { width: 18px; height: 18px; }
.am-page-login .inwrap input {
  flex: 1 1 auto; min-width: 0; border: none; outline: none; background: none;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
  padding: 13px 14px 13px 0; box-shadow: none; height: auto; margin: 0;
}
.am-page-login .inwrap input::placeholder { color: var(--ink-faint); font-weight: 500; }

.am-page-login .eye {
  flex: 0 0 auto; width: 44px; height: 44px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ink-faint);
  border-radius: 12px; transition: color .13s ease;
}
.am-page-login .eye:hover { color: var(--ink-soft); }
.am-page-login .eye svg { width: 19px; height: 19px; }

/* "Stay signed in" */
.am-page-login .am-row-remember {
  margin: -6px 0 16px; display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-soft);
}
.am-page-login .am-row-remember input { width: auto; margin: 0; }

/* reCAPTCHA row */
.am-page-login .am-row-recaptcha { margin-bottom: 18px; }

/* ---------- actions ---------- */
.am-page-login .actions {
  display: flex; align-items: center; gap: 18px; margin-top: 24px;
}
.am-page-login .login-btn,
.am-page-login .actions input[type="submit"] {
  flex: 0 0 auto; border: none; cursor: pointer;
  background: var(--o-500); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 800;
  padding: 12px 34px; border-radius: 999px;
  transition: background .14s ease, transform .12s ease;
  width: auto; box-shadow: none; text-transform: none;
}
.am-page-login .login-btn:hover,
.am-page-login .actions input[type="submit"]:hover {
  background: var(--o-600); transform: translateY(-1px);
}
.am-page-login .login-btn:active { transform: none; }

.am-page-login .forgot {
  font-size: 14px; font-weight: 700; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  border-bottom: 1.5px dashed var(--line-2); padding-bottom: 1px;
  transition: color .13s ease, border-color .13s ease;
}
.am-page-login .forgot:hover { color: var(--o-700); border-color: var(--o-500); }

/* ---------- signup line ---------- */
.am-login-page-signup,
.am-page-login .am-signup-link {
  margin-top: 22px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
  text-align: center;
}
.am-login-page-signup a,
.am-page-login .am-signup-link a { color: var(--o-700); font-weight: 800; text-decoration: none; }
.am-login-page-signup a:hover,
.am-page-login .am-signup-link a:hover { text-decoration: underline; }

/* the sendpass intro text */
.am-page-login .am-row-sendpass-notice {
  font-size: 14px; font-weight: 600; color: var(--ink-soft); line-height: 1.5;
  margin-bottom: 18px; text-align: left;
}

/* ---------- mobile ---------- */
@media (max-width: 480px) {
  body.am-page-login { padding: 18px 12px; }

  .am-page-login .card {
    width: 100%;
    padding: 24px 20px 26px;
    border-radius: 18px;
  }
  .am-page-login .card h1 { font-size: 20px; margin-bottom: 22px; }

  /* stack the button + forgot link so they never overflow a narrow card */
  .am-page-login .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .am-page-login .login-btn,
  .am-page-login .actions input[type="submit"] {
    width: 100%;
    padding: 13px 24px;
  }
  .am-page-login .forgot {
    align-self: center;
    border-bottom: none;
    padding: 2px 4px;
  }
}