/* DFI Compare Tool — interactive tool CSS only.
   Design tokens (:root) plus everything the search boxes, suggestions
   dropdown, Compare button, Popular Comparisons chips, and the
   JS-rendered comparison results grid depend on.

   Static page content (hero, explainer cards, methodology, FAQ) used
   to live here too, but has been moved to a <style> block in the
   page's Custom HTML content instead, so it can be edited without a
   plugin reinstall. That content still uses the --dfi-* custom
   properties defined below, which is why :root has to stay here — if
   it moved to the page and the page content were ever missing or
   edited incorrectly, the interactive tool's own colors would break
   too, since both draw from the same token set.

   Genuinely dead rules from an earlier page layout (dfi-compare-example,
   dfi-compare-steps, dfi-compare-edu, dfi-compare-intro,
   dfi-compare-related, dfi-compare-feature-list) have been removed —
   confirmed unused against the current page content before deleting,
   not just assumed safe to cut.

   FIXED (kept from earlier fix): these custom properties were
   previously scoped to a .dfi-compare-page selector that doesn't
   actually exist in the live page structure — meaning every
   var(--dfi-teal) etc. resolved to nothing. Scoping to :root makes
   these available everywhere, regardless of what wrapper class
   surrounds the tool. */

:root {
	--dfi-navy: #1e3a5f;
	--dfi-navy-dark: #122540;
	--dfi-navy-light: #2a5082;
	--dfi-teal: #1abc9c;
	--dfi-teal-light: #e8f8f5;
	--dfi-accent: #2e86c1;
	--dfi-accent-light: #5dade2;
	--dfi-gray-50: #f4f6f9;
	--dfi-gray-100: #eaecf0;
	--dfi-gray-500: #6b7a90;
	--dfi-gray-700: #3d4a5c;
	--dfi-radius: 10px;
	--dfi-radius-lg: 16px;
	--dfi-shadow-md: 0 6px 24px rgba(30,58,95,.12);
}
.dfi-sans { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

.dfi-compare-tool {
	background: #fff;
	border: 1px solid var(--dfi-gray-100);
	border-radius: var(--dfi-radius-lg);
	box-shadow: 0 10px 32px rgba(30,58,95,.1);
	overflow: hidden;
	margin-bottom: 8px;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #1a2332;
}
.dfi-compare-tool * { box-sizing: border-box; }

.dfi-compare-body { padding: 32px; }

.dfi-compare-pickers {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
	justify-content: center;
	margin-bottom: 16px;
}
.dfi-compare-picker { position: relative; flex: 1 1 240px; min-width: 220px; max-width: 340px; }
.dfi-compare-picker label {
	display: block; font-size: .78rem; font-weight: 700; letter-spacing: 1.5px;
	text-transform: uppercase; color: var(--dfi-accent); margin-bottom: 10px;
}
.dfi-compare-search {
	width: 100%; padding: 14px 18px; border: 1.5px solid var(--dfi-gray-100);
	border-radius: 12px; font-size: 1rem; font-family: inherit;
	background: #fff; box-shadow: 0 1px 3px rgba(30,58,95,.06);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.dfi-compare-search::placeholder { color: var(--dfi-gray-500); }
.dfi-compare-search:hover { border-color: var(--dfi-gray-300, #c0c8d4); }
.dfi-compare-search:focus { outline: none; border-color: var(--dfi-accent); box-shadow: 0 0 0 4px rgba(46,134,193,.12); }
.dfi-compare-vs {
	flex: 0 0 auto; font-weight: 700; font-size: .9rem; color: var(--dfi-navy);
	margin-top: 36px; text-align: center; width: 32px; height: 32px; display: flex;
	align-items: center; justify-content: center;
}

.dfi-compare-suggestions {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
	background: #fff; border: 1px solid var(--dfi-gray-100); border-radius: var(--dfi-radius);
	box-shadow: var(--dfi-shadow-md); margin-top: 4px; max-height: 260px; overflow-y: auto; display: none;
}
.dfi-compare-suggestions.active { display: block; }
.dfi-suggestion-item {
	padding: 10px 14px; cursor: pointer; font-size: .9rem; border-bottom: 1px solid var(--dfi-gray-50);
}
.dfi-suggestion-item:last-child { border-bottom: none; }
.dfi-suggestion-item:hover, .dfi-suggestion-item.active { background: var(--dfi-teal-light); }
.dfi-suggestion-brand { color: var(--dfi-gray-500); font-size: .8rem; }
.dfi-suggestion-empty { padding: 14px; color: var(--dfi-gray-500); font-size: .85rem; text-align: center; }

.dfi-compare-selected {
	margin-top: 10px; padding: 10px 14px; background: var(--dfi-teal-light);
	border: 1px solid rgba(26,188,156,.3); border-radius: var(--dfi-radius);
	font-size: .88rem; display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.dfi-compare-selected button {
	background: none; border: none; color: var(--dfi-gray-500); cursor: pointer;
	font-size: 1rem; line-height: 1; padding: 0 4px;
}

.dfi-compare-submit {
	display: block; width: 100%; max-width: 280px; margin: 0 auto 32px;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 700; font-size: .95rem;
	background: var(--dfi-teal); color: #fff; padding: 14px 28px; border-radius: 8px;
	border: 2px solid var(--dfi-teal); cursor: pointer; transition: all .2s ease;
}
.dfi-compare-submit:disabled { background: var(--dfi-gray-100); border-color: var(--dfi-gray-100); color: var(--dfi-gray-500); cursor: not-allowed; }
.dfi-compare-submit:not(:disabled):hover { background: #17a589; border-color: #17a589; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,188,156,.35); }

.dfi-popular-comparisons { margin-top: 24px; text-align: center; }
.dfi-popular-comparisons-label {
	display: block; font-size: .72rem; font-weight: 700; color: var(--dfi-gray-500);
	text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px;
}
.dfi-popular-comparisons-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dfi-popular-comparison-chip {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: .82rem; font-weight: 600; color: var(--dfi-navy);
	background: var(--dfi-gray-50); border: 1.5px solid var(--dfi-gray-100); border-radius: 999px;
	padding: 8px 16px; cursor: pointer; transition: all .2s ease;
}
.dfi-popular-comparison-chip:hover { border-color: var(--dfi-teal); background: var(--dfi-teal-light); color: var(--dfi-teal); transform: translateY(-1px); }
.dfi-popular-comparison-vs { color: var(--dfi-gray-500); font-weight: 400; }

.dfi-compare-results { margin-top: 20px; }
.dfi-compare-loading { text-align: center; padding: 40px; color: var(--dfi-gray-500); font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.dfi-compare-error {
	background: #fff3cd; border: 1px solid #ffc107; padding: 14px 18px; border-radius: var(--dfi-radius);
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: .9rem; text-align: center;
}

.dfi-compare-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px;
}
.dfi-compare-card {
	background: #fff; border: 1px solid var(--dfi-gray-100); border-radius: var(--dfi-radius-lg);
	box-shadow: 0 10px 32px rgba(30,58,95,.14); padding: 28px 26px; position: relative; overflow: hidden;
	display: flex; flex-direction: column;
}
.dfi-compare-card::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, var(--dfi-navy), var(--dfi-teal));
}
.dfi-compare-card-image {
	width: 100%; height: 220px; display: flex; align-items: center; justify-content: center;
	background: var(--dfi-gray-50); border-radius: var(--dfi-radius); margin-bottom: 16px; overflow: hidden;
}
.dfi-compare-card-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dfi-compare-card-noimage { font-size: 2.5rem; opacity: .35; }
.dfi-compare-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; }
.dfi-compare-badge {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .5px;
	text-transform: uppercase; color: var(--dfi-navy); background: var(--dfi-teal-light);
	border: 1px solid rgba(26,188,156,.3); padding: 4px 10px; border-radius: 20px;
}
.dfi-compare-card h3 { font-size: 1.15rem; color: var(--dfi-navy); text-align: center; margin: 0 0 2px; font-weight: 700; }
.dfi-compare-card .dfi-compare-brand { text-align: center; color: var(--dfi-gray-500); font-size: .85rem; margin-bottom: 18px; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

.dfi-compare-subbox {
	background: var(--dfi-gray-50); border-radius: var(--dfi-radius); padding: 14px 16px; margin-bottom: 14px;
}
.dfi-compare-subbox h4 {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: .78rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
	color: var(--dfi-accent); margin: 0 0 8px;
}
.dfi-compare-subbox .dfi-compare-metrics-list { margin: 0; flex-grow: 0; }
.dfi-compare-metrics-list { list-style: none; padding: 0; margin: 0 0 20px; flex-grow: 1; }
.dfi-compare-metrics-list li {
	display: flex; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid var(--dfi-gray-50);
	font-size: .9rem; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.dfi-compare-metrics-list li:last-child { border-bottom: none; }
.dfi-compare-metrics-list .label { color: var(--dfi-gray-500); }
.dfi-compare-metrics-list .value { font-weight: 700; color: var(--dfi-navy); font-size: 1rem; }
.dfi-compare-metrics-list .value.higher { color: #17a589; }

.dfi-compare-cta,
.dfi-compare-cta:link,
.dfi-compare-cta:visited {
	display: block; text-align: center; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 700;
	font-size: .95rem; letter-spacing: .2px; background: var(--dfi-teal) !important; color: #fff !important; padding: 14px;
	border-radius: 8px; text-decoration: none; margin-top: auto; border: 2px solid var(--dfi-teal);
	transition: all .2s ease;
}
.dfi-compare-cta:hover, .dfi-compare-cta:visited:hover { background: #17a589 !important; border-color: #17a589; color: #fff !important; text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,188,156,.35); }

.dfi-compare-cta-secondary,
.dfi-compare-cta-secondary:link,
.dfi-compare-cta-secondary:visited {
	display: block; text-align: center; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 600;
	font-size: .88rem; color: var(--dfi-navy) !important; padding: 12px 16px; border-radius: 8px; text-decoration: none;
	margin-top: 10px; background: var(--dfi-gray-50) !important; border: 1.5px solid var(--dfi-gray-100); transition: all .2s ease;
}
.dfi-compare-cta-secondary:hover { border-color: var(--dfi-navy); background: var(--dfi-teal-light) !important; color: var(--dfi-navy) !important; text-decoration: none; transform: translateY(-1px); }

.dfi-compare-share {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	margin-top: 20px; padding: 14px 18px; background: var(--dfi-gray-50); border: 1px solid var(--dfi-gray-100);
	border-radius: var(--dfi-radius);
}
.dfi-compare-share-label {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: .85rem;
	color: var(--dfi-gray-700); font-weight: 600;
}
.dfi-compare-share-btn {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 700; font-size: .85rem;
	background: #fff; color: var(--dfi-navy); border: 1.5px solid var(--dfi-gray-100); border-radius: 8px;
	padding: 9px 18px; cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
.dfi-compare-share-btn:hover { border-color: var(--dfi-teal); color: var(--dfi-teal); }
.dfi-compare-share-btn--copied { background: var(--dfi-teal-light) !important; border-color: var(--dfi-teal) !important; color: var(--dfi-teal) !important; }

.dfi-compare-summary {
	background: linear-gradient(135deg, #f0f6ff 0%, var(--dfi-gray-50) 100%);
	border: 1px solid var(--dfi-gray-100); border-radius: var(--dfi-radius-lg); padding: 24px 28px;
	font-size: .95rem; color: var(--dfi-gray-700); margin-top: 24px; box-shadow: 0 6px 20px rgba(30,58,95,.08);
}
.dfi-compare-summary-eyebrow {
	font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
	color: var(--dfi-accent); margin-bottom: 12px;
}
.dfi-compare-picks { list-style: none; padding: 0; margin: 0; }
.dfi-compare-picks li {
	padding: 12px 0; border-bottom: 1px solid rgba(30,58,95,.08); font-size: .95rem; color: var(--dfi-gray-700);
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.dfi-compare-picks li:last-child { border-bottom: none; }
.dfi-compare-picks strong { color: var(--dfi-navy); }
.dfi-compare-pick-info { flex: 1 1 auto; min-width: 200px; }
.dfi-compare-pick-cta,
.dfi-compare-pick-cta:link,
.dfi-compare-pick-cta:visited {
	flex: 0 0 auto; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-weight: 700; font-size: .82rem; background: var(--dfi-teal) !important; color: #fff !important;
	padding: 9px 16px; border-radius: 7px; text-decoration: none; white-space: nowrap; transition: all .2s ease;
}
.dfi-compare-pick-cta:hover { background: #17a589 !important; color: #fff !important; text-decoration: none; }
.dfi-compare-pick-label {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 700; font-size: .82rem;
	text-transform: uppercase; letter-spacing: .5px; color: var(--dfi-teal);
}
.dfi-compare-pick-detail { color: var(--dfi-gray-500); font-size: .88rem; }
.dfi-compare-vet-note {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: .8rem; color: var(--dfi-gray-500);
	margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(30,58,95,.08);
}

@media (max-width: 640px) {
	.dfi-compare-body { padding: 22px; }
	.dfi-compare-pickers { flex-direction: column; align-items: stretch; }
	.dfi-compare-picker {
		max-width: none;
		/* Override the 240px flex-basis from the desktop layout — in a
		   column flex container that value is read as a MIN-HEIGHT, not
		   width, which was reserving ~240px of blank space below each
		   input before the suggestions dropdown could appear. */
		flex: 1 1 auto;
		min-width: 0;
	}
	.dfi-compare-vs { margin: 0 auto; }
}