.auth-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem;
  /* we need this padding since the footer will hide content at the bottom of the container */
  padding-bottom: 5.5rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .auth-container {
    padding: 1.5rem;
    padding-bottom: 5.5rem;
    min-height: 100vh;
    justify-content: center;
  }

  /* Ensure the card takes full width on mobile */
  .ory_elements__card__1t5ly150 {
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    border: none;
    background: transparent;
  }

  /* Adjust logo size for mobile */
  .ory_elements__card__1t5ly152 {
    max-height: 5rem;
    margin-bottom: 2rem;
  }

  /* Full width inputs on mobile */
  .ory_elements__input_field__1tgfa2l1 {
    width: 100%;
    font-size: 16px; /* Prevent zoom on iOS */
  }

  /* Full width buttons */
  .ory_elements__button__xkj8ku0,
  .ory_elements__button_social__16pmekl0 {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 16px;
  }

  /* Adjust form spacing */
  .ory_elements__form__1dhzi910 {
    gap: 1rem;
  }

  /* Better spacing for form groups */
  .ory_elements__node_container__14pglf50 {
    margin-bottom: 1rem;
  }

  /* Adjust message spacing */
  .ory_elements__message_container__1c29evy0 {
    margin-bottom: 1.5rem;
  }

  /* Typography adjustments */
  .ory_elements__heading__1xg7g3p1 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  /* Labels and links */
  .ory_elements__label__11i7h5q0 {
    font-size: 14px;
    margin-bottom: 0.5rem;
  }

  .ory_elements__button_link__w27ftz0 {
    font-size: 14px;
    padding: 0.5rem 0;
    display: inline-block;
  }

  /* Social buttons container */
  .ory_elements__node_container_group_oidc__iq0ves2,
  .ory_elements__node_container_group_default__iq0ves1 {
    width: 100%;
  }

  /* Better footer spacing on mobile */
  .footer-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}