/* ─── Contact Form 7 — global output styling ─────────────────────────────────
   CF7 always emits its own classes (.wpcf7-form-control, .wpcf7-submit,
   .wpcf7-form-control-wrap, .wpcf7-response-output, …) regardless of a
   specific form's own custom field classes, so every rule here targets
   those rather than any one form's field-tag classes — this covers
   whatever CF7 form appears anywhere on the site (the booking inquiry,
   a future contact page, …), not just one instance. A specific placement's
   own layout (e.g. the booking form's two-column rows) stays local to
   that section; this file is only the shared look: inputs, submit,
   validation, and the response message.
   ────────────────────────────────────────────────────────────────────────── */

.wpcf7-form {
  position: relative;
}

/* CF7 6.x wraps its hidden anti-spam/meta inputs in a real <fieldset>,
   which browsers give a default visible border/padding — invisible only
   when CF7's own plugin stylesheet is enqueued, which this install
   doesn't load, so reset it explicitly rather than depend on that plugin
   CSS being present. */
fieldset.hidden-fields-container {
  display: none;
}

.wpcf7-form-control-wrap {
  position: relative;
  display: block;
}

textarea.wpcf7-form-control,
select.wpcf7-form-control,
.wpcf7-form-control-wrap input.wpcf7-form-control:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  width: 100%;
  font: inherit;
  color: var(--text-color);
  background: var(--deep);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.8em 0.9em;
  transition: border-color 0.2s, box-shadow 0.2s;

  &:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent);
  }

  &.wpcf7-not-valid {
    border-color: var(--negative-color);
  }
}

textarea.wpcf7-form-control {
  min-height: 130px;
  resize: vertical;
}

.wpcf7-form label {
  display: block;
  font-size: 0.86rem;
  font-weight: 500;
}

.wpcf7-form .wpcf7-form-control-wrap {
  margin-top: 6px;
}

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

.wpcf7-acceptance label,
.wpcf7-checkbox label,
.check label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text-soft);
}

.wpcf7-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent);
  flex: none;
}

/* Error tip sits under its own field without pushing the layout. */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--negative-color) 70%, white);
}

/* The submit is the theme's pill button. */
input.wpcf7-submit.wpcf7-form-control {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font: 600 0.95rem/1 var(--font-text);
  padding: 0.95em 1.3em;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg-color);
  cursor: pointer;
  transition: background var(--hover-duration), transform var(--hover-duration) var(--ease);

  &:hover {
    background: var(--accent-hi);
    transform: translateY(-1px);
  }
}

.wpcf7-spinner {
  margin: 0 0 0 8px;
}

/* ─── Response message — a floating popup, not an inline block ───────────────
   Absolutely positioned below the form (.wpcf7-form is the position:
   relative anchor above) so it never shifts the form's own layout — a
   success or error message used to push whatever sat below it down the
   page. Hidden until CF7's own AJAX handler actually fills it with text,
   then fades/rises in as a small elevated card; success gets the
   strongest "popup" treatment (shadow + tinted card), error/other states
   stay quieter but are still an absolute, non-layout-shifting box.
   ────────────────────────────────────────────────────────────────────────── */
.wpcf7-response-output {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  /* Extra clearance (not just 10px) because a per-field .wpcf7-not-valid-tip
     sits absolutely right under its own field, at roughly this same height
     when a form is a single field row (e.g. a one-field form) — this
     keeps the two from overlapping into one unreadable line. */
  margin: 26px 0 0;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity var(--hover-duration) var(--timing),
    transform var(--hover-duration) var(--timing);

  &:not(:empty) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

form.sent .wpcf7-response-output {
  border-color: var(--positive-color);
  background: color-mix(in srgb, var(--positive-color) 12%, var(--surface-color));
  color: var(--positive-color);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--positive-color) 25%, transparent);
}

form.failed .wpcf7-response-output,
form.aborted .wpcf7-response-output,
form.spam .wpcf7-response-output,
form.invalid .wpcf7-response-output,
form.unaccepted .wpcf7-response-output {
  border-color: var(--negative-color);
  background: color-mix(in srgb, var(--negative-color) 12%, var(--surface-color));
  color: var(--negative-color);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--negative-color) 18%, transparent);
}