/*
Theme Name: My Video Sharing Child Theme
Theme URI: https://yourwebsite.com/
Description: 专为视频分享定制的 YouTube 风格布局 - 完整稳定优化版
Author: Your Name
Author URI: https://yourwebsite.com/
Template: generatepress
Version: 1.6.5
*/

/* 引入父主题样式 */
@import url("../generatepress/style.css"); 

:root {
    --primary-color: #ff0000; /* YouTube 红 */
    --accent-color: #065fd4;  /* 链接蓝 */
    --text-main: #0f0f0f;
    --text-dim: #606060;
    --bg-main: #ffffff;
    --bg-hover: rgba(0,0,0,0.05);
    --border-color: #e5e5e5;
    --radius-lg: 12px;
    --radius-md: 8px;
    --shadow: 0 4px 20px rgba(0,0,0,0.08);
    --player-bg: #000000;
}

/* ==========================================================
   1. 基础布局与 GeneratePress 修正
   ========================================================== */
/* 强制视频文章页面的容器全宽，以适应播放器布局 */
.single-video .site-container,
.single-video .grid-container, 
.single-video .container, 
.single-video #content, 
.single-video .content-area,
.single-video .site-main,
.single-video #primary {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-video .entry-content {
    margin-top: 0 !important;
}

/* ==========================================================
   2.视频网格主页 - 两栏布局
   ========================================================== */

/* 主页布局容器 */
.video-home-layout {
    display: flex;
    gap: 24px;
    max-width: 1800px;
    margin: 20px auto;
    padding: 0 24px;
}

/* 左侧：视频分类标签侧边栏 */
.video-sidebar-nav {
    width: 240px; 
    flex-shrink: 0;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: sticky;
    top: 20px;
    align-self: flex-start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.video-sidebar-nav h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* 分类标签列表 - 每行一个标签 */
.category-tags-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-tag-item {
    width: 100%;
}

.category-tag-item a {
    display: block;
    padding: 10px 12px;
    background: #f2f2f2;
    border-radius: 8px;
    text-decoration: none;
    color: #0f0f0f;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.category-tag-item.active a { 
    background: #0f0f0f; 
    color: #fff;
    font-weight: 600;
}

.category-tag-item a:hover { 
    background: #e5e5e5; 
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.category-tag-item.active a:hover {
    background: #000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 右侧：主内容区域 */
.video-main-content {
    flex: 1;
    min-width: 0; /* 防止flex元素溢出 */
}

/* 横幅广告容器 */
.homepage-banner-ad {
    width: 100%;
    margin-bottom: 20px;
}

/* 横幅广告链接 */
.banner-ad-link {
    display: block;
    text-decoration: none;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.banner-ad-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* 横幅广告图片 */
.banner-ad-link img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.banner-ad-link:hover img {
    transform: scale(1.02);
}

/* 广告标签 */
.ad-label {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    z-index: 1;
}

/* 视频网格 */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 32px 16px;
    width: 100%;
    padding: 0;
}

.video-grid-item {
    margin-bottom: 0; /* 由gap控制间距 */
}

.thumbnail-link {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background-color: #000;
    position: relative;
    margin-bottom: 12px;
}

.thumbnail-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-grid-item:hover .thumbnail-link img { 
    transform: scale(1.05); 
}

/* 视频播放按钮覆盖层 */
.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.thumbnail-link:hover .video-overlay {
    opacity: 1;
}

.dashicons-controls-play {
    color: #fff;
    font-size: 40px;
    width: 40px;
    height: 40px;
}

.video-info h3 {
    font-size: 16px;
    margin: 0 0 4px 0;
    line-height: 1.4;
    color: #0f0f0f;
}

.entry-title a {
    text-decoration: none;
    color: #0f0f0f;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-meta {
    font-size: 13px;
    color: #606060;
}

/* 分页容器 */
.pagination-container {
    grid-column: 1/-1;
    padding: 40px 0;
    text-align: center;
    width: 100%;
}

/* 移动端适配 */
@media (max-width: 768px) {
    /* 两栏布局调整为单列 */
    .video-home-layout {
        flex-direction: column;
        gap: 15px;
        padding: 0 15px;
    }
    
    .video-sidebar-nav {
        width: 100%;
        position: static;
        max-height: none;
        margin-bottom: 0;
    }
    
    /* 移动端分类标签改为两列 */
    .category-tags-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .category-tag-item {
        width: auto;
    }
    
    /* 横幅广告调整 */
    .banner-ad-link img {
        max-height: 150px;
    }
    
    .ad-label {
        top: 8px;
        right: 8px;
        padding: 3px 8px;
        font-size: 11px;
    }
    
    /* 视频网格调整 */
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }
}

/* 小屏幕手机 */
@media (max-width: 480px) {
    .video-home-layout {
        padding: 0 12px;
    }
    
    /* 分类标签改为单列 */
    .category-tags-list {
        grid-template-columns: 1fr;
    }
    
    .video-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .banner-ad-link img {
        max-height: 120px;
    }
    
    .ad-label {
        top: 6px;
        right: 6px;
        padding: 2px 6px;
        font-size: 10px;
    }
}

/* 超大屏幕适配 */
@media (min-width: 1400px) {
    .video-home-layout {
        max-width: 1600px;
    }
    
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}
/* ==========================================================
   4. 视频播放页布局
   ========================================================== */
.video-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 24px;    
    padding: 24px 40px;
    max-width: 1750px;
    margin: 0 auto;
}

.video-player-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    container-type: inline-size; /* 开启容器查询支持 */
    background-color: var(--player-bg);
    border-radius: var(--radius-lg);
    overflow: visible; /* 改为 visible 允许卡片阴影溢出 */
    box-shadow: var(--shadow);
}

