/* =========================================================
   IPTV CINEMA
   PREMIUM TARIFF UI
   Clean / Light / Purple
   Version 3
   ========================================================= */


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

:root{
    --cinema-purple:#8f3bd4;
    --cinema-purple-dark:#7130ad;
    --cinema-purple-light:#a85ce1;

    --cinema-text:#29252f;
    --cinema-text-2:#625b68;
    --cinema-muted:#8c8591;

    --cinema-border:#e7e1eb;
    --cinema-border-soft:#eeeaf2;

    --cinema-white:#ffffff;

    --cinema-card-shadow:
        0 8px 30px rgba(42,25,57,.065);

    --cinema-card-shadow-hover:
        0 15px 40px rgba(42,25,57,.105);
}


/* =========================================================
   MAIN TARIFF CARD
   Общий фон страницы НЕ ТРОГАЕМ
   ========================================================= */

.price{
    position:relative !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:flex-start !important;
    justify-content:flex-start !important;

    width:100% !important;

    box-sizing:border-box !important;

    margin:15px 0 !important;

    padding:21px 17px 18px !important;

    background:#ffffff !important;

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

    border-radius:15px !important;

    box-shadow:var(--cinema-card-shadow) !important;

    overflow:hidden !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease !important;
}


/* =========================================================
   PREMIUM ACCENT
   ========================================================= */

.price--premium{
    border-color:#ded4e6 !important;
}


.price--premium:after{
    content:"" !important;

    position:absolute !important;

    top:0 !important;
    left:0 !important;

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

    background:
        linear-gradient(
            90deg,
            var(--cinema-purple-dark),
            var(--cinema-purple),
            var(--cinema-purple-light)
        ) !important;
}


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

.price:hover{
    transform:translateY(-2px) !important;

    border-color:#d6c8df !important;

    box-shadow:var(--cinema-card-shadow-hover) !important;
}


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

.price__item--first{
    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    justify-content:space-between !important;

    width:100% !important;

    min-width:0 !important;

    box-sizing:border-box !important;

    margin:0 0 8px !important;

    padding:0 !important;

    border:none !important;

    background:transparent !important;

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

    font-family:'Open Sans',Arial,sans-serif !important;

    font-size:23px !important;

    font-weight:400 !important;

    line-height:30px !important;

    letter-spacing:0 !important;

    white-space:nowrap !important;
}


/* Remove bullet */
.price__item--first:before{
    display:none !important;
}


/* =========================================================
   TARIFF NAME
   ========================================================= */

.price__item--first span:first-child{
    display:block !important;

    flex:1 1 auto !important;

    width:auto !important;

    min-width:0 !important;

    max-width:none !important;

    margin:0 !important;

    padding:0 !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;

    white-space:nowrap !important;

    color:var(--cinema-purple) !important;

    font-family:'Open Sans',Arial,sans-serif !important;

    font-size:23px !important;

    font-weight:400 !important;

    line-height:30px !important;
}


/* =========================================================
   TARIFF PRICE
   ========================================================= */

.price__item--first span:last-child{
    display:block !important;

    flex:0 0 auto !important;

    width:auto !important;

    min-width:max-content !important;

    margin:0 0 0 16px !important;

    padding:0 !important;

    overflow:visible !important;

    white-space:nowrap !important;

    color:var(--cinema-purple) !important;

    background:none !important;

    background-image:none !important;

    -webkit-background-clip:initial !important;
    background-clip:initial !important;

    -webkit-text-fill-color:var(--cinema-purple) !important;

    font-family:'Open Sans',Arial,sans-serif !important;

    font-size:22px !important;

    font-weight:500 !important;

    line-height:30px !important;

    letter-spacing:0 !important;
}


/* =========================================================
   INFORMATION ROWS
   ========================================================= */

.price__item{
    position:relative !important;

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    justify-content:space-between !important;

    width:100% !important;

    min-height:39px !important;

    box-sizing:border-box !important;

    margin:7px 0 0 !important;

    padding:9px 0 0 14px !important;

    border-top:1px solid var(--cinema-border-soft) !important;

    background:transparent !important;

    color:var(--cinema-text-2) !important;

    font-family:'Open Sans',Arial,sans-serif !important;

    font-size:14px !important;

    font-weight:400 !important;

    line-height:20px !important;
}


/* =========================================================
   SMALL PURPLE MARKER
   ========================================================= */

