/**
 * Mortgage Calculator — /mortgages/ page (Figma 6054:143090).
 *
 * Two-column layout on desktop, single column on tablet/mobile:
 *   LEFT  — white form card  (Figma 6054:143972): title + 3 input+slider
 *           combos (Price / Deposit / Term) + Interest chips & stepper +
 *           Contact CTA + disclaimer.
 *   RIGHT — cream result card (Figma 6054:143973): Monthly Fee pill
 *           (white@50% over cream), summary rows (Mortgage amount +
 *           Percentage), divider, Cost Breakdown panel with stacked bar
 *           + floating "Property Price" tooltip + per-line items, divider,
 *           Total Cost.
 *
 * Colors track Figma tokens:
 *   Deposit segment        #666 (Grey-2)
 *   Mortgage Amount segm.  #999 (Grey-3)
 *   Mortgage Interest segm #81D8D0 (Tiffany Aqua)
 *   Tooltip bg             #0A2438 (Deep Navy)
 *   Card bg                #FAF8F4 (Cream)
 *
 * All non-figma-exact neutrals (e.g. #666, #999) are hard-coded here
 * because they only appear in this one visualisation — promoting them to
 * tokens would create single-use globals.
 */

/* === Section wrapper (Figma container 1240×797, centred at 1440) === */
.wlre-mortgage-calc {
	padding: var(--wlre-space-64) 0 var(--wlre-space-48);
	background: var(--wlre-color-white);
}

.wlre-mortgage-calc__inner {
	max-width: var(--wlre-wide-width);
	margin: 0 auto;
	padding: 0 var(--wlre-space-40);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wlre-space-20);
	align-items: stretch;
}

/* === LEFT form card — white with shadow. === */
.wlre-mortgage-calc__form-card {
	background: var(--wlre-color-white);
	border-radius: var(--wlre-radius-20);
	box-shadow: var(--wlre-shadow-card);
	padding: var(--wlre-space-40);
	display: flex;
	flex-direction: column;
}

.wlre-mortgage-calc__form {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-20);
}

.wlre-mortgage-calc__heading {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
	margin: 0 0 var(--wlre-space-8);
}

/* === Field block: label + input + slider + min/max labels === */
.wlre-mortgage-calc__field {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-8);
}

.wlre-mortgage-calc__label {
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
}

.wlre-mortgage-calc__input {
	width: 100%;
	height: 52px;
	padding: 0 var(--wlre-space-16);
	background: var(--wlre-color-white);
	border: 0.5px solid var(--wlre-color-neutral-400, #d0d0d0);
	border-radius: var(--wlre-radius-sm);
	color: var(--wlre-color-text-900);
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.48;
}

.wlre-mortgage-calc__input:focus-visible {
	border-color: var(--wlre-color-accent-500);
	outline: none;
	box-shadow: none;
}

/* Slider wrapper wraps the 28px-knob range + min/max labels. The knob
 * + track use global .wlre-form__range tokens; this block only adjusts
 * vertical rhythm so the labels hug the slider. */
.wlre-mortgage-calc__slider {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-4);
	padding-top: var(--wlre-space-4);
}

.wlre-mortgage-calc__range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 28px;
	background: transparent;
	cursor: pointer;
}

/* Track — 2px neutral grey with an aqua fill driven by a CSS variable
 * (`--wlre-range-progress`) that JS paints from the current value.
 * RTL: gradient direction is flipped to `to left` in rtl.css. */
.wlre-mortgage-calc__range::-webkit-slider-runnable-track {
	height: 2px;
	background: linear-gradient(
		to right,
		var(--wlre-color-text-900) 0%,
		var(--wlre-color-text-900) var(--wlre-range-progress, 0%),
		var(--wlre-color-neutral-400, #d0d0d0) var(--wlre-range-progress, 0%),
		var(--wlre-color-neutral-400, #d0d0d0) 100%
	);
	border-radius: 2px;
}

.wlre-mortgage-calc__range::-moz-range-track {
	height: 2px;
	background: var(--wlre-color-neutral-400, #d0d0d0);
	border-radius: 2px;
}

.wlre-mortgage-calc__range::-moz-range-progress {
	height: 2px;
	background: var(--wlre-color-text-900);
	border-radius: 2px;
}

/* Knob — 28×28 white circle with 0.5px neutral-4 border + subtle drop
 * shadow so it reads as elevated above the track. */
.wlre-mortgage-calc__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wlre-color-white);
	border: 0.5px solid var(--wlre-color-neutral-400, #d0d0d0);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px rgba(0, 0, 0, 0.12);
	margin-top: -13px; /* centre on the 2px track */
	cursor: pointer;
}

.wlre-mortgage-calc__range::-moz-range-thumb {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wlre-color-white);
	border: 0.5px solid var(--wlre-color-neutral-400, #d0d0d0);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px rgba(0, 0, 0, 0.12);
	cursor: pointer;
}

.wlre-mortgage-calc__range-labels {
	display: flex;
	justify-content: space-between;
	font-family: var(--wlre-font-body);
	font-size: 12px;
	line-height: 1.48;
	color: var(--wlre-color-neutral-600);
}

/* === Interest rate row — chips (left) + stepper (right) on one line === */
.wlre-mortgage-calc__rate-row {
	display: flex;
	align-items: flex-end;
	gap: var(--wlre-space-44);
	justify-content: space-between;
	margin-top: var(--wlre-space-8);
}

.wlre-mortgage-calc__rate-left {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-16);
	min-width: 0;
	flex: 1 1 auto;
}

.wlre-mortgage-calc__rate-heading {
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-8);
}

