/**
 * StoryFlow Pro — Public styles: circles, viewer, slide types.
 * Design tokens injected as CSS variables from settings.
 */

:root {
        --sfp-circle: 72px;
        --sfp-gap: 14px;
        --sfp-ring: #7c3aed;
        --sfp-grad-from: #7c3aed;
        --sfp-grad-via: #ec4899;
        --sfp-grad-to: #f97316;
        --sfp-seen-op: .3;
        --sfp-progress: #ffffff;
        --sfp-viewer-radius: 16px;
        --sfp-viewer-maxw: 420px;
        --sfp-ring-pad: 3px;
        --sfp-media-border-w: 2.5px;
        --sfp-media-border-c: #ffffff;
}

/* =========================================================
 * Story circles
 * =======================================================*/
.sfp-circles {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--sfp-gap);
        justify-content: center;
        padding: 10px 0;
        margin: 0 auto;
        max-width: 100%;
}
.sfp-circles--start { justify-content: flex-start; }
.sfp-circles--float-left,
.sfp-circles--float-right {
        position: fixed;
        inset-block-end: 22px;
        z-index: 999;
        flex-direction: column;
        max-width: var(--sfp-circle);
        margin: 0;
        padding: 6px;
        background: rgb(255 255 255 / 88%);
        backdrop-filter: blur(6px);
        border-radius: calc(var(--sfp-circle) / 2 + 8px);
        box-shadow: 0 10px 30px rgb(15 23 42 / 18%);
}
.sfp-circles--float-left { inset-inline-start: 16px; }
.sfp-circles--float-right { inset-inline-end: 16px; }

.sfp-circles__title {
        width: 100%;
        margin: 0 0 10px;
        font-size: 15px;
        font-weight: 700;
        text-align: inherit;
}

.sfp-circle {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        width: var(--sfp-circle);
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        font: inherit;
        -webkit-tap-highlight-color: transparent;
}
.sfp-circle,
.sfp-circle__ring,
.sfp-circle__media { box-sizing: border-box; }
.sfp-circle:focus-visible { outline: 3px solid var(--sfp-grad-via); outline-offset: 4px; border-radius: 50%; }

/* v1.5.1 — ONE circle per story.
 * The gradient disc is an absolutely-positioned ::before layer that spins
 * BEHIND the profile image; the photo itself is nested inside the ring and
 * pinned with inset, so it can never wrap below the ring or rotate with it.
 * Colored ring = new story · gray ring = seen story (.is-seen). */
.sfp-circle__ring {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        padding: var(--sfp-ring-pad);
        transition: transform .2s ease;
}
.sfp-circle__ring::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: conic-gradient(var(--sfp-grad-from), var(--sfp-grad-via), var(--sfp-grad-to), var(--sfp-grad-from));
        animation: sfp-spin 6s linear infinite;
}
@keyframes sfp-spin { to { transform: rotate(360deg); } }
@keyframes sfp-glow {
        from { box-shadow: 0 0 0 0 rgb(124 58 237 / 45%); }
        to { box-shadow: 0 0 0 10px rgb(124 58 237 / 0%); }
}
/* Solid ring: flat brand color instead of the spinning gradient. */
[data-ring-style="solid"] .sfp-circle__ring::before,
.sfp-circles[style*="--sfp-ring-style:solid"] .sfp-circle__ring::before {
        background: var(--sfp-ring);
        animation: none;
}
/* Glow ring: pulsing halo on the ring element while the disc keeps spinning. */
.sfp-circles[style*="--sfp-ring-style:glow"] .sfp-circle__ring {
        animation: sfp-glow 2.4s ease-in-out infinite alternate;
}
.sfp-circle__media {
        position: absolute;
        inset: var(--sfp-ring-pad);
        z-index: 1;
        border-radius: 50%;
        overflow: hidden;
        background: #e5e7eb;
        border: var(--sfp-media-border-w) solid var(--sfp-media-border-c);
}
.sfp-circle__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}
.sfp-circle__name {
        display: block;
        max-width: 100%;
        margin-block-start: 6px;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        color: #111827;
}
/* v1.6.0 — stronger "watched" contrast: darker two-tone gray ring + a
 * subtle desaturation on the avatar, verified on light and dark themes. */