.price__item:before{
    content:"" !important;

    position:absolute !important;

    left:0 !important;

    top:50% !important;

    width:4px !important;
    height:4px !important;

    margin-top:2px !important;

    border-radius:50% !important;

    background:var(--cinema-purple) !important;
}


/* =========================================================
   FIRST INFO ROW
   ========================================================= */

.price__item:nth-child(2){
    margin-top:5px !important;

    padding-top:10px !important;

    border-top:1px solid var(--cinema-border-soft) !important;
}


/* =========================================================
   ROW TEXT
   ========================================================= */

.price__item span{
    display:block !important;

    width:100% !important;

    min-width:0 !important;

    color:var(--cinema-text-2) !important;

    font-family:'Open Sans',Arial,sans-serif !important;

    font-size:14px !important;

    font-weight:400 !important;

    line-height:20px !important;
}


/* =========================================================
   CHANNEL LINK
   ========================================================= */

.price__item a{
    display:block !important;

    width:100% !important;

    color:var(--cinema-text-2) !important;

    font-family:'Open Sans',Arial,sans-serif !important;

    font-size:14px !important;

    font-weight:400 !important;

    line-height:20px !important;

    text-decoration:none !important;

    transition:
        color .18s ease !important;
}


.price__item a:hover{
    color:var(--cinema-purple) !important;
}


/* =========================================================
   RIGHT VALUES
   ========================================================= */

.price__item i{
    float:right !important;

    margin-left:auto !important;

    padding-left:12px !important;

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

    font-family:'Open Sans',Arial,sans-serif !important;

    font-size:14px !important;

    font-style:normal !important;

    font-weight:400 !important;

    white-space:nowrap !important;
}


/* =========================================================
   PERIOD ROWS
   ========================================================= */

/*
   3 = 48час
   4 = 1мес
   5 = 2мес
   6 = 3мес
   7 = 6мес
   8 = 12мес
*/

.price__item:nth-child(n+3):nth-child(-n+8){
    padding-right:3px !important;

    transition:
        background .18s ease,
        padding-left .18s ease,
        border-color .18s ease !important;
}


/* subtle hover */
.price__item:nth-child(n+3):nth-child(-n+8):hover{
    padding-left:17px !important;

    border-top-color:#e5dced !important;

    background:
        linear-gradient(
            90deg,
            rgba(143,59,212,.025),
            transparent
        ) !important;
}


/* price of periods */
.price__item:nth-child(n+3):nth-child(-n+8) i{
    color:var(--cinema-purple) !important;

    font-weight:500 !important;
}


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

.price__btn{
    display:flex !important;

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

    width:100% !important;

    height:48px !important;

    box-sizing:border-box !important;

    margin-top:18px !important;

    padding:0 15px !important;

    border:none !important;

    border-radius:9px !important;

    background:
        linear-gradient(
            135deg,
            var(--cinema-purple-dark),
            var(--cinema-purple),
            var(--cinema-purple-light)
        ) !important;

    color:#ffffff !important;

    font-family:'Open Sans',Arial,sans-serif !important;

    font-size:12px !important;

    font-weight:500 !important;

    letter-spacing:.55px !important;

    line-height:48px !important;

    text-align:center !important;

    text-decoration:none !important;

    text-transform:uppercase !important;

    box-shadow:
        0 6px 17px rgba(143,59,212,.17) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}


.price .price__btn + .price__btn{
    margin-top:8px !important;
}


.price__btn:hover{
    color:#ffffff !important;

    transform:translateY(-1px) !important;

    filter:brightness(1.045) !important;

    box-shadow:
        0 9px 23px rgba(143,59,212,.25) !important;
}


.price__btn:active{
    transform:translateY(0) !important;
}


/* =========================================================
   CHANNEL LIST POPUP
   ONLY #showtarifftpl
   ========================================================= */

#showtarifftpl{
    width:auto !important;

    min-height:0 !important;

    box-sizing:border-box !important;

    padding:13px !important;

    background:
        linear-gradient(
            180deg,
            #faf9fc 0%,
            #f3f0f6 100%
        ) !important;

    border:none !important;

    overflow:auto !important;
}


/* =========================================================
   CHANNEL POPUP SCROLLBAR
   ========================================================= */

#showtarifftpl::-webkit-scrollbar{
    width:7px !important;
}

#showtarifftpl::-webkit-scrollbar-track{
    background:#e9e4ec !important;

    border-radius:10px !important;
}

#showtarifftpl::-webkit-scrollbar-thumb{
    background:#c6b9cf !important;

    border-radius:10px !important;
}

