/* Flashbooks Interactive Steps — front-end
   Everything is scoped under .fbs-root so it won't collide with the theme/Elementor.
   Colors come from inline CSS vars set by the shortcode. */

.fbs-root{
	--fbs-primary:#0B2C5C;--fbs-bright:#1B6DE0;--fbs-accent:#FFC629;
	--fbs-ink:#0A1A2F;--fbs-surface:#fff;--fbs-wash:#EEF4FF;
	--fbs-radius:18px;
	max-width:1120px;margin-inline:auto;padding:8px 16px;
	color:var(--fbs-ink);
	font-family:inherit;
	-webkit-font-smoothing:antialiased;
}
.fbs-root *{box-sizing:border-box;}
/* inherit the site's fonts — never impose our own */
.fbs-root,
.fbs-root h2,.fbs-root h3,.fbs-root h4,
.fbs-root p,.fbs-root span,.fbs-root button{font-family:inherit;}

/* neutralise theme/Elementor <button> styling that would otherwise paint
   each step node as a coloured box (background, border, padding, etc.) */
.fbs-root button.fbs-node{
	-webkit-appearance:none;appearance:none;
	background:transparent!important;background-image:none!important;
	border:0!important;border-radius:0!important;box-shadow:none!important;
	padding:0!important;margin:0!important;
	width:auto!important;height:auto!important;min-height:0!important;
	text-transform:none!important;letter-spacing:normal!important;line-height:normal!important;
}
.fbs-root button.fbs-node:hover,
.fbs-root button.fbs-node:focus,
.fbs-root button.fbs-node:active{background:transparent!important;box-shadow:none!important;}

/* ---- header ---- */
.fbs-head{text-align:center;max-width:1120px;margin:0 auto 44px;}
.fbs-title{
	font-size:clamp(1.7rem,1rem + 2.4vw,46px);
	line-height:1.12;font-weight:800;letter-spacing:-.02em;
	color:var(--fbs-primary);margin:0 0 12px;
}
.fbs-sub{font-size:1.05rem;line-height:1.55;color:#46566b;margin:0;}

/* =========================================================
   STYLE A — floating cards
   ========================================================= */
.fbs-cards{
	position:relative;display:grid;gap:24px;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	align-items:stretch;
}
/* the animated "current" connecting the cards */
.fbs-track{
	position:absolute;top:84px;left:8%;right:8%;height:3px;border-radius:3px;z-index:0;
	background:linear-gradient(90deg,
		color-mix(in srgb,var(--fbs-bright) 35%,transparent),
		color-mix(in srgb,var(--fbs-bright) 60%,transparent),
		color-mix(in srgb,var(--fbs-accent) 65%,transparent));
	transform:scaleX(0);transform-origin:left center;
	transition:transform 1s cubic-bezier(.2,.7,.2,1) .15s;
}
.fbs-track::before{ /* moving dashes along the line */
	content:"";position:absolute;inset:0;border-radius:3px;
	background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 18px);
	background-size:200% 100%;mix-blend-mode:overlay;opacity:.55;
	animation:fbs-flow 1.1s linear infinite;
}
.fbs-track::after{ /* glowing pulse that travels step 1 → 3 */
	content:"";position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;
	transform:translate(-50%,-50%);opacity:0;
	background:radial-gradient(circle,var(--fbs-accent) 0 40%,transparent 70%);
	box-shadow:0 0 12px 3px color-mix(in srgb,var(--fbs-accent) 70%,transparent);
	animation:fbs-comet 2.8s ease-in-out infinite;
}
[data-fbs-reveal].is-in .fbs-track{transform:scaleX(1);}
[data-fbs-reveal].is-in .fbs-track::after{opacity:1;}
@media(max-width:760px){.fbs-track{display:none;}}

.fbs-card{
	position:relative;z-index:1;
	background:var(--fbs-surface);
	border:1px solid color-mix(in srgb,var(--fbs-primary) 10%,transparent);
	border-radius:var(--fbs-radius);
	padding:32px 26px 28px;
	box-shadow:0 1px 2px rgba(11,44,92,.06),0 18px 40px -28px rgba(11,44,92,.45);
	text-align:center;
	opacity:0;transform:translateY(22px);
	transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s ease;
	transition-delay:var(--fbs-delay,0ms);
}
[data-fbs-reveal].is-in .fbs-card{opacity:1;transform:none;}

