/* Fluent Forms, wearing the brand.
   Only tokens here — no colours, no font names — so a form follows whatever
   ground it is sitting on, the same as everything else. */

.fluentform, .frm-fluent-form{max-width:44rem}
.frm-fluent-form .ff-el-group{margin-bottom:1.35rem}
.frm-fluent-form .ff-el-input--label label{
  font-family:var(--u-font-body);font-size:.9375rem;font-weight:600;
  color:var(--u-text);margin-bottom:.4rem;display:inline-block}
.frm-fluent-form .ff-el-input--label.ff-el-is-required label:after{color:var(--u-text-2);font-weight:500}
.frm-fluent-form .ff-el-help-message{
  font-size:.875rem;color:var(--u-text-2);margin-top:.35rem;line-height:1.5}

.frm-fluent-form input[type=text],.frm-fluent-form input[type=email],.frm-fluent-form input[type=url],
.frm-fluent-form input[type=tel],.frm-fluent-form input[type=number],.frm-fluent-form textarea,
.frm-fluent-form select{
  font:inherit;font-size:1rem;padding:.75rem .9rem;border:1px solid var(--u-line);
  border-radius:8px;background:var(--u-surface);color:var(--u-text);width:100%;
  box-shadow:none;height:auto;line-height:1.5}
.frm-fluent-form textarea{min-height:8rem;resize:vertical}
.frm-fluent-form input:focus,.frm-fluent-form textarea:focus,.frm-fluent-form select:focus{
  outline:2px solid var(--u-focus);outline-offset:2px;border-color:var(--u-text-2)}

/* Radios and checkboxes are choices, not a list: give them a card each, which
   is the one place on a form where a bigger target is worth the space. */
.frm-fluent-form .ff-el-form-check{
  border:1px solid var(--u-line);border-radius:16px;background:var(--u-surface);
  padding:.9rem 1.1rem;margin-bottom:.6rem;transition:border-color .2s ease}
.frm-fluent-form .ff-el-form-check:hover{border-color:var(--u-text-2)}
.frm-fluent-form .ff-el-form-check label{font-weight:500;cursor:pointer}
.frm-fluent-form .ff-el-form-check input{accent-color:var(--u-action);margin-right:.6rem}

.frm-fluent-form .ff-btn-submit,.frm-fluent-form .ff_btn_style{
  font:inherit;font-weight:600;font-size:1rem;border:0;border-radius:8px;
  padding:.85rem 1.4rem;cursor:pointer;
  background:var(--u-commit);color:var(--u-on-commit);box-shadow:none}
.frm-fluent-form .ff-btn-submit:hover,.frm-fluent-form .ff_btn_style:hover{filter:brightness(1.12)}
/* Next and Back on a stepped form are both .ff-btn-secondary, which Fluent
   paints grey. Next is a commit and should look like one; Back stays quiet.
   Fluent's own rule is `.ff-default .ff-btn-secondary:not(.ff_btn_no_style)`
   and its sheet prints after ours, because the plugin enqueues while the
   shortcode renders. So these match its shape to outrank it rather than
   reaching for !important. */
.ff-default .frm-fluent-form .ff-btn-next:not(.ff_btn_no_style){
  background:var(--u-commit);color:var(--u-on-commit);border-color:transparent;
  font-weight:600;padding:.85rem 1.4rem;border-radius:8px}
.ff-default .frm-fluent-form .ff-btn-next:not(.ff_btn_no_style):hover{
  background:var(--u-commit);filter:brightness(1.12);color:var(--u-on-commit)}
.ff-default .frm-fluent-form .ff-btn-prev:not(.ff_btn_no_style){
  background:transparent;color:var(--u-text);border-color:var(--u-line)}
.ff-default .frm-fluent-form .ff-btn-prev:not(.ff_btn_no_style):hover{
  background:transparent;color:var(--u-text);border-color:var(--u-text-2)}
.frm-fluent-form .ff-step-t-container{display:flex;gap:.75rem;align-items:center;margin-top:1.5rem}
.frm-fluent-form .ff-step-t-container .ff-el-group,
.frm-fluent-form .ff-step-t-container .step-nav{margin:0}

/* the step bar */
.frm-fluent-form .ff-el-progress{background:var(--u-line);border-radius:999px;height:6px;overflow:hidden}
.frm-fluent-form .ff-el-progress-bar{background:var(--u-action);color:transparent;height:6px}
.frm-fluent-form .ff-el-progress-status{
  font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--u-text-2);margin-bottom:.5rem}
.frm-fluent-form .step-nav{display:flex;gap:.75rem;margin-top:1.5rem}

.frm-fluent-form .error,.frm-fluent-form .ff-el-is-error input,.frm-fluent-form .text-danger{
  color:var(--u-text);border-color:var(--u-ochre)}
.frm-fluent-form .ff-el-form-control.ff-el-is-error{border-color:var(--u-ochre)}

.ff-message-success{
  border:1px solid var(--u-line);border-radius:16px;padding:1.75rem;background:var(--u-surface)}
.ff-message-success h2{margin-bottom:.5rem}

/* Fluent's own sheet is enqueued when the shortcode renders, which is after
   ours. These four carry the brand's colour, so they say so out loud. */
.frm-fluent-form .ff-btn-submit,.frm-fluent-form .ff_btn_style{
  background:var(--u-commit)!important;color:var(--u-on-commit)!important;
  border-radius:8px!important;font-weight:600!important}
.frm-fluent-form .ff-el-progress{background:var(--u-line)!important}
.frm-fluent-form .ff-el-progress-bar{background:var(--u-action)!important;color:transparent!important}
.frm-fluent-form .ff-el-form-check{background:var(--u-surface)!important}