.tlwp-login-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: #229ed9;
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 12px 20px;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.tlwp-login-btn:hover,
.tlwp-login-btn:focus {
	background-color: #1b87bd;
	color: #ffffff;
}

.tlwp-login-btn .tlwp-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath d='M120 0a120 120 0 100 240 120 120 0 000-240zm55.6 81.6l-19.1 90.1c-1.4 6.5-5.2 8-10.5 5l-29-21.4-14 13.5c-1.6 1.6-2.9 2.9-5.9 2.9l2.1-30.1 54.7-49.4c2.4-2.1-.5-3.3-3.6-1.2l-67.6 42.6-29.1-9.1c-6.3-2-6.5-6.3 1.3-9.3l113.9-43.9c5.3-1.9 9.9 1.3 8.2 9.3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath d='M120 0a120 120 0 100 240 120 120 0 000-240zm55.6 81.6l-19.1 90.1c-1.4 6.5-5.2 8-10.5 5l-29-21.4-14 13.5c-1.6 1.6-2.9 2.9-5.9 2.9l2.1-30.1 54.7-49.4c2.4-2.1-.5-3.3-3.6-1.2l-67.6 42.6-29.1-9.1c-6.3-2-6.5-6.3 1.3-9.3l113.9-43.9c5.3-1.9 9.9 1.3 8.2 9.3z'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-size: contain;
}

.tlwp-connected-state {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

.tlwp-connected-state .tlwp-avatar {
	border-radius: 50%;
	width: 32px;
	height: 32px;
	object-fit: cover;
}

.tlwp-connected-state .tlwp-logout-link {
	text-decoration: underline;
}

.tlwp-error {
	color: #b32d2e;
	font-size: 13px;
}

/* Ensure the button remains tappable and full-width friendly inside
   mobile frameworks such as Framework7 list/card layouts. */
@media (max-width: 480px) {
	.tlwp-login-btn {
		width: 100%;
	}
}