/* Back office screens for the Barcodegen plugin. */

.bcgn-lede {
	max-width: 60em;
	color: #50575e;
}

.bcgn-grid {
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
	gap: 20px;
	align-items: start;
	max-width: 1100px;
}

@media (max-width: 960px) {
	.bcgn-grid {
		grid-template-columns: 1fr;
	}
}

.bcgn-card {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 18px 20px 22px;
}

.bcgn-card h2 {
	margin-top: 0;
}

.bcgn-preview {
	padding: 22px 16px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	overflow-x: auto;
}

.bcgn-preview svg {
	max-width: 100%;
	height: auto;
}

.bcgn-error {
	color: #b32d2e;
}

.bcgn-upsell {
	margin-top: 22px;
	padding: 14px 16px;
	background: #f0f6fc;
	border-left: 4px solid #2271b1;
	border-radius: 4px;
}

.bcgn-upsell p:first-child {
	margin-top: 0;
}

.bcgn-upsell p:last-child {
	margin-bottom: 0;
}