/**
 * Advantage Feeders ROI Calculators — shared styling
 * (Figma: Advantage Feeders — Website Development V02, node 50:776)
 * -----------------------------------------------------------------
 * One stylesheet for every calculator form this plugin manages —
 * they all share the exact same visual system, only the field
 * content differs per family. Values below were measured directly
 * from the Figma frame:
 *   Orange accent      #f47721
 *   Field border       #d5d5d0
 *   Input chip grey    #d9d9d9
 *   Dark heading text  #282525
 *   Field height       54px
 *   Two-column width   276px + 276px, 16px gap (568px total)
 *   Unit chip width    66px (min-width — some units, e.g.
 *                      "g/head/day", need more room and are allowed
 *                      to grow)
 *   Panel gap          130px, Inputs 568px / Results 647px @ 1345px
 *                      design width
 *   Type               Proxima Nova (Regular/Medium/Semibold/Bold),
 *                      labels at 16px/16px line-height, descriptions
 *                      12px, panel headings 24px/-0.5px tracking
 *
 * IMPORTANT: Gravity Forms' own "Orbital" theme stylesheet
 * (gravity-forms-orbital-theme.min.css) loads AFTER this file in the
 * page <head> and sets its own display/grid/flex rules on
 * .gform_fields, .gfield, and form inputs. Confirmed live on site
 * that without !important, Orbital's rules win regardless of
 * selector specificity, turning the two-column layout into its own
 * 12-column grid and collapsing the chip layout to block. Every
 * structural property below is !important for that reason.
 *
 * SUBMIT BUTTON: Gravity Forms 3.0+ renders the submit control as
 * <button class="gform_button button">, not <input type="submit">.
 * Rules targeting only input selectors never match, which is why the
 * button previously rendered in Gravity Forms' default blue. Both
 * element types are covered below, and the button's colours are set
 * directly rather than through Gravity Forms' custom properties —
 * Gravity Forms injects an inline <style> block alongside each form
 * that redefines --gf-color-primary, and inline styles beat an
 * external stylesheet regardless of specificity.
 *
 * SECTION HEADINGS: the orange square sits inline to the left of the
 * heading text via an ::before on the h3, not absolutely positioned
 * on the panel. An absolutely positioned square lands above the
 * heading rather than beside it. This matches the treatment used on
 * the Get a Quote, Extended Warranty and Contact forms: 20px square
 * with a 5px bottom-left radius, 24px bold heading, 1px rule beneath.
 *
 * Pairs with includes/class-panel-layout.php, which builds the
 * .afq-panel-inputs / .afq-panel-results markup and writes the
 * data-unit chips this CSS renders, and includes/class-npv-engine.php,
 * which calculates the values that land in those fields.
 */

:root {
	--afq-orange: #f47721;
	--afq-border: #d5d5d0;
	--afq-chip-grey: #d9d9d9;
	--afq-dark: #282525;
	--afq-field-height: 54px;
	--afq-chip-width: 66px;
	--afq-col-width: 276px;
	--afq-col-gap: 16px;
}

.afq-calculator-wrap {
	font-family: proxima-nova, sans-serif !important;
	max-width: 1345px !important;
	margin: 0 auto !important;
	padding: 48px 20px !important;
}

.afq-calculator-wrap .gform_heading {
	display: none !important;
	/* title/description handled by the panel headers instead */
}

/* ---------- Two panel layout ---------- */
/* Inputs 568px / Results 647px / 130px gap = 1345px, matching the
   Figma frame at its native (desktop) width. Below that we fall back
   to a proportional split, then stack on small screens. */
.afq-panels {
	display: grid !important;
	grid-template-columns: 568px 647px !important;
	gap: 130px !important;
	/* Deliberately NOT align-items:start — the Results column needs to
	   stretch to match the (taller) Inputs column's height, so its
	   sticky child has room to float within it. See
	   .afq-panel-results-track below. */
	align-items: stretch !important;
	justify-content: center !important;
}

