/**
 * Real Estate Tools Pro — front end (mortgage calculator, links &
 * vendors, Q&A / education). Uses Core's design tokens directly (rep-tools
 * declares rep-tokens as a style dependency, see src/Plugin.php) rather
 * than a self-contained variable block — the 8 visual-style skins Real
 * Estate Data Pro's version of this stylesheet supported are not carried
 * over, matching the scope decision already made for Listings Pro and
 * Forms Pro.
 *
 * .rep-tools is now boxed the same way Data Pro's .rep-data-report is: a
 * --rep-tools-* intermediate token layer mapped from the exact same
 * shared --rep-* tokens Data Pro reads, applied directly as this element's
 * own background/border/radius/shadow/padding — so the mortgage
 * calculator, Links & Vendors, and Q&A all render as one elevated card
 * against a neutral page wash, identically to a Snapshot or Market Data
 * report under the same Design settings, instead of floating unstyled in
 * the surrounding page content.
 */

.rep-tools {
	--rep-tools-text: var(--rep-card-fg, #1d2327);
	--rep-tools-surface: var(--rep-card-bg, #ffffff);
	/* A flat neutral panel, independent of the brand colour — same role
	   --rep-data-panel-bg plays for Data Pro: the outer shell's own
	   background, distinct from --rep-tools-surface below, which
	   .rep-mortgage__results/.rep-link-card/.rep-qa__item all read for
	   exactly that reason — the same outer-panel/inner-card split
	   .rep-data-report and its own KPI tiles use. */
	--rep-tools-panel-bg: var(--rep-surface-alt, #f4f5f7);
	--rep-tools-radius: var(--rep-radius-md, 10px);
	--rep-tools-border: var(--rep-border, rgba(0, 0, 0, 0.1));
	--rep-tools-shadow: var(--rep-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05));
	--rep-tools-page-bg: var(--rep-tools-panel-bg);
	/* Template-driven card spacing (Customize → Card spacing / a preset
	   template's own density) — same clamp() Data Pro's --rep-data-
	   content-pad uses. */
	--rep-tools-content-pad: clamp(16px, 4vw, var(--rep-card-padding, 32px));

	font-family: var(--rep-font);
	color: var(--rep-tools-text);
	line-height: var(--rep-leading-normal);
	background: var(--rep-tools-page-bg);
	border: 1px solid var(--rep-tools-border);
	border-radius: var(--rep-tools-radius);
	box-shadow: var(--rep-tools-shadow);
	padding: var(--rep-tools-content-pad);
	position: relative;
	box-sizing: border-box;
}

.rep-tools *,
.rep-tools *::before,
.rep-tools *::after {
	box-sizing: inherit;
}

/*
 * Alignment (an --align shortcode attribute — see Shortcode\ToolsShortcode
 * — or the Elementor/WPBakery "Alignment" control). Unset by default: the
 * box fills its container exactly as before, since a bare [rep_mortgage_
 * calculator]/[rep_links]/[rep_qa] in ordinary page content, or one
 * dropped into a builder column, should track that column's own width
 * without this plugin second-guessing it. Picking left/center/right
 * explicitly opts into a fixed-width card positioned within its
 * container — same 720px default Data Pro's Snapshot card already
 * settled on for "a self-contained box meant to sit among other content"
 * (.rep-data-snapshot's own --rep-data-snapshot-max-width) — align="full"
 * is only ever needed to say so explicitly (e.g. overriding a page
 * template's own default alignment).
 */
.rep-tools--align-left,
.rep-tools--align-right,
.rep-tools--align-center {
	max-width: var(--rep-tools-max-width, 720px);
}

.rep-tools--align-left {
	margin-right: auto;
}

.rep-tools--align-right {
	margin-left: auto;
}

.rep-tools--align-center {
	margin-left: auto;
	margin-right: auto;
}

.rep-tools--align-full {
	max-width: none;
}

.rep-tools__title {
	margin: 0 0 var(--rep-space-md);
	font-size: var(--rep-text-lg);
	font-weight: var(--rep-weight-bold);
	color: var(--rep-text);
}

.rep-tools__disclaimer {
	margin-top: var(--rep-space-lg);
	font-size: var(--rep-meta-size);
	line-height: var(--rep-leading-relaxed);
	color: var(--rep-muted);
}

.rep-notice {
	padding: var(--rep-space-md);
	border-radius: var(--rep-radius-md);
	background: var(--rep-surface-alt);
	color: var(--rep-muted);
}

/* -------------------------------------------------------------------
 * Mortgage calculator
 * ---------------------------------------------------------------- */

.rep-mortgage__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--rep-space-lg);
	align-items: start;
}

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

