/* ================================================================
   SINGLE SERIES PAGE — v30 clean
   ================================================================ */

.sp-page { padding-bottom: 80px; }

/* ── Hero ──────────────────────────────────────────────────────── */
.sp-hero {
    position: relative;
    min-height: 680px;
    background-size: cover;
    background-position: center 20%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.sp-hero__blur { display: none; }
.sp-hero__shade {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg,  rgba(3,10,18,.96) 0%, rgba(3,10,18,.82) 40%, rgba(3,10,18,.18) 66%, rgba(3,10,18,.08) 100%),
        linear-gradient(180deg, rgba(3,10,18,.32) 0%, rgba(3,10,18,.04) 42%, #030a12 100%);
}

/* This is page-container — keeps left/right padding */
.sp-hero__inner {
    position: relative;
    z-index: 3;
    padding-top: 108px;
    padding-bottom: 64px;
}

.sp-bc { margin-bottom: 22px; }

.sp-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 560px) 1fr;
    gap: 0;
    align-items: end;
}
.sp-hero__tiles { display: none; }

.sp-hero__left h1 {
    font-size: clamp(36px, 4.8vw, 66px);
    letter-spacing: -1.8px;
    line-height: 1.02;
    margin: 14px 0 16px;
    text-shadow: 0 12px 40px rgba(0,0,0,.55);
}
.sp-desc {
    font-size: 15px;
    line-height: 1.68;
    color: rgba(218,230,240,.84);
    margin: 0 0 26px;
}

