/*
====================================================================
 NEW STAR CINEMA
 REGION D
 region-d.css

 Production Widget Styling

 Architecture:

 Flatsome HTML Element
        |
        v
 #nsc-region-d-root
        |
        v
 region-d.js loads region-d.html
        |
        v
 #nsc-region-d
        |
        v
 .nsc-rd-shell

 The mount point is intentionally unstyled.

 Region D owns only its own widget.

 It does NOT control:
 - Flatsome section
 - Flatsome row
 - Flatsome columns
 - Region B
 - Region A
 - Guide viewport
====================================================================
*/


/* =========================================================
   MOUNT POINT

   Intentionally neutral.

   The parent Flatsome column controls the available width.
========================================================= */

#nsc-region-d-root{
    display:block;
    width:100%;
    margin:0;
    padding:0;
}


/* =========================================================
   REGION D ROOT

   The widget itself participates inside the column.

   Maximum production width:
   435px

   It cannot expand beyond its parent column.
========================================================= */

#nsc-region-d{
    display:block;
    position:relative;
    width:100%;
    max-width:435px;
    margin:0;
    padding:0;
    color:#ffffff;
    font-family:'Open Sans',Arial,sans-serif;
    font-size:16px;
    line-height:1.4;
    box-sizing:border-box;
}


/* =========================================================
   INTERNAL BOX MODEL
========================================================= */

#nsc-region-d *,
#nsc-region-d *::before,
#nsc-region-d *::after{
    box-sizing:border-box;
}


/* =========================================================
   SHELL
========================================================= */

#nsc-region-d .nsc-rd-shell{
    display:block;
    position:relative;
    width:100%;
    max-width:435px;
    margin:0;
    padding:0;
    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #080808,
            #181818
        );

    border-radius:8px;
}


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

#nsc-region-d .nsc-rd-section{
    display:block;
    position:relative;
    width:100%;
    margin:0;
    padding:0;
}


/* =========================================================
   HEADER
========================================================= */

#nsc-region-d .nsc-rd-header{
    padding:20px 22px;

    background:
        linear-gradient(
            180deg,
            #151515,
            #090909
        );

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


#nsc-region-d .nsc-rd-label{
    margin:0 0 8px;
    padding:0;

    color:#9d9d9d;

    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
    line-height:1.2;

    text-transform:uppercase;
}


#nsc-region-d .nsc-rd-header h2{
    display:block;

    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    color:#ffffff;

    font-size:24px;
    font-weight:800;
    line-height:1.2;

    overflow-wrap:break-word;
}


#nsc-region-d .nsc-rd-status-row{
    display:flex;
    align-items:center;

    width:100%;

    margin:16px 0 0;
    padding:0;
}


#nsc-region-d .nsc-rd-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:78px;
    height:28px;

    padding:0 14px;

    border-radius:5px;

    background:#7d0000;
    color:#ffffff;

    font-size:12px;
    font-weight:800;
}


#nsc-region-d .nsc-rd-status.live{
    background:
        linear-gradient(
            135deg,
            #ff0000,
            #990000
        );
}


#nsc-region-d .nsc-rd-channel{
    min-width:0;

    margin-left:12px;

    color:#d6d6d6;

    font-size:13px;
    font-weight:700;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}


#nsc-region-d .nsc-rd-time{
    margin:12px 0 0;
    padding:0;

    color:#ffffff;

    font-size:13px;
    font-weight:700;
    line-height:1.4;
}


#nsc-region-d .nsc-rd-description{
    margin:12px 0 0;
    padding:0;

    color:#dddddd;

    font-size:14px;
    line-height:1.45;
}


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

#nsc-region-d .nsc-rd-preview-section{
    width:100%;

    padding:10px;

    background:#050505;

    text-align:center;
}


#nsc-region-d .nsc-rd-preview-frame{
    display:block;
    position:relative;

    width:100%;
    max-width:370px;

    margin:0 auto;
    padding:0;

    overflow:hidden;

    background:#000000;
}


