/**
 * The Ijara calculator page — a port of "Ijara Calculator.dc.html".
 *
 * Every measurement is the design's own. The markup underneath is
 * Gravity Forms' and is not rebuilt, so these rules dress the form the
 * plugin renders rather than a structure of our own; that is why the
 * selectors reach through `.gfield`, `.gform_fields` and the ids the
 * `ijara-forms` plugin binds to.
 *
 * Rules carry a `body` prefix where the parent theme's Bootstrap base
 * would otherwise win on specificity.
 */

/* ---- Shell ---------------------------------------------------------------- */

.ijc { background: var(--slate-50); }

/* The design's two cards, side by side, with the schedule beneath. The
   layout script puts the form's own nodes into these. */
.ijc-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: 24px;
	align-items: stretch;
}

/* The cost card IS a Gravity Forms field, and GF marks it
   `gfield--width-full`, which means `grid-column: span 12` on GF's own
   twelve-column grid. Inside this two-column grid that made it span the
   lot and squeezed the form card to 64px the moment a result appeared.
   Cards here take their own column. */
body .ijc .ijc-grid > .ijc-card {
	grid-column: auto !important;
	grid-row: auto !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
}

body .ijc .ijc-card,
.ijc-card {
	border-radius: 28px;
	box-shadow: var(--shadow-card);
	padding: clamp(24px, 2.5vw, 32px);
	box-sizing: border-box;
	background: #fff;
	border: 0;
	width: 100%;
	max-width: 100%;
}

/* The cost and schedule cards ARE Gravity Forms fields (the plugin shows and
   hides them), and `body .ijc .gfield` resets padding at the same specificity
   further down, so it would otherwise win and leave them flush to the edge. */
body .ijc .gfield.ijc-card { padding: clamp(24px, 2.5vw, 32px); }

.ijc-card--form,
.ijc-card--cost { height: 100%; }

.ijc-card--schedule { margin-top: 24px; }

/* ---- Card headers --------------------------------------------------------- */

.ijc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

body .ijc .ijc-title {
	margin: 0 0 20px;
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: -0.9px;
	font-weight: var(--weight-heading);
	color: var(--color-text);
}

body .ijc .ijc-card--cost .ijc-title {
	margin-bottom: 0;
	line-height: 1.15;
	letter-spacing: -1.2px;
}

/* Reset and Print sit as quiet text buttons beside the heading. */
body .ijc .ijc-textbtn {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 20px;
	padding: 6px 2px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: var(--weight-semibold);
	line-height: 1.4;
	color: var(--slate-900);
	cursor: pointer;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
	width: auto;
	text-transform: none;
}

body .ijc .ijc-card--cost .ijc-textbtn {
	margin-bottom: 0;
	color: var(--brand-green-dark);
}

body .ijc .ijc-textbtn:hover,
body .ijc .ijc-textbtn:focus-visible { color: var(--brand-green); }

/* ---- The form ------------------------------------------------------------- */

body .ijc .gform_wrapper { margin: 0; }
body .ijc .gform_heading,
body .ijc .gform_required_legend,
body .ijc .gform_validation_container { display: none; }

/* Gravity Forms lays its field list out on its own twelve-column grid and
   gives each field a column span, which is why the sliders came out at
   three different widths. This design is one column, and GF's grid rules
   are specific enough to need !important to unseat. */
body .ijc .gform_fields {
	display: flex !important;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .ijc .gform_fields > .gfield {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	max-width: 100% !important;
}

body .ijc .gfield {
	margin: 0;
	padding: 0;
	max-width: 100%;
	/* Something upstream paints .addl-monthly-payment yellow with a
	   dashed black border; a field is not a container in this design. */
	background: transparent;
	border: 0;
	outline: 0;
}

/* A field's label and its live value sit on one line, as the design has
   them: the name at the left, the current figure at the right. */
body .ijc .gfield_label {
	display: block;
	margin: 0;
	font-size: 13px;
	font-weight: var(--weight-semibold);
	letter-spacing: -0.2px;
	line-height: 1.4;
	color: var(--color-text);
}

body .ijc .gfield_required { color: var(--color-danger); }

body .ijc .gfield_description,
body .ijc .gfield_instruction {
	margin: 12px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--color-text-secondary);
}

/* ---- Country radios ------------------------------------------------------- */

body .ijc .ginput_container_radio .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 12px;
}

body .ijc .gchoice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

body .ijc .gfield-choice-input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--brand-green-dark);
}

body .ijc .gchoice label {
	margin: 0;
	font-size: 13px;
	font-weight: var(--weight-semibold);
	line-height: 1.4;
	color: var(--color-text);
	cursor: pointer;
}

/* ---- Sliders -------------------------------------------------------------- */

/* The row the layout script builds: field name at the left, the current
   value in green at the right. */
