/* ==========================================================================
   WBI Form
   A contact card around the Bricks Form element. Every visual value is a
   `--wbi-form-*` custom property, so the Bricks element only overrides
   variables (typography, borders, gradients and shadows excepted).

   Tokens live in :where() (zero specificity) so any rule Bricks generates on
   the root (#brxe-xxx { --token: ... }) always wins, regardless of the order
   in which the stylesheets load.

   Sizes are in px or in `em` against --wbi-form-base (16px), never in rem:
   Bricks sets the root to 10px. Fluid defaults use `cqi` (1% of the card
   width) inside the card and `vw` on the card itself, which cannot query
   its own width.

   Markup (the Bricks <form> is the card):
     form.wbi-form
       .wbi-form__shapes > .wbi-form__shape × n
       .wbi-form__heading
       .wbi-form__body > .form-group.wbi-form__field × n, .captcha, .wbi-form__actions
       .message   (appended by the Bricks script after sending)
   ========================================================================== */

:where(.wbi-form) {
  /* --- Card ------------------------------------------------------------ */
  /* Flat color under the gradient. The design's gradient comes from the
     Bricks control (Card > Background gradient): clearing it leaves this. */
  --wbi-form-bg: #E3F0EE;
  --wbi-form-radius: clamp(0px, (100vw - 478px) * 999, 12px); /* square up to 478px: edge to edge */
  --wbi-form-shadow: 0 25px 45px -14px rgba(0, 0, 0, 0.27);
  /* 164 / 173 / 93px on desktop and tablet, 97 / 106 / 23px on a 402px phone */
  --wbi-form-pad-top: clamp(97px, 10.61vw + 54.35px, 164px);
  --wbi-form-pad-bottom: clamp(106px, 10.45vw + 64px, 173px);
  --wbi-form-pad-x: clamp(23px, 11.25vw - 22.2px, 93px);
  --wbi-form-content-w: 1140px;

  /* --- Typography ------------------------------------------------------
     Colors are defaults only: the Typography control of each block writes
     `color` on its selector and wins over them. */
  --wbi-form-base: 16px;
  /* Theme Styles > WBI Elements > Font (see wbi-fonts.css) */
  --wbi-form-font: var(--wbi-font), system-ui, -apple-system, "Segoe UI", sans-serif;

  /* cqi = 1% of the card width, not of the viewport. 36 → 28 → 18px */
  --wbi-form-heading-size: clamp(1.125em, 1.948cqi + 0.636em, 2.25em);
  --wbi-form-heading-weight: 800;
  --wbi-form-heading-lh: 1.2;
  --wbi-form-heading-color: #0D1115;
  --wbi-form-heading-gap: 56px;

  --wbi-form-label-size: clamp(0.875em, 0.702cqi + 0.699em, 1.125em); /* 18 → 14px */
  --wbi-form-label-color: #48575B;
  --wbi-form-label-indent: 10px;
  --wbi-form-label-gap: clamp(8px, 13.17px - 0.39cqi, 11.6px);        /* 8 → 11.6px */

  --wbi-form-text-size: clamp(0.875em, 0.351cqi + 0.787em, 1em);      /* 16 → 14px */
  --wbi-form-text-color: #0D1115;
  --wbi-form-placeholder-color: #383838;

  /* --- Fields layout --------------------------------------------------- */
  /* 493px of 1140 on a 1326px card, half of the row on a 972px one */
  --wbi-form-col-left: min(28.53cqi + 114.7px, 493px, (100% - var(--wbi-form-col-gap)) / 2);
  --wbi-form-col-gap: clamp(16px, 21.19cqi - 189.9px, 91px);
  --wbi-form-row-gap: clamp(24px, 38.98px - 1.13cqi, 31px);          /* 24 → 28 → 31px */
  --wbi-form-full-gap: 12px;  /* added above full-width fields (the message) */
  --wbi-form-actions-gap: 34px;
  --wbi-form-actions-justify: end;
  --wbi-form-actions-inset: clamp(8px, 2.26cqi - 13.97px, 16px);

  /* --- Boxed fields ---------------------------------------------------- */
  --wbi-form-box-bg: #FFFFFF;
  --wbi-form-box-h: 56px;
  --wbi-form-box-pad-x: 24px;
  --wbi-form-textarea-h: 164px;
  --wbi-form-focus: #0C7347;

  /* --- Underlined fields ----------------------------------------------- */
  --wbi-form-line-color: #CDD1D9;
  --wbi-form-line-w: 2px;
  --wbi-form-line-label-w: clamp(0px, (100cqi - 1100px) * 999, 156px); /* 156px on wide cards only */
  --wbi-form-line-gap: 32px;
  --wbi-form-chevron-color: #0D1115;
  --wbi-form-chevron-size: 14px;
  --wbi-form-picker-bg: #FFFFFF;
  --wbi-form-option-hover-bg: #E3F0EE;

  /* --- Submit button --------------------------------------------------- */
  --wbi-form-btn-fill: #0D1115;
  --wbi-form-btn-color: #FFFFFF;
  /* The factory gradient comes from the Bricks control; this one covers an
     element inserted by code. */
  --wbi-form-btn-border: radial-gradient(ellipse 198% 131% at 106% 3%, #4E9BBD 0%, #0C7347 40%, #85B9A3 64%, #47B6E6 100%);
  --wbi-form-btn-border-w: 2px;
  --wbi-form-btn-radius: 8px;
  --wbi-form-btn-h: 48px;
  --wbi-form-btn-pad-x: 20px;
  --wbi-form-circle: 48px;
  --wbi-form-circle-overlap: 12px;
  --wbi-form-arrow-color: #FFFFFF;
  --wbi-form-arrow-size: 24px;

  /* --- Messages -------------------------------------------------------- */
  --wbi-form-error: #B42318;
  --wbi-form-success-bg: #DDF3E6;
  --wbi-form-success-color: #0B5132;
  --wbi-form-error-bg: #FDE7E4;
  --wbi-form-error-color: #9A1B12;

  /* --- Floating shapes ------------------------------------------------- */
  --wbi-form-shape-shadow: none;
  --wbi-form-motion: 1;   /* multiplies the amplitude and rotation of every shape */
  --wbi-form-speed: 1;    /* divides the duration: 2 = twice as fast */
  --wbi-form-ease: cubic-bezier(0.37, 0, 0.63, 1); /* sine in-out: no jolts */
}

/* ==========================================================================
   Card
   ========================================================================== */

.wbi-form {
  position: relative;
  isolation: isolate;
  /* Required, not cosmetic: `container-type: inline-size` stops the content
     from contributing intrinsic width, and Bricks containers are flex with
     `align-items: flex-start`. Without this it collapses to 0px in the builder. */
  width: 100%;
  container: wbiform / inline-size;
  display: grid;
  /* The content column stays centered, never wider than --wbi-form-content-w,
     with at least --wbi-form-pad-x on each side. */
  grid-template-columns:
    [full-start] minmax(var(--wbi-form-pad-x), 1fr)
    [content-start] minmax(0, var(--wbi-form-content-w))
    [content-end] minmax(var(--wbi-form-pad-x), 1fr)
    [full-end];
  align-content: start;
  margin: 0;
  padding: var(--wbi-form-pad-top) 0 var(--wbi-form-pad-bottom);
  font-family: var(--wbi-form-font);
  font-size: var(--wbi-form-base);
  line-height: 1.5;
  color: var(--wbi-form-label-color);
  background-color: var(--wbi-form-bg);
  /* !important: "Apply to: Text" in Card > Background gradient clips the
     card to the text and makes every text in the form transparent. */
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: initial !important;
  border-radius: var(--wbi-form-radius);
  box-shadow: var(--wbi-form-shadow);
}

/* "Apply to: Overlay" paints that gradient in a ::before over the card;
   the shapes and the content come later and sit above it. */
.wbi-form::before {
  border-radius: inherit;
}

.wbi-form *,
.wbi-form *::before,
.wbi-form *::after { box-sizing: border-box; }

/* Heading, fields and the notice the Bricks script appends after sending.
   Not the shapes: placed in a grid column, an absolute box would take that
   column as its frame instead of the whole card. */
.wbi-form > :not(.wbi-form__shapes) {
  grid-column: content;
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* ==========================================================================
   Heading
   ========================================================================== */

.wbi-form__heading {
  margin: 0 0 var(--wbi-form-heading-gap);
  font-family: inherit;
  font-size: var(--wbi-form-heading-size);
  font-weight: var(--wbi-form-heading-weight);
  line-height: var(--wbi-form-heading-lh);
  letter-spacing: 0;
  color: var(--wbi-form-heading-color);
  text-wrap: balance;
}

/* ==========================================================================
   Fields grid
   One switch decides between two columns and one: --wbi-form-stack is
   `initial` (two columns) or empty (one). The container query flips it on
   narrow cards; the "Columns" control writes it on this same selector with
   the element id, so it wins at any breakpoint.
   ========================================================================== */

.wbi-form__body {
  --wbi-form-stack: initial;
  --wbi-form-columns: var(--wbi-form-stack) minmax(0, 1fr);
  --wbi-form-place-left: var(--wbi-form-stack) auto;
  --wbi-form-place-right: var(--wbi-form-stack) auto;
  display: grid;
  grid-template-columns: var(--wbi-form-columns, minmax(0, var(--wbi-form-col-left)) minmax(0, 1fr));
  /* Fields placed in a column fill the rows from the top, whatever their
     order: the left column can be listed first and the right one after. */
  grid-auto-flow: row dense;
  column-gap: var(--wbi-form-col-gap);
  /* Rows are spaced by the fields' bottom margin: each field spans three
     rows of this grid (see below) and a gap would also split them. */
  row-gap: 0;
  align-items: start;
}

@container wbiform (max-width: 639px) {
  .wbi-form__body { --wbi-form-stack: ; }
}

.wbi-form__field--left { grid-column: var(--wbi-form-place-left, 1); }
.wbi-form__field--right { grid-column: var(--wbi-form-place-right, 2); }

.wbi-form__field--full,
.wbi-form__body > .captcha,
.wbi-form__actions { grid-column: 1 / -1; }

/* Spaced like a field: the rows have no gap of their own. */
.wbi-form .wbi-form__body > .captcha { margin-bottom: var(--wbi-form-row-gap); }

/* Wrappers of hidden fields: no box, no row. */
.wbi-form__body > div:not(.form-group) { display: none; }

/* ==========================================================================
   Fields · shared
   ========================================================================== */

.wbi-form .form-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  width: auto;
}

/* Every field spans three rows of the fields grid: label, control and
   error. As a subgrid it shares them with the field beside it, so an
   underlined field stays on the line of the box next to it whatever the
   size of the labels, and an error under one field moves neither. */
.wbi-form .wbi-form__body > .wbi-form__field {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--wbi-form-row-gap);
}