#nsc-region-d .nsc-rd-preview-poster{
    display:block;

    width:100%;
    max-width:100%;
    height:auto;

    margin:0;
    padding:0;
}


#nsc-region-d .nsc-rd-preview-overlay{
    position:absolute;

    top:0;
    right:0;
    bottom:0;
    left:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0,0,0,.65)
        );
}


#nsc-region-d .nsc-rd-preview-live{
    position:absolute;

    left:15px;
    bottom:15px;

    padding:6px 14px;

    border-radius:4px;

    background:#c00000;
    color:#ffffff;

    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
}


/* =========================================================
   DETAILS
========================================================= */

#nsc-region-d .nsc-rd-details{
    padding:18px 22px;

    background:
        linear-gradient(
            180deg,
            #111111,
            #080808
        );
}


#nsc-region-d .nsc-rd-detail-header{
    margin:0 0 12px;
    padding:0;

    color:#b7b7b7;

    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
}


#nsc-region-d .nsc-rd-detail-grid{
    display:grid;

    width:100%;

    margin:0;
    padding:0;

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

    gap:8px;
}


#nsc-region-d .nsc-rd-detail-card{
    display:block;

    width:100%;
    min-width:0;
    min-height:55px;

    margin:0;
    padding:8px;

    background:
        linear-gradient(
            145deg,
            #202020,
            #111111
        );

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:6px;
}


#nsc-region-d .nsc-rd-detail-card span{
    display:block;

    color:#8f8f8f;

    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
    line-height:1.2;
}


#nsc-region-d .nsc-rd-detail-card strong{
    display:block;

    margin-top:3px;

    color:#ffffff;

    font-size:15px;
    line-height:1.2;
}


/* =========================================================
   ACTIONS
========================================================= */

#nsc-region-d .nsc-rd-actions{
    padding:18px 22px;

    background:
        linear-gradient(
            180deg,
            #090909,
            #050505
        );
}


#nsc-region-d .nsc-rd-action-title{
    margin:0 0 14px;
    padding:0;

    color:#9d9d9d;

    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
}


#nsc-region-d .nsc-rd-button{
    display:block;

    width:100%;
    height:42px;

    margin:0 0 10px;
    padding:0;

    text-align:center;
    line-height:42px;

    border-radius:6px;

    text-decoration:none;

    font-size:14px;
    font-weight:800;

    cursor:pointer;
}


#nsc-region-d .nsc-rd-button:last-child{
    margin-bottom:0;
}


#nsc-region-d .nsc-rd-watch-button{
    background:#c00000;
    color:#ffffff;
}


#nsc-region-d .nsc-rd-watch-button:hover{
    background:#e00000;
    color:#ffffff;
}


#nsc-region-d .nsc-rd-info-button{
    background:#202020;
    color:#ffffff;
}


#nsc-region-d .nsc-rd-info-button:hover{
    background:#303030;
    color:#ffffff;
}


/* =========================================================
   HIDDEN DATA
========================================================= */

#nsc-region-d .nsc-rd-hidden-data{
    display:none;
}


/* =========================================================
   IMAGE SAFETY
========================================================= */

#nsc-region-d img{
    display:block;
    max-width:100%;
}


/* =========================================================
   SMALL COLUMN / MOBILE
========================================================= */

@media screen and (max-width:600px){

    #nsc-region-d{
        width:100%;
        max-width:100%;
    }

    #nsc-region-d .nsc-rd-shell{
        width:100%;
        max-width:100%;
    }

    #nsc-region-d .nsc-rd-preview-frame{
        max-width:370px;
    }

}


/* =========================================================
   VERY NARROW WIDTH
========================================================= */

@media screen and (max-width:360px){

    #nsc-region-d .nsc-rd-header,
    #nsc-region-d .nsc-rd-details,
    #nsc-region-d .nsc-rd-actions{
        padding-left:15px;
        padding-right:15px;
    }

    #nsc-region-d .nsc-rd-detail-grid{
        grid-template-columns:1fr;
    }

}