.qty-widget {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		border-radius: 999px;
		padding: 8px 10px;
		background: #f7f8fc;
		box-shadow: 0 2px 8px rgba(17, 17, 17, 0.06);
		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; }
	}