/*
 * Outfitter Forms — layout only.
 *
 * The theme (base.css §5 inputs, §4 buttons) supplies all colour, type, and the
 * focus ring. This file only handles spacing, the field-style variants, button
 * width/alignment, and the optional radius override — all via theme tokens
 * (var(--…)). No hardcoded colour, so a skin swap reskins the forms.
 */

.off-form {
  display: grid;
  gap: var(--space-md, 24px);
}

.off-form__field {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.off-form__req {
  color: var(--color-accent);
}

.off-form__error {
  margin-top: var(--space-2xs, 4px);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--color-accent);
}

.off-form__status {
  margin-bottom: var(--space-sm, 16px);
  padding: var(--space-sm, 16px) var(--space-md, 24px);
  border: var(--border, 1px) solid var(--color-line);
  border-radius: var(--radius, 2px);
  font-family: var(--font-body);
}

.off-form__status--success {
  border-color: var(--color-accent);
}

/* Honeypot — kept in the DOM for bots, removed from view and the a11y tree. */
.off-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Consent checkbox: inline, normal-case (overrides the theme's mono label). */
.off-form__consent label {
  display: flex;
  gap: var(--space-2xs, 4px);
  align-items: flex-start;
  font-family: var(--font-body);
  letter-spacing: normal;
  text-transform: none;
  opacity: 1;
}

.off-form__consent input[type="checkbox"] {
  width: auto;
  margin-top: 3px;
}

/* Actions: button width + alignment. */
.off-form__actions {
  display: flex;
}

.off-form--align-left .off-form__actions {
  justify-content: flex-start;
}

.off-form--align-center .off-form__actions {
  justify-content: center;
}

.off-form--align-right .off-form__actions {
  justify-content: flex-end;
}

.off-form--btn-full .off-form__actions {
  display: block;
}

.off-form--btn-full .off-form__submit {
  width: 100%;
}

/* Field style: FILLED — solid surface, no visible border. */
.off-form--filled input:not([type="checkbox"]):not([type="submit"]),
.off-form--filled textarea,
.off-form--filled select {
  background-color: var(--color-canvas);
  border-color: transparent;
}

/* Field style: UNDERLINED — bottom rule only, no fill, square, flush-left. */
.off-form--underlined input:not([type="checkbox"]):not([type="submit"]),
.off-form--underlined textarea,
.off-form--underlined select {
  background-color: transparent;
  border-width: 0 0 var(--border, 1px) 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Optional radius override (default inherits the global --radius). */
.off-form--radius-0 input,
.off-form--radius-0 textarea,
.off-form--radius-0 select,
.off-form--radius-0 .off-form__submit {
  border-radius: 0;
}

.off-form--radius-4 input,
.off-form--radius-4 textarea,
.off-form--radius-4 select,
.off-form--radius-4 .off-form__submit {
  border-radius: 4px;
}

.off-form--radius-8 input,
.off-form--radius-8 textarea,
.off-form--radius-8 select,
.off-form--radius-8 .off-form__submit {
  border-radius: 8px;
}

.off-form--radius-pill input,
.off-form--radius-pill textarea,
.off-form--radius-pill select,
.off-form--radius-pill .off-form__submit {
  border-radius: 999px;
}