/* Grace Marie — custom styles */

/* ---------------------------------------------------------------
 * BACS thank-you: 2-column grid for bank details + GCash QR.
 *
 * DOM (after PHP wrapping in functions.php):
 *
 *   <section class="woocommerce-bacs-bank-details">
 *     <h2 class="wc-bacs-bank-details-heading">Our bank details</h2>
 *     <div class="gm-bacs-account">
 *       <h3 class="wc-bacs-bank-details-account-name">…</h3>
 *       <ul class="wc-bacs-bank-details order_details bacs_details">…</ul>
 *     </div>
 *     <figure class="gm-bacs-qr">…</figure>
 *   </section>
 *
 * Heading spans the top row; account block on the left, QR on the right.
 * Collapses to a single column under 640px.
 * --------------------------------------------------------------- */
.woocommerce-bacs-bank-details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
	column-gap: 2rem;
	row-gap: 0.75rem;
	align-items: center;
	margin-block: 2rem;
}

.woocommerce-bacs-bank-details .wc-bacs-bank-details-heading {
	grid-column: 1 / -1;
	margin: 0 0 0.25rem;
}

.woocommerce-bacs-bank-details .gm-bacs-account {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
}

.woocommerce-bacs-bank-details .gm-bacs-account .wc-bacs-bank-details-account-name {
	margin: 0 0 0.5rem;
}

.woocommerce-bacs-bank-details .gm-bacs-account ul.wc-bacs-bank-details {
	margin: 0;
	padding-left: 1.25rem;
}

.woocommerce-bacs-bank-details .gm-bacs-qr {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	align-self: center;
	justify-self: center;
}

.woocommerce-bacs-bank-details .gm-bacs-qr img {
	width: 100%;
	max-width: 480px;
	height: auto;
	display: block;
}

.woocommerce-bacs-bank-details .gm-bacs-qr figcaption {
	margin-top: 0.5rem;
	font-size: 0.9em;
	color: #555;
	text-align: center;
}

@media (max-width: 640px) {
	.woocommerce-bacs-bank-details {
		grid-template-columns: 1fr;
	}
	.woocommerce-bacs-bank-details .gm-bacs-qr {
		grid-column: 1;
		grid-row: auto;
		margin-top: 1rem;
	}
}