.ijc-sliderhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.ijc-value {
	flex: none;
	font-size: 13px;
	font-weight: var(--weight-semibold);
	letter-spacing: -0.2px;
	color: var(--brand-green-dark);
}

.ijc-scale {
	margin-top: 6px;
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--color-text-secondary);
}

body .ijc .ijc-range {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 8px;
	margin: 8px 0 0;
	padding: 0;
	border: none;
	border-radius: 100px;
	background: var(--slate-200);
	cursor: pointer;
}

body .ijc .ijc-range::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 100px;
	background: transparent;
}

body .ijc .ijc-range::-moz-range-track {
	height: 8px;
	border-radius: 100px;
	background: transparent;
}

body .ijc .ijc-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin-top: -6px;
	border-radius: 100px;
	background: var(--brand-green-dark);
	border: 3px solid #fff;
	box-shadow: var(--shadow-low);
	cursor: pointer;
}

body .ijc .ijc-range::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 100px;
	background: var(--brand-green-dark);
	border: 3px solid #fff;
	box-shadow: var(--shadow-low);
	cursor: pointer;
}

body .ijc .ijc-range:focus-visible { outline: 2px solid var(--brand-green-dark); outline-offset: 4px; }

/* The number box the slider drives stays in the DOM — the plugin reads
   it — but the design shows the figure beside the slider instead. */
body .ijc .ijc-field--slider .ginput_container {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* The slider head prints the name, so the field's own label would say it
   twice. This needs the `body .ijc` prefix to outrank the label rule
   above it — without it the label showed under every slider. */
body .ijc .ijc-field--slider > .gfield_label { display: none; }

/* ---- Buttons -------------------------------------------------------------- */

body .ijc .gform_footer {
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

body .ijc .gform_footer .primary-button,
body .ijc .gform_button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border: 0;
	border-radius: 100px;
	background: var(--brand-green);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: var(--weight-semibold);
	line-height: 1.2;
	text-shadow: none;
	cursor: pointer;
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
	width: auto;
}

body .ijc .gform_footer .primary-button:hover,
body .ijc .gform_button:hover { background: var(--brand-green-dark); }

body .ijc .secondary-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid var(--color-border-strong);
	border-radius: 100px;
	background: #fff;
	color: var(--color-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: var(--weight-semibold);
	line-height: 1.2;
	cursor: pointer;
	width: auto;
}

body .ijc .secondary-button:hover { background: var(--slate-50); }

/* The plugin toggles this class to hide the reset and print controls
   until there is something to reset or print. */
body .ijc .gfield_visibility_hidden { display: none !important; }

/* ---- The cost card -------------------------------------------------------- */

/* #calculator-summary is where the plugin writes its results, as a table
   that alternates a row of labels with a row of values. That is not the
   design's layout, so it stays in the DOM — the plugin keeps writing to
   its ids — and the script mirrors the figures into the blocks below.
   Hidden, not removed. */
body .ijc #calculator-summary { display: none; }

body .ijc #calculator-summary.ijc-show {
	width: 100%;
	margin: 28px 0 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	font-size: 13px;
}

body .ijc #calculator-summary tr { border: 0; }

body .ijc #calculator-summary td {
	padding: 12px 0;
	border: 0;
	border-top: 1px solid var(--color-divider);
	background: transparent;
	vertical-align: baseline;
	line-height: 1.45;
	color: var(--color-text-secondary);
}

body .ijc #calculator-summary td + td { text-align: right; }

body .ijc #calculator-summary td span,
body .ijc #calculator-summary td strong {
	font-size: 14px;
	font-weight: var(--weight-semibold);
	color: var(--color-text);
}

body .ijc #calculator-summary tr:first-child td { border-top: 0; }

body .ijc #calculator-summary .hidden { display: none; }

/* The headline figure, lifted out of the table by the layout script. */
.ijc-figures {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

.ijc-figure-label {
	display: block;
	font-size: 11px;
	font-weight: var(--weight-semibold);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.ijc-figure-monthly {
	display: block;
	margin-top: 6px;
	font-size: 40px;
	line-height: 1.05;
	letter-spacing: -1.6px;
	font-weight: var(--weight-heading);
	color: var(--brand-green-dark);
}

.ijc-figure-total {
	display: block;
	margin-top: 6px;
	font-size: 22px;
	line-height: 1.15;
	letter-spacing: -0.7px;
	font-weight: var(--weight-heading);
	color: var(--color-text);
}

.ijc-figures > span:last-child { flex: none; text-align: right; }

.ijc-eyebrow {
	font-size: 13px;
	font-weight: var(--weight-semibold);
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.ijc-breakdown { margin-top: 32px; }
.ijc-breakdown .ijc-eyebrow { display: block; }

.ijc-note {
	margin: 20px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--color-divider);
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-text-secondary);
}

/* The design carries no chart. The plugin still draws into this node. */
body .ijc #gform_results_chart_26 { display: none; }

/* ---- The payment schedule ------------------------------------------------- */

.ijc-scroll {
	margin-top: 20px;
	max-height: 460px;
	overflow-y: auto;
	overflow-x: auto;
}

body .ijc #gform_results_table_26 {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	font-size: 13px;
	color: var(--color-text);
}

