/* 书本信息部分样式 - 强制与其他区域宽度完全一致 */
.ebook-info {
    /* 强制宽度对齐 - 直接使用与电子书容器完全相同的宽度计算方式 */
    width: 90% !important;              /* 强制使用相同宽度 */
    max-width: 1000px !important;       /* 强制使用相同最大宽度 */
    
    /* 关键修复 - 计算控制栏缩放后的实际高度，提供足够间距 */
    margin: -40px auto 0px !important; /* 强制使用指定间距 */
    
    /* 强制对齐 - 使用与电子书容器完全相同的左右padding */
    padding: 15px !important;           /* 强制使用15px四边padding */
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    box-sizing: border-box !important;   /* 强制使用border-box */
    
    /* 修改 - 使用网格布局实现左右逐行对齐 */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左右两列 */
    grid-template-rows: auto auto auto; /* 三行 */
    gap: 15px 20px; /* 行间距15px，列间距20px */
    align-items: center; /* 垂直居中对齐 */
    
    /* 强制宽度对齐 - 使用与其他区域完全相同的缩放设置 */
    transform: scale(var(--scale-desktop)) !important;     /* 强制使用相同缩放 */
    transform-origin: top center !important;               /* 强制使用相同缩放原点 */
    
    /* 强制宽度对齐 - 使用与控制栏相同的margin计算方式 */
    margin-bottom: -40px !important;
}

/* 网格布局下的左右对齐 */
.book-title {
    font-size: 24px;
    margin: 0; /* 重置margin */
    font-weight: bold;
    color: #333;
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
    justify-self: start; /* 左对齐 */
}

.book-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
}

/* 统一左侧信息样式 - 放大灰色字体 */
.related-work,
.publisher {
    font-size: 18px; /* 从16px增加到18px */
    color: #666;
    margin: 0; /* 重置margin */
    justify-self: start; /* 左对齐 */
}

.tags {
    display: flex;
    justify-content: flex-end; /* 右对齐 */
    flex-wrap: wrap;
    gap: 8px;
    margin: 0; /* 重置margin */
    justify-self: end; /* 网格中右对齐 */
}

.tag {
    background: linear-gradient(45deg, rgba(106, 17, 203, 0.1), rgba(37, 117, 252, 0.1));
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    color: #6a11cb;
    transition: all 0.3s ease;
}

.tag:hover {
    background: linear-gradient(45deg, rgba(106, 17, 203, 0.2), rgba(37, 117, 252, 0.2));
    transform: translateY(-2px);
}

/* 右侧信息样式 - 放大字体，添加可点击星星评分 */
.total-pages {
    font-size: 20px; /* 从18px增加到20px */
    color: #666;
    margin: 0; /* 重置margin */
    justify-self: end; /* 右对齐 */
}

/* 可点击星星评分系统 - 适配网格布局 */

.rating-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0; /* 重置margin */
    justify-self: end; /* 网格中右对齐 */
}

.rating-label {
    font-size: 20px; /* 从18px增加到20px */
    color: #666;
    margin-right: 5px;
}

.star-rating {
    display: flex;
    gap: 3px;
}

.star {
    font-size: 24px; /* 增大星星尺寸 */
    color: #ddd;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.star:hover {
    transform: scale(1.1);
}

.star.filled {
    color: #ffc107;
}

.star.hover {
    color: #ffc107;
}

/* 响应式设计 - 信息区域部分 */
@media (max-width: 576px) {
    .ebook-info {
        /* 移动端强制宽度对齐 - 与其他区域保持完全一致 */
        width: 115% !important;             /* 强制使用与其他区域相同的移动端宽度 */
        
        /* 移动端关键修复 - 为移动端控制栏留出足够空间 */
        margin: 0px 30px 5px -30px !important;  /* 强制使用指定的移动端间距 */
        
        /* 移动端强制对齐 - 使用与其他区域完全相同的padding */
        padding: 12px !important;           /* 强制使用与移动端其他区域一致的padding */
        
        /* 移动端强制宽度对齐 - 使用与其他区域完全相同的缩放设置 */
        transform: scale(var(--scale-mobile)) !important;  /* 强制使用相同的移动端缩放 */
        
        /* 移动端强制宽度对齐 - 使用与控制栏相同的margin计算方式 */
        margin-bottom: calc(var(--margin-adjust-mobile) * 0.5) !important;
        
        /* 修改 - 移动端改为单列布局 */
        grid-template-columns: 1fr; /* 单列 */
        grid-template-rows: repeat(6, auto); /* 6行 */
        gap: 12px; /* 统一间距 */
        text-align: center; /* 移动端居中对齐 */
    }

    /* 移动端所有元素居中对齐 */
    .book-title,
    .related-work,
    .publisher,
    .tags,
    .total-pages,
    .rating-container {
        justify-self: center !important; /* 强制居中 */
    }

    .book-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .tags {
        justify-content: center;
    }
    
    /* 移动端星星评分样式调整 */
    .rating-container {
        justify-content: center;
    }
    
    .star {
        font-size: 22px; /* 移动端稍微小一点 */
    }
}