/* "📖 قصص" — row of story buttons under the header + the full screen story viewer (stories.js) */

/* ---------- Row under the header ---------- */
.svs-row { direction: rtl; padding: 12px 0 4px; }
.svs-row-in { display: flex; gap: 14px; overflow-x: auto; padding: 4px 16px 8px; scrollbar-width: thin; scrollbar-color: #f97316 transparent; }
.svs-row-in::-webkit-scrollbar { height: 5px; }
.svs-row-in::-webkit-scrollbar-thumb { background: #f97316; border-radius: 5px; }
.svs-bubble { flex: 0 0 auto; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: none; border: 0; padding: 0; cursor: pointer; color: #e2e8f0; font-family: inherit; }
.svs-ring { position: relative; width: 70px; height: 70px; border-radius: 50%; padding: 3px;
    background: conic-gradient(#f97316, #fbbf24, #ea580c, #f97316); transition: transform .2s; }
.svs-bubble:hover .svs-ring { transform: scale(1.06); }
.svs-bubble.seen .svs-ring { background: #475569; }
.svs-pic { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #0f172a;
    background: #1e293b center / cover no-repeat; }
.svs-tag { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); background: #ea580c; color: #fff;
    font-size: 10.5px; font-weight: 800; line-height: 1; padding: 3px 8px; border-radius: 999px; border: 2px solid #0f172a; white-space: nowrap; }
.svs-bubble.seen .svs-tag { background: #475569; }
.svs-name { width: 100%; font-size: 12px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
    .svs-row-in { gap: 10px; padding: 4px 10px 8px; }
    .svs-bubble { width: 66px; }
    .svs-ring { width: 60px; height: 60px; }
}

/* "📖 قصة" button on the movie / series page */
.btn-story { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px;
    color: #fff; padding: 9px 16px; border-radius: 10px; background: linear-gradient(135deg, #ea580c, #f59e0b); box-shadow: 0 4px 14px rgba(234, 88, 12, .35); }
.btn-story small { font-weight: 600; opacity: .85; }
.btn-story:hover { filter: brightness(1.08); }

/* ---------- Viewer ---------- */
body.svs-lock { overflow: hidden; }
.svs-view { position: fixed; inset: 0; z-index: 99000; background: #000; direction: rtl; font-family: 'Cairo', Arial, sans-serif; color: #fff; }
.svs-view[hidden] { display: none; }
.svs-feed { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.svs-feed::-webkit-scrollbar { display: none; }
.svs-slide { position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
    display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Desktop: a phone-shaped column in the middle */
.svs-frame { position: relative; width: min(100vw, calc(100dvh * 9 / 16)); height: 100%; background: #0b0f19; overflow: hidden; }
@media (max-width: 700px) { .svs-frame { width: 100vw; } }
.svs-blur { position: absolute; inset: -30px; background: center / cover no-repeat; filter: blur(28px) brightness(.45); }
.svs-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.svs-shade-top, .svs-shade-bot { position: absolute; left: 0; right: 0; pointer-events: none; }
.svs-shade-top { top: 0; height: 120px; background: linear-gradient(rgba(0,0,0,.65), transparent); }
.svs-shade-bot { bottom: 0; height: 190px; background: linear-gradient(transparent, rgba(0,0,0,.75)); }

/* progress of the story */
.svs-bar { position: absolute; top: 8px; left: 10px; right: 10px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; direction: ltr; }
.svs-bar span { display: block; height: 100%; width: 0; background: #fff; }

/* the movie / series name, small, top left — opens its page */
.svs-item { position: absolute; top: 20px; left: 12px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 80px);
    color: #fff; text-decoration: none; background: rgba(0,0,0,.35); border-radius: 999px; padding: 4px 12px 4px 4px; direction: rtl; }
.svs-item img, .svs-item .svs-noimg { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #334155; flex-shrink: 0; }
.svs-item b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svs-item em { font-style: normal; font-size: 10.5px; font-weight: 800; background: #ea580c; border-radius: 999px; padding: 1px 7px; flex-shrink: 0; }
.svs-close { position: absolute; top: 18px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(0,0,0,.45); color: #fff; font-size: 18px; z-index: 3; }

/* side buttons: like (count above), comments */
.svs-side { position: absolute; right: 10px; bottom: 120px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.svs-act { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; color: #fff; cursor: pointer; font-family: inherit; }
.svs-act .n { font-size: 13px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.svs-act .i { width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; font-size: 24px; transition: transform .15s; }
.svs-act:active .i { transform: scale(.88); }
.svs-like.on .i { background: rgba(239, 68, 68, .25); }
.svs-like.pop .i { animation: svsPop .35s ease; }
@keyframes svsPop { 50% { transform: scale(1.3); } }
.svs-sound .i { font-size: 20px; }

/* bottom: views (left), "شاهد الآن" */
.svs-views { position: absolute; left: 12px; bottom: 26px; font-size: 13px; font-weight: 700; background: rgba(0,0,0,.4); border-radius: 999px; padding: 4px 12px; direction: rtl; }
.svs-watch { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #ea580c, #f97316); color: #fff; text-decoration: none; font-weight: 800; font-size: 15px;
    padding: 11px 26px; border-radius: 999px; box-shadow: 0 8px 24px rgba(234, 88, 12, .5); white-space: nowrap; }
.svs-label { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 12px; color: rgba(255,255,255,.75); white-space: nowrap; }
.svs-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.55); padding: 8px 16px; border-radius: 999px;
    font-size: 13px; font-weight: 700; pointer-events: none; opacity: 0; transition: opacity .3s; }
.svs-hint.show { opacity: 1; }

/* comments */
.svs-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 70%; display: flex; flex-direction: column;
    background: #0f172a; border-radius: 18px 18px 0 0; border-top: 1px solid rgba(249,115,22,.4); transform: translateY(105%); transition: transform .28s ease; }
.svs-sheet.open { transform: translateY(0); }
.svs-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #1e293b; font-weight: 800; }
.svs-sheet-head button { background: none; border: 0; color: #94a3b8; font-size: 20px; cursor: pointer; }
.svs-list { flex: 1; overflow-y: auto; padding: 8px 14px; min-height: 120px; }
.svs-c { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(30,41,59,.7); }
.svs-c img, .svs-c .av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #334155; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.svs-c .body { flex: 1; min-width: 0; }
.svs-c .who { font-size: 13px; font-weight: 800; color: #fb923c; text-decoration: none; }
.svs-c .t { font-size: 11px; color: #64748b; margin-inline-start: 6px; }
.svs-c .txt { font-size: 14px; color: #e2e8f0; white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.svs-c .del { background: none; border: 0; color: #f87171; cursor: pointer; font-size: 12px; align-self: flex-start; }
.svs-empty { color: #64748b; text-align: center; padding: 24px 0; font-size: 14px; }
.svs-form { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #1e293b; }
.svs-form textarea { flex: 1; resize: none; height: 42px; border-radius: 12px; border: 1px solid #334155; background: #020617; color: #fff; padding: 9px 12px; font-family: inherit; font-size: 14px; }
.svs-form button, .svs-loginbtn { border: 0; border-radius: 12px; background: #ea580c; color: #fff; font-weight: 800; font-family: inherit; padding: 0 16px; cursor: pointer; }
.svs-loginbtn { display: block; width: calc(100% - 24px); margin: 10px 12px calc(10px + env(safe-area-inset-bottom)); padding: 12px; text-align: center; text-decoration: none; font-size: 14px; }
.svs-err { color: #fca5a5; font-size: 12.5px; padding: 0 14px 6px; }

/* ▲ / ▼ previous / next story — computers only (mouse), next to the phone-shaped story */
.svs-nav { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
    .svs-nav { display: flex; flex-direction: column; gap: 14px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
        left: calc(50% + min(50vw, 100dvh * 9 / 32) + 22px); }
    .svs-nav button { width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer;
        background: rgba(30, 41, 59, .85); color: #fff; font-size: 20px; transition: background .2s, transform .15s, opacity .2s; }
    .svs-nav button:hover:not(:disabled) { background: #ea580c; border-color: #ea580c; transform: scale(1.08); }
    .svs-nav button:disabled { opacity: .3; cursor: default; }
}

/* An ad can't be skipped in its first seconds: no swiping, small counter */
.svs-feed.svs-locked { overflow-y: hidden; touch-action: none; }
.svs-skip { position: absolute; right: 12px; bottom: 26px; background: rgba(0,0,0,.6); color: #fff; font-size: 12.5px; font-weight: 700;
    border-radius: 999px; padding: 4px 12px; direction: rtl; border: 1px solid rgba(255,255,255,.25); }
.svs-skip:empty { display: none; }
.svs-skip.ready { background: rgba(234, 88, 12, .9); border-color: transparent; }