/* The page a client actually fills in.
 *
 * Loaded after accu_forms.css on the public form only. The design tokens are
 * already on the page (a1_portal hooks app_external_form_head), so everything
 * here reads from them and falls back to a literal value, because this file is
 * also served on installs where the portal module is switched off.
 *
 * The vendor stylesheet is left alone: overriding here keeps the module
 * upgradeable and keeps one place to look for how the public form is themed.
 */

:root {
  --af-page: var(--a1-page, #f7f6fc);
  --af-ink: var(--a1-ink, #1b2740);
  --af-muted: var(--a1-muted, #6b6f86);
  --af-edge: var(--a1-border-strong, rgba(163, 144, 200, 0.28));
  --af-lavender: var(--a1-lavender, #e5e7ff);
  --af-purple: var(--a1-purple-ink, #550672);
  --af-gold: var(--a1-gold, #c9a13a);
  --af-gold-light: var(--a1-gold-light, #f4dc93);
}

body.accu_forms_client {
  background:
    radial-gradient(48% 32% at 22% 12%, rgba(229, 231, 255, 0.55) 0%, rgba(229, 231, 255, 0) 70%),
    radial-gradient(42% 28% at 82% 24%, rgba(226, 239, 255, 0.5) 0%, rgba(226, 239, 255, 0) 70%),
    var(--af-page);
  color: var(--af-ink);
}

/* The firm's own header. The brand sits in the middle of the bar, because the
   pages below it are not all the same width: a fixed column here left the logo
   adrift to one side of whatever it was meant to line up with. */
/* The customers layout nests this inside a fixed width column, so a solid bar
   ends partway across a wide window and reads as a broken edge. The surface and
   the rule beneath it fade out at both ends instead, so there is no edge to
   stop. They are drawn behind the brand rather than on it, so the logo itself
   is never faded. */
.accu_forms-public-header {
  position: relative;
  margin-top: 18px;
  border: 0;
}

.accu_forms-public-header::before,
.accu_forms-public-header::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.accu_forms-public-header::before {
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
}

.accu_forms-public-header::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(163, 144, 200, 0) 0%, var(--af-edge) 50%, rgba(163, 144, 200, 0) 100%);
}

.accu_forms-public-header__inner {
  /* Positioned so the brand paints above the surface behind it, which is a
     positioned pseudo-element and would otherwise cover it. */
  position: relative;
  min-height: 62px;
  padding: 15px 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.accu_forms-public-header__logo {
  max-height: 40px;
  width: auto;
  display: block;
}

.accu_forms-public-header__name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--af-purple);
}

/* The form's own name. It is the page's heading, so it carries the title face
   and wraps rather than running the width of a wide window. */
.accu_forms-public-header__title {
  max-width: 560px;
  margin: 0;
  font-family: var(--a1-title-font, "Fraunces", Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--af-ink);
}

/* The pages that stand in for the form: closed, already submitted, or not
   open to this visitor. The stock markup puts the notice in a full width
   alert, so on a wide screen one sentence sat alone in a band of colour. It
   reads as a card on the page's own centre line instead. The id is in the
   selector because the sitewide alert theme is scoped to #wrapper and would
   otherwise keep its coloured edge. */
body.accu_forms_client #wrapper .accu_forms-client-wrapper-content {
  max-width: 560px;
  margin: 9vh auto 0;
  padding: 30px 32px;
  border: 1px solid var(--af-edge);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fdfcff 100%);
  box-shadow: 0 14px 34px rgba(27, 39, 64, 0.07), inset 0 1px 0 #ffffff;
  color: var(--af-ink);
  text-align: center;
}

body.accu_forms_client #wrapper .accu_forms-client-wrapper-content .alert-heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--af-ink);
}

body.accu_forms_client #wrapper .accu_forms-client-wrapper-content p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--af-muted);
}

/* The column holding the questions painted itself solid white, which stood as a
   tall pale band down the middle of the page. Each block carries its own surface
   now, so the page's own background belongs behind them. */
body.accu_forms_client #accu_forms-client-block-container,
body.accu_forms_client .accu_forms-client-block-container,
body.accu_forms_client .accu_forms-single-page-layout {
  background: transparent;
}

/* The step-by-step form's question on its own raised surface. The single
   page form puts all of a section's questions on one surface instead (below). */
