/*
 * Calculators ([imardix_calculator]). Every rule is scoped under .imx-calc so
 * the legacy markup (tables, ids) cannot affect the rest of the page.
 *
 * Rules the legacy inline JavaScript toggles (display of #details, #tblCalc and
 * the divDetails blocks, background of the input cells) carry NO !important on
 * those properties: an !important would permanently beat the inline style and
 * force the amortization table open.
 *
 * Colours fall back to the Imardix palette when the theme presets are absent.
 */
.imx-calc {
	--imx-calc-primary: var(--wp--preset--color--primary, #1476ad);
	--imx-calc-navy: var(--wp--preset--color--navy, #1f3a52);
	--imx-calc-slate: var(--wp--preset--color--slate, #5b6b76);
	--imx-calc-surface: var(--wp--preset--color--surface, #f5f7f9);
	--imx-calc-line: var(--wp--preset--color--line, #e2e8ed);
	--imx-calc-heading: var(--wp--preset--font-family--heading, 'Rubik', Arial, sans-serif);
	box-sizing: border-box;
	direction: rtl;
	text-align: right;
}
.imx-calc *,
.imx-calc *::before,
.imx-calc *::after {
	box-sizing: border-box;
}

.imx-calc__note {
	margin: 0 0 16px;
	color: var(--imx-calc-slate);
}

/* ---- tabs between the mortgage calculator variants ---- */
.imx-calc-tabs {
	display: flex;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0 0 4px;
	overflow-x: auto;
}
.imx-calc-tab {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	min-height: 44px;
	padding: 10px 22px;
	border: 1px solid var(--imx-calc-line);
	border-radius: 999px;
	font-family: var(--imx-calc-heading);
	font-weight: 600;
	color: var(--imx-calc-navy);
	text-decoration: none;
}
.imx-calc-tab:hover,
.imx-calc-tab:focus-visible {
	border-color: var(--imx-calc-primary);
	color: var(--imx-calc-primary);
}
.imx-calc-tab.is-active {
	border-color: var(--imx-calc-primary);
	background: var(--imx-calc-primary);
	color: #fff;
}

/* ---- legacy global rules, scoped (was an inline <style> in each template) ---- */
.imx-calc .tdLinks {
	border: 0;
}
.imx-calc .tdMark {
	border: 0;
	background-color: yellow;
}
.imx-calc .trRegular {
	border: 1px solid black;
}
.imx-calc .trMark {
	background: #d8d8d8;
}
.imx-calc .trCaption {
	vertical-align: middle;
}
.imx-calc .tdMid {
	border-left: 4px solid black;
}
.imx-calc .inpMenu {
	width: 80px;
}
.imx-calc .inpCss {
	width: 25px;
}
.imx-calc table {
	border-collapse: collapse;
	text-align: center;
}
.imx-calc table,
.imx-calc th,
.imx-calc td {
	border: 1px solid black;
	padding: 6px;
}
.imx-calc th {
	padding: 5px;
	text-align: center;
	text-transform: uppercase;
	line-height: 2em;
	vertical-align: middle;
	color: #fff;
	text-shadow: none;
	background: linear-gradient(to bottom, #1f688e, #103d55);
}
.imx-calc table {
	margin-bottom: 50px;
}
.imx-calc td {
	background: none;
}
.imx-calc p {
	margin: 0 0 5px;
}
.imx-calc img {
	margin-top: 5px;
	margin-bottom: 5px;
}
.imx-calc a {
	cursor: pointer;
}
.imx-calc--grase-male table {
	margin-bottom: 35px;
}
.imx-calc--balon table {
	margin-bottom: 90px;
}
.imx-calc--balon table,
.imx-calc--balon th,
.imx-calc--balon td,
.imx-calc--balon td.first,
.imx-calc--balon th.first {
	text-align: center;
}
.imx-calc--balon .trCaption {
	vertical-align: baseline;
}

/* ---- two-column layout: contact card on the left, calculator on the right ---- */
.imx-calc-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 48px;
	align-items: start;
}
/* Both column and row are explicit: a column-only placement in a reversed DOM order can wrap into a second row. */
.imx-calc-layout > .imx-calc-main {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}
.imx-calc-layout > .imx-calc-sidebar {
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	top: 112px;
	direction: rtl;
	text-align: right;
}
@media (max-width: 900px) {
	.imx-calc-layout {
		grid-template-columns: minmax(0, 1fr);
	}
	/* One column: the calculator first, the contact card after it. */
	.imx-calc-layout > .imx-calc-main,
	.imx-calc-layout > .imx-calc-sidebar {
		grid-column: 1;
		position: static;
	}
	.imx-calc-layout > .imx-calc-main {
		grid-row: 1;
	}
	.imx-calc-layout > .imx-calc-sidebar {
		grid-row: 2;
	}
}

/*
 * Calculators with an amortization schedule (.imx-calc--schedule): the contact card and the
 * calculator stay side by side and the schedule (#details with its two print blocks) opens BELOW
 * both, across the full width.
 * The schedule lives inside #result inside the calculator column in the legacy markup, so the
 * wrappers (.imx-calc-main, #pageData, #result) become display:contents and their children are
 * placed straight into the layout grid. Ids, inline script and the inline display toggle are
 * untouched. Rows: 1 chooser, 2 values, 3 summary, 5 spacer (the card spans 1-5; its height is
 * absorbed here, so it never stretches the rows on its left), 6 schedule, 7-8 the script's print and
 * copyright blocks, 9 image credit.
 */
.imx-calc--schedule .imx-calc-layout {
	grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto auto;
	row-gap: 0;
}
.imx-calc--schedule .imx-calc-layout > .imx-calc-main,
.imx-calc--schedule #pageData,
.imx-calc--schedule #result {
	display: contents;
}
.imx-calc--schedule .imx-calc-main > table:not(.imx-legacy-variant-switch) {
	grid-column: 1;
	grid-row: 1;
}
.imx-calc--schedule #tableCalcValues {
	grid-column: 1;
	grid-row: 2;
}
.imx-calc--schedule #result > table:first-child {
	grid-column: 1;
	grid-row: 3;
	margin-top: 24px;
}
.imx-calc--schedule .imx-calc-main > div[style*='float'] {
	/* The image credit goes last, under the schedule and its print and copyright blocks. */
	grid-column: 1 / -1;
	grid-row: 9;
}
.imx-calc--schedule .imx-calc-layout > .imx-calc-sidebar {
	grid-row: 1 / 6;
	/* A sticky card would slide down over the schedule row below it. */
	position: static;
}
.imx-calc--schedule #divDetails1,
.imx-calc--schedule #details,
.imx-calc--schedule #divDetails2 {
	grid-column: 1 / -1;
}
.imx-calc--schedule #details {
	grid-row: 6;
}
.imx-calc--schedule #divDetails1 {
	grid-row: 7;
}
.imx-calc--schedule #divDetails2 {
	grid-row: 8;
}
@media (max-width: 900px) {
	/* One column: calculator, contact card, then the schedule (scrolls sideways inside its own box). */
	.imx-calc--schedule .imx-calc-layout > .imx-calc-sidebar {
		grid-row: 5;
	}
	.imx-calc.imx-calc--schedule #details {
		display: block;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		overflow-x: auto;
	}
}

