/* ==========================================================================
   Support page — dresses Fluent Support's customer portal in the site design.
   Loaded only on /support/ (page-support.php). Logged out the portal prints
   WordPress's login form plus its own signup / reset forms (all_public.css,
   blue #0275ff); logged in it mounts its Vue app (.fs_client_portal), whose
   accent is the --fs-primary variable (near black by default) plus Element
   Plus's --el-color-primary. Only colours, fields and spacing change here.
   ========================================================================== */

.wd .wd-support-hero { padding-bottom: 24px; }
.wd .wd-support-hero .wd-lead .wd-link { display: inline; }
.wd .wd-support { padding-top: 8px; }

/* Logged out: one centred card holding whichever form is showing */
.wd .wd-support__body.is-auth { max-width: 520px; margin: 0 auto; padding: 36px; }
/* Fluent Support's own "Please login or create an account…" line repeats the hero */
.wd .wd-support__body.is-auth > p:first-child { display: none; }
.wd .wd-support__body form#loginform { overflow: visible; }
.wd .wd-support__body .fst_login_wrapper,
.wd .wd-support__body .fst_registration_wrapper,
.wd .wd-support__body .fst_reset_pass_wrapper { max-width: none; }

.wd .wd-support__body label,
.wd .wd-support__body .fst_field_label label {
  display: block; font-weight: 600; font-size: .9rem; color: var(--wd-ink); margin: 0;
}
.wd .wd-support__body .fst_field_label.is-required label:after { color: var(--wd-accent); }
.wd .wd-support__body form#loginform > p,
.wd .wd-support__body .fst_field_group { margin: 0 0 16px; }

.wd .wd-support__body.is-auth input[type="text"],
.wd .wd-support__body.is-auth input[type="email"],
.wd .wd-support__body.is-auth input[type="password"] {
  width: 100%; margin: 6px 0 0; border: 1px solid var(--wd-line-2); border-radius: 12px; padding: 13px 14px;
  font-family: var(--wd-font-body); font-size: .95rem; line-height: 1.4; color: var(--wd-ink); background: #fff;
  box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.wd .wd-support__body.is-auth input::placeholder { color: var(--wd-ink-3); }
.wd .wd-support__body.is-auth input:focus {
  outline: none; border-color: var(--wd-primary); box-shadow: 0 0 0 4px var(--wd-primary-soft);
}
.wd .wd-support__body .login-remember label { display: flex; gap: 10px; align-items: center; font-weight: 500; color: var(--wd-ink-2); }
.wd .wd-support__body .login-remember input { margin: 0; accent-color: var(--wd-primary); }

/* The three submit buttons = the design's primary button (#main outranks all_public.css, which
   Fluent Support may print after this sheet) */
.wd #main .wd-support__body input#wp-submit,
.wd #main .wd-support__body #fst_submit,
.wd #main .wd-support__body #fst_reset_pass {
  width: 100%; padding: 15px 24px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--wd-primary); color: #fff; font-family: var(--wd-font-display); font-weight: 700; font-size: .95rem; line-height: 1;
  box-shadow: 0 8px 20px rgba(76, 59, 255, .28); transition: background .15s, box-shadow .15s, transform .15s;
}
.wd #main .wd-support__body input#wp-submit:hover,
.wd #main .wd-support__body #fst_submit:hover,
.wd #main .wd-support__body #fst_reset_pass:hover {
  background: var(--wd-primary-2); box-shadow: 0 12px 26px rgba(76, 59, 255, .34); transform: translateY(-1px);
}
.wd #main .wd-support__body #fst_submit.loading,
.wd #main .wd-support__body #fst_reset_pass.loading { background: var(--wd-primary); opacity: .6; }

/* "Create an account" / "Reset password" / "Login" switches (the site resets link colour) */
.wd .wd-support__body.is-auth p[style] { color: var(--wd-ink-2); font-size: .92rem; margin: 14px 0 0; }
.wd .wd-support__body.is-auth a { color: var(--wd-primary); font-weight: 600; }
.wd .wd-support__body.is-auth a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Logged in: the portal app, recoloured through its own variables */
.wd .wd-support__body.is-portal .fs_client_portal {
  --fs-primary: #4c3bff;
  --fs-primary-dark: #3b2be6;
  --fs-primary-hover: #3b2be6;
  --el-color-primary: #4c3bff;
  --el-color-primary-dark-2: #3b2be6;
  --el-color-primary-light-3: #8276ff;
  --el-color-primary-light-5: #a59dff;
  --el-color-primary-light-7: #c9c4ff;
  --el-color-primary-light-8: #dbd8ff;
  --el-color-primary-light-9: #eeebff;
  --el-color-primary-rgb: 76, 59, 255;
}

@media (max-width: 600px) {
  .wd .wd-support__body.is-auth { padding: 24px 20px; }
}