/*
==================================================
HANNANET MOVIE
Continue Watching
Version : 2.0 Professional
==================================================
*/

/* ==========================================
   WRAPPER
========================================== */

.continue-wrapper{

    margin-top:28px;

    padding:0 16px 20px;

}

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

.continue-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:14px;

}

.continue-header h2{

    font-size:18px;

    font-weight:700;

    color:#ffffff;

}

.continue-header a{

    font-size:13px;

    color:#ff2b2b;

    text-decoration:none;

    font-weight:600;

}

/* ==========================================
   SLIDER
========================================== */

.continue-slider{

    display:flex;

    gap:14px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    padding-bottom:10px;

    scrollbar-width:none;

}

.continue-slider::-webkit-scrollbar{

    display:none;

}

/* ==========================================
   CARD
========================================== */

.continue-card{

    flex:0 0 130px;

    text-decoration:none;

    color:#ffffff;

}

/* ==========================================
   THUMB
========================================== */

.continue-thumb{

    position:relative;

    width:130px;

    height:185px;

    overflow:hidden;

    border-radius:0;

    background:#181818;

    box-shadow:
        0 6px 20px rgba(0,0,0,.45);

}

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

.continue-thumb img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    border-radius:0;

    transition:transform .35s ease;

}

.continue-card:hover img{

    transform:scale(1.05);

}

.continue-card:active img{

    transform:scale(.97);

}

/* ==========================================
   PROGRESS
========================================== */

.continue-progress{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

    background:rgba(255,255,255,.15);

}

.continue-bar{

    width:0;

    height:100%;

    background:#ff2b2b;

    border-radius:0;

}

/* ==========================================
   TITLE
========================================== */

.continue-title{

    margin-top:8px;

    font-size:13px;

    font-weight:600;

    line-height:1.4;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    min-height:36px;

}

/* ==========================================
   TABLET
========================================== */

@media (min-width:768px){

    .continue-card{

        flex:0 0 160px;

    }

    .continue-thumb{

        width:160px;

        height:225px;

    }

}

/* ==========================================
   TV / DESKTOP
========================================== */

@media (min-width:1280px){

    .continue-wrapper{

        padding:0 24px 30px;

    }

    .continue-card{

        flex:0 0 190px;

    }

    .continue-thumb{

        width:190px;

        height:270px;

    }

}
/* ==================================================
   CONTINUE WATCHING - COMPACT CARD
   Sedikit lebih kecil agar lebih rapi
================================================== */

.continue-slider{
    gap:10px !important;
    padding-left:12px !important;
    padding-right:12px !important;
}

.continue-card{
    flex:0 0 118px !important;
    width:118px !important;
}

.continue-thumb{
    width:118px !important;
    height:167px !important;
}

.continue-title{
    font-size:11px !important;
    line-height:1.25 !important;
}

@media (min-width:768px){

    .continue-card{
        flex:0 0 140px !important;
        width:140px !important;
    }

    .continue-thumb{
        width:140px !important;
        height:198px !important;
    }

}


/* ==========================================================
   CONTINUE WATCHING — MOBILE FINAL
   3 CARD PRESISI + HORIZONTAL SLIDER
   TIDAK MENGUBAH TRENDING / LATEST
========================================================== */

