/* Rent vs Buy Wealth Calculator — styles
   NOTE: font sizes are in px, not rem. This site's theme sets the root
   <html> font-size to 10px, which silently shrinks any rem value (1rem
   would render as 10px instead of the expected 16px). px keeps this
   calculator's type at the intended size regardless of that setting. */

.rvbc-wrap {
	--rvbc-bg: #ffffff;
	--rvbc-card-bg: #ffffff;
	--rvbc-accent: #05549d;
	--rvbc-accent-dark: #043f75;
	--rvbc-gold: #eda01d;
	--rvbc-text: #1f2937;
	--rvbc-muted: #5b6472;
	--rvbc-highlight-bg: #eaf2fa;
	--rvbc-gold-bg: #fdf3e3;
	--rvbc-border: #d7dce2;
	--rvbc-track: #e9ebee;
	--rvbc-radius: 14px;

	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: var(--rvbc-text);
	background: var(--rvbc-bg);
	border: 1px solid var(--rvbc-border);
	padding: 28px;
	max-width: 1140px;
	margin: 0 auto;
	border-radius: var(--rvbc-radius);
	box-sizing: border-box;
	line-height: 1.5;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

.rvbc-wrap::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--rvbc-accent) 0%, var(--rvbc-accent) 60%, var(--rvbc-gold) 100%);
}

.rvbc-wrap * {
	box-sizing: border-box;
}

.rvbc-wrap img {
	max-width: 100%;
}

/* ---------- calculator shell ---------- */
.rvbc-calculator {
	display: grid;
	gap: 28px;
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 780px) {
	.rvbc-calculator {
		grid-template-columns: 1.4fr 1fr;
	}
}

/* ---------- inputs panel ---------- */
.rvbc-inputs-panel {
	min-width: 0;
}

.rvbc-field {
	margin-bottom: 18px;
}

.rvbc-field-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	flex-wrap: nowrap;
}

.rvbc-field-label {
	font-weight: 700;
	font-size: 15px;
	color: var(--rvbc-text);
	white-space: nowrap;
}

/* boxed value display shared by the plain read-out pill and the editable
   number inputs (property price / rent) so every field looks consistent */
.rvbc-value-box {
	display: flex;
	align-items: center;
	background: var(--rvbc-card-bg);
	border: 1px solid var(--rvbc-border);
	border-radius: 6px;
	padding: 5px 10px;
	min-width: 140px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rvbc-value-box:focus-within {
	border-color: var(--rvbc-accent);
	box-shadow: 0 0 0 3px rgba(5, 84, 157, 0.12);
}

.rvbc-prefix,
.rvbc-suffix {
	color: var(--rvbc-muted);
	font-size: 14px;
	font-weight: 600;
	flex-shrink: 0;
}

.rvbc-suffix {
	margin-left: 6px;
}

/* read-only pill (down payment %, rate, tenure, etc.) */
.rvbc-field-value {
	display: inline-flex;
	align-items: center;
	background: var(--rvbc-card-bg);
	border: 1px solid var(--rvbc-border);
	border-radius: 6px;
	padding: 5px 10px;
	min-width: 92px;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--rvbc-accent);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.rvbc-field-note {
	font-size: 13px;
	color: var(--rvbc-muted);
	margin-top: 6px;
}

/* editable number input (property price / rent) */
input[type="number"].rvbc-input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	border: none;
	outline: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #000000;
	width: 100%;
	min-width: 90px;
	text-align: right;
	background: transparent;
	padding: 0;
	margin: 0 0 0 6px;
}

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

/* range slider */
input[type="range"].rvbc-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	background: var(--rvbc-track);
	border-radius: 2px;
	outline: none;
	margin: 14px 0 6px;
	padding: 0;
	cursor: pointer;
}

input[type="range"].rvbc-input::-webkit-slider-runnable-track {
	background: var(--rvbc-track);
	height: 4px;
	border-radius: 2px;
}

input[type="range"].rvbc-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ffffff;
	border: 3px solid var(--rvbc-accent);
	cursor: pointer;
	margin-top: -6px;
}

input[type="range"].rvbc-input::-moz-range-track {
	height: 4px;
	background: var(--rvbc-track);
	border-radius: 2px;
}

input[type="range"].rvbc-input::-moz-range-thumb {
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ffffff;
	border: 3px solid var(--rvbc-accent);
	cursor: pointer;
}

