/**
 * The action row under an order (thank-you page and My Account → order view).
 *
 * One row, one gap rule. The buttons used to be printed by two different
 * features and by the theme, so they arrived stacked and touching; here they
 * are laid out once with breathing room, and a wrap that turns into full-width
 * buttons on a phone rather than a squeezed line.
 *
 * Colour is deliberately left to the theme. The invoice button is a plain
 * .button and inherits whatever the shop paints its buttons — matching the
 * rest of the page is worth more than any palette guess made here. Only the
 * withdrawal button is restyled, and only to make it quieter than the action
 * next to it.
 */

.mg-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin: 1.5rem 0 0;
}

.mg-order-actions .button.mg-order-action {
	margin: 0;
	white-space: nowrap;
}

/*
 * Withdrawal is a rare, serious action — present, not competing. Three classes
 * out-specify the theme's own `.woocommerce a.button`, so no !important.
 */
.mg-order-actions .button.mg-order-action--withdrawal {
	background: transparent;
	color: var( --global-palette5, #6b7280 );
	border: 1px solid var( --global-palette6, #d1d5db );
	font-weight: 400;
}

.mg-order-actions .button.mg-order-action--withdrawal:hover,
.mg-order-actions .button.mg-order-action--withdrawal:focus-visible {
	background: transparent;
	color: var( --global-palette3, #1f2937 );
	border-color: var( --global-palette3, #1f2937 );
}

.mg-order-actions__note {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --global-palette5, #6b7280 );
}

@media ( max-width: 600px ) {

	.mg-order-actions {
		gap: 0.625rem;
	}

	.mg-order-actions .button.mg-order-action {
		flex: 1 1 100%;
		text-align: center;
		white-space: normal;
	}
}