/* =========================================================================
   Quarterly Tax Calculator - front end
   All colours, fonts and sizes come from CSS custom properties that the
   plugin prints from the admin settings. Do not hard code brand values here.
   ========================================================================= */

.tre-app {
	--tre-field-radius: 8px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var(--tre-outer-padding, 0px);
	font-family: var(--tre-font-body);
	color: var(--tre-body-text);
	background: var(--tre-page-bg);
	-webkit-font-smoothing: antialiased;
}

/* Full width: edge to edge, nothing around it. */
.tre-app.tre-width-full {
	max-width: none;
}

/* Boxed: centred inside the configured maximum width. */
.tre-app.tre-width-boxed {
	max-width: var(--tre-max-width, 1040px);
	margin-left: auto;
	margin-right: auto;
}

.tre-app *,
.tre-app *::before,
.tre-app *::after {
	box-sizing: border-box;
}

.tre-app-title {
	font-family: var(--tre-font-heading);
	color: var(--tre-heading);
	font-size: calc(var(--tre-section-title-size) * 1.3);
	margin: 0 0 18px;
	text-align: center;
}

/* ---------------------------------------------------------------- grid */

.tre-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	gap: var(--tre-gap, 22px);
	align-items: start;
}

.tre-layout-stacked .tre-grid {
	grid-template-columns: minmax(0, 1fr);
}

.tre-col {
	min-width: 0;
}

.tre-col-results {
	display: flex;
	flex-direction: column;
	gap: var(--tre-gap, 22px);
}

.tre-sticky-results .tre-col-results {
	position: sticky;
	top: 24px;
}

/* --------------------------------------------------------------- cards */

.tre-card {
	background: var(--tre-card-bg);
	border: 1px solid var(--tre-card-border);
	border-radius: var(--tre-radius, 12px);
	box-shadow: var(--tre-shadow);
	padding: var(--tre-card-padding, 26px);
}

.tre-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.tre-card-head-center {
	flex-direction: column;
	gap: 10px;
	text-align: center;
	margin-bottom: 6px;
}

.tre-card-title {
	font-family: var(--tre-font-heading);
	color: var(--tre-heading);
	font-size: var(--tre-card-title-size);
	font-weight: var(--tre-card-title-weight);
	line-height: var(--tre-card-title-lh);
	margin: 0;
}

/* --------------------------------------------------------- icon circle */

.tre-icon-circle {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--tre-icon-circle-bg);
	color: var(--tre-icon-color);
}

.tre-card-head-center .tre-icon-circle {
	width: 56px;
	height: 56px;
}

.tre-icon-circle-notes {
	color: var(--tre-notes-icon);
}

.tre-icon-image {
	display: block;
	object-fit: contain;
}

/* ------------------------------------------------------------ sections */

.tre-section + .tre-section {
	margin-top: 22px;
}

.tre-section-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 18px;
}

.tre-section-titles {
	min-width: 0;
	padding-top: 2px;
}

.tre-section-title {
	font-family: var(--tre-font-heading);
	color: var(--tre-heading);
	font-size: var(--tre-section-title-size);
	font-weight: var(--tre-section-title-weight);
	line-height: var(--tre-section-title-lh);
	margin: 0 0 4px;
}

.tre-section-sub {
	font-size: var(--tre-section-sub-size);
	font-weight: var(--tre-section-sub-weight);
	line-height: var(--tre-section-sub-lh);
	color: var(--tre-muted-text);
	margin: 0;
}

.tre-divider {
	border: 0;
	border-top: 1px solid var(--tre-divider);
	margin: 24px 0;
}

/* -------------------------------------------------------------- fields */

.tre-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 15px;
	min-width: 0;
}

.tre-field {
	min-width: 0;
	position: relative;
	grid-column: 1 / -1;
}

/*
 * Half width fields.
 *
 * The safe default is full width, because two columns only work when the form
 * column is actually wide enough, and that depends on the container rather than
 * the viewport: the same 1024px screen gives a wide column in stacked layout and
 * a narrow one in two column layout. A container query measures the real column,
 * and a browser without container query support simply keeps full width fields.
 */
.tre-field-half {
	grid-column: 1 / -1;
}

.tre-col-form {
	container-type: inline-size;
	container-name: treform;
}

@container treform (min-width: 520px) {
	.tre-field-half {
		grid-column: span 1;
	}
}

/* Block, not flex, so a trailing tooltip icon flows after the last word of a
   long label instead of being pushed onto a line of its own. */
