/* 
  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;
  }
}

/* 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;
  }
}