/* Importa un font pulito da Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Contenitore principale e stili di base */
.ethwdgt-orders-container {
	width: 100%;
	max-width: 1100px;
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	margin: 2rem auto;
	font-family: 'Inter', sans-serif;
	color: #374151;
}

/* Stile della tabella */
.ethwdgt-orders-table {
	width: 100%;
	border-collapse: collapse;
}

.ethwdgt-orders-table th,
.ethwdgt-orders-table td {
	padding: 16px 24px;
	text-align: left;
	font-size: 14px;
	vertical-align: middle;
}

.ethwdgt-orders-table thead {
	border-bottom: 1px solid #e5e7eb;
}

.ethwdgt-orders-table th {
	color: #6b7280;
	font-weight: 500;
	text-transform: capitalize;
}

.ethwdgt-orders-table tbody tr {
	border-bottom: 1px solid #e5e7eb;
}

.ethwdgt-orders-table tbody tr:last-child {
	border-bottom: none;
}

/* Cella dell'articolo (immagine + nome) */
.ethwdgt-order-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ethwdgt-order-item img {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	object-fit: cover;
}

.ethwdgt-order-item .ethwdgt-item-name {
	font-weight: 500;
	color: #111827;
}

/* Tag di stato (compatibili con le classi del tuo PHP) */
.ethwdgt-status-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	border-radius: 9999px;
	font-weight: 500;
	font-size: 13px;
}

.ethwdgt-status-tag::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.ethwdgt-status-in-progress,
.ethwdgt-status-on-hold,
.ethwdgt-status-pending,
.ethwdgt-status-processing {
	background-color: #f0f0f8;
	color: #5a5a8e;
}
.ethwdgt-status-in-progress::before,
.ethwdgt-status-on-hold::before,
.ethwdgt-status-pending::before,
.ethwdgt-status-processing::before {
	background-color: #8b8bcc;
}

.ethwdgt-status-delivered,
.ethwdgt-status-publish,
.ethwdgt-status-completed {
	background-color: #ecfdf5;
	color: #067647;
}
.ethwdgt-status-delivered::before,
.ethwdgt-status-publish::before,
.ethwdgt-status-completed::before {
	background-color: #10b981;
}

.ethwdgt-status-not-delivered,
.ethwdgt-status-draft,
.ethwdgt-status-failed,
.ethwdgt-status-cancelled,
.ethwdgt-status-refunded {
	background-color: #fef2f2;
	color: #b91c1c;
}
.ethwdgt-status-not-delivered::before,
.ethwdgt-status-draft::before,
.ethwdgt-status-failed::before,
.ethwdgt-status-cancelled::before,
.ethwdgt-status-refunded::before {
	background-color: #ef4444;
}


/* --- INIZIO BLOCCO REGOLE PAGINAZIONE (Fix'd) --- */

.ethwdgt-pagination-container {
	padding: 16px 24px;
	border-top: 1px solid #e5e7eb;
}

.ethwdgt-pagination-container .page-numbers {
	display: flex;
	align-items: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.ethwdgt-pagination-container .page-numbers li {
	display: contents;
}

.ethwdgt-pagination-container .page-numbers .prev {
	margin-right: auto;
}
.ethwdgt-pagination-container .page-numbers .next {
	margin-left: auto;
}

/* Stile di base per TUTTI gli elementi (a e span) */
.ethwdgt-pagination-container .page-numbers a,
.ethwdgt-pagination-container .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #6b7280;
	font-weight: 500;
	font-size: 14px;
	height: 40px;
	border-radius: 8px;
	transition: background-color 0.2s, color 0.2s;
	background: transparent;
	border: none;
	box-sizing: border-box;
}

/* Stile SOLO per i NUMERI e i PUNTINI (...) */
.ethwdgt-pagination-container .page-numbers a:not(.prev):not(.next),
.ethwdgt-pagination-container .page-numbers span:not(.prev):not(.next) {
	width: 40px; /* Li rende quadrati */
}

/* Stile SOLO per PREVIOUS e NEXT */
.ethwdgt-pagination-container .page-numbers .prev,
.ethwdgt-pagination-container .page-numbers .next {
	width: auto; /* Larghezza variabile basata sul contenuto */
	padding: 0 12px; /* Padding orizzontale per dare spazio */
	gap: 8px; /* Spazio tra testo e freccia */
}

/* Aggiunta delle FRECCE solo a PREVIOUS e NEXT */
.ethwdgt-pagination-container .page-numbers .prev::before {
	content: '←';
}
.ethwdgt-pagination-container .page-numbers .next::after {
	content: '→';
}

/* Stile per la pagina ATTIVA */
.ethwdgt-pagination-container .page-numbers span.current {
	background-color: #f3f4f6;
	color: #111827;
	font-weight: 600;
}

/* Stile per lo stato DISABILITATO */
.ethwdgt-pagination-container .page-numbers .disabled {
	color: #c7cdd1;
	cursor: default;
}

/* Effetto HOVER solo per i link cliccabili (non per gli span) */
.ethwdgt-pagination-container .page-numbers a:hover {
	background-color: #f3f4f6;
	color: #111827;
}

/* Rimuove l'hover anche se un link ha la classe disabled (per sicurezza) */
.ethwdgt-pagination-container .page-numbers a.disabled:hover {
	background-color: transparent;
	color: #c7cdd1;
}

/* --- FINE BLOCCO PAGINAZIONE --- */


/* Media Query (Responsive) */
@media (max-width: 768px) {
	.ethwdgt-orders-table thead {
		display: none;
	}
	.ethwdgt-orders-table tr {
		display: block;
		border-bottom: 2px solid #e5e7eb;
		margin-bottom: 24px;
		padding-bottom: 16px;
	}
	.ethwdgt-orders-table tr:last-child {
		margin-bottom: 0;
		border-bottom: none;
		padding-bottom: 0;
	}
	.ethwdgt-orders-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 16px;
		text-align: right;
		border-bottom: 1px solid #f3f4f6;
	}
	.ethwdgt-orders-table td:first-child {
		padding-top: 16px;
	}
	.ethwdgt-orders-table td:last-child {
		border-bottom: none;
	}
	.ethwdgt-orders-table td::before {
		content: attr(data-label);
		font-weight: 500;
		text-align: left;
		color: #6b7280;
	}
	.ethwdgt-orders-table td.ethwdgt-order-item-cell {
		justify-content: flex-start;
	}
	.ethwdgt-orders-table td.ethwdgt-order-item-cell::before {
		display: none;
	}

	.ethwdgt-pagination-container .page-numbers {
		justify-content: center;
	}
	.ethwdgt-pagination-container .page-numbers .prev {
		margin-right: 16px;
	}
	.ethwdgt-pagination-container .page-numbers .next {
		margin-left: 16px;
	}

	@media (max-width: 480px) {
		.ethwdgt-pagination-container .page-numbers .dots,
		.ethwdgt-pagination-container .page-numbers a:not(.prev):not(.next) {
			display: none;
		}
		.ethwdgt-pagination-container .page-numbers .prev {
			margin-right: auto;
		}
		.ethwdgt-pagination-container .page-numbers .next {
			margin-left: auto;
		}
		.ethwdgt-pagination-container .page-numbers span.current {
			display: inline-flex;
		}
	}
}