/* The old per-variant switch row is replaced by .imx-calc-tabs; kept in the markup, never shown. */
.imx-calc .imx-legacy-variant-switch {
	display: none;
}

.imx-calc .contentright {
	margin: 0 0 32px;
	padding: 24px;
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--wp--preset--shadow--card, 0 1px 2px rgba(31, 58, 82, 0.06), 0 8px 24px rgba(31, 58, 82, 0.1));
}
.imx-calc .contentright .wpcf7-form h2 {
	font-size: 18px;
}
/*
 * Contact Form 7 marks its wrapper dir="ltr" (the stored locale is en_US), so the card's Hebrew text
 * ("הידעת?", "...227,574 לבנק!") put its closing ? and ! at the wrong end of the line. The whole card is RTL;
 * the formatted amounts stay left-to-right isolated runs inside it.
 */
.imx-calc .contentright .wpcf7,
.imx-calc .contentright .wpcf7-form,
.imx-calc .contentright .wpcf7-form p,
.imx-calc .contentright .wpcf7-form div {
	direction: rtl;
	text-align: right;
}

/* Side card around the Forminator form: picture, "did you know" text, form, office details. */
.imx-calc .imx-calc-card__img {
	display: block;
	width: calc(100% + 48px);
	max-width: none;
	height: auto;
	margin: -24px -24px 14px;
	border-radius: 16px 16px 0 0;
}
.imx-calc .imx-calc-card__text {
	direction: rtl;
	text-align: right;
}
.imx-calc .imx-calc-card__text p {
	margin: 0 0 12px;
}
.imx-calc .imx-calc-card__text .imx-calc-card__title {
	margin-bottom: 15px;
	font-size: 20px;
}
.imx-calc .imx-calc-card .forminator-ui {
	margin-top: 18px;
}
.imx-calc .imx-calc-card__contact {
	direction: rtl;
	margin: 20px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--imx-line, #e3e8ec);
	font-size: 15px;
	line-height: 1.9;
	text-align: right;
	color: var(--imx-slate, #5b6b76);
}
.imx-calc .imx-calc-card__contact a {
	font-weight: 600;
	color: var(--imx-primary, #1476ad);
}

/* Choice rows and value table */
.imx-calc #tableCalcValues {
	width: 100%;
	max-width: 480px;
	margin-bottom: 24px;
	border: none;
}
.imx-calc #tableCalcValues td {
	padding: 8px 4px;
	border: none;
	vertical-align: middle;
}
.imx-calc table[style*='550px'] {
	max-width: 480px;
	border: none;
}
.imx-calc table[style*='550px'] td {
	border: none;
}
.imx-calc #tdCTamount,
.imx-calc #tdCTperiod,
.imx-calc #tdCTpayment {
	padding: 10px;
	border: 1px solid var(--imx-calc-line);
	border-radius: 8px;
	text-align: center;
}
.imx-calc #tdCTamount span,
.imx-calc #tdCTperiod span,
.imx-calc #tdCTpayment span {
	font-weight: 600;
	color: var(--imx-calc-navy);
}
.imx-calc .inpMenu {
	width: 100%;
	max-width: 140px;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var(--imx-calc-slate);
	border-radius: 8px;
	font-size: 16px;
	text-align: center;
	direction: ltr;
}
.imx-calc .inpMenu:disabled {
	color: var(--wp--preset--color--ink, #20303b);
}
.imx-calc .inpCss {
	width: 44px;
	min-height: 32px;
	border: 1px solid var(--imx-calc-slate);
	border-radius: 4px;
	text-align: center;
}
.imx-calc input[type='button'] {
	min-width: 32px;
	min-height: 32px;
	border: 1px solid var(--imx-calc-slate);
	border-radius: 6px;
	background: #fff;
	color: var(--imx-calc-navy);
	cursor: pointer;
}
.imx-calc .button-regular-small {
	margin-top: 8px;
}
.imx-calc .button-regular-small a.aqua {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 24px;
	border-radius: 999px;
	background: var(--imx-calc-primary);
	font-family: var(--imx-calc-heading);
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}
.imx-calc .button-regular-small a.aqua:hover {
	background: var(--wp--preset--color--primary-dark, #0f5a87);
}

/* Results. #details is toggled by the legacy JS through its inline display. */
.imx-calc #result {
	max-width: 100%;
	margin-top: 24px;
	/* A schedule wider than its column scrolls here instead of running under the contact card. */
	overflow-x: auto;
}
.imx-calc #result table {
	width: 100%;
	max-width: 100%;
}
.imx-calc #result > table:first-child {
	max-width: 640px;
}
/* A real table, so its columns share the available width; #result scrolls when the column is narrower than 900px. */
.imx-calc #details {
	display: table;
	width: 100%;
	min-width: 900px;
}
.imx-calc #details table {
	min-width: 900px;
}
/*
 * The sticky-table-headers script fixes the original <thead> to the top of the window, at the
 * table's offset: under the sticky site header it is never visible and, over a scrolling region, it
 * spills across neighbouring columns. Keep the header in the table (the plugin's own print rule does
 * the same).
 */