/* hover: lift, glow, accent border, icon pop */
[data-fbs-reveal].is-in .fbs-card:hover,
[data-fbs-reveal].is-in .fbs-card:focus-within{
	transform:translateY(-8px);transition-delay:0s;
	border-color:color-mix(in srgb,var(--fbs-bright) 45%,transparent);
	box-shadow:0 1px 2px rgba(11,44,92,.06),0 30px 54px -24px rgba(11,44,92,.55);
}
.fbs-card:hover .fbs-icon{transform:scale(1.08);}
.fbs-card:hover .fbs-step-no{color:var(--fbs-bright);}
.fbs-card:hover .fbs-card-title{color:var(--fbs-bright);}

.fbs-step-no{
	position:absolute;top:16px;right:18px;
	font-size:.78rem;font-weight:800;letter-spacing:.08em;
	color:var(--fbs-accent);transition:color .3s ease;
}
.fbs-icon{
	width:96px;height:96px;margin:0 auto 18px;color:var(--fbs-primary);
	transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.fbs-icon svg{width:100%;height:100%;display:block;}
.fbs-card-title{font-size:1.2rem;font-weight:750;color:var(--fbs-primary);margin:0 0 8px;transition:color .3s ease;}
.fbs-card-text{font-size:.96rem;line-height:1.55;color:#516074;margin:0;}

/* gentle bob, like the about-us mascot */
.fbs-float{animation:fbs-bob 4s ease-in-out infinite;}
.fbs-card:nth-child(3) .fbs-float{animation-delay:.6s;}
.fbs-card:nth-child(4) .fbs-float{animation-delay:1.2s;}

/* =========================================================
   STYLE B — interactive stepper
   ========================================================= */
.fbs-stepper{position:relative;}
.fbs-rail{
	position:absolute;top:26px;left:6%;right:6%;height:4px;border-radius:3px;
	background:var(--fbs-wash);
}
.fbs-rail-fill{
	position:relative;display:block;height:100%;width:0;border-radius:3px;
	background:linear-gradient(90deg,var(--fbs-bright),var(--fbs-accent));
	transition:width .55s cubic-bezier(.4,0,.2,1);
}
.fbs-rail-fill::after{ /* glowing head docked at the active node */
	content:"";position:absolute;right:0;top:50%;width:13px;height:13px;border-radius:50%;
	transform:translate(50%,-50%);background:var(--fbs-accent);
	box-shadow:0 0 10px 2px color-mix(in srgb,var(--fbs-accent) 75%,transparent);
	animation:fbs-pulse 1.6s ease-in-out infinite;
}
@media(max-width:760px){.fbs-rail{display:none;}}

.fbs-nodes{
	position:relative;display:flex;gap:12px;justify-content:space-between;
	margin-bottom:28px;
}
@media(max-width:760px){.fbs-nodes{flex-direction:column;}}

.fbs-node{
	flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;
	background:none;border:0;cursor:pointer;padding:0;font:inherit;color:inherit;
	text-align:center;
}
.fbs-node-dot{
	position:relative;
	width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
	background:var(--fbs-surface);border:3px solid var(--fbs-wash);
	font-weight:800;font-size:1.05rem;color:#9aa7ba;
	transition:transform .35s,border-color .35s,background .35s,color .35s,box-shadow .35s;
}
.fbs-node.is-active .fbs-node-dot::after{
	content:"";position:absolute;inset:-5px;border-radius:50%;
	border:2px solid var(--fbs-bright);opacity:0;
	animation:fbs-ring 1.8s ease-out infinite;
}
.fbs-node:hover .fbs-node-dot{border-color:var(--fbs-bright);color:var(--fbs-bright);transform:scale(1.06);}
.fbs-node-label{font-size:.92rem;font-weight:650;color:#6a7891;transition:color .3s;max-width:16ch;}
.fbs-node.is-active .fbs-node-dot{
	background:var(--fbs-primary);border-color:var(--fbs-primary);color:#fff;
	transform:scale(1.1);box-shadow:0 10px 24px -8px color-mix(in srgb,var(--fbs-primary) 60%,transparent);
}
.fbs-node.is-active .fbs-node-label{color:var(--fbs-primary);}
.fbs-node:focus-visible{outline:none;}
.fbs-node:focus-visible .fbs-node-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--fbs-bright) 45%,transparent);}

