/**
 * Boligforhandleren – "Før og efter" markedstal-boks (custom Bricks element bf-foer-efter).
 *
 * Self-contained reproduction of the front page's price-waterfall panel, captured 1:1 from the
 * design-system global classes (fs-card-panel / fs-bar* / fs-panel__*). Uses the theme's colour
 * variables; the --font-* variables are NOT defined site-wide (the original box got its fonts from
 * per-element Bricks typography), so the font stacks are spelled out here with the variable as an
 * optional preference.
 */
.brxe-bf-foer-efter.bf-fe {
	--fe-serif: var(--font-serif, "Instrument Serif", Georgia, serif);
	--fe-mono: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 32px;
	background: var(--input-bg);
}

.bf-fe__title {
	margin: 0;
	font-family: var(--fe-serif);
	font-size: 21px;
	line-height: 1.05;
	color: var(--ink);
}

.bf-fe__bar {
	margin-top: 22px;
}

.bf-fe__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--fe-mono);
}

.bf-fe__label {
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--stone);
}

.bf-fe__val {
	font-size: 14.5px;
	color: var(--ink);
}

.bf-fe__track {
	margin-top: 8px;
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--sand);
}

.bf-fe__fill {
	display: block;
	height: 12px;
	border-radius: 999px;
}

.bf-fe__note {
	margin-top: 8px;
	font-family: var(--fe-mono);
	font-size: 10.5px;
	letter-spacing: 0.04em;
	color: var(--stone);
}

.bf-fe__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 26px;
	padding: 18px 22px;
	border-radius: 6px;
	background: var(--ink);
}

.bf-fe__total-label {
	max-width: 139px;
	font-family: var(--fe-mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mist);
}

.bf-fe__total-val {
	font-family: var(--fe-serif);
	font-size: 34px;
	line-height: 1;
	color: var(--coral);
}

.bf-fe__total-pct {
	margin-left: 8px;
	font-family: var(--fe-mono);
	font-size: 11px;
	color: var(--mist);
}

/* Tablet portrait (Bricks' 991px breakpoint) and down: shrink the total amount and let the
   total row wrap gracefully (label above the amount) when it no longer fits on one line. */
@media (max-width: 991px) {
	.bf-fe__total-val {
		font-size: 24px;
	}

	.bf-fe__total {
		flex-wrap: wrap;
		column-gap: 10px;
		row-gap: 10px;
	}

	.bf-fe__total-amount {
		display: flex;
		flex-wrap: wrap;
		align-self: center;
		align-items: center;
		justify-content: center;
	}
}