/* ==========================================================================
   Forms — styling for FluentForms to match Figma 71:1077.
   Underlined inputs, label above, icon + hint as the placeholder row.
   Scoped to .trustav-cta__form so plugin defaults elsewhere stay untouched.
   ========================================================================== */

/* Figma 126:3531 puts Name and E-mail on one row and everything else full
   width. FluentForms renders each field as an .ff-el-group sibling of the
   form, so the row comes from a grid here rather than from the plugin's
   two-column container — one less piece of plugin JSON to maintain, and the
   client can still drop a container into a form of their own (styled below). */
.trustav-cta__form .frm-fluent-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 20px;
}

/* Once its JS has run, FluentForms wraps the fields in a bare <fieldset>,
   which would otherwise become the grid's only item. Collapsing it lets the
   fields themselves be the grid items, whether or not the wrapper is there. */
.trustav-cta__form .frm-fluent-form > fieldset {
  display: contents;
}

/* The fieldset opens with a visually hidden <legend> naming the form for
   screen readers. It stays — but as a grid item it would take the first cell
   and push the Name field into the second column. */
.trustav-cta__form .frm-fluent-form .ff_screen_reader_title {
  grid-column: 1 / -1;
}

.trustav-cta__form .fluentform .ff-el-group {
  grid-column: 1 / -1;
  margin-block-end: 0;
}

.trustav-cta__form .fluentform .trustav-field--name,
.trustav-cta__form .fluentform .trustav-field--email {
  grid-column: span 1;
}

/* The design has the button left and the consent note to its right, but the
   submit button is always the last element FluentForms outputs, so the two are
   swapped back with order. */
.trustav-cta__form .fluentform .trustav-field--submit {
  grid-column: 1;
  order: 1;
}

.trustav-cta__form .fluentform .trustav-field--consent {
  grid-column: 2;
  order: 2;
  align-self: center;
  margin: 0;
}

/* Figma 92:1144 — the last row is the 58px button, nothing taller. */
.trustav-cta__form .fluentform .trustav-field--consent > *,
.trustav-cta__form .fluentform .trustav-field--submit > * {
  margin-block: 0;
}

.trustav-cta__form .fluentform .ff-el-input--label label {
  display: block;
  margin-block-end: 21px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 21px; /* Figma 92:1113 — the label box is 21px tall */
  letter-spacing: var(--ls-body);
  color: var(--c-black);
}

.trustav-cta__form .fluentform .ff-el-is-required.asterisk-right label:after {
  content: " *";
  color: var(--c-error);
}

/* --- Fields -------------------------------------------------------------- */
.trustav-cta__form .fluentform input[type="text"],
.trustav-cta__form .fluentform input[type="email"],
.trustav-cta__form .fluentform input[type="tel"],
.trustav-cta__form .fluentform input[type="url"],
.trustav-cta__form .fluentform input[type="number"],
.trustav-cta__form .fluentform select,
.trustav-cta__form .fluentform textarea {
  width: 100%;
  padding: 0 0 17px;
  font-family: var(--ff-body);
  font-size: 0.9375rem;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-black);
  background: none;
  border: 0;
  border-bottom: var(--border-width) solid var(--c-neutral-3);
  border-radius: 0;
  box-shadow: none;
  transition: border-color var(--dur) var(--ease);
}

/* Figma 92:1138 draws the message as a one-line field, like the inputs. */
.trustav-cta__form .fluentform textarea {
  height: calc(1.5em + 17px);
  min-height: calc(1.5em + 17px);
  resize: vertical;
}

/* The wrapper's 33px gap indents the lone button — Figma 92:1145 sits flush. */
.trustav-cta__form .fluentform .trustav-field--submit {
  gap: 0;
}

/* FluentForms' clearfix pseudo-elements become wrapping flex items in the
   submit row, adding a line under the 58px button (Figma 92:1144). */
.trustav-cta__form .fluentform .ff-el-group::before,
.trustav-cta__form .fluentform .ff-el-group::after {
  display: none;
}

/* Label 21 + gap 21 + field 40 = the 82px Figma field (92:1112). */
.trustav-cta__form .fluentform .ff-el-input--label {
  margin-block-end: 0;
}

/* --- Field icons --------------------------------------------------------- */
/* Figma 126:3536 — a 14px accent icon sits 9px to the left of the placeholder.
   The icons are exported from Figma into assets/img/; they are painted as
   backgrounds because the markup comes from the plugin and cannot carry an
   <img> of ours. The 23px inline padding is the 14px icon plus that 9px gap. */