.wlre-mortgage-calc__info {
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: var(--wlre-color-neutral-600);
}

.wlre-mortgage-calc__info svg {
	width: 100%;
	height: 100%;
}

/* Chip pair — 8px gap, each 40px tall. Active chip = aqua-tinted fill
 * + teal-dark 1.5px border + bold text, matching the pill token on
 * other pages (Buy/Rent toggle, filter chips). */
.wlre-mortgage-calc__pills {
	display: inline-flex;
	gap: var(--wlre-space-8);
}

.wlre-mortgage-calc__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--wlre-space-20);
	height: 40px;
	border: 0.5px solid var(--wlre-color-neutral-400, #d0d0d0);
	border-radius: 52px;
	background: transparent;
	color: var(--wlre-color-text-900);
	font-family: var(--wlre-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.48;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, font-weight 0.18s ease;
}

.wlre-mortgage-calc__pill.is-active,
.wlre-mortgage-calc__pill[aria-pressed="true"] {
	border: 1.5px solid var(--wlre-color-teal-700, #008d84);
	background: linear-gradient(0deg, rgba(129, 216, 208, 0.12), rgba(129, 216, 208, 0.12)), var(--wlre-color-white);
	font-weight: 700;
}

.wlre-mortgage-calc__pill:focus-visible {
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: 2px;
}

/* Stepper — 235×40 per Figma. Minus / value / plus. Button-group feel
 * with a single outer border; value is readonly + aria-live so the new
 * rate is announced when stepping. */
.wlre-mortgage-calc__stepper {
	display: inline-flex;
	align-items: stretch;
	width: 235px;
	height: 40px;
	border: 0.5px solid var(--wlre-color-neutral-400, #d0d0d0);
	border-radius: var(--wlre-radius-sm);
	background: var(--wlre-color-white);
	overflow: hidden;
}

.wlre-mortgage-calc__step {
	flex: 0 0 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--wlre-color-text-900);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wlre-mortgage-calc__step:hover {
	background: var(--wlre-color-surface-50);
}

.wlre-mortgage-calc__step-value {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
	background: transparent;
	border: 0;
	color: var(--wlre-color-text-900);
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.48;
}

.wlre-mortgage-calc__step-value:focus {
	outline: none;
}

/* === Primary CTA + small-print disclaimer === */
.wlre-mortgage-calc__cta {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-8);
	margin-top: var(--wlre-space-20);
}

.wlre-mortgage-calc__cta-btn {
	align-self: flex-start;
	width: 338px;
	max-width: 100%;
	height: 56px;
	font-size: 16px;
}

.wlre-mortgage-calc__disclaimer {
	margin: 0;
	font-family: var(--wlre-font-body);
	font-size: 14px;
	line-height: 1.48;
	color: var(--wlre-color-neutral-600);
}

/* ===== RIGHT — result card ============================================
 * Cream panel inset inside a 20px-padded white shell. The outer shell
 * gives us the visual "card on page" breathing room per Figma's
 * `p-[20px]` wrapper on node 6054:143973. */
.wlre-mortgage-calc__result-card {
	background: var(--wlre-color-surface-50, #faf8f4);
	border-radius: var(--wlre-radius-20);
	padding: var(--wlre-space-40);
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-20);
	box-shadow: var(--wlre-shadow-card);
}

/* Monthly Fee pill — translucent white over cream, centred copy. The
 * 36px heading matches Figma "H2" which is the marquee value on this card. */
.wlre-mortgage-calc__monthly-pill {
	background: rgba(255, 255, 255, 0.5);
	border-radius: var(--wlre-radius-sm);
	padding: var(--wlre-space-24);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wlre-space-4);
	text-align: center;
}

.wlre-mortgage-calc__monthly-label {
	margin: 0;
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
}

.wlre-mortgage-calc__monthly-value {
	margin: 0;
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 36px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
}

/* === Summary rows (Mortgage amount / Percentage) — 18px body XL,
 * value right-aligned in bold. === */
.wlre-mortgage-calc__summary {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-12);
}

.wlre-mortgage-calc__summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wlre-space-12);
}

.wlre-mortgage-calc__summary-label {
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-8);
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
}

.wlre-mortgage-calc__summary-label .wlre-mortgage-calc__info {
	width: 20px;
	height: 20px;
}

.wlre-mortgage-calc__summary-value {
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	text-align: end;
}

/* Divider — 0.5px neutral-4, full-width. Compact variant for inside the
 * Cost Breakdown panel trims the surrounding margins so the Total row
 * sits close to the item rows above it (per Figma spacing). */
