/**
 * WooCommerce Dynamic Variation Table — Styles
 *
 * Clean, responsive HTML table styling with horizontal scrolling
 * for mobile. RTL-aware using logical CSS properties.
 *
 * @package WooCommerceDynamicVariationTable
 * @since   1.0.0
 */

/* Wrapper: enables horizontal scroll on small screens. */
.wcdvt-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	max-width: 100%;
	margin: 1.5em 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #1e1e1e;
}

/* Base table. */
.wcdvt-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	text-align: start;
	direction: ltr;
}

/* RTL support: inherit direction from document. */
html[dir="rtl"] .wcdvt-table {
	direction: rtl;
	text-align: right;
}

/* Header cells. */
.wcdvt-table thead th {
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #555;
	background-color: #f9f9f9;
	padding: 10px 14px;
	border-bottom: 2px solid #e0e0e0;
	white-space: nowrap;
}

/* Price header — push to inline-end. */
.wcdvt-table__header--price {
	text-align: end;
}

/* Body cells. */
.wcdvt-table tbody td {
	padding: 9px 14px;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
	white-space: nowrap;
}

/* Zebra striping for rows. */
.wcdvt-table tbody tr:nth-child(even) {
	background-color: #fafafa;
}

/* Hover state. */
.wcdvt-table tbody tr:hover {
	background-color: #f0f4ff;
}

/* Price cell — right-aligned (LTR) / left-aligned (RTL). */
.wcdvt-table__cell--price {
	text-align: end;
	font-weight: 600;
	color: #222;
	white-space: nowrap;
}

/* Sale price styling. */
.wcdvt-table__cell--price del {
	color: #999;
	font-size: 0.85em;
	font-weight: 400;
	margin-inline-start: 4px;
}

.wcdvt-table__cell--price .woocommerce-Price-amount.amount {
	color: #c0392b;
}

/* Empty price text (e.g., "تماس بگیرید"). */
.wcdvt-table__cell--price:empty::before {
	content: "—";
	color: #999;
}

/* Error/notice inside the wrapper. */
.wcdvt-table__notice {
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 14px;
}

.wcdvt-table__notice--error {
	background-color: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}

/* Responsive: hint for users on very narrow screens. */
@media screen and (max-width: 480px) {
	.wcdvt-table-wrapper {
		font-size: 13px;
	}

	.wcdvt-table thead th,
	.wcdvt-table tbody td {
		padding: 7px 10px;
	}
}