/* Without subgrid (browsers before 2023) each field keeps its own rows:
   underlined fields then line up with the bottom of the field beside them. */
@supports not (grid-template-rows: subgrid) {
  .wbi-form .wbi-form__body > .wbi-form__field--line { align-self: end; }
}

.wbi-form .wbi-form__field--full { margin-top: var(--wbi-form-full-gap); }

.wbi-form__field > .wbi-form__label { grid-row: 1; }
.wbi-form__field > .form-group-error-message { grid-row: 3; }

.wbi-form__label {
  display: block;
  margin: 0;
  padding-left: var(--wbi-form-label-indent);
  font-family: inherit;
  font-size: var(--wbi-form-label-size);
  font-weight: 400;
  /* 27px at any size up to 18px: smaller labels keep the design's rhythm. */
  line-height: max(1.5em, var(--wbi-form-base) * 1.6875);
  letter-spacing: 0;
  text-transform: none;
  color: var(--wbi-form-label-color);
}

/* "Show required asterisk" (Bricks adds .required to the label). */
.wbi-form__label.required::after {
  content: "*";
  margin-left: 0.25em;
  color: var(--wbi-form-asterisk-color, currentColor);
}

.wbi-form .wbi-form__control {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: none;
  box-shadow: none;
  font-family: inherit;
  font-size: var(--wbi-form-text-size);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--wbi-form-text-color);
  transition: box-shadow 160ms ease, background-color 160ms ease;
}

