/* =========================================================================
 * Brandmuller Starter — forms.css
 *
 * Universal form styling that works with multiple form plugins. All rules
 * are scoped to `.bms-form-container` so admin forms and other 3rd-party
 * forms on the site aren't affected.
 *
 * Plugins covered:
 *   - Fluent Forms          (.frm-fluent-form, .ff-el-*, .ff-btn-submit)
 *   - Contact Form 7        (.wpcf7, .wpcf7-form-control)
 *   - Gravity Forms         (.gform_wrapper, .gform_button)
 *   - WPForms               (.wpforms-form, .wpforms-submit)
 *   - Native HTML forms     (input, textarea, select, button)
 *
 * To add a new form to a page:
 *   1. Add a Group block to the page.
 *   2. Group → Advanced → Additional CSS class(es): `bms-form-container`
 *      (optionally add `bms-form-container--card` for the card treatment)
 *   3. Inside the group, add a Shortcode block with the form shortcode.
 *
 * See /docs/forms.md for the full setup walkthrough.
 * ========================================================================= */

.bms-form-container {
  --bms-bg:           var(--wp--preset--color--bg, #F1F2F3);
  --bms-bg-card:      var(--wp--preset--color--bg-card, #FFFFFF);
  --bms-ink:          var(--wp--preset--color--ink, #1A1915);
  --bms-ink-2:        var(--wp--preset--color--ink-2, #4A4740);
  --bms-ink-3:        var(--wp--preset--color--ink-3, #8B867C);
  --bms-rule:         var(--wp--preset--color--rule, #DCDFE2);
  --bms-accent:       var(--wp--preset--color--accent, #B8694A);

  --form-input-bg:     var(--bms-bg-card);
  --form-input-border: var(--bms-rule);
  --form-input-focus:  var(--bms-accent);
  --form-text:         var(--bms-ink);
  --form-text-muted:   var(--bms-ink-3);
  --form-radius:       12px;
  --form-error:        #C84B33;
  --form-success-bg:   #ECF6F0;
  --form-success-text: #1E6E3A;
  --form-success-border: #B8DCC6;

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--form-text);
}

/* ---- Card variant ---- */
/* Add `bms-form-container--card` to the Group block for a self-contained card look. */
.bms-form-container--card {
  background: var(--bms-bg-card);
  padding: 36px;
  border-radius: 18px;
  border: 1px solid var(--bms-rule);
}

@media (max-width: 480px) {
  .bms-form-container--card { padding: 24px; }
}

/* =========================================================================
 * Inputs, selects, textareas
 * ========================================================================= */

.bms-form-container input[type="text"],
.bms-form-container input[type="email"],
.bms-form-container input[type="tel"],
.bms-form-container input[type="url"],
.bms-form-container input[type="number"],
.bms-form-container input[type="password"],
.bms-form-container input[type="search"],
.bms-form-container input[type="date"],
.bms-form-container input[type="time"],
.bms-form-container input[type="datetime-local"],
.bms-form-container select,
.bms-form-container textarea,
.bms-form-container .ff-el-form-control,
.bms-form-container .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not([type="checkbox"]):not([type="radio"]),
.bms-form-container .gfield input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.bms-form-container .gfield textarea,
.bms-form-container .gfield select,
.bms-form-container .wpforms-field-medium,
.bms-form-container .wpforms-field-large,
.bms-form-container .wpforms-field-small {
  width: 100%;
  padding: 12px 16px;
  background: var(--form-input-bg);
  border: 1px solid var(--form-input-border);
  border-radius: var(--form-radius);
  font-family: inherit;
  font-size: 16px; /* 16px prevents iOS zoom on focus */
  line-height: 1.4;
  color: var(--form-text);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-shadow: none;
}

.bms-form-container textarea,
.bms-form-container .ff-el-form-control[rows] {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

/* Select arrow (custom, since we removed appearance) */
.bms-form-container select,
.bms-form-container .gfield select,
.bms-form-container .wpcf7-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%238B867C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Focus state */
.bms-form-container input:focus,
.bms-form-container select:focus,
.bms-form-container textarea:focus,
.bms-form-container .ff-el-form-control:focus {
  outline: none;
  border-color: var(--form-input-focus);
  box-shadow: 0 0 0 3px rgba(184, 105, 74, 0.12);
}

/* Placeholder */
.bms-form-container input::placeholder,
.bms-form-container textarea::placeholder {
  color: var(--form-text-muted);
  opacity: 1;
}

/* Disabled */
.bms-form-container input:disabled,
.bms-form-container select:disabled,
.bms-form-container textarea:disabled {
  background: var(--bms-bg);
  color: var(--form-text-muted);
  cursor: not-allowed;
}

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

.bms-form-container label,
.bms-form-container .ff-el-input--label label,
.bms-form-container .gfield_label,
.bms-form-container .wpforms-field-label {
  display: block;
  margin-bottom: 8px;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--form-text);
  cursor: pointer;
}

/* Required indicator */
.bms-form-container .required,
.bms-form-container .ff_required,
.bms-form-container .gfield_required,
.bms-form-container .wpforms-required-label {
  color: var(--bms-accent);
  margin-left: 2px;
  font-weight: normal;
}

/* =========================================================================
 * Field groups + spacing
 * ========================================================================= */

.bms-form-container .form-group,
.bms-form-container .ff-el-group,
.bms-form-container .gfield,
.bms-form-container .wpforms-field,
.bms-form-container .wpcf7 p {
  margin-bottom: 20px;
}

.bms-form-container .form-group:last-child,
.bms-form-container .ff-el-group:last-child {
  margin-bottom: 0;
}

/* Help text */
.bms-form-container .form-help-text,
.bms-form-container .ff-el-help-message,
.bms-form-container .gfield_description,
.bms-form-container .wpforms-field-description {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--form-text-muted);
}

/* =========================================================================
 * Checkboxes + radios
 * ========================================================================= */

.bms-form-container input[type="checkbox"],
.bms-form-container input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  accent-color: var(--bms-accent);
  cursor: pointer;
}

.bms-form-container .ff-el-input--content label,
.bms-form-container .gchoice label,
.bms-form-container .wpforms-field-checkbox label,
.bms-form-container .wpforms-field-radio label {
  display: inline-flex;
  align-items: center;
  font-weight: normal;
  cursor: pointer;
  margin-bottom: 4px;
}

/* =========================================================================
 * Submit button
 *
 * Fluent Forms ships its own .ff-btn / .ff-btn-submit styles which can win
 * specificity. Body-prefixed selectors here ensure ours load with enough
 * weight to override without resorting to !important everywhere.
 * ========================================================================= */

body .bms-form-container button[type="submit"],
body .bms-form-container input[type="submit"],
body .bms-form-container .ff-btn-submit,
body .bms-form-container button.ff-btn-submit,
body .bms-form-container .wpcf7-submit,
body .bms-form-container .gform_button,
body .bms-form-container .wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--bms-ink);
  color: #ffffff;
  border: 1px solid var(--bms-ink);
  border-radius: var(--form-radius);
  font-family: 'Inter Tight', 'SF Pro Display', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, transform .15s, box-shadow .2s, color .2s, border-color .2s;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

body .bms-form-container button[type="submit"]:hover,
body .bms-form-container input[type="submit"]:hover,
body .bms-form-container .ff-btn-submit:hover,
body .bms-form-container button.ff-btn-submit:hover,
body .bms-form-container .wpcf7-submit:hover,
body .bms-form-container .gform_button:hover,
body .bms-form-container .wpforms-submit:hover {
  background: var(--bms-ink-2);
  border-color: var(--bms-ink-2);
}

body .bms-form-container button[type="submit"]:active,
body .bms-form-container input[type="submit"]:active,
body .bms-form-container .ff-btn-submit:active {
  transform: translateY(1px);
}

body .bms-form-container button[type="submit"]:disabled,
body .bms-form-container input[type="submit"]:disabled,
body .bms-form-container .ff-btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =========================================================================
 * Error states
 * ========================================================================= */

.bms-form-container .has-error input,
.bms-form-container .has-error textarea,
.bms-form-container .has-error select,
.bms-form-container .ff-el-form-control.error,
.bms-form-container .ff-el-is-error .ff-el-form-control,
.bms-form-container .gfield_error input,
.bms-form-container .gfield_error textarea,
.bms-form-container .gfield_error select,
.bms-form-container .wpforms-error,
.bms-form-container .wpcf7-not-valid {
  border-color: var(--form-error);
}

.bms-form-container .error-message,
.bms-form-container .ff-el-input--content .error,
.bms-form-container .ff-el-is-error .error,
.bms-form-container .validation_message,
.bms-form-container .wpforms-error,
.bms-form-container .wpcf7-response-output.wpcf7-validation-errors {
  color: var(--form-error);
  font-size: 13px;
  margin-top: 6px;
  font-weight: 500;
}

/* =========================================================================
 * Success / response messages
 * ========================================================================= */

.bms-form-container .form-success,
.bms-form-container .ff-message-success,
.bms-form-container .gform_confirmation_message,
.bms-form-container .wpforms-confirmation-container,
.bms-form-container .wpcf7-response-output.wpcf7-mail-sent-ok {
  padding: 16px 20px;
  background: var(--form-success-bg);
  border: 1px solid var(--form-success-border);
  border-radius: var(--form-radius);
  color: var(--form-success-text);
  font-size: 14px;
  line-height: 1.5;
  margin: 16px 0;
}

/* =========================================================================
 * Multi-column layouts
 * ========================================================================= */

/* Generic two-column row helper (drop class="form-row" on a div containing
   two fields and they sit side-by-side). */
.bms-form-container .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Fluent Forms — column container. Fluent renders cells with inline
   flex-basis: NN%, but switching the parent to grid neutralises that and
   gives us proper, controllable columns. */
.bms-form-container .ff-t-container.ff-column-container {
  display: grid;
  gap: 12px;
}
.bms-form-container .ff-t-container.ff_columns_total_1 { grid-template-columns: 1fr; }
.bms-form-container .ff-t-container.ff_columns_total_2 { grid-template-columns: 1fr 1fr; }
.bms-form-container .ff-t-container.ff_columns_total_3 { grid-template-columns: 1fr 1fr 1fr; }
.bms-form-container .ff-t-container.ff_columns_total_4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* Reset Fluent's inline flex-basis on cells (cosmetic; grid ignores them anyway) */
.bms-form-container .ff-t-cell {
  min-width: 0; /* allow grid items to shrink properly */
}

@media (max-width: 600px) {
  .bms-form-container .form-row,
  .bms-form-container .ff-t-container.ff_columns_total_2,
  .bms-form-container .ff-t-container.ff_columns_total_3,
  .bms-form-container .ff-t-container.ff_columns_total_4 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* =========================================================================
 * Fluent Forms — specific overrides
 * ========================================================================= */

/* Reset Fluent's default container background which conflicts */
.bms-form-container .frm-fluent-form,
.bms-form-container .fluentform {
  background: transparent;
  padding: 0;
}

/* Fluent Forms wraps labels inside .ff-el-input--label divs */
.bms-form-container .ff-el-input--label {
  margin-bottom: 4px;
}

/* Fluent's section break headings */
.bms-form-container .ff-el-section-break {
  margin: 32px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bms-rule);
}
.bms-form-container .ff-el-section-break h3,
.bms-form-container .ff-el-section-break h4 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--form-text);
}
.bms-form-container .ff-el-section-break p {
  font-size: 14px;
  color: var(--form-text-muted);
  margin: 0;
}

/* =========================================================================
 * Contact Form 7 — specific tweaks
 * ========================================================================= */

.bms-form-container .wpcf7 form {
  margin: 0;
}

.bms-form-container .wpcf7-spinner {
  display: inline-block;
  margin-left: 12px;
}

.bms-form-container .wpcf7-list-item {
  margin: 0 16px 0 0;
  display: inline-flex;
  align-items: center;
}

/* =========================================================================
 * Gravity Forms — specific tweaks
 * ========================================================================= */

.bms-form-container .gform_wrapper {
  margin: 0;
}

.bms-form-container .gform_footer {
  margin-top: 24px;
  padding-top: 0;
}

/* =========================================================================
 * WPForms — specific tweaks
 * ========================================================================= */

.bms-form-container .wpforms-form {
  margin: 0;
}

.bms-form-container .wpforms-submit-container {
  margin-top: 24px;
}

/* =========================================================================
 * Dark context — .bms-form-container--dark
 *
 * Auto-applied by bm/cta-form-banner when the banner background is dark
 * (ink, accent, image). Can be added manually to any .bms-form-container
 * sitting on a dark surface elsewhere on the site.
 *
 * Inverts inputs (transparent backgrounds, light text) and switches the
 * submit button to an accent-colored pill — matches the "finale form"
 * pattern from the matt design language.
 * ========================================================================= */

.bms-form-container--dark {
  --form-input-bg:     rgba(255, 255, 255, 0.04);
  --form-input-border: rgba(255, 255, 255, 0.18);
  --form-text:         #ffffff;
  --form-text-muted:   rgba(255, 255, 255, 0.55);
}

/* Inputs / selects / textareas */
.bms-form-container--dark input[type="text"],
.bms-form-container--dark input[type="email"],
.bms-form-container--dark input[type="tel"],
.bms-form-container--dark input[type="url"],
.bms-form-container--dark input[type="number"],
.bms-form-container--dark input[type="password"],
.bms-form-container--dark input[type="search"],
.bms-form-container--dark input[type="date"],
.bms-form-container--dark input[type="time"],
.bms-form-container--dark input[type="datetime-local"],
.bms-form-container--dark select,
.bms-form-container--dark textarea,
.bms-form-container--dark .ff-el-form-control {
  background: var(--form-input-bg);
  border-color: var(--form-input-border);
  color: var(--form-text);
}

.bms-form-container--dark input::placeholder,
.bms-form-container--dark textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.bms-form-container--dark input:focus,
.bms-form-container--dark textarea:focus,
.bms-form-container--dark select:focus,
.bms-form-container--dark .ff-el-form-control:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--bms-accent);
  box-shadow: 0 0 0 3px rgba(184, 105, 74, 0.20);
}