body .ijc #gform_results_table_26 thead th {
	position: sticky;
	top: 0;
	padding: 10px 8px;
	border: 0;
	border-bottom: 1px solid var(--color-border-strong);
	background: #fff;
	font-size: 13px;
	font-weight: var(--weight-semibold);
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	text-align: right;
	white-space: nowrap;
}

/* Month on the left, every figure on the right, as in the design. */
body .ijc #gform_results_table_26 thead th:first-child { text-align: left; }
body .ijc #gform_results_table_26 thead th .subheading { display: none; }

body .ijc #gform_results_table_26 tbody td {
	padding: 9px 8px;
	border: 0;
	box-shadow: inset 0 -1px 0 var(--color-divider);
	background: transparent;
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body .ijc #gform_results_table_26 tbody td:first-child {
	text-align: left;
	color: var(--color-text-secondary);
}

body .ijc #gform_results_table_26 tbody td:last-child { font-weight: var(--weight-semibold); }

body .ijc #gform_results_table_26 tbody tr:hover td { background: var(--slate-50); }

/* ---- Phones --------------------------------------------------------------- */

@media (max-width: 991px) {
	.ijc-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.ijc-section { padding-left: 16px !important; padding-right: 16px !important; }
	.ijc-card { border-radius: 20px; }
	body .ijc .ijc-title { font-size: 23px; letter-spacing: -0.6px; }
	.ijc-figure-monthly { font-size: 32px; letter-spacing: -1.1px; }
	.ijc-figures { gap: 14px; }
	.ijc-figures > span:last-child { text-align: left; }
}

/* ---- The one field that stays a number box -------------------------------- */

body .ijc .gfield .ginput_container { width: 100%; }

body .ijc .gfield input[type="text"],
body .ijc .gfield input[type="number"] {
	width: 100%;
	min-width: 120px;
	max-width: 180px;
	margin-top: 8px;
	padding: 10px 14px;
	border: 1px solid var(--color-border-strong);
	border-radius: 12px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: var(--weight-semibold);
	line-height: 1.4;
	color: var(--color-text);
	box-shadow: none;
}

body .ijc .gfield input[type="text"]:focus,
body .ijc .gfield input[type="number"]:focus {
	outline: 0;
	border-color: var(--brand-green-dark);
	box-shadow: 0 0 0 3px var(--color-success-soft);
}

body .ijc .ginput_container_number { display: flex; align-items: center; gap: 8px; }
body .ijc .ginput_container_number .percent-sign,
body .ijc .gfield .percent { font-size: 14px; color: var(--color-text-secondary); }

/* ---- Left out, as in the design ------------------------------------------ */

/* The disclaimer is not shown on this page (owner's decision, 2026-10-06);
   the field stays in the form for anywhere else it is used. */
body .ijc .gfield--type-html.form-notice { display: none !important; }

/* No rate control: the rate set in the admin is used, as in the design.
   The fields stay in the form because the plugin reads them. */
body .ijc .annual-profit-rate,
body .ijc .annual-profit-rate-ca { display: none !important; }

/* The figures recalculate as the sliders move, so there is nothing to
   press. The button stays in the page: assets/js/calculator-page.js
   presses it on the visitor's behalf. */
body .ijc #gform_calc_button_26,
body .ijc #field_26_16:not(:has(.print-button:not([hidden]))) { display: none !important; }

/* ---- The design's small notes --------------------------------------------- */

body .ijc .ijc-hint {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--color-text-secondary);
}

body .ijc .ijc-schednote { margin-top: 16px; }
body .ijc .ijc-afford { margin-top: 20px; }
body .ijc .ijc-afford a { font-weight: var(--weight-semibold); color: var(--brand-green-dark); }
body .ijc .ijc-hint[hidden] { display: none; }

/* The design lists the first 12 months; the printout has them all. */
body .ijc #gform_results_table_26 tbody tr:nth-child(n+13) { display: none; }

/* ---- Country flags and button glyphs -------------------------------------- */

body .ijc .ijc-flag {
	flex: none;
	display: block;
	width: 18px;
	height: 13px;
	border-radius: 2px;
	object-fit: cover;
}

body .ijc .ijc-btnicon { flex: none; }

/* The reset control cannot hold its own glyph (see assets/js/calculator-page.js),
   so the glyph sits over the padding this wrapper adds to it. */