.video-player-wrapper iframe,
.video-player-wrapper video,
.video-player-wrapper .plyr {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important; 
    height: 100% !important;
    border: none;
    border-radius: var(--radius-lg);
}

/* ==========================================================
   5. 交互栏 (Interaction Bar)
   ========================================================== */
.video-header-info {
    padding: 20px 0 12px;
}

.video-header-info h1 {
    font-size: 20px;
    margin-bottom: 12px;
}

.video-interaction-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.like-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    background-color: #f2f2f2; /* 默认浅灰 */
    color: var(--text-main);
    border: none;
    
    /* 药丸形状尺寸 */
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.05, 0, 0, 1);
    user-select: none; /* 防止文字被选中 */
}

/* 悬停效果 */
.like-button:hover {
    background-color: #e5e5e5;
}

/* 点击按下时的瞬间缩放反馈 */
.like-button:active {
    transform: scale(0.95);
}

/* 图标微调 */
.like-button .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

/* --- 已点赞状态 (Voted) --- */
.like-button.voted {
    background-color: #ffe5e5 !important; /* 浅红色背景 */
    color: var(--primary-color) !important; /* YouTube 红文字 */
    cursor: default;
    pointer-events: none; /* 彻底禁用点击，防止重复提交 */
}

.like-button.voted .dashicons {
    color: var(--primary-color) !important;
    /* 如果你想让图标有个跳动效果，可以加下面这行 */
    animation: like-pop 0.3s ease;
}

/* 点赞时的微动画 */
@keyframes like-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* 适配移动端：在手机上稍微放大一点方便点击 */
@media (max-width: 768px) {
    .like-button {
        height: 40px;
        padding: 0 20px;
        font-size: 15px;
    }
}

/* ==========================================================
   6.黄金抽屉广告样式
   ========================================================== */
.drawer-ad-logic {
    display: grid;
    grid-template-rows: 0fr; 
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #f3cf44 0%, #f19f3a 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    padding: 12px;
    min-height: 150px; /* 增加抽屉广告最小高度 */
}

