/**
 * EasyWoo Variation Swatches — Add to Cart UI
 *
 * Styles for the custom variable.php template:
 * - Selected attribute label
 * - Custom quantity stepper
 * - Custom Add to Cart button
 *
 * @package EasyWoo_Variation_Swatches
 */

/* =========================================================
   Selected attribute label
   ========================================================= */
.easywoo-selected-attribute-label {
	display: inline-block;
	font-size: 0.9em;
	color: #666;
	font-weight: 400;
}

.easywoo-selected-attribute-label:not(:empty)::before {
	content: '(';
}

.easywoo-selected-attribute-label:not(:empty)::after {
	content: ')';
}

/* =========================================================
   Vertical attribute layout
   ========================================================= */
.easywoo-attribute-row {
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

.easywoo-attribute-row:last-child {
	border-bottom: none;
}

.easywoo-attribute-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.easywoo-attribute-header label {
	margin: 0;
	font-size: 1rem;
	color: #333;
}

.easywoo-attribute-swatches {
	/* Swatches container already styled by variation-swatches.css */
}
.easywoo-variations{
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	table-layout: fixed;
	empty-cells: show;
}
.easywoo-variations tbody{
	border: none;
}
/* Clear link positioning */
.reset_variations {
	display: none!important; /* Hidden by default, shown when needed via JS */
}

/* Override Bricks theme CSS that hides tr:has(td[colspan]):not(:has(.reset_variations)) */
form.cart table.variations tr.easywoo-variation-row,
form.woocommerce-cart-form table.variations tr.easywoo-variation-row {
	display: table-row !important;
	border: none;
}

/* =========================================================
   Quantity stepper
   ========================================================= */
.easywoo-quantity-wrap {
	display: inline-flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
	height: 44px;
	margin-right: 10px;
	vertical-align: middle;
}

.easywoo-qty-btn {
    display: inline-flex;
    width: 36px;
    height: 100%;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #333;
    padding: 0;
    transition: background 0.15s;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}

.easywoo-qty-btn:hover {
	background: #e8e8e8;
}

.easywoo-qty-btn:active {
	background: #ddd;
}

.easywoo-quantity-wrap .input-text.qty {
	width: 48px;
	height: 100%;
	border: none;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	text-align: center;
	font-size: 14px;
	-moz-appearance: textfield;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

.easywoo-quantity-wrap .input-text.qty::-webkit-inner-spin-button,
.easywoo-quantity-wrap .input-text.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* =========================================================
   Add to Cart button
   ========================================================= */
.easywoo-add-to-cart-btn {
	height: 44px;
	padding: 0 24px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 4px;
	vertical-align: middle;
	cursor: pointer;
	transition: opacity 0.2s, transform 0.1s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
}

.easywoo-add-to-cart-btn:hover {
	opacity: 0.9;
}

.easywoo-add-to-cart-btn:active {
	transform: scale(0.98);
}

.easywoo-add-to-cart-btn.loading {
	opacity: 0.7;
	pointer-events: none;
}

.easywoo-add-to-cart-btn.added {
	/* Inherits WooCommerce .added state — theme can override */
}

/* =========================================================
   Variation price
   The .woocommerce-variation-price block is filled by WC JS.
   We add spacing to distinguish it from the base price.
   ========================================================= */
.single_variation_wrap .woocommerce-variation-price {
	margin:0;
}

/* =========================================================
   Layout: row of qty + button
   ========================================================= */
.woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin:0;
}

.form.cart .woocommerce-variation:not(:empty), form.woocommerce-cart-form .woocommerce-variation:not(:empty){
	margin: 0;
}