/* ==========================================================================
   parts/forms.css — Fluent Forms as live renders them (markup: parts/fluent-form.php).
   Ported from the rules that actually match on live (docs/scout/used-css.css; every rule hitting #join with its
   cascade order: docs/scout/form-live.html §3; resolved values: SECTIONS-B §6.3):
     1. Fluent Forms core      fluent-forms-public.css + fluentform-public-default.css (.fluentform / .ff-default)
     2. intl-tel-input         intlTelInput.min.css, reduced to the static selected-country button (DI-D20)
     3. ACSS light form skin   automatic.css `.form--light …` (the wrapper class the page gives the shortcode),
                               with the site's Fluent snippet ("custom-style-v2") folded in: white option text,
                               checkbox nudged 4px down, option rows top-aligned
     4. Inert submit           the "Preview only" note (ARCHITECTURE "Link paths, inert form and part names" §3)
   Rules that lose the cascade on live everywhere are left out (e.g. Fluent's `:focus{outline:0}`, which Bricks'
   focus-visible ring beats — base.css draws that ring here). Mobile-first; rows go side by side from 768px
   (live: Fluent's own min-width 768px query).
   ========================================================================== */

/* ---- Component constants --------------------------------------------------------------------------------
   The plugins' own variables (Fluent's --fluentform-*, intl-tel-input's --iti-*) are scoped to the form; their
   colours come from the "third-party skins" tokens. ACSS's form variables (--f-*) are :root tokens in
   tokens.css, as on live. */
.fluentform {
  /* fluentform-public-default.css */
  --fluentform-primary: var(--wfx-ff-primary);
  --fluentform-secondary: var(--wfx-ff-secondary);
  --fluentform-danger: var(--wfx-ff-error);
  --fluentform-border-color: var(--wfx-ff-border);
  --fluentform-border-radius: 7px;
  --fluentform-placeholder: var(--wfx-ff-placeholder);
  /* intlTelInput.min.css */
  --iti-hover-color: var(--wfx-iti-hover);
  --iti-spacer-horizontal: 8px;
  --iti-flag-height: 12px;
  --iti-flag-width: 16px;
  --iti-border-width: 1px;
  --iti-arrow-height: 4px;
  --iti-arrow-width: 6px;
  --iti-triangle-border: calc(var(--iti-arrow-width) / 2);
  --iti-arrow-padding: 6px;
  --iti-arrow-color: var(--wfx-iti-arrow);
  --iti-flag-shadow: var(--wfx-iti-flag-shadow);
  --iti-input-padding: 6px;
  /* 6 + 6 + 16 + 8 + 6 + 6 = 48px: the start padding intl-tel-input's JS sets inline on live */
  --iti-selected-country-arrow-padding: calc(var(--iti-arrow-padding) + var(--iti-arrow-padding) + var(--iti-flag-width) + var(--iti-spacer-horizontal) + var(--iti-arrow-width) + var(--iti-input-padding));

  font-family: inherit;                                   /* .ff-default */
}

/* =========================================================================================================
   1. Fluent Forms core
   ========================================================================================================= */
.fluentform .ff-el-group {
  margin-bottom: 20px;                                    /* plugin default; the light skin uses 1.5em on fields */
}
.fluentform .ff-el-group::before,
.fluentform .ff-el-group::after {
  content: " ";
  display: table;
}
.fluentform .ff-el-group::after {
  clear: both;
}

.fluentform .ff-el-input--label {
  position: relative;
  display: inline-block;
  margin-bottom: 5px;
}
.fluentform .ff-el-input--label label {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 500;
  line-height: inherit;
}
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
  content: " *";
  margin-left: 3px;
  color: var(--fluentform-danger);
}
/* label_placement "hide_label": the label stays in the DOM (for/aria-labelledby) but is not rendered */
.fluentform div.ff-el-form-hide_label > .ff-el-input--label {
  display: none;
  visibility: hidden;
}

