/**
 * Number-input stepper (gc-stepper.js). A [-] [input] [+] control that
 * fills its container (column) with the input growing between the
 * buttons; built on Bootstrap's .input-group. Hides the native spinner
 * arrows so the +/- buttons are the only control.
 */

/* Promote an inline wrapper (CF7's <span class="wpcf7-form-control-wrap">
   and similar) to block so the group can size to the column width. */
.gc-stepper-host {
	display: block;
	width: 100%;
}

.gc-stepper-group {
	display: flex;
	width: 100%;
	max-width: 100%;
	flex-wrap: nowrap;
	vertical-align: middle;
}

.gc-stepper-group .gc-stepper-btn {
	flex: 0 0 auto;
	min-width: 2.75rem;
	font-weight: 600;
	line-height: 1;
}

/* Input grows to fill the column between the buttons. Bootstrap's
   `.input-group > .form-control` sets `width:1%; min-width:0`, which
   would collapse the field — override with a real grow + min-width.
   Selector (0,3,0) beats BS's (0,2,0) regardless of load order. */
.gc-stepper-group .gc-stepper-input.form-control {
	flex: 1 1 auto;
	width: auto;
	min-width: 3rem;
	text-align: center;
}

/* Hide the browser's native number spinners (buttons replace them). */
.gc-stepper-input::-webkit-outer-spin-button,
.gc-stepper-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.gc-stepper-input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}