#showtarifftpl::-webkit-scrollbar-thumb:hover{
    background:var(--cinema-purple) !important;
}


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

#showtarifftpl .sortable{
    width:100% !important;

    max-width:100% !important;

    box-sizing:border-box !important;

    margin:0 !important;

    padding:0 !important;
}


/* =========================================================
   CHANNEL ITEM
   ========================================================= */

#showtarifftpl .sortable .price{
    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    justify-content:flex-start !important;

    width:100% !important;

    height:38px !important;

    min-height:38px !important;

    box-sizing:border-box !important;

    margin:0 0 5px !important;

    padding:0 13px !important;

    background:#ffffff !important;

    border:1px solid #e6e1ea !important;

    border-radius:8px !important;

    box-shadow:
        0 2px 8px rgba(35,22,48,.035) !important;

    color:#4d4852 !important;

    font-family:'Open Sans',Arial,sans-serif !important;

    font-size:13px !important;

    font-weight:400 !important;

    overflow:hidden !important;

    transform:none !important;
}


/* remove tariff decorative line from channel rows */
#showtarifftpl .sortable .price--premium:after{
    display:none !important;
}


/* remove dot */
#showtarifftpl .sortable .price:before{
    display:none !important;
}


/* channel hover */
#showtarifftpl .sortable .price:hover{
    transform:none !important;

    background:#ffffff !important;

    border-color:#d5c7df !important;

    box-shadow:
        0 4px 11px rgba(35,22,48,.06) !important;
}


/* =========================================================
   CHANNEL TEXT
   ========================================================= */

#showtarifftpl .sortable .price > span{
    display:flex !important;

    align-items:center !important;

    width:100% !important;

    height:38px !important;

    margin:0 !important;

    padding:0 !important;

    color:#706976 !important;

    font-family:'Open Sans',Arial,sans-serif !important;

    font-size:13px !important;

    font-weight:400 !important;

    line-height:38px !important;

    white-space:nowrap !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;
}


/* channel number + name */
#showtarifftpl .sortable .price > span b{
    display:inline-block !important;

    margin-left:5px !important;

    color:#29252f !important;

    font-size:13px !important;

    font-weight:500 !important;
}


/* =========================================================
   MAIN JQUERY UI POPUP
   ========================================================= */

.ui-dialog{
    position:absolute !important;

    padding:0 !important;

    box-sizing:border-box !important;

    background:#f7f5fa !important;

    border:1px solid #e4dfe8 !important;

    border-radius:15px !important;

    overflow:hidden !important;

    box-shadow:
        0 25px 75px rgba(28,17,38,.18),
        0 8px 25px rgba(28,17,38,.07) !important;
}


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

.ui-dialog .ui-dialog-titlebar{
    position:relative !important;

    display:flex !important;

    align-items:center !important;

    min-height:55px !important;

    box-sizing:border-box !important;

    padding:0 57px 0 19px !important;

    background:#ffffff !important;

    border:none !important;

    border-bottom:1px solid #ebe6ef !important;

    border-radius:15px 15px 0 0 !important;

    color:#29252f !important;

    font-family:'Open Sans',Arial,sans-serif !important;
}


.ui-dialog .ui-dialog-title{
    display:block !important;

    width:100% !important;

    margin:0 !important;

    padding:0 !important;

    color:#29252f !important;

    font-family:'Open Sans',Arial,sans-serif !important;

    font-size:15px !important;

    font-weight:500 !important;

    line-height:22px !important;

    white-space:nowrap !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;
}


/* =========================================================
   POPUP CLOSE BUTTON
   ========================================================= */

.ui-dialog .ui-dialog-titlebar-close{
    position:absolute !important;

    top:50% !important;

    right:12px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:32px !important;

    height:32px !important;

    box-sizing:border-box !important;

    margin:0 !important;

    padding:0 !important;

    transform:translateY(-50%) !important;

    border:1px solid #dcd5e2 !important;

    border-radius:8px !important;

    background:#f5f2f7 !important;

    opacity:1 !important;

    cursor:pointer !important;

    z-index:50 !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}


/* hide jQuery UI icon */
.ui-dialog .ui-dialog-titlebar-close .ui-icon{
    display:none !important;
}


/* custom X */
.ui-dialog .ui-dialog-titlebar-close:before,
.ui-dialog .ui-dialog-titlebar-close:after{
    content:"" !important;

    position:absolute !important;

    width:13px !important;

    height:2px !important;

    border-radius:2px !important;

    background:#62596a !important;

    transition:background .18s ease !important;
}


