/**
 * AJAX Quantity Stepper for WooCommerce — styling.
 * Selectors are scoped under .aqswc-stepper and kept reasonably specific
 * so they hold up against Divi's own aggressive theme CSS. Adjust colors
 * below to match your brand.
 */

.aqswc-stepper {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}

.aqswc-stepper .aqswc-add-btn {
	background: #2c2c2c;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.aqswc-stepper .aqswc-add-btn:hover {
	background: #444;
}

.aqswc-stepper .aqswc-qty-controls {
	display: inline-flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}

.aqswc-stepper .aqswc-qty-controls button {
	background: transparent;
	border: none;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: #2c2c2c;
	transition: background 0.15s ease;
}

.aqswc-stepper .aqswc-qty-controls button:hover:not(:disabled) {
	background: #f2f2f2;
}

.aqswc-stepper .aqswc-qty-controls button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.aqswc-stepper .aqswc-qty-value {
	min-width: 24px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #2c2c2c;
}

/* Minus button: shows a minus glyph by default, swaps to a trash icon
   when quantity is 1 (i.e. the next click removes the item). */
.aqswc-stepper .aqswc-minus .aqswc-icon-trash {
	display: none;
}

.aqswc-stepper .aqswc-minus.aqswc-trash .aqswc-icon-minus {
	display: none;
}

.aqswc-stepper .aqswc-minus.aqswc-trash .aqswc-icon-trash {
	display: inline-flex;
	color: #c0392b;
}

/* Loading state: dim slightly and block interaction while a request is in flight. */
.aqswc-stepper.aqswc-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Brief error flash if a request fails. */
.aqswc-stepper.aqswc-error .aqswc-qty-controls,
.aqswc-stepper.aqswc-error .aqswc-add-btn {
	box-shadow: 0 0 0 2px #c0392b;
}