.fbs-panels{
	background:var(--fbs-wash);border-radius:var(--fbs-radius);
	padding:34px 32px;min-height:160px;
}
.fbs-panel{display:flex;gap:26px;align-items:center;}
@media(max-width:560px){.fbs-panel{flex-direction:column;text-align:center;gap:14px;}}
.fbs-panel[hidden]{display:none;}
.fbs-panel{animation:fbs-fade .45s ease both;}
.fbs-panel-icon{flex:0 0 110px;width:110px;height:110px;color:var(--fbs-primary);}
.fbs-panel-icon svg{width:100%;height:100%;}
.fbs-panel-body h3{margin:0 0 8px;font-size:1.35rem;font-weight:780;color:var(--fbs-primary);}
.fbs-panel-body p{margin:0;font-size:1.02rem;line-height:1.6;color:#48566b;}

.fbs-divider{border:0;border-top:1px dashed color-mix(in srgb,var(--fbs-primary) 20%,transparent);margin:56px 0;}

/* =========================================================
   icon micro-animations
   ========================================================= */
.fbs-ic--upload .fbs-arrow{animation:fbs-up 2.4s ease-in-out infinite;}
.fbs-ic--process .fbs-gear--lg{animation:fbs-spin 6s linear infinite;transform-origin:38px 40px;}
.fbs-ic--process .fbs-gear--sm{animation:fbs-spin-rev 4s linear infinite;transform-origin:64px 64px;}
.fbs-ic--report .fbs-bar{animation:fbs-grow 2.6s ease-in-out infinite;transform-origin:bottom;}
.fbs-ic--report .fbs-bar--2{animation-delay:.2s;}
.fbs-ic--report .fbs-bar--3{animation-delay:.4s;}
.fbs-ic--report .fbs-trend{stroke-dasharray:60;stroke-dashoffset:60;animation:fbs-draw 2.6s ease-in-out infinite;}
.fbs-ic--bolt{animation:fbs-flash 2.2s ease-in-out infinite;transform-origin:48px 48px;}
.fbs-ic--doc .fbs-page--back{animation:fbs-bob 3.4s ease-in-out infinite;}
.fbs-ic--shield .fbs-check{stroke-dasharray:40;stroke-dashoffset:40;animation:fbs-draw 3s ease-in-out infinite;}

/* =========================================================
   keyframes
   ========================================================= */
@keyframes fbs-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes fbs-flow{to{background-position:200% 0}}
@keyframes fbs-spin{to{transform:rotate(360deg)}}
@keyframes fbs-spin-rev{to{transform:rotate(-360deg)}}
@keyframes fbs-up{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes fbs-grow{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(1)}}
@keyframes fbs-draw{0%{stroke-dashoffset:60}45%,55%{stroke-dashoffset:0}100%{stroke-dashoffset:60}}
@keyframes fbs-flash{0%,92%,100%{filter:none;transform:scale(1)}94%{filter:drop-shadow(0 0 6px var(--fbs-accent));transform:scale(1.06)}}
@keyframes fbs-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fbs-comet{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes fbs-pulse{0%,100%{box-shadow:0 0 8px 2px color-mix(in srgb,var(--fbs-accent) 55%,transparent)}50%{box-shadow:0 0 14px 5px color-mix(in srgb,var(--fbs-accent) 80%,transparent)}}
@keyframes fbs-ring{0%{transform:scale(.85);opacity:.65}100%{transform:scale(1.5);opacity:0}}

/* respect reduced motion */
@media(prefers-reduced-motion:reduce){
	.fbs-root *,.fbs-root *::before,.fbs-root *::after{
		animation:none!important;transition:none!important;
	}
	.fbs-card{opacity:1;transform:none;}
	.fbs-track{transform:scaleX(1);}
	.fbs-ic--report .fbs-trend,.fbs-ic--shield .fbs-check{stroke-dashoffset:0;}
}