/* Shared styles for the finance quote widget and loan calculators. */

.bs-quote-widget,
.bs-loan-calc,
.bs-borrow-modal {
	--bs-accent: #DAA02B;
	--bs-dark: #0b1b34;
	--bs-border: #e4e7ec;
	--bs-bg-soft: #F6F7F9;
	max-width: 1040px;
	margin: 0 auto;
	box-sizing: border-box;
}

.bs-quote-widget *,
.bs-loan-calc * {
	box-sizing: border-box;
}

.bs-field-label {
display: block;
    font-weight: 700;
    font-size: 12px;
    margin: 20px 0 8px;
    text-transform: uppercase;
}

.bs-input-prefix {
	display: flex;
	align-items: center;
	border: 1px solid var(--bs-border);
	border-radius: 8px;
	padding: 10px 14px;
	background: #fff;
}

.bs-input-prefix span {
	color: #8a94a6;
	margin-right: 6px;
}

.bs-input-prefix input {
	border: none;
	outline: none;
	width: 100%;
	font-size: 1rem;
}

/* Quote widget */

.bs-quote-widget {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
	padding: 28px;
}

@media screen and (max-width: 500px) {
    .bs-quote-widget {
                padding: 26px 24px;;
    }
    .bs-quote-widget__submit {
            font-weight: 500;
    font-size: 14px;
    }
   body .bs-quote-widget__tile-list .bs-tile {
            padding: 18px 8px;
    }
}

.bs-quote-widget__title {
	/*text-align: center;*/
	font-size: 1.4rem;
	margin: 0 0 4px;
	color: var(--bs-dark);
	    font-family: "Cinzel", Sans-serif;
    /*font-size: 22px;*/
    font-weight: 700;
}

.bs-quote-widget__subtitle {
	/*text-align: center;*/
	font-weight: 400;
	font-size: 14px;
	margin: 0 0 16px;
}

.bs-quote-widget__tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.bs-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 10px;
	border: 2px solid var(--bs-border);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--bs-dark);
}

.bs-tile img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.bs-tile.is-selected {
	border-color: var(--bs-accent);
	background: #FFF8EA;
}

.bs-quote-widget__purpose,
.bs-frequency-tabs {
	display: flex;
	gap: 8px;
}

.bs-quote-widget__purpose button,
.bs-frequency-tabs button {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid var(--bs-border);
	border-radius: 8px;
	background: var(--bs-bg-soft);
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	color: var(--bs-dark);
}

.bs-quote-widget__purpose button.is-selected,
.bs-frequency-tabs button.is-active {
	background: var(--bs-accent);
	border-color: var(--bs-accent);
	color: #fff;
}

.bs-quote-widget__submit {
	width: 100%;
	margin-top: 22px;
	padding: 16px;
	border: none;
	border-radius: 8px;
	background: var(--bs-dark);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}

.bs-quote-widget__submit:hover {
	opacity: 0.92;
}

/* Loan calculator page */

.bs-loan-calc {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 32px;
	align-items: start;
}

.bs-loan-calc__title {
	margin-top: 0;
}

.bs-term-slider,
.bs-rate-slider {
	width: 100%;
	accent-color: var(--bs-accent);
}

.bs-balloon-row {
	display: flex;
	gap: 10px;
}

.bs-balloon-row input {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid var(--bs-border);
	border-radius: 8px;
}

.bs-loan-calc__result {
	background: var(--bs-bg-soft);
	border-radius: 14px;
	padding: 24px;
	text-align: center;
}

.bs-loan-calc__result h3 {
	margin-top: 0;
}

.bs-result-amount {
	font-size: 2rem;
	font-weight: 800;
	color: var(--bs-dark);
	margin: 16px 0;
}

.bs-disclaimer {
	
	font-size: 12.5px;
    margin-top: 24px;
    margin-bottom: 0px;
    line-height: 1.5;
	color: #8a94a6;
}

@media (max-width: 720px) {
	.bs-quote-widget__tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.bs-loan-calc {
		grid-template-columns: 1fr;
	}
}

/* "Check my borrowing capacity" button + popup */

.bs-borrow-capacity-trigger {
width: 100%;
    margin-top: 16px;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: var(--bs-accent);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    text-transform: capitalize;
}

.bs-borrow-capacity-trigger:hover {
	opacity: 0.92;
}

.bs-borrow-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 16px;
}


.bs-borrow-modal[hidden] {
	display: none;
}

.bs-borrow-modal__overlay {
	position: fixed;
	inset: 0;
	background: rgba(11, 27, 52, 0.6);
	z-index: -1;
}

.bs-borrow-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: 16px;
	max-width: 550px;
	width: 100%;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	padding: 32px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.bs-borrow-modal__close {
	position: absolute;
	top: 14px;
	right: 16px;
	border: none;
	background: none;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: #fff;
}