input[type="range"].rvbc-input:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--rvbc-accent-dark);
	outline-offset: 2px;
}

.rvbc-range-labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--rvbc-muted);
}

/* ---------- results column ---------- */
.rvbc-results {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.rvbc-verdict-box {
	background: var(--rvbc-highlight-bg);
	border: 1px solid var(--rvbc-border);
	border-radius: var(--rvbc-radius);
	padding: 18px 20px;
	text-align: center;
}

.rvbc-verdict-eyebrow {
	font-size: 13px;
	font-weight: 700;
	color: var(--rvbc-accent);
	margin: 0 0 8px;
}

.rvbc-verdict-line {
	font-size: clamp(22px, 3.4vw, 28px);
	font-weight: 800;
	color: var(--rvbc-accent);
	margin: 0;
	letter-spacing: 0.1px;
}

.rvbc-verdict-box.rvbc-is-rent .rvbc-verdict-line,
.rvbc-verdict-box.rvbc-is-rent .rvbc-verdict-eyebrow {
	color: #a06a0f;
}

.rvbc-verdict-box.rvbc-is-rent {
	background: var(--rvbc-gold-bg);
}

/* buy vs rent comparison
   Uses a real CSS grid with 3 rows (heading / caption / figure) shared
   across both columns. Grid rows always size to their tallest cell, so
   the heading row, caption row, and figure row each line up perfectly
   between the Buy and Rent sides — regardless of how much either
   heading or caption wraps at any width. This is the browser doing the
   height-matching itself, rather than a guessed min-height. */
.rvbc-compare-wrap {
	container-type: inline-size;
	container-name: rvbc-compare;
}

.rvbc-compare {
	background: var(--rvbc-card-bg);
	border: 1px solid var(--rvbc-border);
	border-top: 3px solid var(--rvbc-gold);
	border-radius: var(--rvbc-radius);
	box-shadow: 0 2px 10px rgba(20, 30, 50, 0.05);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto auto auto;
	column-gap: 0;
	row-gap: 0;
	overflow: hidden;
}

.rvbc-buy-cell {
	grid-column: 1;
	background: var(--rvbc-highlight-bg);
}

.rvbc-rent-cell {
	grid-column: 3;
	background: var(--rvbc-gold-bg);
}

.rvbc-compare-label,
.rvbc-compare-sub,
.rvbc-compare-figure {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	margin: 0;
}

.rvbc-compare-label {
	grid-row: 1;
	font-size: 14px;
	font-weight: 700;
	color: var(--rvbc-text);
	line-height: 1.3;
	padding: 18px 16px 6px;
}

.rvbc-compare-sub {
	grid-row: 2;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--rvbc-muted);
	line-height: 1.4;
	padding: 0 16px 6px;
}

.rvbc-compare-figure {
	grid-row: 3;
	font-size: clamp(20px, 3.6vw, 26px);
	font-weight: 800;
	padding: 0 16px 18px;
}

.rvbc-buy-cell.rvbc-compare-figure {
	color: var(--rvbc-accent);
}

.rvbc-rent-cell.rvbc-compare-figure {
	color: #a06a0f;
}

.rvbc-compare-spine {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: center;
	justify-self: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--rvbc-text);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	position: relative;
	z-index: 1;
}

/* Stack Buy/Rent side by side only when the card itself has room —
   this responds to the card's own rendered width (e.g. the narrower
   results column on desktop), not just the browser viewport width,
   so captions never get cramped into awkward line wraps. */
@container rvbc-compare (max-width: 420px) {
	.rvbc-compare {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}
	.rvbc-buy-cell,
	.rvbc-rent-cell {
		grid-column: 1;
	}
	.rvbc-compare-label.rvbc-buy-cell {
		grid-row: 1;
	}
	.rvbc-compare-sub.rvbc-buy-cell {
		grid-row: 2;
	}
	.rvbc-compare-figure.rvbc-buy-cell {
		grid-row: 3;
	}
	.rvbc-compare-spine {
		grid-row: 4;
		grid-column: 1;
		margin: 4px auto;
	}
	.rvbc-compare-label.rvbc-rent-cell {
		grid-row: 5;
	}
	.rvbc-compare-sub.rvbc-rent-cell {
		grid-row: 6;
	}
	.rvbc-compare-figure.rvbc-rent-cell {
		grid-row: 7;
	}
}

