/* Serial qismlarini tanlash bloki — kattaroq va zamonaviy ko'rinish.
   Sayt palitrasi: fon #161D25, panel #222933, chegara #304156, urg'u #02B0E4

   DIQQAT: tugmalar inline-block bo'lib qoladi (flex EMAS), chunki plagin
   fasllarni ajratish uchun <br> ishlatadi — flex konteynerda <br> ishlamaydi. */

/* --- Konteyner --- */

.buttttons{
    display:block;
    width:100%;
    height:auto;
}

.kontaiher{
    display:block;
    padding:16px 10px;
    text-align:center;
    vertical-align:baseline;
    line-height:2.6;
}

/* --- Qism tugmalari --- */

.BatcoH{
    /* eski o'lchamlarni bekor qilamiz (width:25%, max-width:90px, font 12px) */
    display:inline-block;
    width:auto;
    max-width:none;
    min-width:96px;
    margin:4px 3px;
    padding:12px 16px;
    box-sizing:border-box;

    font-size:14px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:.2px;
    white-space:nowrap;
    vertical-align:middle;

    color:#93A9C0;
    background:linear-gradient(180deg,#27313F 0%,#1D2631 100%);
    border:1px solid #33455A;
    border-radius:6px;
    outline:none;
    box-shadow:0 1px 2px rgba(0,0,0,.35);

    transition:background 180ms ease, border-color 180ms ease, color 180ms ease,
               box-shadow 180ms ease, transform 180ms ease;
    -webkit-transition:all 180ms ease;
}

/* eski .BatcoH-5 konturi va oq porlashini o'chiramiz */
.BatcoH-5{
    border:1px solid #33455A;
    outline:none;
    outline-offset:0;
    box-shadow:0 1px 2px rgba(0,0,0,.35);
    text-shadow:none;
    -webkit-transition:all 180ms ease;
    transition:all 180ms ease;
}

.BatcoH-5:hover,
.BatcoH-5:focus{
    color:#fff;
    background:linear-gradient(180deg,#2E3D4E 0%,#233040 100%);
    border-color:#02B0E4;
    outline:none;
    outline-offset:0;
    text-shadow:none;
    box-shadow:0 0 0 1px rgba(2,176,228,.25), 0 6px 16px rgba(0,0,0,.45);
    -webkit-transform:translateY(-2px);
    transform:translateY(-2px);
}

.BatcoH-5:active{
    -webkit-transform:translateY(0);
    transform:translateY(0);
    box-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* --- Joriy qism va fasl ajratgichlari --- */

.BatcoH-4{
    color:#fff;
    background:linear-gradient(180deg,#02B0E4 0%,#0289B6 100%);
    border:1px solid #02B0E4;
    overflow:hidden;
    position:relative;
    z-index:20;
    cursor:default;
    box-shadow:0 0 0 1px rgba(2,176,228,.30), 0 6px 18px rgba(2,176,228,.28);
}

/* Mavzudagi eski qiyshiq "yaltiroq" chizig'i (25x155px, 35 gradus) —
   yangi dizaynda kerak emas va tugmadan tashqariga chiqib ketadi. */
.BatcoH-4:after,
.BatcoH-4::after{
    display:none;
    content:none;
}

/* --- Oldingi / keyingi qism --- */

.BatcoH-prevnext{
    display:inline-block;
    width:auto;
    max-width:none;
    min-width:150px;
    margin:4px 5px;
    padding:13px 22px;

    font-size:14px;
    font-weight:700;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:.4px;
    vertical-align:middle;

    color:#A9BED4;
    border-radius:6px;
}

.BatcoH-prevnext:hover,
.BatcoH-prevnext:focus{
    color:#fff;
    border-color:#02B0E4;
}

/* --- Kichik ekranlar --- */

@media (max-width:768px){
    .kontaiher{ padding:12px 6px; line-height:2.4; }
    .BatcoH{ min-width:82px; margin:3px 2px; padding:10px 12px; font-size:13px; }
    .BatcoH-prevnext{ min-width:132px; padding:11px 16px; font-size:13px; }
}

@media (max-width:420px){
    .BatcoH{ min-width:70px; margin:3px 2px; padding:9px 8px; font-size:12px; }
    .BatcoH-prevnext{ min-width:120px; padding:11px 10px; font-size:12px; }
}


/* ============================================================
   YUKLAB OLISH TUGMASI
   Markup: <a class="btn1"><button class="btn btn-trailer">…</button></a>
   Serial qismlarida ham, kino sahifasidagi 4K/1080p/720p… tugmalarida ham
   shu klasslar ishlatiladi. Faqat .btn1 ichidagilarni o'zgartiramiz —
   saytdagi boshqa .btn tugmalariga tegmasligi uchun.
   ============================================================ */

.btn1{
    display:block;
    text-decoration:none;
}

.btn1:hover{
    background:none;          /* mavzudagi eski kulrang fonni bekor qilamiz */
    text-decoration:none;
}

.btn1 .btn-trailer{
    display:block;
    width:100%;
    margin:10px 0;
    padding:15px 18px;
    box-sizing:border-box;

    font-size:13px;
    font-weight:600;
    line-height:1.35;
    letter-spacing:.4px;
    text-transform:uppercase;
    text-shadow:none;
    white-space:normal;       /* uzun matn kichik ekranda o'ralsin */

    color:#B8CBE0;
    background:linear-gradient(180deg,#2A3746 0%,#1F2A36 100%);
    border:1px solid #35506B;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.35);

    transition:background 200ms ease, border-color 200ms ease, color 200ms ease,
               box-shadow 200ms ease, transform 200ms ease;
    -webkit-transition:all 200ms ease;
}

/* yuklab olish belgisi (FontAwesome style.min.css ichida mavjud) */
.btn1 .btn-trailer:before{
    content:"\f019";
    font-family:'FontAwesome';
    font-weight:normal;
    font-style:normal;
    font-size:15px;
    line-height:1;
    margin-right:10px;
    color:#02B0E4;
    vertical-align:-1px;
    transition:color 200ms ease;
}

/* kino sahifasidagi bo'sh <i></i> ortiqcha joy egallamasin */
.btn1 .btn-trailer i{
    display:none;
}

.btn1:hover .btn-trailer,
.btn1 .btn-trailer:hover,
.btn1 .btn-trailer:focus{
    color:#fff;
    background:linear-gradient(180deg,#02B0E4 0%,#0286B2 100%);
    border-color:#02B0E4;
    box-shadow:0 0 0 1px rgba(2,176,228,.30), 0 8px 20px rgba(2,176,228,.25);
    -webkit-transform:translateY(-2px);
    transform:translateY(-2px);
}

.btn1:hover .btn-trailer:before{
    color:#fff;
}

.btn1:active .btn-trailer{
    -webkit-transform:translateY(0);
    transform:translateY(0);
    box-shadow:0 2px 6px rgba(0,0,0,.35);
}

@media (max-width:768px){
    .btn1 .btn-trailer{ padding:13px 14px; font-size:12px; letter-spacing:.2px; }
    .btn1 .btn-trailer:before{ font-size:14px; margin-right:8px; }
}


/* ============================================================
   META MA'LUMOT OYNACHASI
   Tuzilishni episodes.js yasaydi: tugmada faqat nom qoladi,
   davomiyligi/sifati/hajmi burchakdagi (i) ostiga yashiriladi.
   ============================================================ */

.dl-wrap{
    position:relative;
}

/* (i) belgisi tugmaning o'ng burchagida turgani uchun joy ochamiz */
.dl-wrap .btn-trailer{
    padding-right:52px;
}

/* DIQQAT: mavzuda `.btn1 span{width:20px;height:20px;background:sprite}` qoidasi bor.
   U (0,1,1) ustuvorlikka ega, shuning uchun quyidagi selektorlarni uch klassli
   qilib yozamiz — aks holda matn 20px ga siqilib tugmadan tashqariga chiqib ketadi. */

.btn1 .btn-trailer .dl-label{
    display:inline-block;
    width:auto;
    height:auto;
    margin:0;
    background:none;
    vertical-align:middle;
}

.btn1 .btn-trailer .dl-info{
    position:absolute;
    top:50%;
    right:14px;
    margin:-13px 0 0 0;
    background:rgba(255,255,255,.06);

    width:26px;
    height:26px;
    line-height:24px;
    text-align:center;

    font-family:'FontAwesome';
    font-size:13px;
    font-weight:normal;
    font-style:normal;
    letter-spacing:0;

    color:#93A9C0;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    cursor:pointer;
    z-index:5;

    transition:all 180ms ease;
    -webkit-transition:all 180ms ease;
}

.btn1 .btn-trailer .dl-info:before{
    content:"\f129";           /* fa-info */
}

.btn1 .btn-trailer .dl-info:hover,
.btn1 .btn-trailer .dl-info:focus{
    color:#fff;
    background:rgba(255,255,255,.18);
    border-color:#fff;
    outline:none;
}

/* --- oynacha --- */

.dl-meta{
    position:absolute;
    right:8px;
    top:100%;
    margin-top:8px;
    z-index:60;

    min-width:210px;
    padding:6px 4px;
    text-align:left;

    background:#1B242F;
    border:1px solid #35506B;
    border-radius:8px;
    box-shadow:0 12px 30px rgba(0,0,0,.55);

    opacity:0;
    visibility:hidden;
    -webkit-transform:translateY(-6px);
    transform:translateY(-6px);
    transition:opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.dl-meta--ochiq{
    opacity:1;
    visibility:visible;
    -webkit-transform:translateY(0);
    transform:translateY(0);
}

/* yuqoriga qaragan uchburchak */
.dl-meta:before{
    content:"";
    position:absolute;
    top:-7px;
    right:16px;
    width:12px;
    height:12px;
    background:#1B242F;
    border-left:1px solid #35506B;
    border-top:1px solid #35506B;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

.dl-meta-row{
    display:block;
    padding:9px 14px;
    font-size:12px;
    line-height:1.3;
    text-transform:none;
    letter-spacing:0;
    white-space:nowrap;
    overflow:hidden;
}

.dl-meta-row + .dl-meta-row{
    border-top:1px solid #26333F;
}

.dl-meta-row span{
    float:left;
    color:#7C93AB;
    font-weight:400;
}

.dl-meta-row b{
    float:right;
    margin-left:18px;
    color:#fff;
    font-weight:600;
}

.dl-meta-row:after{
    content:"";
    display:block;
    clear:both;
}

@media (max-width:768px){
    .dl-wrap .btn-trailer{ padding-right:46px; }
    .btn1 .btn-trailer .dl-info{ right:10px; width:24px; height:24px; line-height:22px; margin:-12px 0 0 0; font-size:12px; }
    .dl-meta{ min-width:190px; }
}