/* =========================================================
   GENIUS MOVIES
   MOBILE DETAIL CLEAN V1

   ONLY ACTIVE ON:
   /movie/... + screen <= 760px

   DOES NOT CHANGE:
   Desktop
   Header
   Bottom navigation
   Player
   Ads
   Home/Browse layout
   ========================================================= */


@media(max-width:760px){

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

    html.gm-mobile-detail-clean-v1,
    html.gm-mobile-detail-clean-v1 body{

        overflow-x:hidden !important;
    }


    html.gm-mobile-detail-clean-v1 main{

        position:relative !important;

        width:100% !important;

        max-width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        overflow:visible !important;
    }


    /* =====================================================
       MAIN DETAIL HERO
       ===================================================== */

    html.gm-mobile-detail-clean-v1
    .gm-detail-showcase-v2{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        width:100% !important;

        max-width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        margin:0 !important;

        padding:0 !important;

        transform:none !important;

        overflow:hidden !important;

        isolation:isolate !important;

        clear:both !important;

        box-sizing:border-box !important;
    }


    /* Background stays decorative only */

    html.gm-mobile-detail-clean-v1
    .gm-detail-showcase-v2
    .gm-detail-bg{

        position:absolute !important;

        inset:0 !important;

        width:100% !important;

        height:100% !important;

        min-height:100% !important;

        max-height:none !important;

        z-index:0 !important;

        pointer-events:none !important;

        transform:none !important;
    }


    html.gm-mobile-detail-clean-v1
    .gm-detail-showcase-v2
    .gm-detail-overlay{

        position:absolute !important;

        inset:0 !important;

        width:100% !important;

        height:100% !important;

        min-height:100% !important;

        z-index:1 !important;

        pointer-events:none !important;

        background:
            linear-gradient(
                180deg,
                rgba(5,8,14,.48) 0%,
                rgba(5,8,14,.82) 47%,
                rgba(5,8,14,.97) 100%
            ) !important;
    }


    /* =====================================================
       HERO INNER
       NORMAL VERTICAL FLOW
       ===================================================== */

    html.gm-mobile-detail-clean-v1
    .gm-detail-inner{

        display:flex !important;

        flex-direction:column !important;

        grid-template-columns:none !important;

        align-items:stretch !important;

        justify-content:flex-start !important;

        position:relative !important;

        inset:auto !important;

        z-index:2 !important;

        width:100% !important;

        max-width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        gap:16px !important;

        margin:0 !important;

        padding:18px 16px 26px !important;

        transform:none !important;

        overflow:visible !important;

        box-sizing:border-box !important;
    }


    /* =====================================================
       POSTER
       ===================================================== */

    html.gm-mobile-detail-clean-v1
    .gm-detail-poster{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        flex:none !important;

        width:min(48vw,180px) !important;

        max-width:180px !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        aspect-ratio:2 / 3 !important;

        margin:0 auto !important;

        padding:0 !important;

        border-radius:14px !important;

        overflow:hidden !important;

        transform:none !important;

        box-shadow:
            0 14px 38px
            rgba(0,0,0,.36) !important;
    }


    html.gm-mobile-detail-clean-v1
    .gm-detail-poster > img{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        width:100% !important;

        height:100% !important;

        max-width:100% !important;

        max-height:none !important;

        aspect-ratio:2 / 3 !important;

        object-fit:cover !important;

        transform:none !important;

        opacity:1 !important;
    }


    /* Reflection caused unnecessary visual overlap on mobile */

    html.gm-mobile-detail-clean-v1
    .gm-poster-reflection{

        display:none !important;
    }


    /* =====================================================
       DETAIL TEXT
       ===================================================== */

    html.gm-mobile-detail-clean-v1
    .gm-detail-content{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        width:100% !important;

        max-width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        margin:0 !important;

        padding:0 !important;

        transform:none !important;

        overflow:visible !important;

        box-sizing:border-box !important;

        z-index:3 !important;
    }


    html.gm-mobile-detail-clean-v1
    .gm-detail-kicker{

        display:block !important;

        position:relative !important;

        margin:0 0 7px !important;

        color:#ff4770 !important;

        -webkit-text-fill-color:#ff4770 !important;

        font-size:12px !important;

        font-weight:900 !important;

        letter-spacing:.15em !important;

        opacity:1 !important;

        visibility:visible !important;
    }


    html.gm-mobile-detail-clean-v1
    .gm-detail-content h1{

        display:block !important;

        position:relative !important;

        width:100% !important;

        height:auto !important;

        margin:0 0 10px !important;

        padding:0 !important;

        color:#f7f9fc !important;

        -webkit-text-fill-color:#f7f9fc !important;

        font-size:30px !important;

        line-height:1.08 !important;

        font-weight:900 !important;

        opacity:1 !important;

        visibility:visible !important;

        transform:none !important;

        text-shadow:
            0 2px 12px
            rgba(0,0,0,.28) !important;
    }


    /* =====================================================
       META
       ===================================================== */

    html.gm-mobile-detail-clean-v1
    .gm-detail-meta{

        display:flex !important;

        position:relative !important;

        flex-wrap:wrap !important;

        align-items:center !important;

        gap:8px 14px !important;

        width:100% !important;

        height:auto !important;

        margin:0 0 11px !important;

        color:#e5e7eb !important;

        -webkit-text-fill-color:#e5e7eb !important;

        opacity:1 !important;

        visibility:visible !important;

        transform:none !important;
    }


    html.gm-mobile-detail-clean-v1
    .gm-detail-meta > span,

    html.gm-mobile-detail-clean-v1
    .gm-detail-meta strong{

        position:relative !important;

        color:#e5e7eb !important;

        -webkit-text-fill-color:#e5e7eb !important;

        opacity:1 !important;

        visibility:visible !important;
    }


    html.gm-mobile-detail-clean-v1
    .gm-detail-rating,

    html.gm-mobile-detail-clean-v1
    .gm-detail-rating strong{

        color:#ffd84d !important;

        -webkit-text-fill-color:#ffd84d !important;
    }


    /* =====================================================
       GENRES
       ===================================================== */

    html.gm-mobile-detail-clean-v1
    .gm-detail-genres{

        display:flex !important;

        position:relative !important;

        flex-wrap:wrap !important;

        gap:7px !important;

        width:100% !important;

        height:auto !important;

        margin:0 0 14px !important;

        transform:none !important;
    }


    html.gm-mobile-detail-clean-v1
    .gm-detail-genres > span{

        display:inline-flex !important;

        position:relative !important;

        align-items:center !important;

        min-height:34px !important;

        padding:6px 12px !important;

        border:
            1px solid
            rgba(255,255,255,.18) !important;

        border-radius:10px !important;

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

        color:#f4f6fa !important;

        -webkit-text-fill-color:#f4f6fa !important;

        font-size:13px !important;

        font-weight:700 !important;

        opacity:1 !important;
    }


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

    html.gm-mobile-detail-clean-v1
    .gm-detail-actions{

        display:flex !important;

        position:relative !important;

        align-items:center !important;

        flex-wrap:wrap !important;

        gap:10px !important;

        width:100% !important;

        height:auto !important;

        margin:0 0 16px !important;

        transform:none !important;
    }


    html.gm-mobile-detail-clean-v1
    .gm-circle-action{

        position:relative !important;

        inset:auto !important;

        flex:0 0 48px !important;

        width:48px !important;

        height:48px !important;

        min-width:48px !important;

        min-height:48px !important;

        margin:0 !important;

        transform:none !important;
    }


    html.gm-mobile-detail-clean-v1
    .gm-detail-play{

        display:inline-flex !important;

        position:relative !important;

        inset:auto !important;

        align-items:center !important;

        justify-content:center !important;

        width:auto !important;

        min-width:145px !important;

        min-height:48px !important;

        margin:0 !important;

        padding:0 22px !important;

        border-radius:12px !important;

        background:#ffffff !important;

        color:#172033 !important;

        -webkit-text-fill-color:#172033 !important;

        font-size:16px !important;

        font-weight:900 !important;

        text-decoration:none !important;

        transform:none !important;
    }


    /* =====================================================
       DESCRIPTION
       ===================================================== */

    html.gm-mobile-detail-clean-v1
    .gm-detail-description{

        display:block !important;

        position:relative !important;

        width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        margin:0 0 17px !important;

        overflow:visible !important;

        transform:none !important;
    }


    html.gm-mobile-detail-clean-v1
    .gm-detail-description p{

        position:relative !important;

        width:100% !important;

        height:auto !important;

        margin:0 !important;

        color:#d7dce5 !important;

        -webkit-text-fill-color:#d7dce5 !important;

        font-size:15px !important;

        line-height:1.65 !important;

        opacity:1 !important;

        visibility:visible !important;
    }


    html.gm-mobile-detail-clean-v1
    .gm-see-more{

        position:relative !important;

        inset:auto !important;

        margin-top:10px !important;

        transform:none !important;
    }


    /* =====================================================
       DETAIL INFORMATION
       ===================================================== */

    html.gm-mobile-detail-clean-v1
    .gm-detail-info-grid{

        display:grid !important;

        position:relative !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:10px !important;

        width:100% !important;

        height:auto !important;

        min-height:0 !important;

        margin:0 !important;

        transform:none !important;

        overflow:visible !important;
    }


    /* =====================================================
       SERIES / SEASON / EPISODES
       MOVED BELOW HERO BY JS
       ===================================================== */

    html.gm-mobile-detail-clean-v1
    .gm-mobile-detail-series-wrap{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        clear:both !important;

        width:100% !important;

        max-width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        margin:0 !important;

        padding:20px 14px !important;

        transform:none !important;

        overflow:visible !important;

        z-index:5 !important;

        box-sizing:border-box !important;
    }


    html[data-gm-theme="dark"].gm-mobile-detail-clean-v1
    .gm-mobile-detail-series-wrap{

        background:#080b12 !important;

        color:#f5f7fb !important;
    }


    html[data-gm-theme="light"].gm-mobile-detail-clean-v1
    .gm-mobile-detail-series-wrap{

        background:#f5f7fb !important;

        color:#202b3c !important;
    }


    html.gm-mobile-detail-clean-v1
    .seasons{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        width:100% !important;

        max-width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        margin:0 !important;

        padding:0 !important;

        transform:none !important;

        overflow:visible !important;

        clear:both !important;
    }


    html.gm-mobile-detail-clean-v1
    .seasons > *{

        position:relative !important;

        inset:auto !important;

        float:none !important;

        width:100% !important;

        max-width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        transform:none !important;

        overflow:visible !important;

        box-sizing:border-box !important;
    }


    html.gm-mobile-detail-clean-v1
    .seasons h2,

    html.gm-mobile-detail-clean-v1
    .seasons h3{

        position:relative !important;

        height:auto !important;

        margin:
            4px 0 14px !important;

        font-size:23px !important;

        line-height:1.2 !important;

        opacity:1 !important;

        visibility:visible !important;
    }


    html[data-gm-theme="dark"].gm-mobile-detail-clean-v1
    .seasons h2,

    html[data-gm-theme="dark"].gm-mobile-detail-clean-v1
    .seasons h3{

        color:#f5f7fb !important;

        -webkit-text-fill-color:#f5f7fb !important;
    }


    html[data-gm-theme="light"].gm-mobile-detail-clean-v1
    .seasons h2,

    html[data-gm-theme="light"].gm-mobile-detail-clean-v1
    .seasons h3{

        color:#202b3c !important;

        -webkit-text-fill-color:#202b3c !important;
    }


    /* Actual episode containers marked by JS */

    html.gm-mobile-detail-clean-v1
    .gm-mobile-episode-item{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        width:100% !important;

        max-width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        margin:0 0 10px !important;

        padding:14px !important;

        transform:none !important;

        overflow:visible !important;

        border-radius:14px !important;

        box-sizing:border-box !important;
    }


    html[data-gm-theme="dark"].gm-mobile-detail-clean-v1
    .gm-mobile-episode-item{

        background:#111722 !important;

        border:
            1px solid
            #27303d !important;
    }


    html[data-gm-theme="light"].gm-mobile-detail-clean-v1
    .gm-mobile-episode-item{

        background:#ffffff !important;

        border:
            1px solid
            #dde3eb !important;

        box-shadow:
            0 5px 18px
            rgba(15,23,42,.05) !important;
    }


    /* Watch buttons are no longer huge overlay bars */

    html.gm-mobile-detail-clean-v1
    .seasons .watch-now{

        display:inline-flex !important;

        position:relative !important;

        inset:auto !important;

        align-items:center !important;

        justify-content:center !important;

        width:auto !important;

        max-width:100% !important;

        min-width:150px !important;

        height:44px !important;

        min-height:44px !important;

        max-height:44px !important;

        margin:10px 0 0 !important;

        padding:0 18px !important;

        transform:none !important;

        border-radius:10px !important;

        background:#ffffff !important;

        color:#182235 !important;

        -webkit-text-fill-color:#182235 !important;

        font-size:14px !important;

        font-weight:900 !important;

        line-height:1 !important;

        text-decoration:none !important;

        overflow:hidden !important;

        box-sizing:border-box !important;

        z-index:2 !important;
    }


    html[data-gm-theme="light"].gm-mobile-detail-clean-v1
    .seasons .watch-now{

        background:#202b3c !important;

        color:#ffffff !important;

        -webkit-text-fill-color:#ffffff !important;
    }


    /* =====================================================
       DYNAMIC EXTRA INFORMATION
       ===================================================== */

    html.gm-mobile-detail-clean-v1
    #richMetadataMount,

    html.gm-mobile-detail-clean-v1
    .detail-extra{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        clear:both !important;

        width:100% !important;

        max-width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        margin:0 !important;

        transform:none !important;

        overflow:visible !important;

        z-index:4 !important;
    }


    html.gm-mobile-detail-clean-v1
    .detail-extra{

        padding:20px 14px !important;
    }


    html.gm-mobile-detail-clean-v1
    .detail-extra-grid{

        display:grid !important;

        position:relative !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:10px !important;

        height:auto !important;

        transform:none !important;
    }


    /* =====================================================
       PERSONALIZED / RECOMMENDED
       ===================================================== */

    html.gm-mobile-detail-clean-v1
    #personalizedDetailsMount{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        clear:both !important;

        width:100% !important;

        max-width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        margin:0 !important;

        transform:none !important;

        overflow:visible !important;

        z-index:4 !important;
    }


    html.gm-mobile-detail-clean-v1
    .personalized-detail{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        clear:both !important;

        width:100% !important;

        max-width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        margin:0 !important;

        padding:22px 14px 28px !important;

        transform:none !important;

        overflow:visible !important;

        box-sizing:border-box !important;
    }


    html[data-gm-theme="dark"].gm-mobile-detail-clean-v1
    .personalized-detail{

        background:#080b12 !important;

        color:#f5f7fb !important;
    }


    html[data-gm-theme="light"].gm-mobile-detail-clean-v1
    .personalized-detail{

        background:#f5f7fb !important;

        color:#202b3c !important;
    }


    html.gm-mobile-detail-clean-v1
    .personalized-heading{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        width:100% !important;

        height:auto !important;

        min-height:0 !important;

        margin:0 0 15px !important;

        transform:none !important;

        overflow:visible !important;
    }


    html.gm-mobile-detail-clean-v1
    .personalized-heading h2{

        position:relative !important;

        height:auto !important;

        margin:4px 0 5px !important;

        font-size:24px !important;

        line-height:1.15 !important;

        opacity:1 !important;

        visibility:visible !important;
    }


    html[data-gm-theme="dark"].gm-mobile-detail-clean-v1
    .personalized-heading h2{

        color:#f5f7fb !important;

        -webkit-text-fill-color:#f5f7fb !important;
    }


    html[data-gm-theme="light"].gm-mobile-detail-clean-v1
    .personalized-heading h2{

        color:#202b3c !important;

        -webkit-text-fill-color:#202b3c !important;
    }


    html.gm-mobile-detail-clean-v1
    .personalized-heading p{

        position:relative !important;

        height:auto !important;

        margin:0 !important;

        opacity:.72 !important;

        line-height:1.45 !important;
    }


    html.gm-mobile-detail-clean-v1
    .private-pref{

        display:none !important;
    }


    /* JS marks real common card parent */

    html.gm-mobile-detail-clean-v1
    .gm-mobile-personal-grid{

        display:grid !important;

        position:relative !important;

        inset:auto !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:12px !important;

        width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        margin:0 !important;

        padding:0 !important;

        transform:none !important;

        overflow:visible !important;
    }


    html.gm-mobile-detail-clean-v1
    .personalized-card{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        float:none !important;

        width:100% !important;

        max-width:100% !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        margin:0 !important;

        padding:0 !important;

        transform:none !important;

        overflow:visible !important;

        text-decoration:none !important;

        box-sizing:border-box !important;
    }


    html.gm-mobile-detail-clean-v1
    .personalized-poster{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        width:100% !important;

        height:auto !important;

        aspect-ratio:2 / 3 !important;

        margin:0 !important;

        border-radius:13px !important;

        overflow:hidden !important;

        transform:none !important;
    }


    html.gm-mobile-detail-clean-v1
    .personalized-poster > img{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        width:100% !important;

        height:100% !important;

        max-height:none !important;

        aspect-ratio:2 / 3 !important;

        object-fit:cover !important;

        transform:none !important;
    }


    html.gm-mobile-detail-clean-v1
    .personalized-copy{

        display:block !important;

        position:relative !important;

        inset:auto !important;

        width:100% !important;

        height:auto !important;

        margin:0 !important;

        padding:9px 3px 5px !important;

        transform:none !important;

        overflow:visible !important;
    }


    html.gm-mobile-detail-clean-v1
    .personalized-copy > strong{

        display:block !important;

        position:relative !important;

        height:auto !important;

        min-height:0 !important;

        margin:0 0 4px !important;

        font-size:15px !important;

        line-height:1.25 !important;

        font-weight:800 !important;

        opacity:1 !important;

        visibility:visible !important;
    }


    html[data-gm-theme="dark"].gm-mobile-detail-clean-v1
    .personalized-copy > strong{

        color:#f5f7fb !important;

        -webkit-text-fill-color:#f5f7fb !important;
    }


    html[data-gm-theme="light"].gm-mobile-detail-clean-v1
    .personalized-copy > strong{

        color:#202b3c !important;

        -webkit-text-fill-color:#202b3c !important;
    }


    html.gm-mobile-detail-clean-v1
    .personalized-copy > span,

    html.gm-mobile-detail-clean-v1
    .personalized-copy > small{

        display:block !important;

        position:relative !important;

        height:auto !important;

        line-height:1.35 !important;

        opacity:.68 !important;
    }


    /* =====================================================
       CRITICAL:
       No fixed positioning inside detail content.
       ===================================================== */

    html.gm-mobile-detail-clean-v1
    :where(
        .gm-detail-content,
        .gm-detail-poster,
        .seasons,
        .gm-mobile-detail-series-wrap,
        .personalized-detail,
        .personalized-card,
        .personalized-copy,
        .detail-extra
    ){

        top:auto !important;

        right:auto !important;

        bottom:auto !important;

        left:auto !important;
    }

}