.rep-mortgage__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rep-space-md);
}

.rep-mortgage__field {
	display: flex;
	flex-direction: column;
	gap: var(--rep-space-xs);
}

.rep-mortgage__field[hidden] {
	display: none;
}

.rep-mortgage__field label {
	font-size: var(--rep-meta-size);
	font-weight: var(--rep-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--rep-tracking-wide);
	color: var(--rep-muted);
}

.rep-mortgage__field input[type="number"],
.rep-mortgage__field input[type="text"],
.rep-mortgage__field select {
	height: var(--rep-control-height);
	padding: 0 10px;
	border: 1px solid var(--rep-border);
	border-radius: var(--rep-radius-sm);
	background: var(--rep-surface);
	color: var(--rep-text);
	font-size: var(--rep-control-size);
}

.rep-mortgage__field .rep-checklist-item {
	display: flex;
	align-items: center;
	gap: var(--rep-space-xs);
	font-size: var(--rep-text-sm);
	font-weight: var(--rep-weight-normal);
	text-transform: none;
	letter-spacing: normal;
	color: var(--rep-text);
	margin-bottom: var(--rep-space-xs);
}

.rep-mortgage__results {
	/* Now that .rep-tools itself is the outer panel-shaded box, this inner
	   results card reads --rep-tools-surface (== --rep-card-bg, the
	   template's brand-tinted surface) instead of the old --rep-surface-
	   alt — matching Data Pro's own outer-panel/inner-card convention
	   (.rep-data-report vs. its KPI tiles) exactly, and avoiding the same
	   "outer and inner read the same flat token" inversion fixed there
	   earlier. Border width and shadow depth still track the selected
	   Design Template's card-shadow token, falling back to the previous
	   fixed value if it's ever absent. */
	background: var(--rep-tools-surface);
	color: var(--rep-tools-text);
	border: var(--rep-card-border-w, 1px) solid var(--rep-card-border-color, var(--rep-border));
	border-radius: var(--rep-radius-md);
	box-shadow: var(--rep-card-shadow, var(--rep-shadow-md));
	padding: var(--rep-card-padding, var(--rep-space-lg));
}

.rep-mortgage__total-label {
	margin: 0;
	font-size: var(--rep-meta-size);
	font-weight: var(--rep-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--rep-tracking-wide);
	color: var(--rep-muted);
}

.rep-mortgage__total {
	margin: 2px 0 var(--rep-space-md);
	font-size: var(--rep-text-2xl);
	font-weight: var(--rep-weight-black);
	color: var(--rep-primary);
	font-variant-numeric: tabular-nums;
}

.rep-mortgage__breakdown {
	list-style: none;
	margin: 0 0 var(--rep-space-md);
	padding: var(--rep-space-md) 0 0;
	border-top: 1px solid var(--rep-border);
	display: flex;
	flex-direction: column;
	gap: var(--rep-space-sm);
}

.rep-mortgage__breakdown li {
	display: flex;
	justify-content: space-between;
	font-size: var(--rep-text-sm);
}

.rep-mortgage__breakdown li[hidden] {
	display: none;
}

.rep-mortgage__breakdown span {
	color: var(--rep-muted);
}

.rep-mortgage__breakdown strong {
	font-variant-numeric: tabular-nums;
}

.rep-mortgage__loan-amount {
	margin: 0 0 var(--rep-space-md);
	padding-top: var(--rep-space-sm);
	border-top: 1px solid var(--rep-border);
	font-size: var(--rep-text-sm);
	color: var(--rep-muted);
}

.rep-mortgage__loan-amount strong {
	color: var(--rep-text);
	font-variant-numeric: tabular-nums;
}

.rep-mortgage__notices {
	display: flex;
	flex-direction: column;
	gap: var(--rep-space-sm);
}

.rep-mortgage__notice {
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--rep-radius-sm);
	font-size: var(--rep-meta-size);
	line-height: var(--rep-leading-relaxed);
}

.rep-mortgage__notice--info {
	background: var(--rep-info-wash);
	color: var(--rep-info);
}

.rep-mortgage__notice--warning {
	background: var(--rep-warning-wash);
	color: var(--rep-warning);
}

.rep-mortgage__notice--success {
	background: var(--rep-success-wash);
	color: var(--rep-success);
}

