/* OVIO Space 3.0: Contact Form 7 in the site's look (Settings › OVIO Space › Forms). Every rule is inside a form the plugin has marked
   (.wpcf7 .ovio-cf), so nothing else on the site is touched; the theme's and Contact Form 7's own form styles are overruled there.
   The settings come in as variables (printed after this file): --of-r corner, --of-h field height, --of-gap space between fields,
   --of-fs text size, --of-rows the message box's lines; and, with your own colours, --of-tx text, --of-ph / --of-pho placeholder,
   --of-rim / --of-rimo rim, --of-ac the glow (each colour as red, green, blue). */

/* ---- the colours: for a dark background (the default) or a light one ---- */
.wpcf7 .ovio-cf {
  --of-r: 14px; --of-h: 52px; --of-gap: 14px; --of-fs: 16px; --of-rows: 5;
  --of-tx: 255, 255, 255; --of-ph: 255, 255, 255; --of-pho: .55; --of-rim: 255, 255, 255; --of-rimo: .2; --of-ac: 255, 214, 170;
  --of-fill: 10, 12, 30; --of-fillo: .26; --of-hi: .075; --of-hi2: .02; --of-drop: rgba(0, 0, 0, .55);
  --of-bad: 255, 140, 165; --of-ok: 110, 231, 200; --of-warn: 255, 196, 120; --of-opt: #151831; --of-on: 26, 20, 48;
  --of-px: max(18px, calc(var(--of-r) * .6)); --of-py: max(10px, calc((var(--of-h) - 1.5em) / 2));
  position: relative;
}
.wpcf7 .ovio-cf.ovio-cf-light {
  --of-tx: 14, 18, 34; --of-ph: 14, 18, 34; --of-pho: .5; --of-rim: 14, 18, 34; --of-rimo: .16; --of-ac: 60, 96, 230;
  --of-fill: 255, 255, 255; --of-fillo: .5; --of-hi: .5; --of-hi2: .28; --of-drop: rgba(8, 12, 40, .3);
  --of-bad: 200, 40, 90; --of-ok: 20, 150, 130; --of-warn: 190, 110, 20; --of-opt: #ffffff; --of-on: 255, 255, 255;
}
.wpcf7 .ovio-cf.ovio-cf-line { --of-px: 2px; }

/* ---- the layout: one field under another, the same space between each; Contact Form 7's paragraphs and line breaks put away ---- */
.wpcf7 .ovio-cf p { margin: 0 !important; padding: 0 !important; }
/* (a line break after a field, which Contact Form 7 adds between fields written on lines of their own, would add a whole empty line to the space) */
.wpcf7 .ovio-cf :is(.wpcf7-form-control-wrap, label, .ovio-cf-act, .ovio-cols, .ovio-cf-lt) + br, .wpcf7 .ovio-cf p > br:first-child, .wpcf7 .ovio-cf .ovio-cf-f br { display: none; }
.wpcf7 .ovio-cf label { display: block; margin: 0 !important; font-weight: inherit; color: rgba(var(--of-tx), .86); }
.wpcf7 .ovio-cf .wpcf7-form-control-wrap { display: block; position: relative; margin: 0 0 var(--of-gap); }
/* (words left above a field: small, a line of their own) */
.wpcf7 .ovio-cf .ovio-cf-lt { display: block; margin: 0 0 8px; font-size: calc(var(--of-fs) * .875); line-height: 1.35; letter-spacing: .02em; color: rgba(var(--of-tx), .78); }

/* columns: <div class="ovio-cols">…</div> round fields in the form's editor puts them side by side, as many columns as fields
   (they stack on phones, at the site's mobile width) */
.wpcf7 .ovio-cf .ovio-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--of-gap); align-items: start; margin: 0; }
.wpcf7 .ovio-cf .ovio-cols > p { display: contents; }
.wpcf7 .ovio-cf .ovio-cols br { display: none; }

