/* Login page — the external-provider row.
 *
 * Scoped to .social-login, which is the wrapper <div> around the ExternalChallenge forms in
 * Views/Account/Login.cshtml (and its .ar twin). Nothing here is a utility: these rules exist so the
 * provider buttons sit on ONE row at equal widths whatever their labels say, which the Bootstrap
 * utilities on the markup could not do on their own — a row of buttons sized by their text puts
 * "Continue with Facebook" beside a much narrower "Continue with Apple".
 */

.social-login        { display: flex; gap: 10px; width: 100%; }
.social-login form   { flex: 1 1 0; min-width: 0; margin: 0; }   /* equal widths, allowed to shrink */
.social-login .btn   { width: 100%; padding: 8px 10px; gap: 8px; }
.social-login svg    { width: 24px; height: 24px; flex-shrink: 0; }

/* The label is the only part allowed to give way.
 *
 * `min-width: 0` above lets the form shrink, but a flex item will not shrink below the width of its
 * own text without this: three provider names on one row overflow the column and push the buttons out
 * of the card. The icon never shrinks (flex-shrink: 0 above), so a very narrow row degrades to icon
 * plus an ellipsis rather than to a broken layout.
 *
 * If the truncation ever looks worse than the alternative, the other answer is icon-only buttons with
 * the provider name moved to aria-label and title — a change in the two Login views, not here. */
.social-login__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }