/*
 * Ostoja — Contact Form 7 styling.
 * Scoped to .wpcf7 / .wpcf7-form so it never leaks to other forms.
 * Uses the theme design tokens: cream surfaces, forest-green accents, pill submit.
 * Covers the shipped form (name, email, consent checkbox, submit) plus common
 * extra fields (textarea, tel, url, select) so future fields stay on-brand.
 */

/* ============================================================
   Layout
   ============================================================ */
.wpcf7 { max-width: 34rem; }

/* CF7 auto-wraps content in <p> and drops <br> after label text; tame both. */
.wpcf7-form p { margin: 0 0 1.25rem; }
.wpcf7-form p:last-of-type { margin-bottom: 0; }
.wpcf7-form label br { display: none; }

/* ============================================================
   Field labels (name, email, …)
   ============================================================ */
.wpcf7-form label {
  display: block;
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ost-foreground);
}

/* The <span> CF7 wraps each control in — make it a block so inputs go full width. */
.wpcf7-form .wpcf7-form-control-wrap { display: block; margin-top: .5rem; }

/* ============================================================
   Text inputs / textarea / select
   ============================================================ */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  height: 3rem;
  padding: 0 1.1rem;
  border: 1px solid var(--ost-input);
  border-radius: .75rem; /* Change to 9999px for full pill fields (like the search). */
  background: var(--ost-card);
  color: var(--ost-foreground);
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .15s var(--ost-ease), box-shadow .15s var(--ost-ease);
}
.wpcf7-form textarea {
  height: auto;
  min-height: 8rem;
  padding: .85rem 1.1rem;
  line-height: 1.6;
  resize: vertical;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: var(--ost-muted-foreground); }

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none;
  border-color: var(--ost-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ost-primary) 18%, transparent);
}

/* ============================================================
   Acceptance / consent checkbox
   ============================================================ */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.wpcf7-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-weight: 400;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ost-muted-foreground);
  cursor: pointer;
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: .12rem 0 0;
  border: 1px solid var(--ost-input);
  border-radius: .35rem;
  background: var(--ost-card);
  cursor: pointer;
  transition: background-color .15s var(--ost-ease), border-color .15s var(--ost-ease);
}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"]:checked {
  background-color: var(--ost-primary);
  border-color: var(--ost-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f0e9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: .8rem;
  background-position: center;
  background-repeat: no-repeat;
}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"]:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--ost-primary) 50%, transparent);
  outline-offset: 2px;
}
.wpcf7-form .wpcf7-acceptance a { color: var(--ost-primary); text-decoration: underline; }
.wpcf7-form .wpcf7-acceptance a:hover { color: var(--ost-forest); }

/* ============================================================
   Submit button — matches .ost-btn--primary (green pill)
   ============================================================ */
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 1.75rem;
  border: 0;
  border-radius: 9999px;
  background: var(--ost-primary);
  color: var(--ost-primary-foreground);
  font-family: inherit;
  font-weight: 500;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: var(--ost-shadow-soft);
  transition: background-color .15s var(--ost-ease), transform .1s var(--ost-ease);
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover { background: var(--ost-forest); }
.wpcf7-form input[type="submit"]:active,
.wpcf7-form .wpcf7-submit:active { transform: scale(.985); }
.wpcf7-form input[type="submit"]:disabled,
.wpcf7-form .wpcf7-submit:disabled { opacity: .6; cursor: default; }

/* Loading spinner shown next to the button while submitting. */
.wpcf7-spinner { background-color: var(--ost-primary); }

/* ============================================================
   Validation + response messages
   ============================================================ */
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}
.wpcf7-not-valid-tip {
  display: block;
  margin-top: .4rem;
  color: #b3261e;
  font-size: .8125rem;
}

.wpcf7-form .wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: .85rem 1.1rem;
  border: 1px solid var(--ost-border);
  border-radius: .75rem;
  font-size: .9rem;
  line-height: 1.5;
}
.wpcf7-form.sent .wpcf7-response-output {
  border-color: color-mix(in oklab, var(--ost-primary) 40%, transparent);
  background: color-mix(in oklab, var(--ost-primary) 8%, transparent);
  color: var(--ost-forest);
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  border-color: rgba(179, 38, 30, .4);
  background: rgba(179, 38, 30, .06);
  color: #8f1d16;
}