.imx-calc .tableFloatingHeaderOriginal {
	position: static !important;
}
.imx-calc .tableFloatingHeader {
	display: none !important;
}

/* Interest and index cells of the schedule: [-] [value] [+] on one row, always left to right. */
.imx-calc #details th:nth-child(2),
.imx-calc #details th:nth-child(3) {
	width: 136px;
}
.imx-calc #details td[name='tdInput'] {
	padding: 6px 4px;
	white-space: nowrap;
	direction: ltr;
}
.imx-calc #details td[name='tdInput'] input[type='button'] {
	width: 32px;
	min-width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	vertical-align: middle;
}
.imx-calc #details td[name='tdInput'] input[type='button']:hover {
	border-color: var(--imx-calc-primary);
	color: var(--imx-calc-primary);
}
.imx-calc #details td[name='tdInput'] input.inpCss {
	width: 52px;
	height: 32px;
	min-height: 32px;
	margin: 0 3px;
	padding: 0 4px;
	font-size: 15px;
	vertical-align: middle;
}
.imx-calc #details td[name='tdInput'] input:focus-visible {
	outline: 2px solid var(--imx-calc-primary);
	outline-offset: 1px;
}
.imx-calc #result table,
.imx-calc #result th,
.imx-calc #result td,
.imx-calc #details table,
.imx-calc #details th,
.imx-calc #details td {
	padding: 8px;
	border: 1px solid var(--imx-calc-line);
	text-align: center;
}
.imx-calc #result th,
.imx-calc #details th {
	background: var(--imx-calc-navy);
	color: #fff;
}
/* The legacy tables carry an inline 550px width; on narrow screens they must follow the column.
   The script only changes #tableCalcValues' width for the print snapshot, which is copied as markup into the print frame. */
