/* =========================================================
   GENIUS MOVIES
   VISITOR THEME SYSTEM V1
   ========================================================= */


/* =========================================================
   BASE VARIABLES
   ========================================================= */

:root{

    --gm-accent:#ff2d55;
    --gm-accent-contrast:#ffffff;

    --gm-bg:#080b12;
    --gm-surface:#10151e;
    --gm-surface-2:#171d28;

    --gm-text:#f5f7fb;
    --gm-muted:#98a2b3;

    --gm-border:#27303d;

    --gm-link:#f5f7fb;

    --gm-shadow:
        0 12px 38px
        rgba(0,0,0,.28);

    --gm-theme-radius:16px;
}


/* =========================================================
   DARK MODE DEFAULTS
   ========================================================= */

html[data-gm-theme="dark"]{

    color-scheme:dark;

    --gm-accent:#ff2d55;
    --gm-accent-contrast:#ffffff;

    --gm-bg:#080b12;
    --gm-surface:#10151e;
    --gm-surface-2:#171d28;

    --gm-text:#f5f7fb;
    --gm-muted:#98a2b3;

    --gm-border:#27303d;

    --gm-link:#f5f7fb;

    --gm-shadow:
        0 12px 38px
        rgba(0,0,0,.34);
}


/* =========================================================
   LIGHT MODE DEFAULTS
   ========================================================= */

html[data-gm-theme="light"]{

    color-scheme:light;

    --gm-accent:#e91e4d;
    --gm-accent-contrast:#ffffff;

    --gm-bg:#f5f7fb;
    --gm-surface:#ffffff;
    --gm-surface-2:#edf1f7;

    --gm-text:#111827;
    --gm-muted:#667085;

    --gm-border:#d8dee8;

    --gm-link:#172033;

    --gm-shadow:
        0 12px 34px
        rgba(17,24,39,.10);
}


/* =========================================================
   PAGE
   ========================================================= */

html[data-gm-theme]{

    background:
        var(--gm-bg) !important;
}


html[data-gm-theme] body{

    background-color:
        var(--gm-bg) !important;

    color:
        var(--gm-text) !important;

    transition:
        background-color .22s ease,
        color .22s ease;
}


/* =========================================================
   NORMAL TEXT
   ========================================================= */

html[data-gm-theme] body :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
){

    color:
        var(--gm-text) !important;
}


html[data-gm-theme] body :where(
    label,
    legend
){

    color:
        var(--gm-text);
}


html[data-gm-theme] body :where(
    small,
    .muted,
    .text-muted,
    .meta,
    .metadata,
    .subtitle,
    .description,
    .caption
){

    color:
        var(--gm-muted) !important;
}


html[data-gm-theme] body a{

    color:
        inherit;
}


html[data-gm-theme] body a:hover{

    color:
        var(--gm-accent);
}


/* =========================================================
   HEADER / NAVIGATION / MENUS
   ========================================================= */

html[data-gm-theme] body :where(
    header,
    nav,
    footer,
    .navbar,
    .site-header,
    .main-header,
    .topbar,
    .top-bar,
    .mobile-nav,
    .mobile-menu,
    .bottom-nav,
    .bottom-menu,
    .gm-real-bottom-nav,
    .dropdown-menu,
    .dropdown-content,
    .menu-panel,
    .sidebar
){

    border-color:
        var(--gm-border) !important;

    color:
        var(--gm-text);
}


/*
 * Avoid replacing backgrounds on hero containers
 * that contain artwork/background images.
 */

html[data-gm-theme] body :where(
    .dropdown-menu,
    .dropdown-content,
    .menu-panel,
    .sidebar
){

    background-color:
        var(--gm-surface) !important;
}


/* =========================================================
   CARDS / PANELS / BOXES
   ========================================================= */

html[data-gm-theme] body :where(
    .card,
    .movie-card,
    .media-card,
    .live-card,
    .channel-card,
    .episode-card,
    .content-card,
    .poster-card,
    .panel,
    .box,
    .glass-box,
    .search-panel,
    .filter-panel,
    .modal-content
){

    background-color:
        var(--gm-surface) !important;

    color:
        var(--gm-text) !important;

    border-color:
        var(--gm-border) !important;

    box-shadow:
        var(--gm-shadow);
}


/* =========================================================
   SEARCH / INPUTS / SELECTS
   ========================================================= */

html[data-gm-theme] body :where(
    input,
    select,
    textarea
){

    background-color:
        var(--gm-surface) !important;

    color:
        var(--gm-text) !important;

    border-color:
        var(--gm-border) !important;

    caret-color:
        var(--gm-accent);
}


