/* ==================================================
   VALBOOSTING · 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 valboosting 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 --vb-* token names so nothing collides with the page tokens.
   ================================================== */

.form-login-signup {
  --vb-rose: #ec5d72;
  --vb-rose-deep: #c83a55;
  --vb-rose-tint: #fde6ea;
  --vb-rose-soft: #f5bcc6;
  --vb-ink: #3e1820;
  --vb-ink-soft: #6a5560;
  --vb-line: #ece7e9;
  --vb-bg-soft: #faf7f8;
  --vb-fd: 'Rajdhani', 'Bricolage Grotesque', system-ui, sans-serif;
  --vb-fb: 'Geist', system-ui, sans-serif;
  --vb-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(236,93,114,.05), #fff 60%) !important;
  border-bottom: 1px solid var(--vb-line) !important;
}
.form-login-signup .tab-group li a,
.form-login-signup .tab-group .active a {
  font-family: var(--vb-fd) !important;
  color: var(--vb-ink) !important;
  font-weight: 700 !important;
}

/* field labels */
.form-login-signup label {
  font-family: var(--vb-fu) !important;
  color: var(--vb-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(--vb-fb) !important;
  background: var(--vb-bg-soft) !important;
  border: 1.5px solid var(--vb-line) !important;
  color: var(--vb-ink) !important;
}
.form-login-signup input:focus {
  border-color: var(--vb-rose-soft) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(236,93,114,.14) !important;
}

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

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

/* submit button — rose gradient instead of solid blue */
.form-login-signup .button {
  background: linear-gradient(135deg, var(--vb-rose), var(--vb-rose-deep)) !important;
  font-family: var(--vb-fu) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  box-shadow: 0 4px 14px rgba(236,93,114,.32) !important;
}
.form-login-signup .button:hover {
  background: linear-gradient(135deg, var(--vb-rose-deep), #a82f47) !important;
  box-shadow: 0 6px 20px rgba(236,93,114,.42) !important;
}
.form-login-signup .button:active {
  box-shadow: 0 2px 8px rgba(236,93,114,.32) !important;
}

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

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