/**
 * Brand styling for GravityShop Product Configurator forms on product pages.
 *
 * The forms render with Gravity Forms' "orbital" theme, whose default accent is
 * a bright blue (#204ce5). That blue leaks onto the quantity stepper, the
 * Add-to-cart button, radios and focus rings — clashing with the Sluder brand
 * (brown rgb(79,51,29), gold-brown rgb(169,127,79)). We re-point the GF theme's
 * colour variables at the brand palette (so ALL blue accents follow) and make
 * the Add-to-cart + quantity controls match a normal WooCommerce product button.
 *
 * Scoped to .gspc__form-wrapper so it only touches configurator forms, and uses
 * !important on the CSS variables because GF sets them inline with a high-
 * specificity per-form selector (#gform_wrapper_1[data-form-index="0"]...).
 * Form-agnostic: applies to every GravityShop form / product on the site.
 */

/* ── 1. Kill the blue: re-map GF orbital theme accent → brand ───────────── */
.gspc__form-wrapper.gform-theme,
.gspc__form-wrapper.gform-theme [data-parent-form],
.gform_wrapper.gform-theme.gspc__form-wrapper {
	--gf-color-primary: #4f331d !important;              /* brand brown */
	--gf-color-primary-rgb: 79, 51, 29 !important;
	--gf-color-primary-contrast: #ffffff !important;
	--gf-color-primary-contrast-rgb: 255, 255, 255 !important;
	--gf-color-primary-darker: #3a2615 !important;       /* pressed/hover */
	--gf-color-primary-lighter: #a97f4f !important;      /* brand gold-brown */
}

/* ── 2. Add-to-cart — match WooCommerce's accented brand button ─────────── */
.gspc__form-wrapper .single_add_to_cart_button,
.gspc__form-wrapper button.single_add_to_cart_button {
	background-color: rgb(79, 51, 29) !important;
	border-color: rgb(79, 51, 29) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

.gspc__form-wrapper .single_add_to_cart_button:hover,
.gspc__form-wrapper .single_add_to_cart_button:focus {
	background-color: rgb(169, 127, 79) !important;
	border-color: rgb(169, 127, 79) !important;
	color: #ffffff !important;
}

/* ── 3. Quantity stepper — neutral chip, brand-brown on hover ───────────── */
.gspc__form-wrapper div.quantity .btn,
.gspc__form-wrapper div.quantity button.btn {
	background-color: #f5f2ee !important;
	border: 1px solid #e5ddd2 !important;
	color: rgb(79, 51, 29) !important;
	box-shadow: none !important;
}

.gspc__form-wrapper div.quantity .btn:hover,
.gspc__form-wrapper div.quantity .btn:focus {
	background-color: rgb(79, 51, 29) !important;
	border-color: rgb(79, 51, 29) !important;
	color: #ffffff !important;
}

.gspc__form-wrapper div.quantity input.qty {
	border: 1px solid #e5ddd2 !important;
	color: rgb(79, 51, 29) !important;
	box-shadow: none !important;
}

/* ── 4. Small polish: consistent, calmer fields ────────────────────────── */

/* Dropdowns & text inputs: soft brand border, brand focus ring (no blue). */
.gspc__form-wrapper .gfield select,
.gspc__form-wrapper .gfield input[type="text"],
.gspc__form-wrapper .gfield input[type="number"] {
	border: 1px solid #e0d8cc !important;
	border-radius: 6px !important;
}

.gspc__form-wrapper .gfield select:focus,
.gspc__form-wrapper .gfield input[type="text"]:focus,
.gspc__form-wrapper .gfield input[type="number"]:focus {
	border-color: rgb(169, 127, 79) !important;
	box-shadow: 0 0 0 2px rgba(169, 127, 79, 0.25) !important;
	outline: none !important;
}

/* Even vertical rhythm between fields. */
.gspc__form-wrapper .gform_fields {
	row-gap: 18px !important;
}

/* Field labels a touch stronger; "(Required)" in brand brown, not loud red. */
.gspc__form-wrapper .gfield_label {
	font-weight: 600;
	color: #3a2615;
}

.gspc__form-wrapper .gfield_required,
.gspc__form-wrapper .gfield_required .gfield_required_text {
	color: #a97f4f !important;
}

/* Selected radio/checkbox dot follows the brand (was blue via primary var). */
.gspc__form-wrapper .gchoice input:checked {
	accent-color: rgb(79, 51, 29);
}