html[data-gm-theme] body :where(
    input,
    textarea
)::placeholder{

    color:
        var(--gm-muted) !important;

    opacity:.85;
}


html[data-gm-theme] body select option{

    background:
        var(--gm-surface);

    color:
        var(--gm-text);
}


/* =========================================================
   BUTTONS
   ========================================================= */

html[data-gm-theme] body button{

    border-color:
        var(--gm-border);
}


html[data-gm-theme] body :where(
    .btn-primary,
    .primary-button,
    .primary-btn,
    .button-primary,
    [data-primary="true"]
){

    background:
        var(--gm-accent) !important;

    border-color:
        var(--gm-accent) !important;

    color:
        var(--gm-accent-contrast) !important;
}


/* =========================================================
   ACTIVE / SELECTED / ACCENT ELEMENTS
   ========================================================= */

html[data-gm-theme] body :where(
    .active,
    .is-active,
    .selected,
    .current
){

    --gm-current-accent:
        var(--gm-accent);
}


html[data-gm-theme] body :where(
    .nav-item.active,
    .menu-item.active
){

    color:
        var(--gm-accent) !important;
}


/* =========================================================
   BORDERS / DIVIDERS
   ========================================================= */

html[data-gm-theme] body :where(
    hr,
    .divider,
    .separator
){

    border-color:
        var(--gm-border) !important;

    background-color:
        var(--gm-border) !important;
}


/* =========================================================
   LIVE TV NOTICE
   ========================================================= */

html[data-gm-theme] .gm-live-tv-guide{

    background-color:
        color-mix(
            in srgb,
            var(--gm-surface) 92%,
            transparent
        ) !important;

    color:
        var(--gm-muted) !important;

    border-color:
        var(--gm-border) !important;
}


/* =========================================================
   MOBILE BOTTOM MENU ARROW THEME SUPPORT
   ========================================================= */

html[data-gm-theme] .gm-fixed-menu-arrow{

    background:
        var(--gm-surface-2) !important;

    color:
        var(--gm-text) !important;

    border-color:
        var(--gm-border) !important;
}