.fluentform .ff-el-form-control {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
  padding: 11px 15px;
  background-clip: padding-box;
  background-image: none;
  border: 1px solid var(--fluentform-border-color);
  border-radius: var(--fluentform-border-radius);
  color: var(--fluentform-secondary);
  /* live inputs use the system stack, not Inter (.ff-default .ff-el-form-control) */
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.fluentform .ff-el-form-control::placeholder {
  color: var(--fluentform-placeholder);
  opacity: 1;
}
.fluentform .ff-el-form-control:focus {
  background-color: var(--white);
  border-color: var(--fluentform-primary);
  color: var(--fluentform-secondary);
}
.fluentform textarea {
  max-width: 100%;
  min-height: 90px;
  /* Bricks base (`textarea{line-height:inherit !important}`): the rows × the inherited body line height
     (27.25px) set the textarea's height (183.5 / 181.1 / 179.6px), over every skin's line-height:1 */
  line-height: inherit !important;
}

.fluentform input[type="checkbox"],
.fluentform input[type="radio"] {
  display: inline-block;
  margin: 0;
}
.fluentform .ff-el-form-check {
  margin-bottom: 5px;
}
.fluentform .ff-el-form-check label.ff-el-form-check-label {
  align-items: flex-start;                                /* site snippet */
  margin-bottom: 7px;
  cursor: pointer;
}
.fluentform .ff-el-form-check:last-child label.ff-el-form-check-label {
  margin-bottom: 0;
}
.fluentform .ff-el-form-check-label .ff-el-form-check-input {
  position: relative;
  top: 4px;                                               /* site snippet (plugin: -2px) */
  margin-right: 4px;                                      /* site snippet */
  vertical-align: middle;
}
.fluentform .ff-el-form-check-label span {
  color: var(--white);                                    /* site snippet: option text is white everywhere */
}

.fluentform .ff-text-left { text-align: left; }
.fluentform .ff-text-center { text-align: center; }
.fluentform .ff-text-right { text-align: right; }

.ff-errors-in-stack {
  display: none;
  margin-top: 15px;
}

/* Multi-column rows (name fields, column containers): stacked on phones, side by side from 768px. */
@media (min-width: 768px) {
  .frm-fluent-form .ff-t-container {
    display: flex;
    gap: 15px;
    width: 100%;
  }
  .frm-fluent-form .ff-t-cell {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .frm-fluent-form .ff-name-field-wrapper .ff-t-cell {
    justify-content: flex-end;
  }
  .frm-fluent-form .ff-t-cell:first-of-type { padding-left: 0; }
  .frm-fluent-form .ff-t-cell:last-of-type { flex-grow: 1; padding-right: 0; }
}

/* Buttons: fluentform-public-default.css .ff_btn_style is not ported. The submit (.ff-btn-submit) is a v2 primary md
   button, styled with .btn in parts/buttons.css (docs/design/BUTTONS.md §3.2; Fluent's opacity .8 hover retired). */

/* =========================================================================================================
   2. intl-tel-input: the static selected-country button (AU), no dropdown (DI-D20)
   ========================================================================================================= */
.fluentform .iti {
  position: relative;
  display: inline-block;
  width: 100%;
}
.iti__a11y-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
.iti input.iti__tel-input {
  position: relative;
  z-index: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.iti--allow-dropdown input.iti__tel-input[type="tel"] {
  margin-left: 0;
  padding-right: var(--iti-input-padding);
  padding-left: var(--iti-selected-country-arrow-padding);
}
.iti__country-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;                                                /* .iti--allow-dropdown (live also sets it inline) */
  padding: var(--iti-border-width);
}
.iti__selected-country {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.iti__selected-country-primary {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
}
.iti--allow-dropdown .iti__selected-country-primary:hover {
  background-color: var(--iti-hover-color);
}
.iti__flag {
  width: var(--iti-flag-width);
  height: var(--iti-flag-height);
  border-radius: 1px;
  box-shadow: 0 0 1px 0 var(--iti-flag-shadow);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: var(--iti-flag-width) var(--iti-flag-height);
}
/* Live draws the flag from the 244-flag sprite at -192px; the replica ships the AU cell only (ASSETS.md). */
.iti__au {
  background-image: url("../../media/vendor/intl-tel-input/flag-au.webp");
  background-image: image-set(url("../../media/vendor/intl-tel-input/flag-au.webp") 1x, url("../../media/vendor/intl-tel-input/flag-au@2x.webp") 2x);
}
.iti__arrow {
  width: 0;
  height: 0;
  margin-left: var(--iti-arrow-padding);
  border-top: var(--iti-arrow-height) solid var(--iti-arrow-color);
  border-right: var(--iti-triangle-border) solid transparent;
  border-left: var(--iti-triangle-border) solid transparent;
}

/* =========================================================================================================
   3. ACSS light form skin (.form--light on the shortcode wrapper)
   ========================================================================================================= */
.form--light .frm-fluent-form .ff-el-group {
  padding-inline: 0;
}
.form--light .frm-fluent-form .ff-el-group:not(.ff_submit_btn_wrapper) {
  margin-block-end: var(--f-field-margin-bottom);         /* 24px (1.5em of 16px); the submit row keeps 20px */
}
@media (min-width: 768px) {
  .form--light .frm-fluent-form .ff-t-container {
    gap: var(--f-grid-gutter);                            /* 20px: two 263.2px cells in 546.4px */
  }
}

.form--light .frm-fluent-form label:not(.ff-el-form-check-label) {
  margin-block-end: var(--f-label-margin-bottom);
  padding: 0;
  color: var(--neutral-dark);
  font-size: var(--f-label-size);
  font-weight: 400;
  line-height: 1;
  text-transform: none;
}
/* Form 3's visible labels ("Selection *", horse single #enquiry) are white: live `#brxe-nxmpqb label{color:var(--white)}`,
   the Bricks id of form 3's shortcode wrapper. Keyed to the .horse-enquiry root that parts/horse/enquiry.php gives
   parts/join-cta; (0,4,1) beats the light skin's neutral-dark above, and #join's hidden labels keep it (GAP-FILL #5,
   docs/scout/r2/patches/forms-required-asterisk.css rule A). */
.horse-enquiry .form--light .frm-fluent-form label:not(.ff-el-form-check-label) {
  color: var(--white);
}
/* The required marker (Fluent's `::after " *"`, section 1) takes its label's colour, not Fluent's danger red.
   Live (ACSS light skin, verbatim selector): `color: var(--f-light-required-color, var(--action)) !important`, and
   neither variable is defined on live, so the value computes to `unset` = inherited: white in #enquiry. On #join's
   hidden labels it gives #404040, as live (0 px: display:none). GAP-FILL #5 rule B. */
.form--light .frm-fluent-form label:not(.ff-el-form-check-label)::after {
  color: inherit !important;
}

/* Inputs: 50px tall, white, 1px #D9D9D9, 5px radius, #404040 text in the system stack at --f-input-size */
.form--light .frm-fluent-form input:not([type="submit"]),
.form--light .frm-fluent-form select,
.form--light .frm-fluent-form textarea.ff-el-form-control {
  padding: var(--f-input-padding-y) var(--f-input-padding-x);
  background-color: var(--white);
  border: 0.1rem solid var(--neutral-light);
  border-radius: var(--btn-radius);
  color: var(--neutral-dark);
  font-size: var(--f-input-size);
  font-weight: 400;
  line-height: 1;
  transition: var(--transition-duration) var(--transition-timing) var(--transition-delay);
}
.form--light .frm-fluent-form input:is([type="date"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]),
.form--light .frm-fluent-form select:not([multiple]):not([size]) {
  height: var(--f-input-height);
}
.form--light .frm-fluent-form input:not([type="submit"])::placeholder,
.form--light .frm-fluent-form textarea.ff-el-form-control::placeholder {
  color: var(--neutral-dark);
  opacity: .5;
  transition: var(--transition-duration) var(--transition-timing) var(--transition-delay);
}
/* Focus keeps the border and colours (the ring is base.css :focus-visible, 2px #1263FF offset 2px). */
.form--light .frm-fluent-form .ff-el-form-control:focus {
  background-color: var(--white);
  border-color: var(--neutral-light);
  color: var(--neutral-dark);
}
/* the phone input keeps intl-tel-input's paddings (live: 48px inline start padding, 6px end) */
.form--light .frm-fluent-form .iti--allow-dropdown input.iti__tel-input {
  padding-right: var(--iti-input-padding);
  padding-left: var(--iti-selected-country-arrow-padding);
}
.form--light .frm-fluent-form .ff-el-is-error .ff-el-form-control {
  border-color: var(--f-danger);
}

/* Option rows (checkbox / radio): 13px native box in --primary, 6.4px gap, Inter text at --f-option-label-size */
.form--light .frm-fluent-form .ff-el-form-check.ff-el-form-check- {
  display: flex;
  margin: 0;
}
.form--light .frm-fluent-form .ff-el-form-check.ff-el-form-check- label {
  display: flex;
  gap: 0.4em;
  margin: 0;
}
.form--light .frm-fluent-form .ff-el-form-check-label span {
  font-family: inherit;
  font-size: var(--f-option-label-size);
  font-weight: 400;
}
.form--light .frm-fluent-form input[type="checkbox"],
.form--light .frm-fluent-form input[type="radio"] {
  accent-color: var(--primary);
}

/* Submit: the v2 primary md button (parts/buttons.css `.frm-fluent-form .ff-btn-submit`). #join: full width in its
   wrapper (join-cta.css .join-cta--submit-full): 546.4 × 44 / 347.6 × 44, as live. #enquiry (form 3): its own
   140 × 44 (--btn-min-width), centred by .ff-text-center, as live. */

/* =========================================================================================================
   4. Inert submit: "Preview only" note (replica-only, [data-wfx-replica-only]). Absolutely positioned above the
      button, so it takes no layout space (S7 height = live); shown on hover of the submit wrapper, or for ~3s
      after a tap (.is-preview-note-open, assets/js/main.js). The disabled button itself keeps live's look.
   ========================================================================================================= */
.frm-fluent-form .ff_submit_btn_wrapper {
  position: relative;                                     /* measured 0px change on live */
}
.wfx-preview-note {
  position: absolute;
  bottom: calc(100% + 0.8rem);
  left: 50%;
  z-index: 1;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  background: var(--secondary);
  color: var(--white);
  font: 500 1.2rem/1.4 var(--font-body);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity .2s, visibility .2s;
}
.frm-fluent-form .ff_submit_btn_wrapper:hover .wfx-preview-note,
.frm-fluent-form .ff_submit_btn_wrapper.is-preview-note-open .wfx-preview-note {
  opacity: 1;
  visibility: visible;
}
html.nomotion .wfx-preview-note {
  transition: none;
}

/* =========================================================================================================
   5. Live form states (theme forms: parts/form.php + assets/js/parts/form.js; R6-PLAN §6). None of this shows
      on a form at rest, so the measured layout above is unchanged. Section 4's note is no longer printed (the
      submit is live); its wrapper rule stays, as the busy bar below hangs off the button.
   ========================================================================================================= */

/* Field errors, Fluent's markup: .ff-el-group.ff-el-is-error > … > div.error.text-danger[role=alert].
   Fluent's is 12px red text; on the Join gradient that is unreadable, so the message sits on a white chip. */
.fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--fluentform-danger);
}
.fluentform .error.text-danger {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--btn-radius);
  background: var(--white);
  color: var(--f-danger);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}
