/* Overrides to fix login/signup misalignments and input consistency */

/* Align signup grid with login */
.screen.signup { grid-template-columns: 50% 50% !important; }

/* Ensure signup also collapses on phones and hides side copy */
@media (max-width: 780px) {
  /* Collapse ALL auth screens to single column on phones */
  .auth-card .rail { width: 100% !important; height: auto !important; transform: none !important; }
  .auth-card .screen { display: block !important; grid-template-columns: 1fr !important; }
  /* Hide any side copy region definitively */
  .auth-card .screen .slot.slot-copy,
  .auth-card .screen > .slot-copy,
  .slot-copy,
  .cta-desktop { display: none !important; }
  /* Hide right CTA pane on phone-sized screens for forgot password */
  .cta-pane { display: none !important; }
  /* Ensure mobile CTA appears above the form */
  .cta-mobile { display: block !important; }
  /* Only show the active screen to prevent duplicate CTAs */
  .auth-card.show-signup .screen.login { display: none !important; }
  .auth-card.show-login  .screen.signup { display: none !important; }
}

/* Consistent input heights and vertical alignment */
.form-card .custom-input,
.form-card .password-field .custom-input {
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}
.form-card .password-field .custom-input { padding-right: 48px !important; }
.form-card .password-toggle { width: 28px; height: 28px; top: 50%; transform: translateY(-50%); right: 12px; }

/* Center and align the privacy acceptance row */
label.agree-row { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 10px; width: 100%; max-width: 100%; text-align: left; box-sizing: border-box; overflow: hidden; }
label.agree-row input { transform: none; margin: 0; }
@media (max-width: 640px) { label.agree-row { padding: 10px 12px; } }

/* Consistent labels */
.field label { font-size: 16px; margin-bottom: 8px; }

/* Center CTA text on signup left pane */
.screen.signup .slot-copy .cta-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}
.screen.signup .slot-copy .cta-title,
.screen.signup .slot-copy .cta-sub { text-align: center; }

.screen.login .slot-copy .cta-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}
.screen.login .slot-copy .cta-pane .cta-ghost {
  align-self: center;
}

/* Earlier single-column on mobile for better alignment */
@media (max-width: 640px) {
  .form-card .grid-2,
  .form-box form .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 20px 0 !important;
  }
}

/* Ensure no duplication: when signup is active, hide the login CTA pane */
.auth-card.show-signup .screen.login .cta-desktop { display: none !important; }
/* Symmetric rule: when login is active, hide the signup CTA pane */
.auth-card.show-login  .screen.signup .cta-desktop { display: none !important; }

/* Note: Do not override desktop layout here; keep original styles */

.auth-card.show-signup .cta-ghost { background: transparent !important; }
.auth-card.show-signup .cta-ghost:hover { background: transparent !important; }
.auth-card.show-signup .cta-ghost:focus { background: transparent !important; }

.auth-card.show-login .cta-ghost { background: transparent !important; }
.auth-card.show-login .cta-ghost:hover { background: transparent !important; }
.auth-card.show-login .cta-ghost:focus { background: transparent !important; }

@media (max-width: 780px) {
  .cta-ghost { background: transparent !important; }
  .cta-ghost:hover { background: transparent !important; }
  .cta-ghost:focus { background: transparent !important; }
}