/* ==========================================================================
   Contact Form 7 → BiSSMiXi integration overrides
   CF7 wraps every control in an inline <span class="wpcf7-form-control-wrap">
   and appends a response/spinner. These rules make that generated markup
   behave like the original hand-written forms so the source stylesheets
   (brands.css / footer.css) apply unchanged at every breakpoint.
   ========================================================================== */

/* ---------- Brands / "Submit Your Product" form ---------- */

/* Field control wrappers must be full-width blocks so .brands__input width:100% works. */
.brands__form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* CF7 renders the submit as a <button type="submit">; keep the pill look. */
.brands__form .brands__submit {
  border: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Validation tips + response notice: place them without breaking the grid. */
.brands__form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
  color: #d33;
}
.brands__form .wpcf7-response-output {
  margin: 8px 0 0;
  padding: 12px 18px;
  border-radius: 16px;
  font-size: 14px;
}

/* ---------- Footer newsletter form ---------- */

/* The pill is the wrapper div (.site-footer__newsletter-input). Flatten CF7's
   entire wrapper chain (.wpcf7 > form > p > span.wpcf7-form-control-wrap) with
   display:contents so the email <input> and submit <button> become DIRECT flex
   items of the pill — exactly like the original markup. This lets the original
   footer.css rules style them at every breakpoint, including the ≤510px variant
   that gives the input its own border + radius. */
.site-footer__newsletter-input {
  position: relative;
}
.site-footer__newsletter-input .wpcf7,
.site-footer__newsletter-input .wpcf7-form,
.site-footer__newsletter-input .site-footer__newsletter-field,
.site-footer__newsletter-input .wpcf7-form-control-wrap {
  display: contents;
}
/* Keep CF7's a11y/hidden helpers in the DOM (they still submit) but out of the row. */
.site-footer__newsletter-input .screen-reader-response,
.site-footer__newsletter-input fieldset.hidden-fields-container {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  margin: -1px;
}
.site-footer__newsletter-submit {
  border: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Let the email field shrink inside the pill so the footer card never exceeds
   the viewport on small screens (CF7 renders the input with size="40", which
   otherwise imposes a wide min-content). Border/background/padding are left to
   footer.css so the mobile bordered-input variant (≤510px) still applies. */
.site-footer__newsletter-input input[type="email"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Keep validation / response messages out of the flex row — drop them below. */
.site-footer__newsletter-input .wpcf7-response-output,
.site-footer__newsletter-input .wpcf7-not-valid-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* ---------- Platform: custom dropdown drives a hidden native <select> ---------- */
/* The native CF7 <select name="platform"> is kept for submission but visually
   replaced by the original .brands__dropdown widget. Hide it accessibly. */
.brands__field .wpcf7-form-control-wrap[data-name="platform"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  margin: -1px;
  padding: 0;
  border: 0;
}

/* ---------- Spinner shouldn't reserve inline space (only shows on submit) ---------- */
.brands__form .wpcf7-spinner,
.site-footer__newsletter-input .wpcf7-spinner {
  display: none;
}