/* ---- the fields ---- */
.wpcf7 .ovio-cf :is(input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=file], [type=hidden], [type=range], [type=color], [type=image])), textarea, select) {
  /* (the state of the field, which each style draws in its own way) */
  --of-l: rgba(var(--of-rim), var(--of-rimo)); --of-g: 0 0 0 0 transparent; --of-g2: 0 0 0 0 transparent;
  box-sizing: border-box !important; display: block !important; position: relative;
  width: 100% !important; max-width: 100% !important; min-width: 0; height: var(--of-h) !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 var(--of-px) !important;
  font-family: inherit; font-size: var(--of-fs) !important; font-weight: 400; line-height: 1.3; letter-spacing: .01em; text-indent: 0 !important;
  color: rgb(var(--of-tx)) !important; caret-color: rgb(var(--of-ac));
  border: 1px solid var(--of-l) !important; border-radius: var(--of-r) !important; outline: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, var(--of-hi)), rgba(255, 255, 255, var(--of-hi2))), rgba(var(--of-fill), var(--of-fillo)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 10px 26px -18px var(--of-drop), var(--of-g), var(--of-g2) !important;
  -webkit-appearance: none; appearance: none;
  transition: border-color .25s ease, box-shadow .3s ease, background-color .25s ease !important;
}
.wpcf7 .ovio-cf.ovio-cf-light :is(input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=file], [type=hidden], [type=range], [type=color], [type=image])), textarea, select) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 10px 24px -18px var(--of-drop), var(--of-g), var(--of-g2) !important;
}
/* the states: pointed at, typed in (the rim takes the glow), and not filled in right */
@media (hover: hover) {
  .wpcf7 .ovio-cf :is(input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=file], [type=hidden], [type=range], [type=color], [type=image])), textarea, select):hover { --of-l: rgba(var(--of-rim), calc(var(--of-rimo) + .14)); }
}
.wpcf7 .ovio-cf :is(input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=file], [type=hidden], [type=range], [type=color], [type=image])), textarea, select):focus {
  --of-l: rgba(var(--of-ac), .8); --of-g: 0 0 0 3px rgba(var(--of-ac), .14); --of-g2: 0 0 24px -6px rgba(var(--of-ac), .55);
}
.wpcf7 .ovio-cf :is(input, textarea, select).wpcf7-not-valid {
  --of-l: rgba(var(--of-bad), .8); --of-g: 0 0 0 3px rgba(var(--of-bad), .12); --of-g2: 0 0 20px -8px rgba(var(--of-bad), .7);
}
/* underline: just a line under each field, which lights up */
.wpcf7 .ovio-cf.ovio-cf-line :is(input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=file], [type=hidden], [type=range], [type=color], [type=image])), textarea, select) {
  --of-l: rgba(var(--of-rim), calc(var(--of-rimo) + .14));
  border-width: 0 0 1px !important; border-radius: 0 !important; background: transparent !important;
  box-shadow: 0 1px 0 0 var(--of-lf, transparent), 0 14px 18px -16px var(--of-lg, transparent) !important;
}
.wpcf7 .ovio-cf.ovio-cf-line :is(input, textarea, select):focus { --of-lf: rgba(var(--of-ac), .85); --of-lg: rgba(var(--of-ac), .8); }
.wpcf7 .ovio-cf.ovio-cf-line :is(input, textarea, select).wpcf7-not-valid { --of-lf: rgba(var(--of-bad), .85); --of-lg: rgba(var(--of-bad), .7); }
/* outline: a fine rim, nothing inside */
.wpcf7 .ovio-cf.ovio-cf-outline :is(input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=file], [type=hidden], [type=range], [type=color], [type=image])), textarea, select) {
  --of-l: rgba(var(--of-rim), calc(var(--of-rimo) + .1));
  background: transparent !important; box-shadow: var(--of-g), var(--of-g2) !important;
}
@media (hover: hover) {
  .wpcf7 .ovio-cf:is(.ovio-cf-line, .ovio-cf-outline) :is(input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=file], [type=hidden], [type=range], [type=color], [type=image])), textarea, select):hover { --of-l: rgba(var(--of-rim), calc(var(--of-rimo) + .26)); }
}
.wpcf7 .ovio-cf:is(.ovio-cf-line, .ovio-cf-outline) :is(input, textarea, select):focus { --of-l: rgba(var(--of-ac), .85); }
.wpcf7 .ovio-cf:is(.ovio-cf-line, .ovio-cf-outline) :is(input, textarea, select).wpcf7-not-valid { --of-l: rgba(var(--of-bad), .85); }

