/* Form button states: Default -> Loading (masked conic spinner) -> Success "Thank you" / Error.
   Numbers are the source's (a Framer form button): every state change cross-fades in .2s cubic-bezier(.44,0,.56,1);
   the spinner is a 20px ring (2px wide) cut out of a conic gradient that turns 360deg every 1s, linear. */
.fbs-btn {
  --fbs-dur: .2s;
  --fbs-ease: cubic-bezier(.44, 0, .56, 1);
  --fbs-h: 58px;
  --fbs-radius: 10px;
  --fbs-bg: rgb(98, 101, 78);
  --fbs-bg-hover: rgba(74, 77, 58, .85);
  --fbs-bg-press: rgb(74, 77, 58);
  --fbs-bg-success: rgb(134, 138, 110);
  --fbs-bg-error: rgba(255, 34, 68, .15);
  --fbs-ink: #fff;
  --fbs-ink-error: rgb(255, 34, 68);
  --fbs-disabled: .5;              /* opacity of the Disabled state */
  --fbs-spin-size: 20px;
  --fbs-spin-w: 2px;               /* ring thickness */
  --fbs-spin-dur: 1s;
  --fbs-spin-color: #fff;
  --fbs-spin-tail: 7.2deg;         /* conic: clear until here ... */
  --fbs-spin-head: 342deg;         /* ... solid from here to the head */
  all: unset; box-sizing: border-box; position: relative; cursor: pointer;
  display: flex; align-items: center; justify-content: center; width: 100%; height: var(--fbs-h);
  border-radius: var(--fbs-radius); background-color: var(--fbs-bg); color: var(--fbs-ink); text-transform: none; letter-spacing: normal; text-align: center;
  font: 600 14px/1 ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  transition: background-color var(--fbs-dur) var(--fbs-ease), opacity var(--fbs-dur) var(--fbs-ease), color var(--fbs-dur) var(--fbs-ease);
  -webkit-tap-highlight-color: transparent;
}
.fbs-btn:focus-visible { outline: 2px solid var(--fbs-bg); outline-offset: 3px; }
.fbs-btn__label { white-space: pre; user-select: none; }
@media (hover: hover) { .fbs-btn:not([data-state]):hover, .fbs-btn[data-state="default"]:hover { background-color: var(--fbs-bg-hover); } }
.fbs-btn:not([data-state]):active, .fbs-btn[data-state="default"]:active { background-color: var(--fbs-bg-press); }
.fbs-btn:is([data-state="loading"], [data-state="success"], [data-state="error"], [data-state="disabled"]) { cursor: default; }
.fbs-btn[data-state="error"] { cursor: pointer; } /* a retry is allowed */
.fbs-btn[data-state="success"] { background-color: var(--fbs-bg-success); }
.fbs-btn[data-state="error"] { background-color: var(--fbs-bg-error); color: var(--fbs-ink-error); }
.fbs-btn[data-state="disabled"] { opacity: var(--fbs-disabled); }

/* spinner: only exists visually while loading; the label keeps its box so the button never changes size */
.fbs-btn__spin {
  position: absolute; left: 50%; top: 50%; width: var(--fbs-spin-size); height: var(--fbs-spin-size);
  margin: calc(var(--fbs-spin-size) / -2) 0 0 calc(var(--fbs-spin-size) / -2);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--fbs-spin-w) - .5px), #000 calc(100% - var(--fbs-spin-w)));
          mask: radial-gradient(farthest-side, #0000 calc(100% - var(--fbs-spin-w) - .5px), #000 calc(100% - var(--fbs-spin-w)));
  display: none; pointer-events: none;
}
.fbs-btn__spin > span {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent var(--fbs-spin-tail), var(--fbs-spin-color) var(--fbs-spin-head));
  animation: fbs-turn var(--fbs-spin-dur) linear infinite;
}
.fbs-btn__spin > span::after { /* round cap on the head of the arc */
  content: ""; position: absolute; left: 50%; top: 0; width: var(--fbs-spin-w); height: var(--fbs-spin-w);
  transform: translateX(-50%); border-radius: 50%; background: var(--fbs-spin-color);
}
.fbs-btn[data-state="loading"] .fbs-btn__spin { display: block; }
.fbs-btn[data-state="loading"] .fbs-btn__label { visibility: hidden; }
@keyframes fbs-turn { to { transform: rotate(360deg); } }

.fbs-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Optional "sent" end state (form[data-fbs-sent], off by default; Sadewa's form.sent + .done-msg): after Success the
   form's other children (fields, the button; not [data-fbs-keep]) dim to .4 over .3s and stop taking clicks, and a
   mono "done" line with a square marker appears. */
form.fbs-sent {
  --fbs-sent-dim: .4;              /* opacity of the dimmed fields + button */
  --fbs-sent-dur: .3s;
  --fbs-sent-ease: ease;
}
form.fbs-sent > :not(.fbs-done):not(.fbs-status):not([data-fbs-keep]) {
  opacity: var(--fbs-sent-dim); pointer-events: none;
  transition: opacity var(--fbs-sent-dur) var(--fbs-sent-ease), background-color var(--fbs-dur, .2s) var(--fbs-ease, ease), color var(--fbs-dur, .2s) var(--fbs-ease, ease);
}
.fbs-done {
  --fbs-done-ink: #131313;
  --fbs-done-mark: #98fe00;        /* the square's fill; its 3px ring is the ink */
  --fbs-done-size: 14px;
  --fbs-done-lh: 20px;             /* line height; the square centres on the first line */
  margin: 0; display: flex; gap: 8px; align-items: flex-start; color: var(--fbs-done-ink);
  font: 400 14px/var(--fbs-done-lh) ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: 0;
}
.fbs-done::before {
  content: ""; flex: none; width: var(--fbs-done-size); height: var(--fbs-done-size); margin-top: calc((var(--fbs-done-lh) - var(--fbs-done-size)) / 2);
  background: var(--fbs-done-mark); box-shadow: inset 0 0 0 3px var(--fbs-done-ink);
}
.fbs-done:focus { outline: none; }
.fbs-done[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  form.fbs-sent > :not(.fbs-done):not(.fbs-status):not([data-fbs-keep]) { transition-duration: 0s; }
  .fbs-btn { transition-duration: 0s; }
  .fbs-btn__spin > span { animation-duration: 2.4s; } /* still turns (it is the only sign of progress), slower */
}