@media (max-width: 1345px) {
	.afq-panels {
		grid-template-columns: 46.8% 53.2% !important;
		gap: 4% !important;
	}
}

@media (max-width: 900px) {
	.afq-panels {
		grid-template-columns: 1fr !important;
		gap: 48px !important;
	}
}

.afq-panel {
	position: relative !important;
	padding-top: 0 !important;
	display: block !important;
}

.afq-panel-inputs {
	background: #ffffff !important;
	color: var(--afq-dark) !important;
}

/* Full-height grid track the sticky Results card floats inside. No
   visible styling of its own — it just gives sticky positioning
   somewhere to travel within, matching the taller Inputs column. */
.afq-panel-results-track {
	height: 100% !important;
}

.afq-panel-results {
	background: #000000 !important;
	color: #ffffff !important;
	padding: 40px 40px 32px !important;
	/* Sticky so the results stay visible while scrolling through the
	   (longer) Inputs panel. Needs .afq-panel-results-track (stretched
	   to the full row height via align-items:stretch above) as its
	   containing block, otherwise there's no extra height for it to
	   float within and it just scrolls normally. Only applies above the
	   900px breakpoint — on mobile the panels stack, so sticky would
	   pin it awkwardly mid-scroll instead. */
	position: sticky !important;
	top: 24px !important;
}

@media (max-width: 900px) {
	.afq-panel-results {
		position: static !important;
	}

	.afq-panel-results-track {
		height: auto !important;
	}
}

/* ---------- Section header: orange square + heading + rule ---------- */
/* The square is an ::before on the h3 so it sits inline beside the
   text. Positioning it absolutely on the panel puts it above the
   heading instead, which is not what the design shows. */
.afq-panel::before {
	display: none !important;
}

.afq-panel-header {
	position: relative !important;
	margin-bottom: 24px !important;
}

.afq-panel-header h3 {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	font-family: proxima-nova, sans-serif !important;
	font-weight: 700 !important;
	font-size: 24px !important;
	letter-spacing: -0.5px !important;
	line-height: 1.1 !important;
	margin: 0 0 18px !important;
	color: inherit !important;
}

.afq-panel-header h3::before {
	content: '' !important;
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	background: var(--afq-orange) !important;
	border-bottom-left-radius: 5px !important;
	flex: 0 0 auto !important;
}

.afq-panel-header::after {
	content: '' !important;
	display: block !important;
	height: 1px !important;
	background: var(--afq-border) !important;
}

/* The Figma rule colour is near-invisible on the black results panel,
   so it gets a lighter tone at the same visual weight. */
.afq-panel-results .afq-panel-header::after {
	background: rgba(255, 255, 255, 0.25) !important;
}

.afq-panel-header-with-button {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
}

.afq-panel-header-with-button h3 {
	flex: 1 1 auto !important;
}

/* ---------- Field grid ---------- */
/* Inputs panel: two fixed 276px columns, input immediately followed by
   its own calculated subtotal (matches the original calculators'
   logic and the Figma pairing). */
.afq-panel-inputs .gform_fields {
	display: grid !important;
	grid-template-columns: var(--afq-col-width) var(--afq-col-width) !important;
	gap: 0 var(--afq-col-gap) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: 568px !important;
}

/* Results panel: single column, full width — only the headline numbers
   plus the email field and submit button. */
.afq-panel-results .gform_fields {
	display: block !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 1345px) {
	.afq-panel-inputs .gform_fields {
		grid-template-columns: 1fr 1fr !important;
		max-width: 100% !important;
	}
}

@media (max-width: 640px) {
	.afq-panel-inputs .gform_fields {
		grid-template-columns: 1fr !important;
	}
}

.afq-panel .gfield {
	margin-bottom: 32px !important;
	display: block !important;
	width: auto !important;
}

.gfield_label {
	display: block !important;
	font-family: proxima-nova, sans-serif !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 16px !important;
	margin-bottom: 16px !important;
	color: inherit !important;
}

.afq-panel-inputs .gfield_label {
	color: var(--afq-dark) !important;
}

