/* [mfa_auth_simple] - the short sign-in block - and the popup built from it.
   modal-v1.css owns the overlay, dialog, close button and scroll-lock; this
   file styles only the block and what is inside the dialog. Every token is
   checked against global-v3.css: a var() fallback renders fine while quietly
   inventing a name that retheming will never reach. */

/* ---- the block, usable anywhere ---- */

.mfa-auth-simple {
  display: flex;
  flex-direction: column;
  /* STRETCH, NOT CENTRE. `align-items: center` on a column flex shrinks
     children to their content, and the Google container is an EMPTY div that
     Google fills in later - so it measured zero and the button rendered into a
     0px box: present in the DOM, invisible on screen. Caught on production,
     where the module is actually configured; staging has no client ID, so
     nothing rendered there and the bug could not show itself. */
  align-items: stretch;
  gap: var(--mfa-space-2);
  text-align: center;
}

.mfa-auth-simple .mfa-auth-google {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--mfa-space-2);
}

.mfa-auth-simple .mfa-auth-google-btn {
  display: flex;
  justify-content: center;
  min-height: 44px;
}

/* member-logged-out.php prints an "or" divider above the button, which reads
   correctly under a form and reads as a dangling fragment here, where there is
   nothing above it to be "or" from. */
.mfa-auth-simple .mfa-auth-or {
  display: none;
}

/* A real link, not a second button: the two routes are not equal here, and
   dressing them the same makes the choice slower rather than fairer. Padding
   keeps it on the 44px touch floor without a filled box. */
.mfa-auth-simple-alt {
  margin: 0;
  font-size: 15px;
}
.mfa-auth-simple-alt a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  font-weight: 700;
  color: var(--mfa-teal-dark);
  text-decoration: none;
}
.mfa-auth-simple-alt a:hover {
  text-decoration: underline;
}

.mfa-auth-simple-note {
  margin: 0;
  font-size: 14px;
  color: var(--mfa-muted);
  line-height: 1.5;
}

/* Google's button never painted. Drop the empty slot rather than leaving a
   gap that reads as broken, and promote the email link to the primary action
   so there is still one obvious thing to do. Set by login-popup-v1.js after it
   waits for Google, never server-side: whether their script runs is a fact
   about the visitor's browser, and this page is cached for everybody. */
.mfa-auth-simple.is-no-google .mfa-auth-google {
  display: none;
}
/* THE EMAIL ROUTE STAYS A LINK, ALWAYS (Nizam, 2026-08-31). It was briefly
   promoted to a filled button when Google failed to paint, which made the
   secondary route look like the main one - and the main one is Google. If
   Google is missing, the honest thing is a block with one link in it, not a
   button pretending to be the primary action. */

/* ---- the popup ---- */

.mfa-login-pop .mfa-modal-dialog {
  max-width: 380px;
}

.mfa-login-pop-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: var(--mfa-space-3);
  padding-top: var(--mfa-space-2);
}

.mfa-login-pop-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--mfa-ink);
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

.mfa-login-pop-lead {
  font-size: 15px;
  color: var(--mfa-muted);
  line-height: 1.55;
  margin: 0;
}