.bs-borrow-modal h2 {
	text-align: center;
	margin: 0 0 8px;
	color: var(--bs-dark);
}

.bs-borrow-modal__subtitle {
	text-align: center;
	color: #5a6577;
	margin: 0 0 20px;
}

.bs-borrow-step-label {
	font-weight: 700;
	color: var(--bs-accent);
	margin-bottom: 6px;
}

.bs-borrow-modal input[type="text"],
.bs-borrow-modal input[type="email"],
.bs-borrow-modal input[type="tel"],
.bs-borrow-select {
	width: 100%;
    border: 0;
    border-radius: 0;
    padding: 1px 0px 0px 9px;
    font-size: 1rem;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    height: fit-content;
}

.bs-borrow-modal .bs-input-prefix {
	margin-bottom: 4px;
}

.bs-toggle-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
}

.bs-toggle-group button {
	flex: 1;
	min-width: 44px;
	padding: 10px 8px;
	border: 1px solid var(--bs-border);
	border-radius: 8px;
	background: #fff;
	font-weight: 600;
	cursor: pointer;
	color: var(--bs-dark);
}

.bs-toggle-group button.is-active {
	border-color: var(--bs-accent);
	background: #FFF8EA;
	color: var(--bs-dark);
}

.bs-borrow-amount-freq {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 10px;
	align-items: start;
}

.bs-borrow-add-repayment {
	display: inline-block;
	margin: 6px 0 16px;
	border: none;
	background: none;
	color: var(--bs-accent);
	font-weight: 700;
	cursor: pointer;
	padding: 0;
}

.bs-borrow-next,
.bs-borrow-submit {
	width: 100%;
	margin-top: 12px;
	padding: 14px;
	border: none;
	border-radius: 8px;
	background: var(--bs-dark);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}

.bs-borrow-back {
	display: block;
	width: 100%;
	margin-top: 10px;
	border: none;
	background: none;
	color: var(--bs-dark);
	text-decoration: underline;
	font-weight: 600;
	cursor: pointer;
	padding: 6px;
}

.bs-borrow-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.85rem;
	margin: 12px 0;
	color: var(--bs-dark);
}

.bs-borrow-consent input {
	margin-top: 3px;
}

.bs-borrow-error {
	color: #b3261e;
	background: #fdecea;
	border-radius: 8px;
	padding: 10px 14px;
	margin-top: 12px;
	font-size: 0.9rem;
}

.bs-borrow-done-message {
	text-align: center;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--bs-dark);
	padding: 20px 0;
}

@media (max-width: 480px) {
	.bs-borrow-modal {
		padding: 0;
	}

	.bs-borrow-modal__dialog {
		border-radius: 0;
		min-height: 100%;
	}
}


/* ==========================================================================
   Calculator UI/UX enhancement: tile icons, hover + focus states, button polish
   ========================================================================== */

.bs-tile {
	position: relative;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.bs-tile::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--bs-dark);
	transition: color 0.2s ease;
}

.bs-tile:hover {
	border-color: var(--bs-accent);
	background: #FFFBF2;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(11, 27, 52, 0.08);
}

.bs-tile.is-selected {
	box-shadow: 0 6px 16px rgba(218, 160, 43, 0.18);
}

.bs-tile.is-selected::before {
	color: var(--bs-accent);
}

