/**
 * Shared calculator styles – Northend Mortgage theme
 * Used by: Borrowing Power, Extra Repayment, and other calculator pages.
 * Theme colors: primary #0d1820, accent #174893, background #f8f9fa.
 */

/* -------------------------------------------------------------------------
   Theme variables (easy to override for all calculators)
   ------------------------------------------------------------------------- */
.contact-page-section.calc-section {
	--calc-primary: #0d1820;
	--calc-accent: #174893;
	--calc-accent-rgb: 23, 72, 147;
	--calc-text: #333;
	--calc-bg: #f8f9fa;
	--calc-card-bg: #fff;
	--calc-border: #eee;
}

/* Section background */
.contact-page-section.calc-section,
.contact-page-section.ptb-100[style*="background-color: #f8f9fa"] {
	background-color: var(--calc-bg, #f8f9fa) !important;
}

/* -------------------------------------------------------------------------
   Calculator card
   ------------------------------------------------------------------------- */
.contact-page-section .card.calc-card {
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	border: 0;
}

.contact-page-section .card.calc-card .card-header {
	background: var(--calc-card-bg, #fff);
	border-bottom: 1px solid var(--calc-border, #eee);
	padding: 0.75rem 1.5rem;
}

.contact-page-section .card.calc-card .card-header .h5 {
	color: var(--calc-primary, #0d1820);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Section headings (e.g. "Enter your details", "View your results")
   ------------------------------------------------------------------------- */
.contact-page-section .calc-heading,
.contact-page-section .visiCSSHeader {
	font-size: 1rem;
	font-weight: 600;
	color: var(--calc-accent, #174893);
	margin-bottom: 0.75rem;
}

/* -------------------------------------------------------------------------
   Labels
   ------------------------------------------------------------------------- */
.contact-page-section .calc-label,
.contact-page-section .MFAA_Label1 {
	font-weight: 500;
	color: var(--calc-text, #333);
	margin-left: 5px;
}

/* -------------------------------------------------------------------------
   Result highlights (currency and key results)
   ------------------------------------------------------------------------- */
.contact-page-section .calc-result-primary,
.contact-page-section .Higtlight2 {
	font-weight: 700;
	color: var(--calc-accent, #174893);
	font-size: 1.05rem;
}

.contact-page-section .calc-result-accent,
.contact-page-section .Higtlight3 {
	font-weight: 700;
	color: var(--calc-accent, #174893);
	font-size: 1rem;
}

/* -------------------------------------------------------------------------
   Chart container (Chart.js) – shared for all calculator charts
   ------------------------------------------------------------------------- */
.contact-page-section .calc-chart-wrap {
	width: 100%;
	height: 270px;
	position: relative;
}

.contact-page-section .calc-chart-wrap canvas {
	display: block;
	max-width: 100%;
}

/* -------------------------------------------------------------------------
   Form controls (inputs and selects)
   ------------------------------------------------------------------------- */
.contact-page-section .calc-card .form-control.form-control-sm,
.contact-page-section .calc-card .form-select.form-select-sm {
	border-color: var(--calc-border, #dee2e6);
	border-radius: 0.25rem;
}

.contact-page-section .calc-card .form-control:focus,
.contact-page-section .calc-card .form-select:focus {
	border-color: var(--calc-accent, #174893);
	box-shadow: 0 0 0 0.2rem rgba(var(--calc-accent-rgb, 23, 72, 147), 0.15);
}

/* Single arrow on frequency/period dropdowns (no double caret) */
.contact-page-section .calc-card .form-select.form-select-sm {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%23333'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: 12px;
	padding-right: 1.75rem;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.contact-page-section .calc-card .btn-outline-secondary:hover {
	border-color: var(--calc-accent, #174893);
	color: var(--calc-accent, #174893);
	background-color: rgba(var(--calc-accent-rgb, 23, 72, 147), 0.06);
}

.contact-page-section .calc-card .btn-secondary {
	background-color: var(--calc-primary, #0d1820);
	border-color: var(--calc-primary, #0d1820);
	color: #fff;
}

.contact-page-section .calc-card .btn-secondary:hover {
	background-color: var(--calc-accent, #174893);
	border-color: var(--calc-accent, #174893);
	color: #fff;
}

/* Borrowing power: blue highlight for selected Yes/No and Dependents */
.contact-page-section .calc-card #radioBtn button.active,
.contact-page-section .calc-card #radioBtn_Children button.active {
	border-color: var(--calc-accent, #174893) !important;
	color: var(--calc-accent, #174893) !important;
	background-color: rgba(var(--calc-accent-rgb, 23, 72, 147), 0.08) !important;
}

/* -------------------------------------------------------------------------
   Callout / CTA strip (Call us now)
   ------------------------------------------------------------------------- */
.contact-page-section .calc-callout {
	text-align: center;
	margin-top: 2rem;
	padding: 1.5rem;
	background: rgba(var(--calc-accent-rgb, 23, 72, 147), 0.1);
	border-radius: 8px;
}

.contact-page-section .calc-callout a {
	color: var(--calc-accent, #174893);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Budget Planner
   ------------------------------------------------------------------------- */
.contact-page-section .BudgetPlannerSection .visiAba-formgroup-vs {
	margin-bottom: 0.25rem;
}
.contact-page-section #visiAbacus_Calc_Container .bp-tab.active {
	background-color: var(--calc-accent, #174893);
	color: #fff;
	border-color: var(--calc-accent, #174893);
}
.contact-page-section #visiAbacus_Calc_Container .accordion-button:not(.collapsed) {
	background-color: rgba(var(--calc-accent-rgb, 23, 72, 147), 0.08);
	color: var(--calc-accent, #174893);
}
.contact-page-section #visiAbacus_Calc_Container .accordion-button:focus {
	box-shadow: 0 0 0 0.2rem rgba(var(--calc-accent-rgb, 23, 72, 147), 0.25);
}
/* -------------------------------------------------------------------------
   Calculator modals (Assumption / About) – above fixed header, never clipped at top
   Body class .northend-calc-page is added on /calculator/* pages only.
   ------------------------------------------------------------------------- */
   body.northend-calc-page .modal,
   body.northend-calc-page .modal.show {
	   z-index: 10050 !important;
   }
   body.northend-calc-page .modal-backdrop,
   body.northend-calc-page .modal-backdrop.show {
	   z-index: 10049 !important;
   }
   body.northend-calc-page .modal-dialog {
	   margin-top: 80px;
	   margin-bottom: 20px;
	   max-height: calc(100vh - 100px);
	   display: flex;
	   align-items: flex-start;
   }
   body.northend-calc-page .modal-content {
	   max-height: calc(100vh - 100px);
	   overflow: hidden;
	   display: flex;
	   flex-direction: column;
   }
   body.northend-calc-page .modal-body {
	   overflow-y: auto;
	   flex: 1 1 auto;
   }