/**
 * Ration Calculator — styling
 * --------------------------------------
 * Brought in line with the ROI Calculators and the Get a Quote /
 * Extended Warranty / Contact forms so the two calculators read as
 * one family rather than two separate tools. No Figma frame exists
 * for this calculator, so the visual system is borrowed wholesale
 * from the approved ROI Calculator design (node 50:776):
 *   Orange accent      #f47721
 *   Field border       #d5d5d0
 *   Dark panel         #000000
 *   Dark heading text  #282525
 *   Field height       54px on primary inputs, 44px inside the table
 *   Section headings   20px orange square (5px bottom-left radius)
 *                      inline beside a 24px bold heading, 1px rule
 *                      beneath
 *
 * Three deliberate departures from the previous default, beyond
 * colour and spacing:
 *
 * 1. The two tables no longer look identical. Previously the sample
 *    feed reference table and the interactive ration table shared the
 *    same styling, so nothing signalled which one the visitor was
 *    meant to fill in. .feed-selection now carries the weight (dark
 *    header, white rows, visible input fields) and the striped
 *    reference table is deliberately quieter.
 *
 * 2. The feed mix totals are rebuilt to match the ROI "Your Results"
 *    panel. That panel isn't a table — each figure is a stacked block
 *    (white label above, bordered value box below). The totals arrive
 *    from the shortcode as a two-column table, so the table display
 *    is flattened to blocks and each row restyled to match. Targeted
 *    via :has() on the column containing .total-energy, so no markup
 *    change is needed; if you'd rather not depend on :has(), add a
 *    class of .afq-analysis-panel to that block in
 *    class-shortcode.php and every rule below matches either way.
 *
 * 3. .afq-invalidPercentageMix is styled as a live status indicator
 *    rather than a warning that only appears on failure, since the
 *    visitor is aiming at a 100% target rather than avoiding an
 *    error. Requires the matching change in ration-calculator.js —
 *    see the note above that rule. Without it the green state simply
 *    never fires and the indicator behaves exactly as before.
 *
 * NOTE ON CACHING: this file must be enqueued with
 * filemtime( SD_AF_RATION_PLUGIN_DIR . 'assets/ration-calculator.css' )
 * as its version argument, not the SD_AF_RATION_VERSION constant. A
 * fixed version string never changes, so browsers and the server
 * cache keep serving the first copy they saw and edits to this file
 * appear to do nothing at all.
 *
 * Class NAMES are unchanged throughout — ration-calculator.js and
 * class-shortcode.php both depend on them.
 */

:root {
	--sdaf-orange: #f47721;
	--sdaf-border: #d5d5d0;
	--sdaf-dark: #282525;
	--sdaf-panel-grey: #f3f3f3;
	--sdaf-muted: #4a4a4a;
}

#afq-form-feed-calculator {
	font-family: proxima-nova, sans-serif;
	color: var(--sdaf-dark);
}

/* ---------- Layout ---------- */
#afq-form-feed-calculator .row {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	margin-bottom: 48px;
}

#afq-form-feed-calculator .row:last-child {
	margin-bottom: 0;
}

#afq-form-feed-calculator .col-sm-12 {
	flex: 1 1 100%;
	min-width: 0;
}

#afq-form-feed-calculator .col-sm-8 {
	flex: 2 1 520px;
	min-width: 0;
}

#afq-form-feed-calculator .col-sm-4 {
	flex: 1 1 320px;
	min-width: 0;
}

/* ---------- Section headings ---------- */
/* Orange square sits inline beside the text via flex, the same
   treatment used across every form on the site. */
.afq-subtitle {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 18px;
	margin: 0 0 24px 0;
	border-bottom: 1px solid var(--sdaf-border);
	font-family: proxima-nova, sans-serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.1;
	color: var(--sdaf-dark);
}

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

/* Intro / helper copy sitting under a heading */
#afq-form-feed-calculator p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--sdaf-muted);
	margin: 0 0 12px 0;
}