.bs-tile.is-selected::after {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6px;
    color: #fff;
    background: var(--bs-accent);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.bs-tile[data-url*="home-loan"]::before { content: "\f015"; }
.bs-tile[data-url*="investment-loan"]::before { content: "\f1ad"; }
.bs-tile[data-url*="refinance"]::before { content: "\f2f1"; }
.bs-tile[data-url*="car-loan"]::before { content: "\f1b9"; }
.bs-tile[data-url*="truck-finance"]::before { content: "\f0d1"; }
.bs-tile[data-url*="equipment-finance"]::before { content: "\f085"; }
.bs-tile[data-url*="business-loan"]::before { content: "\f080"; }
.bs-tile[data-url*="asset-finance"]::before { content: "\f66f"; }

.bs-input-prefix {
	border-radius: 10px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bs-input-prefix:hover {
	border-color: #c7ccd6;
}

.bs-input-prefix:focus-within {
	border-color: var(--bs-accent);
	box-shadow: 0 0 0 3px rgba(218, 160, 43, 0.15);
}

.bs-input-prefix span {
	font-weight: 700;
}

.bs-quote-widget__purpose button,
.bs-frequency-tabs button {
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bs-quote-widget__purpose button:hover:not(.is-selected),
.bs-frequency-tabs button:hover:not(.is-active) {
	border-color: var(--bs-accent);
	color: var(--bs-accent);
}

.bs-quote-widget__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.bs-quote-widget__submit:hover {
	opacity: 1;
	background: #142a4d;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(11, 27, 52, 0.25);
}

.bs-quote-widget__submit span[aria-hidden="true"] {
	transition: transform 0.2s ease;
	display: inline-block;
}

.bs-quote-widget__submit:hover span[aria-hidden="true"] {
	transform: translateX(4px);
}


/* ==========================================================================
   Fixes: Astra/Elementor global button + input hover/focus rules were beating
   our base color rules on specificity ties, washing out hover text and
   re-adding a stray focus ring on the input. Also: smaller tile font, and
   more explicit input padding/border/focus/active states.
   ========================================================================== */

.bs-tile {
	font-size: 12px;
}

/* Submit button: explicit hover/focus color + a clearly-visible bg change */
.bs-quote-widget__submit:hover,
.bs-quote-widget__submit:focus,
.bs-quote-widget__submit:focus-visible {
	color: #fff;
	outline: none;
}

.bs-quote-widget__submit:hover {
	background: var(--bs-accent);
	box-shadow: 0 10px 24px rgba(218, 160, 43, 0.35);
}

/* Tiles: keep our colors on focus too (Astra's button:focus was overriding them) */
.bs-tile:focus,
.bs-tile:focus-visible {
	outline: none;
	color: var(--bs-dark);
	border-color: var(--bs-accent);
}

.bs-tile.is-selected:focus,
.bs-tile.is-selected:focus-visible {
	color: var(--bs-dark);
}

/* Purpose / frequency tabs: same fix for :focus */
.bs-quote-widget__purpose button:focus,
.bs-quote-widget__purpose button:focus-visible,
.bs-frequency-tabs button:focus,
.bs-frequency-tabs button:focus-visible {
	outline: none;
	color: var(--bs-dark);
	border-color: var(--bs-border);
}

.bs-quote-widget__purpose button.is-selected:focus,
.bs-quote-widget__purpose button.is-selected:focus-visible,
.bs-frequency-tabs button.is-active:focus,
.bs-frequency-tabs button.is-active:focus-visible {
	color: #fff;
	border-color: var(--bs-accent);
}

/* Loan amount input: explicit padding/border + focus + active states so the
   plugin's global input:focus style can no longer add its own ring back. */
.bs-input-prefix {
	padding: 12px 16px;
	border: 1.5px solid var(--bs-border);
}

.bs-input-prefix:focus-within {
	border-color: var(--bs-accent);
	box-shadow: 0 0 0 3px rgba(218, 160, 43, 0.25);
}

.bs-quote-amount {
	padding: 2px 0;
}

.bs-quote-amount:focus,
.bs-quote-amount:focus-visible,
.bs-quote-amount:active {
	border: none;
	outline: none;
	box-shadow: none;
}


/* Boost specificity: Astra's global "input[type=\"text\"]:focus" selector
   (attribute selector + pseudo-class + type) was narrowly beating our
   .bs-quote-amount:focus rule and re-adding its dotted blue border. */
.bs-input-prefix .bs-quote-amount:focus,
.bs-input-prefix .bs-quote-amount:focus-visible,
.bs-input-prefix .bs-quote-amount:active {
	border: none;
	outline: none;
	box-shadow: none;
}


/* ==========================================================================
   Fix: Astra's global button:focus rule also sets its own background-color
   (same specificity-tie issue as the text-color fix above), so our tile and
   purpose/submit buttons were briefly flashing Astra's grey on focus. Give
   every interactive "option" an explicit focus background too.
   ========================================================================== */

.bs-tile:focus,
.bs-tile:focus-visible {
	background: #fff;
}

.bs-tile.is-selected:focus,
.bs-tile.is-selected:focus-visible {
	background: #FFF8EA;
}

.bs-quote-widget__purpose button:focus,
.bs-quote-widget__purpose button:focus-visible,
.bs-frequency-tabs button:focus,
.bs-frequency-tabs button:focus-visible {
	background: var(--bs-bg-soft);
}

.bs-quote-widget__purpose button.is-selected:focus,
.bs-quote-widget__purpose button.is-selected:focus-visible,
.bs-frequency-tabs button.is-active:focus,
.bs-frequency-tabs button.is-active:focus-visible {
	background: var(--bs-accent);
}

.bs-quote-widget__submit:focus,
.bs-quote-widget__submit:focus-visible {
	background: var(--bs-dark);
}

/* Mobile / responsive */
@media screen and (max-width: 720px) {
	.bs-tile {
		padding: 12px 10px;
		box-shadow: unset;
	}

	.bs-quote-widget__purpose button,
	.bs-frequency-tabs button {
		font-size: 0.72rem;
		padding: 10px 4px;
		white-space: nowrap;
	}
}


/* Fix: .bs-tile never redeclared color on :hover, so Astra's button:hover
   (which ties our base rule's specificity and wins on the extra type-selector
   point) was turning the label text slate-grey instead of navy. */
.bs-tile:hover {
	color: var(--bs-dark);
}

.bs-tile.is-selected:hover {
	color: var(--bs-dark);
}


/* Loan amount input: left-only padding as requested. */
.bs-input-prefix input {
	padding: 0 0 0 10px;
	box-shadow: unset !important;
}


/* ==========================================================================
   Individual loan-calculator pages: branded range sliders + result card
   ========================================================================== */

/* Highlight the live value shown inside the field label */
.bs-term-value,
.bs-rate-value {
	color: var(--bs-accent);
	font-weight: 800;
}

/* Range sliders: branded track + thumb, with a filled progress bar up to
   the handle (percentage set as --bs-range-progress by the JS). */
.bs-term-slider,
.bs-rate-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--bs-accent) 0%, var(--bs-accent) var(--bs-range-progress, 0%), var(--bs-border) var(--bs-range-progress, 0%), var(--bs-border) 100%);
	outline: none;
	margin: 10px 0 24px;
	cursor: pointer;
}