.drawer-ad-logic.active { 
    grid-template-rows: 1fr; 
    margin: 0 0 25px 0; 
    box-shadow: 0 10px 30px rgba(241, 159, 58, 0.3);
    min-height: 150px; /* 激活时保持相同高度 */
}

.drawer-ad-inner-scroll {
    display: flex;
    gap: 16px;
    padding: 12px 100px 12px 12px; /* 右侧内边距增加，为竖向控制按钮留出空间 */
    box-sizing: border-box;
    overflow-x: visible; /* 桌面端不移除滑块，改为不出现滑块 */
    justify-content: flex-start;
    flex-wrap: wrap; /* 允许换行 */
    align-items: center; /* 垂直居中广告项 */
    min-height: 126px; /* 确保内部区域有最小高度 */
}

/* 每个广告项 - 桌面端横向排列，不换行 */
.drawer-item {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.35); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
    border-radius: 10px;
    padding: 12px;
    text-decoration: none !important;
    color: #4a3a05 !important;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    width: calc(33.333% - 10.666px); /* 三个广告项平分宽度，考虑gap */
    background-color: transparent;
    flex-direction: row;
    align-items: center;
    margin-bottom: 0; /* 桌面端不需要底部间距 */
    height: 126px; /* 固定广告项高度 */
    min-height: 126px; /* 确保最小高度 */
    box-sizing: border-box; /* 确保内边距包含在高度内 */
}

.drawer-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.45);
}

/* 产品图片 - 增大尺寸，保持1:1比例 */
.p-img-thumb { 
    width: 120px; /* 增大图片宽度 */
    height: 120px; /* 保持1:1比例，增大高度 */
    object-fit: cover; /* 裁剪填充正方形 */
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
    transition: transform 0.3s ease;
    flex-shrink: 0; /* 防止图片收缩 */
}

/* 如果想显示完整图片而非裁剪，可用此替代类 */
.p-img-thumb.contain {
    object-fit: contain;
    background: #f8f8f8;
    padding: 5px;
}

/* 图片悬停时的缩放效果 */
.drawer-item:hover .p-img-thumb {
    transform: scale(1.05); 
}

/* 文本区域 - 增加高度以匹配更大容器 */
.p-text-box {
    margin-left: 16px;
    flex: 1;
    overflow: hidden;
    background-color: transparent; 
    height: 120px; /* 与图片高度匹配 */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 优化垂直空间分布 */
    box-sizing: border-box;
    min-height: 0; /* 允许收缩 */
}

/* 标题文本 - 增加显示行数，利用更多垂直空间 */
.p-title-text { 
    font-size: 15px; /* 稍微增大字体 */
    font-weight: bold;
    margin: 0 0 8px 0; /* 底部留出间距 */
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 增加到3行，利用更多垂直空间 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-main);
    flex: 1; /* 占据可用空间 */
    min-height: 0; /* 允许收缩 */
}

/* 底部操作区域 */
.p-text-box .action-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* 推到容器底部 */
    padding-top: 8px; /* 与上面文字的间距 */
    border-top: 1px solid rgba(241, 159, 58, 0.2); /* 添加分隔线 */
}

.p-text-box .action-btn {
    font-size: 12px; /* 增大按钮字体 */
    border: 1px solid #f19f3a;
    color: #f19f3a;
    padding: 4px 12px; /* 增大内边距 */
    border-radius: 4px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    white-space: nowrap;
    font-weight: 600;
}

.p-text-box .sponsor-label {
    font-size: 10px;
    color: #999;
    white-space: nowrap;
}

.drawer-item:hover .p-text-box .action-btn {
    background: rgba(241, 159, 58, 0.1);
    transform: scale(1.05);
    border-color: #e6891e;
    color: #e6891e;
}

/* 控制按钮在右侧，竖向五行布局 */
.drawer-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 50%; /* 垂直居中 */
    right: 20px; /* 距离右侧20px */
    transform: translateY(-50%); /* 垂直居中 */
    z-index: 20;
    background-color: transparent !important;
    gap: 0; /* 行间距为0，由内部元素控制 */
    width: 60px; /* 固定宽度 */
}

