/* STORY LIST – RESPONSIVE SCROLL */

.ssp-wrapper{
    display:flex;
    gap:12px;
    padding:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
}

/* Default → Mobile: 3 items */
.ssp-story{
    flex:0 0 calc(100% / 3);
    max-width:80px;
    aspect-ratio:1/1;
    border-radius:50% !important;
    cursor:pointer;
    scroll-snap-align:start;
    flex-shrink:0;
    position:relative !important;
    overflow:visible !important;
}

/* IMAGE */
.ssp-story img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:50% !important;
    position:relative !important;
    z-index:2 !important;
    border:3px solid #fff !important;
}

/* GRADIENT RING */
.ssp-story::before{
    content:'' !important;
    position:absolute !important;
    inset:-4px !important;
    border-radius:50% !important;
    background:linear-gradient(45deg,#ff0066,#ffcc00,#ff0066) !important;
    z-index:1 !important;
}


/* TABLET → 4 items */
@media (min-width:600px){
    .ssp-story{
        flex:0 0 calc(100% / 4);
        max-width:80px;
    }
}

/* DESKTOP → 6 items */
@media (min-width:1024px){
    .ssp-story{
        flex:0 0 calc(100% / 6);
        max-width:80px;
    }
}

/* LARGE DESKTOP → 7 items */
@media (min-width:1600px){
    .ssp-story{
        flex:0 0 calc(100% / 7);
    }
}



/* POPUP */

#ssp-popup{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
}


/* SLIDE */

.ssp-slide-content{
    position:relative;
    width:90%;
    max-width:420px;
    height:80vh;
    overflow:hidden;
}

.ssp-slide-content img,
.ssp-slide-content video{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:10px;
}


/* ===========================
   SHOP BUTTON (CENTERED)
   =========================== */

#ssp-buy-btn{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    padding:14px 26px;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(6px);
    color:#fff;
    font-weight:600;
    text-decoration:none;
    border-radius:50px;
    font-size:18px;
    box-shadow:0 4px 20px rgba(0,0,0,0.35);
    z-index:20;
    opacity:0.95;
    transition:0.25s;
    user-select:none;
}

#ssp-buy-btn:hover{
    opacity:1;
    transform:translate(-50%, -50%) scale(1.05);
}

#ssp-buy-btn:active{
    transform:translate(-50%, -50%) scale(0.97);
}

/* موبایل */
@media(max-width:600px){
    #ssp-buy-btn{
        font-size:16px;
        padding:12px 22px;
    }
}


/* ===========================
   PRODUCT PRICE (NEW)
   =========================== */

#ssp-price{
    position:absolute;
    top:calc(50% + 55px);
    left:50%;
    transform:translateX(-50%);
    font-size:22px;
    font-weight:700;
    color:#fff;
    text-shadow:0 0 8px rgba(0,0,0,0.7);
    background:rgba(0,0,0,0.45);
    padding:8px 18px;
    border-radius:12px;
    z-index:20;
    backdrop-filter:blur(4px);
    white-space:nowrap;
    opacity:0.95;
}

@media(max-width:600px){
    #ssp-price{
        font-size:18px;
        top:calc(50% + 50px);
    }
}



/* PROGRESS BARS */

.ssp-progress-container{
    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    max-width:420px;
    display:flex;
    gap:4px;
    z-index:5;
}

.ssp-progress-bar{
    flex:1;
    height:3px;
    background:rgba(255,255,255,0.3);
    border-radius:2px;
    overflow:hidden;
}

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


/* NAVIGATION */

.ssp-nav{
    position:absolute;
    top:0;
    width:50%;
    height:100%;
    z-index:10;
    cursor:pointer;
}

.ssp-prev{
    left:0;
}

.ssp-next{
    right:0;
}


/* MOBILE SLIDES */

@media(max-width:600px){

    .ssp-slide-content{
        width:100%;
        height:100vh;
    }

    .ssp-progress-container{
        width:95%;
    }
}

/* ===========================
   DESKTOP IMPROVEMENTS (FIXED)
   =========================== */

@media (min-width:1024px){

    /* Center the row + 80% width ONLY on desktop */
    .ssp-wrapper{
        width:80% !important;
        margin:0 auto !important;
        justify-content:center !important;
    }

    /* Bigger stories only on desktop */
    .ssp-story{
        width:110px !important;
        height:110px !important;
        flex:0 0 auto !important;
        max-width:none !important;
    }
}

/* Extra large screens */
@media (min-width:1600px){
    .ssp-wrapper{
        width:70% !important;
    }
}