/* Custom select arrow needs a lighter color on dark */
.bms-form-container--dark select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Labels (when shown) */
.bms-form-container--dark label,
.bms-form-container--dark .ff-el-input--label label,
.bms-form-container--dark .gfield_label,
.bms-form-container--dark .wpforms-field-label {
  color: var(--form-text);
}

/* Help text */
.bms-form-container--dark .form-help-text,
.bms-form-container--dark .ff-el-help-message,
.bms-form-container--dark .gfield_description,
.bms-form-container--dark .wpforms-field-description {
  color: var(--form-text-muted);
}

/* Pill-style accent submit button — matt "finale-cta" pattern.
   body-prefix to beat Fluent's own .ff-btn-submit specificity. */
body .bms-form-container--dark button[type="submit"],
body .bms-form-container--dark input[type="submit"],
body .bms-form-container--dark .ff-btn-submit,
body .bms-form-container--dark button.ff-btn-submit,
body .bms-form-container--dark .wpcf7-submit,
body .bms-form-container--dark .gform_button,
body .bms-form-container--dark .wpforms-submit {
  background: var(--bms-accent);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 13px 28px;
  font-family: 'Inter', 'Inter Tight', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0;
}

body .bms-form-container--dark button[type="submit"]:hover,
body .bms-form-container--dark input[type="submit"]:hover,
body .bms-form-container--dark .ff-btn-submit:hover,
body .bms-form-container--dark button.ff-btn-submit:hover {
  background: #ffffff;
  color: var(--bms-ink);
  transform: translateY(-1px);
}