.wbi-form .wbi-form__control::placeholder {
  color: var(--wbi-form-placeholder-color);
  opacity: 1;
}

/* Error under the field, shown by the Bricks script. */
.wbi-form .form-group-error-message {
  display: none;
  grid-column: 1 / -1;
  margin: 6px 0 0;
  padding: 0 0 0 var(--wbi-form-label-indent);
  background: none;
  font-size: 0.875em;
  line-height: 1.4;
  color: var(--wbi-form-error);
}

.wbi-form .form-group-error-message.show { display: block; }

/* ==========================================================================
   Boxed fields: label on top, white box
   ========================================================================== */

.wbi-form .wbi-form__field--boxed > .wbi-form__label,
.wbi-form .wbi-form__field--choice > .wbi-form__label { margin-bottom: var(--wbi-form-label-gap); }

.wbi-form .wbi-form__field--boxed .wbi-form__control {
  grid-row: 2;
  height: var(--wbi-form-box-h);
  min-height: 0;
  padding: 0 var(--wbi-form-box-pad-x);
  background-color: var(--wbi-form-box-bg);
}

.wbi-form .wbi-form__field--boxed textarea.wbi-form__control {
  height: var(--wbi-form-textarea-h);
  min-height: var(--wbi-form-box-h);
  padding-block: 16px;
  resize: none; /* the field's Resize setting turns it on */
}