/* ---------- Tables (shared) ---------- */
.afq-scroll-table {
	overflow-x: auto;
	border: 1px solid var(--sdaf-border);
	-webkit-overflow-scrolling: touch;
	/* Without an explicit width, this div has nothing telling it to stay
	   inside its parent — it just grows to fit the (wide, nowrap) table
	   inside it, and drags the whole page wider than the screen along
	   with it on mobile. width + max-width force it to stay inside its
	   column, so overflow-x:auto actually gets to do its job: a
	   horizontal scrollbar contained to this table only, not a
	   sideways-scrolling page. Confirmed live at a 390px viewport —
	   without this the page was 1014px wide; with it, exactly 386px. */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.afq-table {
	width: 100%;
	border-collapse: collapse;
	font-family: proxima-nova, sans-serif;
	font-size: 14px;
	background: #ffffff;
}

.afq-table th,
.afq-table td {
	padding: 14px;
	text-align: left;
	border-bottom: 1px solid var(--sdaf-border);
	white-space: nowrap;
	vertical-align: middle;
}

.afq-table tbody tr:last-child td {
	border-bottom: 0;
}

/* ---------- Interactive ration table ---------- */
/* This is the one the visitor fills in, so it carries the visual
   weight: dark header, white rows, visible input fields. */
.feed-selection thead th {
	background: var(--sdaf-dark);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	white-space: normal;
	line-height: 1.3;
}

/* ---------- Reference table (sample feed information) ---------- */
/* Deliberately quieter than the interactive table. Striping only
   makes sense here, where the visitor is scanning rows to compare
   values rather than entering anything. Both the stripe and the text
   are darker than a typical muted grey — this table is read outdoors
   on phones as often as on a desk. */
.afq-table-striped {
	font-size: 13px;
}

.afq-table-striped thead th {
	background: var(--sdaf-panel-grey);
	color: var(--sdaf-dark);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	white-space: normal;
	line-height: 1.3;
}

.afq-table-striped tbody tr:nth-child(even) {
	background: #f3f3f3;
}

.afq-table-striped th,
.afq-table-striped td {
	padding: 10px 14px;
	color: var(--sdaf-muted);
}

.afq-table-striped tbody td:first-child {
	color: var(--sdaf-dark);
	font-weight: 600;
}

/* ---------- Inputs inside the ration table ---------- */
.afq-table-field {
	width: 100%;
	min-width: 96px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--sdaf-border);
	border-radius: 0;
	background: #ffffff;
	font-family: proxima-nova, sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--sdaf-dark);
	box-sizing: border-box;
	transition: border-color 0.2s ease;
}

.afq-table-field:focus {
	border-color: var(--sdaf-orange);
	outline: none;
	box-shadow: none;
}

.afq-table-field::placeholder {
	color: #a6a6a6;
	opacity: 1;
}

/* Fields are disabled on load until the feed list comes back from the
   afq_get_feeds AJAX call — making that state legible stops it
   looking like a broken form. */
.afq-table-field:disabled {
	background: var(--sdaf-panel-grey);
	color: #a6a6a6;
	cursor: wait;
}

/* Strip number spinners — they crowd an already-tight table cell */
.afq-table-field[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}

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

/* Feed Type dropdown gets the orange chevron used site-wide */
select.afq-table-field {
	appearance: none;
	-webkit-appearance: none;
	min-width: 170px;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23F47721' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
	cursor: pointer;
}

/* ---------- Calculated columns ---------- */
/* Energy Cost and Protein Cost are outputs, not inputs, so they read
   in orange to match the calculated-value chips on the ROI forms. */
.energy-cost,
.protein-cost {
	color: var(--sdaf-orange);
	font-weight: 700;
	font-size: 15px;
	text-align: right;
}

/* ---------- Required-field marker ---------- */
/* Addresses client feedback that it wasn't obvious which fields need
   filling in. The "*" already existed in the header copy — this just
   gives it the same orange the rest of the design language uses for
   anything that needs the visitor's attention, plus a small legend
   using the same treatment as .afq-disclaimer below. */
.afq-required {
	color: var(--sdaf-orange);
	font-weight: 700;
}

.afq-required-note {
	margin-top: 12px;
	font-size: 13px;
	color: var(--sdaf-muted);
}

/* ---------- Percentage validation ---------- */
/* The JS currently only adds .show when the mix is invalid. To turn
   this into a live status indicator, in calculateDiscounts():
     invalid branch:  .addClass('show').removeClass('valid')
                      .text('Total mix must equal 100%')
     valid branch:    .addClass('show valid')
                      .text('Your mix totals 100%')
   Leaving the JS untouched just means the green state never fires. */
