.bfvc-calculator,
.bfvc-calculator * {
	box-sizing: border-box;
}

.bfvc-preview-body {
	display: grid;
	min-height: 100vh;
	margin: 0;
	padding: 58px 24px;
	place-items: center;
	background: #e8f5ff;
}

.bfvc-calculator {
	--bfvc-blue: #2236cc;
	--bfvc-navy: #10115f;
	--bfvc-ink: #11135f;
	--bfvc-soft-blue: #e8f5ff;
	--bfvc-track: #f0f0f0;
	position: relative;
	width: min(100%, 706px);
	margin: 0 auto;
	overflow: hidden;
	border-radius: 40px;
	background: #fff;
	color: var(--bfvc-ink);
	font-family: Inter, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.45;
}

.bfvc-inputs {
	padding: 50px 41px 46px;
}

.bfvc-field + .bfvc-field {
	margin-top: 35px;
}

.bfvc-field-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 8px;
}

.bfvc-label-wrap {
	position: relative;
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 10px;
}

.bfvc-label-wrap label {
	margin: 0;
	color: var(--bfvc-ink);
	font: inherit;
	font-weight: 400;
	cursor: pointer;
}

.bfvc-info {
	display: inline-grid;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bfvc-soft-blue);
	color: var(--bfvc-ink);
	font: 600 15px/1 Inter, Arial, sans-serif;
	cursor: help;
}

.bfvc-info:focus-visible,
.bfvc-result-info:focus-visible {
	outline: 3px solid #8fcbff;
	outline-offset: 3px;
}

.bfvc-tooltip {
	position: absolute;
	z-index: 6;
	top: calc(100% + 10px);
	left: 0;
	width: min(330px, calc(100vw - 60px));
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--bfvc-soft-blue);
	box-shadow: 0 8px 24px rgba(16, 17, 95, .2);
	color: var(--bfvc-ink);
	font-size: 13px;
	line-height: 1.45;
}

.bfvc-tooltip::before {
	position: absolute;
	top: -6px;
	left: 8px;
	width: 12px;
	height: 12px;
	background: var(--bfvc-soft-blue);
	content: "";
	transform: rotate(45deg);
}

.bfvc-value {
	flex: 0 0 auto;
	color: var(--bfvc-ink);
	font: 700 16px/1.2 Inter, Arial, sans-serif;
}

.bfvc-calculator input[type="range"].bfvc-range {
	display: block !important;
	width: 100% !important;
	min-width: 0;
	max-width: none !important;
	height: 16px;
	margin: 0 !important;
	padding: 0;
	border: 0;
	border-radius: 999px;
	-webkit-appearance: none;
	appearance: none;
	background: transparent !important;
	cursor: pointer;
}

.bfvc-range::-webkit-slider-runnable-track {
	height: 12px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--bfvc-blue) 0 var(--bfvc-fill, 0%), var(--bfvc-track) var(--bfvc-fill, 0%) 100%) !important;
}

.bfvc-range::-moz-range-track {
	height: 12px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--bfvc-blue) 0 var(--bfvc-fill, 0%), var(--bfvc-track) var(--bfvc-fill, 0%) 100%) !important;
}

.bfvc-range::-webkit-slider-thumb {
	width: 22px;
	height: 22px;
	margin-top: -5px;
	border: 0;
	border-radius: 50%;
	-webkit-appearance: none;
	appearance: none;
	background: var(--bfvc-blue);
	box-shadow: none;
}

.bfvc-range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background: var(--bfvc-blue);
	box-shadow: none;
}

.bfvc-range:focus-visible {
	outline: 3px solid #8fcbff;
	outline-offset: 4px;
}

.bfvc-result {
	position: relative;
	min-height: 182px;
	padding: 28px 32px 25px;
	background: var(--bfvc-navy);
	color: #fff;
	text-align: center;
}

.bfvc-result-label,
.bfvc-result-unit {
	margin: 0;
	color: #fff;
	font-family: Inter, Arial, sans-serif;
	font-weight: 400;
}

.bfvc-result-label {
	font-size: 18px;
}

.bfvc-result-number {
	display: block;
	margin: 2px 0 0;
	color: #fff;
	font-family: Poppins, Inter, Arial, sans-serif;
	font-size: clamp(44px, 7vw, 54px);
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.05;
}

.bfvc-result-unit {
	margin-top: 2px;
	font-size: 14px;
}

.bfvc-tooltip[hidden] {
	display: none;
}

.bfvc-result-info-wrap {
	position: absolute;
	z-index: 5;
	top: 19px;
	left: 41px;
}

.bfvc-result-info {
	position: relative;
	z-index: 2;
}

.bfvc-result-tooltip {
	top: auto;
	bottom: calc(100% + 10px);
	left: 0;
	width: min(430px, calc(100vw - 72px));
	text-align: left;
}

.bfvc-result-tooltip::before {
	top: auto;
	bottom: -6px;
}

.bfvc-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (max-width: 600px) {
	.bfvc-preview-body {
		padding: 24px 14px;
	}

	.bfvc-calculator {
		border-radius: 28px;
	}

	.bfvc-inputs {
		padding: 34px 24px 36px;
	}

	.bfvc-field + .bfvc-field {
		margin-top: 30px;
	}

	.bfvc-field-heading {
		align-items: flex-start;
		gap: 12px;
	}

	.bfvc-label-wrap {
		align-items: flex-start;
		gap: 8px;
	}

	.bfvc-label-wrap label {
		font-size: 14px;
		line-height: 1.35;
	}

	.bfvc-info {
		width: 22px;
		height: 22px;
		flex-basis: 22px;
		font-size: 14px;
	}

	.bfvc-value {
		padding-top: 2px;
		font-size: 15px;
	}

	.bfvc-result {
		min-height: 176px;
		padding: 26px 20px 24px;
	}

	.bfvc-result-info-wrap {
		top: 18px;
		left: 24px;
	}

	.bfvc-result-label {
		font-size: 16px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.bfvc-calculator *,
	.bfvc-calculator *::before,
	.bfvc-calculator *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}