/* ---------------------------------------------------------------------------
 * Contact Form 7 markup adapter
 *
 * The theme's own CSS (sales-studio-common.css / sales-studio-salon-common.css)
 * already styles `form`, `.field`, `.row2`, `.agree`, `.err`, `.ok` etc. via
 * plain descendant selectors, so it keeps applying unchanged even though CF7
 * wraps each field in its own `<span class="wpcf7-form-control-wrap">`. This
 * file only covers the handful of things CF7 renders that the original
 * hand-written form markup didn't have to account for.
 * ------------------------------------------------------------------------- */

/* CF7 wraps every field in an inline <span> — force it to behave like the
   block-level wrapper the original markup had, so width:100% inputs/selects
   /textareas still size correctly. */
.wpcf7-form-control-wrap {
  display: block;
}

/* CF7's per-field inline error, shown right after an invalid field — restyle
   to match the theme's original .err text exactly. */
.wpcf7-not-valid-tip {
  display: block;
  color: var(--red);
  font-size: 12.5px;
  margin-top: 6px;
}

/* CF7 flags an invalid field itself (input.wpcf7-not-valid), rather than the
   .field wrapper the original markup toggled — same red-border treatment. */
body.page-home .field input.wpcf7-not-valid,
body.page-home .field textarea.wpcf7-not-valid,
body.page-salon .field input.wpcf7-not-valid,
body.page-salon .field textarea.wpcf7-not-valid,
body.page-salon .field select.wpcf7-not-valid {
  border-color: var(--red);
}

/* The theme shows its own #ok success panel (see cf7-success.js) instead of
   CF7's default response banner, so suppress the latter to avoid a duplicate
   message. Field-level tips above are unaffected. */
.wpcf7-response-output {
  display: none !important;
}

/* CF7 adds this class to the <form> while an AJAX submission is in flight. */
.wpcf7-form.submitting .btn-red {
  opacity: 0.6;
  pointer-events: none;
}

/* CF7's built-in "acceptance" checkbox field markup differs slightly from the
   original hand-written checkbox+label pair — keep it aligned with .agree. */
.wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.wpcf7-acceptance .wpcf7-list-item-label {
  cursor: pointer;
}