/**
 * Account forms — [feast_login] and [feast_create_account]
 *
 * Ported from my-feast-login.html. Selectors stay ID-based (#feast-login,
 * #feast-account) on purpose: the original beat Gravity Forms' own class-based
 * styles on specificity, and dropping to classes would let GF win in places
 * depending on stylesheet order. One of each per page, so IDs are safe.
 *
 * /create-my-feast-account/ previously had no styles at all and inherited whatever the
 * theme gave it. It now shares this card treatment with the login form.
 */

#feast-login,
#feast-account {
  --feast-orange:     #F15D31;
  --feast-blue:       #262882;
  --feast-teal:       #34C6C6;
  --feast-blue-muted: #2D5778;

  --bg-body:          #F8F9FA;
  --bg-surface:       #FFFFFF;
  --text-main:        #1E232A;
  --text-muted:       #5A6572;
  --border-color:     #E2E8F0;
  --error-red:        #D64545;

  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 10px 25px rgba(0,0,0,0.08);
  --font-sans: Montserrat, system-ui, -apple-system, sans-serif;

  font-family: var(--font-sans);
  max-width: 420px;
  margin: 2.5rem auto;
  padding: 2.5rem;
  background: var(--bg-surface);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
}

/* The account card carries more copy than the login card. */
#feast-account { max-width: 520px; }

#feast-login *,
#feast-account * { box-sizing: border-box; }

/**
 * Set the face on the ELEMENTS, not just the container.
 *
 * font-family on the wrapper only reaches children by inheritance, and
 * inheritance is the weakest thing in the cascade — any rule targeting h2/p/label
 * directly (theme typography, an Elementor global font, a <pre> ancestor) beats
 * it. That's what made this render in the wrong face despite the colour, weight
 * and size all being correct.
 *
 * Listed explicitly rather than using * so Gravity Forms' own icon fonts, if it
 * ever uses them, are left alone.
 */
#feast-login,
#feast-login h1, #feast-login h2, #feast-login h3,
#feast-login p, #feast-login span, #feast-login a,
#feast-login label, #feast-login legend,
#feast-login input, #feast-login button, #feast-login select, #feast-login textarea,
#feast-account,
#feast-account h1, #feast-account h2, #feast-account h3,
#feast-account p, #feast-account span, #feast-account a,
#feast-account label, #feast-account legend,
#feast-account input, #feast-account button, #feast-account select, #feast-account textarea {
  font-family: var(--font-sans);
}

#feast-login h1,
#feast-account h1,
#feast-account h2 {
  color: var(--feast-blue);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.2;
  margin: 0 0 1.75rem;
}
#feast-account h2 { font-size: 1.7rem; margin-bottom: 0.75rem; }

#feast-login .feast-login-msg {
  font-size: 0.9rem;
  color: var(--feast-blue-muted);
  background: rgba(52, 198, 198, 0.10);
  border-left: 3px solid var(--feast-teal);
  border-radius: 0 8px 8px 0;
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
  text-align: left;
}

#feast-account .feast-account-intro {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 1.75rem;
}

#feast-account .feast-account-note {
  font-size: 0.95rem;
  color: var(--text-main);
  line-height: 1.7;
  margin: 0;
}
#feast-account .feast-account-note a {
  color: var(--feast-orange);
  font-weight: 600;
  text-decoration: none;
}
#feast-account .feast-account-note a:hover { text-decoration: underline; }

/* ---- Gravity Forms wrapper ---- */
#feast-login .gform_wrapper.gf_login_form,
#feast-account .gform_wrapper {
  margin: 0;
  font-family: var(--font-sans);
}

#feast-login .gform_heading,
#feast-account .gform_heading { margin-bottom: 1.5rem; text-align: center; }

#feast-login .gform_title,
#feast-account .gform_title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--feast-blue);
  margin-bottom: 0.25rem;
}
#feast-login .gform_description,
#feast-account .gform_description {
  font-size: 0.9rem;
  color: var(--text-muted);
}

#feast-login .gform_body,
#feast-account .gform_body { margin-bottom: 0; }

#feast-login ul#gform_fields_login,
#feast-account .gform_fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#feast-login .gfield,
#feast-account .gfield {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

#feast-login .gfield_label,
#feast-account .gfield_label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--feast-blue-muted);
}

#feast-login .gfield_required,
#feast-account .gfield_required {
  display: inline-block;
  margin-left: 0.4rem;
}

#feast-login .gfield_required_text,
#feast-account .gfield_required_text {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--error-red);
}

