/* MatchFast Project Fit
   Scoped under .mfpf / .mfpf-cta so nothing here can leak into the listicle
   template or the theme. Colours are local variables rather than globals for
   the same reason. */

.mfpf,
.mfpf-cta {
	--mfpf-accent: #0e6e78;
	--mfpf-accent-ink: #0a555d;
	--mfpf-wash: #e6f1f2;
	--mfpf-warn: #a55c19;
	--mfpf-warn-wash: #fbf1e6;
	--mfpf-good: #2f7d52;
	--mfpf-ink: #14202b;
	--mfpf-muted: #5d6b7a;
	--mfpf-line: #dde3e9;
	--mfpf-surface: #fff;
	--mfpf-ground: #f6f8f9;
	--mfpf-radius: 14px;
	box-sizing: border-box;
	font-family: inherit;
	color: var(--mfpf-ink);
}

.mfpf *,
.mfpf-cta * {
	box-sizing: border-box;
}

/* ---------- call to action band ---------- */
.mfpf-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px;
	margin: 34px 0;
	background: var(--mfpf-wash);
	border: 1px solid rgba(14, 110, 120, .22);
	border-radius: var(--mfpf-radius);
}

.mfpf-cta-body {
	flex: 1 1 300px;
	min-width: 0;
}

.mfpf-cta-h {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mfpf-ink);
}

.mfpf-cta-t {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--mfpf-muted);
}

/* ---------- shell ---------- */
.mfpf {
	margin: 44px 0;
	padding: 30px;
	background: var(--mfpf-ground);
	border: 1px solid var(--mfpf-line);
	border-radius: var(--mfpf-radius);
}

.mfpf-head {
	max-width: 62ch;
	margin-bottom: 26px;
}

.mfpf-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--mfpf-accent);
	margin-bottom: 10px;
}

.mfpf .mfpf-h2 {
	margin: 0 0 10px;
	font-size: clamp(22px, 3vw, 29px);
	line-height: 1.18;
	font-weight: 700;
	color: var(--mfpf-ink);
}

.mfpf-lede {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--mfpf-muted);
}

/* ---------- controls ---------- */
.mfpf-panel {
	display: grid;
	gap: 24px;
	padding: 24px;
	background: var(--mfpf-surface);
	border: 1px solid var(--mfpf-line);
	border-radius: 12px;
}

.mfpf-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mfpf-muted);
	margin-bottom: 12px;
}

.mfpf-budget {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
	margin-bottom: 12px;
}

.mfpf-amount {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: var(--mfpf-ink);
	font-variant-numeric: tabular-nums;
}

.mfpf-count {
	margin: 0;
	font-size: 14px;
	color: var(--mfpf-muted);
}

.mfpf-count-n {
	font-weight: 700;
	color: var(--mfpf-accent);
	font-variant-numeric: tabular-nums;
}

.mfpf-count.is-zero .mfpf-count-n {
	color: var(--mfpf-warn);
}

.mfpf-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--mfpf-accent) var(--mfpf-pct, 36%), #e3e8ec var(--mfpf-pct, 36%));
	outline: none;
	margin: 0;
}

.mfpf-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--mfpf-surface);
	border: 3px solid var(--mfpf-accent);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(20, 32, 43, .18);
}

.mfpf-range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mfpf-surface);
	border: 3px solid var(--mfpf-accent);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(20, 32, 43, .18);
}

.mfpf-range:focus-visible {
	outline: 2px solid var(--mfpf-accent);
	outline-offset: 4px;
}

.mfpf-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 11.5px;
	color: var(--mfpf-muted);
	font-variant-numeric: tabular-nums;
}

.mfpf-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mfpf-opt {
	padding: 9px 15px;
	font-size: 14px;
	font-family: inherit;
	color: var(--mfpf-ink);
	background: var(--mfpf-surface);
	border: 1px solid var(--mfpf-line);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color .14s ease, background .14s ease, color .14s ease;
}

.mfpf-opt:hover {
	border-color: var(--mfpf-accent);
}

.mfpf-opt[aria-pressed="true"] {
	background: var(--mfpf-accent);
	border-color: var(--mfpf-accent);
	color: #fff;
}

.mfpf-opt:focus-visible {
	outline: 2px solid var(--mfpf-accent);
	outline-offset: 2px;
}

/* ---------- results ---------- */
.mfpf-results {
	margin-top: 26px;
}

