/**
 * TFO Pricing Calculator -- brand styling for the client's tfo-* classes.
 *
 * The client's original stylesheet wasn't supplied with the code, so these rules
 * are a rebuild against the new site's design system, taken from the computed
 * styles on /hardware/:
 *
 *   page background   #F7F3EE          cards      transparent + 1px light border
 *   card radius       10px             controls   4px radius
 *   buttons           10px 20px, 600 weight, #FF7D03 on #F7F3EE
 *   shadows           none anywhere
 *
 * Colours read from the Elementor kit variables first and only fall back to hex
 * if the kit isn't present, so changing a global colour in Elementor restyles
 * the calculator with it. Fonts are deliberately never set here -- headings and
 * body text inherit Grift / Rethink Sans from the kit.
 */

.tfo-pricing-app {
	--tfo-primary: var(--e-global-color-primary, #21004a);
	--tfo-secondary: var(--e-global-color-secondary, #cba7ff);
	--tfo-text: var(--e-global-color-text, #535353);
	--tfo-accent: var(--e-global-color-accent, #ff7d03);

	--tfo-cream: #f7f3ee;
	--tfo-on-accent: #f7f3ee;

	/* Card border, matching the hardware page's cards. */
	--tfo-border: rgba(203, 167, 255, 0.4);
	/* Control border -- slightly firmer, for things you click. */
	--tfo-border-control: rgba(33, 0, 74, 0.25);

	--tfo-radius: 10px;
	--tfo-radius-sm: 4px;

	/* Gap below every product card, and between wrapped rows of them. */
	--tfo-card-gap: 1.5rem;

	color: var(--tfo-text);
	max-width: 100%;
	overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
 * Critical: the client's JS toggles this class to show/hide the quote form and
 * its success/error alerts. Bootstrap 5 dropped .hidden, so it must be defined
 * here or the alerts are visible on load.
 *
 * Deliberately NOT !important. pricing.js reveals the alerts with jQuery
 * .show() and .fadeIn(), which set an inline display -- an !important here
 * outranks that and the alerts can never appear. Two class selectors already
 * beat Bootstrap's .row/.col display rules on the elements that carry both.
 * ------------------------------------------------------------------------- */
.tfo-pricing-app .hidden,
.tfo-pricing-app.hidden {
	display: none;
}

/* --- Typography ---------------------------------------------------------- */

.tfo-pricing-app .tfo-color {
	color: var(--tfo-primary);
}

.tfo-pricing-app h2,
.tfo-pricing-app h3,
.tfo-pricing-app h4,
.tfo-pricing-app h5 {
	letter-spacing: -0.5px;
}

/* The kit's headings are 500; 300 would be synthesised. */
.tfo-pricing-app .tfo-heading-light {
	font-weight: 500;
}

/* Product titles inside the panels are <p>, not headings, so they need an
 * explicit size. Scoped to p so it can't shrink the h2 step headings, which
 * carry the same class and take their size from the Elementor kit. */
.tfo-pricing-app p.tfo-heading-light {
	font-size: 1.2rem;
	line-height: 1.3;
}

.tfo-pricing-app .tfo-heading-bold {
	font-weight: 600;
}

.tfo-pricing-app .tfo-small-bold {
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tfo-pricing-app .tfo-row-text-small-normal {
	font-size: 0.95rem;
	line-height: 1.6;
}

.tfo-pricing-app small {
	color: var(--tfo-text);
	opacity: 0.75;
}

.tfo-pricing-app .tfo-cursor-pointer {
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.tfo-pricing-app .tfo-cursor-pointer:hover {
	opacity: 0.7;
}

/* --- Section bands ------------------------------------------------------- */

.tfo-pricing-app .tfo-dark-row {
	background-color: var(--tfo-cream);
	margin-left: 0;
	margin-right: 0;
}

.tfo-pricing-app .tfo-row-content {
	width: 100%;
}

/* --- Cards: software, hardware, GPS, totals ------------------------------
 * White panels with a single light border and no shadow. White rather than
 * transparent because the supplied product images and icons have baked-in white
 * backgrounds -- on a cream panel they show as white rectangles.
 * ----------------------------------------------------------------------- */

.tfo-pricing-app .tfo-pricing-software-box,
.tfo-pricing-app .tfo-pricing-tracker-box,
.tfo-pricing-app .tfo-pricing-gps-box,
.tfo-pricing-app .pricing-total-box {
	background-color: #fff;
	border: 1px solid var(--tfo-border);
	border-radius: var(--tfo-radius);
	box-shadow: none;
}

.tfo-pricing-app .tfo-pricing-software-box {
	text-align: left;
	overflow: hidden;
}

/*
 * Cards are height:100% inside a stretched flex column, so a plain
 * margin-bottom overflows the column instead of separating wrapped rows --
 * with `gx-3` supplying horizontal gutters only, rows of tracker and camera
 * cards ended up touching. Shortening the card by the gap makes the margin
 * land inside the column, so wrapped rows separate and the cards in a row stay
 * equal height.
 */
.tfo-pricing-app .tfo-pricing-tracker-box,
.tfo-pricing-app .tfo-pricing-gps-box {
	height: calc(100% - var(--tfo-card-gap));
	margin-bottom: var(--tfo-card-gap);
}

.tfo-pricing-app .tfo-pricing-software-box img,
.tfo-pricing-app .tfo-pricing-gps-box img {
	max-width: 100%;
	height: auto;
}

/*
 * Themes routinely give img a bottom margin. In the GPS boxes that lands
 * between the icon and the list under it, on top of the gap .tfo-product-icon
 * already sets, so it is cleared here.
 */
.tfo-pricing-app .tfo-pricing-gps-box img {
	margin-bottom: 0;
}

/* --- Product icons ------------------------------------------------------
 * Since 1.6.0 the software and GPS tracking boxes show an SVG icon with the
 * product name underneath as real text, instead of a raster logo with the name
 * baked into the picture. The name is deliberately black rather than a brand
 * colour: it is the product's name, not a heading, and it has to stay legible
 * against the white card.
 *
 * An SVG has no intrinsic size worth trusting, so the height is set here and
 * the width follows it. See includes/product-icons.php.
 * ----------------------------------------------------------------------- */

.tfo-pricing-app .tfo-product-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}

.tfo-pricing-app .tfo-product-icon-img {
	display: block;
	width: auto;
	height: 72px;
	max-width: 100%;
	object-fit: contain;
}

.tfo-pricing-app .tfo-product-icon-label {
	color: #000;
	font-weight: 600;
	font-size: 1.2em;
	line-height: 1.3;
}

/* The software boxes are left-aligned, so the icon column has to centre its own
 * contents rather than inherit the alignment. */
.tfo-pricing-app .tfo-pricing-software-box .tfo-product-icon {
	align-items: flex-start;
	text-align: left;
}

/* A smaller icon, for the "Includes" row inside the TFO Lite box. */
.tfo-pricing-app .tfo-product-icon-sm .tfo-product-icon-img {
	height: 44px;
}

.tfo-pricing-app .tfo-product-icon-sm .tfo-product-icon-label {
	font-size: 0.8rem;
	font-weight: 500;
}

.tfo-pricing-app .tfo-pricing-software-box ul {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.9rem;
	line-height: 1.7;
}

.tfo-pricing-app .tfo-pricing-software-box ul li::marker {
	color: var(--tfo-accent);
}

.tfo-pricing-app .tfo-pricing-tracker-box img {
	max-width: 200px;
	height: auto;
	margin: 0 auto;
	display: block;
	object-fit: contain;
}

.tfo-pricing-app .tfo-pricing-cost {
	color: var(--tfo-accent);
	font-weight: 600;
	font-size: 1.05rem;
	margin-bottom: 0;
}

/* --- GPS tracking panels -------------------------------------------------
 * The markup is a bare icon, a 9-item list and a stepper paragraph containing
 * `<br /><br />` before its caption -- which left the panel tall and loosely
 * spaced. Condensed here: a flex column so both panels' steppers line up, a
 * capped icon, the feature list in two columns, and the doubled line break
 * collapsed. Padding comes from the markup's own px-3 pb-3 classes.
 * ----------------------------------------------------------------------- */

.tfo-pricing-app .tfo-pricing-gps-box {
	display: flex;
	flex-direction: column;
	padding-top: 1.5rem;
	text-align: center;
}

.tfo-pricing-app .tfo-pricing-gps-box img {
	max-height: 68px;
	width: auto;
	margin: 0 auto 1.25rem;
	object-fit: contain;
}

.tfo-pricing-app .tfo-pricing-gps-list {
	list-style: none;
	padding: 0;
	margin: 0 auto 1.25rem;
	max-width: 400px;
	text-align: left;
	font-size: 0.875rem;
	line-height: 1.5;
	columns: 2;
	column-gap: 1.75rem;
	/* Pushes the stepper to the bottom so both panels align. */
	flex: 1 1 auto;
}

.tfo-pricing-app .tfo-pricing-gps-list li {
	break-inside: avoid;
	padding-bottom: 0.3rem;
}

@media (max-width: 575.98px) {
	.tfo-pricing-app .tfo-pricing-gps-list {
		columns: 1;
		max-width: 240px;
	}
}

.tfo-pricing-app .tfo-pricing-gps-list li::before {
	content: "\2713";
	color: var(--tfo-accent);
	font-weight: 600;
	margin-right: 0.45rem;
}

/* The stepper paragraph: kill the py-3 padding and the double <br />, and shrink
 * the bare caption text. The controls keep their own explicit font sizes, so
 * only the caption gets smaller. */
.tfo-pricing-app .tfo-pricing-gps-box > p {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0;
	font-size: 0.8rem;
	line-height: 1.6;
}

.tfo-pricing-app .tfo-pricing-gps-box br + br {
	display: none;
}

/* --- Totals -------------------------------------------------------------- */

.tfo-pricing-app .pricing-total-box {
	padding: 1.75rem 1.25rem;
	margin: 0 0.75rem 1rem;
}

.tfo-pricing-app .pricing-total-box h4 {
	color: var(--tfo-primary);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}

/*
 * "per month" after the subscription amount. The heading it sits in is
 * uppercased and letter-spaced, so this opts out of both -- it is a plain
 * suffix, not part of the label. The non-breaking space before it in
 * templates/finaltotal.php keeps it on the amount's line.
 */
.tfo-pricing-app .pricing-total-box .tfo-per-month {
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tfo-text);
	opacity: 0.8;
}

/* A 4px chip rather than a pill, for consistency with the rest of the site.
 * .rounded-pill carries !important in Bootstrap, so this has to as well. */
.tfo-pricing-app .tfo-primary-pill,
.tfo-pricing-app .tfo-primary-pill.rounded-pill {
	background-color: var(--tfo-accent);
	color: var(--tfo-on-accent);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: 0;
	padding: 0.45rem 1rem;
	border-radius: var(--tfo-radius-sm) !important;
	vertical-align: middle;
}

@media (max-width: 991.98px) {
	.tfo-pricing-app .pricing-total-box-filler {
		display: none;
	}
}

/* --- Quantity steppers ---------------------------------------------------
 * The client's markup puts the -/input/+ trio inline inside a <p>, and the
 * input carries inline width/padding/background/radius, so the input rules
 * need !important to land. Buttons are matched to it on size and radius so the
 * three read as one control.
 * ----------------------------------------------------------------------- */

.tfo-pricing-app input.quantityInput {
	width: 64px !important;
	height: 42px;
	padding: 0 !important;
	background-color: transparent !important;
	border: 1px solid var(--tfo-border-control) !important;
	border-radius: var(--tfo-radius-sm) !important;
	color: var(--tfo-primary);
	font-size: 1rem;
	font-weight: 600;
	text-align: center !important;
	vertical-align: middle;
	appearance: textfield;
	-moz-appearance: textfield;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tfo-pricing-app input.quantityInput:focus {
	outline: 0;
	border-color: var(--tfo-primary) !important;
	box-shadow: 0 0 0 3px rgba(203, 167, 255, 0.35);
}

/* The +/- buttons are the affordance; the native spinners just add noise. */
.tfo-pricing-app input.quantityInput::-webkit-outer-spin-button,
.tfo-pricing-app input.quantityInput::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.tfo-pricing-app .btn.adjust {
	width: 42px;
	height: 42px;
	padding: 0;
	margin: 0 3px;
	background-color: transparent;
	border: 1px solid var(--tfo-border-control);
	border-radius: var(--tfo-radius-sm);
	color: var(--tfo-primary);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tfo-pricing-app .btn.adjust:hover,
.tfo-pricing-app .btn.adjust:focus {
	background-color: var(--tfo-primary);
	border-color: var(--tfo-primary);
	color: var(--tfo-on-accent);
	box-shadow: none;
}

.tfo-pricing-app .btn.adjust:active {
	background-color: var(--tfo-accent);
	border-color: var(--tfo-accent);
	color: var(--tfo-on-accent);
}

/* Caption under a stepper ("Enter total # of Assets"). */
.tfo-pricing-app .quantityInput ~ small,
.tfo-pricing-app .btn.adjust ~ small {
	display: inline-block;
	margin-top: 0.6rem;
	font-size: 0.8rem;
}

/* --- Quote form ---------------------------------------------------------- */

.tfo-pricing-app #tfo-pricing-form {
	max-width: 420px;
	margin: 0 auto;
}

.tfo-pricing-app #pricing-email {
	text-align: center;
	border-radius: var(--tfo-radius-sm);
	border-color: var(--tfo-border-control);
	background-color: transparent;
	padding: 0.65rem 0.75rem;
}

.tfo-pricing-app #tfo-pricing-btn,
.tfo-pricing-app .btn-primary {
	background-color: var(--tfo-accent);
	border-color: var(--tfo-accent);
	color: var(--tfo-on-accent);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0;
	padding: 10px 20px;
	border-radius: var(--tfo-radius-sm);
}

.tfo-pricing-app #tfo-pricing-btn:hover:not(:disabled),
.tfo-pricing-app .btn-primary:hover {
	background-color: var(--tfo-primary);
	border-color: var(--tfo-primary);
	color: var(--tfo-on-accent);
}

.tfo-pricing-app #tfo-pricing-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.tfo-pricing-app .alert {
	border-radius: var(--tfo-radius-sm);
}

/* The factsheet modal's close icon is inline SVG -- see
 * tfo-pricing-components.css. These two rules matter in "Full Bootstrap" asset
 * mode too, where Bootstrap's own .btn-close background would otherwise sit
 * behind it. */
.tfo-pricing-modal .btn-close:has(svg) {
	background-image: none;
}

.tfo-pricing-modal .btn-close svg {
	display: block;
	width: 1em;
	height: 1em;
	color: #000;
}

/* --- Program info modal -------------------------------------------------
 * Bootstrap moves the modal to <body>, so it sits outside .tfo-pricing-app.
 * ----------------------------------------------------------------------- */

#ppi .modal-content {
	border-radius: 10px;
	border-color: rgba(203, 167, 255, 0.4);
}

#ppi .modal-title {
	color: var(--e-global-color-primary, #21004a);
	font-weight: 500;
	letter-spacing: -0.5px;
}

#ppi .btn-primary {
	background-color: var(--e-global-color-accent, #ff7d03);
	border-color: var(--e-global-color-accent, #ff7d03);
	color: #f7f3ee;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: 4px;
}

#ppi .btn-primary:hover {
	background-color: var(--e-global-color-primary, #21004a);
	border-color: var(--e-global-color-primary, #21004a);
}

#ppi #ppilink {
	text-decoration: none;
}

/* --- Hardware buttons ---------------------------------------------------
 * [tfo_hardware_buttons] renders Enquire Now and Download the Fact Sheet as a
 * pair. Both are Elementor Button widgets, which are block-level, so without
 * this they stack. A flex row with `gap` is all that is needed -- no margins on
 * the buttons themselves, so a single button is unaffected and the site's own
 * button styling (including the btn-angle-sweep animation) is left to do
 * everything else.
 *
 * These live here rather than in tfo-pricing-components.css because that
 * stylesheet only loads in "Grid only" asset mode, and the buttons have to lay
 * out the same way whichever mode the site is in.
 * ----------------------------------------------------------------------- */

.tfo-hardware-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/* An Elementor Button widget is a block that fills its container; inside the
 * flex row it should be only as wide as its label. */
.tfo-hardware-buttons > .elementor-widget-button {
	width: auto;
	max-width: 100%;
	margin: 0;
}

/*
 * The pair is deliberately mismatched: Enquire Now is the call to action and
 * renders as a solid button, Download the Fact Sheet is the secondary action
 * and renders as a text link beside it. These rules are what make the link read
 * as one -- a bare <a> would otherwise inherit whatever the theme does to links
 * inside that container, which on an Elementor card is often nothing at all.
 *
 * Only a direct child of the row is targeted, so a [tfo_factsheet_button] used
 * on its own elsewhere is untouched.
 */
.tfo-hardware-buttons > .tfo-pricing-factsheet-link,
.tfo-hardware-buttons > .tfo-pricing-enquiry-link {
	display: inline-flex;
	align-items: center;
	padding: 0;
	font-weight: 600;
	line-height: 1.4;
	color: var(--e-global-color-primary, #21004a);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	background: none;
	border: 0;
	transition: color 0.15s ease-in-out;
}

.tfo-hardware-buttons > .tfo-pricing-factsheet-link:hover,
.tfo-hardware-buttons > .tfo-pricing-factsheet-link:focus,
.tfo-hardware-buttons > .tfo-pricing-enquiry-link:hover,
.tfo-hardware-buttons > .tfo-pricing-enquiry-link:focus {
	color: var(--e-global-color-accent, #ff7d03);
	text-decoration: underline;
}

/* A little breathing room between the solid button and the text link, on top of
 * the row's own gap -- they are different weights, so the same spacing that
 * works between two buttons reads as too tight here. */
.tfo-hardware-buttons > .elementor-widget-button + .tfo-pricing-factsheet-link,
.tfo-hardware-buttons > .elementor-widget-button + .tfo-pricing-enquiry-link {
	margin-left: 0.5rem;
}

/* --- Enquire Now, hovered -----------------------------------------------
 * The label stays white on hover, whatever the btn-angle-sweep animation
 * sweeps across the button behind it.
 *
 * `!important` is deliberate here, and narrow. Elementor writes per-widget
 * hover colours into the page's own generated stylesheet, which loads after
 * this file and can be keyed on an `elementor-element-xxxxxxx` class -- there
 * is no specificity a plugin stylesheet can reach that reliably outranks all of
 * those. The selector is scoped to `.elementor-button.tfo-pricing-enquiry-link`
 * so it can only ever touch this one button, and never the plain-link style,
 * which has no `.elementor-button` class and would be invisible in white.
 *
 * The two inner spans are listed as well as the anchor: colour is inherited, so
 * the anchor alone is enough only when nothing sets a colour on the spans, and
 * Elementor sometimes does.
 * ----------------------------------------------------------------------- */

a.elementor-button.tfo-pricing-enquiry-link:hover,
a.elementor-button.tfo-pricing-enquiry-link:focus,
a.elementor-button.tfo-pricing-enquiry-link:active,
a.elementor-button.tfo-pricing-enquiry-link:hover .elementor-button-text,
a.elementor-button.tfo-pricing-enquiry-link:focus .elementor-button-text,
a.elementor-button.tfo-pricing-enquiry-link:active .elementor-button-text,
a.elementor-button.tfo-pricing-enquiry-link:hover .elementor-button-icon,
a.elementor-button.tfo-pricing-enquiry-link:focus .elementor-button-icon,
a.elementor-button.tfo-pricing-enquiry-link:hover .elementor-button-icon i,
a.elementor-button.tfo-pricing-enquiry-link:focus .elementor-button-icon i {
	color: #fff !important;
}

/* --- Enquiry modal ------------------------------------------------------
 * The download form asks for four things; this one asks for six plus a
 * message, so it gets a wider dialog and a two-column layout above 576px --
 * that comes from the Bootstrap grid classes in templates/enquiry-form.php.
 * ----------------------------------------------------------------------- */

@media (min-width: 576px) {
	.tfo-enquiry-modal .modal-dialog {
		max-width: 620px;
	}
}

.tfo-enquiry-modal .tfo-enq-intro {
	margin-top: 0;
}

.tfo-enquiry-modal .modal-title {
	color: var(--e-global-color-primary, #21004a);
	font-weight: 500;
	letter-spacing: -0.5px;
}

/* The Submit button is floated, so the modal body needs something to clear it
 * or it collapses around the button. This replaced the terms line that used to
 * do that job, removed in 1.6.3. */
.tfo-enquiry-modal .tfo-enq-clear {
	clear: both;
	height: 1.5rem;
}

.tfo-enquiry-modal .tfo-enq-captcha {
	display: flex;
	justify-content: center;
}

/* reCAPTCHA renders at a fixed 304px. On a narrow phone that is wider than the
 * modal body, so it is scaled down rather than allowed to force a sideways
 * scroll. */
@media (max-width: 400px) {
	.tfo-enquiry-modal .tfo-enq-captcha {
		transform: scale(0.85);
		transform-origin: center top;
	}
}