/* ==========================================================================
   forminator-stockies.css — makes every Forminator form on the Stockies
   theme look like the site's WPForms forms (WPForms "Modern" style: filled
   grey inputs, black labels, 60%-wide fields, orange rounded button).

   Measured from the live Contact Us page (form #341, WPForms) on
   https://stockies.co.uk/contact-us/ and applied to the Forminator test
   form (#14019, design "default") on the Test page. Stockies has no form
   using Forminator's "flat" design in the pages I was given, so this file
   is NOT scoped to a single design the way the News in the Channel one is
   — it applies to every .forminator-custom-form. If you do have a
   differently-themed form (e.g. a dark sidebar sign-up) that should keep
   its own look, tell me and I'll exclude it here.

   Specificity: the two :not(#…) pseudo-classes add two ID selectors, so
   these rules beat Forminator's per-form CSS (one #forminator-module-N
   selector) and the theme's own #td-outer-wrap .forminator-label rule,
   regardless of stylesheet load order, without !important — except where
   Forminator reads an inline CSS custom property (noted below).
   ========================================================================== */

/* --- Base / font ------------------------------------------------------------
   WPForms' field text uses "Open Sans"; the container itself uses
   proxima-nova (only visible in error/response messages, which inherit
   from here). */
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) {
	font-family: 'Open Sans', 'Open Sans Regular', sans-serif;
	font-size: 15px;
	line-height: 26.1px;
	color: #000;
	background: transparent;
}