/* Browser autofill keeps the box color instead of its yellow or blue. */
.wbi-form .wbi-form__field--boxed .wbi-form__control:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 100vmax var(--wbi-form-box-bg);
  -webkit-text-fill-color: var(--wbi-form-text-color);
}

.wbi-form .wbi-form__field--boxed .wbi-form__control:focus-visible {
  box-shadow: inset 0 0 0 2px var(--wbi-form-focus);
}

.wbi-form .wbi-form__field--boxed:has(> .form-group-error-message.show) .wbi-form__control {
  box-shadow: inset 0 0 0 2px var(--wbi-form-error);
}

/* ==========================================================================
   Underlined fields: label and value on one line (selects by default)
   The line and the arrow are generated boxes of the field, placed in its
   grid: the <select> cannot hold pseudo-elements.
   ========================================================================== */

.wbi-form .wbi-form__body > .wbi-form__field--line {
  grid-template-columns: minmax(var(--wbi-form-line-label-w), max-content) minmax(0, 1fr);
  column-gap: var(--wbi-form-line-gap);
  align-items: center;
}

/* Everything on the control row; the label row stays empty. */
.wbi-form__field--line > .wbi-form__label {
  grid-row: 2;
  grid-column: 1;
}

.wbi-form .wbi-form__field--line .wbi-form__control {
  grid-row: 2;
  grid-column: 2;
  height: var(--wbi-form-box-h);
  min-height: 0;
  padding: 0 calc(var(--wbi-form-chevron-size) + 24px) 0 0;
  background: none;
  /* One line: a styleable select would wrap a long value. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* No visible label (Show labels off): the value takes the whole line. */
.wbi-form .wbi-form__field--line:not(:has(> .wbi-form__label)) .wbi-form__control {
  grid-column: 1 / -1;
  padding-left: var(--wbi-form-label-indent);
}

.wbi-form__field--line::before {
  content: "";
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: end;
  height: var(--wbi-form-line-w);
  background-color: var(--wbi-form-line-color);
  pointer-events: none;
  transition: background-color 160ms ease, height 160ms ease;
}

.wbi-form__field--line:has(select)::after {
  content: "";
  grid-row: 2;
  grid-column: 2;
  justify-self: end;
  width: var(--wbi-form-chevron-size);
  aspect-ratio: 14 / 9;
  margin-right: 16px;
  background-color: var(--wbi-form-chevron-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 7 7.5l5.5-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 7 7.5l5.5-6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  transition: rotate 200ms ease;
}

.wbi-form select.wbi-form__control { cursor: pointer; }

/* A select still on its placeholder option reads as a placeholder. */
.wbi-form select.wbi-form__control:has(option.placeholder:checked) { color: var(--wbi-form-placeholder-color); }

.wbi-form__field--line:has(.wbi-form__control:focus-visible)::before {
  height: calc(var(--wbi-form-line-w) + 1px);
  background-color: var(--wbi-form-focus);
}

.wbi-form__field--line:has(> .form-group-error-message.show)::before {
  background-color: var(--wbi-form-error);
}

/* The open list, where the browser lets it be styled (Chrome and Edge 135+).
   Elsewhere it is the system list, as with any <select>. */
@supports (appearance: base-select) {
  .wbi-form__field--line select.wbi-form__control,
  .wbi-form__field--line select.wbi-form__control::picker(select) {
    appearance: base-select;
  }

  .wbi-form__field--line select.wbi-form__control {
    display: flex;
    align-items: center;
  }

  .wbi-form__field--line select.wbi-form__control::picker-icon { display: none; }

  .wbi-form__field--line select.wbi-form__control::picker(select) {
    margin-block: 8px;
    padding: 6px;
    border: 0;
    border-radius: 10px;
    background-color: var(--wbi-form-picker-bg);
    box-shadow: 0 18px 40px -12px rgba(13, 17, 21, 0.35), 0 0 0 1px rgba(13, 17, 21, 0.06);
    color: var(--wbi-form-text-color);
    font-family: inherit;
  }

  /* The size comes from the select: the token is in em and would shrink
     again inside it. */
  .wbi-form__field--line select.wbi-form__control option {
    padding: 10px 14px;
    border-radius: 6px;
    line-height: 1.4;
    cursor: pointer;
  }

  .wbi-form__field--line select.wbi-form__control option:is(:hover, :focus-visible) {
    outline: none;
    background-color: var(--wbi-form-option-hover-bg);
  }

  .wbi-form__field--line select.wbi-form__control option:checked { font-weight: 600; }

  .wbi-form__field--line select.wbi-form__control option::checkmark { color: var(--wbi-form-focus); }
}

@supports selector(:open) {
  .wbi-form__field--line:has(select:open)::after { rotate: 180deg; }
}

/* ==========================================================================
   Checkboxes and radios
   ========================================================================== */

.wbi-form__field--choice .options-wrapper {
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0 0 0 var(--wbi-form-label-indent);
  list-style: none;
}

.wbi-form__field--choice li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.wbi-form .wbi-form__field--choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  accent-color: var(--wbi-form-focus);
}

.wbi-form__field--choice li label {
  margin: 0;
  font-size: var(--wbi-form-text-size);
  line-height: 1.5;
  color: var(--wbi-form-text-color);
  cursor: pointer;
}

/* ==========================================================================
   Submit button: the gradient-bordered pill (.text) and the arrow circle
   (::after), with the arrow on top (::before).
   Gradient borders: the gradient paints the whole border box and a layer
   over it fills the inside with --wbi-form-btn-fill, so a single
   background-image (the one the Bricks gradient control writes) is enough.
   The pill's fill is its ::after; the circle, a pseudo-element itself, has
   it in the spinner's box (.loading), which the Bricks form renders in every
   submit button. Not an inset box-shadow: Safari 26 has painted it over the
   whole button, or not at all (WebKit bugs 298341 and 300477), hiding the
   gradient or flooding the button with it.
   ========================================================================== */

/* Two classes: .wbi-form .form-group resets the margins of every field. */
.wbi-form .wbi-form__actions {
  display: flex;
  justify-self: var(--wbi-form-actions-justify);
  margin: calc(var(--wbi-form-actions-gap) - var(--wbi-form-row-gap)) var(--wbi-form-actions-inset) 0;
  padding: 0;
}

.wbi-form .wbi-form__submit {
  --wbi-form-circle-box: calc(var(--wbi-form-circle) + 2 * var(--wbi-form-btn-border-w));
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: var(--wbi-form-circle-box);
  margin: 0;
  padding: 0 calc(var(--wbi-form-circle-box) - var(--wbi-form-circle-overlap)) 0 0;
  border: 0;
  border-radius: var(--wbi-form-btn-radius);
  background: none;
  box-shadow: none;
  font-family: inherit;
  font-size: 1em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wbi-form-btn-color);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* !important: "Apply to: Text" in the Button border gradient control clips
   the background to the label and makes the label transparent. */
.wbi-form__submit .text,
.wbi-form__submit::after {
  border: var(--wbi-form-btn-border-w) solid transparent;
  background-color: transparent;
  background-image: var(--wbi-form-btn-border);
  background-origin: border-box;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: initial !important;
}

/* Its own stacking context keeps the ::before and the ::after below under
   the label; positioned, it holds them. */
.wbi-form__submit .text {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--wbi-form-btn-h) + 2 * var(--wbi-form-btn-border-w));
  padding: 0 var(--wbi-form-btn-pad-x);
  border-radius: var(--wbi-form-btn-radius);
  font-size: 0.875em;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 1;
}