/* the words inside: the placeholder, and what the browser fills in by itself (its own background kept away) */
.wpcf7 .ovio-cf :is(input, textarea)::placeholder { color: rgba(var(--of-ph), var(--of-pho)) !important; opacity: 1 !important; }
.wpcf7 .ovio-cf :is(input, textarea, select):is(:-webkit-autofill, :autofill) {
  -webkit-text-fill-color: rgb(var(--of-tx)) !important; caret-color: rgb(var(--of-ac));
  transition: background-color 600000s 0s, color 600000s 0s, border-color .25s ease, box-shadow .3s ease !important;
}

/* the message box: as many lines as set, taller as it's dragged (never wider) */
.wpcf7 .ovio-cf textarea {
  height: calc(var(--of-rows) * 1.5em + 2 * var(--of-py) + 2px) !important; min-height: var(--of-h) !important;
  padding: var(--of-py) var(--of-px) !important; line-height: 1.5 !important;
  border-radius: min(var(--of-r), 22px) !important; resize: vertical; overflow: auto;
}
.wpcf7 .ovio-cf.ovio-cf-line textarea { border-radius: 0 !important; }

/* a dropdown: a fine chevron, its choices on the form's colours, and its first, empty choice (which shows the label) dimmed */
.wpcf7 .ovio-cf select { padding-right: calc(var(--of-px) + 24px) !important; cursor: pointer; text-overflow: ellipsis; }
.wpcf7 .ovio-cf select[multiple] { height: auto !important; padding: 8px var(--of-px) !important; }
.wpcf7 .ovio-cf select option { background: var(--of-opt); color: rgb(var(--of-tx)); }
.wpcf7 .ovio-cf select:has(option[value=""]:checked):not([multiple]) { color: rgba(var(--of-ph), var(--of-pho)) !important; }
.wpcf7 .ovio-cf .wpcf7-form-control-wrap:has(> select:not([multiple]))::after {
  content: ""; position: absolute; right: calc(var(--of-px) + 4px); top: calc(var(--of-h) / 2); width: 7px; height: 7px; margin-top: -6px;
  border-right: 1.5px solid; border-bottom: 1.5px solid; color: rgba(var(--of-tx), .7); transform: rotate(45deg); pointer-events: none;
}
/* (a date: the browser's calendar button in the text's colour) */
.wpcf7 .ovio-cf:not(.ovio-cf-light) input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .6; cursor: pointer; }

/* ---- labels inside that float up: the words sit in the field, and float to its top, small, once it's typed in ---- */
.wpcf7 .ovio-cf .ovio-cf-float input { padding-top: calc(var(--of-fs) * .5 + 6px) !important; }
.wpcf7 .ovio-cf .ovio-cf-float textarea { padding-top: calc(var(--of-py) + var(--of-fs) * .5 + 2px) !important; }
.wpcf7 .ovio-cf .ovio-cf-fl {
  position: absolute; left: calc(var(--of-px) + 1px); top: calc(var(--of-h) / 2); max-width: calc(100% - 2 * var(--of-px)); z-index: 1;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none;
  font-size: var(--of-fs); line-height: 1.2; color: rgba(var(--of-ph), var(--of-pho));
  transform: translateY(-50%); transform-origin: 0 0;
  transition: top .22s cubic-bezier(.3, .7, .2, 1), transform .22s cubic-bezier(.3, .7, .2, 1), color .22s ease;
}
.wpcf7 .ovio-cf textarea + .ovio-cf-fl { top: calc(var(--of-py) + .75em); }
.wpcf7 .ovio-cf :is(input, textarea):is(:focus, :not(:placeholder-shown)) + .ovio-cf-fl { top: 8px; transform: translateY(0) scale(.72); color: rgba(var(--of-tx), .62); }
.wpcf7 .ovio-cf :is(input, textarea):focus + .ovio-cf-fl { color: rgba(var(--of-ac), .95); }
.wpcf7 .ovio-cf :is(input, textarea).wpcf7-not-valid + .ovio-cf-fl { color: rgba(var(--of-bad), .95); }
.wpcf7 .ovio-cf.ovio-cf-line .ovio-cf-fl { left: 2px; }

