/* ── Base container ─────────────────────────────────────────── */
.svf-flags{--svf-size:48px;--svf-cols:6;--svf-gap:8px;--svf-duration:400ms;--svf-ticker-duration:20s;gap:var(--svf-gap);max-width:100%;overflow:visible!important}

/* ── Static layouts ─────────────────────────────────────────── */
.svf-layout-row{display:flex;flex-wrap:wrap}
.svf-layout-grid{display:grid;grid-template-columns:repeat(var(--svf-cols),minmax(0,var(--svf-size)))}
.svf-align-left{justify-content:flex-start;justify-items:start}
.svf-align-center{justify-content:center;justify-items:center}
.svf-align-right{justify-content:flex-end;justify-items:end}

/* ── Individual flag ────────────────────────────────────────── */
.svf-flag{display:flex;flex-direction:column;align-items:center}
.svf-flag__img{width:100%;max-width:var(--svf-size,48px);height:auto;display:block}
.svf-flag__caption{margin-top:6px;font-size:12px;line-height:1.2;text-align:center;max-width:calc(var(--svf-size) * 1.6);color:var(--svf-text-color,currentColor)}

/* ── Entrance animations ────────────────────────────────────── */
.svf-has-anim .svf-flag{opacity:0;transform:translateY(10px);transition-property:opacity,transform;transition-duration:var(--svf-duration);transition-timing-function:ease}
.svf-has-anim.svf-anim-fade .svf-flag{transform:none}
.svf-has-anim.svf-anim-slide-left .svf-flag{transform:translateX(-16px)}
.svf-has-anim.svf-anim-slide-right .svf-flag{transform:translateX(16px)}
.svf-has-anim.svf-anim-slide-up .svf-flag{transform:translateY(16px)}
.svf-has-anim.svf-anim-slide-down .svf-flag{transform:translateY(-16px)}
.svf-has-anim.svf-anim-zoom .svf-flag{transform:scale(.9)}
.svf-has-anim.svf-visible .svf-flag{opacity:1;transform:none}

/* ── Ticker / continuous scroller ───────────────────────────── */
.svf-mode-ticker{overflow:hidden!important;width:100%}
.svf-mode-ticker .svf-ticker__track{display:flex;gap:0;will-change:transform;transform:translate3d(0,0,0)}
.svf-mode-ticker .svf-ticker__group{display:flex;gap:var(--svf-gap);align-items:center;flex:0 0 auto;min-width:max-content}
.svf-mode-ticker.svf-ticker-dir-left .svf-ticker__group,.svf-mode-ticker.svf-ticker-dir-right .svf-ticker__group{padding-right:var(--svf-gap)}
.svf-mode-ticker.svf-ticker-dir-up .svf-ticker__group,.svf-mode-ticker.svf-ticker-dir-down .svf-ticker__group{padding-bottom:var(--svf-gap)}
.svf-mode-ticker .svf-flag{width:var(--svf-size);min-width:var(--svf-size);flex:0 0 auto}
.svf-mode-ticker .svf-flag__caption{max-width:var(--svf-size);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* JS-driven ticker disables the CSS animation; CSS keyframes are the no-JS fallback */
.svf-ticker-js .svf-ticker__track{animation:none!important}
.svf-mode-ticker.svf-ticker-dir-left .svf-ticker__track{animation:svf-ticker-left var(--svf-ticker-duration) linear infinite}
.svf-mode-ticker.svf-ticker-dir-right .svf-ticker__track{animation:svf-ticker-right var(--svf-ticker-duration) linear infinite}
.svf-mode-ticker.svf-ticker-dir-up,.svf-mode-ticker.svf-ticker-dir-down{height:calc(var(--svf-size) + 32px)}
.svf-mode-ticker.svf-ticker-dir-up .svf-ticker__track,.svf-mode-ticker.svf-ticker-dir-down .svf-ticker__track{flex-direction:column}
.svf-mode-ticker.svf-ticker-dir-up .svf-ticker__group,.svf-mode-ticker.svf-ticker-dir-down .svf-ticker__group{flex-direction:column;min-width:0;min-height:max-content}
.svf-mode-ticker.svf-ticker-dir-up .svf-ticker__track{animation:svf-ticker-up var(--svf-ticker-duration) linear infinite}
.svf-mode-ticker.svf-ticker-dir-down .svf-ticker__track{animation:svf-ticker-down var(--svf-ticker-duration) linear infinite}

/* translate3d promotes the track to its own GPU compositor layer */
@keyframes svf-ticker-left{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes svf-ticker-right{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes svf-ticker-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes svf-ticker-down{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}

/* ── Ticker edge fade ───────────────────────────────────────── */
.svf-mode-ticker.svf-ticker-edge-fade{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.svf-mode-ticker.svf-ticker-edge-fade.svf-ticker-dir-up,.svf-mode-ticker.svf-ticker-edge-fade.svf-ticker-dir-down{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%)}

/* ── Ticker bounce ──────────────────────────────────────────── */
@keyframes svf-flag-bounce{0%,100%{transform:translateY(0)}25%{transform:translateY(-6px)}50%{transform:translateY(0)}75%{transform:translateY(-3px)}}
.svf-mode-ticker.svf-ticker-bounce{padding-top:6px}
.svf-mode-ticker.svf-ticker-bounce .svf-ticker__group .svf-flag{animation:svf-flag-bounce 1.6s ease-in-out infinite}
.svf-mode-ticker.svf-ticker-bounce .svf-ticker__group .svf-flag:nth-child(even){animation-delay:.8s}

/* ── Tooltip ────────────────────────────────────────────────── */
.svf-flag[data-svf-tooltip]{position:relative;min-height:var(--svf-size);padding-bottom:22px}
.svf-flag[data-svf-tooltip]::after{content:attr(data-svf-tooltip);position:absolute;left:50%;top:calc(var(--svf-size) + 8px);transform:translateX(-50%);background:#111;color:var(--svf-text-color,#fff);padding:4px 6px;border-radius:4px;font-size:12px;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:9999}
.svf-flag[data-svf-tooltip]:hover::after{opacity:1}
.svf-flag[data-svf-tooltip]:focus-within::after{opacity:1}
.svf-flag[data-svf-tooltip]:focus-within{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}

/* ── Accessibility ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){.svf-mode-ticker .svf-ticker__track{animation:none}}