/* The pill's fill covers its border box and paints inside a padding as wide
   as the border, so its edge meets the inner edge of the border and its
   corners follow the inner curve at any radius. Padding, not a transparent
   border: browsers round a border width to whole device pixels and a margin
   not, so at 125% or 175% the fill would cover half a pixel of the border.
   Longhands rather than `inset`, which Safari only reads from 14.1. A
   cleared width comes as a unitless 0 that voids the calc(): the margin
   falls back to 0, which is then the right value. */
.wbi-form__submit .text::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: calc(var(--wbi-form-btn-border-w) * -1);
  padding: var(--wbi-form-btn-border-w);
  border-radius: inherit;
  background-color: var(--wbi-form-btn-fill);
  background-clip: content-box;
  transition: background-color 200ms ease;
}

/* "Apply to: Overlay": Bricks paints the gradient in a ::before of the
   label (content, position and the four sides at 0), over the text.
   Spread over the border box and under the fill, it draws the same border.
   Never there otherwise: nothing here gives it content. */
.wbi-form__submit .text::before {
  z-index: -2;
  margin: calc(var(--wbi-form-btn-border-w) * -1);
  border-radius: inherit;
}

/* !important: Overlay sets `position: relative` on this ::after too. The
   gradient it then writes for it, in `::after::before`, is not a valid
   selector, so with Overlay the circle keeps --wbi-form-btn-border. */