#feast-login input[type="text"],
#feast-login input[type="password"],
#feast-login input[type="email"],
#feast-account input[type="text"],
#feast-account input[type="password"],
#feast-account input[type="email"] {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-main);
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#feast-login input[type="text"]:focus,
#feast-login input[type="password"]:focus,
#feast-login input[type="email"]:focus,
#feast-account input[type="text"]:focus,
#feast-account input[type="password"]:focus,
#feast-account input[type="email"]:focus {
  border-color: var(--feast-teal);
  box-shadow: 0 0 0 3px rgba(52, 198, 198, 0.15);
}

/* ---- Show/hide password toggle (added by password-toggle.js) ---- */
#feast-login .feast-pw-wrap {
  position: relative;
  display: block;
}

/* Room for the button. Applies to both types — the input becomes type=text
   while revealed, and the field must not reflow when it does. */
#feast-login .feast-pw-wrap input[type="password"],
#feast-login .feast-pw-wrap input[type="text"] {
  padding-right: 2.9rem;
}

#feast-login .feast-pw-toggle {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
#feast-login .feast-pw-toggle:hover {
  color: var(--feast-blue-muted);
  background: rgba(45, 87, 120, 0.07);
}
#feast-login .feast-pw-toggle:focus-visible {
  outline: 2px solid var(--feast-teal);
  outline-offset: 1px;
  color: var(--feast-blue-muted);
}
/* Revealed state reads as "active" at a glance, not just via the icon. */
#feast-login .feast-pw-toggle[aria-pressed="true"] { color: var(--feast-orange); }

#feast-login .feast-pw-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

#feast-login .gfield_checkbox,
#feast-account .gfield_checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
#feast-login .gfield_checkbox label,
#feast-account .gfield_checkbox label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}
#feast-login .gfield_checkbox input[type="checkbox"],
#feast-account .gfield_checkbox input[type="checkbox"] {
  accent-color: var(--feast-teal);
  width: 16px;
  height: 16px;
}

/* ---- Validation ---- */
#feast-login .validation_message,
#feast-login .gfield_description.validation_message,
#feast-account .validation_message,
#feast-account .gfield_description.validation_message {
  font-size: 0.8rem;
  color: var(--error-red);
  margin-top: 0.2rem;
}
#feast-login .gfield_error input,
#feast-account .gfield_error input { border-color: var(--error-red); }

#feast-login .validation_error,
#feast-account .validation_error {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--error-red);
  background: rgba(214, 69, 69, 0.08);
  border: 1px solid rgba(214, 69, 69, 0.2);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

/* ---- Submit ---- */
#feast-login .gform_footer,
#feast-account .gform_footer {
  margin-top: 1.75rem;
  padding: 0;
}

#feast-login input[type="submit"],
#feast-login .gform_button,
#feast-account input[type="submit"],
#feast-account .gform_button {
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: var(--feast-orange);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid var(--feast-orange);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#feast-login input[type="submit"]:hover,
#feast-login .gform_button:hover,
#feast-account input[type="submit"]:hover,
#feast-account .gform_button:hover {
  background: #d94f28;
  border-color: #d94f28;
}

/* ---- Login-only: the register / lost-password links ---- */
#feast-login .gf_login_links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
}

#feast-login .gf_login_links a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--feast-blue-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
#feast-login .gf_login_links a:hover { color: var(--feast-orange); }

#feast-login p {
  font-size: 0.9rem;
  color: var(--text-main);
  text-align: center;
  line-height: 1.6;
}

/**
 * Gravity Forms' logged-in message — "You are currently logged in as X. Log
 * out?" — keeps the link inline, so it wraps mid-sentence onto a ragged second
 * line. Give it its own line instead.
 *
 * Scoped to <p> deliberately: the "Not registered?" / "Forgot password?" links
 * live in <nav class="gf_login_links">, which has its own layout and must stay
 * as it is.
 */
#feast-login p a {
  display: block;
  margin-top: 0.6rem;
}

#feast-login img.avatar {
  border-radius: 50%;
  display: block;
  margin: 0 auto 0.75rem;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 600px) {
  #feast-login,
  #feast-account {
    margin: 1.5rem;
    padding: 1.75rem;
  }
  #feast-login h1,
  #feast-account h1 { font-size: 1.7rem; }
  #feast-account h2 { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  #feast-login input[type="submit"],
  #feast-account input[type="submit"],
  #feast-login .gf_login_links a { transition: none; }
}