/**
 * WEBIT QR.
 *
 * Deliberately plain and theme-agnostic: a card, a code, and the buttons. It
 * inherits the page's font rather than importing one.
 */

.wqr { font-family: inherit; }

.wqr-card {
	display: inline-block;
	padding: 18px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	background: #fff;
	text-align: center;
	max-width: 100%;
}

.wqr-card.is-center { display: block; margin-inline: auto; }
.wqr-card.is-left   { float: left; margin: 0 20px 16px 0; }
.wqr-card.is-right  { float: right; margin: 0 0 16px 20px; }

.wqr-code { margin-inline: auto; }

/* The code must scale down on a phone without becoming unscannable mush. */
.wqr-code svg { display: block; width: 100%; height: auto; max-width: 100%; }

.wqr-cap {
	margin: 12px 0 0;
	font-size: 13px;
	opacity: .7;
}

.wqr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 12px;
}

.wqr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border: 1px solid #0EAB9D;
	border-radius: 9px;
	background: #0EAB9D;
	color: #fff;
	font: 600 13px/1 inherit;
	text-decoration: none;
	cursor: pointer;
}

.wqr-btn:hover,
.wqr-btn:focus { background: #077F76; border-color: #077F76; color: #fff; }

.wqr-btn--ghost { background: transparent; color: #077F76; border-color: rgba(0, 0, 0, .14); }
.wqr-btn--ghost:hover { background: rgba(14, 171, 157, .1); color: #077F76; }

.wqr-hint {
	margin: 8px 0 0;
	font-size: 12px;
	min-height: 1em;
	color: #077F76;
}

.wqr-note {
	padding: 10px 13px;
	border-radius: 9px;
	background: #FDF3E3;
	color: #8A5D14;
	font-size: 13px;
}

/* Printing a page with a code on it should give a clean, scannable code. */
@media print {
	.wqr-actions, .wqr-hint { display: none !important; }
	.wqr-card { border-color: #ccc; break-inside: avoid; }
}

/* Admin bits */

.wqr-logo-preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 90px;
	margin-inline-end: 10px;
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	background:
		linear-gradient(45deg, #f0f0f1 25%, transparent 25%, transparent 75%, #f0f0f1 75%) 0 0 / 14px 14px,
		linear-gradient(45deg, #f0f0f1 25%, transparent 25%, transparent 75%, #f0f0f1 75%) 7px 7px / 14px 14px,
		#fff;
	vertical-align: middle;
	overflow: hidden;
}

.wqr-logo-preview img { max-width: 112px; max-height: 74px; }
.wqr-logo-preview span { font-size: 12px; color: #787c82; }

.wqr-adminpreview { display: inline-block; padding: 14px; background: #fff; border: 1px solid #dcdcde; border-radius: 12px; }
.wqr-adminpreview svg { display: block; }