.tre-label {
	display: block;
	font-size: var(--tre-label-size);
	font-weight: var(--tre-label-weight);
	line-height: var(--tre-label-lh);
	color: var(--tre-label-text);
	margin: 0 0 7px;
}

.tre-label-text {
	display: inline;
}

.tre-required {
	color: var(--tre-accent);
	margin-left: 2px;
}

/* tooltip */

/*
 * The bubble is anchored to the field, not to the icon.
 *
 * Centring it on the icon looks tidy until the icon sits near an edge, and then
 * the bubble hangs outside the card or off the screen. Pinning it to the left of
 * the field and capping it at the field's own width means it is always inside,
 * at every viewport width and in either layout.
 */
.tre-tip {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0 0 0 5px;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--tre-heading);
	opacity: .75;
	line-height: 0;
	vertical-align: -3px;
}

.tre-tip:hover,
.tre-tip:focus-visible {
	opacity: 1;
}

.tre-tip-bubble {
	position: absolute;
	bottom: calc(100% + 7px);
	left: 0;
	right: auto;
	max-width: 100%;
	transform: translateY(4px);
	padding: 9px 12px;
	border-radius: 7px;
	background: var(--tre-tooltip-bg);
	color: var(--tre-tooltip-text);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease;
	z-index: 40;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
}

.tre-tip:hover .tre-tip-bubble,
.tre-tip:focus-visible .tre-tip-bubble,
.tre-tip.is-open .tre-tip-bubble {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* The first field in a card has nothing above it, so its bubble drops below. */
.tre-fields > .tre-field:first-child .tre-tip-bubble {
	bottom: auto;
	top: 100%;
	transform: translateY(-4px);
	margin-top: 4px;
}

.tre-fields > .tre-field:first-child .tre-tip:hover .tre-tip-bubble,
.tre-fields > .tre-field:first-child .tre-tip:focus-visible .tre-tip-bubble,
.tre-fields > .tre-field:first-child .tre-tip.is-open .tre-tip-bubble {
	transform: translateY(0);
}

/* money input */

.tre-money {
	display: flex;
	align-items: stretch;
	min-width: 0;
	background: var(--tre-input-bg);
	border: 1px solid var(--tre-input-border);
	border-radius: var(--tre-field-radius);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.tre-money:focus-within {
	border-color: var(--tre-input-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tre-input-focus) 16%, transparent);
}

.tre-money-prefix {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding: 0 10px;
	background: var(--tre-prefix-bg);
	border-right: 1px solid var(--tre-input-border);
	color: var(--tre-prefix-text);
	font-size: var(--tre-input-size);
	font-weight: 500;
}

/* min-width:0 stops the browser's intrinsic input width from forcing the grid
   or flex parent wider than the card it sits in. */
.tre-app .tre-input,
.tre-app .tre-select {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	border: 0;
	margin: 0;
	background: transparent;
	color: var(--tre-input-text);
	font-family: var(--tre-font-body);
	font-size: var(--tre-input-size);
	font-weight: var(--tre-input-weight);
	line-height: var(--tre-input-lh);
	box-shadow: none;
	outline: none;
	min-height: 46px;
}

.tre-app .tre-input {
	padding: 11px 14px;
}

.tre-app .tre-input::placeholder {
	color: var(--tre-placeholder);
	opacity: 1;
}

/* Plain text and number fields reuse the money shell without the prefix box. */
.tre-money-plain .tre-money-prefix {
	display: none;
}

/* Paragraph field */

.tre-app .tre-textarea {
	min-height: 92px;
	padding: 11px 14px;
	resize: vertical;
	background: var(--tre-input-bg);
	border: 1px solid var(--tre-input-border);
	border-radius: var(--tre-field-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.tre-app .tre-textarea:focus {
	border-color: var(--tre-input-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tre-input-focus) 16%, transparent);
}

/* Checkbox field */

.tre-checkbox {
	display: inline-flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
	font-size: var(--tre-input-size);
	line-height: 1.45;
	color: var(--tre-input-text);
	padding: 4px 0;
}

/* Visually hidden but still focusable. pointer-events is off so the real
   checkbox never sits on top of the drawn box and swallow clicks; the label
   wraps the input, so clicking anywhere on it still toggles. */
.tre-checkbox input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.tre-checkbox-box {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin-top: 1px;
	border: 1px solid var(--tre-input-border);
	border-radius: 4px;
	background: var(--tre-input-bg);
	position: relative;
	transition: background-color .12s ease, border-color .12s ease;
}

.tre-checkbox-box::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 6px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .12s ease;
}

.tre-checkbox input:checked + .tre-checkbox-box {
	background: var(--tre-accent);
	border-color: var(--tre-accent);
}

.tre-checkbox input:checked + .tre-checkbox-box::after {
	transform: rotate(45deg) scale(1);
}

.tre-checkbox input:focus-visible + .tre-checkbox-box {
	outline: 2px solid var(--tre-accent);
	outline-offset: 2px;
}

/* select */

.tre-select-wrap {
	position: relative;
	min-width: 0;
	background: var(--tre-input-bg);
	border: 1px solid var(--tre-input-border);
	border-radius: var(--tre-field-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.tre-select-wrap:focus-within {
	border-color: var(--tre-input-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tre-input-focus) 16%, transparent);
}

.tre-app .tre-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 11px 40px 11px 14px;
	cursor: pointer;
	border-radius: var(--tre-field-radius);
}

.tre-select-chevron {
	position: absolute;
	top: 50%;
	right: 13px;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--tre-prefix-text);
	line-height: 0;
}

