.qr-trigger {
	cursor: pointer;
	color: #007bff;
	text-decoration: underline;
}

/* Overlay that darkens the background */
#qrOverlay {
	position: fixed;
	inset: 0;
	display: none;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9999;
}

/* QR image container */
#qrImage {
	position: absolute;
	width: 200px;
	height: 200px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
	padding: 10px;
}

/* Simple spinner */
#qrSpinner {
	position: absolute;
	width: 40px;
	height: 40px;
	border: 4px solid #ccc;
	border-top-color: #007bff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Prevent items from being selectable, otherwise sometimes the QR code turns blue if the user drags the mouse a bit */
#qrOverlay,
#qrOverlay *,
.qr-trigger,
#qrImage,
#qrSpinner {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}