/**
 * LoginRadius auth styling.
 *
 * Deliberately thin: the SDK renders and styles its own widgets, and its stylesheet
 * owns every class beginning with loginradius-, so our hooks use a fos-auth- prefix
 * to stay out of its way. Reusing .loginradius-modal previously inherited the SDK's
 * `inset: 0` and forced the modal to a fixed height.
 */
.fos-auth-page {
  padding: 48px 0 80px;
  min-height: 50vh;
}

.fos-auth-notice {
  padding: 16px 20px;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  background: #F1F1F1;
  margin-bottom: 24px;
}

.fos-auth-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

/**
 * Sitewide sign in modal.
 *
 * The container only centres the widget and draws the backdrop; the SDK card is the
 * visible surface. Scrolling happens on the container, so it only appears when the
 * widget is taller than the viewport.
 */
.fos-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow: auto;
}
.fos-auth-modal[hidden] {
  display: none;
}
.fos-auth-modal__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
}
.fos-auth-modal__content {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: auto;
}
.fos-auth-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 8px;
  background: transparent;
  border: 0;
  line-height: 0;
  cursor: pointer;
}
.fos-auth-modal__close:hover, .fos-auth-modal__close:focus {
  opacity: 0.7;
}

.fos-auth-modal-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .fos-auth-page {
    padding: 32px 0 56px;
  }
  .fos-auth-modal {
    padding: 12px;
  }
  .fos-auth-modal__content {
    max-width: none;
  }
}