.bs-term-slider::-webkit-slider-thumb,
.bs-rate-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bs-dark);
	border: 3px solid var(--bs-accent);
	box-shadow: 0 2px 6px rgba(11, 27, 52, 0.35);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bs-term-slider::-moz-range-thumb,
.bs-rate-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bs-dark);
	border: 3px solid var(--bs-accent);
	box-shadow: 0 2px 6px rgba(11, 27, 52, 0.35);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bs-term-slider::-moz-range-track,
.bs-rate-slider::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--bs-accent) 0%, var(--bs-accent) var(--bs-range-progress, 0%), var(--bs-border) var(--bs-range-progress, 0%), var(--bs-border) 100%);
}

.bs-term-slider:hover::-webkit-slider-thumb,
.bs-rate-slider:hover::-webkit-slider-thumb,
.bs-term-slider:hover::-moz-range-thumb,
.bs-rate-slider:hover::-moz-range-thumb {
	transform: scale(1.15);
	box-shadow: 0 4px 10px rgba(11, 27, 52, 0.4);
}

.bs-term-slider:focus,
.bs-rate-slider:focus,
.bs-term-slider:focus-visible,
.bs-rate-slider:focus-visible {
	outline: none;
}

.bs-term-slider:focus::-webkit-slider-thumb,
.bs-rate-slider:focus::-webkit-slider-thumb,
.bs-term-slider:focus::-moz-range-thumb,
.bs-rate-slider:focus::-moz-range-thumb {
	box-shadow: 0 0 0 5px rgba(218, 160, 43, 0.25);
}

/* Result card: lift it off the page like the rest of the site's cards */
.bs-loan-calc__result {
	background: #fff;
	border: 1px solid var(--bs-border);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	position: sticky;
	top: 24px;
}

.bs-loan-calc__result h3 {
	color: var(--bs-dark);
}



/* Borrow-capacity CTA: same hover text/bg fix as the other buttons on site */
.bs-borrow-capacity-trigger:hover,
.bs-borrow-capacity-trigger:focus,
.bs-borrow-capacity-trigger:focus-visible {
	color: #fff;
	outline: none;
	background: var(--bs-dark);
}

