/* Busyness Forms — front-end.
 *
 * Every value a Style tab control can change is a CSS VARIABLE, defaulted here
 * and overridden by a per-form block the plugin prints. So this file decides
 * WHICH property each control feeds, and the form only supplies numbers and
 * colours — which is what keeps two forms on one page from bleeding into each
 * other, and what makes a new control a new variable rather than a rewrite.
 *
 * Scoped under .bf-form so a theme's own form rules and these never collide. */

.bf-form {
  /* Layout */
  --bf-max-width: 720px;
  --bf-gap: 18px;

  /* Fields */
  --bf-field-bg: #ffffff;
  --bf-line: #cfdce1;
  --bf-border-width: 1px;
  --bf-radius: 12px;
  --bf-pad-y: 11px;
  --bf-pad-x: 14px;
  --bf-ink: #232323;
  --bf-size: 15px;
  --bf-focus: #f8a815;
  --bf-placeholder: #8fa6b0;
  --bf-field-shadow: none;

  /* Labels */
  --bf-label-color: #232323;
  --bf-label-size: 14px;
  --bf-label-weight: 600;
  --bf-required: #c0392b;
  --bf-muted: #527a8a;
  /* The Yes / No text beside a radio or checkbox. NOT --bf-ink: that one is
     the text typed INSIDE a box, and a form on a dark background needs those
     two to be opposite colours. */
  --bf-choice-color: #232323;
  --bf-choice-size: 18px;
  --bf-choice-accent: #f8a815;
  --bf-choice-gap: 9px;
  --bf-upload-bg: #fafbfb;
  --bf-upload-line: #cfdce1;
  --bf-upload-border-style: dashed;
  --bf-upload-radius: 10px;
  --bf-upload-pad: 16px;

  /* Button */
  --bf-btn-bg: linear-gradient(90deg, #e6381f, #f8a815);
  --bf-btn-text: #ffffff;
  --bf-btn-radius: 40px;
  --bf-btn-size: 15px;
  --bf-btn-pad-y: 12px;
  --bf-btn-pad-x: 26px;

  /* Feedback */
  --bf-error: #c0392b;

  max-width: var(--bf-max-width);
  margin: 0 auto;
  color: var(--bf-ink);
  font-size: var(--bf-size);
  line-height: 1.5;
}

.bf-form *,
.bf-form *::before,
.bf-form *::after {
  box-sizing: border-box;
}

/* On the form's BACKGROUND, so it follows the label colour rather than the
   colour of text typed inside a box. Same reasoning as .bf-choice. */
.bf-title {
  margin: 0 0 18px;
  font-size: 26px;
  line-height: 1.2;
  color: var(--bf-label-color);
}

/* The field grid: full / half / third widths that stack on a phone. */
.bf-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-gap);
}
/* A field a condition has hidden.

   The rule above sets display:flex, which outranks what the hidden attribute
   does on its own — so the field would stay on screen, marked hidden, doing
   nothing. This is the whole reason conditional fields need any CSS at all. */
.bf-field[hidden] {
  display: none !important;
}