/* -------------------------------------------------------------------
 * Generic calculator layout — every tool driven by the shared
 * "Calculate" round trip (public/js/tools-calc.js: Home Affordability,
 * Seller Net Sheet, Rent vs. Buy, and any later tool) shares this one
 * block rather than each tool inventing its own field/results styling,
 * directly mirroring .rep-mortgage__* structurally so a visitor sees one
 * consistent tool layout language across the whole plugin.
 * ---------------------------------------------------------------- */

.rep-tools-calc__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--rep-space-lg);
	align-items: start;
}

@media (max-width: 720px) {
	.rep-tools-calc__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.rep-tools-calc__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rep-space-md);
	align-content: start;
}

.rep-tools-calc__field {
	display: flex;
	flex-direction: column;
	gap: var(--rep-space-xs);
}

.rep-tools-calc__field--full {
	grid-column: 1 / -1;
}

/* A group sub-heading inside a multi-scenario form (Payment Comparison's
   "Scenario A"/"Scenario B") — .rep-tools-calc__field--full also applies
   here so it spans the full form width. */
h4.rep-tools-calc__field--full {
	margin: var(--rep-space-sm) 0 0;
	padding-top: var(--rep-space-sm);
	border-top: 1px solid var(--rep-border);
	font-size: var(--rep-text-sm);
	font-weight: var(--rep-weight-bold);
	color: var(--rep-text);
}

.rep-tools-calc__field label {
	font-size: var(--rep-meta-size);
	font-weight: var(--rep-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--rep-tracking-wide);
	color: var(--rep-muted);
}

.rep-tools-calc__field input[type="number"],
.rep-tools-calc__field input[type="text"],
.rep-tools-calc__field select {
	height: var(--rep-control-height);
	padding: 0 10px;
	border: 1px solid var(--rep-border);
	border-radius: var(--rep-radius-sm);
	background: var(--rep-surface);
	color: var(--rep-text);
	font-size: var(--rep-control-size);
}

.rep-tools-calc__submit {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: var(--rep-space-xs);
}

.rep-tools-calc-form--busy {
	opacity: 0.6;
	pointer-events: none;
}

.rep-tools-calc__results {
	background: var(--rep-tools-surface);
	color: var(--rep-tools-text);
	border: var(--rep-card-border-w, 1px) solid var(--rep-card-border-color, var(--rep-border));
	border-radius: var(--rep-radius-md);
	box-shadow: var(--rep-card-shadow, var(--rep-shadow-md));
	padding: var(--rep-card-padding, var(--rep-space-lg));
}

.rep-tools-calc__result-label {
	margin: 0;
	font-size: var(--rep-meta-size);
	font-weight: var(--rep-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--rep-tracking-wide);
	color: var(--rep-muted);
}

.rep-tools-calc__result-primary {
	margin: 2px 0 var(--rep-space-md);
	font-size: var(--rep-text-2xl);
	font-weight: var(--rep-weight-black);
	color: var(--rep-primary);
	font-variant-numeric: tabular-nums;
}

.rep-tools-calc__breakdown {
	list-style: none;
	margin: 0;
	padding: var(--rep-space-md) 0 0;
	border-top: 1px solid var(--rep-border);
	display: flex;
	flex-direction: column;
	gap: var(--rep-space-sm);
}

.rep-tools-calc__breakdown li {
	display: flex;
	justify-content: space-between;
	font-size: var(--rep-text-sm);
}

.rep-tools-calc__breakdown span {
	color: var(--rep-muted);
}

.rep-tools-calc__breakdown strong {
	font-variant-numeric: tabular-nums;
}

.rep-tools-calc__share {
	display: block;
	margin-top: var(--rep-space-md);
	width: 100%;
	text-align: center;
}

.rep-tools-notice {
	margin: 0 0 var(--rep-space-sm);
	padding: 10px 12px;
	border-radius: var(--rep-radius-sm);
	font-size: var(--rep-meta-size);
	line-height: var(--rep-leading-relaxed);
}

.rep-tools-notice:last-child {
	margin-bottom: 0;
}

.rep-tools-notice--info {
	background: var(--rep-info-wash);
	color: var(--rep-info);
}

.rep-tools-notice--warning {
	background: var(--rep-warning-wash);
	color: var(--rep-warning);
}

.rep-tools-notice--success {
	background: var(--rep-success-wash);
	color: var(--rep-success);
}

/* A single-column variant of .rep-tools-calc__layout for a tool whose
   results are a full-width table (Amortization Schedule) rather than a
   compact results card that makes sense sitting beside the form. */
