/**
 * Eko Grid — Orders table redesign.
 * Loaded only on is_account_page() && is_wc_endpoint_url('orders').
 */

/* -------------------------------------------------------------------------
   Table as soft card rows (keep <table> for a11y / WC hooks)
   ------------------------------------------------------------------------- */

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table {
	width: 100%;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 0.65rem;
	background: transparent;
	table-layout: auto;
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table thead th {
	padding: 0 0.85rem 0.35rem;
	border: 0;
	background: transparent;
	color: var(--eko-grid-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody tr.order {
	background: var(--eko-grid-surface-elevated);
	box-shadow: var(--eko-grid-shadow);
	transition: var(--eko-grid-transition);
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody tr.order:hover {
	box-shadow: 0 2px 4px rgba(36, 48, 65, 0.05), 0 8px 20px rgba(36, 48, 65, 0.07);
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody th,
body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody td {
	padding: 0.9rem 0.85rem;
	border: 0;
	vertical-align: middle;
	text-align: left;
	color: var(--eko-grid-text);
	background: transparent;
	line-height: 1.3;
	font-size: 0.9375rem;
}

/* Desktop: kill leftover responsive label pseudo-elements if any */
@media (min-width: 768px) {
	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody th::before,
	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody td::before,
	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody th::after,
	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody td::after {
		content: none !important;
		display: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody th:first-child,
body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody td:first-child {
	border-radius: var(--eko-grid-radius) 0 0 var(--eko-grid-radius);
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody th:last-child,
body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody td:last-child {
	border-radius: 0 var(--eko-grid-radius) var(--eko-grid-radius) 0;
}

/* ID — th inherits bold; keep single-line compact cell */
body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-number {
	font-weight: 400;
	white-space: nowrap;
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
	display: inline-flex;
	align-items: center;
	color: var(--eko-grid-text);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.3;
	text-decoration: none;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover {
	color: var(--eko-grid-primary);
}

/* Tracking */
body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .eko-grid-orders__tracking {
	display: inline-block;
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--eko-grid-text);
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .eko-grid-orders__tracking--empty {
	color: var(--eko-grid-muted);
	opacity: 0.65;
}

/* Date */
body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-date,
body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .eko-grid-orders__date {
	color: var(--eko-grid-muted);
	font-size: 0.875rem;
	line-height: 1.3;
	white-space: nowrap;
}

/* Total — price + items stacked */
body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-total {
	font-weight: 400;
	white-space: normal;
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .eko-grid-orders__total {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	line-height: 1.25;
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .eko-grid-orders__total-amount {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--eko-grid-text);
	line-height: 1.25;
	white-space: nowrap;
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .eko-grid-orders__total-items {
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--eko-grid-muted);
	white-space: nowrap;
}

/* Status badge stays single-line in cell */
body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-status .eko-grid-badge {
	vertical-align: middle;
}

/* -------------------------------------------------------------------------
   Action buttons
   ------------------------------------------------------------------------- */

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
	white-space: nowrap;
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .woocommerce-button,
body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button,
body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .eko-grid-orders__view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	min-height: 2.25rem;
	margin: 0 0.3rem 0 0;
	padding: 0.4rem 0.85rem;
	border: 1px solid transparent;
	border-radius: var(--eko-grid-radius-sm);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: none;
	transition: var(--eko-grid-transition);
	vertical-align: middle;
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button.pay {
	background: var(--eko-grid-success-soft);
	color: var(--eko-grid-success);
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button.pay:hover {
	background: var(--eko-grid-success);
	color: #fff;
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button.cancel {
	background: var(--eko-grid-danger-soft);
	color: var(--eko-grid-danger);
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button.cancel:hover {
	background: var(--eko-grid-danger);
	color: #fff;
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .eko-grid-orders__view {
	margin-right: 0;
	background: var(--eko-grid-primary-soft);
	color: var(--eko-grid-primary);
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .eko-grid-orders__view:hover {
	background: var(--eko-grid-primary);
	color: #fff;
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .eko-grid-orders__view:focus-visible,
body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:focus-visible {
	outline: 2px solid var(--eko-grid-primary);
	outline-offset: 2px;
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .eko-grid-orders__view::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 5c-5 0-9.27 3.11-11 7 1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 5c-5 0-9.27 3.11-11 7 1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-view {
	text-align: right;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Mobile — card hierarchy (not a squeezed desktop table)
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table {
		border-spacing: 0;
	}

	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content table.shop_table_responsive.woocommerce-orders-table thead {
		display: none;
	}

	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content table.shop_table_responsive.woocommerce-orders-table tbody tr.order {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.55rem 0.75rem;
		margin: 0 0 0.85rem;
		padding: 1rem;
		border-radius: var(--eko-grid-radius);
		align-items: center;
	}

	/*
	 * !important: WC smallscreen hides tbody th and forces block + text-align on td.
	 */
	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content table.shop_table_responsive.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number {
		display: flex !important;
		order: 1;
		align-items: center;
		padding: 0;
		border: 0;
		border-radius: 0;
	}

	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content table.shop_table_responsive.woocommerce-orders-table tbody td {
		display: block !important;
		width: auto;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0;
		text-align: left !important;
	}

	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content table.shop_table_responsive.woocommerce-orders-table tbody td::before,
	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content table.shop_table_responsive.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number::before {
		display: none;
		content: none;
	}

	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status {
		order: 2;
		justify-self: end;
		text-align: right !important;
	}

	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-date {
		order: 3;
	}

	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-total {
		order: 4;
		justify-self: end;
		text-align: right !important;
	}

	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .eko-grid-orders__total {
		align-items: flex-end;
	}

	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-tracking {
		order: 5;
		grid-column: 1 / -1;
		padding-top: 0.35rem !important;
		color: var(--eko-grid-muted);
		font-size: 0.875rem;
	}

	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
		order: 6;
		display: flex !important;
		flex-wrap: wrap;
		gap: 0.35rem;
		align-items: center;
	}

	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-view {
		order: 7;
		justify-self: end;
		text-align: right !important;
	}

	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
		margin: 0;
	}

	/* Visualizar: icon only */
	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .eko-grid-orders__view-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	body.eko-grid-orders.eko-grid-my-account .woocommerce-MyAccount-content .eko-grid-orders__view {
		min-width: 2.75rem;
		min-height: 2.75rem;
		padding-left: 0.7rem;
		padding-right: 0.7rem;
	}
}