/**
 * WPBakery “Help float box” (si_help_float)
 *
 * Place inside any column in the hero row. Row extra class: hero-2026 help-float-row
 * The card is anchored to the bottom-right of that row (not the column edge).
 */

.site-main .vc_row.wpb_row.help-float-row,
.site-main .vc_row.wpb_row.hero-2026 {
	position: relative;
}

/* Hidden until JS moves the wrap onto the row (prevents jump from column flow → row anchor). */
.help-float-wrap:not(.is-anchored) {
	visibility: hidden;
}

.help-float-wrap.is-anchored {
	visibility: visible;
}

@media (scripting: none) {
	.help-float-wrap:not(.is-anchored) {
		visibility: visible;
	}
}

/*
 * Pin to the row’s bottom-right. Do NOT collapse/reposition the hosting column
 * (that breaks layout when the float lives in the same column as hero copy).
 */
.site-main .vc_row.wpb_row.help-float-row .help-float-wrap,
.site-main .vc_row.wpb_row.hero-2026 .help-float-wrap {
	position: absolute;
	right: clamp(1rem, 4vw, 5.5rem);
	bottom: clamp(1.25rem, 4vh, 4.2rem);
	left: auto;
	top: auto;
	z-index: 2;
	pointer-events: none;
}

/* Keep positioning context on the row, not intermediate WPB wrappers */
.site-main .vc_row.wpb_row.help-float-row .wpb_column:has(.help-float-wrap) .vc_column-inner,
.site-main .vc_row.wpb_row.help-float-row .wpb_column:has(.help-float-wrap) .wpb_wrapper,
.site-main .vc_row.wpb_row.hero-2026 .wpb_column:has(.help-float-wrap) .vc_column-inner,
.site-main .vc_row.wpb_row.hero-2026 .wpb_column:has(.help-float-wrap) .wpb_wrapper {
	position: static;
	transform: none;
}

.help-float-wrap .help-float {
	pointer-events: auto;
}

.help-float {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 0.7rem 0.62rem 0.7rem 1.44rem;

	border-radius: 0.9rem;
	background: rgba(43, 45, 99, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.35),
		0 24px 64px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);

	color: #fff;
	text-decoration: none;
	text-align: left;
	transform: translateY(0);
	transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
	will-change: transform;
}

/* Fixed to viewport (element setting: Position → viewport) */
.help-float--viewport {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 9999;
	width: min(22rem, calc(100vw - 2.5rem));
	max-width: 100%;
}

.help-float:hover,
.help-float:focus-visible {
	transform: translateY(-6px);
	background: #fff;
	border-color: rgba(255, 255, 255, 0.35);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.35),
		0 12px 40px rgba(255, 255, 255, 0.35),
		0 18px 48px rgba(0, 0, 0, 0.12);
	outline: none;
	color: var(--color-blue-darkest);
}

.help-float:hover .help-float__dot,
.help-float:focus-visible .help-float__dot {
	background-color: var(--color-blue-darkest);
}

.help-float:hover .help-float__eyebrow,
.help-float:focus-visible .help-float__eyebrow {
	opacity: 0.75;
}

.help-float:hover .help-float__body,
.help-float:focus-visible .help-float__body {
	opacity: 0.85;
}

.help-float__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.help-float__text-col {
	flex: 1;
	min-width: 0;
}

.help-float__eyebrow-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.35rem;
}

.help-float__dot {
	flex-shrink: 0;
	width: 0.28rem;
	height: 0.28rem;
	border-radius: 50%;
	background-color: var(--color-white);
}

.help-float__eyebrow {
	display: inline-block;
	font-size: 0.625rem;
	font-weight: 400;
	line-height: 140%;
	/* 0.875rem */
	letter-spacing: 0.0125rem;
}

.help-float__title {
	display: block;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.25;
	margin-bottom: 0.2rem;
}

.help-float__body {
	display: block;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.25;
	margin-bottom: 0.2rem;
}

.help-float__img-wrap {
	flex-shrink: 0;
	width: 4.75rem;
	height: 4.75rem;
	border-radius: 0.6rem;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
}

.help-float__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 575.98px) {

	.site-main .vc_row.wpb_row.help-float-row .help-float-wrap,
	.site-main .vc_row.wpb_row.hero-2026 .help-float-wrap {
		right: 3%;
        bottom: 0.75rem;
        width: 94%;
	}

	.help-float {
		padding: 0.75rem 0.875rem;
	}

	.help-float--viewport {
		right: 0.75rem;
		bottom: 0.75rem;
		width: min(20rem, calc(100vw - 1.5rem));
	}

	.help-float__img-wrap {
		width: 2.5rem;
		height: 2.5rem;
	}

	.help-float__title {
		font-size: 0.875rem;
		line-height: 1.225;
	}
	
	.help-float__body {
		font-size: 0.875rem;
		line-height: 1.225;
	}
}

@media (prefers-reduced-motion: reduce) {

	.help-float,
	.help-float:hover,
	.help-float:focus-visible {
		transition: none;
		transform: none;
	}
}