.bf-field {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bf-w-half { flex-basis: calc(50% - (var(--bf-gap) / 2)); }
.bf-w-third { flex-basis: calc(33.333% - (var(--bf-gap) * 2 / 3)); }
@media (max-width: 600px) {
  .bf-w-half,
  .bf-w-third { flex-basis: 100%; }
}

.bf-label {
  font-weight: var(--bf-label-weight);
  font-size: var(--bf-label-size);
  color: var(--bf-label-color);
}
.bf-req { color: var(--bf-required); }
.bf-desc {
  font-size: 12.5px;
  color: var(--bf-muted);
}

.bf-field input[type="text"],
.bf-field input[type="password"],
.bf-field input[type="email"],
.bf-field input[type="tel"],
.bf-field input[type="url"],
.bf-field input[type="number"],
.bf-field input[type="date"],
.bf-field textarea,
.bf-field select {
  width: 100%;
  min-width: 0;
  padding: var(--bf-pad-y) var(--bf-pad-x);
  font-size: var(--bf-size);
  color: var(--bf-ink);
  background: var(--bf-field-bg);
  border: var(--bf-border-width) solid var(--bf-line);
  border-radius: var(--bf-radius);
  box-shadow: var(--bf-field-shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  line-height: 1.4;
}
.bf-field textarea { resize: vertical; }

/* Uploads. Styled through the same variables as every other control, so a
   per-type override reaches them like anything else. */
.bf-field input[type="file"] {
  width: 100%;
  min-width: 0;
  padding: var(--bf-pad-y) var(--bf-pad-x);
  font-size: calc(var(--bf-size) - 1px);
  color: var(--bf-ink);
  background: var(--bf-field-bg);
  border: var(--bf-border-width) dashed var(--bf-line);
  border-radius: var(--bf-radius);
  box-shadow: var(--bf-field-shadow);
  font-family: inherit;
  cursor: pointer;
}
.bf-field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  font: inherit;
  font-size: calc(var(--bf-size) - 2px);
  color: var(--bf-btn-text);
  background: var(--bf-btn-bg);
  border: 0;
  border-radius: var(--bf-btn-radius);
  cursor: pointer;
}
.bf-file-note {
  font-size: 11.5px;
  color: var(--bf-muted);
}

/* The upload box.

   Dashed by default, because a dotted outline is what people read as “drop
   something here” and a solid one reads as a text field that will not accept
   typing. The file input keeps its own button — replacing it means a label
   wired to a hidden input, which is more moving parts than a border is worth. */
.bf-field input[type="file"] {
  padding: var(--bf-upload-pad);
  border: var(--bf-border-width) var(--bf-upload-border-style) var(--bf-upload-line);
  border-radius: var(--bf-upload-radius);
  background: var(--bf-upload-bg);
  color: var(--bf-ink);
  font-size: calc(var(--bf-size) - 1px);
  cursor: pointer;
}
.bf-field input[type="file"]:hover { border-color: var(--bf-choice-accent); }

.bf-field ::placeholder { color: var(--bf-placeholder); opacity: 1; }

.bf-field input:focus,
.bf-field textarea:focus,
.bf-field select:focus {
  outline: none;
  border-color: var(--bf-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-focus) 22%, transparent);
}

.bf-has-error input,
.bf-has-error textarea,
.bf-has-error select {
  border-color: var(--bf-error);
}
.bf-error {
  color: var(--bf-error);
  font-size: 12.5px;
}
.bf-errors {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--bf-error);
  border-radius: var(--bf-radius);
  color: var(--bf-error);
  background: color-mix(in srgb, var(--bf-error) 7%, transparent);
}

/* Choices */
.bf-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bf-choice {
  display: flex;
  align-items: center;
  gap: var(--bf-choice-gap);
  font-size: var(--bf-size);
  color: var(--bf-choice-color);
  cursor: pointer;
}

/* accent-color rather than a drawn box: the browser keeps the control a real
   checkbox, so keyboard, screen readers and the operating system’s own
   high-contrast settings all keep working. A hand-drawn one looks the same and
   throws every one of those away. */
.bf-choice input {
  width: var(--bf-choice-size);
  height: var(--bf-choice-size);
  accent-color: var(--bf-choice-accent);
  flex: 0 0 auto;
}

/* Section heading + HTML block */
.bf-heading h3 { margin: 6px 0 2px; font-size: 19px; color: var(--bf-label-color); }
.bf-heading-desc { margin: 0; color: var(--bf-muted); font-size: 13.5px; }

/* Navigation */
.bf-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.bf-nav-spacer { flex: 1; }
.bf-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: var(--bf-btn-pad-y) var(--bf-btn-pad-x);
  font-size: var(--bf-btn-size);
  font-weight: 600;
  border-radius: var(--bf-btn-radius);
  font-family: inherit;
  transition: opacity 0.15s, background 0.15s;
}
.bf-back {
  background: transparent;
  /* Also on the background, not inside a box. */
  color: var(--bf-label-color);
  border: var(--bf-border-width) solid var(--bf-line);
}
.bf-next,
.bf-submit {
  color: var(--bf-btn-text);
  background: var(--bf-btn-bg);
}
.bf-next:hover,
.bf-submit:hover { opacity: 0.92; }
.bf-btn:disabled { opacity: 0.5; cursor: default; }

