/*
 * Printable card layout used by the Same Square print preview window.
 * Dynamic page size and color values are supplied as CSS custom properties
 * by assets/js/frontend.js.
 */

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
	margin: 0;
}

body {
	display: flex;
	padding: 12mm;
	background: var(--smsqr-print-background, #ffffff);
	color: var(--smsqr-print-text, #111827);
	font: 16px/1.42 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main {
	display: flex;
	width: 100%;
	min-height: calc(100vh - 24mm);
	margin: auto;
	padding: 12mm;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-align: center;
}

h1 {
	margin: 0 0 4mm;
	font-size: 36px;
	line-height: 1.1;
}

.description {
	max-width: 145mm;
	margin: 0 0 7mm;
	font-size: 18px;
}

.logo {
	display: block;
	max-width: 48mm;
	max-height: 22mm;
	margin: 0 auto 6mm;
	object-fit: contain;
}

.qr {
	width: 105mm;
	max-width: 70%;
	margin: 0 auto;
}

.qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.label {
	margin: 6mm 0 2mm;
	font-size: 22px;
	font-weight: 700;
}

.url {
	max-width: 150mm;
	margin: 1mm 0 0;
	overflow-wrap: anywhere;
	font-size: 12px;
	opacity: 0.75;
}

.url span {
	font-weight: 600;
}

.card--poster {
	border: 2px solid currentColor;
	border-radius: 6mm;
}

.card--minimal {
	padding-top: 16mm;
	justify-content: flex-start;
}

.card--minimal h1 {
	font-size: 28px;
}

.card--minimal .description {
	font-size: 15px;
}

.card--minimal .qr {
	width: 92mm;
}

.card--minimal .label {
	font-size: 18px;
}

.card--table {
	max-width: 165mm;
	min-height: 0;
	padding: 9mm;
	border: 1.5mm solid currentColor;
	border-radius: 3mm;
}

.card--table h1 {
	font-size: 29px;
}

.card--table .description {
	margin-bottom: 5mm;
	font-size: 15px;
}

.card--table .qr {
	width: 80mm;
}

.card--table .label {
	margin-top: 4mm;
	font-size: 18px;
}

@media print {
	body {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}