/* 第一行：关闭按钮（×） */
.drawer-controls .close-btn {
    width: 32px; /* 稍大一些 */
    height: 32px;
    font-size: 24px; /* 稍大一些 */
    background-color: transparent !important;
    color: #4a3a05;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px; /* 增加与下面文字的间距 */
}

/* 关闭按钮悬停效果 */
.drawer-controls .close-btn:hover {
    color: #000;
    transform: scale(1.1);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* 倒计时文字容器（倒计时三字） */
.drawer-controls .countdown-words {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: transparent !important;
    padding: 8px 0; /* 增加内边距 */
    border-radius: 5px;
    margin-bottom: 8px; /* 增加与数字倒计时的间距 */
}

/* 倒计时文字 - 竖向排列的三个字 */
.drawer-controls .countdown-words .char {
    font-size: 14px; /* 稍大一些 */
    font-weight: 600;
    color: #4a3a05;
    text-align: center;
    width: 100%;
    line-height: 1.3;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.7);
    margin: 2px 0; /* 增加字间距 */
}

/* 数字倒计时容器（第5行） */
.drawer-controls .timer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: transparent !important;
    border-top: 1px solid rgba(74, 58, 5, 0.3); /* 上方添加分隔线 */
    padding-top: 6px; /* 增加内边距 */
    margin-top: 4px; /* 增加上方间距 */
}

/* 数字倒计时（20s） - 合并数字和s在同一行 */
.drawer-controls .timer-number {
    font-size: 20px; /* 增大数字 */
    font-weight: bold;
    color: #ff0000;
    text-align: center;
    line-height: 1;
    margin: 0;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.7);
    white-space: nowrap; /* 防止换行 */
}

/* 秒单位（s）- 已合并到数字中，隐藏单独的元素 */
.drawer-controls .timer-unit {
    display: none; /* 隐藏单独的秒单位元素 */
}

/* --- 移动端适配 (平板和手机) --- */
@media (max-width: 1024px) {
    /* 平板端：2个广告项并排，启用横向滚动 */
    .drawer-ad-logic {
        min-height: 130px; /* 调整平板端最小高度 */
    }
    
    .drawer-ad-inner-scroll {
        overflow-x: auto; /* 平板端启用横向滚动 */
        flex-wrap: nowrap; /* 不允许换行 */
        padding: 8px 80px 8px 8px; /* 右侧内边距调整 */
        min-height: 110px; /* 调整内部最小高度 */
    }
    
    .drawer-item {
        width: calc(50% - 8px); /* 两个广告项平分宽度 */
        min-width: 300px; /* 增加最小宽度 */
        flex-shrink: 0; /* 不允许收缩 */
        height: 110px; /* 调整平板端高度 */
        min-height: 110px; /* 调整平板端最小高度 */
    }
    
    .p-img-thumb {
        width: 90px; /* 平板端图片大小 */
        height: 90px; /* 保持1:1比例 */
    }
    
    .p-text-box {
        height: 90px; /* 调整文本区域高度以匹配图片 */
    }
    
    .p-title-text {
        font-size: 13px;
        -webkit-line-clamp: 2; /* 平板端显示2行 */
    }
    
    /* 控制按钮在平板端 */
    .drawer-controls {
        width: 50px;
        right: 12px;
    }
    
    .drawer-controls .close-btn {
        width: 28px;
        height: 28px;
        font-size: 20px;
        margin-bottom: 8px;
    }
    
    .drawer-controls .countdown-words .char {
        font-size: 12px;
    }
    
    .drawer-controls .timer-number {
        font-size: 16px; /* 调整平板端数字大小 */
    }
}

