/* The phone shortcut stays outside the invitation artwork and editor canvas. */
.dtc-mobile-qr { display: none; }

@media screen and (min-width: 1024px) {
	.dtc-mobile-qr {
		position: fixed;
		right: max(24px, env(safe-area-inset-right));
		bottom: max(24px, env(safe-area-inset-bottom));
		z-index: 2147482800;
		display: block;
		width: 124px;
		margin: 0;
		padding: 0;
	}
	body.iv-editing .dtc-mobile-qr {
		/* Sit above the zoom bar; help button sits above this card. */
		bottom: max(70px, calc(env(safe-area-inset-bottom) + 58px));
		right: max(18px, env(safe-area-inset-right));
	}
}

.dtc-mobile-qr, .dtc-mobile-qr * { box-sizing: border-box; }
.dtc-mobile-qr a.dtc-mobile-qr__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin: 0;
	padding: 10px 10px 12px;
	border: 0;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 3px 18px rgb(0 0 0 / 10%);
	color: #737373;
	font: 400 11px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
body.iv-editing .dtc-mobile-qr a.dtc-mobile-qr__link {
	border: 1px solid #2a3136;
	background: rgba(18, 22, 26, .94);
	box-shadow: 0 10px 28px #0007;
	color: #b8c0c6;
	backdrop-filter: blur(12px);
}
.dtc-mobile-qr__link:focus-visible { outline: 2px solid #737373; outline-offset: 4px; }
body.iv-editing .dtc-mobile-qr__link:focus-visible { outline-color: #e8a0a8; }
.dtc-mobile-qr .dtc-mobile-qr__art { position: relative; display: block; width: 104px; height: 104px; margin: 0; padding: 0; background: #fff; }
.dtc-mobile-qr .dtc-mobile-qr__code { display: block; width: 104px; height: 104px; max-width: none; margin: 0; padding: 0; }
.dtc-mobile-qr .dtc-mobile-qr__heart { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 22px; height: 22px; padding: 3px; border: 1px solid #111; border-radius: 6px; background: #fff; color: #111; transform: translate(-50%, -50%); }
.dtc-mobile-qr__heart svg { display: block; width: 14px; height: 14px; }
.dtc-mobile-qr .dtc-mobile-qr__caption { display: block; margin: 0; padding: 0; font: inherit; color: inherit; }