/* Mortgage Calculators
 *
 * Shared by the Mortgage, Overpayment, Stamp Duty and Cost Summariser
 * elements, and only loaded on pages that have one. Text inputs, selects and
 * tables pick up each site's own field / table styles, and the colours come
 * from the Salient colour variables, so the same file works on every site.
 * To change a colour on one site, override the variables below in that
 * theme's style.css, e.g.
 *
 *   .calculator { --calculator-symbol-total: #1a2142; }
 *
 * The "Calculator pages" section styles the tabs / text the calculators sit
 * in on the calculators page - adjust it for each site's own layout.
 */

.wpb_text_column.wpb_content_element.disclaimer p {font-size: 12px;line-height: 1.5;padding-bottom: 10px;}
.wpb_text_column.wpb_content_element.disclaimer p:last-child {padding: 0px;}
.wpb_text_column.wpb_content_element.disclaimer {margin-top: 25px;}

.calculator {
	--calculator-accent: var(--nectar-accent-color);
	--calculator-border: #ebebeb;
	--calculator-symbol: var(--nectar-extra-color-2);
	--calculator-symbol-total: #3f4663;
	background-color: #fff;
	padding: 35px;
	padding-bottom: 40px;
	margin: 0px !important;
	border: 1.5px solid var(--calculator-border);
	border-radius: 5px;
	overflow: hidden;
	border-collapse: collapse;
}

/* The cost summariser's table is its own card. */
.calculator.cost-summariser {
	padding: 0;
	border: none;
	background: transparent;
}

.calculator [hidden] {
	display: none !important;
}


/* ------------------------------------------------------------ Form */

.calculator .calculator__form {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
	align-items: flex-end;
	gap: 25px 15px;
	margin: 0 !important;
}

.calculator .calculator__form .calculator__field {
	flex: 1;
}

.calculator .calculator__form .calculator__label {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	color: var(--nectar-font-color) !important;
	font-weight: 500;
	line-height: 1;
	text-align: left;
}

/* Sizing only - the look comes from the site's own field styles. */
.calculator .calculator__form .calculator__input,
.calculator .calculator__form .calculator__select {
	width: 100% !important;
	max-width: 100% !important;
	padding: 15px 20px !important;
	font-size: 15px;
}

.overpayment-calculator .calculator__form .calculator__field {
	min-width: 0;
}


/* ------------------------------------------------------------ Results */

.calculator .calculator__results {
	display: flex;
	gap: 15px;
	margin-top: 35px;
	padding-top: 35px;
	border-top: 1px solid var(--calculator-border);
}

