/* ===========================
   INSTAGRAM STORY MODAL
===========================*/

.story-modal{
    position:fixed;
    inset:0;
    background:#000;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999999;
    overflow:hidden;
    animation:storyFade .25s ease;
}

.story-modal.active{
    display:flex;
}

.story-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.96);
}

.story-viewer{
    position:relative;
    width:420px;
    height:92vh;
    max-height:820px;
    background:#000;
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 20px 70px rgba(0,0,0,.6);
}

@media(max-width:768px){

.story-viewer{

    width:100%;
    height:100%;
    max-height:none;
    border-radius:0;

}

}
.story-progress{

    position:absolute;
    top:12px;
    left:10px;
    right:10px;

    display:flex;
    gap:4px;

    z-index:20;

}

.story-progress-item{

    flex:1;
    height:3px;

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

    overflow:hidden;

    border-radius:20px;

}

.story-progress-fill{

    width:0%;
    height:100%;

    background:#fff;

}
.story-header{

    position:absolute;

    top:28px;
    left:16px;
    right:16px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    z-index:30;

}

.story-user{

    display:flex;
    align-items:center;
    gap:10px;

}

.story-user-image{

    width:38px;
    height:38px;

    border-radius:50%;

    object-fit:cover;

}

.story-user-info{

    display:flex;
    flex-direction:column;

}

.story-username{

    color:#fff;

    font-size:14px;

    font-weight:600;

}

.story-time{

    color:rgba(255,255,255,.7);

    font-size:12px;

}
.story-close{

    background:none;

    border:none;

    color:#fff;

    font-size:28px;

    cursor:pointer;

}
.story-content{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

}

.story-image{

    width:100%;

    height:100%;

    object-fit:cover;

    display:none;

}

.story-video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:none;

}
.story-prev,
.story-next{

    position:absolute;

    top:0;

    width:35%;

    height:100%;

    z-index:40;

    cursor:pointer;

}

.story-prev{

    left:0;

}

.story-next{

    right:0;

}
.story-loader{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#000;

    z-index:50;

    visibility:hidden;

    opacity:0;

    transition:.25s;

}

.story-loader.active{

    visibility:visible;

    opacity:1;

}

.story-spinner{

    width:42px;

    height:42px;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.2);

    border-top-color:#fff;

    animation:spin .8s linear infinite;

}
.story-footer{

    position:absolute;

    bottom:20px;

    left:20px;

    right:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#fff;

    z-index:30;

}

.story-footer-left{

    display:flex;

    gap:18px;

    font-size:22px;

}

.story-footer-right{

    font-size:14px;

}
@keyframes spin{

to{

transform:rotate(360deg);

}

}

@keyframes storyFade{

from{

opacity:0;

}

to{

opacity:1;

}

}