.qty-widget {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 8px;
padding: 8px 10px;
direction: rtl;
margin: 16px;
}

.qty-badge {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff;
border-radius: 999px;
padding: 6px 12px;
font-weight: 600;
font-size: 14px;
line-height: 1;
display: flex;
align-items: center;
}

/* Buttons */
.qty-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
text-decoration: none;
font-size: 20px;
font-weight: 700;
user-select: none;
border: 1px solid rgba(17,17,17,0.06);
background: #ffffff;
color: #111;
transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
cursor: pointer;
}
.qty-btn:hover { box-shadow: 0 4px 10px rgba(17,17,17,0.1); }
.qty-btn:active { transform: translateY(1px) scale(0.98); }

/* Angular visibility helper */
.ng-hide { display: none !important; }

/* Input */
.qty-input {
width: 74px;
height: 36px;
border: 1px solid rgba(17,17,17,0.08);
background: #fff;
border-radius: 10px;
text-align: center;
font-weight: 700;
font-size: 15px;
color: #111;
outline: none;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.qty-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.15);
}
/* Remove number input spinners */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input { -moz-appearance: textfield; }

/* Responsive */
@media (max-width: 480px) {
.qty-widget { gap: 6px; padding: 6px 8px; }
.qty-btn { width: 34px; height: 34px; font-size: 18px; }
.qty-input { width: 64px; height: 34px; font-size: 14px; }
.qty-badge { font-size: 13px; padding: 5px 10px; }
}