html[data-gm-theme] .gm-bottom-arrow-fixed-layer{

    color:
        var(--gm-text);
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

html[data-gm-theme]{

    scrollbar-color:
        var(--gm-surface-2)
        var(--gm-bg);
}


html[data-gm-theme] body::-webkit-scrollbar{

    width:10px;
}


html[data-gm-theme] body::-webkit-scrollbar-track{

    background:
        var(--gm-bg);
}


html[data-gm-theme] body::-webkit-scrollbar-thumb{

    background:
        var(--gm-surface-2);

    border:
        2px solid
        var(--gm-bg);

    border-radius:
        999px;
}


/* =========================================================
   LIGHT MODE SPECIAL TUNING
   ========================================================= */

html[data-gm-theme="light"] body{

    background-image:
        radial-gradient(
            circle at 10% -10%,
            rgba(233,30,77,.045),
            transparent 32%
        );
}


html[data-gm-theme="light"] body :where(
    .card,
    .movie-card,
    .media-card,
    .live-card,
    .channel-card,
    .content-card,
    .episode-card
){

    box-shadow:
        0 8px 26px
        rgba(17,24,39,.075);
}


html[data-gm-theme="light"] .gm-live-tv-guide{

    background:
        rgba(255,255,255,.90) !important;
}


/* =========================================================
   THEME FLOATING BUTTON
   ========================================================= */

.gm-theme-fab{

    position:fixed;

    z-index:2147482000;

    right:18px;
    bottom:20px;

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:
        1px solid
        var(--gm-border) !important;

    border-radius:999px;

    background:
        var(--gm-surface) !important;

    color:
        var(--gm-text) !important;

    box-shadow:
        var(--gm-shadow);

    font-size:22px;

    cursor:pointer;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


.gm-theme-fab:hover{

    transform:
        translateY(-2px);
}


.gm-theme-fab:active{

    transform:
        scale(.94);
}


/* =========================================================
   BACKDROP
   ========================================================= */

.gm-theme-backdrop{

    position:fixed;

    z-index:2147482500;

    inset:0;

    display:none;

    background:
        rgba(0,0,0,.40);

    backdrop-filter:
        blur(2px);

    -webkit-backdrop-filter:
        blur(2px);
}


.gm-theme-backdrop.open{

    display:block;
}


/* =========================================================
   THEME PANEL
   ========================================================= */

.gm-theme-panel{

    position:fixed;

    z-index:2147483000;

    top:0;
    right:0;

    width:
        min(
            390px,
            calc(100vw - 20px)
        );

    height:
        100dvh;

    overflow-y:auto;

    padding:
        18px 18px 28px;

    box-sizing:border-box;

    background:
        var(--gm-surface) !important;

    color:
        var(--gm-text) !important;

    border-left:
        1px solid
        var(--gm-border);

    box-shadow:
        -18px 0 50px
        rgba(0,0,0,.25);

    transform:
        translateX(105%);

    transition:
        transform .22s ease;

    overscroll-behavior:
        contain;
}


.gm-theme-panel.open{

    transform:
        translateX(0);
}


.gm-theme-panel-head{

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin-bottom:18px;
}


.gm-theme-panel-title{

    font-size:20px;

    font-weight:800;

    color:
        var(--gm-text) !important;
}


.gm-theme-close{

    width:38px;
    height:38px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:0;

    border:
        1px solid
        var(--gm-border) !important;

    border-radius:10px;

    background:
        var(--gm-surface-2) !important;

    color:
        var(--gm-text) !important;

    font-size:22px;

    cursor:pointer;
}


/* =========================================================
   MODE BUTTONS
   ========================================================= */

.gm-theme-mode-wrap{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:8px;

    margin-bottom:18px;
}


.gm-theme-mode{

    min-height:44px;

    padding:
        9px 8px;

    border:
        1px solid
        var(--gm-border) !important;

    border-radius:11px;

    background:
        var(--gm-surface-2) !important;

    color:
        var(--gm-text) !important;

    font-size:13px;

    font-weight:700;

    cursor:pointer;
}


.gm-theme-mode.active{

    background:
        var(--gm-accent) !important;

    border-color:
        var(--gm-accent) !important;

    color:
        var(--gm-accent-contrast) !important;
}


/* =========================================================
   PANEL SECTIONS
   ========================================================= */

.gm-theme-section{

    margin-top:18px;

    padding-top:16px;

    border-top:
        1px solid
        var(--gm-border);
}


.gm-theme-section-title{

    margin-bottom:4px;

    font-weight:800;

    color:
        var(--gm-text);
}


.gm-theme-help{

    margin-bottom:14px;

    color:
        var(--gm-muted) !important;

    font-size:12px;

    line-height:1.5;
}


/* =========================================================
   COLOR ROWS
   ========================================================= */

.gm-theme-color-row{

    display:grid;

    grid-template-columns:
        1fr auto 92px;

    gap:10px;

    align-items:center;

    margin-bottom:10px;
}


.gm-theme-color-label{

    font-size:13px;

    color:
        var(--gm-text);
}


.gm-theme-color{

    width:38px;
    height:34px;

    padding:2px !important;

    border:
        1px solid
        var(--gm-border) !important;

    border-radius:8px;

    background:
        var(--gm-surface-2) !important;

    cursor:pointer;
}


.gm-theme-hex{

    width:92px;

    height:34px;

    padding:
        5px 8px !important;

    box-sizing:border-box;

    border-radius:8px !important;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size:11px !important;
}


/* =========================================================
   PREVIEW
   ========================================================= */

.gm-theme-preview{

    margin-top:14px;

    padding:14px;

    border:
        1px solid
        var(--gm-border);

    border-radius:14px;

    background:
        var(--gm-bg);
}


.gm-theme-preview-card{

    padding:13px;

    border:
        1px solid
        var(--gm-border);

    border-radius:11px;

    background:
        var(--gm-surface);

    color:
        var(--gm-text);
}


.gm-theme-preview-title{

    margin-bottom:5px;

    font-weight:800;
}


.gm-theme-preview-muted{

    color:
        var(--gm-muted);

    font-size:12px;
}


.gm-theme-preview-button{

    display:inline-flex;

    margin-top:10px;

    padding:
        7px 12px;

    border-radius:8px;

    background:
        var(--gm-accent);

    color:
        var(--gm-accent-contrast);

    font-size:12px;

    font-weight:800;
}


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.gm-theme-actions{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:8px;

    margin-top:16px;
}


.gm-theme-action{

    min-height:42px;

    padding:
        8px 10px;

    border:
        1px solid
        var(--gm-border) !important;

    border-radius:10px;

    background:
        var(--gm-surface-2) !important;

    color:
        var(--gm-text) !important;

    font-size:12px;

    font-weight:700;

    cursor:pointer;
}


.gm-theme-action.danger{

    color:
        #ff5d75 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

    .gm-theme-fab{

        right:15px;

        /*
         * Keep theme button above
         * fixed mobile navigation.
         */

        bottom:
            calc(
                96px
                +
                env(safe-area-inset-bottom)
            );

        width:44px;
        height:44px;

        font-size:20px;
    }


    .gm-theme-panel{

        width:
            min(
                360px,
                calc(100vw - 12px)
            );

        padding:
            16px 14px 28px;
    }


    .gm-theme-color-row{

        grid-template-columns:
            1fr auto 82px;
    }


    .gm-theme-hex{

        width:82px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(
    prefers-reduced-motion:reduce
){

    html[data-gm-theme] body,
    .gm-theme-panel,
    .gm-theme-fab{

        transition:none !important;
    }

}


/* =========================================================
   GENIUS MOVIES LIGHT MODE V2
   ========================================================= */

html[data-gm-theme="light"]{

    color-scheme:light;

    --gm-accent:#e72a55;
    --gm-accent-contrast:#ffffff;

    --gm-bg:#f2f5f9;

    --gm-surface:#ffffff;

    --gm-surface-2:#e9eef5;

    --gm-text:#172033;

    --gm-muted:#687386;

    --gm-border:#d4dbe5;

    --gm-link:#172033;

    --gm-shadow:
        0 10px 28px
        rgba(30,41,59,.09);
}


/* =========================================================
   LIGHT PAGE BACKGROUND
   ========================================================= */

html[data-gm-theme="light"],
html[data-gm-theme="light"] body{

    background:
        #f2f5f9 !important;

    color:
        #172033 !important;
}


html[data-gm-theme="light"] body{

    background-image:
        linear-gradient(
            180deg,
            #f7f9fc 0,
            #f2f5f9 300px,
            #eef2f7 100%
        ) !important;
}


/* =========================================================
   LIGHT HEADER / NAVIGATION
   ========================================================= */

html[data-gm-theme="light"] body :where(
    header,
    nav,
    .navbar,
    .site-header,
    .main-header,
    .header-inner,
    .navigation,
    .main-navigation,
    .desktop-nav,
    .mobile-nav,
    .bottom-nav,
    .bottom-menu,
    .gm-real-bottom-nav
){

    background-color:
        rgba(255,255,255,.96) !important;

    color:
        #172033 !important;

    border-color:
        #d4dbe5 !important;

    box-shadow:
        0 5px 20px
        rgba(30,41,59,.07);
}


html[data-gm-theme="light"] body :where(
    header,
    nav,
    .navbar,
    .site-header,
    .main-header,
    .navigation,
    .main-navigation,
    .desktop-nav,
    .mobile-nav,
    .bottom-nav,
    .bottom-menu,
    .gm-real-bottom-nav
) a{

    color:
        #263244 !important;
}


html[data-gm-theme="light"] body :where(
    header,
    nav,
    .navbar,
    .site-header,
    .main-header,
    .navigation,
    .main-navigation,
    .desktop-nav,
    .mobile-nav,
    .bottom-nav,
    .bottom-menu,
    .gm-real-bottom-nav
) a:hover{

    color:
        #e72a55 !important;
}


/* =========================================================
   ACTIVE NAV
   ========================================================= */

html[data-gm-theme="light"] body :where(
    .active,
    .is-active,
    .current
){

    color:
        #e72a55;
}


html[data-gm-theme="light"] body :where(
    nav,
    .navbar,
    .mobile-nav,
    .bottom-nav,
    .bottom-menu,
    .gm-real-bottom-nav
) :where(
    .active,
    .is-active,
    .current
){

    color:
        #e72a55 !important;
}


/* =========================================================
   SEARCH BOX
   ========================================================= */

html[data-gm-theme="light"] body :where(
    input,
    select,
    textarea
){

    background:
        #ffffff !important;

    color:
        #172033 !important;

    border:
        1px solid
        #d4dbe5 !important;

    box-shadow:
        inset 0 1px 2px
        rgba(15,23,42,.025);
}


html[data-gm-theme="light"] body :where(
    input,
    textarea
)::placeholder{

    color:
        #8a94a6 !important;
}


/* =========================================================
   CONTENT HEADINGS
   ========================================================= */

html[data-gm-theme="light"] body :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
){

    color:
        #172033 !important;
}


/*
 * Red Explore label stays accent.
 */

html[data-gm-theme="light"] body :where(
    .eyebrow,
    .section-label,
    .explore-label
){

    color:
        #e72a55 !important;
}


/* =========================================================
   CARDS
   ========================================================= */

html[data-gm-theme="light"] body :where(
    .card,
    .movie-card,
    .media-card,
    .content-card,
    .poster-card,
    .live-card,
    .channel-card,
    .episode-card
){

    background:
        #ffffff !important;

    color:
        #172033 !important;

    border-color:
        #d8dee8 !important;

    box-shadow:
        0 8px 22px
        rgba(30,41,59,.075) !important;
}


html[data-gm-theme="light"] body :where(
    .card,
    .movie-card,
    .media-card,
    .content-card,
    .poster-card,
    .live-card,
    .channel-card,
    .episode-card
) :where(
    .meta,
    .metadata,
    small
){

    color:
        #687386 !important;
}


/* =========================================================
   LIVE TV NOTICE
   ========================================================= */

html[data-gm-theme="light"] .gm-live-tv-guide{

    background:
        rgba(255,255,255,.94) !important;

    color:
        #576274 !important;

    border:
        1px solid
        #d8dee8 !important;

    box-shadow:
        0 4px 14px
        rgba(30,41,59,.045);
}


/* =========================================================
   FIXED MOBILE MENU ARROWS
   ========================================================= */

html[data-gm-theme="light"] .gm-fixed-menu-arrow{

    background:
        #edf1f6 !important;

    color:
        #263244 !important;

    border-color:
        #d4dbe5 !important;
}


html[data-gm-theme="light"] .gm-fixed-menu-arrow:active{

    background:
        #e1e7ef !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

html[data-gm-theme="light"] body :where(
    .btn-primary,
    .primary-button,
    .primary-btn,
    .button-primary
){

    background:
        #e72a55 !important;

    color:
        #ffffff !important;

    border-color:
        #e72a55 !important;

    box-shadow:
        0 5px 16px
        rgba(231,42,85,.20);
}


/* =========================================================
   SECONDARY BUTTONS / PILLS
   ========================================================= */

html[data-gm-theme="light"] body :where(
    .btn-secondary,
    .secondary-button,
    .secondary-btn,
    .chip,
    .pill,
    .tag,
    .badge
){

    background:
        #e9eef5;

    color:
        #263244;

    border-color:
        #d4dbe5;
}


/* =========================================================
   DROPDOWNS
   ========================================================= */

html[data-gm-theme="light"] body :where(
    .dropdown-menu,
    .dropdown-content,
    .menu-panel,
    .sidebar
){

    background:
        #ffffff !important;

    color:
        #172033 !important;

    border:
        1px solid
        #d4dbe5 !important;

    box-shadow:
        0 14px 35px
        rgba(30,41,59,.12) !important;
}


/* =========================================================
   SECTION DIVIDERS
   ========================================================= */

html[data-gm-theme="light"] body :where(
    hr,
    .divider,
    .separator
){

    border-color:
        #d8dee8 !important;
}


/* =========================================================
   THEME PANEL IN LIGHT MODE
   ========================================================= */

html[data-gm-theme="light"] .gm-theme-panel{

    background:
        #ffffff !important;

    color:
        #172033 !important;

    border-color:
        #d4dbe5 !important;

    box-shadow:
        -18px 0 50px
        rgba(30,41,59,.15);
}


html[data-gm-theme="light"] .gm-theme-close,
html[data-gm-theme="light"] .gm-theme-mode,
html[data-gm-theme="light"] .gm-theme-action{

    background:
        #edf1f6 !important;

    color:
        #263244 !important;

    border-color:
        #d4dbe5 !important;
}


html[data-gm-theme="light"] .gm-theme-mode.active{

    background:
        #e72a55 !important;

    color:
        #ffffff !important;

    border-color:
        #e72a55 !important;
}


html[data-gm-theme="light"] .gm-theme-fab{

    background:
        #ffffff !important;

    color:
        #172033 !important;

    border-color:
        #d4dbe5 !important;

    box-shadow:
        0 8px 26px
        rgba(30,41,59,.15);
}


/* =========================================================
   KEEP IMAGE HERO CINEMATIC
   ========================================================= */

/*
 * Hero/background-image areas intentionally remain
 * cinematic/dark so poster artwork keeps contrast.
 *
 * Text inside hero areas is allowed to stay white.
 */

html[data-gm-theme="light"] body :where(
    .hero,
    .hero-section,
    .featured-hero,
    .banner,
    .featured-banner
){

    color:
        #ffffff;
}


/* =========================================================
   MOBILE LIGHT TUNING
   ========================================================= */

@media(max-width:760px){

    html[data-gm-theme="light"] body{

        background:
            #f1f4f8 !important;
    }


    html[data-gm-theme="light"] .gm-real-bottom-nav{

        background:
            #ffffff !important;

        border:
            1px solid
            #d4dbe5 !important;

        box-shadow:
            0 -5px 25px
            rgba(30,41,59,.10) !important;
    }

}