/* Factorize Pickup - the product QR box, in the editor tab and on the storefront. */

.fzp-qr {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
}

.fzp-qr__figure {
	flex: 0 0 auto;
	margin: 0;
	text-align: center;
}

.fzp-qr__img {
	display: block;
	width: 220px;
	height: 220px;
	max-width: 100%;
	image-rendering: pixelated;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	background: #fff;
}

.fzp-qr__caption {
	margin-top: 6px;
	font-size: 12px;
	color: #555;
}

.fzp-qr__side {
	flex: 1 1 280px;
	min-width: 0;
}

.fzp-qr__lead {
	margin: 0 0 12px;
}

.fzp-qr__label {
	display: block;
	font-weight: 600;
	margin: 0 0 4px;
}

.fzp-qr__urlrow {
	display: flex;
	gap: 6px;
	margin: 0 0 12px;
}

.fzp-qr__url {
	flex: 1 1 auto;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
}

.fzp-qr__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.fzp-qr__status {
	min-height: 1.4em;
	margin: 8px 0 0;
	font-weight: 600;
	color: #1e7f3a;
}

.fzp-qr__hint,
.fzp-qr__note {
	margin: 4px 0 0;
	font-size: 12px;
	color: #646970;
}

/* Editor tab: WooCommerce's options panel floats labels at 150px; this box is not a form row. */
#fzp_qr_data .fzp-qr-panel {
	padding: 16px 20px;
}

#fzp_qr_data .fzp-qr__url {
	float: none;
	width: auto;
}

/* .woocommerce_options_panel label floats into a -150px gutter, which put this label on top of the code. */
#fzp_qr_data .fzp-qr__label {
	float: none;
	width: auto;
	margin: 0 0 4px;
	padding: 0;
}

#fzp_qr_data .fzp-qr__lead,
#fzp_qr_data .fzp-qr__hint,
#fzp_qr_data .fzp-qr__status {
	padding: 0;
}

#woocommerce-product-data ul.wc-tabs li.fzp_qr_options a::before {
	content: "\f509";
}

/* Storefront: themes style .button already; keep ours tidy on a phone. */
.fzp-qr--front .fzp-qr__btn {
	min-height: 44px;
}

.fzp-qr--front .fzp-qr__url {
	padding: 8px 10px;
}

@media (max-width: 560px) {
	.fzp-qr__figure {
		width: 100%;
	}

	.fzp-qr__img {
		margin: 0 auto;
	}

	.fzp-qr__actions .fzp-qr__btn {
		flex: 1 1 45%;
	}
}