.afq-invalidPercentageMix {
	display: none;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 14px 18px;
	background: #fdecea;
	border-left: 3px solid #b3261e;
	color: #b3261e;
	font-family: proxima-nova, sans-serif;
	font-size: 14px;
	font-weight: 600;
	border-radius: 0;
}

.afq-invalidPercentageMix.show {
	display: flex;
}

.afq-invalidPercentageMix.valid {
	background: #edf7ee;
	border-left-color: #2e7d32;
	color: #2e7d32;
}

/* ==========================================================
   FEED MIX ANALYSIS — matches the ROI "Your Results" panel
   ==========================================================
   The ROI results panel is not a table: each figure is a stacked
   block with a white label above a bordered value box. The totals
   arrive here as a two-column table, so the table display is
   flattened to blocks and each row rebuilt to match. Everything is
   !important because the shared .afq-table / .afq-table-striped
   rules above would otherwise reassert cell padding, borders and
   the zebra striping — the striping in particular left white text
   sitting on a near-white band inside the black panel.
   ========================================================== */

.afq-analysis-panel,
#afq-form-feed-calculator .col-sm-4:has(.total-energy),
#afq-form-feed-calculator .col-sm-12:has(.total-energy) {
	background: #000000;
	color: #ffffff;
	padding: 40px;
	align-self: flex-start;
}

.afq-analysis-panel .afq-subtitle,
#afq-form-feed-calculator .col-sm-4:has(.total-energy) .afq-subtitle,
#afq-form-feed-calculator .col-sm-12:has(.total-energy) .afq-subtitle {
	color: #ffffff;
	border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* Strip the table chrome back to nothing */
.afq-analysis-panel .afq-scroll-table,
#afq-form-feed-calculator .col-sm-4:has(.total-energy) .afq-scroll-table,
#afq-form-feed-calculator .col-sm-12:has(.total-energy) .afq-scroll-table {
	border: 0 !important;
	overflow: visible !important;
	background: transparent !important;
}

/* Flatten the table so each row becomes a stacked block */
.afq-analysis-panel .afq-table,
.afq-analysis-panel .afq-table tbody,
#afq-form-feed-calculator .col-sm-4:has(.total-energy) .afq-table,
#afq-form-feed-calculator .col-sm-4:has(.total-energy) .afq-table tbody,
#afq-form-feed-calculator .col-sm-12:has(.total-energy) .afq-table,
#afq-form-feed-calculator .col-sm-12:has(.total-energy) .afq-table tbody {
	display: block !important;
	width: 100% !important;
	background: transparent !important;
	border: 0 !important;
}

/* The "TOTALS" header row is redundant — the panel heading already
   says what this block is. */
.afq-analysis-panel .afq-table thead,
#afq-form-feed-calculator .col-sm-4:has(.total-energy) .afq-table thead,
#afq-form-feed-calculator .col-sm-12:has(.total-energy) .afq-table thead {
	display: none !important;
}

.afq-analysis-panel .afq-table tbody tr,
#afq-form-feed-calculator .col-sm-4:has(.total-energy) .afq-table tbody tr,
#afq-form-feed-calculator .col-sm-12:has(.total-energy) .afq-table tbody tr {
	display: block !important;
	margin-bottom: 28px !important;
	background: transparent !important;
	border: 0 !important;
}

.afq-analysis-panel .afq-table tbody tr:last-child,
#afq-form-feed-calculator .col-sm-4:has(.total-energy) .afq-table tbody tr:last-child,
#afq-form-feed-calculator .col-sm-12:has(.total-energy) .afq-table tbody tr:last-child {
	margin-bottom: 0 !important;
}

.afq-analysis-panel .afq-table tbody td,
#afq-form-feed-calculator .col-sm-4:has(.total-energy) .afq-table tbody td,
#afq-form-feed-calculator .col-sm-12:has(.total-energy) .afq-table tbody td {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	white-space: normal !important;
}

/* Label sits above the value, matching the ROI field labels */
.afq-analysis-panel .afq-table tbody td:first-child,
#afq-form-feed-calculator .col-sm-4:has(.total-energy) .afq-table tbody td:first-child,
#afq-form-feed-calculator .col-sm-12:has(.total-energy) .afq-table tbody td:first-child {
	color: #ffffff !important;
	font-family: proxima-nova, sans-serif !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	margin-bottom: 14px !important;
}

/* The value renders as a bordered box, matching the ROI result
   fields. No orange unit chip here — the JS writes the unit into the
   value string itself (e.g. "12.84 MJ/kgDM"), so a chip would just
   repeat it. Adding chips would mean changing the JS to output the
   bare number. */