.bs-borrow-capacity-trigger:hover {
	background: var(--bs-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(11, 27, 52, 0.25);
}

@media screen and (max-width: 720px) {
	.bs-loan-calc__result {
		position: static;
	}
}


/* ==========================================================================
   Fix: slider focus border (Astra input:focus dotted border bleeding through)
   ========================================================================== */

.bs-term-slider:focus,
.bs-rate-slider:focus,
.bs-term-slider:focus-visible,
.bs-rate-slider:focus-visible {
	border: none !important;
	outline: none;
}
input[type="text"] {
        height: fit-content;
        box-shadow: unset !important;
}
input[type="text"]:focus {
    border: 1px solid #F2F5F7;

}
.bs-input-prefix input:focus {
    border: 0px ;
}

.bs-balloon-row .bs-balloon-percent:focus-within,
.bs-balloon-row .bs-balloon-dollar:focus-within{
    border-color: var(--bs-accent);
    box-shadow: 0 0 0 3px rgba(218, 160, 43, 0.25);
}

 


/* ==========================================================================
   Calculator page + modal: reduce oversized headings inherited from theme
   ========================================================================== */

.bs-loan-calc__title {
	font-size: 1.4rem;
	margin-bottom: 4px;
}

.bs-borrow-modal h2 {
	font-size: 1.5rem;
	padding-right: 32px;
	line-height: 1.25;
}

.bs-borrow-modal__subtitle {
	font-size: 0.95rem;
	color: #5b6472;
}

.bs-borrow-step-label {
	font-weight: 700;
	color: var(--bs-accent);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ==========================================================================
   Borrowing-capacity modal: branding, options styling, hover/focus effects
   ========================================================================== */

.bs-borrow-modal__close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
    padding: 0;
    background-color: var(--bs-dark);
    font-size: 20px;
    line-height: 2;
}

.bs-borrow-modal__close:hover {
	background: var(--bs-bg-soft);
	color: var(--bs-accent);
}

.bs-borrow-modal__close:focus,
.bs-borrow-modal__close:focus-visible {
	outline: none;
	background: var(--bs-bg-soft);
}

.bs-toggle-group {
	margin-bottom: 4px;
}

.bs-toggle-group button {
	background: #fff;
	border: 1.5px solid var(--bs-border);
	border-radius: 8px;
	color: var(--bs-dark);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 10px 8px;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.bs-toggle-group button:hover {
	border-color: var(--bs-accent);
	color: var(--bs-accent);
	transform: translateY(-1px);
}

.bs-toggle-group button.is-active {
	background: var(--bs-dark);
	border-color: var(--bs-dark);
	color: #fff;
}

.bs-toggle-group button.is-active:hover {
	background: var(--bs-dark);
	border-color: var(--bs-dark);
	color: #fff;
	opacity: 0.9;
}

.bs-toggle-group button:focus,
.bs-toggle-group button:focus-visible {
	outline: none;
	border-color: var(--bs-accent);
	color: var(--bs-dark);
	background: #fff;
}

.bs-toggle-group button.is-active:focus,
.bs-toggle-group button.is-active:focus-visible {
	background: var(--bs-dark);
	border-color: var(--bs-dark);
	color: #fff;
}

.bs-borrow-modal input[type="text"],
.bs-borrow-modal input[type="email"],
.bs-borrow-modal input[type="tel"] {
    width: 100%;
    border: 1.5px solid var(--bs-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 1rem;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 14px;
    font-weight: 500;
}

.bs-borrow-modal input[type="text"]:hover,
.bs-borrow-modal input[type="email"]:hover,
.bs-borrow-modal input[type="tel"]:hover {
	border-color: #c7ccd6;
}

.bs-borrow-modal input[type="text"]:focus,
.bs-borrow-modal input[type="email"]:focus,
.bs-borrow-modal input[type="tel"]:focus,
.bs-borrow-modal input[type="text"]:focus-visible,
.bs-borrow-modal input[type="email"]:focus-visible,
.bs-borrow-modal input[type="tel"]:focus-visible {
	outline: none;
	border-color: var(--bs-accent);
	box-shadow: 0 0 0 3px rgba(218, 160, 43, 0.2);
}

.bs-borrow-select {
	border: 1.5px solid var(--bs-border);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 1rem;
	background: #fff;
	color: var(--bs-dark);
	cursor: pointer;
}

.bs-borrow-select:focus,
.bs-borrow-select:focus-visible {
	outline: none;
	border-color: var(--bs-accent);
}

.bs-borrow-next {
	display: block;
	width: 100%;
	background: var(--bs-dark);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 14px;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	margin-top: 8px;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.bs-borrow-next:hover,
.bs-borrow-next:focus,
.bs-borrow-next:focus-visible {
	color: #fff;
	background: var(--bs-accent);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(11, 27, 52, 0.25);
	outline: none;
}

.bs-borrow-back {
	display: block;
	width: 100%;
	background: #fff;
	color: var(--bs-dark);
	border: 1.5px solid var(--bs-border);
	border-radius: 8px;
	padding: 12px;
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
	margin-top: 8px;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.bs-borrow-back:hover,
.bs-borrow-back:focus,
.bs-borrow-back:focus-visible {
	border-color: var(--bs-accent);
	color: var(--bs-accent);
	outline: none;
}

.bs-borrow-add-repayment {
	background: none;
	border: none;
	color: var(--bs-accent);
	font-weight: 700;
	cursor: pointer;
	padding: 8px 0;
}

.bs-borrow-add-repayment:hover {
	text-decoration: underline;
}

.bs-borrow-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.85rem;
	color: #5b6472;
}


/* ==========================================================================
   Loan term / Interest rate: editable input box above the slider
   ========================================================================== */

.bs-term-input,
.bs-rate-input {
	width: 100%;
	border: 1.5px solid var(--bs-border);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 1rem;
	background: #fff;
	color: var(--bs-dark);
	margin-bottom: 10px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bs-term-input:hover,
.bs-rate-input:hover {
	border-color: #c7ccd6;
}

.bs-term-input:focus,
.bs-rate-input:focus,
.bs-term-input:focus-visible,
.bs-rate-input:focus-visible {
	outline: none;
	border-color: var(--bs-accent);
	box-shadow: 0 0 0 3px rgba(218, 160, 43, 0.2);
}


/* ==========================================================================
   Modal step 2: fix double border on $-prefixed inputs, style scrollbar,
   polish select options and nav buttons
   ========================================================================== */

/* The .bs-input-prefix wrapper already draws the border; the input inside
   it must not draw its own, or you get two nested boxes. */
.bs-borrow-modal .bs-input-prefix input {
	border: none;
	padding: 2px 0;
	box-shadow: none;
}

.bs-borrow-modal .bs-input-prefix:hover {
	border-color: #c7ccd6;
}

.bs-borrow-modal .bs-input-prefix:focus-within {
	border-color: var(--bs-accent);
	box-shadow: 0 0 0 3px rgba(218, 160, 43, 0.2);
}

/* Select dropdowns: hover + focus + option list */
.bs-borrow-select:hover {
	border-color: #c7ccd6;
}

.bs-borrow-select option {
	color: var(--bs-dark);
	background: #fff;
}

/* Back button: remove stray underline, add hover feedback */
.bs-borrow-back {
	text-decoration: none;
}

.bs-borrow-next:active,
.bs-borrow-back:active {
	transform: translateY(0);
}

/* Branded scrollbar for the modal's scrollable area */
.bs-borrow-modal {
	scrollbar-width: thin;
	scrollbar-color: var(--bs-accent) #eef0f3;
}

.bs-borrow-modal::-webkit-scrollbar {
	width: 10px;
}

.bs-borrow-modal::-webkit-scrollbar-track {
	background: transparent;
}

.bs-borrow-modal::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

.bs-borrow-modal::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 255, 255, 0.85);
}

.bs-borrow-modal__dialog {
	scrollbar-width: thin;
	scrollbar-color: var(--bs-accent) #eef0f3;
}

.bs-borrow-modal__dialog::-webkit-scrollbar {
	width: 8px;
}

.bs-borrow-modal__dialog::-webkit-scrollbar-track {
	background: #eef0f3;
	border-radius: 999px;
}

.bs-borrow-modal__dialog::-webkit-scrollbar-thumb {
	background-color: var(--bs-accent);
	border-radius: 999px;
}

.bs-borrow-modal__dialog::-webkit-scrollbar-thumb:hover {
	background-color: var(--bs-dark);
}


/* Fix: Astra's global button:hover background (var(--ast-global-color-7), a
   gold tone) was showing through on hover because these rules never
   redeclared background themselves. */
.bs-borrow-back:hover,
.bs-borrow-back:focus,
.bs-borrow-back:focus-visible {
	background: #fff;
}

.bs-borrow-add-repayment:hover,
.bs-borrow-add-repayment:focus,
.bs-borrow-add-repayment:focus-visible {
	background: none;
	outline: none;
	color: var(--bs-accent);
}


/* Submit button (step 3) was missing entirely, falling back to Astra's
   default pale-gold button style. Match it to .bs-borrow-next. */
.bs-borrow-submit {
	display: block;
	width: 100%;
	background: var(--bs-dark);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 14px;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	margin-top: 8px;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.bs-borrow-submit:hover,
.bs-borrow-submit:focus,
.bs-borrow-submit:focus-visible {
	color: #fff;
	background: var(--bs-accent);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(11, 27, 52, 0.25);
	outline: none;
}

.bs-borrow-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ============================= Calculator visual refresh (ledger stub design) ============================= */

.bs-loan-calc {
	gap: 0;
	border-radius: 22px;
	box-shadow: 0 24px 64px -24px rgba(11,27,52,0.28);
	overflow: hidden;
	background: #fff;
}

.bs-loan-calc__form {
	background: #fff;
	padding: 40px 44px;
}

.bs-loan-calc__result {
	background: linear-gradient(165deg, var(--bs-dark) 0%, #142944 100%);
	border-radius: 0;
	padding: 40px 40px 34px;
	text-align: left;
	color: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
}

.bs-loan-calc__result::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 2px dashed rgb(255 255 255 / 100%);
}

.bs-loan-calc__result::after {
	content: "";
	position: absolute;
	left: -13px;
	top: 50%;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	transform: translateY(-50%);
	z-index: 2;
}

/* Condition toggle */
.bs-condition-toggle {
	display: flex;
	gap: 8px;
	background: var(--bs-bg-soft);
	padding: 5px;
	border-radius: 999px;
	margin-bottom: 28px;
}

.bs-condition-toggle button {
	flex: 1;
	border: none;
	background: transparent;
	padding: 10px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13.5px;
	color: #4B5A70;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.bs-condition-toggle button[aria-pressed="true"] {
	background: var(--bs-dark);
	color: #fff;
}

/* Term / rate shown as label + value on one line */
.bs-field-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
}

.bs-field-top .bs-field-label {
	margin: 0;
}

.bs-field-top .bs-term-input,
.bs-field-top .bs-rate-input {
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	width: auto;
	max-width: 110px;
	text-align: right;
	font-weight: 700;
	font-size: 15px;
	color: var(--bs-dark);
}

/* Frequency tabs on dark background */
.bs-loan-calc__result .bs-frequency-tabs {
	background: rgba(255,255,255,0.08);
	padding: 5px;
	border-radius: 999px;
	margin-bottom: 18px;
}

.bs-loan-calc__result .bs-frequency-tabs button {
	background: transparent;
	border: none;
	color: rgba(255,255,255,0.72);
}

.bs-loan-calc__result .bs-frequency-tabs button.is-active {
	background: var(--bs-accent);
	color: var(--bs-dark);
	    border-radius: 100px;
}

.bs-loan-calc__result .bs-result-amount {
    color: #fff;
    text-align: left;
    margin: 14px 0 0;
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-size: 44px;
    line-height: 1.3;
}

/* Breakdown summary list */
.bs-result-summary {
	list-style: none;
	margin: 24px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid rgba(255,255,255,0.16);
	display: grid;
	gap: 10px;
}

.bs-result-summary li {
	display: flex;
	justify-content: space-between;
	font-size: 13.5px;
	color: rgba(255,255,255,0.72);
}

.bs-result-summary li b {
	color: #fff;
	font-weight: 700;
}

.bs-loan-calc__result .bs-disclaimer {
	color: rgba(255,255,255,0.6);
	margin-top: 20px;
	text-align: left;
}

/* Primary + secondary CTA buttons */
.bs-quote-cta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: var(--bs-accent);
	color: var(--bs-dark);
	font-weight: 700;
	font-size: 15px;
	padding: 14px;
	border-radius: 8px;
	text-decoration: none !important;
	margin-top: 22px;
	transition: transform .15s ease, box-shadow .15s ease;
}

.bs-quote-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -14px rgba(218,160,43,0.55);
}

.bs-loan-calc__result .bs-borrow-capacity-trigger {
	background: transparent;
	border: 1.5px solid rgba(255,255,255,0.24);
	line-height: 1.3;
	color: #fff;
}

.bs-loan-calc__result .bs-borrow-capacity-trigger:hover {
	background: rgba(255,255,255,0.1);
}

/* Responsive: stack the two panels */
@media (max-width: 720px) {
	.bs-loan-calc__result::before,
	.bs-loan-calc__result::after {
		display: none;
	}

	.bs-loan-calc__form {
		padding: 32px 24px;
	}

	.bs-loan-calc__result {
		padding: 32px 24px 28px;
	}

	.bs-condition-toggle button {
		font-size: 12px;
		padding: 9px 6px;
	}

	.bs-balloon-row {
		flex-direction: column;
	}
}

.bs-loan-calc__result h3 {
	color: rgba(255,255,255,0.72);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-family: inherit;
	margin-bottom: 16px;
}

/* Refinements to match the approved reference design */

.bs-quote-cta {
	border-radius: 999px;
}

.bs-loan-calc__result .bs-borrow-capacity-trigger {
	border-radius: 999px;
}

.bs-term-slider::-webkit-slider-thumb,
.bs-rate-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bs-dark);
	border: 3px solid var(--bs-accent);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.bs-term-slider::-moz-range-thumb,
