/* =====================================================================
   Streaming theme - dark video-platform homepage
   Scoped to the homepage only (loaded via the "styles" section of
   themes/streaming/index.php). Does NOT affect other pages/themes.
   Inspired by modern streaming UIs; no third-party code/assets used.
   ===================================================================== */

.streaming-home {
    --sv-bg: #0b0b0f;
    --sv-surface: #16161d;
    --sv-surface-2: #1d1d26;
    --sv-elevated: #24242f;
    --sv-border: rgba(255, 255, 255, .08);
    --sv-text: #f5f5f7;
    --sv-muted: #a1a1aa;
    --sv-accent: var(--vr-theme-color, #19bc9c);
    --sv-radius: 14px;
    --sv-gap: 14px;
    color: var(--sv-text);
    padding-bottom: 40px;
}

/* Make the whole homepage dark (file only loads on this page) */
body.body-index-page {
    background: var(--sv-bg);
}

/* Header styling lives in header.css (applies across the whole theme). */

.streaming-home .sv-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.streaming-home .container-xl,
.streaming-home > .sv-section > .container-xl {
    max-width: 1280px;
}

.streaming-home .sv-section {
    margin-top: 34px;
}

/* First row directly under the hero: no gap, so the hero's bottom fade
   flows straight into it. A little top padding keeps the heading off the edge.
   Scoped to the hero's immediate sibling only - other rows keep their 34px. */
.streaming-home .rmc-hero-wrap + .sv-section {
    margin-top: 0;
    padding-top: 8px;
}

.streaming-home .sv-ad {
    margin: 28px auto;
    text-align: center;
}

/* ---------- Section headers ---------- */
.streaming-home .sv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
}

.streaming-home .sv-head .sv-title {
    font-size: clamp(1.05rem, 1.6vw, 1.45rem);
    font-weight: 800;
    letter-spacing: .2px;
    margin: 0;
    color: var(--sv-text);
    position: relative;
    padding-inline-start: 14px;
}

.streaming-home .sv-head .sv-title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 1.05em;
    border-radius: 4px;
    background: var(--sv-accent);
}

.streaming-home .sv-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.streaming-home .sv-viewall {
    color: var(--sv-muted);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}

.streaming-home .sv-viewall:hover {
    color: var(--sv-text);
}

