/*
Theme Name: StreamVid Child
Theme URI: https://streamvid.jwsuperthemes.com
Template: streamvid
Author: the JWSThemes team
Author URI: https://jwsuperthemes.com
Description: StreamVid is a WordPress video streaming theme with an attention-grabbing style that will capture everyone's attention right away. It is a tool with numerous useful features and ready-made page layouts for launching websites quickly. It is a WordPress streaming video with a paid subscription that has excellent and cutting-edge capabilities to operate and maintain a live broadcast. It also includes the WooCommerce plugin, allowing you to sell any item on your website. Additionally, StreamVid has a ton of ad slots for revenue generation.
Tags: one-column,flexible-header,accessibility-ready,custom-colors,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,rtl-language-support,sticky-post,threaded-comments,translation-ready
Version: 6.9.5
Updated: 2026-03-10 09:21:10
*/

:root {
  --main: #7b61ff;
  --secondary: #a3714e;
  --light: #ffffff;
  --dark: #000000;
  --heading: #ffffff;
  --body: #cccdd2;
  --body2: #a1a0a1;
  --bodybg: #00031c;
  --btn-bgcolor: #9e61ff;
  --btn-color: #ffffff;
  --btn-bgcolor2: #619bff;
  --btn-color2: #ffffff;
  --btn-bgcolor3: #6c52ee;
  --font-size-sm: 14px;
  --line-height-sm: 19.6px;
  --input-background: #191c33;
  --input-background2: #31344b;
  --background-item: #191c33;
  --background-body: #00031c;
  --border-color: #292c41;
  --border-color2: #80818d;
  --full-fd: 70px;
}
@media (max-width: 767px) {
  :root {
    --font-size-sm: 12px;
    --line-height-sm: 16px;
  }
}

/*
Hiding menu elements
*/

.elementor-widget-jws_account {
    display:none!important;
}
.elementor-element-62603db {
    display:none!important;
}
.elementor-element-a6bc395 {
    display:none!important;
}

/*
Padding left menu
*/
.elementor-element-9132a2b {
    padding-left:50px!important;
}

h4 {
padding-top:25px;
}

/*
Hiding carousel buttons (More info + watchlist "+") on homepage slider - 2026-05-13
Belt-and-suspenders: parent theme PHP has been edited to remove these from the HTML,
but if the parent theme is ever updated and re-installs the buttons, this CSS keeps them hidden.
*/
.video-content-holder .video-play .btn-main.btn-more.button-custom,
.video-content-holder .video-play .btn-right.watchlist-add {
    display: none !important;
}

/*
Movie /play/ page - hide back link & action bar + leave room to peek at
content below the player on desktop
2026-05-13 (v4)

Changes vs v3:
  - The action bar (Watchlist / Playlist / Favorites / Share / lightbulb) is
    now hidden on ALL platforms (mobile + desktop) per client request.
  - Chrome value increased from 180px to 300px so the player no longer fills
    the entire viewport vertically. The extra ~120px lets the user see a
    peek of the content section (image card + description) below the player,
    indicating there's more if they scroll.

Chrome budget (300px breakdown):
  - Site nav header: ~70px
  - Container margins above + below player: ~40px
  - Peek of next section (image + description start): ~170px
  - Safety buffer: ~20px

Two knobs you can tweak:
  - Want MORE content peeking below? Increase 300 -> 350 etc.
  - Want a TALLER player with less peek? Decrease 300 -> 250 etc.
*/

/* Hide the "Watch <title>" back link above the player (all viewports) */
.single-global-v2-play .jws-movie-play-banner .back-movie-detail {
    display: none !important;
}

/* Hide the bottom action bar (Watchlist/Playlist/Favorites/Share/lightbulb) on all viewports */
.single-global-v2-play .jws-movie-play-banner .jws-controls {
    display: none !important;
}