.mfpf-group-h {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 26px 0 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mfpf-muted);
}

.mfpf-group-h:first-child {
	margin-top: 0;
}

.mfpf-row {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 15px 18px;
	margin-bottom: 8px;
	background: var(--mfpf-surface);
	border: 1px solid var(--mfpf-line);
	border-radius: 11px;
}

.mfpf-row.is-top {
	border-color: var(--mfpf-accent);
	box-shadow: 0 0 0 1px var(--mfpf-accent);
}

.mfpf-row.is-out {
	background: transparent;
	border-style: dashed;
	opacity: .78;
}

.mfpf-logo {
	width: 46px;
	height: 46px;
	object-fit: contain;
	border-radius: 8px;
	background: var(--mfpf-ground);
}

.mfpf-noLogo {
	width: 46px;
	height: 46px;
	border-radius: 8px;
	background: var(--mfpf-wash);
	display: grid;
	place-items: center;
	font-weight: 700;
	color: var(--mfpf-accent);
}

.mfpf-name {
	margin: 0 0 3px;
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.25;
}

.mfpf-name a {
	color: inherit;
	text-decoration: none;
}

.mfpf-name a:hover {
	text-decoration: underline;
}

.mfpf-meta {
	margin: 0;
	font-size: 13px;
	color: var(--mfpf-muted);
	line-height: 1.5;
}

.mfpf-why {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 7px;
	font-size: 13px;
}

.mfpf-ok {
	color: var(--mfpf-good);
}

.mfpf-no {
	color: var(--mfpf-warn);
}

.mfpf-score {
	text-align: right;
	min-width: 62px;
}

.mfpf-score b {
	display: block;
	font-size: 25px;
	line-height: 1;
	font-weight: 700;
	color: var(--mfpf-accent);
	font-variant-numeric: tabular-nums;
}

.mfpf-score span {
	font-size: 11px;
	color: var(--mfpf-muted);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.mfpf-row.is-out .mfpf-score b {
	color: var(--mfpf-muted);
}

/* ---------- empty state ---------- */
.mfpf-empty {
	padding: 22px 24px;
	background: var(--mfpf-warn-wash);
	border: 1px solid rgba(165, 92, 25, .3);
	border-radius: 12px;
}

.mfpf-empty h3 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--mfpf-ink);
}

.mfpf-empty p {
	margin: 0 0 10px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--mfpf-ink);
}

.mfpf-empty p:last-child {
	margin-bottom: 0;
}

.mfpf-foot {
	margin: 22px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--mfpf-muted);
}

.mfpf-note {
	padding: 14px 16px;
	background: #fff8e5;
	border: 1px solid #e6d9b0;
	border-radius: 10px;
	font-size: 14px;
}

/* ---------- buttons ---------- */
.mfpf-btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 9px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s ease;
}

.mfpf-btn-p {
	background: var(--mfpf-accent);
	color: #fff;
}

.mfpf-btn-p:hover,
.mfpf-btn-p:focus {
	background: var(--mfpf-accent-ink);
	color: #fff;
}

@media (max-width: 640px) {
	.mfpf {
		padding: 22px 18px;
	}

	.mfpf-panel {
		padding: 18px;
	}

	.mfpf-row {
		grid-template-columns: 40px minmax(0, 1fr);
		row-gap: 10px;
	}

	.mfpf-score {
		grid-column: 2;
		text-align: left;
	}

	.mfpf-logo,
	.mfpf-noLogo {
		width: 40px;
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mfpf *,
	.mfpf-cta * {
		transition-duration: .001ms !important;
	}
}

/* ---------- brief CTA inside results ---------- */
.mfpf-brief {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 20px;
	align-items: center;
	justify-content: space-between;
	margin: 14px 0 22px;
	padding: 18px 20px;
	background: #0B1437;
	border-radius: 12px;
}

.mfpf-brief > div {
	flex: 1 1 280px;
	min-width: 0;
}

.mfpf .mfpf-brief-h {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.mfpf .mfpf-brief-t {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: #B6BDD0;
}

.mfpf-brief .mfpf-btn-p {
	background: #14B8A6;
	color: #07332B;
	border: 0;
	font-family: inherit;
}

.mfpf-brief .mfpf-btn-p:hover,
.mfpf-brief .mfpf-btn-p:focus {
	background: #4FE0C6;
	color: #07332B;
}