/* Thumbnails */
.sf24-stories-thumbs{ display:flex; gap:12px; align-items:flex-start; overflow-x:auto; padding:8px 6px; margin-bottom:12px; }
.sf24-thumb{ position:relative; width:72px; height:92px; background:transparent; border:0; padding:0; cursor:pointer; text-align:center; flex:0 0 auto; }
.sf24-thumb-ring{ position:absolute; left:0; top:0; width:72px; height:72px; border-radius:50%; background: linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); }
.sf24-thumb-img{ position:absolute; left:2px; top:2px; width:68px; height:68px; border-radius:50%; background-image: var(--bg); background-size:cover; background-position:center; background-color:#222; }
.sf24-thumb-title{ position:absolute; left:0; right:0; top:76px; font-size:12px; color:#444; max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Viewer */
.sf24-viewer{ position:fixed; inset:0; z-index:9999; display:none !important; }
.sf24-viewer.is-open{ display:block !important; }
.sf24-viewer-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.7); }
.sf24-viewer-inner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.sf24-viewer-close{ position:absolute; top:12px; right:12px; z-index:10; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; background:#fff; color:#111; font-size:28px; line-height:38px; box-shadow:0 8px 24px rgba(0,0,0,.25); }

.sf24-stories{ position: relative; width:100%; max-width:480px; margin:0 auto; aspect-ratio:9/16; overflow:hidden; border-radius:14px; background:#111; user-select:none; touch-action: pan-y; }
@media (min-width:768px){ .sf24-stories{ max-width:600px; } }
@media (min-width:1024px){ .sf24-stories{ max-width:480px; } }
.sf24-viewer .sf24-stories{ max-height:90vh; }

.sf24-story{ position:absolute; inset:0; background-size:cover; background-position:center; background-image:var(--bg); display:flex; align-items:flex-end; justify-content:space-between; opacity:0; }
.sf24-anim-fade .sf24-story{ transition:opacity .35s ease; }
.sf24-anim-fade .sf24-story.is-active{ opacity:1; }
.sf24-anim-slide .sf24-story{ transform:translateX(20%); transition: transform .35s ease, opacity .35s ease; }
.sf24-anim-slide .sf24-story.is-active{ opacity:1; transform:translateX(0); }

.sf24-caption{ position:relative; z-index:2; color:#fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); width:100%; padding:40px 16px 16px; font-weight:600; }

/* Media inside */
.sf24-video,.sf24-embed{ position:absolute; inset:0; width:100%; height:100%; }
.sf24-video{ object-fit: cover; } /* Instagram-like */
.sf24-embed{ background:#000; }

/* Click zones */
.sf24-nextzone,.sf24-prevzone{ position:absolute; top:0; bottom:0; width:34%; background:transparent; border:0; cursor:pointer; }
.sf24-nextzone{ right:0; } .sf24-prevzone{ left:0; }

/* Sticker */
.sf24-sticker{ position:absolute; z-index:3; font-weight:800; text-transform:uppercase; padding:8px 14px; border-radius:999px; text-decoration:none; box-shadow:0 4px 18px rgba(0,0,0,.25); }
.sf24-pos-tr{ top:14px; right:14px; } .sf24-pos-tl{ top:14px; left:14px; } .sf24-pos-br{ bottom:14px; right:14px; } .sf24-pos-bl{ bottom:14px; left:14px; }
.sf24-pos-tc{ top:14px; left:50%; transform:translateX(-50%); } .sf24-pos-bc{ bottom:14px; left:50%; transform:translateX(-50%); }
.sf24-style-solid{ background:#fff; color:#111; } .sf24-style-ig{ color:#fff; background: linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); }
.sf24-style-sf24{ background:#551e70; color:#fff; } .sf24-style-sf24:hover{ background:#7a33a8; }
.sf24-style-custom{ background: var(--sf24-sticker-bg, #551e70); color: var(--sf24-sticker-fg, #fff); }
.sf24-style-custom:hover{ filter:brightness(1.05); }

/* Progress */
.sf24-progress{ position:absolute; left:10px; right:10px; top:10px; height:3px; background:rgba(255,255,255,.35); border-radius:3px; overflow:hidden; z-index:4; }
.sf24-progress>span{ display:block; height:100%; width:0%; background:#fff; transition: width linear; }
.sf24-prog-segments .sf24-progress{ display:none; }
.sf24-progress-multi{ position:absolute; left:10px; right:10px; top:10px; display:flex; gap:6px; z-index:4; }
.sf24-progress-multi .seg{ flex:1; height:3px; background:rgba(255,255,255,.35); overflow:hidden; border-radius:3px; }
.sf24-progress-multi .seg i{ display:block; height:100%; width:0%; background:#fff;  }
.sf24-progress-multi .seg.is-complete i{ width:100%; }
.sf24-progress-multi .seg.is-active i{ }

@keyframes sf24seg {
  from { width: 0%; }
  to   { width: 100%; }
}
button.sf24-viewer-close {
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover{
        color: #190921;
    }
}

button.sf24-thumb:hover,button.sf24-thumb:focus,button.sf24-prevzone:hover,button.sf24-nextzone:hover,button.sf24-nextzone:focus,button.sf24-prevzone:focus {
   background-color: unset !important;
}