.bs-rate-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bs-dark);
	border: 3px solid var(--bs-accent);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.bs-term-slider::-moz-range-track,
.bs-rate-slider::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: var(--bs-border);
}

.bs-amount-input {
	font-size: 17px !important;
}

.bs-condition-toggle {
	margin-bottom: 30px;
}

.bs-term-slider,
.bs-rate-slider {
	-webkit-appearance: none;
	appearance: none;
}

/* ===== FINAL, authoritative overrides (must stay last in file) ===== */
/* Cancels an older pre-existing rule (white card + sticky) that was leaking
   border/box-shadow/position through the new dark stub design. */

.bs-loan-calc__title {
	display: none;
}

.bs-loan-calc__result {
	background: linear-gradient(165deg, var(--bs-dark) 0%, #142944 100%);
	border: none;
	box-shadow: none;
	position: relative;
	top: auto;
	border-radius: 0;
	padding: 40px 40px 34px;
	text-align: left;
	color: #fff;
	display: flex;
	flex-direction: column;
}

@media (max-width: 720px) {
	.bs-loan-calc__result {
		position: relative;
		padding: 32px 24px 28px;
	}
}


/* ===== Amount + Balloon sliders (match Loan Term / Interest Rate slider styling) ===== */
.bs-amount-slider,
.bs-balloon-slider {
	width: 100%;
	accent-color: var(--bs-accent);
}

.bs-amount-slider,
.bs-balloon-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--bs-accent) 0%, var(--bs-accent) var(--bs-range-progress, 0%), var(--bs-border) var(--bs-range-progress, 0%), var(--bs-border) 100%);
	outline: none;
	margin: 14px 0 4px;
	cursor: pointer;
}

