/* Pending payment instructions */
.ggn-payment-instructions {
	display: grid;
	align-items: start;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
}

.ggn-order-status .wc-block-store-notices:not(:has(.wc-block-components-notice-banner)) {
	display: none;
}

.ggn-order-status .wp-block-woocommerce-order-confirmation-summary:empty,
.ggn-order-status .wp-block-woocommerce-order-confirmation-totals-wrapper:empty {
	display: none;
}

.ggn-payment-instructions .ggn-payment-instructions__steps,
.ggn-payment-instructions .ggn-payment-instructions__details {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--card-lg);
}

.ggn-payment-instructions .ggn-payment-instructions__details {
	position: sticky;
	top: var(--wp--preset--spacing--30);
	display: grid;
	gap: var(--wp--preset--spacing--card);
}

.ggn-payment-instructions .ggn-payment-instructions__details > * {
	margin: 0;
}

.ggn-payment-instructions h2,
.ggn-payment-instructions h3,
.ggn-payment-instructions p {
	margin-top: 0;
}

.ggn-payment-instructions h2 {
	font-size: var(--wp--preset--font-size--h-2);
	margin-bottom: var(--wp--preset--spacing--card-lg);
}

.ggn-payment-instructions .ggn-payment-instructions__details h2 {
	font-size: var(--wp--preset--font-size--card-title);
	margin: 0;
}

.ggn-payment-instructions .ggn-payment-instructions__step-list,
.ggn-payment-instructions .ggn-payment-instructions__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ggn-payment-instructions .ggn-payment-instructions__step {
	display: grid;
	gap: var(--wp--preset--spacing--card);
	grid-template-columns: var(--wp--custom--control--size) minmax(0, 1fr);
	padding: var(--wp--preset--spacing--card-lg) 0;
}

.ggn-payment-instructions .ggn-payment-instructions__step + .ggn-payment-instructions__step,
.ggn-payment-instructions .ggn-payment-instructions__item + .ggn-payment-instructions__item {
	border-top: 1px solid var(--wp--preset--color--line);
}

.ggn-payment-instructions .ggn-payment-instructions__step:first-child {
	padding-top: 0;
}

.ggn-payment-instructions .ggn-payment-instructions__step:last-child {
	padding-bottom: 0;
}

.ggn-payment-instructions .ggn-payment-instructions__number {
	align-items: center;
	background-color: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--on-accent);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	height: var(--wp--custom--control--size);
	justify-content: center;
	width: var(--wp--custom--control--size);
}

.ggn-payment-instructions .ggn-payment-instructions__step-content {
	display: grid;
	gap: var(--wp--preset--spacing--card);
}

.ggn-payment-instructions .ggn-payment-instructions__step h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 600;
	margin-bottom: 0;
}

.ggn-payment-instructions .ggn-payment-instructions__qr,
.ggn-payment-instructions .ggn-payment-instructions__qr-placeholder {
	background-color: var(--wp--preset--color--surface-2);
	border-radius: var(--wp--custom--radius--control);
	height: var(--wp--custom--size--payment-qr);
	max-width: var(--wp--custom--size--payment-qr);
	object-fit: contain;
	width: 100%;
}

.ggn-payment-instructions .ggn-payment-instructions__qr-placeholder {
	align-items: center;
	border: 1px dashed var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	display: flex;
	font-size: var(--wp--preset--font-size--meta);
	justify-content: center;
	padding: var(--wp--preset--spacing--card);
	text-align: center;
}

.ggn-payment-instructions .ggn-payment-instructions__download {
	align-items: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--text);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--custom--font--button);
	font-weight: 600;
	justify-content: center;
	min-height: var(--wp--custom--control--size);
	padding-left: var(--wp--preset--spacing--card-lg);
	padding-right: var(--wp--preset--spacing--card-lg);
	text-decoration: none;
	width: fit-content;
}

.ggn-payment-instructions .ggn-payment-instructions__account {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
}

.ggn-payment-instructions .ggn-payment-instructions__account > div {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.ggn-payment-instructions .ggn-payment-instructions__account dt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--meta);
}

.ggn-payment-instructions .ggn-payment-instructions__account dd,
.ggn-payment-instructions .ggn-payment-instructions__account-instructions {
	margin: 0;
}

