/* ==========================================================================
   AJS: Contact Form 7 sending / sent states (site-wide)
   Goes in webon-child/assets/css/ajs-cf7-states.css, loaded by the marked
   block in webon-child/functions.php. Works with ajs-cf7-states.js.

   The button keeps its own colours and size. While sending, its label and
   arrow are hidden and an overlay in the button's own text colour shows a
   spinner and "Sending...". After a send it shows a tick and "Sent" for a
   few seconds. CF7's message under the form becomes a card per result.
   Nothing here changes fields, field names or what CF7 posts.
   To remove: delete the functions.php block and this file and the .js.
   ========================================================================== */

.wpcf7 {
  --ajs-cf7-ok: #157f3d;
  --ajs-cf7-ok-ink: #0d4f27;
  --ajs-cf7-ok-bg: #eef9f2;
  --ajs-cf7-ok-line: #a9dcbc;
  --ajs-cf7-warn: #b25e09;
  --ajs-cf7-warn-ink: #6b3a06;
  --ajs-cf7-warn-bg: #fff7e8;
  --ajs-cf7-warn-line: #f1cf8f;
  --ajs-cf7-err: #c0281c;
  --ajs-cf7-err-ink: #7d1a12;
  --ajs-cf7-err-bg: #fef2f1;
  --ajs-cf7-err-line: #f2b5af;
}

/* ------------------------------------------------------------------ button */
.wpcf7 .wpcf7-submit.ajs-cf7-btn { position: relative; }

/* The overlay: covers the whole button, centred, in the button's text colour.
   (The theme sets `button[type=submit] span { display: block }`; these win.) */
.wpcf7 .wpcf7-submit > .ajs-cf7-btn__state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  color: inherit;
  font: inherit;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.wpcf7 .wpcf7-submit > .ajs-cf7-btn__state > .ajs-cf7-btn__busy,
.wpcf7 .wpcf7-submit > .ajs-cf7-btn__state > .ajs-cf7-btn__done {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.wpcf7 .wpcf7-submit .ajs-cf7-btn__state span { display: inline-block; line-height: inherit; }

/* Spinner: a ring in the text colour, a quarter of it solid. */
.wpcf7 .wpcf7-submit .ajs-cf7-btn__spinner {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.95;
  animation: ajs-cf7-spin 0.75s linear infinite;
}
/* A thin running line along the bottom edge of the button. */
.wpcf7 .wpcf7-submit .ajs-cf7-btn__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 35%;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transform: translateX(-100%);
}
/* The theme gives every svg in its arrow buttons fill and a 15px left margin. */
.wpcf7 .wpcf7-submit svg.ajs-cf7-btn__tick {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin: 0;
  fill: none;
  vertical-align: middle;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

/* Sending (and the few seconds of "Sent"): hide the button's own content. */
.wpcf7-form:is(.ajs-cf7-busy, .ajs-cf7-done) .wpcf7-submit.ajs-cf7-btn > :not(.ajs-cf7-btn__state) {
  opacity: 0 !important;
  transition: opacity 0.15s ease;
}
.wpcf7-form:is(.ajs-cf7-busy, .ajs-cf7-done) .wpcf7-submit.ajs-cf7-btn > .ajs-cf7-btn__state {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s;
}
.wpcf7-form.ajs-cf7-busy .wpcf7-submit .ajs-cf7-btn__busy { opacity: 1; }
.wpcf7-form.ajs-cf7-busy .wpcf7-submit .ajs-cf7-btn__bar {
  opacity: 0.55;
  animation: ajs-cf7-run 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.wpcf7-form.ajs-cf7-done:not(.ajs-cf7-busy) .wpcf7-submit .ajs-cf7-btn__done { opacity: 1; }
.wpcf7-form.ajs-cf7-done:not(.ajs-cf7-busy) .wpcf7-submit svg.ajs-cf7-btn__tick {
  animation: ajs-cf7-draw 0.45s ease-out 0.1s forwards;
}

/* Busy button: can't be pressed again; stays at full colour (the theme and the
   landing page's Arrow Button would otherwise fade an aria-disabled button). */
.wpcf7-form.ajs-cf7-busy .wpcf7-submit,
.wpcf7-form.ajs-cf7-busy .wpcf7-submit:is(:hover, :focus) {
  cursor: progress;
  opacity: 1 !important;
  pointer-events: none;
}
.wpcf7-form.ajs-cf7-done .wpcf7-submit { cursor: default; }

/* Fields dim a little while the form is sending (still readable, not disabled). */
.wpcf7-form .wpcf7-form-control-wrap { transition: opacity 0.2s ease; }
.wpcf7-form.ajs-cf7-busy .wpcf7-form-control-wrap { opacity: 0.6; pointer-events: none; }

/* Invalid, spam or failed: one short nudge so the eye goes to the message. */
.wpcf7 .wpcf7-submit.ajs-cf7-nudge { animation: ajs-cf7-nudge 0.4s ease-in-out; }

/* -------------------------------------------------------- response message */
/* CF7 shows .wpcf7-response-output after every result. Its own look is a thin
   coloured box; here it becomes a card with an icon. !important on colours
   only, because some Elementor widgets set their own border colour per state. */
.wpcf7 form.wpcf7-form .wpcf7-response-output {
  position: relative;
  padding: 12px 16px 12px 46px;
  border: 1px solid;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-align: start;
  animation: ajs-cf7-in 0.3s ease-out both;
}
.wpcf7 form.wpcf7-form .wpcf7-response-output::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: currentColor;
}
.wpcf7 form.wpcf7-form .wpcf7-response-output::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 22px;
  height: 22px;
  background: #fff;
  -webkit-mask: var(--ajs-cf7-icon) center / 14px no-repeat;
  mask: var(--ajs-cf7-icon) center / 14px no-repeat;
}
.wpcf7 form.wpcf7-form .wpcf7-response-output:empty::before,
.wpcf7 form.wpcf7-form .wpcf7-response-output:empty::after { content: none; }

