/* RiPro豆瓣采集插件 - 统一样式文件 */
/* 基于用户提供的样式进行优化 */

/* 弹窗相关样式 */
#douban-select-modal .modal-dialog {
    max-width: 500px !important;
    width: 95% !important;
}

#douban-select-list {
    max-height: 100% !important;
}

@media (max-width: 767px) {
    #douban-select-modal .modal-dialog {
        max-width: 98vw !important;
        width: 98vw !important;
    }
}

#douban-modal-title {
    border-bottom: 1px solid #dcdcde;
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    margin: 0;
}

/* 豆瓣影视信息卡片 */
.movie-info {
    padding: 7px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(26, 26, 26, .1);
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgb(116 235 213 / 7%), rgb(159 172 230 / 10%));
}

.movie-info img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 20px;
}

.movie-info-content {
    flex: 1;
}

.movie-info h2 {
    font-size: 26px;
    color: #333;
    margin-bottom: 10px;
}

.movie-info p {
    font-size: 14px;
    margin-bottom: 5px;
}

/* 移动端响应式 */
@media (max-width: 767px) {
    .movie-info {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .movie-info img {
        margin-right: 38px;
        margin-bottom: 10px;
    }
}

/* 影视标题样式 */
.movie-title {
    font-size: 20px;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    text-align: center;
}

/* 豆瓣评分徽章样式 */
.badge-vlo1,
.ripro-douban .badge-vlo1 {
    background: rgba(41, 151, 247, .1);
    color: #3b82f6;
    border-radius: 5px;
    padding: 2px 6px;
    margin-left: 9px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.badge-vlo2,
.ripro-douban .badge-vlo2 {
    background: #ffd5d5;
    color: #f95a5a;
    border-radius: 5px;
    padding: 2px 6px;
    margin-left: 9px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 简介信息限制显示2行 */
.vod-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
}

/* 主演信息限制显示2行 */
.actor-list,
.ripro-douban .actor-list {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em;
    line-height: 1.5em;
}

/* 影视热评区域样式 */
.custom-blockquote,
.ripro-douban .custom-blockquote {
    background: linear-gradient(135deg, rgb(116 235 213 / 2%), rgb(159 172 230 / 5%));
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    margin: 15px 0;
    padding: 20px 20px;
    position: relative;
    display: block;
}

.custom-blockquote::before,
.ripro-douban .custom-blockquote::before {
    color: #aaa;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 10px;
    vertical-align: -0.4em;
}

.custom-blockquote::after,
.ripro-douban .custom-blockquote::after {
    color: #bbb;
    content: close-quote;
    font-size: 4em;
    line-height: 0.1em;
    opacity: 0.7;
    position: absolute;
    right: 20px;
    bottom: 10px;
}

/* 年份样式 */
.year,
.ripro-douban .year {
    font-size: 16px;
    margin-left: 4px;
}

/* 后台编辑器专用样式 */
/* 影视选择列表样式 */
.ripro-douban #douban-select-list {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0;
    border-radius: 0.25rem;
    background-color: #fff;
}

/* 影视选择容器样式 */
.ripro-douban .movie-selection {
    width: 100%;
    box-sizing: border-box;
}

/* 影视项目悬停效果 */
.ripro-douban .movie:hover {
    transform: translateY(-3px);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 1rem 3rem rgba(31,45,61,.13);
}

.ripro-douban .movie img:hover {
    opacity: 0.9;
    transition: opacity 0.3s ease-in-out;
}

/* 响应式设计 */
@media (max-width: 650px) {
    .ripro-douban .movie {
        flex: 0 0 calc(33.33% - 16px) !important;
        max-width: calc(33.33% - 16px) !important;
    }
}

@media (max-width: 480px) {
    .ripro-douban .movie {
        flex: 0 0 calc(50% - 16px) !important;
        max-width: calc(50% - 16px) !important;
    }
}

/* 确保插件样式优先级 */
.ripro-douban {
    position: relative;
    clear: both;
    margin: 1rem 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* 豆瓣容器内的影视信息卡片 - 使用统一样式 */
.ripro-douban .movie-info {
    padding: 7px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(26, 26, 26, .1);
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgb(116 235 213 / 7%), rgb(159 172 230 / 10%));
}

.ripro-douban .movie-info img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 20px;
}

.ripro-douban .movie-info-content {
    flex: 1;
}

.ripro-douban .movie-info h2,
.ripro-douban .movie-title {
    font-size: 20px;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    color: #333;
}

.ripro-douban .movie-info p,
.ripro-douban .movie-info-content p {
    font-size: 14px;
    margin-bottom: 5px;
}

/* 移动端响应式 - ripro-douban 命名空间 */
@media (max-width: 767px) {
    .ripro-douban .movie-info {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ripro-douban .movie-info img {
        margin-right: 38px;
        margin-bottom: 10px;
    }
}

/* 防止WordPress自动添加的p标签影响布局 */
.ripro-douban .movie-info > p:empty,
.ripro-douban .movie-info > p:first-child:empty,
.ripro-douban > p:empty {
    display: none;
    margin: 0;
    padding: 0;
    height: 0;
    line-height: 0;
}

.ripro-douban p:empty {
    display: none;
}

/* 确保movie-info内部结构正确 */
.ripro-douban .movie-info {
    display: flex;
    align-items: center;
}

.ripro-douban .movie-info > img {
    flex-shrink: 0;
}

.ripro-douban .movie-info > .movie-info-content {
    flex: 1;
}

/* 处理图片可能被p标签包裹的情况 */
.ripro-douban .movie-info > p.movie-img-wrapper {
    /* 图片包裹器p标签的样式 */
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    display: flex;
}

.ripro-douban .movie-info > p.movie-img-wrapper > img {
    /* 确保被p标签包裹的图片样式正确 */
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 20px;
}

/* 通用的图片包裹p标签处理（兼容性） */
.ripro-douban .movie-info > p:first-child:only-of-type {
    /* 如果p标签是movie-info的第一个也是唯一的p子元素，可能包含图片 */
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    display: flex;
}

.ripro-douban .movie-info > p:first-child:only-of-type > img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 20px;
}

/* 防止其他p标签在flex布局中显示 */
.ripro-douban .movie-info > p:not(.movie-img-wrapper):not(:first-child:only-of-type) {
    display: none;
}

/* 确保所有元素都使用正确的盒模型 */
.ripro-douban * {
    box-sizing: border-box;
}

/* 链接样式 */
.ripro-douban a {
    color: #2163e8;
    text-decoration: underline;
}

.ripro-douban a:hover {
    color: #1a4db8;
    text-decoration: none;
}

/* 强调文本样式 */
.ripro-douban strong {
    font-weight: 600;
}

/* 标题样式 */
.ripro-douban h2,
.ripro-douban h3,
.ripro-douban h4 {
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    color: #333;
    margin: 1.5rem 0 0.75rem 0;
    padding: 0;
}

.ripro-douban h3 {
    font-size: 1.25rem;
}

.ripro-douban h4 {
    font-size: 1.125rem;
}

/* 链接样式 */
.ripro-douban a {
    color: #2163e8;
    text-decoration: underline;
}

.ripro-douban a:hover {
    color: #1a4db8;
    text-decoration: none;
}

/* 强调文本样式 */
.ripro-douban strong {
    font-weight: 600;
}

/* 打印样式 */
@media print {
    .ripro-douban .movie-info {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .ripro-douban .custom-blockquote::before,
    .ripro-douban .custom-blockquote::after {
        display: none;
    }
}