/* ==================================================
   ELOBOOSTLEAGUE · LOGIN DROPDOWN — F3 re-skin
   --------------------------------------------------
   The login form is the EXISTING lazy-loaded header dropdown
   (#ajax-login-placeholder + the parent ajax-login-script.js). The parent
   boosting/nav.css already styles it as a 380px top-right card — but in EBL
   blue (#0364a9), since nav.css is shared. This file ONLY recolours / retypes
   that card to the eloboostleague F3 rose design. No markup, JS or positioning
   changes: the login functions are reused untouched.

   Each rule mirrors a nav.css selector at EQUAL specificity + !important, and
   the stylesheet is enqueued with a 'boosting-nav' dependency so it loads
   AFTER nav.css — later load + !important on the tie = these win. Loaded for
   logged-out visitors only (that's the only time the dropdown exists).
   Prefixed --ebl-* token names so nothing collides with the page tokens.
   ================================================== */

.form-login-signup {
  --ebl-rose: #1659ac;
  --ebl-rose-deep: #0e478c;
  --ebl-rose-tint: #e8f1fb;
  --ebl-rose-soft: #b9d4f0;
  --ebl-ink: #3e1820;
  --ebl-ink-soft: #6a5560;
  --ebl-line: #ece7e9;
  --ebl-bg-soft: #faf7f8;
  --ebl-fd: 'Bricolage Grotesque', system-ui, sans-serif;
  --ebl-fb: 'Geist', system-ui, sans-serif;
  --ebl-fu: 'Geist Mono', ui-monospace, monospace;
}

/* card shell — warm rose-tinted shadow instead of EBL blue */
.form-login-signup .login-signup-form {
  box-shadow: 0 2px 4px rgba(36,12,18,.06), 0 18px 50px -18px rgba(200,58,85,.24) !important;
}

/* tab header */
.form-login-signup .tab-group {
  background: linear-gradient(135deg, rgba(22,89,172,.05), #fff 60%) !important;
  border-bottom: 1px solid var(--ebl-line) !important;
}
.form-login-signup .tab-group li a,
.form-login-signup .tab-group .active a {
  font-family: var(--ebl-fd) !important;
  color: var(--ebl-ink) !important;
  font-weight: 700 !important;
}

/* field labels */
.form-login-signup label {
  font-family: var(--ebl-fu) !important;
  color: var(--ebl-ink-soft) !important;
  letter-spacing: .08em !important;
}

/* text inputs */
.form-login-signup input[type="text"],
.form-login-signup input[type="password"],
.form-login-signup input[type="email"] {
  font-family: var(--ebl-fb) !important;
  background: var(--ebl-bg-soft) !important;
  border: 1.5px solid var(--ebl-line) !important;
  color: var(--ebl-ink) !important;
}
.form-login-signup input:focus {
  border-color: var(--ebl-rose-soft) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(22,89,172,.14) !important;
}

/* forgot-password link */
.form-login-signup .login-forg-pass a,
.form-login-signup .forgot.tab-link a {
  font-family: var(--ebl-fu) !important;
  color: var(--ebl-rose) !important;
}

/* remember-me checkbox */
.form-login-signup .logincheckbox label {
  font-family: var(--ebl-fu) !important;
  color: var(--ebl-ink-soft) !important;
}
.form-login-signup .logincheckbox input[type=checkbox]:checked+label:before {
  background: var(--ebl-rose) !important;
  border-color: var(--ebl-rose) !important;
}

/* submit button — rose gradient instead of solid blue. Tighter height with a
   ~20%-larger label (base nav.css is 48px / 14px) so it reads compact, not hollow. */
.form-login-signup .button {
  background: linear-gradient(135deg, var(--ebl-rose), var(--ebl-rose-deep)) !important;
  font-family: var(--ebl-fu) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  box-shadow: 0 4px 14px rgba(22,89,172,.32) !important;
  height: 40px !important;
  font-size: 16.8px !important;
}
.form-login-signup .button:hover {
  background: linear-gradient(135deg, var(--ebl-rose-deep), #0e478c) !important;
  box-shadow: 0 6px 20px rgba(22,89,172,.42) !important;
}
.form-login-signup .button:active {
  box-shadow: 0 2px 8px rgba(22,89,172,.32) !important;
}

/* "How do I sign up?" note */
.form-login-signup .frm-btm-section {
  background: linear-gradient(135deg, var(--ebl-rose-tint), #fff) !important;
  border-top: 1px solid var(--ebl-rose-soft) !important;
}
.form-login-signup .frm-btm-section p {
  font-family: var(--ebl-fb) !important;
  color: var(--ebl-ink-soft) !important;
}
.form-login-signup .frm-btm-section strong {
  font-family: var(--ebl-fd) !important;
  color: var(--ebl-ink) !important;
}

/* status line (sent / error) — neutral-rose, errors stay red */
.form-login-signup .status {
  font-family: var(--ebl-fu) !important;
  color: var(--ebl-rose-deep) !important;
  background: var(--ebl-rose-tint) !important;
  border: 1px solid var(--ebl-rose-soft) !important;
}

/* Forgot-password panel starts COLLAPSED. login_form.php renders #forgot_password
   inline with no hide, so its "Email Address / SUBMIT" form shows under the login
   form by default. The "Forgot password?" tab-link opens it — jQuery fadeIn() sets
   an inline display that overrides this rule, so the toggle still works. */
.form-login-signup #forgot_password { display: none; }