.ggn-payment-instructions .ggn-payment-instructions__account code {
	font-family: inherit;
	font-size: inherit;
	user-select: text;
}

.ggn-payment-instructions .ggn-payment-instructions__account-instructions {
	white-space: normal;
}

.ggn-payment-instructions .ggn-payment-instructions__total {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 700;
}

.ggn-payment-instructions .ggn-payment-instructions__step-content p {
	color: var(--wp--preset--color--muted);
	margin-bottom: 0;
}

.ggn-payment-instructions .ggn-payment-instructions__proof-action .wp-block-button__link {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: var(--wp--custom--button--height);
	text-decoration: none;
}

.ggn-payment-instructions .ggn-payment-proof-action-slot {
	margin-top: var(--wp--preset--spacing--10);
}

.ggn-payment-instructions .ggn-payment-proof-action-slot form {
	margin: 0;
}

.ggn-payment-instructions .ggn-payment-proof-action-slot button,
.ggn-payment-instructions .ggn-payment-proof-action-slot input[type="submit"] {
	align-items: center;
	background-color: var(--wp--preset--color--accent);
	border: 0;
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--on-accent);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--custom--font--button);
	font-weight: 600;
	justify-content: center;
	min-height: 44px;
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
	text-decoration: none;
}

/* Order detail card */
.ggn-payment-instructions .ggn-payment-instructions__item {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--card);
	grid-template-columns: var(--wp--custom--size--payment-thumbnail) minmax(0, 1fr) auto;
	padding: var(--wp--preset--spacing--card) 0;
}

.ggn-payment-instructions .ggn-payment-instructions__item:first-child {
	padding-top: 0;
}

.ggn-payment-instructions .ggn-payment-instructions__item:last-child {
	padding-bottom: 0;
}

.ggn-payment-instructions .ggn-payment-instructions__thumb,
.ggn-payment-instructions .ggn-payment-instructions__thumb img {
	height: var(--wp--custom--size--payment-thumbnail);
	width: var(--wp--custom--size--payment-thumbnail);
}

.ggn-payment-instructions .ggn-payment-instructions__thumb {
	align-items: center;
	background-color: var(--wp--preset--color--surface-2);
	border-radius: var(--wp--custom--radius--control);
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.ggn-payment-instructions .ggn-payment-instructions__thumb img {
	object-fit: contain;
}

.ggn-payment-instructions .ggn-payment-instructions__item-copy {
	display: grid;
	gap: var(--wp--preset--spacing--card);
	min-width: 0;
}

.ggn-payment-instructions .ggn-payment-instructions__item-name,
.ggn-payment-instructions .ggn-payment-instructions__line-price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
}

.ggn-payment-instructions .ggn-payment-instructions__item-meta,
.ggn-payment-instructions .ggn-payment-instructions__item-meta dl,
.ggn-payment-instructions .ggn-payment-instructions__item-meta dd,
.ggn-payment-instructions .ggn-payment-instructions__quantity {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.ggn-payment-instructions .ggn-payment-instructions__item-meta dt {
	display: none;
}

.ggn-payment-instructions .ggn-payment-instructions__line-price {
	text-align: right;
}

.ggn-payment-instructions .ggn-payment-instructions__detail-row {
	align-items: center;
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--card);
	padding-top: var(--wp--preset--spacing--card);
}

.ggn-payment-instructions .ggn-payment-instructions__detail-row--total {
	border-top: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	margin-top: 0;
}

.ggn-payment-instructions .ggn-payment-instructions__order-meta {
	border-top: 1px solid var(--wp--preset--color--line);
	display: grid;
	font-size: var(--wp--preset--font-size--small);
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding-top: var(--wp--preset--spacing--card);
}

.ggn-payment-instructions .ggn-payment-instructions__order-meta > div {
	align-items: baseline;
	display: flex;
	gap: var(--wp--preset--spacing--card);
	justify-content: space-between;
}

.ggn-payment-instructions .ggn-payment-instructions__order-meta dt {
	color: var(--wp--preset--color--muted);
}

.ggn-payment-instructions .ggn-payment-instructions__order-meta dd {
	margin: 0;
	overflow-wrap: anywhere;
	text-align: right;
}

