/**
 * Quantity Selector Styles
 */

/* Wrapper for quantity selector */
.quantity {
	display: inline-flex;
	align-items: center;
	gap: 0;
	position: relative;
}

/* Hide default spinner arrows - Force removal */
input[type="number"].qty::-webkit-inner-spin-button,
input[type="number"].qty::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button,
.quantity input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
	display: none !important;
}

input[type="number"].qty,
.quantity input[type="number"] {
	-moz-appearance: textfield !important;
	appearance: textfield !important;
}

/* Additional override for any theme styles */
input.qty::-webkit-inner-spin-button,
input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
	display: none !important;
}

/* Quantity input field */
.quantity .qty {
	width: 60px;
	height: 45px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	border: 1px solid #ddd;
	border-left: none;
	border-right: none;
	background: #fff;
	color: #333;
	margin: 0;
	padding: 0;
	outline: none;
	transition: border-color 0.3s ease;
}

.quantity .qty:focus {
	border-color: #999;
}

/* Quantity buttons */
.quantity-button {
	width: 45px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8f9fa;
	border: 1px solid #ddd;
	color: #333;
	font-size: 20px;
	font-weight: 300;
	cursor: pointer;
	transition: all 0.3s ease;
	user-select: none;
	line-height: 1;
	padding: 0;
}

.quantity-button:hover:not(.disabled) {
	background: #e9ecef;
	border-color: #999;
}

.quantity-button:active:not(.disabled) {
	background: #dee2e6;
	transform: scale(0.95);
}

/* Minus button - left side */
.quantity-button.minus {
	border-radius: 6px 0 0 6px;
}

/* Plus button - right side */
.quantity-button.plus {
	border-radius: 0 6px 6px 0;
}

/* Disabled state */
.quantity-button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: #f8f9fa;
}

/* Alternative rounded style */
.quantity.rounded .quantity-button.minus {
	border-radius: 50% 0 0 50%;
}

.quantity.rounded .quantity-button.plus {
	border-radius: 0 50% 50% 0;
}

/* Responsive */
@media (max-width: 768px) {
	.quantity .qty {
		width: 50px;
		height: 40px;
		font-size: 14px;
	}

	.quantity-button {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}
}