/* validation */

.tre-field-error {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: #c0392b;
}

.tre-field.is-invalid .tre-money,
.tre-field.is-invalid .tre-select-wrap {
	border-color: #c0392b;
}

/* ------------------------------------------------------------- actions */

.tre-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.tre-app .tre-submit {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px 22px;
	border: 0;
	border-radius: var(--tre-field-radius);
	background: var(--tre-button-bg);
	color: var(--tre-button-text);
	font-family: var(--tre-font-body);
	font-size: var(--tre-button-size);
	font-weight: var(--tre-button-weight);
	line-height: var(--tre-button-lh);
	cursor: pointer;
	text-transform: none;
	transition: background-color .15s ease, transform .1s ease;
}

.tre-app .tre-submit:hover {
	background: var(--tre-button-bg-hover);
}

.tre-app .tre-submit:active {
	transform: translateY(1px);
}

.tre-app .tre-submit[disabled] {
	opacity: .65;
	cursor: default;
}

.tre-submit-icon {
	display: inline-flex;
	line-height: 0;
	transition: transform .15s ease;
}

.tre-app .tre-submit:hover .tre-submit-icon {
	transform: translateX(3px);
}

.tre-app .tre-reset {
	flex: 0 0 auto;
	padding: 15px 20px;
	border: 1px solid var(--tre-input-border);
	border-radius: var(--tre-field-radius);
	background: transparent;
	color: var(--tre-muted-text);
	font-family: var(--tre-font-body);
	font-size: var(--tre-button-size);
	cursor: pointer;
}

.tre-form-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 13px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--tre-muted-text);
}

.tre-form-note-icon {
	flex: 0 0 auto;
	line-height: 0;
	color: var(--tre-accent);
	margin-top: 1px;
}

/* -------------------------------------------------------- result card */

.tre-card-result {
	background: var(--tre-result-card-bg);
	text-align: center;
}

.tre-result-amount {
	font-family: var(--tre-font-heading);
	font-size: var(--tre-result-amount-size);
	font-weight: var(--tre-result-amount-weight);
	line-height: var(--tre-result-amount-lh);
	color: var(--tre-result-amount);
	margin: 6px 0 10px;
	letter-spacing: -0.5px;
	word-break: break-word;
}

.tre-result-note {
	margin: 0 auto;
	max-width: 42ch;
	font-size: var(--tre-note-size);
	line-height: var(--tre-note-lh);
	color: var(--tre-muted-text);
}

.tre-card-result.is-updating .tre-result-amount {
	opacity: .5;
}

/* ----------------------------------------------------- breakdown rows */

.tre-rows {
	display: flex;
	flex-direction: column;
}

.tre-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 12px;
	border-bottom: 1px solid var(--tre-divider);
	font-size: var(--tre-row-size);
	line-height: var(--tre-row-lh);
}

.tre-row:last-child {
	border-bottom: 0;
}

.tre-row-label {
	color: var(--tre-row-label);
	font-weight: 400;
}

.tre-row-value {
	color: var(--tre-row-value);
	font-weight: var(--tre-row-weight);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.tre-row-highlight {
	background: var(--tre-row-highlight-bg);
	border-radius: 6px;
	border-bottom-color: transparent;
}

.tre-row-highlight .tre-row-label,
.tre-row-highlight .tre-row-value {
	font-weight: 700;
	color: var(--tre-heading);
}

.tre-row-value.is-refund {
	color: #1e7f4f;
}

/* ---------------------------------------------------------- notes card */

.tre-card-notes {
	background: var(--tre-notes-card-bg);
	border-color: transparent;
}

.tre-card-notes .tre-icon-circle {
	background: rgba(255, 255, 255, .72);
	color: var(--tre-accent);
}

.tre-notes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.tre-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: var(--tre-note-size);
	font-weight: var(--tre-note-weight);
	line-height: var(--tre-note-lh);
	color: var(--tre-notes-text);
}

