.social-login-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}

.social-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: var(--bs-border-radius);
    border: 1px solid #dee2e6;
    background: #fff;
    color: #212529;
    text-decoration: none;
    font-size: .875rem;
    transition: opacity .15s;
    white-space: nowrap;
}

.social-btn:hover {
    opacity: .85;
    color: inherit;
}

.social-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Per-provider left border colours */
.social-btn-google    { border-left: 3px solid #4285F4; }
.social-btn-github    { border-left: 3px solid #24292e; }
.social-btn-discord   { border-left: 3px solid #5865F2; }
.social-btn-apple     { border-left: 3px solid #000; }
.social-btn-facebook  { border-left: 3px solid #1877F2; }
.social-btn-microsoft { border-left: 3px solid #00A4EF; }
.social-btn-twitter   { border-left: 3px solid #000; }
.social-btn-twitch    { border-left: 3px solid #9147FF; }
.social-btn-linkedin  { border-left: 3px solid #0A66C2; }
.social-btn-gitlab    { border-left: 3px solid #FC6D26; }

/* Dark mode support */
[data-bs-theme="dark"] .social-btn {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}