/* ----------------------------------------
   Nova Quantity Stepper — Shared Component
   ----------------------------------------
   Base .nova-qty styles + size variants:
     --lg : PDP (64px pill, 152px wide)
     --sm : Cart drawer (32px, compact)
   ---------------------------------------- */

/* === BASE === */
/* 
.nova-qty {
	display: inline-flex;
	align-items: center;
} */

.nova-qty__btn {
	flex-shrink: 0;
	/* display: flex; */
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--nova-text-dark, #0a0a0e);
	background: transparent;
	border: none;
	transition: color 0.15s ease;
	line-height: 1;
}

.nova-qty__btn:hover {
	color: var(--nova-accent, #8a4fff);
}

.nova-qty__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.nova-qty__btn:disabled:hover {
	color: var(--nova-text-dark, #0a0a0e);
}

.nova-qty__input {
	border-radius: 88px !important;
	text-align: center;
	/* border: none !important; */
	background: transparent;
	font-family: var(--nova-font-body, 'Inter', sans-serif);
	color: var(--nova-text-dark, #0a0a0e);
	-moz-appearance: textfield;
	appearance: textfield;
	outline: none;
	box-shadow: none;
	margin: 0;
	padding: 0;
}

.nova-qty__input::-webkit-inner-spin-button,
.nova-qty__input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}


/* Hide spinner arrows for Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* === LARGE (PDP) === */

.nova-qty--lg .nova-qty__input {
	height: 64px !important;
    width: 152px;
	font-size:20px !important;
}

.nova-qty--lg .nova-qty__minus {
	margin-right: -50px;
    position: relative;
    z-index: 3;
    vertical-align: middle;
}

.nova-qty--lg .nova-qty__plus {
	
	margin-left: -50px;
    position: relative;
    z-index: 3;
    vertical-align: middle;
}

.nova-qty--lg .nova-qty__btn svg {
	width: 20px;
	height: 20px;
}

/* === SMALL (Cart Drawer) === */

.nova-qty--sm {
	/* height: 32px;
	border: 1px solid var(--nova-border-light, #e5e5e5);
	border-radius: 6px;
	background: transparent; */
}

.nova-qty--sm .nova-qty__btn {
	position: relative;
    z-index: 3;
    vertical-align: text-top;
}

.nova-qty--sm .nova-qty__btn svg {
	width: 16px;
    height: 16px;
	display: block;
}


.nova-qty--sm .nova-qty__minus {
	margin-right: -35px;
    
}

.nova-qty--sm .nova-qty__plus {
	margin-left: -35px;
}


.nova-qty--sm .nova-qty__input {
	width: 104px;
	height: 40px;
	background: var(--nova-surface-light);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	border: none;
}

/* === MOBILE === */

@media (max-width: 768px) {
	.nova-qty--lg {
		/* height: 56px;
		width: 130px;
		min-width: 130px; */
	}

	.nova-qty--lg .nova-qty__btn {
		/* width: 48px;
		height: 56px; */
	}

	.nova-qty--lg .nova-qty__input {
		/* font-size: 16px; */
	}

	/* Generic .nova-qty-stepper component (used outside PDP/cart-drawer where
	   --lg / --sm modifiers aren't present). Compact 32px secondary touch
	   target per Plan 7 cart-drawer pattern. iOS 16px input prevents zoom. */
	.nova-qty-stepper {
		min-height: 32px;
	}

	.nova-qty-stepper__btn,
	.nova-qty-stepper .nova-qty__btn {
		width: 32px;
		height: 32px;
		font-size: 16px;
	}

	.nova-qty-stepper__input,
	.nova-qty-stepper input[type="number"],
	.nova-qty-stepper .quantity-input {
		width: 36px;
		font-size: 16px; /* iOS 16px to prevent zoom on focus */
	}
}

@media (max-width: 480px) {
	.nova-qty-stepper {
		min-height: 30px;
	}

	.nova-qty-stepper__btn,
	.nova-qty-stepper .nova-qty__btn {
		width: 30px;
		height: 30px;
	}

	.nova-qty-stepper__input,
	.nova-qty-stepper input[type="number"],
	.nova-qty-stepper .quantity-input {
		width: 34px;
		font-size: 16px; /* iOS 16px */
	}
}