@media (max-width: 768px) {
    /* 手机端：横向滚动 */
    .drawer-ad-logic {
        min-height: 120px; /* 调整手机端最小高度 */
    }
    
    .drawer-ad-inner-scroll {
        overflow-x: auto; /* 手机端启用横向滚动 */
        flex-wrap: nowrap; /* 不允许换行 */
        padding: 8px 70px 8px 8px; /* 右侧内边距调整 */
        gap: 12px;
        min-height: 104px; /* 调整手机端最小高度 */
    }
    
    .drawer-item {
        padding: 10px;
        width: 100%; /* 手机端每个广告项占满宽度 */
        min-width: 320px; /* 增加最小宽度，确保有足够内容空间 */
        flex-shrink: 0; /* 不允许收缩 */
        height: 104px; /* 调整手机端高度 */
        min-height: 104px; /* 调整手机端最小高度 */
    }
    
    .p-img-thumb {
        width: 80px; /* 手机端图片大小 */
        height: 80px; /* 保持1:1比例 */
    }
    
    .p-text-box {
        height: 80px; /* 调整文本区域高度以匹配图片 */
        margin-left: 12px;
    }
    
    .p-title-text {
        font-size: 12px;
        margin-left: 0;
        -webkit-line-clamp: 2; /* 手机端显示2行 */
    }
    
    .p-text-box .action-btn {
        font-size: 10px;
        padding: 2px 8px;
    }
    
    .p-text-box .sponsor-label {
        font-size: 9px;
    }
    
    /* 控制按钮在手机端 */
    .drawer-controls {
        top: 50%;
        right: 10px;
        transform: translateY(-50%); /* 垂直居中 */
        width: 45px;
    }
    
    .drawer-controls .close-btn {
        width: 26px;
        height: 26px;
        font-size: 18px;
        margin-bottom: 6px;
    }
    
    .drawer-controls .countdown-words .char {
        font-size: 11px;
    }
    
    .drawer-controls .timer-container {
        border-top: 1px solid rgba(74, 58, 5, 0.2);
        padding-top: 4px;
    }
    
    .drawer-controls .timer-number {
        font-size: 14px; /* 调整手机端数字大小 */
    }
}

/* 超大屏幕适配 */
@media (min-width: 1200px) {
    .drawer-ad-inner-scroll {
        justify-content: center; /* 超大屏幕居中显示 */
    }
    
    .drawer-item {
        width: calc(33.333% - 10.666px); /* 三个广告项平分宽度 */
    }
}
/* ==========================================================
   7. 侧边栏内容 (推荐视频与赞助商广告)
   ========================================================== */

/* --- 7.0 列表容器重置 --- */
.recommended-video-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100%;
    display: flex;
    flex-direction: column; /* 确保子项纵向排列 */
}

/* 既然 HTML 里没用 li，这一段可以保留作为备份，或者直接忽略 */
.recommended-video-list li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* --- 7.1 推荐视频列表项 --- */
.rec-video-item {
    display: flex;
    gap: 12px;
    align-items: flex-start; 
    text-decoration: none;
    width: 100%;
    
    /* 核心修改：在这里设置推荐位之间的缝隙 */
    margin-bottom: 20px !important; 
    transition: opacity 0.2s ease;
}

.rec-video-item:hover {
    opacity: 0.8;
}

/* 最后一个去掉间距，防止底部留白过多 */
.rec-video-item:last-child {
    margin-bottom: 0 !important;
}

.video-thumb-small {
    /* 稍微缩小一点宽度（原200px），给文字留出更多空间 */
    flex: 0 0 180px !important;
    height: 101px !important; /* 保持 16:9 比例 */
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
    flex-shrink: 0; /* 防止图片被压缩 */
}

.video-thumb-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

/* --- 7.2 推荐位文字区域 --- */
.rec-info {
    flex: 1;
    min-width: 0; /* 配合 ellipsis 防止溢出 */
}

