/**
 * dy5 模板 - 页面级样式表（比一仿写自 kk 模板各页 <head> 内联样式）
 * 说明：
 *  1. 本文件承载"页面布局级"样式，组件样式在 mytheme-ui.css / mytheme-site.css / mytheme-color3.css
 *  2. 每段样式均注明对应页面位置（仿 kk 原内联样式，仅整理归类并加注释）
 *  3. 占位图路径已改为本模板绝对路径 /template/dy5/static/images/
 */

/* =========================================================
 * ① 全局：正文字体（所有页面 <body>）
 * ========================================================= */
body {
    font-family: "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
}

/* =========================================================
 * ② 全局：栅格内边距（所有页面 .col-* 网格单元，图片卡/剧集列表/侧栏通用）
 * ========================================================= */
[class*=col-],
.myui-content__list li,
.myui-vodlist__media.col li {
    padding: 10px;
}

/* =========================================================
 * ③ 全局：按钮圆角（所有页面 .btn 按钮，含播放/分页/筛选按钮）
 * ========================================================= */
.btn {
    border-radius: 5px;
}

/* =========================================================
 * ④ 全局：缩略图比例与懒加载占位背景
 *    - 默认竖版海报 150%（首页/列表/搜索/详情/推荐区图片卡）
 *    - .square 方形 100%（横版海报）
 *    - .wide 宽幅 60%（轮播/横幅）
 *    - .actor 人物 140%（演员）
 * ========================================================= */
.myui-vodlist__thumb {
    border-radius: 5px;
    padding-top: 150%;
    background: url(../images/load.png) no-repeat;
}
.myui-vodlist__thumb.square {
    padding-top: 100%;
    background: url(../images/load_f.png) no-repeat;
}
.myui-vodlist__thumb.wide {
    padding-top: 60%;
    background: url(../images/load_w.png) no-repeat;
}
.myui-vodlist__thumb.actor {
    padding-top: 140%;
}

/* =========================================================
 * ⑤ 全局：轮播左右箭头位置（首页 #index-hot 轮播区）
 * ========================================================= */
.flickity-prev-next-button.previous {
    left: 10px;
}
.flickity-prev-next-button.next {
    right: 10px;
}

/* =========================================================
 * ⑥ 详情页：侧栏左边距（myui-sidebar 本月热播榜）
 * ========================================================= */
.myui-sidebar {
    padding: 0 0 0 20px;
}

/* =========================================================
 * ⑦ 全局：面板间距与圆角（所有页面 .myui-panel 板块容器）
 * ========================================================= */
.myui-panel {
    margin-bottom: 20px;
    border-radius: 5px;
}
.myui-panel-mb {
    margin-bottom: 20px;
}

/* =========================================================
 * ⑧ 全局：排行榜文字/媒体列表行距
 *    （首页板块文字榜、详情页本月热播榜 myui-vodlist__text / myui-vodlist__media）
 * ========================================================= */
.myui-vodlist__text li a,
.myui-vodlist__media li {
    padding: 10px 0;
}

/* =========================================================
 * ⑨ 列表页：分类筛选条内边距（myui-screen__list 类型筛选）
 * ========================================================= */
.myui-screen__list {
    padding: 10px 10px 0;
}
.myui-screen__list li {
    margin-bottom: 10px;
    margin-right: 10px;
}

/* =========================================================
 * ⑩ 列表/搜索页：分页条内边距（myui-page）
 * ========================================================= */
.myui-page {
    padding: 0 10px;
}

/* =========================================================
 * ⑪ 全局：返回顶部按钮位置（各页底部 myui-extra）
 * ========================================================= */
.myui-extra {
    right: 20px;
    bottom: 30px;
}

/* =========================================================
 * ⑫ 桌面端：容器宽度（≥1200px 时固定 1200px 居中）
 * ========================================================= */
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
    .container {
        padding-left: 0px;
        padding-right: 0px;
    }
    .container.min {
        width: 1200px;
        padding: 0;
    }
}

/* =========================================================
 * ⑬ 移动端：整体自适应（≤767px，缩小内边距、调整底部留白与浮层位置）
 * ========================================================= */
@media (max-width: 767px) {
    body, body.active {
        padding-bottom: 50px;
    }
    [class*=col-],
    .myui-panel,
    .myui-content__list li {
        padding: 5px;
    }
    .flickity-prev-next-button.previous {
        left: 5px;
    }
    .flickity-prev-next-button.next {
        right: 5px;
    }
    .myui-vodlist__text li a,
    .myui-vodlist__media li {
        padding: 10px 0;
    }
    .myui-screen__list {
        padding: 10px 5px 0;
    }
    .myui-screen__list li {
        margin-bottom: 5px;
        margin-right: 5px;
    }
    .myui-extra {
        right: 20px;
        bottom: 80px;
    }
    .myui-page {
        padding: 0 5px;
    }
    /* ⑮b 手机端头部：分类菜单横向滚动显示（替代被删除的 search-ul 面板） */
    .myui-header__logo .logo-text {
        font-size: 20px;
    }
    .myui-header__logo .logo-text.visible-xs {
        line-height: 45px;
    }
    .myui-header__menu {
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .myui-header__menu::-webkit-scrollbar {
        display: none;
    }
    .myui-header__menu > li {
        float: none;
        display: inline-block;
        margin-left: 15px;
    }
    .myui-header__menu > li:first-child {
        margin-left: 10px;
    }
    .myui-header__menu > li > a {
        line-height: 45px;
        font-size: 14px;
    }
    /* ⑮c 手机端搜索框：已删除 search-ul 面板，搜索框靠左（原 left:120px 会留空） */
    .myui-header__search li.search-box {
        left: 45px;
    }
}

/* =========================================================
 * ⑭ 全局：顶部渐变背景层（.myui-topbg，位于 header 之上，随页面高度渐变）
 *     由 MyTheme.Other.Topbg() 动态设置高度，仿 kk 原渐变配色
 * ========================================================= */
.myui-topbg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-image: linear-gradient(135deg, #583230 10%, #360940 100%);
}

/* =========================================================
 * ⑮ dy5 新增：站名 LOGO 文字（header 顶部，替代 kk 图片 logo）
 *    注意：header 为白底（mytheme-site.css），文字须用深色，否则白字白底看不见
 * ========================================================= */
.myui-header__logo .logo-text {
    color: #333;
    font-size: 26px;
    line-height: 64px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

/* =========================================================
 * ⑯ 播放页：当前集高亮（#player-sidebar 剧集列表 .playon）
 *    仿 kk 播放页内联样式 .playon a{color:red}
 * ========================================================= */
.myui-content__list.playlist li.playon a {
    color: #f1225a;
    border-color: #f1225a;
}

/* =========================================================
 * ⑰ 播放页：播放器自适应容器（.embed-responsive 内置 16:9 比例）
 * ========================================================= */
#player-left .embed-responsive {
    position: relative;
    width: 100%;
    background: #000;
}
#player-left .embed-responsive #dplayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* =========================================================
 * ⑱ 播放页：右侧剧集侧栏（#player-sidebar，仿 kk 结构）
 * ========================================================= */
#player-sidebar .myui-content__list li {
    padding: 5px;
}
#player-sidebar .myui-content__list a {
    padding: 6px 10px;
    border-radius: 5px;
}

/* =========================================================
 * ⑲ 详情页：播放地址剧集列表（.myui-content__list.sort-list，仿 kk）
 * ========================================================= */
.myui-content__list.sort-list li {
    padding: 5px;
}
.myui-content__list.sort-list a {
    padding: 6px 10px;
    border-radius: 5px;
}