/* --- Rows / fields: 15px above and below each field ------------------------ */
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-row {
	margin-bottom: 0;
	padding: 15px 0;
}
/* A row nested inside a field (split Name, Address, …) sits flush inside
   its parent's 15px padding */
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-row .forminator-row {
	padding: 0;
	margin-left: -20px;
	margin-right: -20px;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-row .forminator-row > .forminator-col {
	margin-bottom: 0;
	padding-left: 20px;
	padding-right: 20px;
}

html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-field {
	display: block;
	margin: 0;
}

/* --- Labels: black, above the field, 15px gap below ------------------------ */
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-label {
	display: block;
	width: auto;
	margin: 0 0 15px;
	padding: 0;
	text-align: left;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 19px;
	color: #000;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-label .forminator-required {
	color: #d63637;
	font-weight: 400;
}

/* --- Text-like inputs, textarea, select: filled grey box, no border -------- */
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-input {
	display: block;
	width: 100%;
	max-width: 60%;
	height: 43px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background-color: #ededed;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 15px;
	color: #243442;
}
/* Inputs inside a split field (e.g. a two-part Name) fill their own column
   instead of the usual 60% — the 60% is applied to the row that wraps them */
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-row .forminator-row .forminator-input {
	max-width: 100%;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 14px 0;
	background-color: #ededed;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 19.5px;
	color: #243442;
	resize: vertical;
}
/* Forminator reads its own min-height from an inline custom property
   (style="--forminator-textarea-min-height: …"); override the value it
   consumes, not just min-height, so this actually wins */
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-textarea {
	--forminator-textarea-min-height: 120px !important;
	height: 120px !important;
	min-height: 120px !important;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-input:hover,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-input:focus,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-input:active,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-textarea:hover,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-textarea:focus,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-textarea:active {
	background-color: #ededed;
	border-color: transparent;
	box-shadow: none;
	outline: none;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-input::placeholder,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-textarea::placeholder {
	color: #757575;
	font-weight: 600;
	opacity: 1;
}

/* --- Dropdowns (select2 closed state) — not present on the pages I was
   given, styled to match the filled-box inputs above; check this one. ---- */
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-select .select2-selection,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-select2 + .select2 .select2-selection {
	max-width: 60%;
	height: 43px;
	background-color: #ededed;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #243442;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-select .select2-selection__rendered,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-select2 + .select2 .select2-selection__rendered {
	padding-left: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 41px;
	color: #243442;
}

/* --- Validation -------------------------------------------------------------- */
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-has_error .forminator-input,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-has_error .forminator-textarea {
	box-shadow: inset 0 0 0 1px #d63637;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-error-message {
	margin: 4px 0 0;
	font-size: 13px;
	color: #d63637;
}

/* --- Checkboxes and radios — not present on the pages I was given, styled
   to sit on the same grey/orange palette as the rest of the form. Check
   this one against a real checkbox/radio field before relying on it. ---- */
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-checkbox,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-radio {
	display: flex;
	align-items: baseline;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-checkbox__wrapper {
	display: flex;
	align-items: baseline;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-field > .forminator-checkbox,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-field > .forminator-radio {
	margin: 0;
	padding: 8px 0;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-field > .forminator-checkbox:first-child,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-field > .forminator-radio:first-child {
	padding-top: 0;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-field > .forminator-checkbox:last-child,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-field > .forminator-radio:last-child {
	padding-bottom: 0;
}

html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-checkbox .forminator-checkbox-box {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0 12px 0 0;
	background-color: #ededed;
	border: 0;
	border-radius: 3px;
	color: #fff;
	transform: translateY(1px);
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-checkbox .forminator-checkbox-box:before {
	font-size: 12px;
	color: #fff;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-checkbox input:checked + .forminator-checkbox-box {
	background-color: #e46d33;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-checkbox input:focus-visible + .forminator-checkbox-box {
	outline: 2px solid #243442;
	outline-offset: 1px;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-checkbox .forminator-checkbox-box ~ span {
	margin-left: 0;
}

html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-radio .forminator-radio-bullet {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0 12px 0 0;
	background-color: #ededed;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	transform: translateY(1px);
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-radio .forminator-radio-bullet:before {
	display: none;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-radio input:checked + .forminator-radio-bullet {
	background-color: #e46d33;
	box-shadow: inset 0 0 0 4px #ededed;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-radio input:focus-visible + .forminator-radio-bullet {
	outline: 2px solid #243442;
	outline-offset: 1px;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-radio .forminator-radio-bullet ~ span {
	margin-left: 0;
}

html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-checkbox .forminator-checkbox-label,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-checkbox__label,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-checkbox__label p,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-radio .forminator-radio-label {
	margin: 0;
	padding: 0;
	padding-inline-start: 12px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	color: #000;
	word-break: break-word;
}

html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-field-consent {
	margin-top: 8px;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-field-consent .forminator-label {
	margin-bottom: 4px;
}

/* --- Buttons (submit, multi-step next/back, file upload) -------------------- */
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-row-last {
	margin-top: 10px;
	padding-top: 0;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-submit,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-next,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-back,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-upload {
	display: inline-block;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 10px 30px;
	background-color: #e46d33;
	border: 0;
	border-radius: 3px;
	box-shadow: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 13px;
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: 0.3s;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-submit:hover,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-submit:focus,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-submit:active,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-next:hover,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-next:focus,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-next:active,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-back:hover,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-back:focus,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-back:active,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-upload:hover,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-upload:focus,
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) button.forminator-button-upload:active {
	background-color: #cf5c24;
	color: #fff;
	box-shadow: none;
}

/* --- Guard against leftover per-form Custom CSS -----------------------------
   News in the Channel had old forms with saved Custom CSS (display:flex on
   .forminator-field, a fixed-width right-aligned label) that beat plain
   rules with !important. Stockies' own theme CSS and the one form checked
   here (#14019) don't have that, but keep this as a safety net in case
   another form does. */
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-field {
	display: block !important;
}
html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-label {
	width: auto !important;
	text-align: left !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #000 !important;
}

/* --- Mobile: full width fields, stack split columns ------------------------- */
@media (max-width: 782px) {
	html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-input,
	html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-select .select2-selection,
	html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-select2 + .select2 .select2-selection {
		max-width: 100%;
	}
	html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-row .forminator-row {
		margin-left: 0;
		margin-right: 0;
	}
	html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-row .forminator-row > .forminator-col {
		padding-left: 0;
		padding-right: 0;
	}
	html body .forminator-ui.forminator-custom-form:not(#forminator-a):not(#forminator-b) .forminator-row .forminator-row > .forminator-col + .forminator-col {
		margin-top: 10px;
	}
}