.modal-sm {
  @apply max-w-lg;
}
.modal-md {
  @apply max-w-2xl;
}
.modal-lg {
  @apply max-w-4xl;
}
.modal-xl {
  @apply max-w-6xl;
}

.login-tabs .tab-button {
  @apply bg-brand-primary hover:opacity-75 transition-colors text-white;
  drop-shadow: rgba(0, 0, 0, 0.1) 0px -3px 4px;
}

.login-tabs .tab-button.active {
  @apply text-brand-primary bg-white !opacity-100;
}

.login-tabs .tab-content {
  display: none;
}

.login-tabs .tab-content.active {
  display: block;
}

/* Typed input text must contrast with the white form background; a host
   theme's global input rule can set both text and placeholder to a medium
   gray with !important, so this needs !important too. */
.login-modal-component input {
  @apply !text-neutral-dark-gray;
}

/* Quick Login honeypot: kept in the DOM (and given an accessible label) but
   pushed off-screen so real users never see or tab into it. Bots that auto-fill
   every field trip it and get a silent fake success. */
.login-modal-component .ql-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}