@media (min-width: 992px) {
    /* Relax any horizontal constraint on the outer wrapper */
    .single-global-v2-play .jws-movie-play-banner .jws-player-global {
        max-width: 100% !important;
    }

    /* Size the actual player so it fills most of the viewport but leaves
       room for a peek of the content section below */
    .single-global-v2-play .jws-movie-play-banner .videos_player {
        height: calc(100vh - 300px) !important;
        width: calc((100vh - 300px) * 16 / 9) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Force the iframe / native player element to fill the resized container */
    .single-global-v2-play .jws-movie-play-banner .videos_player > iframe,
    .single-global-v2-play .jws-movie-play-banner .videos_player .jws_player,
    .single-global-v2-play .jws-movie-play-banner .videos_player #videos_player,
    .single-global-v2-play .jws-movie-play-banner .videos_player video,
    .single-global-v2-play .jws-movie-play-banner .videos_player .mejs-container,
    .single-global-v2-play .jws-movie-play-banner .videos_player .plyr {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }
}

/*
Homepage slider - on DESKTOP only, place the category tags (Music video, 100% AI)
on the same row as the meta info (DIRECTOR, G, year, duration) AND vertically
center-align all of them so the tags share the same baseline.
Mobile keeps the original two-row stacked layout. - 2026-05-14 (v2)

Breakpoint: 768px (matches theme's standard mobile/desktop boundary).

Vertical alignment strategy:
  - Both wrapper divs use inline-flex (so they sit on the same horizontal line)
  - Both use vertical-align: middle (so their centers align in the line box)
  - Both use align-items: center (so their inner items center within them)
  - Margins are reset to 0 so neither wrapper is offset from the other
  - All direct children of both wrappers use align-self: center as a final
    safeguard against any parent-theme rule pushing a single tag up/down
*/
@media (min-width: 768px) {
    .video-content-holder .video-inner .jws-meta-info-extra,
    .video-content-holder .video-inner .jws-category-extra {
        display: inline-flex !important;
        vertical-align: middle !important;
        align-items: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1;
    }
    .video-content-holder .video-inner .jws-category-extra {
        margin-left: 12px !important;
    }
    /* Belt-and-suspenders: align every child tag to the same horizontal center */
    .video-content-holder .video-inner .jws-meta-info-extra > *,
    .video-content-holder .video-inner .jws-category-extra > * {
        align-self: center !important;
        vertical-align: middle !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* (a) Add 10px gap before the excerpt text on desktop */
    .video-content-holder .video-inner .video-description {
        padding-top: 10px;
    }
}

/*
Mobile-only slider tweaks - 2026-05-14 (v2)
  1) Hide all carousel navigation elements on mobile:
     - Owl Carousel pagination dots (.owl-dots)
     - Thumbnail nav strip with round movie posters (.video-thumbnail-nav)
     - Defensive: Slick/Swiper pagination if theme ever switches libraries
  2) Move the excerpt text to appear BELOW (after) the Play Now button on mobile.
     This is done with flexbox order on .video-inner: the source order has
     description before play-button, but flexbox order overrides DOM order
     for visual placement.
*/
@media (max-width: 767px) {
    /* 1) Hide carousel navigation: pagination dots AND thumbnail nav strip */
    .jws-slider_video-element .owl-dots,
    .jws-slider_video-element .video-thumbnail-nav,
    .jws-slider_video-element .slick-dots,
    .jws-slider_video-element .swiper-pagination,
    /* belt-and-suspenders: also outside the widget wrapper in case of different markup */
    .video-thumbnail-nav {
        display: none !important;
    }

    /* 2) Reorder slide contents so excerpt appears AFTER the Play Now button.
       Make .video-inner a vertical flex container, then assign higher order
       to .video-description so it visually moves to the end. */
    .video-content-holder .video-inner {
        display: flex !important;
        flex-direction: column;
    }
    .video-content-holder .video-inner > * {
        order: 1;
    }
    .video-content-holder .video-inner .video-play {
        order: 998;
    }
    .video-content-holder .video-inner .video-description {
        order: 999;
        display: block !important;
        margin-bottom: 12px;
    }

    /* 3) Vertical breathing room on mobile:
       - 20px padding above the slide title
       - 20px padding above the excerpt (now sits below Play Now) */
    .video-content-holder .video-inner .video_title,
    .video-content-holder .video-inner .title-images {
        padding-top: 20px;
    }
    .video-content-holder .video-inner .video-description {
        padding-top: 20px;
        margin-top: 0;
    }
}

/* ========================================================================
   Movie /play/ page (single-global-v2-play) - 2026-05-14
   ------------------------------------------------------------------------
   - Hide: left poster image, rating, "More Information" link, comments
   - Reorder sidebar so Crew (was Cast) widget sits ABOVE the MEGA SALE ad
   - Mobile: force-show .movie-detail / .movie-info / .jws-description and
     add slider-style top padding to the title and excerpt
   - The "Cast" -> "Crew" change is done via a PHP override of
     post-cast-sidebar.php in the child theme. CSS hooks (.global-cast) are
     preserved so parent theme styling continues to apply.
   ======================================================================== */

/* Hide unwanted elements on ALL viewports */
.single-global-v2-play .movie-detail .jws-images,
.single-global-v2-play .movie-info .jws-rating,
.single-global-v2-play .jws-description > a,
.single-global-v2-play #reviews {
    display: none !important;
}

/* Reorder sidebar: the Crew widget (still uses .global-cast class) moves
   to the top, above the MEGA SALE ad widget. Uses :has() to pick the
   right widget regardless of how many siblings exist. */
.single-global-v2-play .jws-sidebar {
    display: flex !important;
    flex-direction: column;
}
.single-global-v2-play .jws-sidebar > .sidebar-widget:has(.global-cast) {
    order: -1;
}

/* Mobile-specific tweaks for the /play/ page:
   - Force visibility of .movie-detail (parent theme hides it on some
     "version-video-global" configurations on mobile)
   - Mirror the slider mobile spacing: 20px padding on title and excerpt */
@media (max-width: 767px) {
    body .single-global-v2-play .movie-detail,
    body .single-global-v2-play .movie-info,
    body .single-global-v2-play .jws-description {
        display: block !important;
    }
    .single-global-v2-play .movie-info .jws-video-title {
        padding-top: 20px;
    }
    .single-global-v2-play .jws-description {
        padding-top: 20px;
    }
}

/* ========================================================================
   Movie /play/ page - layout restructuring (2026-05-14, v2)
   ------------------------------------------------------------------------
   These rules pair with the new child-theme PHP overrides:
     - content-single-v4-play.php (moves Crew section out of sidebar)
     - post-meta-info.php (adds movies_cat next to genres)
     - post-cast-sidebar.php (now uses the bigger horizontal layout)
   ======================================================================== */

/* Stack the .movie-detail children vertically.
   Parent theme makes .movie-detail a flex container so .jws-images,
   .movie-info, and .jws-description sit side-by-side. We want them
   stacked: (image hidden) -> title+meta -> excerpt. */
.single-global-v2-play .movie-detail {
    display: block !important;
}

/* Visual spacing for the relocated Crew section (now full-width in col-xl-9) */
.single-global-v2-play .crew-section {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Desktop: align the content row with the centered video player.
   The player uses max-width calc((100vh - 300px) * 16 / 9) with margin auto
   to center itself. Apply the same width formula to .container-fluid so the
   row of content underneath has the same horizontal extent — its left edge
   lines up with the video's left edge, its right edge with the video's
   right edge. The MEGA SALE ad ends up sitting at the right end of that
   shared band rather than the far right of the viewport. */
@media (min-width: 992px) {
    .single-global-v2-play .container-fluid {
        max-width: min(100%, calc((100vh - 300px) * 16 / 9)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Mobile-only:
   - Put .jws-meta-info-extra and .jws-category-extra on the same row
     (same approach used on the homepage slider mobile)
   - 20px space before the Crew section, removing larger default spacing */
@media (max-width: 767px) {
    .single-global-v2-play .movie-info .jws-meta-info-extra,
    .single-global-v2-play .movie-info .jws-category-extra {
        display: inline-flex !important;
        vertical-align: middle !important;
        align-items: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1;
        flex-wrap: wrap;
    }
    .single-global-v2-play .movie-info .jws-category-extra {
        margin-left: 12px !important;
    }
    .single-global-v2-play .crew-section {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        padding-top: 0 !important;
    }
}