/* ==========================================================================
   Contact Form 7 — styled to match the Nappy Bag Initiative design
   --------------------------------------------------------------------------
   The form markup (see README) reuses the design's .form / .form-row / .field
   classes, so inputs, labels and layout come from main.css. This file covers
   what Contact Form 7 adds on top: wrappers, validation, response messages,
   loading state, required markers, checkboxes/radios and the submit button.
   ========================================================================== */

.wpcf7 { width: 100%; }
.wpcf7 form.form { margin: 0; }

/* CF7 wraps every control in a span; make it fill the field */
.wpcf7-form-control-wrap { display: block; position: relative; }
.wpcf7 .field .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-list-item) { max-width: 100%; }

/* CF7's hidden-fields fieldset and screen-reader region must never take space */
.wpcf7 .hidden-fields-container,
.wpcf7 fieldset.hidden-fields-container { display: none; border: 0; margin: 0; padding: 0; }
/* CF7's accessibility announcer sits before the <form>; keep it readable by
   screen readers but out of the layout (same technique as CF7's own CSS). */
.wpcf7 .screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

/* ---- Text-like controls (keep the design's look; beat CF7/Astra defaults) ---- */
.wpcf7 .field input.wpcf7-form-control,
.wpcf7 .field select.wpcf7-form-control,
.wpcf7 .field textarea.wpcf7-form-control {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--color-brown);
  background: var(--color-cream);
  border: 1.5px solid var(--color-line);
  border-radius: 12px;
  padding: 13px 16px;
  box-shadow: none;
  transition: border-color 0.2s ease;
}
.wpcf7 .field textarea.wpcf7-form-control { resize: vertical; min-height: 120px; height: auto; }
.wpcf7 .field input.wpcf7-form-control:focus,
.wpcf7 .field select.wpcf7-form-control:focus,
.wpcf7 .field textarea.wpcf7-form-control:focus { outline: none; border-color: var(--color-coral); }

/* ---- Required fields: a quiet asterisk after the label ---- */
.wpcf7 .field:has([aria-required="true"]) > label::after {
  content: " *";
  color: var(--color-coral-deep);
}

/* ---- Checkboxes, radios and acceptance ---- */
.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-acceptance { display: block; }
.wpcf7 .wpcf7-list-item { display: block; margin: 0 0 10px; }
.wpcf7 .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 500; font-size: 14px; cursor: pointer; }
.wpcf7 .wpcf7-list-item-label::before,
.wpcf7 .wpcf7-list-item-label::after { content: none; }
.wpcf7 .field .wpcf7-list-item input[type="checkbox"],
.wpcf7 .field .wpcf7-list-item input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--color-coral-deep);
}

/* ---- Submit button (mirrors .btn .btn--primary) ---- */
.wpcf7 input.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-top: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-coral);
  background: var(--color-coral);
  color: #fff;
  box-shadow: 0 8px 20px rgba(222, 136, 145, 0.32);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.wpcf7 input.wpcf7-submit:hover,
.wpcf7 input.wpcf7-submit:focus-visible {
  background: var(--color-coral-deep);
  border-color: var(--color-coral-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(193, 99, 109, 0.38);
}
.wpcf7 input.wpcf7-submit:focus-visible { outline: 2px solid var(--color-coral-deep); outline-offset: 3px; }
.wpcf7 input.wpcf7-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ---- Loading state ---- */
.wpcf7 .wpcf7-spinner {
  position: absolute;
  visibility: hidden;
  margin: 0;
  width: 22px;
  height: 22px;
  border: 3px solid var(--color-coral-tint);
  border-top-color: var(--color-coral-deep);
  border-radius: 50%;
  background: transparent;
  opacity: 1;
  animation: nbi-spin 0.8s linear infinite;
}
.wpcf7 .wpcf7-spinner::before { display: none; }
.wpcf7 form.submitting .wpcf7-spinner { visibility: visible; }
.wpcf7 form.submitting .wpcf7-submit { opacity: 0.7; pointer-events: none; }
@keyframes nbi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wpcf7 .wpcf7-spinner { animation-duration: 2s; }
}

/* ---- Validation ---- */
.wpcf7 .field input.wpcf7-not-valid,
.wpcf7 .field select.wpcf7-not-valid,
.wpcf7 .field textarea.wpcf7-not-valid { border-color: var(--color-coral-deep); background: var(--color-blush-soft); }
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-coral-deep);
}

/* ---- Response message (success / error / spam) ---- */
/* Never show an empty box: hidden until CF7 has a message to display
   (CF7's own stylesheet does this too, but the theme should not depend on it). */
.wpcf7 form .wpcf7-response-output:empty,
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 form .wpcf7-response-output {
  margin: 4px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--color-coral-tint);
  border-radius: var(--radius-sm);
  background: var(--color-blush-soft);
  color: var(--color-brown);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.wpcf7 form.sent .wpcf7-response-output { background: #EFF6EC; border-color: #B7D3AE; color: #2F5A27; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { background: var(--color-blush-soft); border-color: var(--color-coral); color: var(--color-coral-deep); }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { background: #FBEDEA; border-color: var(--color-coral-deep); color: #8A2E22; }

/* ---- Mobile ----
   No overrides needed: the design's own responsive.css already stacks .form-row
   and the form keeps the original padding and full-width button. */