.wlre-mortgage-calc__divider {
	border: 0;
	border-top: 0.5px solid var(--wlre-color-neutral-400, #d0d0d0);
	margin: 0;
	width: 100%;
}

.wlre-mortgage-calc__divider--compact {
	margin: var(--wlre-space-4) 0;
}

/* ===== Cost Breakdown sub-panel — translucent white over cream ====== */
.wlre-mortgage-calc__breakdown {
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--wlre-radius-sm);
	padding: var(--wlre-space-24);
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-20);
}

.wlre-mortgage-calc__breakdown-heading {
	margin: 0;
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
}

.wlre-mortgage-calc__bar-wrap {
	position: relative;
	padding-bottom: 42px; /* room for indicator tick + pill below bar */
}

.wlre-mortgage-calc__bar {
	display: flex;
	width: 100%;
	height: 10px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wlre-color-neutral-400, #d0d0d0);
}

.wlre-mortgage-calc__bar-seg {
	height: 100%;
	display: block;
	transition: width 0.25s ease;
}

.wlre-mortgage-calc__bar-seg--deposit  { background: #666666; }
.wlre-mortgage-calc__bar-seg--mortgage { background: #999999; }
.wlre-mortgage-calc__bar-seg--interest { background: var(--wlre-color-accent-500, #81d8d0); }

/* Bar indicator — vertical tick + dark pill tooltip at deposit+mortgage seam. */
.wlre-mortgage-calc__bar-indicator {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
}

.wlre-mortgage-calc__bar-indicator-tick {
	width: 1.5px;
	height: 24px;
	background: var(--wlre-color-brand-900, #0a2438);
	border-radius: 1px;
	margin-top: -7px;
}

.wlre-mortgage-calc__bar-indicator-tip {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--wlre-color-brand-900, #0a2438);
	color: #ffffff;
	border-radius: 4px;
	padding: 2px 8px;
	white-space: nowrap;
	margin-top: 2px;
}

.wlre-mortgage-calc__bar-indicator-label {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.48;
}

.wlre-mortgage-calc__bar-indicator-value {
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.48;
}

@media (max-width: 767px) {
	.wlre-mortgage-calc__bar-indicator-tip {
		flex-direction: column;
		align-items: center;
		gap: 2px;
		text-align: center;
	}
}

/* Items list — colored square + label + value, rows gap 12px. */
.wlre-mortgage-calc__items {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-12);
}

.wlre-mortgage-calc__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wlre-space-12);
}

.wlre-mortgage-calc__item-label {
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-8);
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
}

.wlre-mortgage-calc__dot {
	width: 10px;
	height: 10px;
	border-radius: 2px;
	display: inline-block;
	flex-shrink: 0;
}

.wlre-mortgage-calc__dot--deposit  { background: #666666; }
.wlre-mortgage-calc__dot--mortgage { background: #999999; }
.wlre-mortgage-calc__dot--interest { background: var(--wlre-color-accent-500, #81d8d0); }

.wlre-mortgage-calc__item-value {
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	text-align: end;
}

/* Total row — 18px bold both sides, sits below the items divider. */
.wlre-mortgage-calc__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wlre-space-12);
}

.wlre-mortgage-calc__total-label,
.wlre-mortgage-calc__total-value {
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
}

.wlre-mortgage-calc__total-value { text-align: end; }

/* ===== Responsive =====
 * 1024: stack the two cards vertically so each breathes on tablet.
 * 767:  tighten inner padding + shrink title. Rate row becomes column
 *       so the stepper sits under the chips comfortably on phones. */
@media (max-width: 1023px) {
	.wlre-mortgage-calc__inner {
		grid-template-columns: 1fr;
		gap: var(--wlre-space-24);
	}
}

@media (max-width: 767px) {
	.wlre-mortgage-calc__bar-wrap {
		padding-bottom: 58px; /* stacked two-line indicator needs more room */
	}
	.wlre-mortgage-calc {
		padding: var(--wlre-space-40) 0 var(--wlre-space-32);
	}
	.wlre-mortgage-calc__inner {
		padding: 0 var(--wlre-space-16);
	}
	.wlre-mortgage-calc__form-card,
	.wlre-mortgage-calc__result-card {
		padding: var(--wlre-space-24) var(--wlre-space-16);
	}
	.wlre-mortgage-calc__breakdown {
		padding-inline: 0;
	}
	.wlre-mortgage-calc__heading {
		font-size: 20px;
	}
	.wlre-mortgage-calc__rate-row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wlre-space-16);
	}
	.wlre-mortgage-calc__stepper {
		width: 100%;
	}
	.wlre-mortgage-calc__cta-btn {
		width: 100%;
	}
	.wlre-mortgage-calc__monthly-value {
		font-size: 32px;
	}
	.wlre-mortgage-calc__summary-label,
	.wlre-mortgage-calc__summary-value {
		font-size: 16px;
	}
	.wlre-mortgage-calc__total-label,
	.wlre-mortgage-calc__total-value {
		font-size: 16px;
	}
}