/* ==========================================================================
   Contact Form 7 — restyle the plugin's output to the theme's form design.
   The form templates supply .field / .form-grid wrappers; this file handles
   the markup CF7 generates itself (control wraps, list items, tips, response).
   ========================================================================== */

/* CF7 wraps every control in a span; it must not break the layout. */
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* ---- Text inputs, selects, textareas ------------------------------------- */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: inherit;
  font-size: .9375rem;
  color: var(--c-fg);
  transition: border-color var(--dur-fast) var(--ease);
}

.wpcf7 textarea { min-height: 7rem; resize: vertical; }

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--c-primary);
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: #b4b4b4; }

/* ---- Radio and checkbox groups as pills ---------------------------------- */

.wpcf7-radio,
.wpcf7-checkbox {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.wpcf7-list-item { margin: 0; }

.wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 100%;
  padding: .8rem 1.1rem;
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-pill);
  font-size: .875rem;
  line-height: 1.3;
  color: var(--c-fg);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

.wpcf7-list-item label:hover { background: rgba(74, 95, 193, .06); }

.wpcf7-list-item input[type="radio"],
.wpcf7-list-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1px solid var(--c-primary);
  border-radius: 50%;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.wpcf7-list-item input[type="checkbox"] { border-radius: 4px; }

.wpcf7-list-item input:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: var(--c-primary);
}

.wpcf7-list-item label:has(input:checked) { background: rgba(74, 95, 193, .08); }

.wpcf7-list-item-label { line-height: 1.3; }

/* ---- Submit -------------------------------------------------------------- */

.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
  width: auto;
  border: 0;
  cursor: pointer;
}

/* CF7 prints the spinner as a sibling of the submit control. */
.wpcf7-spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 0 0 .75rem;
  vertical-align: middle;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  background: none;
  animation: structra-spin .7s linear infinite;
  opacity: 0;
}

form.submitting .wpcf7-spinner { opacity: 1; }

@keyframes structra-spin { to { transform: rotate(360deg); } }

/* ---- Validation and response messages ------------------------------------ */

.wpcf7-not-valid-tip {
  display: block;
  margin-top: .4rem;
  font-size: .75rem;
  color: #c0392b;
}

.wpcf7 .wpcf7-not-valid { border-color: #c0392b; }

/* CF7 always prints this container; only show it when it has something
   to say, otherwise an empty bordered box sits under every form. */
.wpcf7-response-output { display: none; }

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { display: block; }

.wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: .9rem 1.1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  line-height: 1.5;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #c0392b;
  color: #c0392b;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-color: #b34700;
  color: #b34700;
}

/* The theme shows its own success panel, so CF7's "sent" message is noise. */
.wpcf7 form.sent .wpcf7-response-output { display: none; }

/* ---- Wizard --------------------------------------------------------------- */

/* The wizard's Back/Next are ordinary buttons; the submit is CF7's. */
.contact__actions .wpcf7-spinner { margin-left: .5rem; }

.contact__actions p { margin: 0; }

/* Choice groups sit under a plain label, not a <label for>. */
.field--choices .field__label { margin-bottom: .25rem; }

/* ---- Editor-facing notice when no form is selected ----------------------- */

.structra-form-missing {
  padding: 1rem 1.25rem;
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-light);
  font-size: .8125rem;
  color: var(--c-muted);
}

/* ---- Dark backgrounds ----------------------------------------------------- */

.section--dark .wpcf7 input[type="text"],
.section--dark .wpcf7 input[type="email"],
.section--dark .wpcf7 input[type="tel"],
.section--dark .wpcf7 textarea,
.section--dark .wpcf7 select {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}