/**
 * amm - WooCommerce Addons :: Quantity Selector
 *
 * All colours/sizes/spacing come from CSS custom properties written by
 * Settings::render_css_vars() (frontend: on :root, admin preview: on the
 * preview box). This file only defines structure + fallbacks.
 */

.amm-qty {
	--amm-qty-gap: 0px;
	--amm-qty-radius: 6px;
	--amm-qty-height: 40px;
	--amm-qty-skew: 0deg;
	--amm-qty-duration: 150ms;

	--amm-qty-btn-width: 40px;
	--amm-qty-btn-font-size: 16px;
	--amm-qty-btn-bg: #f0f0f0;
	--amm-qty-btn-color: #333;
	--amm-qty-btn-bg-hover: #333;
	--amm-qty-btn-color-hover: #fff;
	--amm-qty-btn-border-width: 0px;
	--amm-qty-btn-border-style: solid;
	--amm-qty-btn-border-color: #d0d0d0;
	--amm-qty-btn-border-color-hover: #333;
	--amm-qty-btn-radius: 0px;

	--amm-qty-input-width: 56px;
	--amm-qty-input-font-size: 16px;
	--amm-qty-input-font-weight: 400;
	--amm-qty-input-color: #333;
	--amm-qty-input-bg: #fff;
	--amm-qty-input-text-align: center;
	--amm-qty-input-border-width: 1px;
	--amm-qty-input-border-style: solid;
	--amm-qty-input-border-color: #d0d0d0;
	--amm-qty-input-border-color-focus: #333;
	--amm-qty-input-radius: 0px;

	display: inline-flex;
	flex: 0 0 auto;
	align-items: stretch;
	gap: var(--amm-qty-gap);
	width: max-content;
	max-width: none;
	height: var(--amm-qty-height);
	border-radius: var(--amm-qty-radius);
	overflow: hidden;
	transform: skewX(var(--amm-qty-skew));
	vertical-align: middle;
}

/* Many themes/page builders size the *original* `.quantity` wrapper for a
   single bare number input (fixed narrow width, sometimes overflow:hidden).
   Our 3-segment control needs more room, so once it's inside, free the
   wrapper up rather than let it clip the "+" button off. */
.quantity:has(> .amm-qty) {
	display: inline-flex !important;
	width: auto !important;
	max-width: none !important;
	overflow: visible !important;
}

/* Counter-skew every direct child so the content itself stays upright even
   though the group is slanted (the "HellenicParts" look). */
.amm-qty > * {
	transform: skewX(calc(var(--amm-qty-skew) * -1));
}

.amm-qty__btn {
	flex: 0 0 auto;
	width: var(--amm-qty-btn-width);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--amm-qty-btn-bg);
	color: var(--amm-qty-btn-color);
	font-size: var(--amm-qty-btn-font-size);
	border: var(--amm-qty-btn-border-width) var(--amm-qty-btn-border-style) var(--amm-qty-btn-border-color);
	border-radius: var(--amm-qty-btn-radius);
	cursor: pointer;
	line-height: 1;
	user-select: none;
	box-sizing: border-box;
	transition:
		background-color var(--amm-qty-duration) ease,
		color var(--amm-qty-duration) ease,
		border-color var(--amm-qty-duration) ease,
		transform var(--amm-qty-duration) ease;
}

.amm-qty__btn:hover {
	background: var(--amm-qty-btn-bg-hover);
	color: var(--amm-qty-btn-color-hover);
	border-color: var(--amm-qty-btn-border-color-hover);
}

.amm-qty--hover-scale .amm-qty__btn:hover {
	transform: skewX(calc(var(--amm-qty-skew) * -1)) scale(1.08);
}

.amm-qty__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

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

.amm-qty__symbol {
	display: inline-flex;
	line-height: 1;
}

.amm-qty__symbol svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.amm-qty__input {
	flex: 0 0 auto;
	width: var(--amm-qty-input-width);
	font-size: var(--amm-qty-input-font-size);
	font-weight: var(--amm-qty-input-font-weight);
	color: var(--amm-qty-input-color);
	background: var(--amm-qty-input-bg);
	text-align: var(--amm-qty-input-text-align);
	border: var(--amm-qty-input-border-width) var(--amm-qty-input-border-style) var(--amm-qty-input-border-color);
	border-radius: var(--amm-qty-input-radius);
	box-sizing: border-box;
	padding: 0 0.25em;
	-moz-appearance: textfield;
	transition: border-color var(--amm-qty-duration) ease;
}

/* Themes / page builders (JetWooBuilder etc.) often ship a rule like
   `.quantity .qty { width: 100%; max-width: 100%; }` scoped through several
   parent classes – that beats our single-class selector above on
   specificity alone and stretches the input, squeezing the "+" button out
   of the (overflow: hidden) wrapper. Restate width/flex here with enough
   force to win regardless of what the theme adds around `.quantity`. */
.quantity .qty.amm-qty__input,
.woocommerce .quantity .qty.amm-qty__input {
	width: var(--amm-qty-input-width) !important;
	max-width: var(--amm-qty-input-width) !important;
	flex: 0 0 auto !important;
}

.amm-qty__input:focus {
	border-color: var(--amm-qty-input-border-color-focus);
	outline: none;
}

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