body.accu_forms_client .accu_forms-client-block-container > .accu_forms-text-display {
  padding: 28px 30px;
  border: 1px solid var(--af-edge);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fdfcff 100%);
  box-shadow: 0 14px 34px rgba(27, 39, 64, 0.07), inset 0 1px 0 #ffffff;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}

body.accu_forms_client .accu_forms-client-block-container > .accu_forms-text-display:focus-within {
  border-color: var(--af-gold);
  box-shadow: 0 18px 40px rgba(27, 39, 64, 0.1), inset 0 1px 0 #ffffff, 0 0 0 4px rgba(201, 161, 58, 0.14);
}

body.accu_forms_client .accuforms-title-preview {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--af-ink);
}

body.accu_forms_client .accu_forms-desc-preview {
  font-size: 15px;
  line-height: 1.5;
  color: var(--af-muted);
}

/* An empty description should take no space, since most fields need none. */
body.accu_forms_client .accu_forms-desc-preview:empty {
  display: none;
}

/* Empty, filled and focused are three distinct states. */
body.accu_forms_client .accu_forms-text-input,
body.accu_forms_client .accu_forms-textarea,
body.accu_forms_client .accu_forms-input-preview {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--af-edge);
  border-radius: 12px;
  background: #fbfaff;
  font-size: 16px;
  color: var(--af-ink);
  box-shadow: inset 0 1px 2px rgba(27, 39, 64, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body.accu_forms_client .accu_forms-text-input:not(:placeholder-shown),
body.accu_forms_client .accu_forms-textarea:not(:empty) {
  background: #ffffff;
  border-color: var(--a1-lavender-deep, #b9a8e0);
}

body.accu_forms_client .accu_forms-text-input:focus,
body.accu_forms_client .accu_forms-textarea:focus,
body.accu_forms_client .accu_forms-input-preview:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--af-gold);
  box-shadow: 0 0 0 4px rgba(201, 161, 58, 0.18);
}

body.accu_forms_client .accu_forms-text-input::placeholder,
body.accu_forms_client .accu_forms-textarea::placeholder {
  color: rgba(107, 111, 134, 0.62);
}

/* The one button on the page: bevelled, with the light settling rather than
   snapping. Its colours come from the form's own settings, so only the shape,
   depth and motion are set here. */