.bs-amount-slider::-webkit-slider-thumb,
.bs-balloon-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bs-dark);
	border: 3px solid var(--bs-accent);
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
}

.bs-amount-slider::-moz-range-thumb,
.bs-balloon-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bs-dark);
	border: 3px solid var(--bs-accent);
	cursor: pointer;
}

.bs-amount-slider:focus,
.bs-balloon-slider:focus,
.bs-amount-slider:focus-visible,
.bs-balloon-slider:focus-visible {
	outline: none;
	border: none;
}


/* Loan Term / Interest Rate unit suffix (e.g. "5 years", "8.00% p.a.") */
.bs-value-group {
	display: flex;
	align-items: baseline;
	gap: 0;
}

.bs-unit-suffix {
	font-weight: 700;
	font-size: 15px;
	color: var(--bs-dark);
	white-space: nowrap;
}


/* Loan Term / Interest Rate value is read-only (slider-driven display, not typed) */
.bs-term-input,
.bs-rate-input {
	cursor: default;
	caret-color: transparent;
	pointer-events: none;
}
.bs-term-input:focus,
.bs-rate-input:focus {
	outline: none;
	box-shadow: none;
}


/* "per week/fortnight/month" suffix — smaller, muted, sans-serif (not the big serif figure) */
.bs-loan-calc__result .bs-result-suffix {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6);
	margin-left: 2px;
}
.bs-loan-calc__result .bs-result-suffix .bs-result-frequency {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}