/* ---- checkboxes, radios and the consent tick ---- */
.wpcf7 .ovio-cf .wpcf7-list-item { display: inline-flex; margin: 0 22px 10px 0 !important; }
.wpcf7 .ovio-cf .wpcf7-list-item label { display: inline-flex !important; align-items: flex-start; gap: 11px; cursor: pointer; color: rgba(var(--of-tx), .86); }
.wpcf7 .ovio-cf .wpcf7-list-item-label { font-size: calc(var(--of-fs) * .94); line-height: 1.45; }
.wpcf7 .ovio-cf .wpcf7-list-item-label::before, .wpcf7 .ovio-cf .wpcf7-list-item-label::after { content: none; }
.wpcf7 .ovio-cf .wpcf7-list-item-label a, .wpcf7 .ovio-cf .ovio-cf-lt a { color: rgb(var(--of-ac)); text-decoration: underline; text-underline-offset: 2px; }
.wpcf7 .ovio-cf :is(input[type=checkbox], input[type=radio]) {
  -webkit-appearance: none; appearance: none; display: inline-block !important; flex: none; box-sizing: border-box;
  width: 20px !important; height: 20px !important; margin: calc((var(--of-fs) * .94 * 1.45 - 20px) / 2) 0 0 !important; padding: 0 !important;
  border: 1px solid rgba(var(--of-rim), calc(var(--of-rimo) + .16)) !important; border-radius: 6px !important;
  background: rgba(var(--of-fill), var(--of-fillo)) 50% 50% / 14px 14px no-repeat !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important; cursor: pointer; vertical-align: top;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease !important;
}
.wpcf7 .ovio-cf input[type=radio] { border-radius: 50% !important; }
.wpcf7 .ovio-cf :is(input[type=checkbox], input[type=radio]):checked {
  background-color: rgba(var(--of-ac), .92) !important; border-color: rgb(var(--of-ac)) !important; box-shadow: 0 0 14px -2px rgba(var(--of-ac), .75) !important;
}
.wpcf7 .ovio-cf input[type=checkbox]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1430' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") !important; }
.wpcf7 .ovio-cf.ovio-cf-light input[type=checkbox]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") !important; }
.wpcf7 .ovio-cf input[type=radio]:checked { background-image: radial-gradient(circle, rgb(var(--of-on)) 0 3.5px, transparent 4.5px) !important; background-size: 100% 100% !important; }
.wpcf7 .ovio-cf :is(input[type=checkbox], input[type=radio]):focus-visible { outline: 2px solid rgba(var(--of-ac), .85) !important; outline-offset: 2px; }
.wpcf7 .ovio-cf .wpcf7-not-valid :is(input[type=checkbox], input[type=radio]) { border-color: rgba(var(--of-bad), .85) !important; }

/* ---- an image CAPTCHA (the Image CAPTCHA plugin's "select the key"): one quiet line, its words small, the icons beside them; the
   chosen one takes the glow. Its radio buttons stay hidden (they still work with the keyboard) ---- */