.rep-tools-calc__layout--stacked {
	display: block;
}

.rep-tools-calc__layout--stacked .rep-tools-calc__form {
	margin-bottom: var(--rep-space-lg);
}

.rep-tools-calc__table-scroll {
	overflow-x: auto;
	margin-top: var(--rep-space-md);
	border: 1px solid var(--rep-border);
	border-radius: var(--rep-radius-sm);
}

.rep-tools-calc__schedule {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--rep-text-sm);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.rep-tools-calc__schedule th,
.rep-tools-calc__schedule td {
	padding: 8px 12px;
	text-align: right;
	border-bottom: 1px solid var(--rep-border);
}

.rep-tools-calc__schedule th:first-child,
.rep-tools-calc__schedule td:first-child {
	text-align: left;
}

.rep-tools-calc__schedule thead th {
	background: var(--rep-surface-alt);
	color: var(--rep-muted);
	font-size: var(--rep-meta-size);
	text-transform: uppercase;
	letter-spacing: var(--rep-tracking-wide);
	position: sticky;
	top: 0;
}

.rep-tools-calc__schedule tbody tr:last-child td {
	border-bottom: none;
}

/* -------------------------------------------------------------------
 * Wizard step navigation (What Can I Afford Wizard) — see public/js/
 * tools-wizard.js. A narrower, single-column layout, distinct from the
 * generic .rep-tools-calc__layout two-column form|results split, since a
 * guided wizard reads better as one centered column than a wide grid.
 * ---------------------------------------------------------------- */

.rep-tools-wizard {
	max-width: 480px;
	margin: 0 auto;
}

.rep-tools-wizard__progress {
	margin: 0 0 var(--rep-space-md);
	font-size: var(--rep-meta-size);
	font-weight: var(--rep-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--rep-tracking-wide);
	color: var(--rep-muted);
	text-align: center;
}

.rep-tools-wizard__form {
	display: flex;
	flex-direction: column;
}

.rep-tools-wizard__step-title {
	margin: 0 0 var(--rep-space-md);
	font-size: var(--rep-text-lg);
	font-weight: var(--rep-weight-bold);
	color: var(--rep-text);
}

.rep-tools-wizard__step .rep-tools-calc__field {
	margin-bottom: var(--rep-space-md);
}

.rep-tools-wizard__nav {
	display: flex;
	justify-content: space-between;
	gap: var(--rep-space-sm);
	margin-top: var(--rep-space-lg);
}

.rep-tools-wizard__nav .rep-btn:only-child {
	margin-left: auto;
}

.rep-tools-wizard__results {
	margin-top: var(--rep-space-lg);
}

/* -------------------------------------------------------------------
 * Links & Vendors
 * ---------------------------------------------------------------- */

.rep-links__description {
	margin: -8px 0 var(--rep-space-md);
	color: var(--rep-muted);
	font-size: var(--rep-text-sm);
}

.rep-links__empty {
	color: var(--rep-muted);
}

.rep-links__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--rep-space-md);
}

.rep-link-card {
	display: flex;
	flex-direction: column;
	/* Same template-resolved surface/shadow treatment as Core's shared
	   .rep-card — this doesn't compose with .rep-card in markup, so it
	   needs its own copy to reflect the selected Design Template. Also
	   replaces the old plain "color: inherit" with --rep-tools-text: a
	   dark-gradient surface needs light text, which nothing above this
	   card would otherwise know to provide. */
	background: var(--rep-tools-surface);
	color: var(--rep-tools-text);
	border: var(--rep-card-border-w, 1px) solid var(--rep-card-border-color, var(--rep-border));
	border-radius: var(--rep-radius-md);
	box-shadow: var(--rep-card-shadow, var(--rep-shadow-md));
	backdrop-filter: var(--rep-card-backdrop, none);
	overflow: hidden;
	text-decoration: none;
	transition: transform var(--rep-transition-fast), box-shadow var(--rep-transition-fast);
}

.rep-link-card:hover,
.rep-link-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--rep-shadow-lg);
}

.rep-link-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--rep-surface-alt);
}

.rep-link-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rep-link-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--rep-space-xs);
	padding: var(--rep-space-md);
}

.rep-link-card__title {
	font-weight: var(--rep-weight-bold);
	color: var(--rep-primary);
}

.rep-link-card__description {
	font-size: var(--rep-meta-size);
	color: var(--rep-muted);
}

.rep-links__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.rep-link-item {
	padding: var(--rep-space-sm) 0;
	border-bottom: 1px solid var(--rep-border);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--rep-space-sm);
}

