/**
 * Layout-critical CSS for the /rental-calculators/ page (post 3015) only.
 * Same rationale as the other page-specific stylesheets: Elementor's own
 * container width/content_width controls do not reliably generate CSS on
 * this install.
 */

/* ROI calculator input rows ("Your Numbers" panel). */
.rcalc-input-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.rcalc-input-row label {
	font-size: 13px;
	color: #5B6B82;
	flex: 1 1 auto;
}

.rcalc-input-wrap {
	display: flex;
	align-items: center;
	gap: 3px;
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	border-radius: 5px;
	padding: 4px 8px;
	flex: 0 0 88px;
}

.rcalc-input-wrap span {
	color: #9AA5B5;
	font-size: 13px;
}

.rcalc-input-wrap input {
	border: none;
	outline: none;
	width: 100%;
	font-size: 13px;
	color: #001A3D;
	background: transparent;
}

/* Chrome/Safari/Firefox number-input spinner arrows just add visual
   noise at this field width — the $ prefix already signals the type. */
.rcalc-input-wrap input::-webkit-outer-spin-button,
.rcalc-input-wrap input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.rcalc-input-wrap input[type="number"] {
	-moz-appearance: textfield;
}

.rcalc-calculate-btn {
	background: #FF3A00;
	color: #FFFFFF;
	border: none;
	border-radius: 4px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 2px;
}

.rcalc-calculate-btn:hover {
	background: #E68200;
}

.rcalc-input-error {
	color: #DC2626;
	font-size: 12px;
	margin: 6px 0 0;
}

/* "Your Results" panel: results-display and lead-gate are two
   mutually-exclusive states toggled via the .is-hidden class in
   platinum-rental-calculators.js (not inline display) — Elementor's own
   containers carry their own "display:flex" CSS on the same specificity
   level, which a bare ".rcalc-lead-gate{display:none}" rule was losing
   to, so both states rendered at once. !important + a dedicated class
   wins reliably. Both states live inside the same compact navy card —
   clicking "Calculate My Numbers" swaps one for the other in place, so
   the panel never grows into a separate overlay/modal. */
.rcalc-lead-gate.is-hidden,
.rcalc-results-display.is-hidden {
	display: none !important;
}

.rcalc-lead-gate .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 6px;
}

.rcalc-lead-gate .wpcf7-form-control.wpcf7-text {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #3A5578;
	border-radius: 5px;
	padding: 6px 8px;
	font-size: 13px;
	background: #FFFFFF;
	color: #001A3D;
}

.rcalc-lead-gate input[type="submit"] {
	width: 100%;
	background: #FF3A00;
	color: #FFFFFF;
	border: none;
	border-radius: 4px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.rcalc-lead-gate .wpcf7-response-output {
	color: #B8C2D0;
	font-size: 11px;
	border-color: #3A5578 !important;
	margin: 6px 0 0 !important;
	padding: 5px 8px !important;
}

/* Result rows ("Your Results" panel, dark navy background) */
.rcalc-result-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.rcalc-result-label {
	color: #B8C2D0;
	font-size: 13px;
}

.rcalc-result-value {
	color: #FFFFFF;
	font-weight: 700;
	font-size: 13px;
}

/* Toolkit "What's Inside" bullet list */
.rcalc-bullet-list {
	margin: 0;
	padding-left: 18px;
}

.rcalc-bullet-list li {
	margin-bottom: 8px;
	line-height: 1.6;
}

.rcalc-bullet-list li:last-child {
	margin-bottom: 0;
}

/* Toolkit purchase card's orange top strip needs its corners rounded to
   match the card, since it sits flush against the card's own radius. */
.rcalc-toolkit-strip {
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
}

/*
 * Matches the site-wide primary-CTA gradient/padding (see e.g. the
 * hero button on this same page and on home/pricing) so every button on
 * this page reads as the same control, not two different styles.
 */
.rcalc-buy-btn {
	background: linear-gradient(90deg, #FF3A00 0%, #FFAA00 100%);
	color: #FFFFFF;
	border: none;
	border-radius: 4px;
	padding: 14px 28px;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
}

.rcalc-buy-btn:hover {
	background: linear-gradient(90deg, #E63400 0%, #E69900 100%);
}

/* The toolkit teaser's CTA is now a link to /investor-toolkit/ rather than
   the old JS-revealed purchase-interest form's <button>, so the shared
   .rcalc-buy-btn styling needs the bits an <a> doesn't inherit from
   <button>: block-level box model, no underline, and an explicit text
   colour. The colour needs !important because the sitewide link colour
   (#FF3A00, the same orange as this button's own background) is set on a
   higher-specificity selector — without the override the label renders
   orange-on-orange and reads as an empty bar. */
a.rcalc-buy-btn,
a.rcalc-buy-btn:hover,
a.rcalc-buy-btn:focus {
	display: inline-block;
	text-decoration: none !important;
	color: #FFFFFF !important;
	/* 1.6, not a smaller value, so this button's total box height
	   (padding + line-height) matches the neighboring Elementor button
	   widget's own default line-height exactly. */
	line-height: 1.6;
}

/* The purchase card sits in a stretch row beside the much taller
   "What's Inside" list, so it always has spare vertical space -- more so
   now that the old mini purchase form was replaced by a single CTA button.
   Letting the card's body band grow and centring its contents puts that
   spare space above and below the price block instead of leaving a large
   empty area under the button. */
.rcalc-toolkit-body {
	flex: 1 1 auto !important;
}

/* Same ".e-con-inner" caveat as the row rules above: the band's children
   live in that intermediate wrapper, so the vertical centring has to be
   applied there rather than on the band itself. */
.rcalc-toolkit-body > .e-con-inner {
	justify-content: center !important;
}

.rcalc-toolkit-purchase-form .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 8px;
}

.rcalc-toolkit-purchase-form .wpcf7-form-control.wpcf7-text {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #E5E7EB;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 14px;
}

.rcalc-toolkit-purchase-form input[type="submit"] {
	width: 100%;
	background: #FF3A00;
	color: #FFFFFF;
	border: none;
	border-radius: 4px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.rcalc-toolkit-confirm {
	color: #001A3D;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}