/* Inquiry form with the Formmailer – the design on top of formmailer.css (plugin "Formmailer").
   Loaded only on pages with the layout inquiry (inc/setup.php). Markup: template-parts/parts/inquiry-form.php;
   the base form styles (.fcard, .fi, .upload, .steps-*) stay in site.css. */

form[data-formmailer] {
  --fm-error: #B3261E;
  --fm-success-bg: var(--c-white);
  --fm-success-text: var(--c-primary);
  --fm-error-bg: var(--c-white);
  --fm-error-text: var(--c-primary);
  --fm-info-bg: var(--c-white);
  --fm-info-text: var(--c-primary);
}

/* error below a field */
.fcard .fm-error { margin: 6px 0 0; padding: 0 20px; font-size: 13px; line-height: 18px; font-weight: 500; }
.fcard .fi[aria-invalid="true"] { border-bottom-color: var(--fm-error) !important; }

/* uploads: the visually hidden input stays focusable – the button shows the keyboard focus; the file list and the
   error take a line of their own below the label and the button */
.upload { position: relative; }
.upload > span:first-child { flex: 0 0 9.5em; } /* the three upload buttons line up */
.upload:has(input:focus-visible) .btn { outline: 2px solid var(--c-secondary); outline-offset: 2px; }
.upload .fm-filelist, .upload .fm-error { flex: 1 0 100%; padding: 0; }
.fcard .fm-filelist { margin: -4px 0 0; color: var(--c-text); font-size: 13px; line-height: 18px; word-break: break-word; }
.fcard .fm-filelist li::before { content: none; }
.fcard .fm-filelist li + li { margin-top: 2px; }

/* captcha (ALTCHA, own server): white box like the notes */
.fcard altcha-widget {
  margin: 20px 0 0;
  --altcha-max-width: 100%;
  --altcha-border-width: 0;
  --altcha-border-radius: var(--r-s);
  --altcha-color-base: var(--c-white);
  --altcha-color-base-content: var(--c-primary);
  --altcha-color-primary: var(--c-primary);
  --altcha-color-primary-content: var(--c-white);
  --altcha-color-success: #5E8C0F;
  --altcha-color-error: var(--fm-error);
  --altcha-checkbox-border-color: var(--c-line);
  --altcha-checkbox-border-radius: 3px;
  --altcha-checkbox-outline-color: var(--c-secondary);
}

/* consent checkbox next to the send button (.accept/.choice from site.css): keyboard focus, error below the text */
.fsubmit__consent { flex: 1 1 auto; min-width: 0; }
.accept .choice input:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 2px; }
.fcard .fsubmit__consent .fm-error { padding: 0 0 0 32px; } /* aligned with the text after the 20 px box + 12 px gap, also on phones */

/* messages when sending (outside the steps) and the hint without JavaScript – like .note, marked by a bar */
.fcard .fm-status { margin: 20px 0 0; padding: 12px 16px; border-left: 4px solid var(--c-secondary); border-radius: var(--r-s); background: var(--c-white); color: var(--c-primary); font-size: 14px; line-height: 20px; font-weight: 500; }
.fcard .fm-status:focus { outline: none; } /* formmailer.js focuses the message – a ring only for keyboard users */
.fcard .fm-status:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 2px; }
.fcard .fm-status--success { border-left-color: var(--c-accent); }
.fcard .fm-status--error { border-left-color: var(--fm-error); }
.fcard noscript .fm-status { margin: 0 0 20px; }

/* without the Formmailer on the server the form is shown without sending (inquiry-form.php) */
.fcard .btn:disabled, .fcard .btn:disabled:hover { background: var(--c-accent); border-color: var(--c-accent); opacity: .45; cursor: not-allowed; }

@media (max-width: 767px) {
  /* label and button stay on one line on phones */
  .upload { gap: 10px 14px; padding: 6px 10px; }
  .upload > span:first-child { flex-basis: 8.5em; }
  .fcard .fm-error { padding: 0 10px; }
  /* upload buttons as tap targets of 44 px (mobile UX check no. 7) – .btn--navy stays small elsewhere */
  .upload .btn { min-height: 44px; padding: 10px 22px; font-size: 14px; }
}