/**
 * WooCommerce Variation Table / Two-Step Table - styles.
 *
 * Full table mode:
 *   Desktop: full table, one column per attribute plus Price/Stock/SKU.
 *   Mobile: same table, horizontally scrollable instead of stacking, so
 *   columns stay aligned and comparable regardless of attribute count.
 *
 * Two-step table mode:
 *   Table 1 lists one row per attribute combination with a checkbox;
 *   choosing one reveals table 2, listing that combination's quantity/
 *   price options with a radio button each. Both replace the native
 *   WooCommerce attribute dropdowns, which are hidden via CSS below.
 */

/* ---------------------------------------------------------------
 * Full table mode
 * --------------------------------------------------------------- */

.wc-variation-table-wrapper {
	margin: 0 0 1.5em;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wc-variation-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 0.9em;
}

.wc-variation-table thead th {
	text-align: left;
	white-space: nowrap;
	padding: 0.6em 0.8em;
	background: #f7f7f7;
	border-bottom: 2px solid #ddd;
	font-weight: 600;
}

.wc-variation-table tbody {
	border: 2px solid #ddd;
    border-top: 0;
    border-radius: 10px;
}

.wc-variation-table tbody td {
	padding: 0.55em 0.8em;
	border-bottom: 1px solid #eee;
	white-space: nowrap;
	vertical-align: middle;
}

.wc-variation-table-row {
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.wc-variation-table-row:hover,
.wc-variation-table-row:focus {
	background-color: #f5f5f5;
	outline: none;
}

.wc-variation-table-row.wc-vt-row-active {
	background-color: #eef6ec;
	box-shadow: inset 3px 0 0 #7ab55c;
}

.wc-vt-price ins {
	text-decoration: none;
}

.wc-vt-price del {
	opacity: 0.6;
	margin-right: 0.4em;
}

.wc-vt-stock .stock.in-stock {
	color: #2e7d32;
}

.wc-vt-stock .stock.out-of-stock {
	color: #c62828;
}

.wc-vt-sku {
	color: #666;
}

/* Mobile: keep the table intact and scroll horizontally rather than
   collapsing columns into stacked rows, per requirement. */
@media screen and ( max-width: 782px ) {
	.wc-variation-table {
		font-size: 0.85em;
	}

	.wc-variation-table thead th,
	.wc-variation-table tbody td {
		padding: 0.5em 0.65em;
	}
}

/* ---------------------------------------------------------------
 * Two-step table mode
 * --------------------------------------------------------------- */
 
 .wc-vt-two-step-wrapper .table-main {
     width: 100%;
     overflow: auto;
 }

.wc-vt-combo-table,
.wc-vt-qty-table {
	min-width: 0;
	width: 100%;
	border: 1px solid #eee;
	border-radius: 10px;
	overflow: hidden;
}

.wc-vt-combo-table thead th,
.wc-vt-qty-table thead th {
	background: #16321a;
	color: #fff;
	text-align: center;
	font-weight: 800;
	font-size: 0.82em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-bottom: none;
}

.wc-vt-combo-table tbody td,
.wc-vt-qty-table tbody td {
	text-align: center;
}

.wc-vt-combo-table tbody tr:nth-child( even ) td,
.wc-vt-qty-table tbody tr:nth-child( even ) td {
	background: #fafafa;
}

.wc-vt-combo-row,
.wc-vt-qty-row {
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.wc-vt-combo-row:hover td,
.wc-vt-qty-row:hover td,
.wc-vt-combo-table tbody td.wc-vt-size-cell:hover {
	background-color: #e3f0dc;
}

.wc-vt-combo-row.wc-vt-row-active td,
.wc-vt-qty-row.wc-vt-row-active td,
.wc-vt-combo-table tbody td.wc-vt-size-cell.wc-vt-row-active {
    background-color: #59795e !important;
    color: #fff;
}

.wc-vt-combo-row.wc-vt-row-active,
.wc-vt-qty-row.wc-vt-row-active {
	box-shadow: inset 3px 0 0 #7ab55c;
}

.wc-vt-col-select {
	width: 3em;
}

.wc-vt-combo-checkbox,
.wc-vt-qty-radio {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: #16321a;
	cursor: pointer;
}

.wc-vt-qty-wrapper {
	margin-top: 1.25em;
}

/* Hide the native per-attribute dropdowns once the two-step tables have
   taken over driving the same underlying form - the real <select>
   elements stay in the DOM (still submitted/read by WooCommerce), they
   are only visually hidden. */
.wc-vt-two-step-wrapper ~ .variations_form .variations {
	display: none;
}

input.input-text.qty.text.wcmmq-qty-input-box {
    display: none !important;
}

.woocommerce-js div.product form.cart table td {
    padding-left: 1em;
}