.wbi-form__submit::after {
  content: "";
  position: absolute !important;
  top: 50%;
  right: 0;
  z-index: 1;
  width: var(--wbi-form-circle-box);
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
}

.wbi-form__submit::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 3;
  width: var(--wbi-form-circle-box);
  aspect-ratio: 1;
  translate: 0 -50%;
  background-color: var(--wbi-form-arrow-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h19.5M16 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / var(--wbi-form-arrow-size) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h19.5M16 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / var(--wbi-form-arrow-size) no-repeat;
  transition: translate 220ms var(--wbi-form-ease), opacity 160ms ease;
}

.wbi-form__submit:hover .text::after,
.wbi-form__submit:hover .loading {
  background-color: color-mix(in srgb, var(--wbi-form-btn-fill) 86%, #FFFFFF);
}

.wbi-form__submit:hover::before { translate: 3px -50%; }

.wbi-form .wbi-form__submit:focus-visible {
  outline: 2px solid var(--wbi-form-focus);
  outline-offset: 4px;
}

/* The circle's fill, on the circle with the same transparent border, between
   its gradient (z-index 1) and the arrow (3). Sending, the arrow turns into
   the Bricks spinner it holds. */
.wbi-form__submit .loading {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--wbi-form-circle-box);
  aspect-ratio: 1;
  translate: 0 -50%;
  border: var(--wbi-form-btn-border-w) solid transparent;
  border-radius: 50%;
  background-color: var(--wbi-form-btn-fill);
  background-clip: padding-box;
  color: var(--wbi-form-arrow-color);
  pointer-events: none;
  transition: background-color 200ms ease;
}

.wbi-form__submit .loading svg {
  width: 22px;
  height: 22px;
  opacity: 0;
}

.wbi-form__submit .loading g { stroke-width: 2; }

.wbi-form .wbi-form__submit.sending { cursor: progress; }
.wbi-form__submit.sending::before { opacity: 0; }
.wbi-form__submit.sending .loading svg { opacity: 1; }
.wbi-form__submit.sending .loading svg { animation: wbi-form-spin 0.9s linear infinite; }

@keyframes wbi-form-spin {
  to { rotate: 1turn; }
}

/* Without the circle the spinner sits on the button. A button with no text
   keeps its circle: it would be left with nothing to see or click. */
.wbi-form--no-circle .wbi-form__submit:has(.text) { padding-right: 0; }

.wbi-form--no-circle .wbi-form__submit:has(.text)::before,
.wbi-form--no-circle .wbi-form__submit:has(.text)::after { content: none; }

.wbi-form--no-circle .wbi-form__submit:has(.text) .loading {
  right: 50%;
  translate: 50% -50%;
  background-color: transparent;
}

.wbi-form--no-circle .wbi-form__submit.sending .text { color: transparent; }

/* ==========================================================================
   Notice after sending (appended by the Bricks script) and captchas
   ========================================================================== */

.wbi-form > .message {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 14px 18px;
  border-radius: 8px;
  background-color: var(--wbi-form-box-bg);
  font-size: 1em;
  line-height: 1.5;
  color: var(--wbi-form-text-color);
  transition: opacity 200ms ease;
}

.wbi-form > .message.success {
  background-color: var(--wbi-form-success-bg);
  color: var(--wbi-form-success-color);
}

.wbi-form > .message.error {
  background-color: var(--wbi-form-error-bg);
  color: var(--wbi-form-error-color);
}

.wbi-form > .message.closing { opacity: 0; }
.wbi-form > .message .text { padding: 0; }

