/**
 * Fort Theme - third-party integrations.
 *
 * Styles for embeds the theme does not own (Trustindex reviews, Fluent Forms) so they follow the
 * brand tokens. Loaded after theme.css (see inc/enqueue.php). No !important: the selectors win on
 * specificity against the vendors' own generated CSS.
 */

/* Trustindex Google reviews
   --------------------------------------------------------------------------
   The embed is an Elementor HTML widget: <div class="fort-reviews"><script src="cdn.trustindex.io/loader.js?..."></script></div>.
   The loader injects .ti-widget as siblings of the script, inside .fort-reviews. Contain it to the
   header content column (same max width and side padding as .fort-header__inner) so review cards are
   never cut off at the screen edges; the side padding doubles as the gutter the arrows sit in. */

.fort-reviews {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--fort-header-max);
	margin-inline: auto;
	padding-inline: var(--fort-header-pad-inline);
	overflow-x: clip;
}

.fort-reviews .ti-widget {
	max-width: 100%;
	margin-inline: auto;
}

/* Arrows: sit in the side gutter instead of over the review text. */
.fort-reviews .ti-widget .ti-controls .ti-prev,
.fort-reviews .ti-widget .ti-controls .ti-arrow-prev {
	left: calc(var(--fort-header-pad-inline) * -1 + var(--fort-space-1));
}

.fort-reviews .ti-widget .ti-controls .ti-next,
.fort-reviews .ti-widget .ti-controls .ti-arrow-next {
	right: calc(var(--fort-header-pad-inline) * -1 + var(--fort-space-1));
}

/* Phone gutter (24px) is too narrow for an arrow; the slider is swipeable, so drop them. */
@media (max-width: 640px) {
	.fort-reviews .ti-widget .ti-controls .ti-prev,
	.fort-reviews .ti-widget .ti-controls .ti-next,
	.fort-reviews .ti-widget .ti-controls .ti-arrow-prev,
	.fort-reviews .ti-widget .ti-controls .ti-arrow-next {
		display: none;
	}
}

/* Fluent Forms
   --------------------------------------------------------------------------
   Fluent paints the submit button from CSS it generates per form:
     default style : form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)   (0,3,1)  -> var(--fluentform-primary), #1a7efb
     custom style  : form.fluent_form_N .wpf_has_custom_css.ff-btn-submit      (0,3,1)  -> per-form colours
     elementor widget: .elementor-N .elementor-element.elementor-element-X .fluentform-widget-wrapper .ff-el-group .ff-btn-submit
                       (0,6,0) -> #1a7efb, the Fluent Elementor widget DEFAULT (fluentform FluentFormWidget.php:2207),
                       emitted on every page even when unset. :is(body, <widget wrapper>) lifts ours to (0,6,2) without
                       !important and still matches forms rendered outside Elementor (body).
   The rules below are (0,6,2) / (0,7,2), so they win without !important. They apply to every
   Fluent button style, including "no_style" buttons (forms 18, 19, 22). */

body .fluentform {
	--fluentform-primary: var(--fort-red);
}

:is(body, .elementor-widget-fluent-form-widget .fluentform-widget-wrapper) .fluentform form.frm-fluent-form button.ff-btn-submit.ff-btn,
:is(body, .elementor-widget-fluent-form-widget .fluentform-widget-wrapper) .fluentform form.frm-fluent-form button.ff-btn-next.ff-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 16px 30px;
	font-family: var(--fort-font-label);
	font-size: var(--fort-fs-button);
	font-weight: var(--fort-fw-semibold);
	line-height: 1;
	letter-spacing: var(--fort-tracking-nav);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--fort-white);
	background-color: var(--fort-red);
	border: 1.5px solid transparent;
	border-radius: var(--fort-radius-button);
	box-shadow: none;
	cursor: pointer;
	transition: opacity var(--fort-duration-base) var(--fort-ease), background-color var(--fort-duration-base) var(--fort-ease);
}

:is(body, .elementor-widget-fluent-form-widget .fluentform-widget-wrapper) .fluentform form.frm-fluent-form button.ff-btn-submit.ff-btn:hover,
:is(body, .elementor-widget-fluent-form-widget .fluentform-widget-wrapper) .fluentform form.frm-fluent-form button.ff-btn-next.ff-btn:hover {
	color: var(--fort-white);
	background-color: var(--fort-red);
	border-color: transparent;
	opacity: 0.85;
}

:is(body, .elementor-widget-fluent-form-widget .fluentform-widget-wrapper) .fluentform form.frm-fluent-form button.ff-btn-submit.ff-btn:focus-visible,
:is(body, .elementor-widget-fluent-form-widget .fluentform-widget-wrapper) .fluentform form.frm-fluent-form button.ff-btn-next.ff-btn:focus-visible {
	color: var(--fort-white);
	background-color: var(--fort-red);
	outline: 3px solid var(--fort-blue);
	outline-offset: 3px;
	opacity: 1;
}

:is(body, .elementor-widget-fluent-form-widget .fluentform-widget-wrapper) .fluentform form.frm-fluent-form button.ff-btn-submit.ff-btn:disabled,
:is(body, .elementor-widget-fluent-form-widget .fluentform-widget-wrapper) .fluentform form.frm-fluent-form button.ff-btn-submit.ff-btn.disabled,
:is(body, .elementor-widget-fluent-form-widget .fluentform-widget-wrapper) .fluentform form.frm-fluent-form button.ff-btn-submit.ff-btn:disabled:hover {
	color: var(--fort-white);
	background-color: var(--fort-red);
	opacity: 0.55;
	cursor: not-allowed;
}

/* Loading: Fluent adds .ff-working and draws its own progress bar across the bottom edge. */
:is(body, .elementor-widget-fluent-form-widget .fluentform-widget-wrapper) .fluentform form.frm-fluent-form button.ff-btn-submit.ff-btn.ff-working {
	position: relative;
	overflow: hidden;
	opacity: 0.85;
	cursor: progress;
}

/* Input focus ring in the brand colour (theme.css keeps the neutral base field style). */
.fluentform form.frm-fluent-form .ff-el-form-control:focus,
.fluentform form.frm-fluent-form .ff-el-form-control:focus-visible {
	border-color: var(--fort-red);
	outline: none;
	box-shadow: 0 0 0 3px rgb(166 50 50 / 25%);
}