.digikala-stories-container {
    display:flex;
    overflow-x:auto;
    gap:12px;
    padding:12px 0;
    scrollbar-width:none;
}
.digikala-stories-container::-webkit-scrollbar{ display:none; }

.story-thumbnail {
    width:70px; height:70px;
    border-radius:50%;
    border:3px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(45deg, #0C0D6C, #c6e1fe) border-box;
    cursor:pointer;
    overflow:hidden;
    flex-shrink:0;
}
/*.story-thumbnail img {
    width:100%; height:100%; object-fit:cover;
    transition:transform .3s;
}*/
.story-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
    pointer-events: none; /* این خط را حتما اضافه کنید */
}

.story-thumbnail:hover img { transform: scale(1.05); }

.modal {
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.95);
    z-index:9999;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    backdrop-filter: blur(6px);
}

.modal-content {
    max-width:90%;
    max-height:80%;
}

.close {
    position:absolute; top:20px; right:30px;
    color:#fff; font-size:40px;
    cursor:pointer;
}

.story-nav {
    position:absolute;
    top:50%;
    font-size:40px;
    color:#fff;
    cursor:pointer;
    padding:10px;
    user-select:none;
}
.story-prev { left:20px; }
.story-next { right:20px; }

.progress-wrapper {
    position:absolute;
    top:0; left:0;
    width:100%;
    display:flex;
    justify-content:space-around;
    gap:4px;
    padding:8px;
}
.progress-bar {
    flex:1;
    height:3px;
    background:rgba(255,255,255,0.3);
}
.progress-bar.active {
    background:#fff;
    transition:width .05s linear;
}
/* Progress Bar */
.story-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.3);
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: #fff;
    transition: width linear;
}