/* ── Auth tab sizing ── */
#auth_tabs {
	display: flex;
}
#auth_tabs .nav-item {
	flex: 1;
}

/* ── Tab content: min-height + vertical centering ── */
#authentication_tabs_canvas {
	display: flex;
	flex-direction: column;
	min-height: 360px;
}
#authentication_tabs_canvas > .tab-pane.active {
	display: flex !important;
	align-items: center;
	flex: 1;
}
#authentication_tabs_canvas > .tab-pane.active > * {
	width: 100%;
}

/* ── Divider: horizontal by default (mobile), vertical on md+ ── */
.auth-divider {
	display: flex;
	align-items: center;
	color: var(--bs-secondary-color);
	font-size: 0.875rem;
	white-space: nowrap;
	flex-direction: row;
	gap: 0.75rem;
	width: 100%;
	padding: 1rem 0;
}
.auth-divider::before,
.auth-divider::after {
	content: '';
	flex: 1;
	border-top: 1px solid var(--bs-border-color);
}
@media (min-width: 768px) {
	.auth-divider-vertical {
		flex-direction: column;
		gap: 0.75rem;
		width: auto;
		padding: 0;
		height: 100%;
	}
	.auth-divider-vertical::before,
	.auth-divider-vertical::after {
		border-top: none;
		border-left: 1px solid var(--bs-border-color);
	}
}

/* ── SSO button grid ── */
.sso-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
}
.sso-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 0;
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	background: transparent;
	color: var(--bs-body-color);
	text-decoration: none;
	transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
	font-size: 1.75rem;
}
.sso-btn:hover {
	border-color: var(--bs-tertiary-color);
	background-color: var(--bs-tertiary-bg);
	color: var(--bs-body-color);
}