/* Keeps the public home clean and only shows auth screens after Join Now or Log In. */
.phone.locked:not(.auth-modal-open):not(.signup-success-open) #authPanel > .section-title.compact,
.phone.locked:not(.auth-modal-open):not(.signup-success-open) #authPanel > .live-proof,
.phone.locked:not(.auth-modal-open):not(.signup-success-open) #authPanel > .login-note,
.phone.locked:not(.auth-modal-open):not(.signup-success-open) #authPanel > .auth-forms,
.phone.locked:not(.auth-modal-open):not(.signup-success-open) #authForms,
.phone.locked:not(.auth-modal-open):not(.signup-success-open) #authPanel > .forgot-form,
.phone.locked:not(.auth-modal-open):not(.signup-success-open) #authPanel > .account-card {
  display: none !important;
}

.phone.locked.auth-modal-open #authPanel > .login-splash,
.phone.locked.auth-modal-open #authPanel > .section-title.compact,
.phone.locked.auth-modal-open #authPanel > .live-proof,
.phone.locked.auth-modal-open #authPanel > .login-note,
.phone.locked.auth-modal-open #authPanel > .forgot-form,
.phone.locked.auth-modal-open #authPanel > .account-card {
  display: none !important;
}

.phone.locked.auth-modal-open #authForms {
  display: grid !important;
  grid-template-columns: minmax(0, 430px) !important;
  align-content: start !important;
  justify-content: center !important;
  position: fixed !important;
  inset: 0 !important;
  left: 50% !important;
  z-index: 10020 !important;
  width: min(900px, 100vw) !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 18px 14px max(42px, env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-padding: 24px !important;
  -webkit-overflow-scrolling: touch !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 78% 3%, rgba(255, 20, 147, 0.22), transparent 15rem),
    radial-gradient(circle at 50% -4%, rgba(255, 215, 0, 0.15), transparent 12rem),
    linear-gradient(145deg, rgba(255, 20, 147, 0.055), transparent 34%),
    #050505 !important;
  box-shadow: none !important;
}

.phone.locked.auth-modal-open #loginForm,
.phone.locked.auth-modal-open #signupForm {
  display: none !important;
}

.phone.locked.auth-modal-open.show-login #loginForm,
.phone.locked.auth-modal-open.show-signup #signupForm {
  display: grid !important;
  gap: 12px !important;
  align-self: start !important;
  width: min(100%, 430px) !important;
  max-height: none !important;
  animation: authCardIn 360ms cubic-bezier(0.2, 0.85, 0.2, 1) both !important;
}

.phone.locked.auth-modal-open.show-login #loginForm {
  position: relative !important;
  max-width: 410px !important;
  margin: 0 auto !important;
  padding: 0 14px 16px !important;
  border: 1px solid rgba(255, 215, 0, 0.34) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    rgba(0, 0, 0, 0.86) !important;
  box-shadow:
    0 0 0 1px rgba(255, 20, 147, 0.12),
    0 22px 72px rgba(0, 0, 0, 0.75),
    0 0 34px rgba(255, 20, 147, 0.16) !important;
  overflow: hidden !important;
}

.phone.locked.auth-modal-open.show-login #loginForm {
  gap: 8px !important;
}

.phone.locked.auth-modal-open.show-login #loginForm input {
  min-height: 44px !important;
}

.phone.locked.auth-modal-open.show-login #loginForm .gold-button {
  min-height: 44px !important;
}

.phone.locked.auth-modal-open.show-signup #signupForm {
  position: relative !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  padding: 18px 16px 20px !important;
  border: 1px solid rgba(255, 20, 147, 0.34) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 86% 0%, rgba(255, 20, 147, 0.18), transparent 9rem),
    radial-gradient(circle at 12% 0%, rgba(255, 215, 0, 0.12), transparent 8rem),
    rgba(0, 0, 0, 0.86) !important;
  box-shadow:
    0 0 0 1px rgba(245, 179, 47, 0.14),
    0 24px 78px rgba(0, 0, 0, 0.78),
    0 0 38px rgba(255, 20, 147, 0.18) !important;
}

.phone.locked.auth-modal-open #loginForm input,
.phone.locked.auth-modal-open #signupForm input {
  min-height: 52px !important;
  scroll-margin-top: 28px !important;
}

.phone.locked.auth-modal-open.show-login #loginForm::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 180px !important;
  pointer-events: none !important;
  background:
    linear-gradient(120deg, rgba(255, 215, 0, 0.16), transparent 40%),
    radial-gradient(circle at 82% 12%, rgba(255, 20, 147, 0.24), transparent 8rem),
    url("./assets/pride-logo-transparent.png") right 14px top 14px / 130px auto no-repeat !important;
  opacity: 0.32 !important;
}

.phone.locked.auth-modal-open.show-login #loginForm > *,
.phone.locked.auth-modal-open.show-signup #signupForm > * {
  position: relative !important;
  z-index: 1 !important;
}

.phone.locked.auth-modal-open .tab-row,
.phone.locked.signup-success-open .tab-row {
  display: none !important;
}

@media (min-width: 760px) {
  .phone.locked.auth-modal-open #authForms {
    align-content: start !important;
    padding-top: 34px !important;
  }
}

@keyframes authCardIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.975);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.phone.locked.auth-modal-open.show-signup #signupForm,
.phone.locked.auth-modal-open.show-login #loginForm {
  width: min(100%, 292px) !important;
  max-width: 292px !important;
  border-color: rgba(246, 215, 122, 0.62) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0)),
    rgba(3, 0, 5, 0.9) !important;
}

.phone.locked.auth-modal-open.show-signup #signupForm::before,
.phone.locked.auth-modal-open.show-login #loginForm::before {
  display: none !important;
  content: none !important;
}

.phone.locked.auth-modal-open.show-signup #signupForm .runway-field input,
.phone.locked.auth-modal-open.show-login #loginForm .runway-field input {
  min-height: 43px !important;
  padding: 0 42px 0 56px !important;
  border-color: rgba(255, 196, 219, 0.56) !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.58) !important;
}

.phone.locked.auth-modal-open.show-signup #signupForm .runway-submit,
.phone.locked.auth-modal-open.show-login #loginForm .runway-submit {
  min-height: 52px !important;
  color: #0b0304 !important;
  background: linear-gradient(93deg, #f6d77a 0%, #fff0a6 42%, #ff36bd 100%) !important;
  font-family: "Cinzel", Georgia, serif !important;
}