:root {
--sp-font: 'Vazirmatn', Tahoma, Arial, sans-serif;
--sp-grad: linear-gradient(135deg,#f09433 0%,#e6683c 20%,#dc2743 40%,#cc2366 70%,#bc1888 100%);
--sp-grad-seen: linear-gradient(135deg,#cbd5e1,#94a3b8);
--sp-ring-size: 68px;
--sp-viewer-max: 430px;
} .sp-story-label { font-family: var(--sp-font); }
.sp-viewer-name,
.sp-story-btn   { font-family: var(--sp-font); } .sp-story-item { user-select:none; outline:none; }
.sp-story-item:focus-visible .sp-thumb-ring { outline:3px solid #6C63FF; outline-offset:4px; }
.sp-thumb-ring { transition: transform .2s; }
.sp-story-item:hover .sp-thumb-ring { transform:scale(1.06); }
.sp-thumb-fallback {
width:100%; height:100%;
display:flex; align-items:center; justify-content:center; font-size:22px;
} .sp-viewer {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 9999999 !important;
display: flex;
align-items: center;
justify-content: center;
overscroll-behavior: contain;
}
.sp-viewer-bg {
position: absolute; inset: 0;
background: rgba(0,0,0,.93);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
} .sp-viewer-inner {
z-index: 1;
position: relative;
width: 100%;
max-width: var(--sp-viewer-max);
height: 100%;
display: flex; flex-direction: column;
overflow: hidden;
background: #000;
}
@media (min-width:600px) {
.sp-viewer-inner {
z-index: 1;
height: min(88vh, 750px);
border-radius: 20px;
box-shadow: 0 32px 80px rgba(0,0,0,.6);
}
} .sp-viewer:fullscreen,
.sp-viewer:-webkit-full-screen,
.sp-viewer:-moz-full-screen {
width: 100%; height: 100%; background: #000;
}
.sp-viewer:fullscreen .sp-viewer-inner,
.sp-viewer:-webkit-full-screen .sp-viewer-inner,
.sp-viewer:-moz-full-screen .sp-viewer-inner {
z-index: 1;
width: 100%; max-width: 100%; height: 100%; border-radius: 0;
}
.sp-viewer:fullscreen .sp-viewer-bg,
.sp-viewer:-webkit-full-screen .sp-viewer-bg { display: none; } .sp-progress-bar-wrap {
display: flex; gap: 4px;
position: absolute; top: 0; left: 0; right: 0; z-index: 10;
padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px 0;
}
.sp-prog-segment {
flex:1; height:3px;
background:rgba(255,255,255,.35); border-radius:3px; overflow:hidden;
}
.sp-prog-fill { height:100%; width:0%; background:white; border-radius:3px; transition:none; }
.sp-prog-fill.sp-prog-done   { width:100%; }
.sp-prog-fill.sp-prog-active { animation:spProgress var(--sp-dur,5s) linear forwards; }
@keyframes spProgress { from{width:0%} to{width:100%} } .sp-viewer-top {
display:flex; align-items:center; justify-content:space-between;
position:absolute; top:0; left:0; right:0; z-index:9;
padding: calc(env(safe-area-inset-top, 0px) + 22px) 14px 16px;
background: linear-gradient(to bottom,rgba(0,0,0,.55) 0%,transparent 100%);
pointer-events: none;
}
.sp-viewer-top > * { pointer-events: auto; }
.sp-viewer-info { display:flex; align-items:center; gap:10px; }
.sp-viewer-avatar {
width:36px; height:36px; border-radius:50%;
overflow:hidden; border:2px solid white; background:#334155; flex-shrink:0;
}
.sp-viewer-avatar img { width:100%; height:100%; object-fit:cover; }
.sp-viewer-name {
font-size:14px; font-weight:600; color:white;
text-shadow:0 1px 4px rgba(0,0,0,.5); direction:rtl;
}
.sp-close-btn {
background: rgba(255,255,255,.18);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border:none; width:36px; height:36px; border-radius:50%;
cursor:pointer; display:flex; align-items:center; justify-content:center;
touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.sp-close-btn:active { background:rgba(255,255,255,.4); } .sp-viewer-media {
flex:1; display:flex; align-items:center; justify-content:center;
overflow:hidden; position:relative; background:#111;
}
#sp-viewer-img {
width:100%; height:100%; object-fit:cover; display:block;
transition:opacity .15s;
}
#sp-viewer-img.sp-fade { opacity:0; } .sp-viewer-footer {
position:absolute; left:0; right:0; bottom:0; z-index:10;
display:flex; justify-content:center; align-items:flex-end;
padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
background: linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 100%);
min-height:80px; pointer-events:none;
}
.sp-viewer-footer > * { pointer-events:auto; }
.sp-story-btn {
display:inline-flex; align-items:center; gap:8px;
background:white; color:#1e293b;
font-size:14px; font-weight:700;
padding:12px 30px; border-radius:40px;
text-decoration:none; border:none; cursor:pointer;
box-shadow:0 4px 18px rgba(0,0,0,.35);
direction:rtl; touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
.sp-story-btn:active { opacity:.85; color:#1e293b; } .sp-viewer.sp-paused .sp-prog-fill.sp-prog-active { animation-play-state:paused; } body.sp-open {
overflow:hidden !important;
position:fixed; width:100%;
top:var(--sp-scroll-y, 0);
} @media (max-width:480px) {
:root { --sp-ring-size:60px; --sp-viewer-max:100vw; }
}
@media (min-width:1200px) { :root { --sp-ring-size:72px; } }.sp-slider{position:relative;display:block;width:100%;max-width:100%;height:var(--sp-h,480px);overflow:hidden;border-radius:var(--sp-radius,12px);background:#0e0e10;direction:rtl}
.sp-track{position:relative;width:100%;height:100%}
.sp-slide{position:absolute;inset:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity .55s ease;z-index:1}
.sp-slide.is-active{opacity:1;visibility:visible;z-index:2}
.sp-slider .sp-slide .sp-media,
.sp-slider .sp-slide img.sp-media,
.sp-slider .sp-slide video.sp-media{
width:100% !important;
height:100% !important;
max-width:100% !important;
max-height:100% !important;
min-width:0 !important;
min-height:0 !important;
object-fit:var(--sp-fit,cover);
display:block;
margin:0 !important;
border:0;
border-radius:0;
background:#0e0e10;
aspect-ratio:auto !important;
}
.sp-link{display:block;width:100%;height:100%;color:inherit;text-decoration:none}
.sp-caption{position:absolute;right:0;left:0;bottom:0;padding:28px 24px 18px;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);color:#fff;text-align:right}
.sp-caption h3{margin:0 0 4px;font-size:1.25rem;line-height:1.5;color:#fff}
.sp-caption p{margin:0;font-size:.9rem;opacity:.9}
.sp-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:var(--sp-arrow,42px);height:var(--sp-arrow,42px);border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;cursor:pointer;transition:background .2s;padding:0;display:flex;align-items:center;justify-content:center;line-height:0}
.sp-arrow svg{width:55%;height:55%;display:block;pointer-events:none}
.sp-arrow:hover{background:rgba(0,0,0,.7)}
.sp-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sp-prev{right:14px}
.sp-next{left:14px}
.sp-dots{position:absolute;bottom:12px;right:0;left:0;display:flex;justify-content:center;gap:8px;z-index:5}
.sp-dot{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:transform .2s,background .2s}
.sp-dot.is-active{background:#fff;transform:scale(1.25)}
.sp-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:768px){
.sp-slider{height:var(--sp-h-m,260px) !important}
.sp-arrow{width:var(--sp-arrow-m,30px);height:var(--sp-arrow-m,30px)}
}
@media(prefers-reduced-motion:reduce){.sp-slide{transition:none}}