/* ===== Animations: modal pop-in/out, hover polish (no external library — vanilla CSS) ===== */
@media (prefers-reduced-motion: no-preference) {
	.bs-borrow-modal {
		opacity: 1;
		transition: opacity 0.2s ease;
	}
	.bs-borrow-modal[hidden] {
		display: flex;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.18s ease, visibility 0s linear 0.18s;
	}
	.bs-borrow-modal__dialog {
		transform: translateY(18px) scale(0.96);
		opacity: 0;
		transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.28s ease;
	}
	.bs-borrow-modal:not([hidden]) .bs-borrow-modal__dialog {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.bs-borrow-modal[hidden] {
		display: none;
	}
}

/* Condition toggle: hover feedback on unselected options */
.bs-condition-toggle button:not([aria-pressed="true"]) {
	transition: background-color 0.15s ease, color 0.15s ease;
}
.bs-condition-toggle button:not([aria-pressed="true"]):hover {
	background: rgba(11, 27, 52, 0.07);
	color: var(--bs-dark);
}

/* Slider thumbs: subtle scale on hover/active for tactile feedback */
.bs-term-slider:hover::-webkit-slider-thumb,
.bs-rate-slider:hover::-webkit-slider-thumb,
.bs-amount-slider:hover::-webkit-slider-thumb,
.bs-balloon-slider:hover::-webkit-slider-thumb {
	transform: scale(1.14);
}
.bs-term-slider:active::-webkit-slider-thumb,
.bs-rate-slider:active::-webkit-slider-thumb,
.bs-amount-slider:active::-webkit-slider-thumb,
.bs-balloon-slider:active::-webkit-slider-thumb {
	transform: scale(1.05);
}

/* Frequency tabs (Week/Fortnight/Month): smoother active-state transition */
.bs-frequency-tabs button {
	transition: background-color 0.18s ease, color 0.18s ease;
}


/* Fix: Get My Personalised Quote CTA was falling back to Astra theme's default link-hover color (purple) */
.bs-quote-cta:hover,
.bs-quote-cta:focus,
.bs-quote-cta:focus-visible,
.bs-quote-cta:active,
.bs-quote-cta:visited {
	color: var(--bs-dark) !important;
}


.bs-tile__icon {
	font-size: 1.5rem;
	line-height: 1;
	color: var(--bs-accent);
}

.bs-tile.is-selected .bs-tile__icon {
	color: var(--bs-dark);
}


/* ==========================================================================
Quote widget: "Home Loan" featured option + two-column list (approved
layout per client's reference sketch) -- tiles keep the original boxed
icon-on-top design, only the arrangement changes. Cards stretch full
width of their column, with clear spacing, and stack to one column on
tablet/mobile.
========================================================================== */

.bs-quote-widget__tiles--split {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bs-tile--featured {
	width: 100%;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	padding: 26px 16px;
}

.bs-quote-widget__tile-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 24px;
}

.bs-quote-widget__tile-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bs-quote-widget__tile-list .bs-tile {
	width: 100%;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	padding: 18px 14px;
}

@media screen and (max-width: 720px) {
	.bs-quote-widget__tile-list {
		grid-template-columns: 1fr 1fr;
	}
}