.ui-dialog .ui-dialog-titlebar-close:before{
    transform:rotate(45deg) !important;
}

.ui-dialog .ui-dialog-titlebar-close:after{
    transform:rotate(-45deg) !important;
}


/* close hover */
.ui-dialog .ui-dialog-titlebar-close:hover{
    background:var(--cinema-purple) !important;

    border-color:var(--cinema-purple) !important;

    transform:
        translateY(-50%)
        scale(1.04) !important;
}


.ui-dialog .ui-dialog-titlebar-close:hover:before,
.ui-dialog .ui-dialog-titlebar-close:hover:after{
    background:#ffffff !important;
}


/* =========================================================
   POPUP CONTENT
   ========================================================= */

.ui-dialog .ui-dialog-content{
    box-sizing:border-box !important;

    background:
        linear-gradient(
            180deg,
            #faf9fc 0%,
            #f4f1f7 100%
        ) !important;

    border:none !important;

    color:#29252f !important;
}


/* =========================================================
   IMPORTANT:
   НЕ СТИЛИЗУЕМ .ui-dialog .price
   НЕ СТИЛИЗУЕМ .ui-dialog .price__item
   ИНАЧЕ МОЖЕТ СЛОМАТЬСЯ ОСНОВНОЙ ТАРИФ
   ========================================================= */


/* =========================================================
   MOBILE — TARIFF CARD
   ========================================================= */

@media (max-width:600px){

    .price{
        padding:19px 15px 17px !important;

        margin:12px 0 !important;

        border-radius:13px !important;
    }


    .price__item--first{
        font-size:20px !important;

        line-height:27px !important;
    }


    .price__item--first span:first-child{
        font-size:20px !important;

        line-height:27px !important;
    }


    .price__item--first span:last-child{
        margin-left:10px !important;

        font-size:19px !important;

        line-height:27px !important;
    }


    .price__item{
        min-height:37px !important;

        margin-top:7px !important;

        padding-top:9px !important;

        padding-left:13px !important;

        font-size:14px !important;
    }


    .price__item span{
        font-size:14px !important;
    }


    .price__item i{
        font-size:14px !important;
    }


    .price__btn{
        height:46px !important;

        line-height:46px !important;

        margin-top:16px !important;

        font-size:11px !important;

        letter-spacing:.45px !important;
    }


    .price .price__btn + .price__btn{
        margin-top:7px !important;
    }
}


/* =========================================================
   MOBILE — POPUP
   ========================================================= */

@media (max-width:600px){

    .ui-dialog{
        width:calc(100% - 20px) !important;

        max-width:calc(100% - 20px) !important;

        border-radius:13px !important;
    }


    .ui-dialog .ui-dialog-titlebar{
        min-height:50px !important;

        padding:0 51px 0 15px !important;

        border-radius:13px 13px 0 0 !important;
    }


    .ui-dialog .ui-dialog-title{
        font-size:14px !important;

        line-height:20px !important;
    }


    .ui-dialog .ui-dialog-titlebar-close{
        right:9px !important;

        width:31px !important;

        height:31px !important;
    }


    .ui-dialog .ui-dialog-content{
        padding:10px !important;
    }


    #showtarifftpl{
        padding:9px !important;
    }


    #showtarifftpl .sortable .price{
        height:36px !important;

        min-height:36px !important;

        padding:0 10px !important;

        margin-bottom:4px !important;

        border-radius:7px !important;
    }


    #showtarifftpl .sortable .price > span{
        height:36px !important;

        line-height:36px !important;

        font-size:12px !important;
    }


    #showtarifftpl .sortable .price > span b{
        font-size:12px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width:380px){

    .price{
        padding-left:13px !important;

        padding-right:13px !important;
    }


    .price__item--first span:first-child{
        font-size:18px !important;

        line-height:25px !important;
    }


    .price__item--first span:last-child{
        font-size:17px !important;

        margin-left:7px !important;
    }


    .price__item{
        font-size:13px !important;
    }


    .price__item span,
    .price__item i{
        font-size:13px !important;
    }


    .ui-dialog{
        width:calc(100% - 12px) !important;

        max-width:calc(100% - 12px) !important;
    }


    .ui-dialog .ui-dialog-content{
        padding:8px !important;
    }


    #showtarifftpl{
        padding:7px !important;
    }
}