.rec-info h4 {
    font-size: 14px;
    color: var(--text-main);
    margin: 0 0 4px 0 !important;
    line-height: 1.4;
    font-weight: 500;
    /* 标题超过两行显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rec-meta {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}
/* --- 7.2 赞助商广告 (左右布局版) --- */
.sidebar-ad-item {
    display: flex !important;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    margin-bottom: 20px;
}

.sidebar-ad-thumb {
    /* 广告图尺寸略小以示区分 */
    flex: 0 0 140px; 
    height: 90px;
    border-radius: 4px;
    overflow: hidden;
    background: #f0f0f0;
}

.sidebar-ad-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 7.3 公用文字信息区域 --- */
.rec-info, .sidebar-ad-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 内部元素左对齐 */
    text-align: left;
    padding: 0 !important; /* 清除潜在干扰 */
}

.rec-info h4, .sidebar-ad-desc {
    font-size: 14px;
    color: var(--text-main);
    margin: 0 0 6px 0 !important;
    line-height: 1.3;
    font-weight: 500;
    text-align: left;
}

/* 推荐视频标题：最多显示两行 */
.rec-info h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 广告标签样式 */
.sidebar-ad-label {
    display: inline-block;
    font-size: 10px;
    background: #f2f2f2;
    padding: 2px 6px;
    color: #999;
    border-radius: 3px;
    margin-bottom: 6px;
}

/* 元数据与描述文字 */
.rec-meta, .sidebar-ad-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* 广告描述文字：最多显示三行 */
.sidebar-ad-desc {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ==========================================================
   8. 响应式适配 (Responsive)
   ========================================================== */
/* 平板端 */
@media (max-width: 1200px) {
    .video-layout-grid { 
        grid-template-columns: 1fr; 
        padding: 0;
    }
    .video-player-wrapper {
        border-radius: 0;
    }
    .video-header-info, .video-sidebar {
        padding: 0 15px;
    }
}

/* 手机端 */
@media (max-width: 768px) {
    .video-home-layout { 
        flex-direction: column; 
        padding: 0; 
    }
    
    .video-sidebar-nav { 
        width: 100%; 
        overflow-x: auto;
        padding: 10px 15px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .category-tags-list {
        display: flex;
        gap: 8px;
    }

    .video-grid {
        grid-template-columns: 1fr;
        padding: 15px;
    }
    
    .shoppable-overlay {
        width: 140px;
        bottom: 15%;
        left: 15px;
    }

    .video-thumb-small {
        flex: 0 0 140px;
        height: 80px;
    }
}

/* 辅助：隐藏 GeneratePress 默认标题 */
.single-video .entry-header { 
    display: none !important; 
}

/* ==========================================================
   9. 视频发布与管理页面 (Submit & Manage) 优化版
   ========================================================== */

/* 隐藏主题在发布页自动生成的干扰元素 */
.page-template-page-submit-video .post-thumbnail, 
.page-template-page-submit-video .entry-header img,
.page-template-page-submit-video .entry-title { 
    display: none !important; 
}

.submit-pro-container { 
    max-width: 1400px; /* 增加最大宽度 */
    margin: 40px auto; 
    padding: 0 20px; 
    position: relative; 
}

/* 状态提示框 */
.alert-box { 
    background: #dfedda; 
    color: #396d22; 
    padding: 15px; 
    border-radius: var(--radius-md); 
    margin-bottom: 25px; 
    text-align: center; 
    border: 1px solid #c3e6cb;
}

/* 选项卡导航 */
.tab-header { 
    display: flex; 
    gap: 12px; 
    margin-bottom: 30px; 
    border-bottom: 2px solid var(--border-color); 
    padding-bottom: 15px; 
    flex-wrap: wrap; /* 允许换行 */
}

.tab-btn { 
    padding: 12px 24px; 
    border: none; 
    background: #f0f0f0; 
    font-weight: 600; 
    cursor: pointer; 
    border-radius: var(--radius-md); 
    transition: all 0.2s;
    white-space: nowrap; /* 防止按钮文字换行 */
}

.tab-btn.active { 
    background: var(--accent-color); 
    color: #fff; 
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* 表单布局 */
.form-grid { 
    display: grid; 
    grid-template-columns: 1.6fr 1fr; 
    gap: 30px; 
}

.field { margin-bottom: 20px; }
.field label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: 600; 
    font-size: 14px;
}

.field input[type="text"], 
.field input[type="url"], 
.field textarea, 
.custom-select { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #ccc; 
    border-radius: var(--radius-md); 
    box-sizing: border-box; 
    font-size: 14px;
}

/* 视频预览区域强制 16:9 */
#video-preview-container { 
    margin-top: 15px; 
    background: #000; 
    border-radius: var(--radius-md); 
    aspect-ratio: 16 / 9;
    overflow: hidden; 
    position: relative; 
    border: 1px solid #000;
}

#video-preview-render { width: 100%; height: 100%; }
#video-preview-render iframe, 
#video-preview-render video { 
    width: 100% !important; 
    height: 100% !important; 
    border: none !important; 
}

