/*
  Webflow code components mount inside a Shadow Root, and Webflow's host-page
  `* { box-sizing: border-box }` reset does NOT cross the shadow boundary
  (box-sizing isn't an inherited property). Re-apply it on the widget host.
  See https://developers.webflow.com/code-components/styling-components
*/
.axiom,
.axiom *,
.axiom *::before,
.axiom *::after {
  box-sizing: border-box;
}

.axiom button:not(:disabled) {
  cursor: pointer;
}

/*
  Axiom Button fix
*/
.axiom [class*='ui-button-wrapper'] > [class*='ui-button-surface'] {
  justify-content: center;
}

/*
  Outer wrapper: centers the card and clamps width so the widget never
  expands past the card even when dropped into a wide Webflow body.
  Using a real wrapper (instead of relying on Card's `maxWidth` prop) gives
  us specificity that survives Webflow's global CSS.
*/
.axiom .signup-card-wrapper {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}

/*
  Force every descendant inside the widget to use `border-box` and opt into
  shrinking. Two issues this fixes:
  1. Axiom's `<Box p="xl">` renders as `style="padding: 32px; width: 100%"`.
     Without a guaranteed `box-sizing: border-box`, the content-box width is
     100% + 64px of padding, blowing past the wrapper's max-width.
  2. Flex children default to `min-width: auto`, which lets long content
     push the parent wider than its declared max-width.

  Webflow's host page sets `* { box-sizing: border-box }`, but that rule
  only applies to elements without a more specific override; since the
  widget runs inside a federated bundle some hosts may scope or strip the
  reset. Re-asserting it here makes the layout deterministic.
*/
.signup-card-wrapper,
.signup-card-wrapper * {
  box-sizing: border-box;
  min-width: 0;
}

/*
  Buttons declared with style={{ width: '100%' }} measure against their
  parent's content box. Make sure the parent form/box doesn't itself stretch
  past the card.
*/
.axiom .signup-card form {
  width: 100%;
}

/*
  Login banner sits flush against the bottom of the SignupCard, picking up
  the card's bottom corner radius (spacing-sm = 12px). The border lifts off
  the card's own border on the bottom edge, so we suppress it there.
*/
.axiom .login-strip {
  background-color: var(--surface-additional-purple);
  border-radius: 0 0 var(--spacing-sm) var(--spacing-sm);
}

.signup-error-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(220, 38, 38, 0.25);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
  animation: signup-error-toast-in 180ms ease-out;
}

@keyframes signup-error-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}