/**
 * My Account -> Orders: action buttons.
 *
 * WooCommerce prints each action as a plain .button, which the theme paints
 * solid red. Two of those already crowd the cell; the withdrawal action makes
 * three and they wrap into a block of colour. Fix the layout (flex + gap) and
 * establish a hierarchy: "Vaata" stays the primary action, the rest become
 * outlines, and the rarely-used withdrawal is quieter still.
 *
 * Colours come from the Kadence palette variables with hard fallbacks, so the
 * buttons follow the theme if the palette is ever retuned.
 */

.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
	text-align: right;
}

.woocommerce-orders-table__cell-order-actions .mg-order-actions,
td.woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: flex-end;
}

.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-orders-table__cell-order-actions .woocommerce-button {
	margin: 0;
	padding: 0.5em 1em;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25;
	white-space: nowrap;
	border-radius: 0.375rem;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Secondary actions: outline, so one row is not a wall of red. */
.woocommerce-orders-table__cell-order-actions .button:not(.view) {
	background: transparent;
	color: var( --global-palette1, #c62828 );
	border-color: currentColor;
}

.woocommerce-orders-table__cell-order-actions .button:not(.view):hover,
.woocommerce-orders-table__cell-order-actions .button:not(.view):focus-visible {
	background: var( --global-palette1, #c62828 );
	color: #fff;
	border-color: var( --global-palette1, #c62828 );
}

/* Withdrawal is a rare, serious action — present but not competing. */
.woocommerce-orders-table__cell-order-actions .button.mg_withdrawal {
	color: var( --global-palette5, #6b7280 );
	border-color: var( --global-palette6, #d1d5db );
	font-weight: 400;
}

.woocommerce-orders-table__cell-order-actions .button.mg_withdrawal:hover,
.woocommerce-orders-table__cell-order-actions .button.mg_withdrawal:focus-visible {
	background: transparent;
	color: var( --global-palette3, #1f2937 );
	border-color: var( --global-palette3, #1f2937 );
}

.woocommerce-orders-table td,
.woocommerce-orders-table th {
	vertical-align: middle;
}

@media ( max-width: 768px ) {

	.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
		justify-content: flex-start;
		text-align: left;
	}

	.woocommerce-orders-table__cell-order-actions .button,
	.woocommerce-orders-table__cell-order-actions .woocommerce-button {
		flex: 1 1 auto;
		text-align: center;
	}
}