.afq-panel-results .gfield_label {
	color: #ffffff !important;
}

/* Gravity Forms' "(Required)" text is redundant alongside the
   asterisk and adds noise to already-long calculator labels. */
.afq-panel .gfield_required_text {
	display: none !important;
}

.afq-panel .gfield_required::after {
	content: '*' !important;
	color: inherit !important;
}

.gfield_description,
.gfield_description.instruction {
	font-family: proxima-nova, sans-serif !important;
	font-weight: 400 !important;
	font-size: 12px !important;
	letter-spacing: -0.02em !important;
	line-height: normal !important;
	margin-top: 10px !important;
}

.afq-panel-inputs .gfield_description {
	color: rgba(51, 51, 51, 0.5) !important;
}

.afq-panel-results .gfield_description {
	color: rgba(255, 255, 255, 0.75) !important;
}

.afq-panel-inputs .gfield_description a,
.afq-panel-results .gfield_description a {
	color: var(--afq-orange) !important;
	text-decoration: underline !important;
}

/* ---------- Field boxes + unit chips ---------- */
.afq-field-shell {
	position: relative !important;
	display: flex !important;
	align-items: stretch !important;
	height: var(--afq-field-height) !important;
	background: #ffffff !important;
	border: 1px solid var(--afq-border) !important;
	overflow: hidden !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.afq-field-shell input[type="text"],
.afq-field-shell input[type="number"],
.afq-field-shell input[type="email"] {
	flex: 1 1 auto !important;
	border: none !important;
	outline: none !important;
	padding: 0 16px !important;
	margin: 0 !important;
	font-family: proxima-nova, sans-serif !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	color: var(--afq-dark) !important;
	background: transparent !important;
	height: 100% !important;
	width: 100% !important;
	min-width: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* Browser number spinners fight the chip layout and aren't in the
   design, so they're stripped in favour of plain numeric entry. */
.afq-field-shell input[type="number"] {
	appearance: textfield !important;
	-moz-appearance: textfield !important;
}

.afq-field-shell input[type="number"]::-webkit-outer-spin-button,
.afq-field-shell input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* Email field sits in the (black) Results panel, so its plain shell
   (no chip) needs light text/border rather than the dark defaults
   above. */
.afq-panel-results .afq-field-shell-plain {
	border-color: rgba(255, 255, 255, 0.3) !important;
	background: transparent !important;
}

.afq-panel-results .afq-field-shell-plain input {
	color: #ffffff !important;
}

.afq-panel-results .afq-field-shell-plain input::placeholder {
	color: rgba(255, 255, 255, 0.5) !important;
}

/* Unit / currency chip, populated via data-unit + data-unit-position
   from the panel layout script. 66px minimum width, flush with the
   field's 54px height, matching Figma — but allowed to grow for
   longer unit labels like "g/head/day". */
.afq-field-shell[data-unit]::after {
	content: attr(data-unit) !important;
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: var(--afq-chip-width) !important;
	width: auto !important;
	padding: 0 10px !important;
	font-family: proxima-nova, sans-serif !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	color: #ffffff !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

/* Editable inputs get a grey chip */
.afq-panel .gfield.afq-input .afq-field-shell[data-unit]::after {
	background: var(--afq-chip-grey) !important;
	order: 3 !important;
}

/* Calculated / read-only outputs get the orange chip */
.afq-panel .gfield.afq-output .afq-field-shell[data-unit]::after,
.afq-panel .gfield.afq-readonly .afq-field-shell[data-unit]::after,
.afq-panel .gfield.afq-highlight .afq-field-shell[data-unit]::after,
.afq-panel .gfield.afq-js-calculated .afq-field-shell[data-unit]::after {
	background: var(--afq-orange) !important;
	order: 3 !important;
}

/* $ sign renders as a prefix, everything else as a suffix */
.afq-field-shell[data-unit-position="prefix"]::after {
	order: -1 !important;
}

/* Read-only / JS-calculated fields get a subtle locked look */
.afq-panel .gfield.afq-readonly input,
.afq-panel .gfield.afq-js-calculated input {
	cursor: default !important;
	background: #fafafa !important;
}

/* ---------- Disclaimer note under the results panel ---------- */
.afq-results-note {
	margin-top: 24px !important;
	font-family: proxima-nova, sans-serif !important;
	font-size: 15px !important;
	letter-spacing: -0.02em !important;
	color: var(--afq-orange) !important;
}

.afq-results-note strong {
	display: block !important;
	font-weight: 700 !important;
	margin-bottom: 8px !important;
}

/* Figma's own note text is a dark grey on black (illegible) — using a
   readable white-based tone instead, same visual weight/intent. */
.afq-results-note span {
	color: rgba(255, 255, 255, 0.6) !important;
}

/* ---------- Submit / "Email My Results" button ---------- */
/* Rename the button label to "Email My Results" in the Gravity Forms
   editor's Form Settings → Button to match the Figma copy.
   Colours are hardcoded rather than inherited from Gravity Forms'
   custom properties, which the plugin overrides inline per form. */
.afq-calculator-wrap .gform_footer,
.afq-calculator-wrap .gform_page_footer,
.afq-panel .gform_footer,
.afq-panel .gform_page_footer {
	padding: 24px 0 0 !important;
	margin: 0 !important;
	display: block !important;
}

.afq-calculator-wrap button.gform_button,
.afq-calculator-wrap input.gform_button,
.afq-calculator-wrap .gform_footer button,
.afq-calculator-wrap .gform_footer input[type="submit"],
.afq-calculator-wrap .gform_page_footer button,
.afq-calculator-wrap .gform_page_footer input[type="submit"],
.afq-panel button.gform_button,
.afq-panel input.gform_button,
.afq-panel .gform_footer button,
.afq-panel .gform_footer input[type="submit"],
button.gform_button.button,
input.gform_button.button {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: none !important;
	background: var(--afq-orange) !important;
	background-color: var(--afq-orange) !important;
	background-image: none !important;
	color: #ffffff !important;
	font-family: proxima-nova, sans-serif !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	letter-spacing: -0.02em !important;
	padding: 15px 28px !important;
	border-radius: 150px !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	transition: background-color 0.25s ease !important;
	width: 100% !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.afq-calculator-wrap button.gform_button:hover,
.afq-calculator-wrap input.gform_button:hover,
.afq-calculator-wrap .gform_footer button:hover,
.afq-calculator-wrap .gform_footer input[type="submit"]:hover,
.afq-calculator-wrap .gform_page_footer button:hover,
.afq-calculator-wrap .gform_page_footer input[type="submit"]:hover,
.afq-panel button.gform_button:hover,
.afq-panel .gform_footer button:hover,
button.gform_button.button:hover,
input.gform_button.button:hover {
	background: var(--afq-dark) !important;
	background-color: var(--afq-dark) !important;
	color: #ffffff !important;
	opacity: 1 !important;
}

/* ---------- Confirmation message (after "Email My Results") ---------- */
.afq-calculator-wrap .gform_confirmation_message {
	font-family: proxima-nova, sans-serif !important;
	color: #ffffff !important;
	background: #000000 !important;
	padding: 24px !important;
}

/* ---------- Validation ---------- */
.afq-panel .gfield.gfield_error .afq-field-shell {
	border-color: #d94141 !important;
}

.afq-panel .validation_message,
.afq-panel .gfield_validation_message {
	font-family: proxima-nova, sans-serif !important;
	font-size: 13px !important;
	color: #d94141 !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin-top: 6px !important;
}

.afq-calculator-wrap .gform_validation_errors {
	background: #fef1f4 !important;
	border: 0 !important;
	border-left: 3px solid #d94141 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: proxima-nova, sans-serif !important;
	color: #d94141 !important;
}

.afq-calculator-wrap .gform_validation_errors h2,
.afq-calculator-wrap .gform_validation_errors .gform_submission_error {
	font-family: proxima-nova, sans-serif !important;
	color: #d94141 !important;
}