.wpcf7 .ovio-cf .captcha-image { display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0; padding: 0 !important; border: 0 !important; text-align: left !important; font-size: 13px; line-height: 1.35; color: rgba(var(--of-tx), .6); }
.wpcf7 .ovio-cf .captcha-image .cf7ic_instructions { display: inline !important; margin: 0 8px 0 0; font-size: 13px; letter-spacing: .01em; }
.wpcf7 .ovio-cf .captcha-image .cf7ic_instructions span { font-weight: 500; color: rgba(var(--of-tx), .88); }
.wpcf7 .ovio-cf .captcha-image > label { display: inline-flex !important; position: relative; margin: 0 !important; cursor: pointer; }
.wpcf7 .ovio-cf .captcha-image label > input { position: absolute !important; left: 0; top: 0; opacity: 0 !important; width: 1px !important; height: 1px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; pointer-events: none; }
.wpcf7 .ovio-cf .captcha-image label > input + svg {
  display: block; box-sizing: border-box; width: 38px; height: 38px; padding: 6px !important; border: 1px solid transparent !important; border-radius: 10px;
  color: rgba(var(--of-tx), .66); background: transparent; transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .25s ease;
}
@media (hover: hover) { .wpcf7 .ovio-cf .captcha-image label:hover > input:not(:checked) + svg { color: rgb(var(--of-tx)); background: rgba(var(--of-tx), .06); } }
.wpcf7 .ovio-cf .captcha-image label > input:checked + svg { color: rgb(var(--of-ac)); border-color: rgba(var(--of-ac), .7) !important; background: rgba(var(--of-ac), .12); box-shadow: 0 0 16px -4px rgba(var(--of-ac), .7); }
.wpcf7 .ovio-cf .captcha-image label > input:focus + svg { border-color: transparent !important; }
.wpcf7 .ovio-cf .captcha-image label > input:checked:focus + svg { border-color: rgba(var(--of-ac), .7) !important; }
.wpcf7 .ovio-cf .captcha-image label > input:focus-visible + svg { border-color: rgba(var(--of-ac), .9) !important; }
.wpcf7 .ovio-cf .kc_captcha .wpcf7-not-valid .captcha-image { color: rgb(var(--of-bad)); }   /* (the wrong icon, or none, once sent) */
.wpcf7 .ovio-cf .kc_captcha .wpcf7-not-valid-tip { padding: 0; margin-top: 4px; }

/* ---- a file: the browser's "Choose file" as a small glass button ---- */
.wpcf7 .ovio-cf input[type=file] {
  display: block; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
  font-size: 14px !important; color: rgba(var(--of-ph), calc(var(--of-pho) + .1)) !important; cursor: pointer;
}
.wpcf7 .ovio-cf input[type=file]::file-selector-button {
  margin: 0 14px 0 0; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--of-tx));
  border: 1px solid rgba(var(--of-rim), calc(var(--of-rimo) + .12));
  background: linear-gradient(180deg, rgba(255, 255, 255, calc(var(--of-hi) + .06)), rgba(255, 255, 255, var(--of-hi2))), rgba(var(--of-fill), calc(var(--of-fillo) + .1));
  transition: border-color .25s ease, box-shadow .3s ease;
}
.wpcf7 .ovio-cf input[type=file]:is(:hover, :focus-visible)::file-selector-button { border-color: rgba(var(--of-ac), .8); box-shadow: 0 0 18px -4px rgba(var(--of-ac), .6); }

