.qty-container {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
display: inline-block;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #374151;
font-size: 0.9rem;
}
.qty-selector {
display: flex;
align-items: center;
border: 1px solid #d1d5db;
border-radius: 8px;
overflow: hidden;
width: 120px;
}
.qty-btn {
width: 35px;
height: 35px;
border: none;
background: #f9fafb;
cursor: pointer;
font-size: 1.2rem;
color: #374151;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.qty-btn:hover {
background: #e5e7eb;
}
.qty-input {
width: 50px;
height: 35px;
border: none;
border-left: 1px solid #d1d5db;
border-right: 1px solid #d1d5db;
text-align: center;
font-size: 1rem;
-moz-appearance: textfield;
outline: none;
color: #1f2937;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
const minusBtn = document.querySelector(".minus");
const plusBtn = document.querySelector(".plus");
const input = document.querySelector(".qty-input");
minusBtn.addEventListener("click", () => {
let val = parseInt(input.value);
if (val > 1) {
input.value = val - 1;
}
});
plusBtn.addEventListener("click", () => {
let val = parseInt(input.value);
if (val < 10) {
input.value = val + 1;
}
});