.tre-note-icon {
	flex: 0 0 auto;
	line-height: 0;
	margin-top: 2px;
	color: var(--tre-notes-icon);
}

/* -------------------------------------------------------------- payment */

.tre-pay-wrap {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--tre-divider);
}

.tre-app .tre-pay-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: var(--tre-field-radius);
	background: var(--tre-heading);
	color: #fff;
	font-family: var(--tre-font-body);
	font-size: var(--tre-button-size);
	font-weight: var(--tre-button-weight);
	cursor: pointer;
	transition: opacity .15s ease;
}

.tre-app .tre-pay-button:hover {
	opacity: .9;
}

.tre-app .tre-pay-button[disabled] {
	opacity: .6;
	cursor: default;
}

.tre-pay-icon {
	display: inline-flex;
	line-height: 0;
}

.tre-pay-amount {
	font-variant-numeric: tabular-nums;
}

.tre-pay-note {
	margin: 9px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--tre-muted-text);
	text-align: center;
}

.tre-pay-error {
	margin: 9px 0 0;
	font-size: 12.5px;
	color: #c0392b;
	text-align: center;
}

/* ---------------------------------------------------------- responsive */

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

	.tre-sticky-results .tre-col-results {
		position: static;
	}
}

@media (max-width: 600px) {
	.tre-card {
		padding: 20px 18px;
	}

	.tre-card-result {
		padding: 20px 18px 22px;
	}

	.tre-icon-circle {
		width: 46px;
		height: 46px;
	}

	.tre-icon-circle svg {
		width: 22px;
		height: 22px;
	}

	.tre-result-amount {
		font-size: calc(var(--tre-result-amount-size) * .78);
	}

	.tre-section-title,
	.tre-card-title {
		font-size: calc(var(--tre-section-title-size) * .88);
	}

	.tre-row {
		padding: 10px 8px;
		font-size: calc(var(--tre-row-size) * .96);
	}

	.tre-tip-bubble {
		right: 0;
		max-width: none;
	}
}

/* ------------------------------------------------------------- a11y */

@media (prefers-reduced-motion: reduce) {
	.tre-app *,
	.tre-app *::before,
	.tre-app *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

.tre-app :focus-visible {
	outline: 2px solid var(--tre-accent);
	outline-offset: 2px;
}

/* =========================================================================
   Controls specific to the refund estimator
   ========================================================================= */

/* The form card carries its own heading rather than an icon circle. */

.tre-section-head {
	display: block;
	margin-bottom: 20px;
}

.tre-section-title {
	font-family: var(--tre-font-heading);
	color: var(--tre-heading);
	font-size: var(--tre-section-title-size);
	font-weight: var(--tre-section-title-weight);
	line-height: var(--tre-section-title-lh);
	margin: 0 0 6px;
}

.tre-section-sub {
	font-size: var(--tre-section-sub-size);
	line-height: var(--tre-section-sub-lh);
	color: var(--tre-muted-text);
	margin: 0;
}

.tre-fields {
	gap: 17px;
}

/* ----------------------------------------------------- button group */

.tre-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.tre-choice {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--tre-choice-border);
	border-radius: var(--tre-field-radius);
	background: var(--tre-choice-bg);
	color: var(--tre-choice-text);
	font-size: var(--tre-choice-size);
	font-weight: var(--tre-choice-weight);
	line-height: var(--tre-choice-lh);
	cursor: pointer;
	transition: background-color .14s ease, border-color .14s ease, color .14s ease;
	flex: 1 1 auto;
}

.tre-choice:hover {
	border-color: var(--tre-accent);
}

.tre-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.tre-choice.is-selected {
	background: var(--tre-choice-active-bg);
	border-color: var(--tre-choice-active-bg);
	color: var(--tre-choice-active-text);
	font-weight: 600;
}

.tre-choice input:focus-visible + .tre-choice-label {
	outline: 2px solid var(--tre-accent);
	outline-offset: 4px;
	border-radius: 3px;
}

/* A two or three way question keeps its buttons on one row. */
.tre-field-buttons .tre-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}

.tre-choice {
	flex: none;
}