.wbi-form > .message .close {
  all: unset;
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.wbi-form > .message .close svg {
  width: 12px;
  height: 12px;
}

.wbi-form .recaptcha-hidden,
.wbi-form :is(.recaptcha-error, .hcaptcha-error) { display: none; }

.wbi-form :is(.recaptcha-error, .hcaptcha-error).show { display: block; }

/* The reCAPTCHA v3 badge Google adds to the page, hidden as with the Bricks
   Form: the Bricks sheet that hides it only loads for the native element. */
.grecaptcha-badge { visibility: hidden; }

/* ==========================================================================
   Floating shapes
   It may only contain shapes: the per-item CSS Bricks generates targets
   `.wbi-form__shape:nth-child(n)`, and any other child would misalign it.
   `content-visibility: auto` lets the browser skip the layer, and its
   animation, while the card is off screen.
   ========================================================================== */

.wbi-form__shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  content-visibility: auto;
}

/* !important: the "Apply to" of the shape gradient (Bricks applies it to
   repeater fields too). Overlay sets `position: relative`, which would drop
   the shape into the flow, and paints the gradient in a ::before (see
   below); Text clips the background to a text the shape does not have. */
.wbi-form__shape {
  position: absolute !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  left: var(--wbi-form-shape-x, 50%);
  top: var(--wbi-form-shape-y, 50%);
  width: var(--wbi-form-shape-w, 24px);
  height: var(--wbi-form-shape-h, 24px);
  border-radius: var(--wbi-form-shape-r, 2px);
  background-color: var(--wbi-form-shape-color, #0294D4);
  box-shadow: var(--wbi-form-shape-shadow);
  /* Negative delay: each shape starts at a different point of its cycle,
     so they never all move at once. */
  animation:
    wbi-form-float
    calc(var(--wbi-form-shape-dur, 10s) / var(--wbi-form-speed, 1))
    var(--wbi-form-ease)
    calc(var(--wbi-form-shape-delay, 0s) * -1)
    infinite alternate both;
}

/* Solid fill: cancels the gradient. Bricks keeps emitting the gradient of a
   shape switched to solid (the field is only hidden by `required`), and it
   does so with an id selector, #brxe-x .wbi-form__shape:nth-child(n), which
   no class selector can beat. Hence the !important. */
.wbi-form__shape[data-fill="solid"] {
  background-image: none !important;
}

/* The gradient of "Apply to: Overlay": over the whole shape, with its
   corners, and never on a solid one. */
.wbi-form__shape::before {
  border-radius: inherit;
}

.wbi-form__shape[data-fill="solid"]::before {
  display: none;
}

/* Three-point drift, not two: with `alternate` the path is a small
   irregular curve instead of a metronome swing. */
@keyframes wbi-form-float {
  from {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate:
      calc(var(--wbi-form-shape-amp, 10px) * var(--wbi-form-motion, 1) * 0.55)
      calc(var(--wbi-form-shape-amp, 10px) * var(--wbi-form-motion, 1) * -1);
    rotate: calc(var(--wbi-form-shape-rot, 4deg) * var(--wbi-form-motion, 1));
  }
  to {
    translate:
      calc(var(--wbi-form-shape-amp, 10px) * var(--wbi-form-motion, 1) * -0.45)
      calc(var(--wbi-form-shape-amp, 10px) * var(--wbi-form-motion, 1) * -0.3);
    rotate: calc(var(--wbi-form-shape-rot, 4deg) * var(--wbi-form-motion, 1) * -0.5);
  }
}

.wbi-form--static .wbi-form__shape { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .wbi-form__shape,
  .wbi-form__submit.sending .loading svg { animation: none; }

  .wbi-form__submit::before { transition: none; }
}

/* ==========================================================================
   Narrow card: these rules target descendants, never .wbi-form: an element
   is not reached by the container query it defines itself.
   ========================================================================== */

@container wbiform (max-width: 639px) {
  /* Each shape uses its mobile position and size when it has them;
     otherwise it keeps the desktop ones. */
  .wbi-form__shape {
    left: var(--wbi-form-shape-x-m, var(--wbi-form-shape-x, 50%));
    top: var(--wbi-form-shape-y-m, var(--wbi-form-shape-y, 50%));
    width: var(--wbi-form-shape-w-m, var(--wbi-form-shape-w, 24px));
    height: var(--wbi-form-shape-h-m, var(--wbi-form-shape-h, 24px));
  }

  .wbi-form__shape[data-mobile="hide"] { display: none; }
}