.form--light .frm-fluent-form .ff-el-is-error .ff-el-form-control {
  border-color: var(--f-danger);
  box-shadow: 0 0 0 1px var(--f-danger);
}
/* The form-level message area (#fluentform_<id>_errors): form.js shows it when it holds a message. */
.ff-errors-in-stack .error.text-danger {
  display: block;
  margin-top: 0;
  padding: 1rem 1.4rem;
  font-size: 1.5rem;
}

/* The confirmation message that takes the form's place (forms that do not redirect). */
.fluentform .ff-message-success {
  padding: 2rem;
  border-radius: var(--btn-radius);
  background: var(--white);
  color: var(--neutral-dark);
  font-size: var(--f-input-size);
  line-height: 1.5;
  text-align: center;
}

/* Sending: no second click, a thin progress bar along the button's foot (Fluent's .ff-working). */
.fluentform .ff_submitting {
  pointer-events: none;
}
.fluentform .ff-btn.ff-working {
  cursor: progress;
}
.fluentform .ff-btn.ff-working::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, .55);
  transform-origin: 0 50%;
  animation: wfx-form-working 1.2s ease-in-out infinite;
}
@keyframes wfx-form-working {
  0% { transform: scaleX(0); }
  60% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
html.nomotion .fluentform .ff-btn.ff-working::after {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .fluentform .ff-btn.ff-working::after { animation: none; }
}

/* The honeypot (also hidden inline, in case this file is late): off-screen, never display:none. */
.fluentform .wfx-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* New field types (the Form block): a dropdown takes the input skin above; a labelled set of options stacks. */
.form--light .frm-fluent-form select.ff-el-form-control {
  width: 100%;
  line-height: 1.2;
}
.fluentform [role="radiogroup"] .ff-el-form-check,
.fluentform [role="group"] .ff-el-form-check {
  margin-bottom: 0.6rem;
}