/* Badges */
.sp-badges {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; margin-bottom: 16px;
}
.sp-badges span, .sp-badges a {
    display: inline-flex; align-items: center; gap: 5px;
    height: 30px; padding: 0 11px;
    border-radius: 999px; font-size: 13px; font-weight: 820;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
}
.spb-hd { background: linear-gradient(135deg,var(--accent),#ffac2f) !important; color:#111 !important; border-color:transparent !important; font-weight:950 !important; }
.spb-imdb svg { width:13px;height:13px;fill:var(--accent);flex-shrink:0; }
.spb-genre:hover { background:rgba(247,201,72,.16) !important; color:var(--accent) !important; }

/* Buttons */
.sp-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sp-watch-btn { display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 22px; border:0; cursor:pointer; border-radius:16px; }
.sp-watch-btn svg { width:15px;height:15px;fill:#111;flex-shrink:0; }
.sp-add-btn { display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 18px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#fff; font-weight:880; font-size:14px; cursor:pointer; transition:background .18s; }
.sp-add-btn svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round; }
.sp-add-btn:hover { background:rgba(255,255,255,.10); }
.sp-more-btn { width:48px;height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font-size:22px; cursor:pointer; transition:background .18s; display:grid; place-items:center; }
.sp-more-btn:hover { background:rgba(255,255,255,.11); }

/* ── Tabs ──────────────────────────────────────────────────────── */
.sp-tabs-bar {
    display:flex; gap:4px;
    padding-top:6px; padding-bottom:0;
    border-bottom:1px solid rgba(255,255,255,.07);
    overflow-x:auto; scrollbar-width:none;
    position:sticky; top:76px; z-index:50;
    background:rgba(3,10,18,.88); backdrop-filter:blur(18px);
}
.sp-tabs-bar::-webkit-scrollbar { display:none; }
.sp-tabs-bar a {
    display:inline-flex; align-items:center; gap:7px;
    height:52px; padding:0 16px;
    font-size:13.5px; font-weight:840;
    color:rgba(190,206,220,.68);
    border-bottom:3px solid transparent;
    transition:color .18s, border-color .18s;
    white-space:nowrap; position:relative; bottom:-1px;
}
.sp-tabs-bar a svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.sp-tabs-bar a:hover { color:#fff; }
.sp-tabs-bar a.active { color:#fff; border-bottom-color:var(--accent); }
.sp-tab-count { display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,.09);font-size:11px;font-weight:900; }

/* ── 2-col layout ──────────────────────────────────────────────── */
.sp-layout { display:grid; grid-template-columns:1fr 340px; gap:32px; margin-top:40px; align-items:start; }

/* ── Player ────────────────────────────────────────────────────── */
.sp-player-card { border-radius:22px; overflow:hidden; background:#050d18; border:1px solid rgba(255,255,255,.07); box-shadow:0 22px 60px rgba(0,0,0,.32); }
.sp-player-screen { position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; cursor:pointer; }
.sp-player-screen img { width:100%;height:100%;object-fit:cover;filter:brightness(.62);transition:filter .25s; }
.sp-player-screen:hover img { filter:brightness(.48); }
.sp-player-overlay { position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.60) 100%); }
.sp-play-btn { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);width:72px;height:72px;border-radius:50%;border:0;background:rgba(247,201,72,.94);color:#111;display:grid;place-items:center;cursor:pointer;transition:transform .22s,box-shadow .22s;box-shadow:0 18px 44px rgba(0,0,0,.38); }
.sp-play-btn svg { width:22px;height:22px;fill:#111;margin-left:3px; }
.sp-player-screen:hover .sp-play-btn { transform:translate(-50%,-50%) scale(1); }
.sp-player-progress { position:absolute;left:0;right:0;bottom:0;padding:0 20px 20px; }
.sp-progress-bar { height:4px;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden; }
.sp-progress-fill { height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),#ffac2f); }
.sp-player-footer { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-top:1px solid rgba(255,255,255,.06); }
.sp-pf-info strong { display:block;font-size:14.5px;font-weight:900; }
.sp-pf-info span { display:block;font-size:13px;color:rgba(170,186,202,.7);margin-top:3px; }
.sp-pf-episodes { font-size:13px;font-weight:860;color:var(--accent);white-space:nowrap; }

/* ── About ─────────────────────────────────────────────────────── */
.sp-about { margin-top:22px;padding:24px 26px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.065); }
.sp-about h3 { margin:0 0 14px;font-size:18px; }
.sp-about__text { font-size:14.5px;line-height:1.75;color:rgba(200,216,228,.82);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; }
.sp-about__text.expanded { display:block; }
.sp-toggle-desc { display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:none;border:0;color:var(--accent);font-weight:860;font-size:14px;cursor:pointer;padding:0; }
.sp-toggle-desc svg { width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;transition:transform .22s; }
.sp-toggle-desc.open svg { transform:rotate(180deg); }

/* ── Comments ──────────────────────────────────────────────────── */
.sp-comments { margin-top:22px;padding:24px 26px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.065); }
.sp-comments__head { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px; }
.sp-comments__head h3 { margin:0;font-size:18px;display:flex;align-items:center;gap:8px; }
.sp-write-btn { height:36px;padding:0 16px;border-radius:999px;background:rgba(247,201,72,.12);border:1px solid rgba(247,201,72,.28);color:var(--accent);font-weight:900;font-size:13px;cursor:pointer;transition:background .18s; }
.sp-write-btn:hover { background:rgba(247,201,72,.2); }
.sp-comment-form { margin-bottom:22px;padding:18px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08); }
.sp-cf-row { margin-bottom:12px; }
.sp-cf-row input,.sp-cf-row textarea { width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:11px 14px;color:#fff;font-size:14px;font-family:inherit;outline:none;resize:vertical; }
.sp-cf-row input::placeholder,.sp-cf-row textarea::placeholder { color:rgba(160,180,196,.5); }
.sp-cf-row input:focus,.sp-cf-row textarea:focus { border-color:rgba(247,201,72,.4); }
.sp-form-error { color:var(--danger);font-size:13px;margin:0 0 10px; }
.sp-form-ok { color:var(--accent-2);font-size:13px;margin:0 0 10px; }
.sp-comment-list { display:flex;flex-direction:column;gap:18px; }
.sp-comment { display:grid;grid-template-columns:40px 1fr;gap:14px; }
.sp-comment__avatar { width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,rgba(247,201,72,.28),rgba(247,201,72,.10));border:1px solid rgba(247,201,72,.22);display:grid;place-items:center;font-weight:950;font-size:15px;color:var(--accent);text-transform:uppercase;flex-shrink:0; }
.sp-comment__meta { display:flex;align-items:center;gap:10px;margin-bottom:7px; }
.sp-comment__meta strong { font-size:14px;font-weight:900; }
.sp-comment__meta time { font-size:12px;color:rgba(160,180,196,.6); }
.sp-comment__body > p { margin:0 0 10px;font-size:14px;line-height:1.65;color:rgba(206,218,228,.84); }
.sp-comment__actions { display:flex;align-items:center;gap:14px; }
.sp-like-form { display:inline-flex; }
.sp-like-btn { display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);color:rgba(180,196,212,.78);font-size:13px;font-weight:820;cursor:pointer;transition:background .18s,color .18s; }
.sp-like-btn svg { width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8; }
.sp-like-btn:hover { background:rgba(247,201,72,.14);color:var(--accent); }
.sp-reply-btn { background:none;border:0;font-size:13px;font-weight:820;color:rgba(160,180,196,.68);cursor:pointer;transition:color .18s; }
.sp-reply-btn:hover { color:#fff; }
.sp-load-more { display:block;margin:18px auto 0;height:40px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);color:rgba(200,216,228,.78);font-size:13.5px;font-weight:860;cursor:pointer;transition:background .18s; }
.sp-load-more:hover { background:rgba(255,255,255,.09);color:#fff; }
.sp-no-comments { text-align:center;padding:28px 0;color:rgba(160,180,196,.55); }
.sp-no-comments svg { width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;margin-bottom:12px; }
.sp-no-comments p { margin:0;font-size:14px; }

/* ── Sidebar ───────────────────────────────────────────────────── */
.sp-sidebar { display:flex;flex-direction:column;gap:18px;position:sticky;top:132px; }
.sp-sidebar-card { padding:22px;border-radius:20px;background:rgba(255,255,255,.032);border:1px solid rgba(255,255,255,.07); }
.sp-sidebar-card h3 { margin:0 0 16px;font-size:17px; }
.sp-card-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px; }
.sp-card-head h3 { margin:0; }
.sp-card-head a { font-size:13px;font-weight:860;color:var(--accent);white-space:nowrap; }
.sp-dl { display:grid;gap:11px; }
.sp-dl dt { font-size:11.5px;font-weight:860;text-transform:uppercase;letter-spacing:.5px;color:rgba(160,180,196,.65);margin-bottom:1px; }
.sp-dl dd { margin:0;font-size:14px;font-weight:820;color:rgba(235,244,252,.9); }
.sp-status-dot { display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle; }
.sp-status-dot.ended { background:rgba(160,180,196,.5); }
.sp-status-dot.ongoing { background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.18); }
.sp-rating-dd { display:inline-flex;align-items:center;gap:6px; }
.sp-rating-dd svg { width:14px;height:14px;fill:var(--accent); }
.sp-rating-dd em { color:rgba(160,180,196,.6);font-style:normal;font-size:12px; }
.sp-avg-rating { display:flex;align-items:baseline;gap:6px;margin-bottom:14px; }
.sp-avg-num { font-size:32px;font-weight:950;line-height:1;color:var(--accent); }
.sp-avg-rating span { font-size:13px;color:rgba(160,180,196,.7); }
.sp-stars { display:flex;gap:5px;margin-bottom:14px; }
.sp-star { flex:1;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.05);display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s; }
.sp-star svg { width:18px;height:18px;fill:none;stroke:rgba(180,196,212,.45);stroke-width:1.6;transition:.15s; }
.sp-star:hover svg,.sp-star.hovered svg,.sp-star.selected svg { fill:var(--accent);stroke:var(--accent); }
.sp-star:hover,.sp-star.hovered { background:rgba(247,201,72,.1);border-color:rgba(247,201,72,.25); }
.sp-star.selected { background:rgba(247,201,72,.12);border-color:rgba(247,201,72,.3); }
.sp-stars-row { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.sp-stars-label { font-size:13px;color:rgba(160,180,196,.7); }
.sp-rate-submit { height:36px;padding:0 16px;border-radius:10px;border:0;background:linear-gradient(135deg,var(--accent),#ffac2f);color:#111;font-weight:950;font-size:13.5px;cursor:pointer;transition:opacity .18s; }
.sp-rate-submit:disabled { opacity:.45;cursor:default; }
.sp-cast-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px; }
.sp-actor { text-align:center; }
.sp-actor__photo { aspect-ratio:1;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.06);margin-bottom:7px;border:2px solid rgba(255,255,255,.08); }
.sp-actor__photo img { width:100%;height:100%;object-fit:cover; }
.sp-actor strong { display:block;font-size:11.5px;font-weight:900;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sp-actor span { display:block;font-size:10.5px;color:rgba(160,180,196,.65);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sp-similar-list { display:flex;flex-direction:column;gap:11px; }
.sp-sim-item { display:grid;grid-template-columns:90px 1fr;gap:12px;border-radius:12px;overflow:hidden;transition:background .18s; }
.sp-sim-item:hover { background:rgba(255,255,255,.04); }
.sp-sim-poster { position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0b1824; }
.sp-sim-poster img { width:100%;height:100%;object-fit:cover;transition:transform .25s; }
.sp-sim-item:hover .sp-sim-poster img { transform:scale(1.06); }
.sp-sim-play { position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);opacity:0;color:rgba(247,201,72,.9);font-size:16px;transition:opacity .18s; }
.sp-sim-item:hover .sp-sim-play { opacity:1; }
.sp-sim-info { display:flex;flex-direction:column;justify-content:center;gap:4px;padding:2px 0; }
.sp-sim-info strong { font-size:13px;font-weight:900;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.sp-sim-info span { font-size:11.5px;color:rgba(160,180,196,.65); }

/* ── Episodes ──────────────────────────────────────────────────── */
.sp-episodes-section { margin-top:58px; }
.sp-sec-head { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px; }
.sp-sec-sub { display:block;font-size:11px;font-weight:860;text-transform:uppercase;letter-spacing:.65px;color:rgba(160,180,196,.7);margin-bottom:5px; }
.sp-sec-head h2 { margin:0;font-size:26px;letter-spacing:-.5px; }
.sp-see-all { font-size:13.5px;font-weight:860;color:var(--accent);white-space:nowrap; }
.sp-ep-toolbar { display:flex;align-items:center;gap:10px; }
.sp-ep-toolbar span { font-size:13px;color:rgba(160,180,196,.7); }
.sp-sort-sel { height:34px;padding:0 12px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:13px;font-weight:820;cursor:pointer;outline:none; }
.sp-season-pills { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px; }
.sp-season-pills button { height:36px;padding:0 16px;border-radius:10px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);color:rgba(210,224,234,.78);font-size:13.5px;font-weight:860;cursor:pointer;transition:background .18s,color .18s,border-color .18s; }
.sp-season-pills button:hover { background:rgba(255,255,255,.09);color:#fff; }
.sp-season-pills button.active { background:linear-gradient(135deg,var(--accent),#ffac2f);color:#111;border-color:transparent;box-shadow:0 8px 22px rgba(247,201,72,.2); }
.sp-season-panel { display:none; }
.sp-season-panel.active { display:block; }
.sp-ep-carousel { position:relative; }
.sp-ep-row { display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 14px;scrollbar-width:none; }
.sp-ep-row::-webkit-scrollbar { display:none; }
.sp-ep-card { flex:0 0 clamp(200px,20vw,260px);border-radius:16px;background:rgba(255,255,255,.032);border:1px solid rgba(255,255,255,.07);overflow:hidden;scroll-snap-align:start;transition:border-color .2s,transform .2s,box-shadow .2s; }
.sp-ep-card:hover { border-color:rgba(247,201,72,.28);transform:translateY(-4px);box-shadow:0 16px 42px rgba(0,0,0,.26); }
.sp-ep-thumb { position:relative;aspect-ratio:16/9;background:#0a1624;overflow:hidden; }
.sp-ep-thumb img { width:100%;height:100%;object-fit:cover;transition:transform .28s; }
.sp-ep-card:hover .sp-ep-thumb img { transform:scale(1.05); }
.sp-ep-play { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);width:38px;height:38px;border-radius:50%;border:0;background:rgba(247,201,72,.92);color:#111;font-size:12px;cursor:pointer;opacity:0;transition:opacity .2s,transform .2s; }
.sp-ep-card:hover .sp-ep-play { opacity:1;transform:translate(-50%,-50%) scale(1); }
.sp-ep-dur { position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:3px 8px;font-size:11px;font-weight:900;font-style:normal;color:#fff; }
.sp-ep-info { padding:12px 13px 13px; }
.sp-ep-num { display:block;font-size:11px;font-weight:860;text-transform:uppercase;letter-spacing:.45px;color:rgba(160,180,196,.6);margin-bottom:4px; }
.sp-ep-info strong { display:block;font-size:13.5px;font-weight:900;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sp-ep-info p { margin:6px 0 0;font-size:12px;color:rgba(160,180,196,.7);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.sp-ep-nav { position:absolute;top:50%;transform:translateY(calc(-50% - 7px));z-index:5;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(8,18,28,.72);backdrop-filter:blur(12px);color:#fff;font-size:26px;line-height:1;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s,background .18s,color .18s; }
.sp-ep-carousel:hover .sp-ep-nav,.sp-rec-carousel:hover .sp-ep-nav { opacity:1; }
.sp-ep-nav:hover { background:rgba(247,201,72,.9);color:#111;border-color:transparent; }
.sp-ep-prev { left:-16px; }
.sp-ep-next { right:-16px; }

/* ── Recommended ───────────────────────────────────────────────── */
.sp-recommended { margin-top:58px; }
.sp-rec-carousel { position:relative; }
.sp-rec-row { display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 14px;scrollbar-width:none; }
.sp-rec-row::-webkit-scrollbar { display:none; }
.sp-rec-card { flex:0 0 clamp(130px,13vw,170px);scroll-snap-align:start;border-radius:14px;overflow:hidden;transition:transform .22s; }
.sp-rec-card:hover { transform:translateY(-5px); }
.sp-rec-poster { position:relative;aspect-ratio:2/3;background:#0a1624;border-radius:14px;overflow:hidden; }
.sp-rec-poster img { width:100%;height:100%;object-fit:cover;transition:transform .28s,filter .28s; }
.sp-rec-card:hover .sp-rec-poster img { transform:scale(1.05);filter:brightness(.78); }
.sp-rec-card .play-float { width:44px;height:44px;font-size:13px; }
.sp-rec-info { padding:9px 2px 0; }
.sp-rec-info strong { display:block;font-size:13px;font-weight:900;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sp-rec-info span { display:block;margin-top:4px;font-size:11px;color:rgba(160,180,196,.65); }

/* ── Responsive ────────────────────────────────────────────────── */
@media(max-width:1100px){
    .sp-layout { grid-template-columns:1fr 300px;gap:24px; }
}
@media(max-width:900px){
    .sp-layout { grid-template-columns:1fr; }
    .sp-sidebar { position:static;display:grid;grid-template-columns:repeat(2,1fr); }
    .sp-hero__layout { grid-template-columns:minmax(0,560px) 1fr; }
}
@media(max-width:680px){
    .sp-hero__inner { padding-top:96px;padding-bottom:48px; }
    .sp-hero__left h1 { font-size:34px; }
    .sp-sidebar { grid-template-columns:1fr; }
    .sp-tabs-bar a { font-size:12.5px;padding:0 12px;height:48px; }
}
@media(max-width:480px){
    .sp-hero__layout { grid-template-columns:1fr; }
    .sp-actions .sp-watch-btn { width:100%;justify-content:center; }
}