/* 网页右下角固定图标样式 */
.fixed-corner-icon {
    position: fixed; /* 相对于浏览器窗口固定定位 */
    bottom: 5%; /* 距离底部20px */
    right: 30px; /* 距离右侧20px */
    width: 70px; /* 宽度40px */
    height: 70px; /* 高度40px */
    z-index: 99; /* 最高层级，确保覆盖所有元素 */
    cursor: pointer;
    transition: transform 1s ease; /* 悬停缩放动画 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.5); /* 轻微阴影增强视觉效果 */
    border-radius: 100px; /* 可选：轻微圆角 */
}

.fixed-corner-icon:hover {
    transform: scale(1.05); /* 悬停时放大10% */
}
/* 广告弹窗样式 */
.ad-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* 黑色遮罩 */
    z-index: 9999; /* 最高层级 */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.ad-container {
    position: relative;
    max-width: 76%; /* 广告图宽度 */
    max-height: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
}
.ad-image {
    width: 100%;
    height: auto;
    cursor: pointer;
	border-radius: 16px; /* 图片圆角 */
}
.ad-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
    transition: background-color 0.2s ease;
}
.ad-close-btn:hover {
    background-color: #444;
}
/* 隐藏弹窗的样式 */
.ad-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
/* 新增图片展示区域样式 */
.featured-images-section {
    margin: 16px 0 40px 0;
}
.featured-images-grid {
    display: grid;
    /* 大屏4列，小屏2列 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* 断点控制：屏幕宽度≥768px时4列，<768px时2列 */
    grid-template-columns: 
        repeat(2, 1fr) /* 小屏默认2列 */;
    gap: 20px;
}
/* 媒体查询：大屏（≥768px）显示4列 */
@media (min-width: 768px) {
    .featured-images-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.featured-image-card {
    text-decoration: none;
    color: inherit;
}
.featured-image-wrapper {
    position: relative;
    /* 16:9比例 */
    aspect-ratio: 3/2;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    margin-bottom: 8px;
}
.featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.featured-image-card:hover .featured-image {
    transform: scale(1.05);
}
.featured-image-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
}

/* ———— 全屏白色遮罩层 ———— */
#loadingMask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* 白色背景 */
    z-index: 9999; /* 确保在最上层 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 淡出动画：0.5秒平滑消失 */
    transition: opacity 0.5s ease;
}
/* ———— 旋转Loading动画 ———— */
.loadingSpinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f0f0f0;
    border-top: 5px solid #E3C2A3; /* 旋转条颜色 */
    border-radius: 50%;
    animation: spin 1s linear infinite; /* 无限旋转 */
}
/* 旋转关键帧 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========== 今日推荐横向滑动轮播新增样式 ========== */
.recommend-wrap {
    position: relative;
}
.recommend-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.recommend-scroll-box {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none; /* 隐藏滚动条 firefox */
    -ms-overflow-style: none;
}
.recommend-scroll-box::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 chrome */
}
.recommend-card-row {
    display: flex;
    gap: 20px;
    width: max-content;
}
.recommend-card {
    width: 350px;
    flex-shrink: 0;
    cursor: pointer;
}
/* 强制720*405 16:9固定比例 */
.recommend-img-box {
    width: 100%;
    aspect-ratio: 900 / 600;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    margin-bottom: 10px;
}
.recommend-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.recommend-card:hover .recommend-img {
    transform: scale(1.06);
}
.recommend-card h4 {
    font-size: 15px;
    font-weight: 500;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
}
/* 左右翻页按钮 */
.scroll-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,204,0,0.9);
    border: none;
    font-size: 18px;
    cursor: pointer;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}
.scroll-btn:hover {
    background: #ffcc00;
}
.scroll-left {
    left: 4px;
}
.scroll-right {
    right: 4px;
}