/* chart */
.rvbc-chart-card {
	background: var(--rvbc-card-bg);
	border: 1px solid var(--rvbc-border);
	border-radius: var(--rvbc-radius);
	padding: 18px 18px 10px;
}

.rvbc-chart-title {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 12px;
}

.rvbc-chart-holder {
	position: relative;
	height: 240px;
}

/* stat strip — styled as breakdown rows */
.rvbc-stats {
	background: var(--rvbc-card-bg);
	border: 1px solid var(--rvbc-border);
	border-radius: var(--rvbc-radius);
	padding: 4px 20px;
}

.rvbc-stat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--rvbc-border);
}

.rvbc-stat:last-child {
	border-bottom: none;
}

.rvbc-stat-label {
	font-size: 13px;
	color: var(--rvbc-muted);
	margin: 0;
}

.rvbc-stat-value {
	font-size: 14px;
	font-weight: 700;
	color: var(--rvbc-text);
	font-variant-numeric: tabular-nums;
	margin: 0;
	white-space: nowrap;
}

/* insight note */
.rvbc-insight {
	background: var(--rvbc-card-bg);
	border: 1px solid var(--rvbc-border);
	border-left: 3px solid var(--rvbc-accent);
	border-radius: 10px;
	padding: 14px 16px;
	font-size: 13.5px;
	color: var(--rvbc-muted);
	line-height: 1.6;
}

.rvbc-insight strong {
	color: var(--rvbc-text);
}

.rvbc-insight-label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--rvbc-text);
	margin-bottom: 4px;
}

/* CTA button */
.rvbc-cta-wrap {
	text-align: center;
	margin-top: 4px;
}

.rvbc-cta-button {
	display: inline-block;
	background: var(--rvbc-accent);
	color: #ffffff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1;
	padding: 15px 40px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.rvbc-cta-button:hover,
.rvbc-cta-button:focus-visible {
	background: var(--rvbc-accent-dark);
	color: #ffffff;
}

.rvbc-cta-button:active {
	transform: translateY(1px);
}

@media (max-width: 480px) {
	.rvbc-cta-button {
		display: block;
		width: 100%;
	}
}

/* ---------- disclaimer ---------- */
.rvbc-disclaimer {
	margin: 18px auto 0;
	max-width: 900px;
	text-align: center;
}

.rvbc-disclaimer-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--rvbc-text);
	margin: 0 0 6px;
}

.rvbc-disclaimer p {
	font-size: 11.5px;
	color: var(--rvbc-muted);
	margin: 0 0 6px;
	line-height: 1.6;
}

.rvbc-disclaimer p:last-child {
	margin-bottom: 0;
}

/* ---------- small screens ---------- */
@media (max-width: 480px) {
	.rvbc-wrap {
		padding: 18px 16px;
		border-radius: 12px;
	}
	.rvbc-field-top {
		flex-wrap: wrap !important;
		gap: 8px !important;
	}
	.rvbc-field-label {
		font-size: 13.5px !important;
		white-space: normal !important;
		line-height: 1.3;
	}
	.rvbc-value-box {
		min-width: 110px !important;
	}
	input[type="number"].rvbc-input {
		font-size: 13.5px !important;
	}
	.rvbc-prefix,
	.rvbc-suffix {
		font-size: 13px !important;
	}
	.rvbc-compare {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}
	.rvbc-buy-cell,
	.rvbc-rent-cell {
		grid-column: 1;
	}
	.rvbc-compare-label.rvbc-buy-cell {
		grid-row: 1;
	}
	.rvbc-compare-sub.rvbc-buy-cell {
		grid-row: 2;
	}
	.rvbc-compare-figure.rvbc-buy-cell {
		grid-row: 3;
	}
	.rvbc-compare-spine {
		grid-row: 4;
		grid-column: 1;
		margin: 4px auto;
	}
	.rvbc-compare-label.rvbc-rent-cell {
		grid-row: 5;
	}
	.rvbc-compare-sub.rvbc-rent-cell {
		grid-row: 6;
	}
	.rvbc-compare-figure.rvbc-rent-cell {
		grid-row: 7;
	}
	.rvbc-chart-holder {
		height: 220px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rvbc-wrap * {
		transition: none !important;
		animation: none !important;
	}
}