/* استوری پلاس ابر باران — Styles v1.0.4
   نکته: critical CSS برای story row داخل shortcode inline هست
   اینجا فقط viewer + بهبودهای اضافه */

/* فونت - اگر Google Fonts لود شد استفاده می‌کنه وگرنه Tahoma */
: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;
}

/* ── فونت روی label (وقتی Vazirmatn لود شد override میشه) ── */
.sp-story-label { font-family: var(--sp-font); }
.sp-viewer-name,
.sp-story-btn   { font-family: var(--sp-font); }

/* ── thumb hover (non-critical) ─────────────────────────── */
.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;
}

/* ═══════════════════════════════════════════
   VIEWER
   ═══════════════════════════════════════════ */
.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);
}

/* Inner card */
.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);
  }
}

/* Fullscreen */
.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; }

/* Progress bars */
.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%} }

/* Top bar */
.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); }

/* Media */
.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; }

/* Footer */
.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; }

/* Pause */
.sp-viewer.sp-paused .sp-prog-fill.sp-prog-active { animation-play-state:paused; }

/* Body lock */
body.sp-open {
  overflow:hidden !important;
  position:fixed; width:100%;
  top:var(--sp-scroll-y, 0);
}

/* Mobile */
@media (max-width:480px) {
  :root { --sp-ring-size:60px; --sp-viewer-max:100vw; }
}
@media (min-width:1200px) { :root { --sp-ring-size:72px; } }