/* ---------------------------------------------------------- stepper */

.tre-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--tre-input-border);
	border-radius: var(--tre-field-radius);
	overflow: hidden;
	background: var(--tre-input-bg);
}

.tre-app .tre-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	min-height: 46px;
	padding: 0;
	border: 0;
	background: var(--tre-prefix-bg);
	color: var(--tre-heading);
	cursor: pointer;
	transition: background-color .12s ease, opacity .12s ease;
}

.tre-app .tre-step:hover:not([disabled]) {
	background: var(--tre-icon-circle-bg);
	color: var(--tre-accent);
}

.tre-app .tre-step[disabled] {
	opacity: .38;
	cursor: default;
}

.tre-app .tre-step-value {
	width: 74px;
	min-width: 0;
	border: 0;
	border-left: 1px solid var(--tre-input-border);
	border-right: 1px solid var(--tre-input-border);
	background: transparent;
	text-align: center;
	font-family: var(--tre-font-body);
	font-size: var(--tre-input-size);
	color: var(--tre-input-text);
	padding: 10px 4px;
	outline: none;
	font-variant-numeric: tabular-nums;
}

.tre-stepper:focus-within {
	border-color: var(--tre-input-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tre-input-focus) 16%, transparent);
}

/* ------------------------------------------------------ checkbox grid */

.tre-checkgrid {
	display: grid;
	grid-template-columns: repeat(var(--tre-grid-columns, 2), minmax(0, 1fr));
	gap: 10px 18px;
	padding: 15px 16px;
	background: var(--tre-grid-bg);
	border: 1px solid var(--tre-grid-border);
	border-radius: var(--tre-field-radius);
	min-width: 0;
}

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

.tre-grid-item {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	min-width: 0;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.4;
	color: var(--tre-body-text);
}

.tre-grid-item input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.tre-grid-box {
	flex: 0 0 auto;
	position: relative;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	border: 1px solid var(--tre-check-border);
	border-radius: 3px;
	background: #fff;
	transition: background-color .12s ease, border-color .12s ease;
}

.tre-grid-box::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .12s ease;
}

.tre-grid-item.is-checked .tre-grid-box {
	background: var(--tre-check-active);
	border-color: var(--tre-check-active);
}

.tre-grid-item.is-checked .tre-grid-box::after {
	transform: rotate(45deg) scale(1);
}

.tre-grid-item input:focus-visible + .tre-grid-box {
	outline: 2px solid var(--tre-accent);
	outline-offset: 2px;
}

.tre-grid-label {
	min-width: 0;
}

/* --------------------------------------------------------- result card */

.tre-card-result.is-owed .tre-result-amount {
	color: var(--tre-result-owed);
}

/* ---------------------------------------------------------- aside card */

.tre-card-aside {
	background: var(--tre-notes-card-bg);
	border-color: transparent;
}

.tre-aside-block + .tre-aside-block {
	margin-top: 22px;
}

.tre-card-aside .tre-icon-circle {
	background: rgba(255, 255, 255, .75);
	color: var(--tre-notes-icon);
}

.tre-aside-body {
	margin: 0;
	font-size: var(--tre-note-size);
	line-height: var(--tre-note-lh);
	color: var(--tre-notes-text);
}

.tre-why-title {
	margin-bottom: 14px;
}

.tre-card-aside .tre-note-icon {
	color: var(--tre-why-icon);
}

/* ---------------------------------------------------------- promo card */

.tre-card-promo {
	padding: 0;
	overflow: hidden;
	background: var(--tre-promo-card-bg);
	border-color: transparent;
	text-decoration: none;
	display: block;
}

.tre-promo-image {
	display: block;
	width: 100%;
	height: auto;
}

.tre-promo-text {
	padding: 18px var(--tre-card-padding);
}

.tre-promo-heading {
	font-family: var(--tre-font-heading);
	color: var(--tre-heading);
	font-size: 20px;
	margin: 0 0 6px;
}

.tre-promo-subtext {
	margin: 0;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tre-muted-text);
}

/* --------------------------------------------------------- validation */

.tre-field.is-invalid .tre-choices,
.tre-field.is-invalid .tre-checkgrid,
.tre-field.is-invalid .tre-stepper {
	outline: 1px solid #c0392b;
	outline-offset: 2px;
	border-radius: var(--tre-field-radius);
}

/* ------------------------------------------------ follow-up amount questions */

.tre-field.is-hidden {
	display: none !important;
}

.tre-field-followup {
	padding-left: 14px;
	border-left: 3px solid var(--tre-accent);
}