/* 
  Fix for responsive layout on small screens (≤600px):
  - Ensures buttons inside .card-footer take full width for better tap targets and alignment.
  - Overrides the default max-width (162px) set on .card.password button[type="submit"] to allow it to expand to full width.
  - Improves usability and visual consistency, especially when zoomed in on mobile browsers like Chrome on iOS.
*/
@media screen and (max-width: 600px) {
  .card-footer {
    width: 100%;
    display: block;
  }

  .card-footer a,
  .card-footer button[type="submit"] {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .card.password button[type="submit"] {
    max-width: 100% !important;
  }

  select#country {
    max-height: 4rem;
    margin-bottom: 1rem;
  }

  .card-footer a {
    margin-top: 2rem;
  }
}

/* VAC layout: stack primary CTA above secondary link so DOM order matches visual order (keeps tab order correct). */
.card-footer.vac-stack {
  flex-direction: column;
}

/*
 * Anti-Automation PoW challenge overlay.
 * While a challenge is up it takes over the whole card: an opaque layer anchored to the
 * active card that covers the form, rather than an inline block growing below it. Making
 * the host card the positioning context (position: relative) plus anchoring the overlay to
 * all four edges gives it a definite box, so the challenge iframe fills the card from the
 * moment it mounts. The iframe is then measured against its own content (aa-client
 * sizeToContent): when the challenge is taller than the card — large text, 200% zoom, a
 * 320px reflow — the iframe grows past the box and overflow: auto lets the overlay scroll
 * rather than clipping it. contain: layout isolates the challenge's internal reflows from
 * the rest of the page (harmless where unsupported, e.g. IE11). Kept hidden until a real
 * challenge renders so a PASS or a fail-open skip never flashes an empty overlay.
 *
 * Scoped to the two cards that actually host the overlay (email-verification under VAC,
 * password otherwise) rather than every .card: a blanket `.card { position: relative }`
 * would make each card the containing block for its own absolutely-positioned descendants.
 * The loading card's `.sign-up-loading .processing` spinner is `position: absolute; top: 40%`
 * below 600px, so a blanket rule reparented it onto the collapsed loading card and dropped
 * it from mid-viewport to a few px down a short card (desktop resets it to position: initial,
 * so only mobile regressed).
 */
.card.email-verification,
.card.password {
  position: relative;
}

.pow-challenge {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  /* Top-align, don't center: the iframe is sized to at least the card height
     (Math.max(content, clientHeight) in aa-client), so it is never shorter than
     this overlay — centering would be a no-op on short content but would push the
     top of a taller-than-card challenge (large text / 200% zoom / 320px reflow)
     above the scroll origin, where overflow: auto cannot reach it. */
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  background-color: var(--surfaceBase);
  border-radius: inherit;
  contain: layout;
}

.pow-challenge.hidden {
  display: none;
}

/* Screen-reader-only announcement inside the overlay. Taken out of flow (position: absolute)
   so it never occupies a slot in the overlay's flex layout, and clipped to a 1px box rather
   than display:none / visibility:hidden — both of which would drop it from the accessibility
   tree and stop the role="alert" region from announcing. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Loading spinner styles */
.sign-up-loading .processing {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
}

.sign-up-loading .spinner {
  margin-top: 1.5rem;
  display: block;
  height: 2rem;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 600px) {
  .sign-up-loading .processing {
    position: initial;
    top: initial;
  }
}