/* ---- what Contact Form 7 says: under a field, and after sending ---- */
.wpcf7 .ovio-cf .wpcf7-not-valid-tip { display: block; margin: 7px 0 0; padding: 0 var(--of-px); color: rgb(var(--of-bad)) !important; font-size: 13px !important; line-height: 1.4; letter-spacing: .01em; }
.wpcf7 .ovio-cf { --of-st: var(--of-rim); }
.wpcf7 .ovio-cf.sent { --of-st: var(--of-ok); }
.wpcf7 .ovio-cf:is(.failed, .aborted, .spam) { --of-st: var(--of-warn); }
.wpcf7 .ovio-cf:is(.invalid, .unaccepted, .payment-required) { --of-st: var(--of-bad); }
.wpcf7 .ovio-cf .wpcf7-response-output {
  position: relative; margin: var(--of-gap) 0 0 !important; padding: 13px 18px 13px 42px !important;
  border: 1px solid rgba(var(--of-st), .42) !important; border-radius: min(var(--of-r), 18px) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, var(--of-hi)), rgba(255, 255, 255, var(--of-hi2))), rgba(var(--of-fill), calc(var(--of-fillo) + .1)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 28px -10px rgba(var(--of-st), .85) !important;
  color: rgb(var(--of-tx)) !important; font-size: 14.5px; line-height: 1.45; letter-spacing: .01em;
}
.wpcf7 .ovio-cf .wpcf7-response-output::before {
  content: ""; position: absolute; left: 18px; top: calc(13px + .725em); width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: rgb(var(--of-st)); box-shadow: 0 0 0 4px rgba(var(--of-st), .16), 0 0 12px rgba(var(--of-st), .9);
}
/* after sending, only the message (when set) */
.wpcf7 .ovio-cf.ovio-cf-hide.sent > :not(.wpcf7-response-output) { display: none !important; }
.wpcf7 .ovio-cf.ovio-cf-hide.sent .wpcf7-response-output { margin-top: 0 !important; }

/* ---- the button: the site's glass button, where the setting puts it, with a small orbit inside it while the message is sent ---- */
.wpcf7 .ovio-cf .ovio-cf-act { display: flex; align-items: center; margin: calc(var(--of-gap) * .4) 0 0; }
.wpcf7 .ovio-cf.ovio-cf-a-center .ovio-cf-act { justify-content: center; }
.wpcf7 .ovio-cf.ovio-cf-a-right .ovio-cf-act { justify-content: flex-end; }
.wpcf7 .ovio-cf.ovio-cf-a-full .ovio-cf-act .ovio-cf-btn { width: 100%; }
.wpcf7 .ovio-cf .ovio-cf-btn { height: auto !important; min-height: 0 !important; margin: 0 !important; font-size: inherit; }   /* (a button doesn't take the page's text size by itself) */
.wpcf7 .ovio-cf .ovio-cf-btn:disabled { opacity: .5; cursor: not-allowed; }
.wpcf7 .ovio-cf .wpcf7-spinner { display: none !important; }
.wpcf7 .ovio-cf .ovio-cf-btn > :is(.ovio-bt, .ovio-bi) { transition: opacity .25s ease; }
.wpcf7 .ovio-cf .ovio-cf-btn::before, .wpcf7 .ovio-cf .ovio-cf-btn::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 1; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.wpcf7 .ovio-cf .ovio-cf-btn::before { width: 22px; height: 22px; margin: -11px 0 0 -11px; box-sizing: border-box; border: 1.5px solid currentColor; }
.wpcf7 .ovio-cf .ovio-cf-btn::after { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: currentColor; box-shadow: 0 0 8px 2px rgba(var(--gx-c1, 255, 255, 255), .9); }
.wpcf7 .ovio-cf.submitting .ovio-cf-btn { pointer-events: none; }
.wpcf7 .ovio-cf.submitting .ovio-cf-btn > :is(.ovio-bt, .ovio-bi) { opacity: .18; }
.wpcf7 .ovio-cf.submitting .ovio-cf-btn::before { opacity: .3; }
.wpcf7 .ovio-cf.submitting .ovio-cf-btn::after { opacity: 1; animation: ovio-cf-orbit .9s linear infinite; }
@keyframes ovio-cf-orbit { from { transform: rotate(0turn) translateX(10.5px); } to { transform: rotate(1turn) translateX(10.5px); } }

@media (prefers-reduced-motion: reduce) {
  .wpcf7 .ovio-cf.submitting .ovio-cf-btn::after { animation: ovio-cf-pulse 1.4s ease-in-out infinite alternate; transform: translateX(10.5px); }
  @keyframes ovio-cf-pulse { from { opacity: .35; } to { opacity: 1; } }
  .wpcf7 .ovio-cf .ovio-cf-fl { transition: none; }
}