/* ==========================================
 * BODY LOCK
 * ========================================== */

body.ss-story-lock{
    overflow:hidden;
}


/* ==========================================
 * STORY WIDGET
 * ========================================== */

.ss-story-widget{
    width:100%;
}


/* ==========================================
 * STORY CIRCLES
 * ========================================== */

.ss-story-circles{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding:0;
    scrollbar-width:none;
}

.ss-story-circles::-webkit-scrollbar{
    display:none;
}


/* ==========================================
 * STORY CIRCLE
 * ========================================== */

.ss-story-circle{
    border:0;
    background:none !important;

    padding:0;

    width:76px;
    min-width:76px;
    max-width:76px;

    flex:0 0 76px;

    cursor:pointer;
    text-align:center;

    font-family:inherit;

    display:block;

    box-sizing:border-box;
}


/* ==========================================
 * CIRCLE BORDER
 * ========================================== */

.ss-story-circle span{
    display:block;

    width:68px;
    height:68px;

    min-width:68px;
    max-width:68px;

    border-radius:50%;

    padding:3px;

    margin:0 auto;

    box-sizing:border-box;

    /*background:*/
    /*    linear-gradient(*/
    /*        135deg,*/
    /*        #ff7a00,*/
    /*        #e90055,*/
    /*        #7b2cff*/
    /*    );*/

    overflow:hidden;
}

.ss-story-circle span:before{
    display:none;
}


/* ==========================================
 * CIRCLE IMAGE
 * ========================================== */

.ss-story-circle img{
    display:block;

    width:100% !important;
    height:100% !important;

    min-width:100% !important;
    min-height:100% !important;

    max-width:none !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:cover !important;
    object-position:center center !important;

    border-radius:50% !important;

    border:3px solid #fff;

    box-sizing:border-box;
}


/* ==========================================
 * STORY TITLE
 * ========================================== */

.ss-story-circle b{
    display:block;

    width:76px;

    font-size:12px;
    font-weight:500;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    margin-top:6px;

    box-sizing:border-box;
}


/* ==========================================
 * VIEWER
 * ========================================== */

.ss-viewer{
    display:none;

    position:fixed;

    inset:0;

    z-index:999999;
}

.ss-viewer.ss-open{
    display:block;
}


/* ==========================================
 * BACKDROP
 * ========================================== */

.ss-viewer-backdrop{
    position:absolute;

    inset:0;

    background:rgba(0,0,0,.88);
}


/* ==========================================
 * VIEWER BOX
 * ========================================== */

.ss-viewer-box{
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:min(92vw,500px);
    height:min(92vh,890px);

    background:#111;

    border-radius:12px;

    overflow:hidden;

    box-shadow:
        0 20px 70px rgba(0,0,0,.5);
}


/* ==========================================
 * CONTENT
 * ========================================== */

.ss-content{
    position:absolute;

    inset:0;

    display:flex;

    align-items:center;
    justify-content:center;
}


/* ==========================================
 * MAIN IMAGE
 * ========================================== */

.ss-main-image{
    width:100%;
    height:100%;

    object-fit:contain;

    background:#111;

    display:block;
}


/* ==========================================
 * PROGRESS
 * ========================================== */

.ss-progress{
    position:absolute;

    z-index:50;

    top:10px;

    left:10px;
    right:10px;

    display:flex;

    gap:3px;

    pointer-events:none;
}


/* Each progress item */

.ss-progress span{
    position:relative;

    height:3px;

    background:rgba(255,255,255,.35);

    flex:1;

    border-radius:5px;

    overflow:hidden;
}


/* Progress fill */

.ss-progress i{
    display:block;

    height:100%;

    width:0;

    background:#fff;

    border-radius:5px;
}


/* Completed */

.ss-progress .done i{
    width:100%;
}


/* Active */

.ss-progress .active i{

    width:100%;

    animation:
        ss-progress
        var(--ss-duration,15s)
        linear
        forwards;
}


/* ==========================================
 * PROGRESS ANIMATION
 * ========================================== */

@keyframes ss-progress{

    from{
        width:0;
    }

    to{
        width:100%;
    }

}


/* ==========================================
 * CLOSE / PREV / NEXT
 * ========================================== */

.ss-close,
.ss-prev,
.ss-next{
    position:absolute;

    z-index:100;

    border:0;

    background:rgba(0,0,0,.35);

    color:#fff;

    cursor:pointer;
}


/* ==========================================
 * CLOSE
 * ========================================== */

.ss-close{

    right:10px;
    top:20px;

    width:36px;
    height:36px;

    border-radius:50%;

    font-size:36px !important;

    line-height:30px;

    padding:0;

    text-align:center;
}


/* ==========================================
 * PREVIOUS / NEXT
 * ========================================== */

.ss-viewer .ss-prev,
.ss-viewer .ss-next{

    position:absolute !important;

    z-index:30 !important;

    top:50% !important;

    bottom:auto !important;

    transform:translateY(-50%) !important;

    width:52px !important;

    min-width:52px !important;
    max-width:52px !important;

    height:90px !important;

    min-height:90px !important;
    max-height:90px !important;

    margin:0 !important;

    padding:0 !important;

    border:0 !important;

    border-radius:8px !important;

    font-size:52px !important;

    line-height:80px !important;

    text-align:center !important;

    background:rgba(0,0,0,.28) !important;

    color:#fff !important;

    cursor:pointer !important;

    box-sizing:border-box !important;

    display:block !important;

    appearance:none;
}


/* Previous = right side in RTL */

.ss-viewer .ss-prev{
    right:8px !important;
    left:auto !important;
}


/* Next = left side in RTL */

.ss-viewer .ss-next{
    left:8px !important;
    right:auto !important;
}


/* ==========================================
 * ACTION BUTTON
 * ========================================== */

.ss-action{

    position:absolute;

    z-index:40;

    bottom:28px;

    left:50%;

    transform:translateX(-50%);

    display:inline-block;

    background:#fff;

    color:#111 !important;

    text-decoration:none !important;

    padding:11px 24px;

    border-radius:999px;

    font-size:14px;

    font-weight:700;

    white-space:nowrap;

    box-shadow:
        0 4px 20px rgba(0,0,0,.3);
}


/* ==========================================
 * ELEMENTOR EDITOR
 * ========================================== */

body.elementor-editor-active .ss-viewer{
    display:none !important;
}

body.elementor-editor-active .ss-story-widget{
    display:block !important;

    width:100% !important;

    height:auto !important;
}


/* ==========================================
 * MOBILE
 * ========================================== */

@media(max-width:600px){

    .ss-viewer-box{

        width:100vw;
        height:80vh;

        left:0;
        top:0;

        transform:none;

        border-radius:0;
    }


    /* Mobile navigation buttons */

    .ss-viewer .ss-prev,
    .ss-viewer .ss-next{

        width:64px !important;

        min-width:64px !important;
        max-width:64px !important;

        height:90px !important;

        min-height:90px !important;
        max-height:90px !important;

        background:rgba(0,0,0,.20) !important;
    }


    .ss-viewer .ss-prev{
        right:4px !important;
        left:auto !important;
    }


    .ss-viewer .ss-next{
        left:4px !important;
        right:auto !important;
    }


    .ss-close{

        top:22px;
        right:12px;

        font-size:36px !important;
    }
}