/* Public styles apply only to the shortcode and its own children. */
.fsp-stories[data-page]{
 --fsp-ring-color:#d83bff;--fsp-ring-seen-color:#00dcdb;--fsp-ring-width:6px;--fsp-ring-size:84px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 flex:0 0 auto!important;align-self:center;vertical-align:middle;
 width:fit-content!important;max-width:100%!important;min-width:0!important;
 height:auto!important;min-height:0!important;margin:0!important;padding:0!important;
 gap:4px;text-align:center;line-height:0;font-family:inherit;box-sizing:border-box;overflow:visible;
}
.fsp-stories[data-page][hidden],.fsp-stories[data-page] [hidden]{display:none!important}
.fsp-stories[data-page] *{box-sizing:border-box}
/* The visibility marker must never become another row, flex item or grid cell. */
span.fsp-observer[data-fsp-observer]{position:absolute!important;display:block!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden;opacity:0;pointer-events:none}
/* Only Elementor wrappers containing this shortcode alone lose their line box and outer spacing. */
[data-fsp-story-host]{display:flex!important;flex-direction:column;align-items:center;gap:0!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;line-height:0!important}
[data-fsp-story-host]>br{display:none!important}
.fsp-stories[data-page] .fsp-stories-heading{margin:0!important;padding:0!important;font-size:15px;font-weight:700;line-height:1.6;text-align:center;color:inherit;max-width:100%;overflow-wrap:anywhere}
.fsp-stories[data-page] .fsp-story{
 display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto!important;
 width:var(--fsp-ring-size)!important;height:var(--fsp-ring-size)!important;
 min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;
 gap:0;margin:0!important;padding:var(--fsp-ring-width)!important;border:0!important;border-radius:50%!important;
 background:var(--fsp-current-color)!important;color:inherit!important;font:inherit;line-height:0!important;
 cursor:pointer;
}
.fsp-stories[data-page] .fsp-story-ring{
 --fsp-current-color:var(--fsp-ring-color);
 outline:1px solid var(--fsp-current-color)!important;
 box-shadow:0 0 9px color-mix(in srgb,var(--fsp-current-color) 50%,transparent)!important;
 transition:transform .18s;
}
.fsp-stories[data-page] .fsp-story-ring img{
 display:block!important;max-width:none!important;
 width:calc(var(--fsp-ring-size) - 2 * var(--fsp-ring-width))!important;
 height:calc(var(--fsp-ring-size) - 2 * var(--fsp-ring-width))!important;
 min-width:0!important;min-height:0!important;object-fit:cover!important;
 border:2px solid white!important;border-radius:50%!important;
 background:#f3f5f9!important;margin:0!important;padding:0!important;
}
.fsp-stories[data-page] .fsp-story.fsp-seen{--fsp-current-color:var(--fsp-ring-seen-color);box-shadow:0 0 3px color-mix(in srgb,var(--fsp-current-color) 25%,transparent)!important;outline-color:color-mix(in srgb,var(--fsp-current-color) 45%,transparent)!important}
.fsp-stories[data-page] .fsp-story:hover{transform:scale(1.04);box-shadow:0 0 13px color-mix(in srgb,var(--fsp-current-color) 65%,transparent)!important}
.fsp-stories[data-page] .fsp-story.fsp-seen:hover{box-shadow:0 0 6px color-mix(in srgb,var(--fsp-current-color) 35%,transparent)!important}
.fsp-stories[data-page] .fsp-story:focus-visible{outline:2px solid #7e6ef2!important;outline-offset:4px}
.fsp-stories[data-page] .fsp-story:disabled{opacity:.65;cursor:wait}
.fsp-stories[data-page] .fsp-stories-error{margin:0!important;padding:0!important;font-size:12px;line-height:1.6;color:#b74759;max-width:100%;overflow-wrap:anywhere}
@media(max-width:600px){.fsp-stories[data-page]{--fsp-ring-size:72px}.fsp-stories[data-page] .fsp-stories-heading{font-size:14px}}
@media(prefers-reduced-motion:reduce){.fsp-stories[data-page] .fsp-story-ring{transition:none}}

/* Stabilize only the detected image-only column beside stories in a horizontal Elementor row. */
.e-con[data-fsp-story-image-column]{--align-self:flex-start;--justify-content:flex-start;align-self:flex-start!important;justify-content:flex-start!important;height:auto!important}