.trustav-cta__form .fluentform .trustav-field :is(input, textarea) {
  padding-inline-start: 23px;
  background-repeat: no-repeat;
  background-position: left 0.15em;
  background-size: 14px 14px;
}

.trustav-cta__form .fluentform .trustav-field--name input {
  background-image: url("../../img/icon-field-name.svg");
}

.trustav-cta__form .fluentform .trustav-field--email input {
  background-image: url("../../img/icon-field-email.svg");
}

.trustav-cta__form .fluentform .trustav-field--phone input {
  background-image: url("../../img/icon-field-phone.svg");
}

.trustav-cta__form .fluentform .trustav-field--message textarea {
  background-image: url("../../img/icon-field-message.svg");
}

.trustav-cta__form .fluentform :is(input, select, textarea):focus {
  outline: none;
  border-bottom-color: var(--c-accent);
}

.trustav-cta__form .fluentform ::placeholder {
  color: var(--c-neutral-1);
  opacity: 1;
}

/* --- Two-up row ---------------------------------------------------------- */
.trustav-cta__form .fluentform .ff-t-container {
  display: flex;
  gap: 20px;
}

.trustav-cta__form .fluentform .ff-t-cell {
  flex: 1;
  min-width: 0;
}

/* --- Submit -------------------------------------------------------------- */
.trustav-cta__form .fluentform .ff-el-group.ff_submit_btn_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 33px;
  margin-block-end: 0;
}

.trustav-cta__form .fluentform .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height-md);
  min-width: 222px;
  padding-inline: var(--space-xl);
  font-family: var(--ff-body);
  font-size: var(--fs-btn-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-button);
  color: var(--c-white);
  background-color: var(--c-primary);
  border: var(--border-width) solid var(--c-primary);
  border-radius: 0; /* Figma buttons are square-cornered, as in button.css. */
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.trustav-cta__form .fluentform .ff-btn-submit:hover {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
}

/* --- Consent note -------------------------------------------------------- */
.trustav-cta__form .fluentform .ff-custom_html {
  max-width: 12rem;
  font-size: 0.75rem;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-neutral-2);
}

.trustav-cta__form .fluentform .ff-custom_html a {
  color: var(--c-accent);
  text-decoration: underline;
}

/* --- Photo upload (client request 2026-10-01, no Figma) --------------------
   An optional field, so the button is the small outlined one, not a second
   primary; the helper note under it reads as part of the same field. */
.trustav-cta__form .fluentform .ff_upload_btn.ff-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-height-sm);
  padding: 0 var(--space-md);
  font-family: var(--ff-body);
  font-size: var(--fs-btn-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  color: var(--c-accent);
  background-color: transparent;
  border: var(--border-width) solid var(--c-accent);
  border-radius: 0;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.trustav-cta__form .fluentform .ff_upload_btn.ff-btn:hover,
.trustav-cta__form .fluentform .ff_upload_btn.ff-btn:focus-visible {
  color: var(--c-white);
  background-color: var(--c-accent);
}

.trustav-cta__form .fluentform .ff-uploaded-list:empty {
  display: none;
}

.trustav-cta__form .fluentform .trustav-field--photos-note {
  max-width: none;
  margin-block-start: calc(var(--space-md) - 36px); /* tuck under the field: grid gap is 36px */
}

.trustav-cta__form .fluentform .trustav-field--photos-note > p {
  margin: 0;
}

/* --- Messages ------------------------------------------------------------ */
.trustav-cta__form .fluentform .error,
.trustav-cta__form .fluentform .text-danger {
  margin-block-start: var(--space-xs);
  font-size: var(--fs-small);
  color: var(--c-error);
}

.trustav-cta__form .ff-message-success {
  padding: var(--space-lg);
  font-size: var(--fs-body-sm);
  color: var(--c-primary);
  background-color: var(--c-neutral-4);
  border: var(--border-width) solid var(--c-neutral-3);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 560px) {
  /* One column: Name and E-mail stop sharing a row, and the button and consent
     note stack in their natural order again. */
  .trustav-cta__form .frm-fluent-form {
    grid-template-columns: 1fr;
  }

  .trustav-cta__form .fluentform .trustav-field--name,
  .trustav-cta__form .fluentform .trustav-field--email,
  .trustav-cta__form .fluentform .trustav-field--submit,
  .trustav-cta__form .fluentform .trustav-field--consent {
    grid-column: 1;
  }

  .trustav-cta__form .fluentform .ff-t-container {
    flex-direction: column;
    gap: 0;
  }

  .trustav-cta__form .fluentform .ff-btn-submit {
    width: 100%;
  }

  .trustav-cta__form .fluentform .ff-custom_html {
    max-width: none;
  }
}