/* Progress */
.bf-progress {
  display: flex;
  gap: 6px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.bf-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--bf-muted);
  position: relative;
}
.bf-step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ececf1;
  color: var(--bf-muted);
  font-weight: 700;
}
.bf-step.is-active .bf-step-dot,
.bf-step.is-done .bf-step-dot {
  background: var(--bf-btn-bg);
  color: var(--bf-btn-text);
}
.bf-step.is-active .bf-step-label { color: var(--bf-ink); font-weight: 600; }

/* Pages: hidden ones stay in the DOM (and validate) — the script toggles them.
   With no JS every page shows, which still submits correctly. */
.bf-form[data-js="on"] .bf-page { display: none; }
.bf-form[data-js="on"] .bf-page.is-active { display: block; }

/* Honeypot — off-screen, never display:none. The markup carries the same rule
   inline, because a visitor must never see this field even if this stylesheet
   fails to load. */
.bf-hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  height: 0;
  overflow: hidden;
}

.bf-confirmation {
  padding: 26px;
  border: var(--bf-border-width) solid var(--bf-focus);
  border-radius: var(--bf-radius);
  background: color-mix(in srgb, var(--bf-focus) 8%, transparent);
  font-size: 16px;
}
.bf-note,
.bf-admin-note {
  padding: 14px 16px;
  border: 1px dashed var(--bf-line);
  border-radius: var(--bf-radius);
  color: var(--bf-muted);
}

/* Hide anything until a form reveals it.
   Put `bf-hidden` in an element's CSS Classes and it starts out hidden;
   a form's "Show an element" step takes the class off and the element comes
   back as whatever its own CSS makes it — block, flex, grid, it does not
   matter, because nothing here ever writes a display value. */
.bf-hidden { display: none !important; }

/* A button that carries an icon becomes a flex row, so the icon and the words
   sit on one baseline with a real gap rather than a space character. Buttons
   without one are untouched: adding flex to every button would change how a
   plain label centres in one that is set to full width. */
.bf-btn-has-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bf-btn-icon { flex: 0 0 auto; }

/* The anti-spam widget.
 *
 * Given room of its own above the button rather than being squeezed into the
 * field gap: two of the three providers grow when they decide to ask a real
 * question, and a widget that pushes the submit button off the bottom of a
 * phone screen the moment it expands is how somebody gives up on a form. */
.bf-captcha {
  margin: var(--bf-gap, 16px) 0 0;
  min-height: 0;
}
.bf-captcha iframe { max-width: 100%; }

/* "Lost your password?" and "Back to sign in".
 *
 * A link that changes the form rather than the page. Sized down and pulled up
 * against the field above it, because it belongs to that field's answer rather
 * than standing as a row of its own. */
.bf-alt-link {
  margin: calc(var(--bf-gap, 16px) * -0.4) 0 0;
  font-size: 0.9em;
}
.bf-alt-link a { color: var(--bf-focus, currentColor); }

/* Password reveal.
 *
 * The wrapper is the field's full width and the input keeps room on the right
 * for the eye, so text never runs under it. The eye only flips the input's type
 * in the browser — with JavaScript off the button does nothing and the field is
 * an ordinary, working password box, which is why it is safe to always render. */
.bf-pass {
  position: relative;
  width: 100%;
}
.bf-field .bf-pass input[type="password"],
.bf-field .bf-pass input[type="text"] {
  /* Room for the button: its width plus a little air. */
  padding-right: 46px;
}

.bf-pass-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 6px;
  margin: auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--bf-placeholder);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.bf-pass-toggle:hover { color: var(--bf-ink); background: rgba(82, 122, 138, 0.1); }
.bf-pass-toggle:focus-visible { outline: 2px solid var(--bf-focus); outline-offset: 1px; }
.bf-pass-toggle svg { width: 20px; height: 20px; display: block; }

/* One eye at a time. Open by default (click to reveal); the pressed state — set
   by the script when the password is showing — swaps to the crossed-out eye. */
.bf-pass-toggle .bf-eye-shut { display: none; }
.bf-pass-toggle[aria-pressed="true"] .bf-eye-open { display: none; }
.bf-pass-toggle[aria-pressed="true"] .bf-eye-shut { display: block; }