/* ==========================================================================
   手机版品牌外观层 (mac mobile skin)
   把首页新版面的配色语言（红→洋红渐层 + 金色 CTA）延伸到播放页与会员页。

   载入顺序：必须放在各页面自己的 CSS 之后（public/include.html、user/include.html 末尾），
   否则会被佈景原本的规则盖掉。

   佈景本身是 token 化的（76 个 CSS 吃 var(--tpl-accent)），主色已在各 CSS 内
   统一换成品牌红，本档只处理三类 token 管不到的东西：
     1. 把绿色底图（PNG）换成 CSS 渐层
     2. 主要 CTA 改成首页的渐层 / 金色
     3. 手机版的版型微调
   ========================================================================== */

:root {
    /* 与 home-feed.css 同一组品牌色，取样自首页稿图 */
    --mac-grad: linear-gradient(90deg, #d9121c 0%, #c11038 33%, #ac0a5c 66%, #9a0877 100%);
    --mac-grad-v: linear-gradient(160deg, #d9121c 0%, #b00d47 45%, #9a0877 100%);
    --mac-gold: linear-gradient(180deg, #fff6a8 0%, #ffe23f 55%, #ff9c00 100%);
    --mac-gold-text: #8a1010;
    --mac-brand: #c8103f;
    --mac-brand-dark: #a00a4e;
}

/* ---------- 0. 全宽度都走手机版版面 ----------
   佈景的 PC / 手机切换集中在 820px，各 CSS 的断点已统一改写
   （max-width 一律生效、min-width 一律失效），所以桌机也会套用手机版面。
   这一段只负责「桌机上以居中窄栏呈现」。

   断点刻意用 481px：改写的门槛是 min-width >= 500px，用 481 可以确保
   脚本就算再跑一次也不会把这段关掉。 */

@media (min-width: 481px) {
    html {
        background: #e9ecf3;
    }

    body {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
        min-height: 100vh;
        box-shadow: 0 0 24px rgba(0, 0, 0, .12);
    }

    /* 固定定位的元素是对着视窗算的，不跟着 body 收窄，
       会贴满整个萤幕宽度，所以要手动对齐到窄栏。
       用 left:calc() 而不是 transform，避免和抽屉/面板自己的位移动画打架。 */
    .hf-dock,
    .hidden_mb,
    .all_menu,
    .am-share,
    .m-nav,
    .mobile-nav,
    .site-head-wrap,
    #topnav,
    .head_box.show-mobile {
        left: calc(50% - 240px) !important;
        right: auto !important;
        width: 480px !important;
        max-width: 480px !important;
    }

    /* 浮动按钮本来就是靠右定位的，不能拉成整栏宽，
       否则里面的按钮会被推到窄栏左边。改成贴齐窄栏右缘。 */
    .extra {
        left: auto !important;
        right: calc(50% - 240px) !important;
        width: auto !important;
        max-width: none !important;
    }
}

body.bstem {
    box-shadow: 0 0 24px rgba(0, 0, 0, .55);
}

/* ---------- 1. 绿色底图 → 品牌渐层 ---------- */

/* 底图（login 的 Mobile-main-top-bg.png、会员中心的 topbg.png、
   VIP 横幅的 vip_bg_1@2x.png）本身已经换过色，
   所以这里不再盖 background-image —— VIP 横幅的「开通VIP 解锁全站」标题字
   是烧在图里的，一旦用渐层盖掉整张图，那行字就跟着不见。

   只有会员中心头部例外：topbg.png 原本只是一片近白的淡彩，没有内容，
   改成实心渐层才对得上首页顶部那条色带。 */
#uindex .tou,
.tou.tou--guest,
.tou.tou--user {
    background-image: var(--mac-grad-v) !important;
    background-size: cover;
    background-position: center;
}

/* 横幅底图换色后偏深，文字统一走白色 */
.member-vip-banner__inner,
.member-vip-banner__inner .member-vip-banner__sub,
.member-vip-banner__inner .member-vip-banner__text {
    color: #fff;
}

/* 横幅上的行动钮走金色，和首页「已购买」同一个语言 */
.member-vip-banner__inner .member-vip-banner__btn,
.member-vip-banner__inner a.btn-brand {
    background: var(--mac-gold) !important;
    color: var(--mac-gold-text) !important;
    border-color: transparent !important;
    font-weight: 700;
}

/* ---------- 2. 主要 CTA ---------- */

.btn-brand,
.btn-sub.auth-page-btn,
button.btn-brand,
input.btn-brand {
    background: var(--mac-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.btn-brand[disabled],
input.btn-brand[disabled],
.btn-brand.is-disabled {
    background: #c9ccd4 !important;
    color: #fff !important;
}

/* 付费 / 储值类 CTA 用金色，与首页底部「+已购买」一致 */
.user-recharge-btn,
.btn-gold,
.js-buy-submit,
.mall-buy-btn,
.upgrade-submit {
    background: var(--mac-gold) !important;
    color: var(--mac-gold-text) !important;
    border-color: transparent !important;
    font-weight: 700;
}

/* ---------- 3. 底部导航：对齐首页底部操作条 ---------- */

@media (max-width: 767px) {
    .hidden_mb .active,
    .hidden_mb .on,
    .hidden_mb li.cur {
        background: var(--mac-grad) !important;
        color: #fff !important;
    }

    .hidden_mb .active a,
    .hidden_mb .on a,
    .hidden_mb li.cur a {
        color: #fff !important;
    }
}

/* ---------- 3.5 版型：把首页的视觉语言搬到内页 ----------
   只换配色的话内页还是白底配小红点缀，跟首页那片大面积渐层对不上。
   这一段处理三个最有辨识度的元素：顶部色带、卡片渐层标题条、区块标题色条。 */

@media (max-width: 767px) {
    /* 手机版顶部标题列 → 品牌色带，对齐首页顶部那条搜寻面板 */
    .head_box.show-mobile.mobile-head,
    .head_box.show-mobile.mobile-head .head_inner_mobile_toolbar {
        background: var(--mac-grad) !important;
    }

    .head_box.show-mobile.mobile-head .hd_tit,
    .head_box.show-mobile.mobile-head a,
    .head_box.show-mobile.mobile-head i,
    .head_box.show-mobile.mobile-head span {
        color: #fff !important;
    }

    /* 全站通用卡片（相关推荐、搜寻结果、分类列表都用这个）
       → 改成首页卡片的样子：白底圆角 + 底部渐层标题条 */
    .vodlist_item {
        background: var(--tpl-bg-base, #fff);
        border-radius: 4px;
        overflow: hidden;
    }

    .vodlist_item > .vodlist_titbox {
        background: var(--mac-grad) !important;
        padding: 6px 8px !important;
        min-height: 36px;
        box-sizing: border-box;
        margin: 0 !important;
    }

    .vodlist_item > .vodlist_titbox .vodlist_title,
    .vodlist_item > .vodlist_titbox .vodlist_title a {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        font-size: 12px;
        line-height: 1.45;
        margin: 0;
    }

    .vodlist_item > .vodlist_titbox .vodlist_sub,
    .vodlist_item > .vodlist_titbox .vodlist_sub a {
        color: rgba(255, 255, 255, .78) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, .78) !important;
    }

    /* 相关推荐：改成跟首页一样 —— 横式封面、一行两个。
       佈景原本是一行三个的直式海报（padding-top 145%）。 */
    .pannel--vod-related .mac-vod-type-group__grid,
    .pannel--vod-related ul.vodlist {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .pannel--vod-related .vodlist_thumb {
        padding-top: 72% !important;   /* 与首页卡片同比例 */
        height: auto !important;
    }

    /* 相关推荐的卡片不要圆角，走直角 */
    .pannel--vod-related .vodlist_item,
    .pannel--vod-related .vodlist_thumb,
    .pannel--vod-related .vodlist_titbox,
    .pannel--vod-related .vodlist_item > a {
        border-radius: 0 !important;
    }

    /* 区块标题（播放列表 / 相关推荐）左侧加一条品牌色条 */
    .pannel_head > h3.title {
        position: relative;
        padding-left: 10px;
    }

    .pannel_head > h3.title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 14px;
        border-radius: 2px;
        background: var(--mac-grad);
    }
}

/* ---------- 3.9 播放页去掉页尾 ----------
   public/foot 里混了底部导览、浮动按钮，还有 foot-hlstem.js 这些全站共用的脚本，
   整段从模板移除会连带弄坏别的东西，所以保留 include、只把可见的页尾藏起来。
   手机版 .foot 里实际看得到的就是底部导览（PC 的 logo/版权区本来就不显示）。 */
body.vod-play-body .foot {
    display: none !important;
}

/* ---------- 4. 播放页 ---------- */

@media (max-width: 767px) {
    /* 选集：当前集用品牌渐层。容器是 ul.content_playlist > li.active */
    .content_playlist li.active,
    .content_playlist li.active a,
    .content_playlist li.on,
    .content_playlist li.on a {
        background: var(--mac-grad) !important;
        color: #fff !important;
        border-color: transparent !important;
    }

    /* 当前集的文字在渐层上一律转白。佈景用 background-clip:text 做渐层字，
       光设 color 会被 -webkit-text-fill-color 盖掉，两个都要改。 */
    .content_playlist li.active,
    .content_playlist li.active *,
    .content_playlist li.on,
    .content_playlist li.on * {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        background-clip: border-box !important;
        -webkit-background-clip: border-box !important;
    }

    .content_playlist li.active,
    .content_playlist li.on {
        background: var(--mac-grad) !important;
    }

    /* 播放页分区标题左侧的色条 */
    .vod-play-section-title::before,
    .play-title::before {
        background: var(--mac-grad) !important;
    }

    /* 播放器外层原本 min-height:335px，是替「播放器 + 片名列」预留的高度。
       片名列已移除，加上 .play_box 里两栏是 float 没有清除（高度算 0），
       就会在播放器下方留一段约 64px 的空白。这里让它贴合实际内容。 */
    .play_boxbg > .container {
        min-height: 0 !important;
    }

    .play_boxbg .play_box::after {
        content: '';
        display: block;
        clear: both;
    }
}

/* ---------- 5. 会员页共用列表 ---------- */

@media (max-width: 767px) {
    /* 分页 / 标签的选中态 */
    .user-tab .active,
    .user-tabs .active,
    .mac-tabs .active {
        background: var(--mac-grad) !important;
        color: #fff !important;
        border-color: transparent !important;
    }
}

/* ---------- 6. 深色模式 ---------- */

body.bstem {
    --mac-brand: #e0164f;
}

body.bstem.auth-ui-page {
    background-color: #16181d;
}