body.accu_forms_client .accu_forms-next-button-preview {
  border: 0;
  border-radius: 14px;
  padding: 13px 28px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(201, 161, 58, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: transform 160ms ease, box-shadow 200ms ease, filter 160ms ease;
}

body.accu_forms_client .accu_forms-next-button-preview:is(:hover, :focus-visible) {
  transform: translateY(-1px);
  filter: saturate(108%);
  box-shadow: 0 16px 32px rgba(201, 161, 58, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body.accu_forms_client .accu_forms-next-button-preview:active {
  transform: translateY(1px);
  box-shadow: 0 8px 18px rgba(201, 161, 58, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body.accu_forms_client .accu_forms-next-button-preview:focus-visible {
  outline: 2px solid var(--af-purple);
  outline-offset: 3px;
}

/* Back and Forward belong together, on one row under the question. */
body.accu_forms_client .accu_forms-sumbit-button-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Forward carries the firm's own colours, so Back stays quiet beside it. */
body.accu_forms_client .accu_forms-prev-button-preview {
  border: 1px solid var(--af-edge);
  border-radius: 14px;
  padding: 13px 22px;
  font-size: 16px;
  font-weight: 600;
  background: #ffffff;
  color: var(--af-ink);
  box-shadow: 0 6px 16px rgba(27, 39, 64, 0.08), inset 0 1px 0 #ffffff;
  transition: transform 160ms ease, box-shadow 200ms ease, border-color 160ms ease;
}

body.accu_forms_client .accu_forms-prev-button-preview:is(:hover, :focus-visible) {
  transform: translateY(-1px);
  border-color: var(--a1-lavender-deep, #b9a8e0);
  box-shadow: 0 10px 22px rgba(27, 39, 64, 0.12), inset 0 1px 0 #ffffff;
}

body.accu_forms_client .accu_forms-prev-button-preview:focus-visible {
  outline: 2px solid var(--af-purple);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body.accu_forms_client .accu_forms-prev-button-preview {
    transition: none;
  }

  body.accu_forms_client .accu_forms-prev-button-preview:is(:hover, :focus-visible) {
    transform: none;
  }
}

/* How far through the form the visitor is. The colour lives here now, so it
   follows the theme instead of being painted black from the script. */
body.accu_forms_client .accu_forms-progress-bar {
  background: linear-gradient(90deg, var(--af-gold-light), var(--af-gold));
  box-shadow: 0 0 14px rgba(201, 161, 58, 0.5);
}

/* The step-by-step form's back and forward controls, which carry the firm's own
   colours inline and so only need their shape and depth here. */
body.accu_forms_client :is(#accu_forms-prev-button, #accu_forms-next-button) {
  border: 0;
  border-radius: 10px;
  padding: 7px 14px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(27, 39, 64, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 150ms ease, box-shadow 180ms ease;
}

body.accu_forms_client :is(#accu_forms-prev-button, #accu_forms-next-button):is(:hover, :focus-visible) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(27, 39, 64, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* The validation notice, which arrives as a floating alert. */
body.accu_forms_client .float-alert,
body.accu_forms_client .alert {
  border: 1px solid var(--af-edge);
  border-left: 4px solid var(--af-gold);
  border-radius: 12px;
  background: #ffffff;
  color: var(--af-ink);
  box-shadow: 0 16px 34px rgba(27, 39, 64, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  body.accu_forms_client .accu_forms-next-button-preview,
  body.accu_forms_client .accu_forms-text-input,
  body.accu_forms_client .accu_forms-textarea,
  body.accu_forms_client .accu_forms-client-block-container > .accu_forms-text-display {
    transition: none;
  }

  body.accu_forms_client .accu_forms-next-button-preview:is(:hover, :focus-visible, :active) {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Single-page form, in sections.

   Each statement starts a section. With more than one, the sections are listed
   beside the form (above it on a phone) and shown one at a time; the script
   adds .af-sp--ready once it has chosen the section to show, so without the
   script every section stays on the page. All of a section's questions share
   one surface, separated by space rather than a card each. The form's own
   button colour is the accent (--af-accent, set inline).
   ------------------------------------------------------------------------ */
/* A single-page form takes its colours from the form's own button colour
   (--af-accent, set on the body by the page): a faint wash of it behind the
   form, and edges tinted towards it, so each firm's form wears its own colour. */
html.a1-portal-guest:has(.af-sp),
html body.accu_forms_client:has(.af-sp) {
  --af-edge: color-mix(in srgb, var(--af-accent) 20%, #e4e1ec);
  background:
    radial-gradient(52% 34% at 18% 8%, color-mix(in srgb, var(--af-accent) 9%, transparent) 0%, transparent 70%),
    radial-gradient(44% 30% at 86% 22%, color-mix(in srgb, var(--af-accent) 6%, transparent) 0%, transparent 70%),
    color-mix(in srgb, var(--af-accent) 2.5%, #fbfafd) !important;
}

body.accu_forms_client:has(.af-sp) .accu_forms-public-header__name {
  color: var(--af-accent);
}

body.accu_forms_client .af-sp {
  --af-soft-edge: color-mix(in srgb, var(--af-accent) 10%, #eeecf3);
  display: grid;
  gap: 24px;
  max-width: 800px;
  margin: 28px auto 72px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
}

body.accu_forms_client .af-sp--steps {
  max-width: 1100px;
}

@media (min-width: 900px) {
  body.accu_forms_client .af-sp--steps {
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    gap: 32px;
  }
}

/* The section list. It scrolls on its own when it is taller than the window. */
body.accu_forms_client .af-steps {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

body.accu_forms_client .af-steps__toggle {
  display: none;
}

body.accu_forms_client .af-steps__list {
  position: relative;
  margin: 0;
  padding: 6px 0;
  list-style: none;
}

/* The rail that joins the step numbers. */
body.accu_forms_client .af-steps__list::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 25px;
  width: 1px;
  background: linear-gradient(180deg, var(--af-soft-edge), var(--af-edge), var(--af-soft-edge));
}

body.accu_forms_client .af-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--af-muted);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

body.accu_forms_client .af-step:hover,
body.accu_forms_client .af-step:focus-visible {
  color: var(--af-ink);
  background: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

body.accu_forms_client .af-step:focus-visible {
  outline: 2px solid var(--af-accent);
  outline-offset: 2px;
}

body.accu_forms_client .af-step__num {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--af-edge);
  border-radius: 50%;
  background: #ffffff;
  color: var(--af-muted);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

body.accu_forms_client .af-steps__item.is-done .af-step__num {
  border-color: var(--af-accent);
  color: var(--af-accent);
}

body.accu_forms_client .af-steps__item.is-current .af-step {
  border-color: var(--af-edge);
  background: linear-gradient(180deg, #ffffff, #fdfcff);
  box-shadow: 0 10px 24px rgba(27, 39, 64, 0.08), inset 0 1px 0 #ffffff;
  color: var(--af-ink);
  font-weight: 600;
}

body.accu_forms_client .af-steps__item.is-current .af-step__num {
  border-color: var(--af-accent);
  background: var(--af-accent);
  color: var(--af-accent-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--af-accent) 18%, transparent);
}

/* On a phone the list folds into one control above the form. */
@media (max-width: 899px) {
  body.accu_forms_client .af-steps {
    position: static;
    max-height: none;
    overflow: visible;
  }

  body.accu_forms_client .af-steps__toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 12px 44px 12px 16px;
    border: 1px solid var(--af-edge);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #fdfcff);
    box-shadow: 0 8px 20px rgba(27, 39, 64, 0.06), inset 0 1px 0 #ffffff;
    color: var(--af-ink);
    text-align: left;
    position: relative;
  }

  body.accu_forms_client .af-steps__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--af-muted);
    border-bottom: 2px solid var(--af-muted);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 200ms ease;
  }

  body.accu_forms_client .af-steps__toggle[aria-expanded="true"]::after {
    transform: translateY(-30%) rotate(-135deg);
  }

  body.accu_forms_client .af-steps__toggle:focus-visible {
    outline: 2px solid var(--af-accent);
    outline-offset: 2px;
  }

  body.accu_forms_client .af-steps__count {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--af-accent);
  }

  body.accu_forms_client .af-steps__current {
    font-size: 16px;
    font-weight: 600;
  }

  body.accu_forms_client .af-sp--ready .af-steps__list {
    display: none;
    margin-top: 8px;
  }

  body.accu_forms_client .af-sp--ready.af-steps--open .af-steps__list {
    display: block;
  }
}

/* The form itself: one surface, with a lit accent line along its top edge. */
body.accu_forms_client .af-panel {
  position: relative;
  min-width: 0;
  padding: 34px 38px 30px;
  border: 1px solid var(--af-edge);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fdfcff 100%);
  box-shadow: 0 18px 42px rgba(27, 39, 64, 0.08), inset 0 1px 0 #ffffff;
}

body.accu_forms_client .af-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 28px;
  right: 28px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--af-accent), transparent);
  opacity: 0.75;
}

@media (max-width: 640px) {
  body.accu_forms_client .af-sp {
    padding: 0 12px;
    margin-top: 18px;
  }

  body.accu_forms_client .af-panel {
    padding: 24px 18px 22px;
    border-radius: 16px;
  }
}

body.accu_forms_client .af-sp--steps.af-sp--ready .af-section:not(.is-current) {
  display: none;
}

body.accu_forms_client .af-sp:not(.af-sp--steps) .af-section + .af-section,
body.accu_forms_client .af-sp:not(.af-sp--ready) .af-section + .af-section {
  margin-top: 36px;
}

body.accu_forms_client .af-section:focus {
  outline: none;
}

/* The blocks drop the old single-page bands and margins. */
body.accu_forms_client .af-sp .accu_forms-single-page-each-block {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

body.accu_forms_client .af-sp .af-section-head {
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--af-soft-edge);
}

body.accu_forms_client .af-section-head .preview-statement-title {
  margin: 0;
}

body.accu_forms_client .af-section-head .accuforms-title-preview {
  margin: 0;
  font-family: var(--a1-title-font, "Fraunces", Georgia, serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--af-ink);
}

body.accu_forms_client .af-section-head .accu_forms-desc-preview {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
}

body.accu_forms_client .af-section-head .ff-statement-wrapper.center {
  text-align: left;
}

/* Questions: two short answers to a row on a wide page, the rest full width.
   Each question takes four rows of the section's grid (label, description,
   control, message) as a subgrid, so two questions side by side keep their
   controls level even when one label wraps or one shows a message. */
body.accu_forms_client .af-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 24px;
}

@media (min-width: 720px) {
  body.accu_forms_client .af-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.accu_forms_client .af-field {
    grid-column: 1 / -1;
  }

  body.accu_forms_client .af-field--half {
    grid-column: auto;
  }
}

/* The space between questions is padding at the foot of each one: a gap on
   the section's grid would also open between a question's own rows. */
body.accu_forms_client .af-sp .af-field {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  min-width: 0;
  padding-bottom: 26px;
}

body.accu_forms_client .af-field > div {
  display: contents;
}

body.accu_forms_client .af-sp .af-field > div > .accuforms-title-preview {
  grid-row: 1;
  align-self: end;
  margin: 0 0 8px;
}

body.accu_forms_client .af-field > div > .accu_forms-desc-preview {
  grid-row: 2;
}

body.accu_forms_client .af-field > div > :is(.form-group, .tw-mb-4, .ff-options-boxes):not(.accuforms-title-preview, .accu_forms-desc-preview) {
  grid-row: 3;
  min-width: 0;
}

body.accu_forms_client .af-field > .af-field-error {
  grid-row: 4;
}

body.accu_forms_client .af-sp .af-field .accuforms-title-preview {
  margin: 0 0 8px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--af-ink);
}

body.accu_forms_client .af-sp .af-field .accuforms-title-preview .text-danger {
  color: color-mix(in srgb, var(--af-accent) 70%, #b3261e);
}

body.accu_forms_client .af-sp .af-field .accu_forms-desc-preview {
  margin: -2px 0 10px;
  font-size: 14px;
  line-height: 1.5;
}

body.accu_forms_client .af-sp .af-field .tw-mb-4,
body.accu_forms_client .af-sp .af-field .form-group {
  margin-bottom: 0;
}

/* Every text control: empty, filled and focused look different.
   The portal's guest theme (a1_portal login.css) paints every field on a
   guest page gold, with !important. A single-page form carries its own
   colours, so these rules answer in kind, scoped to the form. */
html body.accu_forms_client .af-sp :is(.form-control:not(.bootstrap-select), .bootstrap-select > .dropdown-toggle) {
  height: 48px;
  min-height: 48px !important;
  padding: 11px 15px;
  border: 1px solid var(--af-edge);
  border-color: var(--af-edge) !important;
  border-radius: 12px !important;
  background: #fbfaff !important;
  font-size: 16px !important;
  color: var(--af-ink) !important;
  box-shadow: inset 0 1px 2px rgba(27, 39, 64, 0.04) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

html body.accu_forms_client .af-sp textarea.form-control:not(.bootstrap-select) {
  height: auto;
  min-height: 120px !important;
  max-height: 320px;
  overflow-y: auto;
  resize: vertical;
}

html body.accu_forms_client .af-sp :is(.form-control.af-filled, .bootstrap-select > .dropdown-toggle:not(.bs-placeholder)) {
  border-color: color-mix(in srgb, var(--af-accent) 45%, var(--af-edge)) !important;
  background: #ffffff !important;
}

html body.accu_forms_client .af-sp :is(.form-control:not(.bootstrap-select):focus, .bootstrap-select > .dropdown-toggle:focus, .bootstrap-select.open > .dropdown-toggle) {
  outline: none !important;
  border-color: var(--af-accent) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--af-accent) 18%, transparent) !important;
}

html body.accu_forms_client .af-sp .bootstrap-select > .dropdown-toggle {
  padding-right: 40px;
}

html body.accu_forms_client .af-sp .bootstrap-select > .dropdown-toggle.bs-placeholder {
  color: var(--af-muted) !important;
}

body.accu_forms_client .af-sp .input-group .form-control {
  border-radius: 12px 0 0 12px;
}

body.accu_forms_client .af-sp .input-group-addon {
  border-color: var(--af-edge);
  border-radius: 0 12px 12px 0;
  background: #ffffff;
  color: var(--af-muted);
}

/* Dropdowns, single and multiple. bootstrap-select gives its wrapper the
   form-control class too; only the button inside it is the field. */
body.accu_forms_client .af-sp .bootstrap-select {
  width: 100% !important;
}

html body.accu_forms_client .af-sp .bootstrap-select.form-control {
  height: auto;
  min-height: 0 !important;
  padding: 0;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body.accu_forms_client .af-sp .bootstrap-select .dropdown-menu {
  border: 1px solid var(--af-edge);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(27, 39, 64, 0.14);
  overflow: hidden;
}

/* bootstrap-select puts its option list (ul.dropdown-menu.inner) inside the
   menu panel, so the rule above framed the list a second time. */
body.accu_forms_client .af-sp .bootstrap-select .dropdown-menu.inner {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.accu_forms_client .af-sp .bootstrap-select .dropdown-menu li a {
  padding: 9px 14px;
  border-radius: 8px;
}

body.accu_forms_client .af-sp .bootstrap-select .dropdown-menu li.selected a {
  background: color-mix(in srgb, var(--af-accent) 10%, #ffffff);
  color: var(--af-ink);
}

body.accu_forms_client .af-sp .bootstrap-select .bs-actionsbox .btn {
  border: 1px solid var(--af-edge);
  border-radius: 10px;
  background: #ffffff;
  font-weight: 600;
}

/* A question that still needs an answer. */
html body.accu_forms_client .af-sp .af-field--invalid :is(.form-control:not(.bootstrap-select), .bootstrap-select > .dropdown-toggle, .ff-option-box) {
  border-color: #c0392b !important;
}

body.accu_forms_client .af-sp .af-field-error {
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: #b3261e;
}

/* Back and Next, or Back and Send on the last section. The send area's own
   parts (the terms, the bot check and the button) join the row directly. */
body.accu_forms_client .af-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 12px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--af-soft-edge);
}

body.accu_forms_client .af-submit {
  display: contents;
}

body.accu_forms_client .af-nav > .af-submit > .checkbox,
body.accu_forms_client .af-nav > .af-submit > .form-group {
  flex-basis: 100%;
  margin: 0;
  order: -1;
}

body.accu_forms_client .af-nav__next,
body.accu_forms_client .af-nav .accu_forms-sumbit-button-wrapper {
  margin-left: auto;
}

body.accu_forms_client .af-nav .accu_forms-next-button-preview,
body.accu_forms_client .af-nav .accu_forms-prev-button-preview {
  margin-top: 0;
  min-height: 50px;
}

@media (max-width: 520px) {
  body.accu_forms_client .af-nav > .af-nav__back,
  body.accu_forms_client .af-nav > .af-nav__next,
  body.accu_forms_client .af-nav .accu_forms-sumbit-button-wrapper {
    flex: 1 1 0;
  }

  body.accu_forms_client .af-nav .accu_forms-sumbit-button-wrapper .ff-submit-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.accu_forms_client .af-step,
  body.accu_forms_client .af-step__num,
  body.accu_forms_client .af-steps__toggle::after,
  body.accu_forms_client .af-sp .form-control,
  body.accu_forms_client .af-sp .bootstrap-select > .dropdown-toggle {
    transition: none;
  }
}

/* Rules on the form, marked quietly. A question whose answer changes what
   follows, and the heading of a section that appears only for some answers,
   carry a small branch mark that explains itself in the tooltip. A question
   that appears only for some answers within its section has a small turning
   arrow before its label, which ties it to the answer above it. */
body.accu_forms_client .af-branch {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  vertical-align: -4px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--af-accent) 9%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--af-accent) 22%, transparent);
  color: var(--af-accent);
  cursor: help;
  transition: background 160ms ease, box-shadow 160ms ease;
}

body.accu_forms_client .af-branch::before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='4' cy='3' r='1.6'/%3E%3Ccircle cx='4' cy='13' r='1.6'/%3E%3Ccircle cx='12' cy='4.5' r='1.6'/%3E%3Cpath d='M4 4.6v6.8M12 6.1c0 3.4-8 2.2-8 5.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='4' cy='3' r='1.6'/%3E%3Ccircle cx='4' cy='13' r='1.6'/%3E%3Ccircle cx='12' cy='4.5' r='1.6'/%3E%3Cpath d='M4 4.6v6.8M12 6.1c0 3.4-8 2.2-8 5.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.accu_forms_client .af-branch:hover,
body.accu_forms_client .af-branch:focus-visible {
  background: color-mix(in srgb, var(--af-accent) 16%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--af-accent) 40%, transparent);
  outline: none;
}

body.accu_forms_client .af-sp .af-field--conditional > div > .accuforms-title-preview::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  vertical-align: -1px;
  background: var(--af-accent);
  opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2.5v5.5a3 3 0 0 0 3 3h6.5'/%3E%3Cpath d='M10.5 8l3 3-3 3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2.5v5.5a3 3 0 0 0 3 3h6.5'/%3E%3Cpath d='M10.5 8l3 3-3 3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The page's one tooltip, in the top layer (see accu_forms-client.js). */
#tip {
  position: fixed;
  inset: auto;
  margin: 0;
  border: 0;
  overflow: visible;
  max-width: 280px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #22344f;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.24);
  pointer-events: none;
  z-index: 2147483000;
}

#tip:not(:popover-open):not([data-open]) {
  display: none;
}

:disabled[data-tip] {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.accu_forms_client .af-branch {
    transition: none;
  }
}