body .ijc .ijc-btnwrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0 0 20px;
	color: var(--slate-900);
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body .ijc .ijc-btnwrap .ijc-btnicon {
	position: absolute;
	left: 2px;
	pointer-events: none;
}

body .ijc .ijc-btnwrap .ijc-textbtn {
	margin: 0;
	padding-left: 23px;
}

body .ijc .ijc-btnwrap:hover { color: var(--brand-green); }

/* The plugin reveals reset and print only once a calculation has run, by
   swapping gfield_visibility_hidden on the control itself. The glyph is
   positioned, so without this the wrapper keeps painting it on its own. */
body .ijc .ijc-btnwrap:has( .gfield_visibility_hidden ) { display: none; }

/* ---- Mirrored figures ----------------------------------------------------- */

.ijc-rows { margin-top: 16px; display: flex; flex-direction: column; }

.ijc-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 12px 0;
	border-top: 1px solid var(--color-divider);
}

.ijc-row > span:first-child {
	min-width: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--color-text-secondary);
}

.ijc-row > span:last-child {
	min-width: 0;
	text-align: right;
	font-size: 14px;
	font-weight: var(--weight-semibold);
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
}

/* Before the first calculation there is nothing to show — and nothing
   here decides that. The cost card IS the plugin's `.results-summary`
   field and the schedule card IS its `.form-results-wrapper` field, so
   the plugin's own `gfield_visibility_hidden` toggle governs both,
   exactly as it did before the redesign. */

/* The `hidden` attribute loses to the button's own `display` rule, so the
   duplicate print controls need this to actually disappear. */
body .ijc .print-button[hidden] { display: none !important; }

/* ---- Last details --------------------------------------------------------- */

/* The plugin leaves the tables their intrinsic width, so the schedule sat
   in the left half of its card. */
/* Something upstream caps this table at max-width:800px, which held it
   to two thirds of its card however wide the page got. */
body .ijc #gform_results_table_26 {
	width: 100% !important;
	max-width: none !important;
	table-layout: auto;
}

body .ijc .results-table-wrapper { width: 100%; max-width: none; }

/* Both tables carry a <caption> ("Summary", "Details") that the design
   replaces with its own eyebrow heading. */
body .ijc #gform_results_table_26 > caption,
body .ijc #calculator-summary > caption { display: none; }

/* Gravity Forms renders empty HTML fields for spacing; in a card they
   read as stray rules across the copy. */
body .ijc .gfield--type-html:empty,
body .ijc .gfield--type-html:not(:has(*)):blank { display: none; }

body .ijc .gform_footer:empty { display: none; }


/* ---- Type and details, matched to the design (2026-10-06) ----------------- */

/* The parent theme sets Helvetica on <body> and everything here inherited
   it; the design is Poppins throughout. */
body .ijc,
body .ijc :is(div, span, p, a, label, legend, input, button, table, th, td, caption) {
	font-family: var(--font-sans);
}

/* Slider labels: the design's 13px semibold, in text colour. */
body .ijc .ijc-name {
	font-size: 13px;
	font-weight: var(--weight-semibold);
	letter-spacing: -0.2px;
	color: var(--color-text);
}

/* Country: no required marker and no rule beneath, as in the design. */
body .ijc .country-choice { border: 0 !important; padding-bottom: 0; }
body .ijc .country-choice .gfield_label {
	font-size: 13px;
	font-weight: var(--weight-semibold);
	letter-spacing: -0.2px;
	color: var(--color-text);
}
body .ijc .country-choice .gfield_required { display: none; }
body .ijc .country-choice .gchoice label { font-size: 13px; font-weight: var(--weight-semibold); }
body .ijc .country-choice input[type="radio"] {
	appearance: auto;
	-webkit-appearance: radio;
	accent-color: var(--brand-green-dark);
	width: 16px;
	height: 16px;
	margin: 0;
}

/* The hidden number boxes behind the sliders, and Gravity Forms' range
   instruction under them, were widened by a later width rule and pushed
   the page 44px past a phone's edge. Pin them to 1px inside their field. */
body .ijc .ijc-field--slider { position: relative; }
body .ijc .ijc-field--slider .ginput_container,
body .ijc .ijc-field--slider .gfield_description.instruction {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* ---- Typed boxes in place of the sliders (client request 2026-10-22) -----
   The box is ij_calc_numfield()'s markup, styled by calculator.css. These
   undo the `.gfield input[type="text"]` rule above, which otherwise draws a
   second, 180px-wide box inside it. */
body .ijc .ijc-numfield { height: 48px; margin-top: 10px; }
body .ijc .gfield .ijc-numfield input.ij-numfield-input,
body .ijc .gfield .ijc-numfield input.ij-numfield-input:focus {
	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0 12px;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 16px;
	font-weight: 700;
}