/* ==========================================================================
   Flexible content block: Calculator NTL (life-insurance calculator)
   Adapts the invl-calculators plugin markup to the invalda theme: wraps the
   whole calculator in a self-contained light "card" so all the plugin's labels,
   headings and inputs stay readable on the theme's dark page background.
   Engine + base styles: invl-calculators plugin (invl-ntl-calculator.css).
   ========================================================================== */

.calc-ntl {
	--calc-navy: #00003c;
	--calc-gold: #dc9623;
	--calc-line: #e2e2ec;
	--calc-muted: #5b5b74;
	position: relative;
	margin: 40px 0 60px;
	padding: 28px 28px 32px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 60, .08);
	color: var(--calc-navy);
}

@media (max-width: 767px) {
	.calc-ntl {
		padding: 18px 14px 22px;
	}
}

.calc-ntl--empty {
	padding: 20px;
	border: 1px dashed var(--calc-gold);
	border-radius: 8px;
	color: var(--calc-muted);
	background: #fff;
}

/* Force readable text colour for all the plugin's headings/labels/paragraphs,
   which would otherwise inherit the theme's light text colour on our white card. */
.calc-ntl,
.calc-ntl h2,
.calc-ntl h3,
.calc-ntl h4,
.calc-ntl label,
.calc-ntl p,
.calc-ntl small,
.calc-ntl span,
.calc-ntl td,
.calc-ntl th {
	color: var(--calc-navy);
}

.calc-ntl h2,
.calc-ntl h3,
.calc-ntl h4 {
	margin-top: 0;
}

/* --- Form fields ---------------------------------------------------------
   Only text-like controls get the 42px "field" look. Checkboxes/radios are
   handled separately below so the sizing does not inflate them into big boxes. */
.calc-ntl .calc-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.calc-ntl .calc-form select,
.calc-ntl .calc-form textarea {
	min-height: 42px;
	background: #fff !important;
	color: var(--calc-navy) !important;
	border: 1px solid var(--calc-line);
	border-radius: 6px;
}

.calc-ntl .calc-form input:not([type="checkbox"]):not([type="radio"]):focus,
.calc-ntl .calc-form select:focus,
.calc-ntl .calc-form textarea:focus {
	border-color: var(--calc-gold);
	outline: none;
	box-shadow: none;
}

.calc-ntl .input-group-addon {
	background: #f3f0e8;
	border: 1px solid var(--calc-line);
	border-left: none;
	color: var(--calc-navy);
	border-radius: 0 6px 6px 0;
}

/* Keep addon + input on one line and let the input take the free space. */
.calc-ntl .input-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}

.calc-ntl .input-group .form-control {
	flex: 1 1 auto;
	min-width: 0;
}

/* --- Native checkboxes / radios -----------------------------------------
   The invalda theme resets/hides native controls. The calculator's OWN
   coverage checkboxes are plain native boxes. The CF7 consultation form's radio
   group is intentionally left to the theme's global .custom-checkbox styling
   (see secondary-menu.css) so radios look the same across every form. */
.calc-ntl .btn-checkbox input[type="checkbox"],
.calc-ntl .ml-calculator__group input[type="checkbox"] {
	-webkit-appearance: auto !important;
	-moz-appearance: auto !important;
	appearance: auto !important;
	position: static !important;
	opacity: 1 !important;
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	margin: 0 8px 0 0 !important;
	padding: 0 !important;
	background: #fff !important;
	accent-color: var(--calc-navy);
	flex: 0 0 auto;
	cursor: pointer;
}

/* --- Rows / groups ------------------------------------------------------- */
.calc-ntl .ml-calculator__group {
	border: 1px solid var(--calc-line);
	border-top: none;
	background: #fff;
	border-radius: 0;
}

.calc-ntl .ml-calculator__group:hover {
	background: #f3f6fc;
}

.calc-ntl .child-row {
	background: #f7f8fb;
	border: 1px solid var(--calc-line);
	border-radius: 8px;
}

/* --- Summary ------------------------------------------------------------- */
.calc-ntl .ml-calculator__summary {
	background: #eef2fb;
	border: 1px solid var(--calc-line);
	border-radius: 10px;
}

.calc-ntl .ml-calculator__sum {
	color: var(--calc-navy);
}

/* --- Result table -------------------------------------------------------- */
.calc-ntl .p_table {
	background: transparent;
}

.calc-ntl .p_table th {
	background: #eef2fb !important;
	color: var(--calc-navy) !important;
}

.calc-ntl .p_table td {
	color: var(--calc-navy) !important;
}

.calc-ntl .p_table tr:nth-child(odd) td {
	background: #ffffff !important;
}

.calc-ntl .p_table tr:nth-child(even) td {
	background: #f5f6f2 !important;
}

/* --- Consultation form (Contact Form 7) ---------------------------------- */
.calc-ntl .inquiry_section {
	background: #f4f6fa;
	border: 1px solid var(--calc-line);
	border-radius: 10px;
}

/* Consent text and any paragraphs inside the form stay readable. */
.calc-ntl .inquiry_section p,
.calc-ntl .inquiry_section label,
.calc-ntl .site-form__item p {
	color: var(--calc-navy);
}

/* CF7 text inputs */
.calc-ntl .inquiry_section input[type="text"],
.calc-ntl .inquiry_section input[type="email"],
.calc-ntl .inquiry_section input[type="tel"],
.calc-ntl .inquiry_section textarea {
	width: 100%;
	min-height: 46px;
	background: #fff !important;
	color: var(--calc-navy) !important;
	border: 1px solid var(--calc-line);
	border-radius: 6px;
	padding: 10px 14px;
}

.calc-ntl .inquiry_section .site-form__item {
	margin-bottom: 14px;
}

/* CF7 validation / response messages */
.calc-ntl .wpcf7-not-valid-tip {
	color: #b3341a;
	font-size: 0.8rem;
	margin-top: 4px;
}

.calc-ntl .wpcf7-response-output {
	color: var(--calc-navy);
	border-radius: 6px;
}

/* --- Buttons -------------------------------------------------------------
   Only the calculator's own buttons are restyled. The consultation form is a
   Contact Form 7 form using the theme's own markup (.site-form / .form-button),
   so it is left to the theme's site-form styles. */
.calc-ntl .btn--primary,
.calc-ntl .btn-default {
	background: var(--calc-gold);
	border: 1px solid var(--calc-gold);
	color: #fff;
	border-radius: 6px;
	padding: 12px 24px;
	cursor: pointer;
}

.calc-ntl .btn--primary:hover,
.calc-ntl .btn-default:hover {
	background: #c8851d;
	border-color: #c8851d;
	color: #fff;
}

/* Primary "Calculate the payment" action = navy, like on the source site. */
.calc-ntl #calc_button,
.calc-ntl .ml-calculator__summary .btn-primary {
	background: var(--calc-navy) !important;
	border: 1px solid var(--calc-navy) !important;
	color: #fff !important;
	border-radius: 6px;
	padding: 12px 28px;
	cursor: pointer;
}

.calc-ntl #calc_button:hover,
.calc-ntl .ml-calculator__summary .btn-primary:hover {
	background: #12124f !important;
	border-color: #12124f !important;
}

/* Parsley validation messages stay readable */
.calc-ntl .parsley-errors-list,
.calc-ntl .form-control.has-error + ul {
	color: #8a2b12;
}