/* 推广商品设置区 (多产品增强) */
.promo-box { 
    background: #f9f9f9; 
    padding: 20px; 
    border-radius: var(--radius-lg); 
    border: 1px solid var(--border-color); 
}

.product-entry {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius-md);
    padding: 15px;
    margin-bottom: 15px;
    transition: transform 0.2s, border-color 0.2s;
}

.product-entry:hover {
    border-color: var(--accent-color);
    transform: translateX(5px);
}

.current-img-preview img { 
    width: 100px; 
    height: 60px; 
    object-fit: cover;
    border-radius: 4px; 
    margin-top: 8px; 
    border: 1px solid #ddd;
}

/* 底部按钮区 */
.form-footer { 
    margin-top: 30px; 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
}

.save-btn { 
    background: var(--accent-color); 
    color: #fff; 
    padding: 14px 40px; 
    border: none; 
    border-radius: 30px; /* 药丸形状更现代 */
    font-weight: bold; 
    cursor: pointer; 
    box-shadow: 0 4px 12px rgba(6, 95, 212, 0.2);
}

/* ==========================================================
   视频管理页面 - 全宽度Grid布局
   ========================================================== */

/* 1. 移除所有宽度限制 */
body.page-template-page-submit-video {
    overflow-x: hidden;
}

body.page-template-page-submit-video .site,
body.page-template-page-submit-video .site-content,
body.page-template-page-submit-video #page,
body.page-template-page-submit-video #content,
body.page-template-page-submit-video .content-area,
body.page-template-page-submit-video #primary,
body.page-template-page-submit-video #main,
body.page-template-page-submit-video .site-main {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
}

/* 2. 提交容器全宽度 */
.submit-pro-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 20px !important;
    margin: 40px auto !important;
    box-sizing: border-box !important;
}

/* 3. 管理页面全宽度 */
.manage-page-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 4. 管理网格 - 全宽度多列 */
.manage-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 40px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

/* 5. 响应式调整 */
@media (max-width: 768px) {
    .manage-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .manage-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    }
}

@media (min-width: 1025px) {
    .manage-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    }
}

/* ==========================================================
   9.6视频管理页面 - 缩略图16:9固定比例
   ========================================================== */

/* 6. 缩略图容器 - 强制16:9比例 */
.card-thumb {
    aspect-ratio: 16/9; /* 强制16:9比例 */
    width: 100%;
    background: #f0f0f0;
    overflow: hidden;
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}

/* 缩略图图片 - 裁剪多余部分，填充整个容器 */
.card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 关键：裁剪多余部分，保持比例填充 */
    object-position: center; /* 图片居中裁剪 */
    display: block;
    transition: transform 0.3s ease;
}

/* 鼠标悬停时图片稍微放大 */
.manage-card:hover .card-thumb img {
    transform: scale(1.05);
}

/* 无封面占位符 */
.no-thumbnail {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
}