/* ===========================
   Juliana — Fluent Forms integration
   Maps FF output classes to j-form design tokens.
   Scoped to .fluentform to avoid touching anything else.
   =========================== */

/* ===========================
   Form wrapper
   =========================== */

.fluentform {
  /* box model */
  width: 100%;

}

.fluentform .ff-all-fields {
  /* display */
  display: flex;

  /* flexbox */
  flex-direction: column;
  gap: var(--sp-24);

}

/* Reset FF default field-group margin — gap on parent owns spacing */
.fluentform .ff-el-group {
  /* box model */
  margin: 0;
  padding: 0;

}


/* ===========================
   Labels
   =========================== */

.fluentform .ff-el-input--label {
  /* box model */
  margin-bottom: var(--sp-4);

}

.fluentform .ff-el-input--label label {
  /* text */
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;

  /* color */
  color: var(--c-ink);

  /* other */
  cursor: default;

}

.fluentform .ff-el-input--label .ff-el-is-required {
  /* color */
  color: var(--c-accent-text);

}


/* ===========================
   Inputs and textarea
   =========================== */

.fluentform .ff-el-form-control {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-body);

  /* color */
  color: var(--c-ink);
  background: var(--c-surface-1);

  /* box model */
  padding: var(--sp-16) var(--sp-24);
  width: 100%;

  /* border */
  border: 1.5px solid var(--c-ink-dim);
  border-radius: var(--r-button);

  /* transition */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;

  /* other */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;

}

.fluentform .ff-el-form-control::placeholder {
  /* color */
  color: var(--c-ink-muted);

}

.fluentform .ff-el-form-control:focus,
.fluentform .ff-el-form-control:focus-visible {
  /* border */
  border-color: var(--c-accent-text);

  /* other */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent);

}

.fluentform textarea.ff-el-form-control {
  /* text */
  line-height: 1.7;

  /* box model */
  min-height: 160px;

  /* other */
  resize: vertical;

}


/* ===========================
   Submit button spacing
   Button styles live in components/buttons.css alongside j-btn--primary.
   =========================== */

.fluentform .ff_submit_btn_wrapper {
  /* box model */
  margin-top: var(--sp-32);

}

@media (max-width: 639px) {
  .fluentform .ff_submit_btn_wrapper {
    /* display */
    display: flex;

  }

  .fluentform .ff-btn-submit {
    /* box model */
    width: 100%;

    /* flexbox */
    justify-content: center;

  }
}


/* ===========================
   Validation errors
   =========================== */

.fluentform .error.text {
  /* text */
  font-size: var(--fs-meta);

  /* color */
  color: var(--c-accent-text);

  /* box model */
  margin: var(--sp-4) 0 0;

  /* display */
  display: block;

}

.fluentform .ff-el-is-error .ff-el-form-control {
  /* border */
  border-color: var(--c-accent-text);

}


/* ===========================
   Success / confirmation
   =========================== */

.fluentform .ff-message-success {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;

  /* color */
  color: var(--c-ink);

  /* box model */
  padding: var(--sp-24) 0;

}


/* ===========================
   FF default chrome reset
   =========================== */

/* Remove any FF default borders/backgrounds on the form itself */
.fluentform,
.fluentform * {
  box-sizing: border-box;

}

.fluentform .ff-form-inside {
  /* box model */
  padding: 0;
  margin: 0;

  /* border */
  border: none;
  background: none;

}