@media (max-width: 640px) {
	.imx-calc #tableCalcValues,
	.imx-calc table[style*='550px'],
	.imx-calc #result > table {
		width: 100% !important;
		max-width: 100% !important;
	}
	.imx-calc #result {
		overflow-x: auto;
	}
}

/* Purchase tax. #tblCalc is shown by CalcTax() through its inline display. */
.imx-calc #selType,
.imx-calc #appValue {
	display: block;
	width: 100%;
	max-width: 320px;
	min-height: 48px;
	margin-bottom: 24px;
	padding: 8px 12px;
	border: 1px solid var(--imx-calc-slate);
	border-radius: 8px;
	font-size: 16px;
}
.imx-calc #selType {
	direction: rtl;
}
.imx-calc #appValue {
	direction: ltr;
	text-align: center;
}
.imx-calc--taxpurchase input[type='button'] {
	min-height: 48px;
	padding: 10px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--imx-calc-primary);
	font-family: var(--imx-calc-heading);
	color: #fff;
}
.imx-calc #tblCalc {
	max-width: 480px;
	margin-top: 24px;
	border-collapse: collapse;
}
.imx-calc #tblCalc td {
	padding: 8px;
	border: 1px solid var(--imx-calc-line);
	text-align: center;
}
.imx-calc #tblCalc tr:first-child td {
	background: var(--imx-calc-navy);
	font-weight: 600;
	color: #fff;
}
.imx-calc #DivResult {
	max-width: 640px;
	margin-top: 24px;
}
.imx-calc #DivResult span {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
}
.imx-calc #DivResult li {
	margin-inline-start: 32px;
	margin-bottom: 4px;
}
@media (max-width: 640px) {
	.imx-calc #selType,
	.imx-calc #appValue {
		max-width: 100%;
	}
}

/* Amounts with thousands separators (calculators-format.js): keep digits, commas and a minus sign in one left-to-right run. */
.imx-calc [data-imx-money] {
	direction: ltr;
	unicode-bidi: isolate;
}