.total-energy,
.total-protein,
.total-cost,
.total-energy-cost,
.total-protein-cost {
	display: flex !important;
	align-items: center !important;
	height: 54px !important;
	padding: 0 18px !important;
	background: #fafafa !important;
	border: 1px solid var(--sdaf-border) !important;
	color: var(--sdaf-dark) !important;
	font-family: proxima-nova, sans-serif !important;
	font-weight: 600 !important;
	font-size: 17px !important;
	letter-spacing: -0.2px !important;
	text-align: left !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

/* ---------- Email analysis block ---------- */
/* Sits inside the dark panel, so fields are light-on-dark. The JS
   slides this up and drops a "Processing..." paragraph in its place
   while the request is in flight. */
.email-analysis {
	margin-top: 8px;
}

.afq-inline-fields {
	display: flex;
	gap: 12px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.afq-inline-fields .afq-field {
	flex: 1 1 200px;
	min-width: 0;
	height: 54px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 0;
	background: transparent;
	font-family: proxima-nova, sans-serif;
	font-size: 16px;
	color: #ffffff;
	box-sizing: border-box;
	transition: border-color 0.2s ease;
}

.afq-inline-fields .afq-field::placeholder {
	color: rgba(255, 255, 255, 0.5);
	opacity: 1;
}

.afq-inline-fields .afq-field:focus {
	border-color: var(--sdaf-orange);
	outline: none;
}

/* The "Processing..." paragraph the JS injects after .email-analysis */
.email-analysis+p {
	margin-top: 20px;
	font-family: proxima-nova, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--sdaf-orange);
}

.afq-button {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: var(--sdaf-orange);
	color: #ffffff;
	font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.2px;
	height: 54px;
	padding: 0 32px;
	border-radius: 150px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.afq-button:hover {
	background: #ffffff;
	color: var(--sdaf-dark);
	opacity: 1;
}

/* ---------- Disclaimer / notes under a table ---------- */
/* Plain text, no callout box — just enough top spacing so it doesn't
   sit flush against the table above it. Applies to both the "no
   responsibility for accuracy" line under Sample Feed Information and
   the required-fields note under the ration table, since both are the
   next element after a .afq-scroll-table. */
.afq-scroll-table + p {
	margin-top: 16px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	#afq-form-feed-calculator {
		padding: 32px 16px;
	}

	#afq-form-feed-calculator .row {
		flex-direction: column;
		gap: 32px;
		margin-bottom: 32px;
	}

	/* flex-basis/grow/shrink control HEIGHT once a row switches to
	   flex-direction:column (they follow the main axis, which is now
	   vertical) — so col-sm-8/col-sm-4/col-sm-12 fall back to sizing
	   themselves by content instead of filling the row's width. That's
	   what was causing the whole page to overflow sideways on mobile,
	   and separately why the black Feed Mix Analysis panel (col-sm-4,
	   which also has align-self:flex-start for its desktop layout)
	   was hugging the left edge instead of spanning full width.
	   Forcing an explicit width here overrides both. Confirmed live at
	   a 390px viewport. */
	#afq-form-feed-calculator .col-sm-12,
	#afq-form-feed-calculator .col-sm-8,
	#afq-form-feed-calculator .col-sm-4 {
		width: 100%;
		flex: none;
	}

	.afq-analysis-panel,
	#afq-form-feed-calculator .col-sm-4:has(.total-energy),
	#afq-form-feed-calculator .col-sm-12:has(.total-energy) {
		padding: 28px 24px;
	}

	.afq-subtitle {
		font-size: 20px;
	}

	.afq-inline-fields {
		flex-direction: column;
	}

	.afq-inline-fields .afq-field,
	.afq-button {
		width: 100%;
		flex: 1 1 auto;
	}

}

/* ---------- Nested row inside the analysis panel ---------- */
/* The email block sits in its own .row nested inside .col-sm-4. The
   generic .row rule only sets margin-bottom, so nothing separates it
   from the totals above. */
.afq-analysis-panel .row,
#afq-form-feed-calculator .col-sm-4:has(.total-energy) .row,
#afq-form-feed-calculator .col-sm-12:has(.total-energy) .row {
	margin-top: 44px !important;
	margin-bottom: 0 !important;
	gap: 0 !important;
	display: block !important;
}