.calculator .calculator__results .calculator__result {
	flex: 1;
	padding: 20px;
	border: 1.5px solid var(--calculator-border) !important;
	border-radius: 7.5px;
	background-color: var(--nectar-off-white);
	color: var(--calculator-accent);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.calculator .calculator__results .calculator__result-label {
	display: block;
	margin-bottom: 7.5px;
	color: #000;
	font-size: 14px;
	font-family: 'Sanchez';
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
}

/* Keep the £ with its number. */
.calculator .calculator__results .calculator__result-value {
	white-space: nowrap;
}

.overpayment-calculator .calculator__results .calculator__result {
}

.calculator .calculator__error {
	margin-top: 20px;
	padding: 15px 20px;
	border: 1.5px solid var(--calculator-border);
	background: #fafafa;
	font-size: 15px;
	line-height: 1.5;
}


/* ------------------------------------------------------------ Stamp Duty */

/* Hidden until there's a price and a property type to work from. */
.stamp-duty-calculator .calculator__table {
	display: none;
	margin-top: 35px !important;
}

.stamp-duty-calculator .calculator__table.is-visible {
	display: table;
	animation: calculator-reveal 0.5s ease both;
}

@keyframes calculator-reveal {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* "There's no stamp duty to pay" and the like. */
.stamp-duty-calculator .calculator__table .stamp-duty-calculator__notice td {
	color: var(--calculator-accent);
	font-weight: 600;
	text-align: center;
}


/* ------------------------------------------------------------ Cost Summariser */

.calculator.cost-summariser .cost-summariser__table {
	margin: 0 !important;
	border: none !important;
	border-collapse: collapse;
	box-shadow: none !important;
	border-radius: 5px;
	overflow: hidden;
}

.calculator thead th {
	padding: 20px 20px !important;
	border-bottom: unset !important;
	font-size: 1rem !important;
	line-height: 1;
	font-weight: 500 !important;
	background: var(--nectar-accent-color);
	color: #fff !important;
	border-color: #0b3a70 !important;
}

.calculator tr td {
	padding: 14px 20px !important;
	font-size: 1rem !important;
	line-height: 1;
	vertical-align: middle;
}

.calculator.cost-summariser .cost-summariser__table tr td:first-child {
	border-left: 0 !important;
}

.calculator.cost-summariser .cost-summariser__table tr td:last-child {
	border-right: 0 !important;
}

.calculator.cost-summariser .cost-summariser__table tbody tr:nth-child(even):not(.cost-summariser__total-row) {
	background: #fff !important;
}

.calculator.cost-summariser .cost-summariser__table .cost-summariser__total-row {
	background: var(--calculator-accent) !important;
	color: #fff !important;
}

.calculator.cost-summariser .cost-summariser__table .cost-summariser__total-row td {
	padding: 22px 25px !important;
	border-color: #ffffff50 !important;
	border-bottom: 0 !important;
	font-weight: 600;
}

/* After the total row, so its last cell gets this padding too. */
.calculator.cost-summariser .cost-summariser__table td:last-child {
	padding: 12px 15px !important;
}

.calculator.cost-summariser .cost-summariser__input-wrap {
	display: flex;
	align-items: center;
	gap: 0.25em;
}

/* Strip the site's field styling so the input sits flat in the table.
 * #ajax-content-wrap (Salient's page wrapper) is needed to out-rank the
 * theme's own "#ajax-content-wrap .container-wrap input" field styles. */
#ajax-content-wrap .calculator.cost-summariser .cost-summariser__input-wrap .cost-summariser__input,
.calculator.cost-summariser .cost-summariser__input-wrap .cost-summariser__input {
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
	appearance: none;
}

.calculator.cost-summariser .cost-summariser__symbol {
	display: inline-block;
	width: 32px;
	height: 32px;
	aspect-ratio: 1 / 1;
	margin-right: 5px;
	padding: 0 !important;
	border-radius: 50%;
	background: var(--nectar-accent-color);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 32px;
	text-align: center;
}

.calculator.cost-summariser .cost-summariser__total-row .cost-summariser__symbol {
	background-color: var(--nectar-extra-color-1);
}


/* ------------------------------------------------------------ Odometer */

/* Each digit is a reel of 0-9 that slides up or down to the right number,
 * in a window that's sized (by the JS) to the digit showing. */
.calculator-odometer {
	position: relative;
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
}

.calculator-odometer.is-ticking {
	animation: calculator-odometer-pop 0.4s ease;
}

.calculator-odometer__digit {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	height: 1em;
	overflow: hidden;
	vertical-align: bottom;
	transition: width 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.calculator-odometer__reel {
	display: flex;
	flex-direction: column;
	transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.calculator-odometer__reel > span {
	display: block;
	height: 1em;
	line-height: 1em;
	text-align: center;
}

/* Numbers never split, but "Sept 2046" or "5.1 yrs" can wrap in a narrow box. */
.calculator-odometer__space {
	white-space: normal;
}

/* The plain value, for screen readers. */
.calculator-odometer__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@keyframes calculator-odometer-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.04); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.calculator-odometer__digit,
	.calculator-odometer__reel {
		transition: none;
	}

	.calculator-odometer.is-ticking,
	.stamp-duty-calculator .calculator__table.is-visible {
		animation: none;
	}
}


/* ------------------------------------------------------------ Calculator pages */

/* The tabs and intro text the calculators sit in on the calculators page -
 * classes added to WPBakery's Tabs and Text Block elements. This is page
 * layout rather than the calculators themselves, so adjust or remove it on
 * sites that lay their calculator pages out differently. */

.calculator-tabs .tabbed[data-style*="material"] ul li a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 25px 35px;
	border: 1px solid #ebedf1;
	border-radius: 10px;
	background: #f4f5f7;
	font-size: 17px !important;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1 !important;
}

.calculator-tabs .tabbed[data-style*="material"] ul li {
	flex: 1;
}

	.calculator-tabs .inner_row > .col:after {
		display:none;
	}

.calculator-tabs .tabbed[data-style*="material"] ul {
	display: flex;
	gap: 20px;
	margin-bottom: 45px;
}

.calculator-tabs .tabbed[data-style*="material"] .wpb_tabs_nav:after {
	display: none;
}

.calculator-tabs .tabbed[data-style*="material"] ul li a.active-tab {
	z-index: 99999999;
	border-color: var(--nectar-accent-color);
}

.calculator-tabs .tabbed[data-style*="material"][data-color-scheme="accent-color"] ul li .active-tab:after {
	box-shadow: 0px 20px 60px #23070991 !important;
}

.calculator-tabs .tabbed[data-style*="material"] ul li:has(a.active-tab) {
	position: relative;
	z-index: 999999999;
	border-radius: 20px;
	box-shadow: 0px 20px 30px #23070917 !important;
}

.calculator-tabs .tabbed[data-style*="material"] .wpb_tabs_nav li i,
.calculator-tabs .tabbed[data-style*="material"] .wpb_tabs_nav li svg {
	margin: -1px !important;
}

.wpb_text_column.wpb_content_element.calculator-title {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 15px !important;
	line-height: 1.5;
}

.wpb_text_column.wpb_content_element.calculator-title > * {
	flex: 2.5;
}

.wpb_text_column.wpb_content_element.calculator-title > h3 {
	flex: 0.5;
	min-width: 0px;
	font-size: 29px;
	line-height: 1.3;
	margin: 0;
	letter-spacing: -0.015em;
}


/* ------------------------------------------------------------ Responsive */

/* 1150 */
@media only screen and (max-width: 1150px) {

	.calculator-tabs .inner_row > .col > .col {
		width: 100% !important;
		margin: 0px !important;
	}

	.calculator-tabs .inner_row > .col {
		gap: 25px;
	}

	.calculator-tabs .tabbed[data-style*="material"] ul li a {
		padding: 22px 25px !important;
		font-size: 16px !important;
	}

	.calculator-tabs .tabbed[data-style*="material"] .wpb_tabs_nav li i,
	.calculator-tabs .tabbed[data-style*="material"] .wpb_tabs_nav li svg {
		margin: -1px !important;
		font-size: 20px !important;
	}

	.calculator-tabs .tabbed[data-style*="material"] ul {
		gap: 15px;
		margin-bottom: 25px;
	}

	.wpb_text_column.wpb_content_element.calculator-title > h3 {
		font-size: 25px;
		line-height: 1.1;
	}

	.wpb_text_column.wpb_content_element.calculator-title {
		max-width: 750px;
		margin: 7.5px auto 25px !important;
		text-align: center;
	}
}

/* 999 */
@media only screen and (max-width: 999px) {

	.calculator-tabs .inner_row > .col > .col > .vc_column-inner {
		padding: 25px !important;
	}

	.wpb_text_column.wpb_content_element.calculator-title {
		max-width: 470px;
		margin-top: 12.5px !important;
		margin-bottom: 20px !important;
		font-size: 14.5px;
	}

	.calculator-tabs .tabbed[data-style*="material"] ul li a {
		padding: 20px 22px !important;
		font-size: 15px !important;
	}

	.calculator-tabs .tabbed[data-style*="material"] .wpb_tabs_nav li i,
	.calculator-tabs .tabbed[data-style*="material"] .wpb_tabs_nav li svg {
		font-size: 16px !important;
	}

	.calculator-tabs .tabbed[data-style*="material"] ul li a,
	.calculator-tabs .tabbed[data-style*="material"] ul li {
		border-radius: 10px !important;
	}

	.calculator-tabs .tabbed[data-style*="material"] ul {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 10px;
	}

	.mortgage-calculator .calculator__form {
		gap: 20px;
	}

	.mortgage-calculator .calculator__form .calculator__field {
		flex: unset;
		width: 100%;
	}

	/* Overpayment - two fields to a row. */
	.overpayment-calculator .calculator__form .calculator__field {
		flex: 0 0 calc(50% - 7.5px);
	}
}

/* 690 */
@media only screen and (max-width: 690px) {

	.calculator {
		padding: 25px;
	}

	.calculator .calculator__form {
		gap: 20px !important;
	}

	.calculator .calculator__form .calculator__field {
		flex: unset;
		width: 100%;
	}

	.calculator .calculator__results {
		flex-wrap: wrap;
		margin-top: 25px;
		padding-top: 25px;
	}

	.calculator .calculator__results .calculator__result {
		flex: unset;
		width: 100%;
		padding: 20px;
		font-size: 25px;
	}

	.calculator .calculator__results .calculator__result-label {
		font-size: 13px;
	}

	.calculator.cost-summariser .cost-summariser__table td {
		padding: 16px 15px !important;
		font-size: 13.5px !important;
	}

	.calculator.cost-summariser .cost-summariser__table th {
		padding: 18px 15px !important;
		font-size: 14.5px !important;
	}

	/* Stamp duty - four columns won't fit, so each row stacks: the band (or
	 * Total) on top, with the rate and the tax due on the line below. */
	.calculator.stamp-duty-calculator .calculator__table.is-visible,
	.calculator.stamp-duty-calculator .calculator__table thead,
	.calculator.stamp-duty-calculator .calculator__table tbody,
	.calculator.stamp-duty-calculator .calculator__table tfoot {
		display: block;
	}

	.calculator.stamp-duty-calculator .calculator__table tr {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		row-gap: 6px;
		padding: 15px 18px;
		border-bottom: 1px solid var(--calculator-border);
	}

	.calculator.stamp-duty-calculator .calculator__table thead tr,
	.calculator.stamp-duty-calculator .calculator__table tfoot tr:last-child {
		border-bottom: 0;
	}

	.calculator.stamp-duty-calculator .calculator__table.is-visible tr > th,
	.calculator.stamp-duty-calculator .calculator__table.is-visible tr > td {
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		font-size: 14px !important;
		line-height: 1.3;
		text-align: left;
		white-space: nowrap;
	}

	.calculator.stamp-duty-calculator .calculator__table.is-visible thead tr {
		background: var(--calculator-accent);
	}

	/* Top line - From – To, or Total. */
	.calculator.stamp-duty-calculator .calculator__table thead th:nth-child(1),
	.calculator.stamp-duty-calculator .calculator__table tbody td:nth-child(1) {
		grid-area: 1 / 1;
	}

	.calculator.stamp-duty-calculator .calculator__table thead th:nth-child(2),
	.calculator.stamp-duty-calculator .calculator__table tbody td:nth-child(2) {
		grid-area: 1 / 2;
		justify-self: start;
	}

	.calculator.stamp-duty-calculator .calculator__table thead th:nth-child(2)::before,
	.calculator.stamp-duty-calculator .calculator__table tbody td:nth-child(2)::before {
		content: "\00a0\2013\00a0";
	}

	.calculator.stamp-duty-calculator .calculator__table tfoot tr:last-child td:nth-child(1) {
		grid-area: 1 / 1 / 2 / 3;
	}

	/* The rate is labelled on each row, so the header just has From – To and Tax Due. */
	.calculator.stamp-duty-calculator .calculator__table thead th:nth-child(3) {
		display: none;
	}

	.calculator.stamp-duty-calculator .calculator__table.is-visible thead th:nth-child(4) {
		grid-area: 1 / 2;
		justify-self: end;
		text-align: right;
	}

	/* Bottom line - the rate on the left, the tax due on the right. */
	.calculator.stamp-duty-calculator .calculator__table tbody td:nth-child(3),
	.calculator.stamp-duty-calculator .calculator__table tfoot tr:last-child td:nth-child(2) {
		grid-area: 2 / 1 / 3 / 3;
		justify-self: start;
		font-size: 13px !important;
		opacity: 0.65;
	}

	.calculator.stamp-duty-calculator .calculator__table tbody td:nth-child(3)::before,
	.calculator.stamp-duty-calculator .calculator__table tfoot tr:last-child td:nth-child(2)::before {
		content: attr(data-label) "\00a0";
	}

	.calculator.stamp-duty-calculator .calculator__table.is-visible tbody td:nth-child(4),
	.calculator.stamp-duty-calculator .calculator__table.is-visible tfoot tr:last-child td:nth-child(3) {
		grid-area: 2 / 1 / 3 / 3;
		justify-self: end;
		text-align: right;
	}

	.calculator.stamp-duty-calculator .calculator__table tbody td:nth-child(4),
	.calculator.stamp-duty-calculator .calculator__table tfoot td {
		font-weight: 600;
	}

	.calculator.stamp-duty-calculator .calculator__table tfoot tr:last-child td:nth-child(2) {
		font-weight: 400;
	}

	.calculator.stamp-duty-calculator .calculator__table .stamp-duty-calculator__notice {
		display: block;
	}

	.calculator.stamp-duty-calculator .calculator__table.is-visible .stamp-duty-calculator__notice td {
		display: block;
		text-align: center;
		white-space: normal;
	}

	.calculator-tabs .tabbed[data-style*="material"] ul {
		display: flex !important;
		flex-direction: column;
	}

	.calculator-tabs .tabbed[data-style*="material"][data-color-scheme="accent-color"] ul li .active-tab:after {
		box-shadow: 0px 0px 60px #23070991 !important;
	}
}

/* 479 */
@media only screen and (max-width: 479px) {

	.calculator {
		overflow: hidden;
		margin-bottom: 15px !important;
		padding: 22px;
	}

	.calculator .calculator__form .calculator__label {
		font-size: 13px !important;
	}

	#ajax-content-wrap .calculator.cost-summariser .cost-summariser__input-wrap .cost-summariser__input,
	.calculator.cost-summariser .cost-summariser__input-wrap .cost-summariser__input {
		font-size: 14px !important;
		line-height: 1.1 !important;
	}

	.calculator.cost-summariser .cost-summariser__symbol {
	width: 25px;
	height: 25px;
	line-height: 25px;
	font-size: 12px !important;
	}

	.calculator.cost-summariser .cost-summariser__table tr td:first-child,
	.calculator.cost-summariser .cost-summariser__table tr th:first-child {
		max-width: 110px;
		padding: 19px 17px !important;
		line-height: 1.2;
	}

	.calculator-tabs .tabbed[data-style*="material"] ul li a {
		gap: 5px;
		padding: 17px 22px !important;
		font-size: 15px !important;
	}

	.calculator-tabs .inner_row > .col > .col > .vc_column-inner {
		padding: 20px !important;
	}

	.wpb_text_column.wpb_content_element.calculator-title > p {
		max-width: calc(100% - 20px);
		margin: auto;
		font-size: 13.5px;
		line-height: 1.5;
	}

	.wpb_text_column.wpb_content_element.calculator-title > h3 {
		font-size: 22px;
		line-height: 1.1;
	}
}