.wpcf7 form.wpcf7-form.sent .wpcf7-response-output {
  --ajs-cf7-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  color: var(--ajs-cf7-ok-ink) !important;
  background: var(--ajs-cf7-ok-bg) !important;
  border-color: var(--ajs-cf7-ok-line) !important;
}
.wpcf7 form.wpcf7-form.sent .wpcf7-response-output::before { background: var(--ajs-cf7-ok); }

.wpcf7 form.wpcf7-form:is(.invalid, .unaccepted, .payment-required) .wpcf7-response-output {
  --ajs-cf7-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 6v7.5M12 18.2v.1'/%3E%3C/svg%3E");
  color: var(--ajs-cf7-warn-ink) !important;
  background: var(--ajs-cf7-warn-bg) !important;
  border-color: var(--ajs-cf7-warn-line) !important;
}
.wpcf7 form.wpcf7-form:is(.invalid, .unaccepted, .payment-required) .wpcf7-response-output::before { background: var(--ajs-cf7-warn); }

.wpcf7 form.wpcf7-form:is(.failed, .aborted, .spam) .wpcf7-response-output {
  --ajs-cf7-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9'/%3E%3C/svg%3E");
  color: var(--ajs-cf7-err-ink) !important;
  background: var(--ajs-cf7-err-bg) !important;
  border-color: var(--ajs-cf7-err-line) !important;
}
.wpcf7 form.wpcf7-form:is(.failed, .aborted, .spam) .wpcf7-response-output::before { background: var(--ajs-cf7-err); }

/* -------------------------------------------------------------- keyframes */
@keyframes ajs-cf7-spin { to { transform: rotate(360deg); } }
@keyframes ajs-cf7-run {
  from { transform: translateX(-100%); }
  to { transform: translateX(300%); }
}
@keyframes ajs-cf7-draw { to { stroke-dashoffset: 0; } }
@keyframes ajs-cf7-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes ajs-cf7-nudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* ----------------------------------------------------------- reduced motion */
/* No spinning, running or shaking. The ring and "Sending..." still show the
   state; the tick appears without drawing; the message card just appears. */
@media (prefers-reduced-motion: reduce) {
  .wpcf7 .wpcf7-submit .ajs-cf7-btn__spinner { animation: none; border-right-color: currentColor; border-style: dotted; }
  .wpcf7-form.ajs-cf7-busy .wpcf7-submit .ajs-cf7-btn__bar { animation: none; opacity: 0; }
  .wpcf7-form.ajs-cf7-done:not(.ajs-cf7-busy) .wpcf7-submit svg.ajs-cf7-btn__tick { animation: none; stroke-dashoffset: 0; }
  .wpcf7 .wpcf7-submit.ajs-cf7-nudge { animation: none; }
  .wpcf7 form.wpcf7-form .wpcf7-response-output { animation: none; }
}