/* Error states on dark — keep red but slightly brighter for contrast */
.bms-form-container--dark .has-error input,
.bms-form-container--dark .has-error textarea,
.bms-form-container--dark .ff-el-form-control.error,
.bms-form-container--dark .ff-el-is-error .ff-el-form-control,
.bms-form-container--dark .gfield_error input,
.bms-form-container--dark .wpforms-error,
.bms-form-container--dark .wpcf7-not-valid {
  border-color: #FF7A5C;
}

.bms-form-container--dark .error-message,
.bms-form-container--dark .ff-el-input--content .error,
.bms-form-container--dark .ff-el-is-error .error,
.bms-form-container--dark .validation_message,
.bms-form-container--dark .wpforms-error,
.bms-form-container--dark .wpcf7-response-output.wpcf7-validation-errors {
  color: #FF7A5C;
}

/* Tighten field group spacing on dark to match "finale form" density */
.bms-form-container--dark .form-group,
.bms-form-container--dark .ff-el-group,
.bms-form-container--dark .gfield,
.bms-form-container--dark .wpforms-field,
.bms-form-container--dark .wpcf7 p {
  margin-bottom: 12px;
}

/* Submit wrapper — Fluent puts ff-text-center on it; keep but tighten top
   margin so the button sits closer to the fields. */
.bms-form-container--dark .ff_submit_btn_wrapper {
  margin-top: 16px;
}

/* Notes / paragraphs the user typed alongside the shortcode in the WYSIWYG.
   Style them as a centered caption, matching the matt finale-form-note. */
.bms-form-container--dark p:not([class]) {
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  margin: 12px auto 0;
  max-width: 54ch;
  color: var(--form-text-muted);
  text-wrap: pretty;
}