.sfp-circle.is-seen .sfp-circle__ring::before {
        background: linear-gradient(160deg, #9ca3af, #6b7280);
        animation: none;
        opacity: .9;
}
.sfp-circle.is-seen .sfp-circle__media {
        opacity: var(--sfp-seen-op);
        filter: saturate(.72);
}
.sfp-circle.is-seen .sfp-circle__name { color: #6b7280; }
@media (prefers-color-scheme: dark) {
        .sfp-circle.is-seen .sfp-circle__ring::before { background: linear-gradient(160deg, #4b5563, #374151); }
        .sfp-circle.is-seen .sfp-circle__name { color: #9ca3af; }
}

/* =========================================================
 * Viewer shell
 * =======================================================*/
html.sfp-lock { overflow: hidden; }

.sfp-viewer {
        --viewer-bg: rgb(2 6 23 / 92%);
        position: fixed;
        inset: 0;
        z-index: 100000;
        display: grid;
        place-items: center;
        opacity: 0;
        /* v1.6.0 — pair the fade with visibility + pointer-events so a closing
         * viewer stops hit-testing immediately while the fade still plays. */
        visibility: hidden;
        pointer-events: none;
        transition: opacity .22s ease, visibility 0s linear .24s;
}
.sfp-viewer.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .22s ease;
}
/* v1.6.0 — CRITICAL fix for the "viewer re-opens by itself" bug.
 * The author `display:grid` above beats the UA stylesheet's
 * `[hidden] { display: none }`, so a closed viewer remained in the layout
 * as an invisible full-screen layer (opacity:0 + z-index:100000) that
 * swallowed every tap and re-opened the player. This rule makes the
 * hidden attribute authoritative again; elementFromPoint now returns the
 * real site elements right after close. */
.sfp-viewer[hidden] { display: none !important; }
.sfp-viewer__backdrop { position: absolute; inset: 0; background: var(--viewer-bg); }

/* v1.6.0 — screen-reader live region (slide transitions announcer). */
.sfp-sr-only {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0; border: 0;
        clip: rect(0 0 0 0); clip-path: inset(50%);
        overflow: hidden; white-space: nowrap;
}

/* v1.6.0 — arrows are optional (viewer.show_arrows setting). */
.sfp-viewer.sfp-no-arrows .sfp-arrow { display: none; }

.sfp-viewer__frame {
        position: relative;
        width: min(var(--sfp-viewer-maxw), calc(100vw - 24px));
        height: min(88vh, 820px);
        display: flex;
        flex-direction: column;
        border-radius: var(--sfp-viewer-radius);
        overflow: hidden;
        background: var(--sfp-viewer-shell, #0b0f19);
        box-shadow: 0 40px 90px -30px rgb(0 0 0 / 70%);
        touch-action: pan-y;
}
.sfp-viewer.is-open .sfp-viewer--zoom .sfp-viewer__frame { animation: sfp-zoom .28s cubic-bezier(.2, .9, .3, 1.2); }
.sfp-viewer.is-open .sfp-open--slide .sfp-viewer__frame { animation: sfp-slideup .3s ease; }
.sfp-viewer.is-open .sfp-open--fade .sfp-viewer__frame { animation: sfp-fadein .3s ease; }
@keyframes sfp-zoom { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes sfp-slideup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sfp-fadein { from { opacity: 0; } to { opacity: 1; } }

/* Progress bars */
.sfp-progress {
        display: flex;
        gap: 4px;
        padding: 10px 12px 6px;
        z-index: 5;
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
}
.sfp-progress__track {
        flex: 1;
        height: 3px;
        border-radius: 999px;
        background: rgb(255 255 255 / 28%);
        overflow: hidden;
}
.sfp-progress__fill {
        display: block;
        width: 0;
        height: 100%;
        background: var(--sfp-progress);
        border-radius: 999px;
        transition: width .1s linear;
}

/* Header */
.sfp-viewer__header {
        position: absolute;
        inset-block-start: 22px;
        inset-inline: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        /* v1.6.0 — themable header surface (viewer theme palette). */
        background: var(--sfp-viewer-header-bg, none);
        border-radius: 999px;
}
.sfp-avatar {
        width: 40px; height: 40px;
        flex: 0 0 auto;
        border-radius: 50%;
        padding: 2px;
        background: linear-gradient(135deg, var(--sfp-grad-from), var(--sfp-grad-via), var(--sfp-grad-to));
}
.sfp-avatar span {
        display: block;
        width: 100%; height: 100%;
        border-radius: 50%;
        background: #333 center/cover;
        border: 2px solid var(--sfp-viewer-shell, #0b0f19);
}
.sfp-viewer__meta { display: grid; gap: 1px; color: #fff; min-width: 0; }
.sfp-viewer__name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfp-viewer__time { font-size: 11.5px; opacity: .72; }
.sfp-viewer__tools { margin-inline-start: auto; display: flex; gap: 4px; }
.sfp-tool {
        /* v1.6.0 — 44×44 minimum touch target (WCAG 2.5.5); the glyph keeps
         * its 18px size so the visuals are unchanged. */
        width: 44px; height: 44px;
        display: grid; place-items: center;
        border: 0;
        border-radius: 50%;
        background: rgb(255 255 255 / 14%);
        color: #fff;
        cursor: pointer;
        transition: background .15s ease;
}
.sfp-tool svg { width: 18px; height: 18px; }
.sfp-tool:hover { background: rgb(255 255 255 / 26%); }
.sfp-tool--mute .sfp-wave { opacity: 1; }
.sfp-tool--mute.is-muted .sfp-wave { opacity: .25; }

/* Stage */
.sfp-stage { position: relative; flex: 1; overflow: hidden; }

.sfp-slide { position: absolute; inset: 0; display: flex; }
.sfp-slide--media { background: #000; }
.sfp-slide__media {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
}
/* v1.4.0: "full view" image fit — letterboxed instead of cropped. */
.sfp-slide__media--contain { object-fit: contain; }
.sfp-slide__overlay { position: absolute; inset: 0; background: #000; }
.sfp-slide:not(.sfp-slide--media) { animation: sfp-fadein .3s ease; }

/* v1.4.0: translucent gradient layer (gradient intensity < 100%). */
.sfp-slide__grad {
        position: absolute; inset: 0;
        z-index: 0;
        pointer-events: none;
}

/* v1.4.0: per-slide entrance animations (class on .sfp-slide). */
.sfp-anim-fade .sfp-slide__content { animation: sfp-fadein .45s ease both; }
.sfp-anim-up .sfp-slide__content { animation: sfp-slideup .5s cubic-bezier(.22,.9,.35,1) both; }
.sfp-anim-zoom .sfp-slide__content { animation: sfp-zoom .5s cubic-bezier(.22,.9,.35,1) both; }
.sfp-anim-none .sfp-slide__content { animation: none; }
@media (prefers-reduced-motion: reduce) {
        .sfp-anim-fade .sfp-slide__content,
        .sfp-anim-up .sfp-slide__content,
        .sfp-anim-zoom .sfp-slide__content { animation: none; }
}

.sfp-slide__content {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 22px 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
}
.sfp-slide__content--top { justify-content: flex-start; }
.sfp-slide__content--center { justify-content: center; text-align: center; }
.sfp-slide__content--bottom { justify-content: flex-end; }
.sfp-slide__title { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.sfp-slide__body { font-size: 15px; line-height: 1.65; opacity: .95; }

/* CTA */
.sfp-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        align-self: flex-start;
        padding: 12px 26px;
        border-radius: 999px;
        color: #fff !important;
        font-weight: 700;
        font-size: 14.5px;
        text-decoration: none !important;
        box-shadow: 0 10px 24px -10px rgb(0 0 0 / 45%);
        transition: transform .15s ease, filter .15s ease;
}
.sfp-cta:hover { transform: translateY(-2px); filter: brightness(1.08); }
.sfp-slide__content--center .sfp-cta { align-self: center; }

/* Product card */
.sfp-product {
        display: grid;
        gap: 8px;
        padding: 16px;
        border-radius: 14px;
        background: rgb(255 255 255 / 94%);
        color: #111827;
        backdrop-filter: blur(8px);
        box-shadow: 0 16px 40px -18px rgb(0 0 0 / 55%);
}
.sfp-product__badge {
        position: absolute;
        justify-self: start;
        background: #ef4444;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        padding: 3px 10px;
        border-radius: 999px;
        margin: -30px 0 2px;
}
.sfp-product__name { font-weight: 800; font-size: 15.5px; line-height: 1.4; }
.sfp-product__price { font-weight: 700; color: #7c3aed; font-size: 16px; }
.sfp-product .sfp-cta { justify-self: stretch; text-align: center; }

/* Poll */
.sfp-poll { display: grid; gap: 8px; width: 100%; }
.sfp-poll__opt {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        border: 1.5px solid rgb(255 255 255 / 55%);
        border-radius: 12px;
        background: rgb(255 255 255 / 10%);
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        overflow: hidden;
        transition: transform .12s ease, background .15s ease;
        text-align: start;
}
.sfp-poll__opt:hover { background: rgb(255 255 255 / 20%); transform: translateY(-1px); }
.sfp-poll__fill {
        position: absolute;
        inset-block-start: 0; inset-inline-start: 0;
        height: 100%;
        width: 0;
        background: rgb(255 255 255 / 22%);
        transition: width .6s ease;
}
.sfp-poll__label, .sfp-poll__pct { position: relative; z-index: 1; }
.sfp-poll__pct { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.sfp-poll__opt.is-voting { animation: sfp-pulse .9s ease infinite; }
@keyframes sfp-pulse { 50% { opacity: .6; } }
.sfp-poll.is-done .sfp-poll__opt { cursor: default; }

/* Countdown — absolutely centered overlay so it never steals flex space
   from the text content (it previously squeezed titles to one word/line). */
.sfp-countdown {
        position: absolute;
        left: 50%;
        top: 38%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        gap: 10px;
        z-index: 2;
        pointer-events: none;
}
.sfp-countdown div { flex: none; }
.sfp-countdown div {
        display: grid;
        gap: 2px;
        place-items: center;
        min-width: 62px;
        padding: 10px 8px;
        border-radius: 14px;
        background: rgb(255 255 255 / 92%);
        color: #111827;
        box-shadow: 0 14px 30px -16px rgb(0 0 0 / 45%);
}
.sfp-countdown b { font-size: 24px; font-variant-numeric: tabular-nums; font-weight: 800; }
.sfp-countdown i { font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; opacity: .65; }
.sfp-cd-label {
        position: absolute;
        left: 50%;
        top: calc(38% + 58px);
        transform: translateX(-50%);
        z-index: 2;
        font-size: 14px;
        font-weight: 700;
        opacity: .9;
        text-shadow: 0 2px 10px rgb(0 0 0 / 45%);
        white-space: nowrap;
}

/* Arrows */
.sfp-arrow {
        position: absolute;
        inset-block-start: 50%;
        transform: translateY(-50%);
        z-index: 6;
        width: 44px; height: 44px;
        display: grid; place-items: center;
        border: 0;
        border-radius: 50%;
        background: rgb(255 255 255 / 18%);
        color: #fff;
        cursor: pointer;
        backdrop-filter: blur(6px);
        transition: background .15s ease, transform .15s ease;
}
.sfp-arrow:hover { background: rgb(255 255 255 / 30%); transform: translateY(-50%) scale(1.06); }
.sfp-arrow--prev { inset-inline-start: calc(50% + var(--sfp-viewer-maxw) / 2 + 18px); }
.sfp-arrow--next { inset-inline-end: calc(50% + var(--sfp-viewer-maxw) / 2 + 18px); }
@media (max-width: 900px) {
        .sfp-arrow--prev { inset-inline-start: 8px; }
        .sfp-arrow--next { inset-inline-end: 8px; }
}

/* Footer / swipe up */
.sfp-viewer__footer {
        position: absolute;
        inset-block-end: 14px;
        inset-inline: 0;
        z-index: 5;
        display: flex;
        justify-content: center;
}
.sfp-swipeup {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 18px;
        border-radius: 999px;
        background: rgb(0 0 0 / 55%);
        color: #fff !important;
        text-decoration: none !important;
        font-size: 12.5px;
        font-weight: 700;
        animation: sfp-float 2.2s ease-in-out infinite;
}
@keyframes sfp-float { 50% { transform: translateY(-5px); } }

/* Paused state */
.sfp-viewer.is-paused .sfp-slide { animation-play-state: paused; }
.sfp-viewer.is-paused .sfp-progress__fill { filter: brightness(.7); }

/* Paused badge */
.sfp-viewer.is-paused::after {
        content: "❚❚";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        color: rgb(255 255 255 / 75%);
        text-shadow: 0 2px 8px rgb(0 0 0 / 60%);
        pointer-events: none;
}

/* Embed mode (inline player) */
.sfp-viewer--embed {
        position: relative;
        inset: auto;
        z-index: auto;
        opacity: 1;
        display: flex;
        gap: var(--sfp-gap);
        flex-wrap: wrap;
}
.sfp-viewer--embed .sfp-slide { position: relative; inset: auto; min-height: 100%; }

/* =========================================================
 * User submission form
 * =======================================================*/
.sfp-submit {
        max-width: 480px;
        margin: 0 auto;
        padding: 24px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 18px;
        box-shadow: 0 20px 45px -25px rgb(15 23 42 / 25%);
        display: grid;
        gap: 14px;
}
.sfp-submit__title {
        margin: 0 0 4px;
        font-size: 18px;
}
.sfp-submit__field { display: grid; gap: 6px; }
.sfp-submit__field label { font-weight: 700; font-size: 13px; }
.sfp-submit__field input[type="text"] {
        padding: 10px 14px;
        border: 1px solid #d1d5db;
        border-radius: 10px;
}
.sfp-submit__drop {
        display: grid;
        place-items: center;
        gap: 4px;
        padding: 26px 14px;
        border: 2px dashed #c7d2fe;
        border-radius: 14px;
        background: #f5f3ff;
        cursor: pointer;
        text-align: center;
        transition: border-color .15s ease, background .15s ease;
}
.sfp-submit__drop.is-over { border-color: #7c3aed; background: #ede9fe; }
.sfp-submit__dropicon { font-size: 22px; }
.sfp-submit__droptext { font-size: 13.5px; color: #4b5563; }
.sfp-submit__meta { font-size: 12px; color: #6b7280; }
.sfp-submit__btn { justify-self: start; }
.sfp-submit__status.is-ok { color: #059669; }
.sfp-submit__status.is-err { color: #dc2626; }
.sfp-submit-notice {
        padding: 16px;
        background: #f5f3ff;
        border: 1px solid #ddd6fe;
        border-radius: 12px;
        text-align: center;
}

/* Buttons public fallback (when theme lacks styles) */
.sfp-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 18px;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        background: #fff;
        color: #111827;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
}
.sfp-btn--primary {
        background: linear-gradient(135deg, var(--sfp-grad-from), var(--sfp-grad-via) 50%, var(--sfp-grad-to));
        border: 0;
        color: #fff;
}

/* =========================================================
 * Responsive & a11y
 * =======================================================*/
@media (max-width: 640px) {
        .sfp-viewer__frame {
                width: 100vw;
                height: 100dvh;
                max-height: 100dvh;
                border-radius: 0;
                /* v1.6.0 — keep controls clear of notches & home bars. */
                padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
        }
        .sfp-viewer__header { inset-block-start: calc(10px + env(safe-area-inset-top, 0px)); }
        .sfp-viewer__footer { inset-block-end: calc(8px + env(safe-area-inset-bottom, 0px)); }
        .sfp-arrow { display: none; }
        .sfp-countdown div { min-width: 54px; }
        .sfp-slide__title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
        .sfp-viewer *, .sfp-circle__ring, .sfp-swipeup { animation: none !important; transition: none !important; }
}

/* Print: hide stories entirely */
@media print {
        .sfp-circles, .sfp-viewer, .sfp-circles--float-left, .sfp-circles--float-right { display: none !important; }
}

/* Dark scheme support */
@media (prefers-color-scheme: dark) {
        .sfp-circle__name { color: #e5e7eb; }
        .sfp-circles--float-left, .sfp-circles--float-right { background: rgb(17 24 39 / 88%); }
}

/* ==========================================================
   v1.1.0 — Typography (Vazirmatn) + title sizes
   ========================================================== */
@font-face {
        font-family: 'Vazirmatn';
        src: url('../../assets/fonts/Vazirmatn-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Vazirmatn';
        src: url('../../assets/fonts/Vazirmatn-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Vazirmatn';
        src: url('../../assets/fonts/Vazirmatn-Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Vazirmatn';
        src: url('../../assets/fonts/Vazirmatn-Black.ttf') format('truetype');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
}

.sfp-font-vazirmatn .sfp-viewer,
.sfp-font-vazirmatn .sfp-circles,
.sfp-font-vazirmatn .sfp-embed,
.sfp-preview-body.sfp-font-vazirmatn .sfp-viewer,
.sfp-viewer.sfp-font-vazirmatn,
.sfp-circles.sfp-font-vazirmatn {
        font-family: 'Vazirmatn', Tahoma, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.sfp-tsize-sm { font-size: 18px !important; }
.sfp-tsize-md { font-size: 22px !important; }
.sfp-tsize-lg { font-size: 30px !important; }

@media (max-width: 640px) {
        .sfp-tsize-sm { font-size: 16px !important; }
        .sfp-tsize-md { font-size: 20px !important; }
        .sfp-tsize-lg { font-size: 26px !important; }
}

/* Slide content polish (v1.1.0) */
.sfp-slide__title { font-weight: 800; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.sfp-cta {
        border-radius: 999px;
        font-weight: 700;
        box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .55);
        transition: transform .15s ease, filter .15s ease;
}
.sfp-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* =========================================================
 * Builder live-preview mode (iframe in the admin builder)
 * Behaves exactly like the public viewer: one slide visible,
 * per-slide progress bars, arrows, counter, hold-to-pause.
 * =======================================================*/
.sfp-preview-body {
        margin: 0;
        height: 100vh;
        overflow: hidden;
        background: #0b1120;
        display: grid;
        place-items: center;
}
.sfp-viewer--preview {
        position: relative;
        inset: auto;
        width: 100%;
        height: 100vh;
        max-width: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* v1.5.0: the embed parent sets row-wrap + gap — reset it here so the
         * stage always stretches the full width (fixes 0-width stage). */
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        background: #0b1120;
        overflow: hidden;
        padding: 10px 10px 14px;
        box-sizing: border-box;
}
.sfp-viewer--preview .sfp-progress {
        display: flex;
        gap: 4px;
        position: relative;
        inset: auto;
        padding: 6px 2px 10px;
        z-index: 5;
}
.sfp-viewer--preview .sfp-progress__track {
        flex: 1;
        height: 3px;
        border-radius: 999px;
        background: rgb(255 255 255 / 25%);
        overflow: hidden;
        display: block;
}
.sfp-viewer--preview .sfp-progress__fill {
        display: block;
        height: 100%;
        width: 0;
        background: #fff;
        border-radius: 999px;
}
.sfp-viewer--preview .sfp-viewer__header {
        position: relative;
        inset: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 2px 10px;
        z-index: 5;
}
.sfp-viewer--preview .sfp-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, #7c3aed, #ec4899, #f97316);
        display: grid;
        place-items: center;
        flex: none;
}
.sfp-viewer--preview .sfp-avatar span {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #0f172a url('../../assets/images/placeholder.svg') center/cover no-repeat;
        display: block;
}
.sfp-viewer--preview .sfp-viewer__meta { display: flex; flex-direction: column; color: #fff; line-height: 1.3; }
.sfp-viewer--preview .sfp-viewer__name { font-size: 14px; font-weight: 700; }
.sfp-viewer--preview .sfp-viewer__time { font-size: 12px; opacity: .75; }
.sfp-viewer--preview .sfp-stage {
        position: relative;
        flex: 1;
        min-height: 0;
        border-radius: 18px;
        overflow: hidden;
}
.sfp-viewer--preview .sfp-slide {
        position: absolute;
        inset: 0;
        display: flex;
        border-radius: 18px;
        overflow: hidden;
}
.sfp-viewer--preview .sfp-slide[hidden] { display: none; }
.sfp-viewer--preview .sfp-viewer__nav {
        position: absolute;
        inset-inline: 0;
        bottom: 52px;
        display: flex;
        justify-content: space-between;
        padding: 0 8px;
        pointer-events: none;
        z-index: 6;
}
.sfp-viewer--preview .sfp-arrow {
        pointer-events: auto;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 0;
        background: rgb(15 23 42 / 55%);
        color: #fff;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        display: grid;
        place-items: center;
        transition: background .15s ease, transform .15s ease;
}
.sfp-viewer--preview .sfp-arrow:hover { background: rgb(15 23 42 / 80%); transform: scale(1.06); }
.sfp-viewer--preview .sfp-viewer__footer {
        position: relative;
        inset: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 4px 0;
        color: #fff;
        z-index: 5;
}
.sfp-viewer--preview .sfp-swipeup { font-size: 12px; opacity: .7; }
.sfp-viewer--preview .sfp-counter {
        font-size: 12px;
        font-weight: 700;
        background: rgb(15 23 42 / 55%);
        border-radius: 999px;
        padding: 3px 10px;
}
.sfp-viewer--preview .sfp-poll__opt { cursor: pointer; }
.sfp-viewer--preview .sfp-poll__opt.is-chosen { outline: 2px solid rgb(255 255 255 / 85%); outline-offset: 2px; }
.sfp-poll__opt { position: relative; overflow: hidden; }
.sfp-poll__fill {
        position: absolute;
        inset: 0;
        width: 0;
        background: rgb(255 255 255 / 28%);
        transition: width .4s ease;
        z-index: 0;
}
.sfp-poll__label, .sfp-poll__pct { position: relative; z-index: 1; }
.sfp-countdown {
        display: flex;
        gap: 10px;
        z-index: 2;
}
.sfp-countdown > div {
        min-width: 58px;
        padding: 8px 6px;
        border-radius: 12px;
        background: rgb(15 23 42 / 55%);
        text-align: center;
        backdrop-filter: blur(4px);
}
.sfp-countdown b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.sfp-countdown i { font-style: normal; font-size: 11px; opacity: .8; }
.sfp-cd-label { margin: 8px 0 0; font-size: 13px; opacity: .9; z-index: 2; }
/* =========================================================
 * Builder live-preview mode (iframe in the admin builder)
 * Behaves exactly like the public viewer: one slide visible,
 * per-slide progress bars, arrows, counter, hold-to-pause.
 * All rules are scoped to .sfp-viewer--preview so the public
 * viewer keeps its original look untouched.
 * =======================================================*/
.sfp-preview-body {
        margin: 0;
        height: 100vh;
        overflow: hidden;
        background: #0b1120;
        display: grid;
        place-items: center;
}
.sfp-viewer--preview {
        position: relative;
        inset: auto;
        width: 100%;
        height: 100vh;
        max-width: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* v1.5.0: the embed parent sets row-wrap + gap — reset it here so the
         * stage always stretches the full width (fixes 0-width stage). */
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        background: #0b1120;
        overflow: hidden;
        padding: 10px 12px 14px;
        box-sizing: border-box;
}
.sfp-viewer--preview .sfp-progress {
        display: flex;
        gap: 4px;
        position: relative;
        inset: auto;
        padding: 6px 2px 10px;
        z-index: 5;
}
.sfp-viewer--preview .sfp-progress__track {
        flex: 1;
        height: 3px;
        border-radius: 999px;
        background: rgb(255 255 255 / 25%);
        overflow: hidden;
        display: block;
}
.sfp-viewer--preview .sfp-progress__fill {
        display: block;
        height: 100%;
        width: 0;
        background: #fff;
        border-radius: 999px;
}
.sfp-viewer--preview .sfp-viewer__header {
        position: relative;
        inset: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 2px 10px;
        z-index: 5;
}
.sfp-viewer--preview .sfp-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, #7c3aed, #ec4899, #f97316);
        display: grid;
        place-items: center;
        flex: none;
}
.sfp-viewer--preview .sfp-avatar span {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #0f172a url('../../assets/images/placeholder.svg') center/cover no-repeat;
        display: block;
}
.sfp-viewer--preview .sfp-viewer__meta { display: flex; flex-direction: column; color: #fff; line-height: 1.3; }
.sfp-viewer--preview .sfp-viewer__name { font-size: 14px; font-weight: 700; }
.sfp-viewer--preview .sfp-viewer__time { font-size: 12px; opacity: .75; }
.sfp-viewer--preview .sfp-stage {
        position: relative;
        flex: 1;
        min-height: 0;
        border-radius: 18px;
        overflow: hidden;
}
.sfp-viewer--preview .sfp-slide {
        position: absolute;
        inset: 0;
        display: flex;
        border-radius: 18px;
        overflow: hidden;
}
.sfp-viewer--preview .sfp-slide[hidden] { display: none; }
.sfp-viewer--preview .sfp-viewer__nav {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 54px;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        pointer-events: none;
        z-index: 6;
}
.sfp-viewer--preview .sfp-arrow {
        position: static;
        transform: none;
        pointer-events: auto;
        width: 36px;
        height: 36px;
        background: rgb(15 23 42 / 55%);
        font-size: 20px;
}
.sfp-viewer--preview .sfp-arrow:hover { background: rgb(15 23 42 / 80%); transform: scale(1.06); }
.sfp-viewer--preview .sfp-viewer__footer {
        position: relative;
        inset: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 4px 0;
        z-index: 5;
}
.sfp-viewer--preview .sfp-swipeup { font-size: 12px; opacity: .7; }
.sfp-viewer--preview .sfp-counter {
        font-size: 12px;
        font-weight: 700;
        background: rgb(15 23 42 / 55%);
        border-radius: 999px;
        padding: 3px 10px;
}
.sfp-viewer--preview .sfp-poll__opt { cursor: pointer; }
.sfp-viewer--preview .sfp-poll__opt.is-chosen { outline: 2px solid rgb(255 255 255 / 85%); outline-offset: 2px; }
.sfp-viewer--preview .sfp-countdown > div {
        background: rgb(15 23 42 / 55%);
        color: #fff;
        min-width: 58px;
        padding: 8px 6px;
        backdrop-filter: blur(4px);
}
.sfp-viewer--preview .sfp-countdown b { font-size: 20px; }
.sfp-viewer--preview .sfp-cd-label { font-size: 13px; text-align: center; }
.sfp-viewer--preview .sfp-slide__media { filter: none; }

/* =========================================================
 * v1.2.0 — Auto-placement wrapper (sticky support)
 * =======================================================*/
.sfp-auto { position: relative; }
.sfp-auto--sticky {
        position: sticky;
        top: var(--wp-admin--admin-bar--height, 0px);
        z-index: 998;
        background: rgb(255 255 255 / 92%);
        backdrop-filter: blur(8px);
        box-shadow: 0 1px 0 rgb(15 23 42 / 6%);
}
@media (prefers-color-scheme: dark) {
        .sfp-auto--sticky { background: rgb(17 24 39 / 92%); box-shadow: 0 1px 0 rgb(255 255 255 / 8%); }
}

/* Ring style classes (Elementor ring-style override) */
.sfp-ring--solid .sfp-circle__ring::before { background: var(--sfp-ring); animation: none; }
.sfp-ring--glow .sfp-circle__ring { animation: sfp-glow 2.4s ease-in-out infinite alternate; }
.sfp-ring--glow .sfp-circle__ring::before { background: var(--sfp-ring); animation: none; }
.sfp-ring--double .sfp-circle__ring { border: 3px double var(--sfp-ring); }
.sfp-ring--double .sfp-circle__ring::before { background: none; animation: none; }
.sfp-ring--double .sfp-circle__media { border-width: 3px; }
.sfp-ring--none .sfp-circle__ring { padding: 0; }
.sfp-ring--none .sfp-circle__ring::before { background: none; animation: none; }
.sfp-ring--none .sfp-circle__media { inset: 0; border-width: 1px; }
.sfp-circles--nonames .sfp-circle__name { display: none; }

/* Hover effects (Elementor hover_effect control) */
.sfp-hover-zoom .sfp-circle:hover .sfp-circle__ring { transform: scale(1.08); }
.sfp-hover-lift .sfp-circle { transition: transform .2s ease; }
.sfp-hover-lift .sfp-circle:hover { transform: translateY(-4px); }
.sfp-hover-none .sfp-circle:hover .sfp-circle__ring { transform: none; }

/* Layout variants (Elementor layout control) */
.sfp-circles--wrap { flex-wrap: wrap; overflow-x: visible; }
.sfp-circles--static { flex-wrap: nowrap; overflow-x: visible; }
/* v1.6.0 — RTL/mobile fix: an inherited justify-content:center on a
 * scrollable overflow row clips one side (on RTL phones the first circle
 * sat off-screen and could not be scrolled to). "safe center" centers
 * while the row fits and falls back to the inline-start edge when it
 * overflows, so the first circle is always inside the visible area. */
.sfp-circles--auto {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: safe center;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
        padding-block-end: 10px;
}
@supports not (justify-content: safe center) {
        .sfp-circles--auto,
        .sfp-circles--grid { justify-content: flex-start; }
}
.sfp-circles--auto::-webkit-scrollbar { height: 6px; }
.sfp-circles--auto::-webkit-scrollbar-track { background: transparent; }
.sfp-circles--auto::-webkit-scrollbar-thumb { background: rgb(148 163 184 / 55%); border-radius: 3px; }
.sfp-circles--grid {
        display: grid;
        grid-template-columns: repeat(4, max-content);
        justify-content: safe center;
        align-items: start;
        overflow-x: visible;
}

/* =========================================================
 * v1.2.0 — Style presets (Elementor preset control)
 * =======================================================*/
.sfp-preset-instagram {
        --sfp-ring-style: gradient;
        --sfp-grad-from: #f9ce34;
        --sfp-grad-via: #ee2a7b;
        --sfp-grad-to: #6228d7;
        --sfp-seen-op: .35;
}
.sfp-preset-soft {
        --sfp-ring-style: gradient;
        --sfp-grad-from: #a5b4fc;
        --sfp-grad-via: #f0abfc;
        --sfp-grad-to: #fde68a;
        --sfp-seen-op: .5;
}
.sfp-preset-soft .sfp-circle__ring::before { animation-duration: 10s; }
.sfp-preset-glass {
        --sfp-ring-style: gradient;
        --sfp-grad-from: rgb(255 255 255 / 75%);
        --sfp-grad-via: rgb(255 255 255 / 45%);
        --sfp-grad-to: rgb(255 255 255 / 75%);
        --sfp-seen-op: .4;
}
.sfp-preset-glass .sfp-circles { background: rgb(255 255 255 / 12%); backdrop-filter: blur(12px); border-radius: calc(var(--sfp-circle) + 18px); padding: 12px 18px; }
.sfp-preset-glass .sfp-circle__ring::before { animation-duration: 14s; }
.sfp-preset-glass .sfp-circle__media { border-color: rgb(255 255 255 / 65%); }
.sfp-preset-neon {
        --sfp-ring-style: solid;
        --sfp-ring: #22d3ee;
        --sfp-seen-op: .45;
}
.sfp-preset-neon .sfp-circle__ring {
        animation: sfp-glow 1.8s ease-in-out infinite alternate;
        box-shadow: 0 0 12px #22d3ee, 0 0 26px rgb(34 211 238 / 45%);
}
.sfp-preset-neon .sfp-circle__ring::before { background: var(--sfp-ring); animation: none; }
.sfp-preset-neon .sfp-circle__media { border-color: #0891b2; }
.sfp-preset-neon .sfp-circle__name { color: #a5f3fc; text-shadow: 0 0 8px rgb(34 211 238 / 60%); }
.sfp-preset-outline {
        --sfp-ring-style: solid;
        --sfp-ring: #d1d5db;
        --sfp-seen-op: .4;
}
.sfp-preset-outline .sfp-circle__ring {
        border: 2px solid var(--sfp-ring, #d1d5db);
        padding: 2px;
}
.sfp-preset-outline .sfp-circle__ring::before { background: none; animation: none; }
.sfp-preset-outline .sfp-circle.is-seen .sfp-circle__ring { border-color: #9ca3af; }
.sfp-preset-outline .sfp-circle__media { border-color: transparent; }
.sfp-preset-dark {
        --sfp-ring-style: gradient;
        --sfp-grad-from: #1f2937;
        --sfp-grad-via: #6b7280;
        --sfp-grad-to: #1f2937;
        --sfp-seen-op: .35;
}
.sfp-preset-dark .sfp-circle__name { color: #9ca3af; }
.sfp-preset-sunset {
        --sfp-ring-style: gradient;
        --sfp-grad-from: #fbbf24;
        --sfp-grad-via: #fb7185;
        --sfp-grad-to: #a21caf;
        --sfp-seen-op: .35;
}

/* =========================================================
 * v1.2.0 — Stories grid (Elementor Grid widget + shortcode)
 * =======================================================*/
.sfp-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
        padding: 10px 0;
        max-width: 100%;
}
@media (max-width: 1024px) { .sfp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .sfp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.sfp-grid__title {
        width: 100%;
        margin: 0 0 14px;
        font-size: 18px;
        font-weight: 700;
        grid-column: 1 / -1;
}

.sfp-card {
        position: relative;
        margin: 0;
        border: 0;
        padding: 0;
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        cursor: pointer;
        font: inherit;
        text-align: inherit;
        box-shadow: 0 2px 10px rgb(15 23 42 / 8%);
        transition: transform .2s ease, box-shadow .2s ease;
        -webkit-tap-highlight-color: transparent;
}
.sfp-card:focus-visible { outline: 3px solid var(--sfp-grad-via); outline-offset: 3px; }
.sfp-grid--lift .sfp-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgb(15 23 42 / 16%); }

/* Image zoom is now opt-in via the widget's "Zoom image on hover" control. */
.sfp-grid--zoom .sfp-card:hover .sfp-card__media img { transform: scale(1.08); }

/* v1.5.1 — Story Card hardening.
 * The cover is pinned with absolute inset so the image ALWAYS fills the
 * media box edge-to-edge (themes that force img{height:auto} can no longer
 * leave an empty gray gap under the photo), the play badge sits on the
 * image, and the body keeps title + time readable below a hairline. */
.sfp-card__media {
        position: relative;
        margin: 0;
        aspect-ratio: 9 / 16;
        background: linear-gradient(160deg, #e5e7eb, #f3f4f6);
        overflow: hidden;
}
.sfp-card__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .35s ease;
}
/* Soft scrim behind the play badge for contrast on bright covers. */
.sfp-card__media::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        height: 40%;
        background: linear-gradient(180deg, rgb(15 23 42 / 0%), rgb(15 23 42 / 38%));
        pointer-events: none;
}

.sfp-card__play {
        position: absolute;
        inset-inline-end: 10px;
        inset-block-end: 10px;
        z-index: 2;
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgb(15 23 42 / 55%);
        color: #fff;
        backdrop-filter: blur(6px);
        box-shadow: 0 4px 14px rgb(15 23 42 / 35%);
        transition: transform .2s ease, background .2s ease;
}
.sfp-card__play svg { width: 42%; height: 42%; }
.sfp-card:hover .sfp-card__play { transform: scale(1.12); background: rgb(15 23 42 / 78%); }

.sfp-card__body {
        padding: 12px 14px 14px;
        border-top: 1px solid rgb(15 23 42 / 6%);
        display: flex;
        flex-direction: column;
        gap: 3px;
}
.sfp-card__title {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.5;
        color: #111827;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}
.sfp-card__time {
        display: block;
        font-size: 12px;
        line-height: 1.5;
        color: #6b7280;
}
@media (prefers-color-scheme: dark) {
        .sfp-card { background: #111827; box-shadow: 0 2px 10px rgb(0 0 0 / 45%); }
        .sfp-card__title { color: #f3f4f6; }
        .sfp-card__time { color: #9ca3af; }
        .sfp-card__media { background: #1f2937; }
        .sfp-card__body { border-top-color: rgb(255 255 255 / 8%); }
}

/* =========================================================
 * v1.2.0 — Featured story poster (Elementor)
 * =======================================================*/
.sfp-featured {
        position: relative;
        display: block;
        max-width: 340px;
        border-radius: 18px;
        overflow: hidden;
        cursor: pointer;
        margin: 10px 0;
        box-shadow: 0 18px 40px rgb(15 23 42 / 22%);
        -webkit-tap-highlight-color: transparent;
        font: inherit;
        text-align: start;
        border: 0;
        padding: 0;
        background: #111827;
}
.sfp-featured:focus-visible { outline: 3px solid var(--sfp-grad-via); outline-offset: 4px; }
/* Flex-crush guard: the poster lives inside Elementor flex containers whose
 * height is sometimes FIXED. Items whose min-content height is 0 get crushed
 * by flex-shrink. A replaced element (img) with aspect-ratio contributes its
 * transferred size to intrinsic/min-content sizing — so the ratio lives on
 * the in-flow img, never on an empty box or percentage padding. */
.sfp-featured__img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 9 / 16;
        object-fit: cover;
}
/* No-cover fallback keeps the same footprint via content + min-height. */
.sfp-featured:not(:has(.sfp-featured__img))::before {
        content: "";
        display: block;
        width: 100%;
        padding-top: 177.78%; /* 9:16 */
}
.sfp-featured__img {
        position: relative;
        transition: transform .4s ease;
}
.sfp-featured--zoom:hover .sfp-featured__img { transform: scale(1.07); }
.sfp-featured__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgb(15 23 42 / 10%) 30%, rgb(15 23 42 / 72%) 100%);
        opacity: .9;
}
.sfp-featured__play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 62px;
        height: 62px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #fff;
        background: linear-gradient(135deg, var(--sfp-grad-from), var(--sfp-grad-via) 55%, var(--sfp-grad-to));
        box-shadow: 0 10px 26px rgb(15 23 42 / 35%);
        transition: transform .25s ease;
}
.sfp-featured:hover .sfp-featured__play { transform: translate(-50%, -50%) scale(1.1); }
.sfp-featured__body {
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 6px;
}
.sfp-featured__badge {
        align-self: flex-start;
        font-size: 11px;
        font-weight: 700;
        color: #fff;
        background: rgb(15 23 42 / 55%);
        padding: 4px 10px;
        border-radius: 999px;
        backdrop-filter: blur(4px);
}
.sfp-featured__title {
        margin: 0;
        font-size: 17px;
        font-weight: 800;
        line-height: 1.4;
        color: #fff;
        text-shadow: 0 2px 8px rgb(0 0 0 / 35%);
}

/* =========================================================
 * v1.2.0 — Stories open button (Elementor trigger widget)
 * =======================================================*/
.sfp-trigger {
        display: flex;
        padding: 6px 0;
}
.sfp-trigger__btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin: 0;
        border: 0;
        cursor: pointer;
        font: inherit;
        font-weight: 700;
        font-size: 15px;
        color: #fff;
        background: linear-gradient(135deg, var(--sfp-grad-from), var(--sfp-grad-via) 55%, var(--sfp-grad-to));
        border-radius: 999px;
        padding: 14px 30px;
        box-shadow: 0 10px 24px rgb(124 58 237 / 28%);
        transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
        -webkit-tap-highlight-color: transparent;
}
.sfp-trigger__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgb(124 58 237 / 38%); filter: saturate(1.1); }
.sfp-trigger__btn:focus-visible { outline: 3px solid var(--sfp-grad-via); outline-offset: 3px; }
.sfp-trigger__btn svg { flex: none; }

/* Editor placeholder when no stories exist */
.sfp-elementor-empty {
        padding: 18px;
        border: 2px dashed #cbd5e1;
        border-radius: 12px;
        text-align: center;
        color: #64748b;
        background: #f8fafc;
        font-size: 13px;
}