/*
 * Forminator overrides for the NZ Wool Collective sign-up form.
 *
 * Loaded on a late wp_enqueue_scripts priority AND declared dependent on
 * Forminator's own handles, so it always wins the cascade regardless of the
 * order Forminator enqueues in. See nzwc_form_styles() in functions.php.
 */
/* ---------------------------------------------------------------
   Forminator overrides — form ID is set per-page via ACF.
   Scoped to .form-wrap so nothing here leaks into wp-admin or any
   other form added later. Selectors follow Forminator 1.57 markup.
   --------------------------------------------------------------- */

/* Forminator hides the form inline and reveals it with JS. On a holding
   page whose only job is capturing sign-ups, a JS failure must not mean an
   invisible form — so force it visible. */
.form-wrap form.forminator-custom-form[style*="display: none"]{display:block!important}

.form-wrap .forminator-custom-form{font-family:'General Sans',system-ui,sans-serif}

/* Rows: two-up, matching .row2 in the design */
.form-wrap .forminator-row{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.form-wrap .forminator-col-12{grid-column:1 / -1}

/* Field shell: the underline treatment */
/* Bottom padding is 3px, not 7px, deliberately: the input is a 24px line box
   around 16px text, so there is already ~4px of half-leading below the glyphs.
   3px + 4px puts the visible gap between the typed text and the rule at the
   7px the design calls for. Changing the input's font-size or line-height
   below will throw this out — re-measure if you do. */
.form-wrap .forminator-col > .forminator-field{
  padding:22px 0 3px;
  border-bottom:1px solid var(--rule);
}

/* Labels: Geist Mono, uppercase, tracked */
.form-wrap .forminator-label{
  display:block;
  font-family:'Geist Mono',ui-monospace,monospace;
  text-transform:uppercase;letter-spacing:.06em;
  font-size:11px;font-weight:600;color:var(--ink);
  margin:0 0 10px;
}
.form-wrap .forminator-required{color:var(--ink);opacity:.55}

/* Inputs: no chrome, the underline does the work */
.form-wrap .forminator-input{
  width:100%;border:0;background:transparent;
  font-family:'General Sans',system-ui,sans-serif;font-size:16px;
  color:#fff;outline:none;height:24px;line-height:24px;
  border-radius:0;box-shadow:none;padding:0;
}
.form-wrap .forminator-input::placeholder{color:#fff;opacity:.6}
.form-wrap .forminator-input:focus,
.form-wrap .forminator-input:focus-visible{outline:none}
/* Focus is shown by brightening the field's own underline rather than a ring.
   Keeps a visible focus state for keyboard users without the gold outline. */
.form-wrap .forminator-col > .forminator-field:has(.forminator-input:focus){
  border-bottom-color:#fff;
}

/* Browser autofill would otherwise paint its own pale background and dark
   text over the top — Chrome does this for name and email fields, which is
   most of this form. Keep the field transparent and the text white. */
.form-wrap .forminator-input:-webkit-autofill,
.form-wrap .forminator-input:-webkit-autofill:hover,
.form-wrap .forminator-input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  -webkit-box-shadow:0 0 0 1000px transparent inset;
  transition:background-color 9999s ease-out 0s;
}

/* Checkbox and radio groups both render as the design's chip pills.
 *
 * "Connection to wool industry" is a RADIO group (client confirmed one
 * selection only); "Interested in" is a CHECKBOX group. They look identical
 * by design, so the rules below cover both markup shapes. Forminator's own
 * box/bullet glyphs are hidden — the pill itself carries the selected state.
 */
.form-wrap .forminator-field-checkbox > .forminator-field,
.form-wrap .forminator-field-radio > .forminator-field{
  display:flex;flex-wrap:wrap;gap:10px;
  border-bottom:1px solid var(--rule);
  /* Chips need noticeably more breathing room above the rule than the text
     inputs do — the pills have their own border, so a tight gap reads as two
     lines stacked. The v7 mockup allowed ~22px here. */
  padding-bottom:22px;
}
.form-wrap .forminator-field-checkbox .forminator-label,
.form-wrap .forminator-field-radio .forminator-label{flex:0 0 100%;margin-bottom:0}

.form-wrap .forminator-checkbox,
.form-wrap .forminator-radio{
  display:inline-flex;align-items:center;margin:0;cursor:pointer;
  border:1px solid var(--ink);border-radius:999px;
  padding:8px 20px;
  font-family:'General Sans',system-ui,sans-serif;
  font-size:14px;font-weight:500;line-height:1.2;color:var(--ink);
  background:transparent;
  transition:background-color .15s ease,border-color .15s ease;
}
.form-wrap .forminator-checkbox-box,
.form-wrap .forminator-radio-bullet{display:none}
.form-wrap .forminator-checkbox input[type="checkbox"],
.form-wrap .forminator-radio input[type="radio"]{
  position:absolute;width:1px;height:1px;opacity:0;margin:0;
}
.form-wrap .forminator-checkbox-label,
.form-wrap .forminator-radio-label{margin:0;padding:0;font:inherit;color:inherit}

/* Selected state — white pill, per the design */
.form-wrap .forminator-checkbox:hover,
.form-wrap .forminator-radio:hover{background:rgba(255,255,255,.35);border-color:rgba(255,255,255,.6)}
.form-wrap .forminator-checkbox:has(input:checked),
.form-wrap .forminator-radio:has(input:checked){background:#fff;border-color:#fff}
.form-wrap .forminator-checkbox:has(input:focus-visible),
.form-wrap .forminator-radio:has(input:focus-visible){outline:2px solid #fff;outline-offset:3px}

/* Submit row */
.form-wrap .forminator-row-last{display:block;margin-top:40px}
.form-wrap .forminator-row-last .forminator-col > .forminator-field{padding:0;border-bottom:0}
.form-wrap .forminator-button-submit{
  display:inline-block;background:var(--gold);border:0;border-radius:999px;
  padding:12px 44px;cursor:pointer;
  font-family:'Geist Mono',ui-monospace,monospace;
  text-transform:uppercase;letter-spacing:.06em;
  font-size:11px;font-weight:700;color:var(--ink);
}
.form-wrap .forminator-button-submit:hover{background:#e5a222}

/* Validation + response messaging
 *
 * The show/hide behaviour below normally ships in Forminator's per-design
 * stylesheet, which this form deliberately does not load (form-style is set to
 * "none" so the theme owns 100% of the appearance). Without these rules the
 * success and error messages stay display:none and the form looks like it
 * silently did nothing. Keep them in sync if Forminator's markup changes.
 */
.form-wrap .forminator-response-message{
  display:none;
  padding:14px 18px;border-radius:6px;font-size:15px;line-height:1.5;margin-bottom:18px;
}
.form-wrap .forminator-response-message[aria-hidden="true"]{display:none}
.form-wrap .forminator-response-message.forminator-show{display:block}
.form-wrap .forminator-response-message.forminator-error{background:#fdecec;color:#5C0000}
.form-wrap .forminator-response-message.forminator-success{background:#fff;color:var(--ink)}

.form-wrap .forminator-error-message{
  display:none;
  font-size:12.5px;font-weight:600;color:#5C0000;margin-top:8px;
}
.form-wrap .forminator-has_error .forminator-error-message{display:block}
.form-wrap .forminator-has_error .forminator-input{color:#fff}
.form-wrap .forminator-col > .forminator-field.forminator-has_error,
.form-wrap .forminator-has_error > .forminator-field{border-bottom-color:#5C0000}

/* Admin-only notice when no form is attached */
.nzwc-notice{
  padding:18px 20px;background:rgba(255,255,255,.55);
  border:1px dashed var(--ink);border-radius:8px;font-size:15px;line-height:1.5;
}

@media (max-width:720px){
  .form-wrap .forminator-row{grid-template-columns:1fr;gap:0}
  .form-wrap .forminator-button-submit{width:100%;padding:18px 44px;font-size:13px;text-align:center}
}