@media (max-width: 767px) {

    .continue-wrapper {
        margin-top: 24px !important;
        padding: 0 12px 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .continue-header {
        margin: 0 0 10px !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .continue-header h2 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    .continue-slider {
        display: flex !important;

        gap: 8px !important;

        width: 100% !important;

        padding: 0 0 6px !important;
        margin: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-behavior: auto !important;

        scrollbar-width: none !important;

        box-sizing: border-box !important;
    }

    .continue-slider::-webkit-scrollbar {
        display: none !important;
    }

    /*
       3 POSTER DALAM LAYAR
    */
    .continue-card {
        flex: 0 0 calc((100vw - 40px) / 3) !important;

        width: calc((100vw - 40px) / 3) !important;
        min-width: calc((100vw - 40px) / 3) !important;
        max-width: calc((100vw - 40px) / 3) !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        color: #fff !important;

        text-decoration: none !important;
    }

    /*
       POSTER
    */
    .continue-thumb {
        width: 100% !important;

        height: auto !important;

        aspect-ratio: 2 / 3 !important;

        border-radius: 7px !important;

        overflow: hidden !important;

        box-shadow: none !important;

        background: #181818 !important;
    }

    .continue-thumb img {
        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        border-radius: 7px !important;

        transition: none !important;
    }

    /*
       MATIKAN ZOOM TOUCH
    */
    .continue-card:hover img,
    .continue-card:active img {
        transform: none !important;
    }

    /*
       PROGRESS BAR
    */
    .continue-progress {
        height: 3px !important;

        left: 0 !important;
        bottom: 0 !important;

        width: 100% !important;

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

    .continue-bar {
        height: 100% !important;

        background: #e50914 !important;
    }

    /*
       JUDUL
    */
    .continue-title {
        width: 100% !important;

        margin: 5px 0 0 !important;
        padding: 0 !important;

        font-size: 9px !important;

        line-height: 1.25 !important;

        font-weight: 600 !important;

        color: #fff !important;

        min-height: 23px !important;

        display: -webkit-box !important;

        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }

}


/* ==========================================================
   HP KECIL
========================================================== */

@media (max-width: 380px) {

    .continue-wrapper {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .continue-slider {
        gap: 7px !important;
    }

    .continue-card {
        flex-basis: calc((100vw - 34px) / 3) !important;

        width: calc((100vw - 34px) / 3) !important;
        min-width: calc((100vw - 34px) / 3) !important;
        max-width: calc((100vw - 34px) / 3) !important;
    }

    .continue-title {
        font-size: 8px !important;
    }

}


/* ==========================================================
   HNFLIX MOBILE — CONTINUE WATCHING FINAL CARD SIZE
   Samakan dengan Horor / Aksi / Komedi / Rekomendasi
========================================================== */

@media (max-width: 767px) {

    .continue-slider {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        gap: 10px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* CARD = 122 x 183 */
    .continue-slider > .continue-card {
        flex: 0 0 122px !important;

        width: 122px !important;
        min-width: 122px !important;
        max-width: 122px !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }

    /* POSTER = 122 x 183 */
    .continue-slider > .continue-card .continue-thumb {
        width: 122px !important;
        height: 183px !important;

        min-width: 122px !important;
        max-width: 122px !important;

        aspect-ratio: 2 / 3 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }

    .continue-slider > .continue-card .continue-thumb img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
    }

}


/* ==========================================================
   CONTINUE WATCHING — MENTOK KIRI
========================================================== */

@media (max-width: 767px) {

    .continue-slider {
        padding-left: 0 !important;
        padding-right: 14px !important;
    }

}

/* ==========================================================
   CONTINUE WATCHING — MENTOK KIRI
========================================================== */

@media (max-width: 767px) {

    .continue-slider {
        padding-left: 0 !important;
    }

}

/* ==========================================================
   CONTINUE WATCHING — BENAR-BENAR MENTOK KIRI
========================================================== */

@media (max-width: 767px) {

    .continue-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .continue-slider {
        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 14px !important;

        width: 100% !important;
        box-sizing: border-box !important;
    }

    .continue-slider > .continue-card:first-child {
        margin-left: 0 !important;
    }

}


/* HNFLIX ALIGN CONTINUE META WITH FILM TERBARU */

@media (max-width: 767px) {

    .continue-title {
        width: 100% !important;
        margin: 5px 0 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        min-height: 25px !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .continue-name {
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    .continue-meta {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        margin-top: 3px !important;
        padding: 0 !important;
        color: #f5c400 !important;
        font-size: 8px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .continue-meta span {
        color: #f5c400 !important;
        font-size: 8px !important;
        font-weight: 500 !important;
    }
}


/* HNFLIX EXACT TEXT STYLE FILM TERBARU */

@media (max-width: 767px) {

    .continue-title {
        width: 100% !important;
        margin: 5px 0 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        min-height: 25px !important;
        display: block !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .continue-name {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        min-height: 25px !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .continue-meta {
        display: block !important;
        width: 100% !important;
        margin-top: 3px !important;
        padding: 0 !important;
        color: #ffd400 !important;
        font-size: 8px !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    .continue-meta span {
        color: #ffd400 !important;
        font-size: 8px !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }
}


/* HNFLIX FORCE EXACT PLAYERLATEST FONT */

@media (max-width: 767px) {

    .continue-slider .continue-card .continue-title,
    .continue-slider .continue-card .continue-name {
        font-family: inherit !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        letter-spacing: normal !important;
        text-align: left !important;
    }

    .continue-slider .continue-card .continue-title {
        margin-top: 5px !important;
        padding: 0 !important;
        min-height: 25px !important;
    }

    .continue-slider .continue-card .continue-name {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 25px !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    .continue-slider .continue-card .continue-meta,
    .continue-slider .continue-card .continue-meta span {
        font-family: inherit !important;
        color: #ffd400 !important;
        font-size: 8px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        letter-spacing: normal !important;
    }

    .continue-slider .continue-card .continue-meta {
        display: block !important;
        margin-top: 3px !important;
        padding: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Jarak antarposter Home Continue */
@media (max-width: 767px) {
    .continue-slider {
        gap: 12px !important;
    }
}

/* Tambah jarak antarposter Home Continue */
@media (max-width: 767px) {
    .continue-slider {
        gap: 18px !important;
    }
}

/* FORCE JARAK ANTAR CARD HOME CONTINUE */
@media (max-width: 767px) {
    .continue-slider {
        display: flex !important;
        column-gap: 18px !important;
        row-gap: 0 !important;
    }

    .continue-slider > .continue-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* FINAL - CONTINUE HOME TEKS 11PX */
@media screen and (max-width: 767px) {
    #continueListing .continue-card .continue-title,
    #continueListing .continue-card .continue-name,
    #continueListing .continue-card .continue-year,
    #continueListing .continue-card .continue-meta,
    #continueListing .continue-card .continue-meta span {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
}

/* FINAL - SAMAKAN JUDUL CONTINUE DENGAN TRENDING */
@media screen and (max-width: 767px) {
    #continueListing .continue-slider .continue-card .continue-title .continue-name,
    #continueListing .continue-slider .continue-card .continue-name,
    #continueListing .continue-slider .continue-card .continue-year {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
}

/* FIX PERMANEN - JUDUL LANJUT MENONTON SAMA DENGAN TRENDING */
@media screen and (max-width: 767px) {
    #continueListing .continue-card .continue-name,
    #continueListing .continue-card .continue-year {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
}

/* RAPikan JUDUL, TAHUN, DAN FULL HD CONTINUE HOME */
@media screen and (max-width: 767px) {
    #continueListing .continue-card .continue-title {
        display: block !important;
        height: 44px !important;
        min-height: 44px !important;
        margin-top: 5px !important;
        padding: 0 !important;
        text-align: left !important;
    }

    #continueListing .continue-card .continue-name {
        height: 29px !important;
        min-height: 29px !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    #continueListing .continue-card .continue-meta {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        width: 100% !important;
        height: 11px !important;
        min-height: 11px !important;
        margin: 3px 0 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    #continueListing .continue-card .continue-meta span {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        vertical-align: middle !important;
    }
}

/* ALIGN TAHUN DAN FULL HD CONTINUE */
@media screen and (max-width: 767px) {
    #continueListing .continue-card .continue-meta {
        display: flex !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        height: 11px !important;
        min-height: 11px !important;
        line-height: 9px !important;
    }

    #continueListing .continue-card .continue-meta span {
        display: inline-block !important;
        height: 9px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 9px !important;
        line-height: 9px !important;
        vertical-align: baseline !important;
    }
}