/**
 * Fibre Systems Core — quantity +/- control styling.
 *
 * LIGHT-ON-DARK UI (product pages use a dark hero background).
 * !important is used deliberately: Elementor/Elementor Pro emit very high-specificity
 * selectors (e.g. `.elementor-3313 .elementor-element-xxxx .quantity .qty`) that otherwise
 * override plugin CSS. Overriding them is the pragmatic, intended behaviour here.
 *
 * Colours are exposed as CSS variables so a light-background context can re-theme by
 * setting --fsc-qty-* on a parent, without editing this file.
 */
.quantity.fsc-qty-ready {
	--fsc-qty-border: rgba( 255, 255, 255, 0.28 );
	--fsc-qty-btn-bg: rgba( 255, 255, 255, 0.10 );
	--fsc-qty-btn-bg-hover: rgba( 255, 255, 255, 0.22 );
	--fsc-qty-btn-color: #ffffff;
	--fsc-qty-input-color: #ffffff;
	--fsc-qty-focus: #4ea3ff;

	display: inline-flex !important;
	align-items: stretch !important;
	width: auto !important;
	overflow: hidden !important;
	border: 1px solid var( --fsc-qty-border ) !important;
	border-radius: 10px !important;
	background: transparent !important;
	padding: 0 !important;
}

.quantity.fsc-qty-ready input.qty {
	width: 3em !important;
	min-width: 3em !important;
	height: auto !important;
	text-align: center !important;
	border: 0 !important;
	border-left: 1px solid var( --fsc-qty-border ) !important;
	border-right: 1px solid var( --fsc-qty-border ) !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0.5em 0.25em !important;
	background: transparent !important;
	color: var( --fsc-qty-input-color ) !important;
	box-shadow: none !important;
	-moz-appearance: textfield !important;
	appearance: textfield !important;
}

.quantity.fsc-qty-ready input.qty::-webkit-outer-spin-button,
.quantity.fsc-qty-ready input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.quantity.fsc-qty-ready .fsc-qty-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.6em !important;
	min-width: 2.6em !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var( --fsc-qty-btn-bg ) !important;
	color: var( --fsc-qty-btn-color ) !important;
	font-size: 1.15em !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background 0.15s ease !important;
	-webkit-user-select: none !important;
	user-select: none !important;
}

.quantity.fsc-qty-ready .fsc-qty-btn:hover,
.quantity.fsc-qty-ready .fsc-qty-btn:focus {
	background: var( --fsc-qty-btn-bg-hover ) !important;
	color: var( --fsc-qty-btn-color ) !important;
}

.quantity.fsc-qty-ready .fsc-qty-btn:focus-visible {
	outline: 2px solid var( --fsc-qty-focus ) !important;
	outline-offset: -2px !important;
}