/* My Account > Orders: real buttons for the order actions, and one card per order on phones. */

.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	margin: 3px 4px 3px 0;
	padding: 8px 18px;
	border: 1px solid #f2f2f2;
	border-radius: 60px;
	background: #f2f2f2;
	color: #222;
	font-size: 12px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button.pay {
	border-color: #49976d;
	background: #49976d;
	color: #fff;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button.cancel {
	border-color: #ddd;
	background: transparent;
	color: #b3261e;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:hover {
	opacity: .85;
}

@media (max-width: 767px) {
	.woocommerce-orders-table,
	.woocommerce-orders-table tbody,
	.woocommerce-orders-table tr,
	.woocommerce-orders-table td {
		display: block;
		width: 100%;
	}

	.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-orders-table tr.woocommerce-orders-table__row {
		margin: 0 0 16px;
		padding: 6px 16px 16px;
		border: 1px solid #e5e5e5;
		border-radius: 12px;
	}

	/* Label floats to the start, value sits at the end; floats keep mixed text like "559 for 1 item" together. */
	.woocommerce-orders-table td.woocommerce-orders-table__cell {
		padding: 10px 0;
		border: 0;
		border-bottom: 1px solid #f0f0f0;
		text-align: end;
	}

	.woocommerce-orders-table td.woocommerce-orders-table__cell::after {
		content: "";
		display: table;
		clear: both;
	}

	.woocommerce-orders-table td.woocommerce-orders-table__cell::before {
		content: attr(data-title);
		float: left;
		margin-inline-end: 12px;
		color: #888;
		font-size: 12px;
		text-transform: uppercase;
		text-align: start;
	}

	[dir="rtl"] .woocommerce-orders-table td.woocommerce-orders-table__cell::before {
		float: right;
	}

	.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 14px 0 0;
		border-bottom: 0;
	}

	.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before,
	.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::after {
		display: none;
	}

	.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
		flex: 1 1 calc(50% - 4px);
		min-height: 44px;
		margin: 0;
	}

	.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button.pay {
		flex-basis: 100%;
		font-size: 14px;
	}
}