/**
 * Fardara Custom WooCommerce - Product Page Quantity Field UI/UX
 *
 * Premium pill-style quantity selector with targeted skeleton loading state and quantity label in wrapper container.
 */

/* Product Quantity Container Wrapper */
.fcww-product-qty-wrapper {
	display: inline-flex !important;
	align-items: center !important;
	vertical-align: middle !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Quantity Label HTML Tag Styling */
label.fcww-qty-label-text,
.fcww-qty-label-text {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #1e293b !important;
	display: inline-block !important;
	vertical-align: middle !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	padding: 0 !important;
	user-select: none !important;
	cursor: pointer !important;
}

/* Skeleton Loading State ONLY for Quantity Containers that contain a visible number input */
.quantity:has(input.qty:not([type="hidden"])):not(.fcww-product-qty-selector),
.quantity:has(input[type="number"]:not([type="hidden"])):not(.fcww-product-qty-selector),
.quantity.fcww-has-qty-input:not(.fcww-product-qty-selector) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 124px !important;
	height: 42px !important;
	border-radius: 12px !important;
	border: 1px solid #e2e8f0 !important;
	background: linear-gradient(90deg, #f8fafc 25%, #e2e8f0 50%, #f8fafc 75%) !important;
	background-size: 200% 100% !important;
	animation: fcww-skeleton-shimmer 1.5s infinite ease-in-out !important;
	overflow: hidden !important;
	position: relative !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	vertical-align: middle !important;
}

.quantity:has(input.qty:not([type="hidden"])):not(.fcww-product-qty-selector) input,
.quantity:has(input.qty:not([type="hidden"])):not(.fcww-product-qty-selector) label,
.quantity:has(input.qty:not([type="hidden"])):not(.fcww-product-qty-selector) span,
.quantity.fcww-has-qty-input:not(.fcww-product-qty-selector) input,
.quantity.fcww-has-qty-input:not(.fcww-product-qty-selector) label,
.quantity.fcww-has-qty-input:not(.fcww-product-qty-selector) span {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	position: absolute !important;
}

@keyframes fcww-skeleton-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* Transformed Quantity Selector Component */
.quantity.fcww-product-qty-selector,
.fcww-product-qty-selector {
	display: inline-flex !important;
	align-items: center !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	overflow: hidden !important;
	height: 42px !important;
	width: auto !important;
	box-sizing: border-box !important;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	vertical-align: middle !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	animation: fcww-qty-fadein 0.25s ease-out forwards !important;
}

@keyframes fcww-qty-fadein {
	from {
		opacity: 0.4;
		transform: scale(0.98);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.quantity.fcww-product-qty-selector:hover,
.fcww-product-qty-selector:hover,
.quantity.fcww-product-qty-selector:focus-within,
.fcww-product-qty-selector:focus-within {
	border-color: #cbd5e1 !important;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Quantity Plus/Minus Buttons */
.quantity.fcww-product-qty-selector .fcww-qty-btn,
.fcww-product-qty-selector .fcww-qty-btn {
	background: transparent !important;
	border: none !important;
	color: #334155 !important;
	width: 38px !important;
	min-width: 38px !important;
	height: 40px !important;
	cursor: pointer !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	user-select: none !important;
	-webkit-user-select: none !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
	line-height: 1 !important;
	float: none !important;
}

.quantity.fcww-product-qty-selector .fcww-qty-btn:hover,
.fcww-product-qty-selector .fcww-qty-btn:hover {
	background: #f1f5f9 !important;
	color: #0f172a !important;
}

.quantity.fcww-product-qty-selector .fcww-qty-btn:active,
.fcww-product-qty-selector .fcww-qty-btn:active {
	background: #e2e8f0 !important;
}

.quantity.fcww-product-qty-selector .fcww-qty-btn:disabled,
.fcww-product-qty-selector .fcww-qty-btn:disabled {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	background: transparent !important;
	color: #94a3b8 !important;
}

/* Quantity Input Number & Display Input */
.quantity.fcww-product-qty-selector input.qty,
.fcww-product-qty-selector input.qty,
.quantity.fcww-product-qty-selector input.fcww-qty-display-input,
.fcww-product-qty-selector input.fcww-qty-display-input {
	width: 48px !important;
	min-width: 48px !important;
	max-width: 60px !important;
	height: 40px !important;
	border: none !important;
	border-left: 1px solid #e2e8f0 !important;
	border-right: 1px solid #e2e8f0 !important;
	border-top: none !important;
	border-bottom: none !important;
	background: #ffffff !important;
	text-align: center !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	padding: 0 4px !important;
	margin: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	-moz-appearance: textfield !important;
	float: none !important;
	display: inline-block !important;
	border-radius: 0 !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
}

/* Remove default WebKit/Blink spin buttons */
.quantity.fcww-product-qty-selector input.qty::-webkit-outer-spin-button,
.quantity.fcww-product-qty-selector input.qty::-webkit-inner-spin-button,
.fcww-product-qty-selector input.qty::-webkit-outer-spin-button,
.fcww-product-qty-selector input.qty::-webkit-inner-spin-button,
.quantity.fcww-product-qty-selector input.fcww-qty-display-input::-webkit-outer-spin-button,
.quantity.fcww-product-qty-selector input.fcww-qty-display-input::-webkit-inner-spin-button,
.fcww-product-qty-selector input.fcww-qty-display-input::-webkit-outer-spin-button,
.fcww-product-qty-selector input.fcww-qty-display-input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}