/* Shared by the sign-in, signup, onboarding, and plan access dialogs. */
#slyncAuthModal,
#slyncBizModal,
.custom-modal-overlay {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

#slyncAuthModal .slync-auth-card,
#slyncAuthModal .auth-modal-card,
#slyncBizModal .slync-biz-card,
.custom-modal-card {
  min-width: 0;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}

#slyncAuthModal input,
#slyncBizModal input,
#slyncBizModal select {
  min-width: 0;
  min-height: 44px;
  font-size: 16px;
}

#slyncAuthModal button,
#slyncBizModal button,
.custom-modal-card button,
#slyncPlanGate button,
#slyncPlanGate a {
  min-height: 44px;
  white-space: normal;
}

#slyncAuthModal .slync-auth-close,
#slyncAuthModal .auth-modal-close,
#slyncBizModal .slync-biz-close {
  position: sticky;
  top: 0;
  right: auto;
  float: right;
  margin: -18px -12px 0 0;
  z-index: 2;
  background: #fbf7f0;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

#slyncPlanGate {
  overflow-y: auto;
  overflow-wrap: anywhere;
  max-height: 100dvh;
  box-sizing: border-box;
}

#slyncAuthModal .slync-auth-link,
#slyncAuthModal .auth-toggle-link { display: inline-block; min-height: 44px; padding-block: 10px; }
#slyncBizModal .slync-biz-skip { min-height: 44px; display: grid; place-items: center; }

@media (max-width: 480px) {
  #slyncAuthModal .slync-auth-card,
  #slyncAuthModal .auth-modal-card,
  #slyncBizModal .slync-biz-card,
  .custom-modal-card {
    padding: 24px 18px;
    border-radius: 14px;
    box-shadow: 3px 3px 0 #15130f;
  }
  #slyncAuthModal h2,
  #slyncBizModal h2 { padding-inline: 20px; }
  #slyncBizModal .slync-biz-grid { grid-template-columns: minmax(0, 1fr); }
  #slyncBizModal .slync-biz-full { grid-column: auto; }
}

@media (max-height: 520px) {
  #slyncAuthModal,
  #slyncBizModal,
  .custom-modal-overlay { align-items: flex-start; }
}