/* PBS-1016 — extra sign-in options (email OTP + Google) on the login screen. */

/* ---------------------------------------------------------------------------
   Login 2 Step Verification (2FA) challenge screen.

   custom.css pins .floating-label at position:absolute; top:-9px against
   .input-label-wrapper, so it sits ON the input's top border. Anything else in
   normal flow at the top of that wrapper therefore renders UNDERNEATH the
   label. The "we just sent a code to..." line used to live inside the wrapper
   and collided with the label; it now sits above the wrapper as its own block,
   and these rules give it the spacing that arrangement needs.
   --------------------------------------------------------------------------- */

.twofa-sent-to {
  margin: 0 0 14px;
  text-align: center;
  line-height: 1.45;
}

.twofa-sent-to strong {
  color: #222;
  word-break: break-all;   /* long addresses must not widen the card */
}

.twofa-resend-row {
  margin: -6px 0 12px;
  font-size: 13px;
  text-align: center;
}

/* 8 digits, spaced out so a typo is easy to spot. */
.twofa-code {
  letter-spacing: 4px;
  text-align: center;
  font-size: 16px;
}

/* ---------------------------------------------------------------------------
   Busy state.

   Every action on this screen is a network round-trip - sign in, resend the
   code, start over - and previously none of them acknowledged the click. The
   submit handler tried to, but targeted .btn-darkred (the login button is
   .btn-green) with .val() (a no-op on a <button>), so nothing happened.
   --------------------------------------------------------------------------- */

.pbs-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pbs-spin .6s linear infinite;
}

.pbs-spinner-sm {
  width: 11px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
}

@keyframes pbs-spin {
  to { transform: rotate(360deg); }
}

/* Respect a reduced-motion preference: still show the ring, just do not spin. */
@media (prefers-reduced-motion: reduce) {
  .pbs-spinner { animation-duration: 2.4s; }
}

button.is-busy {
  opacity: .75;
  cursor: progress;
}

a.is-busy {
  color: #999 !important;
  cursor: progress;
  text-decoration: none !important;
}

#login-alt { margin-top: 6px; }

.login-alt-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #999;
  font-size: 12px;
  margin: 16px 0 14px;
}
.login-alt-divider::before,
.login-alt-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #e2e2e2;
}
.login-alt-divider span { padding: 0 12px; text-transform: uppercase; letter-spacing: .5px; }

/* The toggle uses the shared .btn-darkblue pill from custom.css, like every
   other button on this page. Only its spacing lives here. */
.otp-toggle-row { margin-top: 8px; }

.pbs-google-btn {
  display: flex;
  justify-content: center;
  min-height: 40px;
}

/* Google Identity Services renders its own markup, so the shared .btn-white-blue
   pill from custom.css can't simply be applied as a class — its look is
   reproduced here over GSI's generated classes instead. */
.pbs-google-btn .nsm7Bb-HzV7m-LgbsSe {
  background-color: #ffffff !important;
  border: 2px solid #0000ff !important;
  border-radius: 56px !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 5px 20px !important;
  max-width: 100% !important;
  transition: all 0.3s;
}

.pbs-google-btn .nsm7Bb-HzV7m-LgbsSe:hover,
.pbs-google-btn .nsm7Bb-HzV7m-LgbsSe:focus {
  background-color: #ffffff !important;
  box-shadow: rgba(255, 255, 255, 0.2) 0 3px 15px inset,
    rgba(0, 0, 0, 0.1) 0 3px 5px, rgba(0, 0, 0, 0.1) 0 10px 13px !important;
  transform: scale(1.05);
}

/* GSI paints a grey hover/press tint over the whole button; drop it so the
   pill stays white like the other login buttons. */
.pbs-google-btn .nsm7Bb-HzV7m-LgbsSe-MJoBVe {
  display: none !important;
}

.pbs-google-btn .nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb {
  height: auto !important;
  min-height: 0 !important;
}

.pbs-google-btn .nsm7Bb-HzV7m-LgbsSe-BPrWId {
  color: #0000ff !important;
  font-family: rubik, arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

#otp-panel { display: none; margin-top: 10px; text-align: left; }
#otp-panel .otp-sent-msg { font-size: 13px; color: #19663a; margin: 0 0 10px; }
#otp-panel #otp-code { letter-spacing: 6px; font-size: 18px; text-align: center; }
.otp-resend-row { margin-top: 10px; font-size: 13px; text-align: center; color: #666; }
.otp-resend-row #otp-timer { color: #999; margin-left: 6px; }
#otp-error { margin-top: 12px; }