/* Styling for OAuth login/register buttons */
a.button2[href*="login&login=external"] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	width: auto;
	min-width: 220px;
	max-width: 320px;
	margin: 0.4rem auto;
	padding: 0.65rem 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	transition: transform 120ms ease, box-shadow 120ms ease, opacity 150ms ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

a.button2[href*="login&login=external"]:hover,
a.button2[href*="login&login=external"]:focus {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	text-decoration: none;
	opacity: 0.95;
}

a.button2[href*="login&login=external"]::before {
	content: "";
	display: inline-block;
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 4px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	flex-shrink: 0;
}

/* Provider specific styling */
a.button2[href*="oauth_service=google"] {
	background: #fff;
	border: 1px solid #dadce0;
	color: #3c4043;
}

a.button2[href*="oauth_service=google"]::before {
	background-image: url("images/oauth/google.svg");
}

a.button2[href*="oauth_service=facebook"] {
	background: #0866ff;
	color: #fff;
}

a.button2[href*="oauth_service=facebook"]::before {
	background-image: url("images/oauth/facebook.svg");
}

a.button2[href*="oauth_service=twitter"] {
	background: #1d9bf0;
	color: #fff;
}

a.button2[href*="oauth_service=twitter"]::before {
	background-image: url("images/oauth/twitter.svg");
}

a.button2[href*="oauth_service=bitly"] {
	background: #f97316;
	color: #fff;
}

a.button2[href*="oauth_service=bitly"]::before {
	background-image: url("images/oauth/bitly.svg");
}

/* Compact layout tweaks for stacked buttons */
.panel .content a.button2[href*="login&login=external"] + a.button2[href*="login&login=external"] {
	margin-top: 0.6rem;
}