/*
 * Styling for the Outlaws pre-order form. Field boxes and the CTA button use
 * plain CSS custom properties so a theme/Elementor can override colors
 * without fighting specificity — nothing here is hard-coded beyond sane
 * fallbacks.
 */

.outlaws-preorder-wrapper {
	--outlaws-preorder-border-color: #1a1a1a;
	--outlaws-preorder-text-color: #1a1a1a;
	--outlaws-preorder-muted-color: #6b6b6b;
	--outlaws-preorder-button-bg: #141414;
	--outlaws-preorder-button-color: #ffffff;
	--outlaws-preorder-button-hover-bg: #d9d9d9;
	--outlaws-preorder-button-hover-color: #141414;
	--outlaws-preorder-radius: 3px;
}

.outlaws-preorder-wrapper,
.outlaws-preorder-wrapper *,
.outlaws-preorder-wrapper *::before,
.outlaws-preorder-wrapper *::after {
	box-sizing: border-box;
}

/*
 * The theme lays out its own quantity + Add to cart button as flex/float
 * siblings (meant for exactly two children). Our markup adds a much larger
 * block of fields as a third child of that same container, which — without
 * these resets — gets squeezed into a flex item a few pixels wide (hence
 * text breaking mid-word) while the button gets stretched to fill the row's
 * height instead of sitting underneath. Force plain block flow, scoped
 * tightly to our own markup, and important enough to win regardless of the
 * theme's selector specificity.
 */
.outlaws-preorder-wrapper form.cart,
.outlaws-preorder-wrapper .woocommerce-variation-add-to-cart,
.outlaws-preorder-wrapper .quantity {
	display: block !important;
	float: none !important;
	height: auto !important;
	width: auto !important;
}

.outlaws-preorder-wrapper form.cart > *,
.outlaws-preorder-wrapper .woocommerce-variation-add-to-cart > * {
	flex: none !important;
	align-self: auto !important;
}

.outlaws-preorder-fields {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-top: 1.5em;
	clear: both;
	float: none !important;
}

.outlaws-preorder-heading {
	display: block !important;
	margin: 0 0 0.5em !important;
	font-size: 1em !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--outlaws-preorder-text-color) !important;
}

.outlaws-preorder-description {
	display: block !important;
	margin: 0 0 1.5em !important;
	font-size: 0.95em !important;
	line-height: 1.5 !important;
	color: var(--outlaws-preorder-muted-color) !important;
}

.outlaws-preorder-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 1.25em 1.5em;
	width: 100% !important;
	margin-bottom: 1.5em;
}

/*
 * Fields are rendered via WooCommerce's own woocommerce_form_field(), which
 * outputs the whole <p class="form-row ..."> block (label, required marker,
 * input/select) itself — that's what gets country/state dropdowns and
 * required-asterisk markup for free. Each one is wrapped in a
 * .outlaws-preorder-field-wrap div (grid item) together with its error
 * message span, so the two move together regardless of grid columns.
 */
.outlaws-preorder-field-wrap {
	margin: 0;
}

.outlaws-preorder-field-wrap--wide {
	grid-column: 1 / -1;
}

.outlaws-preorder-field {
	margin: 0 !important;
}

.outlaws-preorder-field label {
	display: block;
	margin-bottom: 0.5em;
	font-weight: 700;
	color: var(--outlaws-preorder-text-color);
}

.outlaws-preorder-field input.input-text,
.outlaws-preorder-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.9em 1em;
	border: 1px solid var(--outlaws-preorder-border-color);
	border-radius: var(--outlaws-preorder-radius);
	background: #fff;
	color: var(--outlaws-preorder-text-color);
	font-size: 1em;
}

.outlaws-preorder-error {
	display: block;
	color: #b91c1c;
	font-size: 0.85em;
	margin-top: 0.4em;
}

.outlaws-preorder-general-error {
	color: #b91c1c;
	margin: 1em 0;
}

.outlaws-preorder-wrapper .single_add_to_cart_button.single_add_to_cart_button {
	display: block !important;
	float: none !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: 1.5em 0 0 !important;
	padding: 1em 1.5em !important;
	border: none !important;
	border-radius: var(--outlaws-preorder-radius);
	background: var(--outlaws-preorder-button-bg);
	color: var(--outlaws-preorder-button-color);
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.outlaws-preorder-wrapper .single_add_to_cart_button.single_add_to_cart_button:not([disabled]):hover,
.outlaws-preorder-wrapper .single_add_to_cart_button.single_add_to_cart_button:not([disabled]):focus-visible {
	background: var(--outlaws-preorder-button-hover-bg);
	color: var(--outlaws-preorder-button-hover-color);
}

.outlaws-preorder-wrapper .single_add_to_cart_button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.outlaws-preorder-wrapper .single_add_to_cart_button.is-loading {
	opacity: 0.7;
	cursor: progress;
}

.outlaws-preorder-success h3 {
	margin: 0 0 0.5em !important;
	font-size: 1.4em !important;
	line-height: 1.3 !important;
}

/* Stack the 2-column field grid on narrow screens. */
@media (max-width: 600px) {
	.outlaws-preorder-grid {
		grid-template-columns: 1fr;
	}
}