.ggn-payment-instructions .ggn-payment-instructions__notice {
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--meta);
	margin-bottom: 0;
	margin-top: 0;
	padding-top: var(--wp--preset--spacing--card);
}

.ggn-payment-instructions .ggn-payment-instructions__actions {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--card);
}

.ggn-payment-instructions .ggn-payment-instructions__actions .ggn-order-actions,
.ggn-payment-instructions .ggn-payment-instructions__actions .wp-block-buttons {
	margin: 0;
}

.ggn-payment-instructions .ggn-payment-instructions__actions .wp-block-buttons {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	grid-template-columns: 1fr;
}

.ggn-payment-instructions .ggn-payment-instructions__actions .wp-block-button,
.ggn-payment-instructions .ggn-payment-instructions__actions .wp-block-button__link {
	box-sizing: border-box;
	width: 100%;
}

.ggn-payment-instructions .ggn-payment-instructions__actions .wp-block-button__link {
	align-items: center;
	display: inline-flex;
	justify-content: center;
}

.ggn-payment-instructions .ggn-payment-instructions__actions .wp-block-buttons {
	border-top: 0;
	padding-top: 0;
}

@media (max-width: 781px) {
	.ggn-payment-instructions {
		grid-template-columns: minmax(0, 1fr);
	}

	.ggn-payment-instructions .ggn-payment-instructions__details {
		position: static;
	}

	.ggn-payment-instructions .ggn-payment-instructions__steps,
	.ggn-payment-instructions .ggn-payment-instructions__details {
		padding: var(--wp--preset--spacing--card);
	}

	.ggn-payment-instructions .ggn-payment-instructions__step {
		padding-bottom: var(--wp--preset--spacing--card);
		padding-top: var(--wp--preset--spacing--card);
	}

	.ggn-payment-instructions .ggn-payment-instructions__proof-action .wp-block-button__link {
		width: 100%;
	}

	.ggn-payment-instructions .ggn-payment-proof-action-slot button,
	.ggn-payment-instructions .ggn-payment-proof-action-slot input[type="submit"] {
		width: 100%;
	}

	.ggn-payment-instructions .ggn-payment-instructions__step:first-child .ggn-payment-instructions__step-content,
	.ggn-payment-instructions .ggn-payment-instructions__step:last-child .ggn-payment-instructions__step-content {
		grid-template-columns: minmax(0, 1fr);
	}

	.ggn-payment-instructions .ggn-payment-instructions__step:first-child .ggn-payment-instructions__step-content > h3,
	.ggn-payment-instructions .ggn-payment-instructions__step:first-child .ggn-payment-instructions__step-content > p {
		grid-column: 1;
	}

	.ggn-payment-instructions .ggn-payment-instructions__step:first-child .ggn-payment-instructions__account {
		grid-column: 1;
		grid-row: auto;
	}

	.ggn-payment-instructions .ggn-payment-instructions__step:last-child .wp-block-button,
	.ggn-payment-instructions .ggn-payment-instructions__step:last-child .wp-block-button__link {
		width: 100%;
	}
}

@media (min-width: 782px) {
	.ggn-payment-instructions .ggn-payment-instructions__step:first-child .ggn-payment-instructions__step-content {
		align-items: start;
		column-gap: var(--wp--preset--spacing--30);
		grid-template-columns: auto minmax(0, 1fr);
	}

	.ggn-payment-instructions .ggn-payment-instructions__step:first-child .ggn-payment-instructions__step-content > h3,
	.ggn-payment-instructions .ggn-payment-instructions__step:first-child .ggn-payment-instructions__step-content > p {
		grid-column: 1 / -1;
	}

	.ggn-payment-instructions .ggn-payment-instructions__step:first-child .ggn-payment-instructions__account {
		align-self: center;
		grid-column: 2;
		grid-row: 2 / span 2;
	}

	.ggn-payment-instructions .ggn-payment-instructions__step:last-child .ggn-payment-instructions__step-content {
		align-items: center;
		grid-template-columns: auto auto;
		justify-content: start;
	}

	.ggn-payment-instructions .ggn-payment-instructions__step:last-child .ggn-payment-instructions__step-content > h3 {
		grid-column: 1 / -1;
	}

	.ggn-payment-instructions .ggn-payment-instructions__step:last-child .ggn-payment-instructions__step-content > * {
		margin: 0;
	}
}