.streaming-home .sv-nav {
    
    color: var(--sv-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease, transform .15s ease;
}

.streaming-home .sv-nav:hover {
  
}

.streaming-home .sv-nav:disabled {
    opacity: .35;
    cursor: default;
}

.streaming-home .sv-nav svg {
    width: 18px;
    height: 18px;
}

[dir="rtl"] .streaming-home .sv-nav svg {
    transform: scaleX(-1);
}

/* ---------- RMC HERO (carousel) ---------- */
/* Full-width dark wrap: paints #05070b edge-to-edge behind the boxed banner,
   so on wide screens the centered hero shows dark gutters on the sides. */
.streaming-home .rmc-hero-wrap {
    width: 100%;
    background: #05070b;
}

/* <section.rmc-hero>: full-bleed streaming banner inside .rmc-hero-wrap.
   The media is boxed/centered; inner alignment is done by inner wrappers
   (.rmc-hero-content, the header), not by stretching the box. */
.streaming-home .rmc-hero {
    position: relative;
    width: 100%;
    min-height: 720px;
    /* overflow:visible (not 'hidden' as in the raw spec) so the header dropdowns /
       mega-menus are never clipped - the media is already clipped by the slider,
       so the boxed look is identical either way. */
    overflow: visible;
    background: #05070b;
}

/* NOTE: the bottom "merge into next section" fade is NOT a hero-level ::after.
   The content/title/buttons live inside the Swiper slider, whose .swiper-wrapper
   gets a transform (its own stacking context). A hero-level overlay would paint
   ABOVE that whole layer and cover the content (most visibly on mobile, where the
   content sits near the bottom). So the bottom fade is part of the per-slide
   .rmc-hero-gradient overlay (z-index 2) instead - guaranteed below content
   (z-index 4) and controls/header (z-index 5), while still ending on the page
   background so the hero blends into the row below. */

/* Homepage: the hero starts at the very top of the page - no spacing/bar above it */
body.body-index-page { margin: 0; }
body.body-index-page main { margin: 0; padding-top: 0; }
.streaming-home { padding-top: 0; }

/* The overlaid header floats over the media with NO background / bar / border */
.streaming-home .rmc-hero-header,
.streaming-home .rmc-hero-header .mega-menu-wrapper,
.streaming-home .rmc-hero-header .mega-menu-wrapper.sv-header,
.streaming-home .rmc-hero-header .mobile-header,
.streaming-home .rmc-hero-header .topbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Slider fills the full-bleed hero and clips the cover media (not the dropdowns) */
.streaming-home .rmc-hero-slider {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.streaming-home .rmc-hero-slider .swiper-wrapper {
    height: 100%;
}

.streaming-home .rmc-hero-slider .swiper-slide {
    height: 100%;
}

.streaming-home .rmc-hero-slide {
    position: relative;
    height: 100%;
}

/* ----- Header bar overlaid at the top of the hero (matches the full-bleed banner) ----- */
.streaming-home .rmc-hero-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    padding: 0 32px;
    height: 84px;
    display: flex;
    align-items: center;
    background: transparent;
}

/* The single visible header child (desktop wrapper or mobile-header) fills the bar */
.streaming-home .rmc-hero-header > * {
    flex: 1 1 auto;
    min-width: 0;
}

/* Render the navbar/menu like the inner-page header (its own flow), so the
   mega-menu/dropdowns position correctly. Only widen the container + side pad. */
.streaming-home .rmc-hero-header .mega-menu-wrapper {
    margin-bottom: 0;
    min-height: 0;
}

/* Menu dropdowns / mega-menus: solid dark panel, drop just below the nav,
   and sit above the hero media + content (header creates the z-context). */
.streaming-home .rmc-hero-header .megamenu,
.streaming-home .rmc-hero-header .standard-dropdown,
.streaming-home .rmc-hero-header .dropdown-menu {
    z-index: 60;
}

/* The mega-menu must span the full header width. Keep the <li> static (like on
   inner pages) so the panel anchors to the full-width container, not the item,
   otherwise its columns collapse to one character per line. */
.streaming-home .rmc-hero-header .nav-item.has-megamenu,
.streaming-home .rmc-hero-header .has-megamenu {
    position: static;
}

.streaming-home .rmc-hero-header .megamenu {
    left: 0;
    right: 0;
    width: 100%;
}

/* Header fills the boxed bar; the 32px side gutter is on .rmc-hero-header itself */
.streaming-home .rmc-hero-header .container-xl {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Fixed "glass" palette so the header stays readable over the media in any mode */
.streaming-home .rmc-hero-header .mega-menu-wrapper.sv-header,
.streaming-home .rmc-hero-header .mobile-header {
    --sv-text: #ffffff;
    --sv-muted: rgba(255, 255, 255, .82);
    --sv-bg: transparent;
    --sv-bg-2: rgba(0, 0, 0, .38);
    --sv-surface: #14141c;
    --sv-surface-2: #1c1c26;
    --sv-elevated: #23232f;
    --sv-border: rgba(255, 255, 255, .22);
    --mn-bg-dropdown: #14141c;
    --mn-bg-hover: #23232f;
    --mn-text-main: #ffffff;
    --mn-text-sub: rgba(255, 255, 255, .82);
    --mn-border: rgba(255, 255, 255, .14);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.streaming-home .rmc-hero-header .js-logo-light { display: none !important; }
.streaming-home .rmc-hero-header .js-logo-dark { display: inline-block !important; }

.streaming-home .rmc-hero-header .mobile-header {
    position: absolute;
    border-bottom: none !important;
}
.streaming-home .rmc-hero-header .mobile-header-spacer {
    display: none;
}

/* Media: full-bleed cover - explicitly the back layer of the slide */
.streaming-home .rmc-hero-media {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.streaming-home .rmc-hero-media img,
.streaming-home .rmc-hero-media video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Dark overlay over the media (left readability + top->bottom dark for the content).
   z-index 2: above media (z1), below content (z5) so it never covers the text. */
.streaming-home .rmc-hero-gradient {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 7, 12, .85), rgba(5, 7, 12, .35), rgba(5, 7, 12, .1)),
        linear-gradient(180deg, rgba(5, 7, 12, .25) 0%, rgba(5, 7, 12, .18) 42%, rgba(5, 7, 12, .68) 78%, var(--sv-bg) 100%);
}

/* RTL: mirror the left->right readability gradient */
[dir="rtl"] .streaming-home .rmc-hero-gradient {
    background:
        linear-gradient(270deg, rgba(5, 7, 12, .85), rgba(5, 7, 12, .35), rgba(5, 7, 12, .1)),
        linear-gradient(180deg, rgba(5, 7, 12, .25) 0%, rgba(5, 7, 12, .18) 42%, rgba(5, 7, 12, .68) 78%, var(--sv-bg) 100%);
}

/* Content: category / meta / title / description / buttons (bottom-left).
   Inner wrapper only - the hero box is never a card. */
.streaming-home .rmc-hero-content {
    position: absolute;
    z-index: 5;
    left: 70px;
    bottom: 145px;
    max-width: 520px;
    background: none;     /* text sits directly on the media - never a card */
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

[dir="rtl"] .streaming-home .rmc-hero-content {
    left: auto;
    right: 70px;
    align-items: flex-end;
    text-align: right;
}

.streaming-home .rmc-hero-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.streaming-home .rmc-hero-cat {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
    text-decoration: none;
    background: var(--sv-cat, var(--sv-accent));
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.streaming-home .rmc-hero-type {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.streaming-home .rmc-hero-date {
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.streaming-home .rmc-hero-title {
    margin: 0;
    font-weight: 800;
    line-height: 1.12;
    font-size: clamp(1.6rem, 3.6vw, 3rem);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.streaming-home .rmc-hero-title a {
    color: #fff;
    text-decoration: none;
}

.streaming-home .rmc-hero-desc {
    margin: 0;
    max-width: 560px;
    font-size: .98rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.streaming-home .rmc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.streaming-home .rmc-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .15s ease, filter .15s ease, background .15s ease;
}

.streaming-home .rmc-hero-btn svg {
    width: 18px;
    height: 18px;
}

.streaming-home .rmc-hero-btn-primary {
    background: var(--sv-accent);
    color: var(--sv-accent-ink);
}

.streaming-home .rmc-hero-btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.streaming-home .rmc-hero-btn-secondary {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.streaming-home .rmc-hero-btn-secondary:hover {
    background: rgba(255, 255, 255, .26);
}

/* ----- Controls: arrows + dots (overlay layer over the banner) ----- */
.streaming-home .rmc-hero-controls {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    pointer-events: none;
}

.streaming-home .rmc-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: .85;
    pointer-events: auto;
    transition: opacity .2s ease, background .2s ease;
}

.streaming-home .rmc-hero:hover .rmc-hero-arrow {
    opacity: 1;
}

.streaming-home .rmc-hero-arrow:hover {
    background: var(--sv-accent);
    color: var(--sv-accent-ink);
    opacity: 1;
}

.streaming-home .rmc-hero-prev { inset-inline-start: 14px; }
.streaming-home .rmc-hero-next { inset-inline-end: 14px; }
.streaming-home .rmc-hero-arrow svg { width: 22px; height: 22px; }
[dir="rtl"] .streaming-home .rmc-hero-arrow svg { transform: scaleX(-1); }

.streaming-home .rmc-hero-dots {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 7px;
    pointer-events: auto;
}

.streaming-home .rmc-hero-dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    opacity: 1;
    transition: width .2s ease, background .2s ease;
}

.streaming-home .rmc-hero-dots .swiper-pagination-bullet-active {
    width: 22px;
    background: var(--sv-accent);
}

/* ----- Mobile / tablet (the hamburger header range) ----- */
@media (max-width: 991.98px) {
    .streaming-home .rmc-hero { min-height: 620px; }
    .streaming-home .rmc-hero-header { height: 64px; padding: 0 18px; }

    /* Mobile header layout: logo left, Alert Us + search + hamburger right
       (re-ordered via flexbox only - the shared nav_mobile markup is untouched) */
    .streaming-home .rmc-hero-header .mobile-header .header-logo { order: 1; margin-inline-end: auto; }
    .streaming-home .rmc-hero-header .mobile-header .header-alert-us-btn { order: 2; }
    .streaming-home .rmc-hero-header .mobile-header #searchToggleBtn { order: 3; margin-inline-start: .25rem; }
    .streaming-home .rmc-hero-header .mobile-header [data-bs-target="#mobileMenu"] { order: 4; margin-inline-start: .25rem; }

    /* Hero content sits lower; featured content (incl. description) stays visible */
    .streaming-home .rmc-hero-content { left: 18px; right: 18px; top: auto; bottom: 92px; max-width: 100%; gap: 10px; }
    .streaming-home .rmc-hero-title { -webkit-line-clamp: 2; }
    .streaming-home .rmc-hero-arrow { display: none; }
    .streaming-home .rmc-hero-dots { bottom: 18px; }
}

/*  .streaming-home .sv-live-channels {*/
/*            position: relative;*/
/*            background: #111113;*/
/*            margin-top: -50px;*/
/*            padding-top: 30px;*/
/*            z-index: 20;*/
/*        }*/
/*.streaming-home .sv-live-channels::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  left: 0;*/
/*  right: 0;*/
/*  top: -85px;*/
/*  height: 100px;*/
/*  pointer-events: none;*/
/*  z-index: -1;*/
/*  background: linear-gradient( to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(40, 40, 40, 0.5) 20%, rgba(40, 40, 40, 0.8) 70%, #111113 100% );*/
/*  filter: blur(10px);*/
/*  border-radius: unset;*/
/*}*/
  
@media (max-width: 575px) {
    .streaming-home .rmc-hero-content { bottom: 60px; gap: 20px; }
    .streaming-home .rmc-hero-dots { bottom: 14px; }
    .streaming-home .rmc-hero { min-height: 350px; }
    .streaming-home .rmc-hero-title { font-size: 1.25rem }
    .streaming-home .rmc-hero-btn{  padding: 5px 15px !important;  font-size: .75rem !important;}
    .streaming-home .rmc-hero-desc{  font-size: .75rem !important;}
     .streaming-home .rmc-hero-cat,.streaming-home .rmc-hero-type{  font-size: .5rem !important;}
     /*.streaming-home .rmc-hero-slider{  top: 64px;}*/
     /*.search-overlay{display: none;}*/
      .footer-social-links a{  height: 2rem;   width: 2rem;}
      

html[data-bs-theme="light"] .streaming-home .sv-live-channels {
    position: relative;
    margin-top: unset !important;
    padding-top: 15px;
    z-index: 9;
  }

html[data-bs-theme="light"] .streaming-home .sv-live-channels::before {
content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -19px;
    height: 60px;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient( to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%, #fff 100% );
    filter: blur(20px);
    border-radius: 0;
  }



      .streaming-home .sv-live-channels {
            position: relative;

            margin-top: -50px;
            padding-top: 15px;
            z-index: 9;
        }

  .streaming-home .sv-live-channels::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -35px;
    height: 60px;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient( to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(40, 40, 40, 0.5) 20%, rgba(40, 40, 40, 0.8) 70%, #111113 100% );
    filter: blur(10px);
    border-radius: unset;
  }
  
}

/* Empty-media fallback background (shared by the cards) */
.streaming-home .sv-img-empty {
    background: linear-gradient(135deg, #1d1d26, #2a2a36);
}

/* ---------- Category chip / badge ---------- */
.streaming-home .sv-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    text-decoration: none;
    color: #fff;
    /* Keep label legible even when the category colour is light */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
    background: var(--sv-cat, var(--sv-accent));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
    z-index: 3;
    width: max-content;
}

/* Play overlay button */
.streaming-home .sv-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.9);
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(11, 11, 15, .55);
    border: 2px solid rgba(255, 255, 255, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.streaming-home .sv-play svg {
    width: 22px;
    height: 22px;
    fill: #fff;
    margin-inline-start: 3px;
}

.streaming-home .sv-card:hover .sv-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* LIVE badge */
.streaming-home .sv-live {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 6px;
    background: #e50914;
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .6px;
}

.streaming-home .sv-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: sv-pulse 1.4s infinite;
}

@keyframes sv-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

/* ---------- Channels row ---------- */
.streaming-home .sv-channels {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.streaming-home .sv-channels::-webkit-scrollbar {
    display: none;
}

.streaming-home .sv-channel {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    color: var(--sv-text);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.streaming-home .sv-channel:hover {
    background: var(--sv-elevated);
    transform: translateY(-2px);
}

.streaming-home .sv-channel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sv-ch, var(--sv-accent));
}

/* ---------- Direct / Live Channels ---------- */
.streaming-home .sv-live-strip {
    display: flex;
    gap: var(--sv-gap);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 4px 2px 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.streaming-home .sv-live-strip::-webkit-scrollbar {
    display: none;
}

.streaming-home .sv-live-tile {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 210px;
    aspect-ratio: 16 / 9;
    border-radius: var(--sv-radius);
    overflow: hidden;
    border: 1px solid var(--sv-border);
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    padding: 12px;
    /* Dark gradient over the channel/category colour */
    background-image: linear-gradient(150deg, rgba(7, 8, 12, .35) 0%, rgba(7, 8, 12, .96) 78%);
    background-color: var(--tile-color, #1d1d26);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.streaming-home .sv-live-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
}

.streaming-home .sv-live-name {
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.2;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.streaming-home .sv-live-badge {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 6px;
    background: #e50914;
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

@media (max-width: 575px) {
    .streaming-home .sv-live-tile { width: 150px; }
    .streaming-home .sv-live-name { font-size: .9rem; }
}

/* ---------- Horizontal rail (scroll-snap, native lazy load) ---------- */
.streaming-home .sv-rail-viewport {
    position: relative;
}

.streaming-home .sv-track {
    display: flex;
    gap: var(--sv-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 8px 2px 16px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.streaming-home .sv-track::-webkit-scrollbar {
    display: none;
}

.streaming-home .sv-card {
    flex: 0 0 auto;
    width: 244px;
    scroll-snap-align: start;
}

@media (min-width: 1400px) {
    .streaming-home .sv-card { width: 262px; }
}

@media (max-width: 991px) {
    .streaming-home .sv-card { width: 220px; }
}

@media (max-width: 575px) {
    /* Mobile: cards span ~76vw so the next card peeks (streaming app feel) */
    .streaming-home .sv-card { width: 76vw; max-width: 320px; }
}

/* ---------- 16:9 streaming card ---------- */
.streaming-home .sv-card {
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.streaming-home .sv-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .5);
}

.streaming-home .sv-card .sv-poster {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--sv-surface-2);
    aspect-ratio: 16 / 9;
    text-decoration: none;
}

.streaming-home .sv-card .sv-poster img,
.streaming-home .sv-card .sv-poster .sv-img-empty {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

/* Hover zoom */
.streaming-home .sv-card:hover .sv-poster img {
    transform: scale(1.08);
}

.streaming-home .sv-card .sv-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 11, 15, 0) 50%, rgba(11, 11, 15, .82) 100%);
    opacity: .8;
    transition: opacity .2s ease;
    pointer-events: none;
}

.streaming-home .sv-card:hover .sv-poster::after {
    opacity: 1;
}

/* Category badge (bottom-left over poster) */
.streaming-home .sv-card .sv-poster .sv-chip {
    position: absolute;
    bottom: 10px;
    inset-inline-start: 10px;
}

/* Duration / date badge (bottom-right over poster) */
.streaming-home .sv-timecode {
    position: absolute;
    bottom: 10px;
    inset-inline-end: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(11, 11, 15, .82);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    backdrop-filter: blur(2px);
}

.streaming-home .sv-timecode.is-duration {
    font-variant-numeric: tabular-nums;
}

.streaming-home .sv-timecode .sv-tc-icon {
    width: 12px;
    height: 12px;
    opacity: .85;
}

/* Dark card body - title only, no large excerpt */
.streaming-home .sv-card-body {
    padding: 12px 13px 14px;
    background: var(--sv-surface);
}

.streaming-home .sv-card-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.streaming-home .sv-card-title a {
    color: var(--sv-text);
    text-decoration: none;
}

.streaming-home .sv-card-title a:hover {
    color: var(--sv-accent);
}

/* Keep platform post-badges (premium/media) readable on dark posters */
.streaming-home .badge-premium,
.streaming-home .media-icon {
    z-index: 3;
}

@media (max-width: 575px) {
    /* Hide the rail prev/next arrows on phones (native swipe) */
    .streaming-home .sv-nav {
        display: none;
    }
}