/* ==========================================================================
   forms.css — Fluent Forms skin for the application form.
   Third-party override file. It loads after Fluent Forms' stylesheets and
   matches their selector weight, so source order wins without !important.
   Component classes (c-form-*, c-receipt*) are single-class.
   ========================================================================== */

/* Form rhythm */
.fluentform .ff-el-group {
  margin-block-end: var(--space-s);
}

.c-form-note {
  font-size: var(--small-size);
  color: var(--text-muted);
}

/* Step headings */
.c-form-step {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-m);
  padding-block-end: var(--space-2xs);
  border-block-end: var(--border-width-thin) solid var(--black-20);
}

.c-form-step__num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--space-l);
  block-size: var(--space-l);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--on-primary);
  background-color: var(--primary);
}

.c-form-step__title {
  font-family: var(--font-body);
  font-size: var(--h5-size);
  line-height: var(--line-height-snug);
}

/* Labels */
.fluentform .ff-el-input--label label {
  font-size: var(--small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--text-body);
}

/* Text inputs and selects */
.fluentform .ff-el-form-control {
  min-block-size: var(--space-xl);
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--body-size);
  color: var(--text-body);
  background-color: var(--bg-body);
  border: var(--border-width-thin) solid var(--dark-tint-3);
  border-radius: var(--control-radius);
}

/* Native arrow on dropdowns (Fluent Forms removes it) */
.fluentform select.ff-el-form-control {
  appearance: auto;
}

.fluentform .ff-el-form-control:focus {
  border-color: var(--dark);
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Radio options as bordered choices */
.fluentform .ff-el-form-check {
  margin-inline-end: var(--space-2xs);
}

.fluentform .ff-el-form-check label.ff-el-form-check-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-block-size: var(--space-l);
  padding-inline: var(--space-xs);
  background-color: var(--bg-body);
  font-size: var(--body-size);
  color: var(--text-body);
  border: var(--border-width-thin) solid var(--dark-tint-3);
  cursor: pointer;
}

.fluentform .ff-el-form-check-input {
  accent-color: var(--primary);
}

/* File upload */
.fluentform .ff_upload_btn.ff-btn {
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-block-size: var(--space-2xl);
  padding: var(--space-xs) var(--space-s);
  font-weight: var(--font-weight-semibold);
  color: var(--primary);
  text-decoration: underline;
  background-color: var(--bg-body);
  border: var(--border-width-medium) dashed var(--dark-tint-3);
  border-radius: var(--control-radius);
}

.fluentform .ff-el-help-message {
  font-size: var(--small-size);
  font-style: normal;
  color: var(--text-muted);
}

/* Errors */
.fluentform .ff-el-is-error .text-danger {
  font-size: var(--small-size);
  color: var(--error);
}

.fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--error);
}

/* Submit */
.fluentform .ff_upload_btn.ff-btn:hover {
  color: var(--primary-shade-1);
  background-color: var(--bg-body);
}

.fluentform .ff-btn-submit {
  inline-size: 100%;
  min-block-size: var(--space-xl);
  padding: var(--control-padding-block) var(--control-padding-inline);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--font-weight-bold);
  color: var(--on-primary);
  background-color: var(--primary);
  border: 0;
  border-radius: var(--control-radius);
  transition: background-color var(--transition-base);
}

.fluentform .ff-btn-submit:hover {
  color: var(--on-primary);
  background-color: var(--primary-shade-1);
}

.fluentform .ff-btn-submit:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Confirmation (receipt) */
.ff-message-success {
  padding: 0;
  border: 0;
  box-shadow: none;
}

.c-receipt {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.c-receipt__badge {
  align-self: flex-start;
  padding: var(--space-3xs) var(--space-2xs);
  font-size: var(--small-size);
  font-weight: var(--font-weight-bold);
  color: var(--success);
  background-color: var(--success-tint-4);
}

.c-receipt__title {
  font-family: var(--font-heading);
  font-size: var(--h4-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.c-receipt__list {
  border-block-start: var(--border-width-thin) solid var(--black-20);
}

.c-receipt__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3xs) var(--space-s);
  padding-block: var(--space-2xs);
  border-block-end: var(--border-width-thin) solid var(--black-20);
}

.c-receipt__row dt {
  font-size: var(--small-size);
  color: var(--text-muted);
}

.c-receipt__row dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}