.rep-link-item:last-child {
	border-bottom: none;
}

.rep-link-item a {
	font-weight: var(--rep-weight-bold);
	color: var(--rep-primary);
	text-decoration: none;
}

.rep-link-item a:hover {
	text-decoration: underline;
}

.rep-link-item__description {
	font-size: var(--rep-meta-size);
	color: var(--rep-muted);
}

/* -------------------------------------------------------------------
 * Q&A / Education
 * ---------------------------------------------------------------- */

.rep-qa__category + .rep-qa__category {
	margin-top: var(--rep-space-lg);
}

.rep-qa__category-title {
	margin: 0 0 var(--rep-space-sm);
	font-size: var(--rep-text-md);
	font-weight: var(--rep-weight-bold);
}

.rep-qa__list {
	display: flex;
	flex-direction: column;
	gap: var(--rep-space-sm);
}

.rep-qa__item {
	/* Same template-resolved surface treatment as Core's shared .rep-card
	   — see .rep-link-card above for why. Deliberately no box-shadow: a
	   flat, bordered accordion list is the intended look regardless of
	   template, the same way Core's own .rep-card--interactive only adds
	   shadow as an explicit opt-in rather than a default. */
	border: var(--rep-card-border-w, 1px) solid var(--rep-border);
	border-radius: var(--rep-radius-md);
	background: var(--rep-tools-surface);
	color: var(--rep-tools-text);
	backdrop-filter: var(--rep-card-backdrop, none);
	overflow: hidden;
}

.rep-qa__question {
	padding: var(--rep-space-md) 40px var(--rep-space-md) var(--rep-space-md);
	font-weight: var(--rep-weight-bold);
	cursor: pointer;
	list-style: none;
	position: relative;
}

.rep-qa__question::-webkit-details-marker {
	display: none;
}

.rep-qa__question::after {
	content: "+";
	position: absolute;
	right: var(--rep-space-md);
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--rep-text-lg);
	font-weight: var(--rep-weight-normal);
	color: var(--rep-muted);
}

.rep-qa__item[open] .rep-qa__question::after {
	content: "\2212";
}

.rep-qa__answer {
	padding: 0 var(--rep-space-md) var(--rep-space-md);
	color: var(--rep-muted);
	line-height: var(--rep-leading-relaxed);
}

.rep-qa__answer p:first-child {
	margin-top: 0;
}

.rep-qa__answer p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.rep-link-card {
		transition: none;
	}
}

/* -------------------------------------------------------------------
 * Related questions (a tool's own related_qa_category, appended after
 * its results/CTA by Frontend\ToolRenderer — reuses .rep-qa__* above).
 * ---------------------------------------------------------------- */

.rep-tools-related-qa {
	margin-top: var(--rep-space-xl);
}

.rep-tools-related-qa__title {
	margin: 0 0 var(--rep-space-sm);
	font-size: var(--rep-text-md);
	font-weight: var(--rep-weight-bold);
}

/* -------------------------------------------------------------------
 * Decision Trees (Frontend\DecisionTreeRenderer / public/js/decision-tree.js)
 * ---------------------------------------------------------------- */

.rep-tools-decision__intro {
	margin: 0 0 var(--rep-space-lg);
	color: var(--rep-muted);
}

.rep-tools-decision__panel {
	background: var(--rep-tools-surface);
	color: var(--rep-tools-text);
	border: var(--rep-card-border-w, 1px) solid var(--rep-card-border-color, var(--rep-border));
	border-radius: var(--rep-radius-md);
	box-shadow: var(--rep-card-shadow, var(--rep-shadow-md));
	padding: var(--rep-card-padding, var(--rep-space-lg));
}

.rep-tools-decision__question {
	margin: 0 0 var(--rep-space-md);
	font-size: var(--rep-text-lg);
	font-weight: var(--rep-weight-bold);
}

.rep-tools-decision__options {
	display: flex;
	flex-direction: column;
	gap: var(--rep-space-sm);
}

.rep-tools-decision__option {
	width: 100%;
	text-align: left;
	justify-content: flex-start;
}

.rep-tools-decision__result {
	margin: 0;
	font-size: var(--rep-text-lg);
	font-weight: var(--rep-weight-bold);
	color: var(--rep-primary);
}

.rep-tools-decision__restart {
	margin-top: var(--rep-space-md);
}

.rep-tools-decision__cta {
	margin-top: var(--rep-space-md);
}