/*
 * 首页小工具美化CSS（移动端优化+电脑端还原）
 * Author: 源分享
 * Author URI: https://www.yfxw.cn/
 */

/* ==============================================
   1. 基础公共样式（通用样式）
   ============================================== */


/* 1.1 排行榜标题（保持原排版）- 这部分保留全局 */
.ripro_v5-widget-rank .syymw-rnk-section-title {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px; /* 加小内边距，避免标题贴边 */
    height: 100px;
}
.syymw-rnk-section-title span .fa-home {
  color: #ff6c00;
  margin-right: 1px;
  font-size: 32px;
}
.ripro_v5-widget-rank .syymw-rnk-more { 
    text-decoration: none;
    transition: color 0.3s; 
    font-size: 14px; 
    color: #007bff; 
    margin-left: 10px; /* 保持原间距 */
    margin-bottom: -20px;
}


/* 1.2 容器基础样式（改为Flex固定布局） */
.ripro_v5-widget-rank .ranks-content {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    width: 100%;
    max-width: 100%; /* 让整个模块自适应主题容器宽度 */
}

/* 1.3 分类栏固定宽度 */
.ripro_v5-widget-rank .ranks-bar {
    position: relative;
    background-color: #ff6c00;
    background-image: url(../images/css/rank_vip.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom;
    color: #fff;
    padding: 40px 0 0 80px;
    width: 350px;
    flex-shrink: 0;
    overflow: hidden;
    transition: transform 0.5s;
    z-index: 1; /* 保证内容在上 */
}



/* 渐变动画用伪元素，半透明，不遮挡文字和 PNG */
.ripro_v5-widget-rank .ranks-bar:hover::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(124.07deg, rgba(103,66,252,0.9), rgba(13,255,244,0.9), rgba(255,0,255,0.9), rgba(255,180,0,0.9));
    background-size: 400% 400%;
    pointer-events: none;
    animation: gradientMove 5s ease infinite;
    z-index: -1; /* 保证内容在上 */
}

/* 渐变动画关键帧 */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 右侧内容栏 — 自适应剩余空间 */
.ripro_v5-widget-rank .rank-results {
    flex: 1; /* 自动占满剩余空间 */
    padding: 20px 40px 10px;
    box-sizing: border-box;
}

.ripro_v5-widget-rank .ranks-bar .total {
    height: 55px;
    display: flex;
    align-items: center; /* 文字垂直居中，保留原排版 */
}

.ripro_v5-widget-rank .ranks-bar ul li {
    display: block; 
    margin-bottom: 0.8vw; /* 间距用vw，随屏幕缩放 */
}

.ripro_v5-widget-rank .ranks-bar ul a {
    cursor: pointer; /* 鼠标显示小手 */
    user-select: none; /* 防止误选中文字（更像按钮） */
    display: block;
    box-sizing: border-box;
    width: 100%; 
    color: #fff;
    font-size: clamp(14px, 1.2vw, 16px); /* 字体大小自适应：最小14px，最大16px */
    padding: clamp(12px, 2vw, 20px) clamp(16px, 2.5vw, 24px); /* 内边距自适应 */
    border-radius: 4px 0 0 4px; 
}

.ripro_v5-widget-rank .ranks-bar ul a i {
    margin-right: clamp(8px, 1.5vw, 20px); /* 图标间距自适应 */
}

.ripro_v5-widget-rank .ranks-bar ul .current a {
    color: #000; 
    background: #fff; 
    /* 保留原选中态样式 */
}


/* ==============================================
   1.4 列表项基础样式（全局通用，两端共用）
   ============================================== */
.ripro_v5-widget-rank .rank-results {
    padding: clamp(12px, 2vw, 20px) clamp(20px, 4vw, 50px) clamp(10px, 1vw, 10px);
    flex: 1; /* 右侧列表自动占满剩余空间 */
}

.ripro_v5-widget-rank .rank-total {
    font-size: clamp(14px, 1.2vw, 16px);
    color: #3c3c3c; 
    margin-bottom: 10px;
}

.ripro_v5-widget-rank .items {
    margin: 0 calc(-1 * clamp(20px, 4vw, 50px));
    height: auto;
    position: relative;
}

.ripro_v5-widget-rank .items .item {
    font-size: clamp(12px, 1.1vw, 14px);
    height: 138px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
}

.ripro_v5-widget-rank .items .item:hover {
    background: #a8a8a8; 
}

/* 分隔线样式（全局通用） */
.ripro_v5-widget-rank .items .item::after {
    content: "";
    position: absolute;
    left: clamp(20px, 4vw, 40px);
    right: clamp(20px, 4vw, 40px);
    bottom: 0;
    height: 1px;
    border-bottom: 1px dashed #000;
    transition: border-color 0.3s ease;
}

.ripro_v5-widget-rank .items .item:last-child::after {
    display: none;
}

.ripro_v5-widget-rank .items .item:hover::after {
    border-bottom-color: #ff6c00; 
}

/* 1.5 排名模块（弹性宽度，保留原排版） */
.ripro_v5-widget-rank .item-num {
    width: clamp(40px, 8vw, 70px); /* 排名区宽度自适应 */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 前三名特殊样式（保留原设计，适配弹性高度） */
.ripro_v5-widget-rank .rank-results .items .item .item-num.num-1 .num,
.ripro_v5-widget-rank .rank-results .items .item .item-num.num-2 .num,
.ripro_v5-widget-rank .rank-results .items .item .item-num.num-3 .num {
    height: clamp(28px, 4vw, 36px); /* 排名图标高度自适应 */
    line-height: clamp(20px, 3vw, 28px); /* 行高自适应 */
    color: #fff; 
    background-repeat: no-repeat; 
    background-position: center bottom; /* 图标居中，适配弹性尺寸 */
    background-size: contain; /* 图标自适应容器大小 */
    background-color: transparent; 
    border-radius: 0; 
    padding-top: clamp(5px, 0.8vw, 7px); /* 上内边距自适应 */
}

.ripro_v5-widget-rank .rank-results .items .item .item-num.num-1 .num { background-image: url(../images/css/rank_one.png); }
.ripro_v5-widget-rank .rank-results .items .item .item-num.num-2 .num { background-image: url(../images/css/rank_two.png); }
.ripro_v5-widget-rank .rank-results .items .item .item-num.num-3 .num { background-image: url(../images/css/rank_three.png); }

/* 4-5名样式（适配弹性尺寸） */
.ripro_v5-widget-rank .rank-results .items .item .item-num.num-4 .num,
.ripro_v5-widget-rank .rank-results .items .item .item-num.num-5 .num {
    background: #eeeeee;
    color: #666;
    width: clamp(24px, 3.5vw, 36px); /* 宽度自适应 */
    height: clamp(24px, 3.5vw, 36px); /* 高度自适应 */
    border-radius: 50%; /* 保留原圆形样式 */
    display: flex;
    justify-content: center;
    align-items: center;
}


/* 1.6 缩略图样式（弹性尺寸，保留原比例） */
.ripro_v5-widget-rank .thumb {
    display: block;
    width: clamp(100px, 18vw, 180px); /* 缩略图宽度自适应 */
    height: clamp(60px, 10vw, 100px); /* 高度自适应，保持原1.8:1比例 */
    background-position: 50%; 
    background-repeat: no-repeat; 
    background-size: cover; 
    border-radius: 8px; 
    transition: opacity 0.2s; 
    margin: 0 clamp(10px, 2vw, 20px); /* 左右间距自适应 */
}

/* 缩略图基础样式（保持原有） */
.ripro_v5-widget-rank .thumb {
    width: clamp(100px, 18vw, 180px);
    height: clamp(60px, 10vw, 100px);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover; /* 确保背景图铺满 */
    border-radius: 8px;
    margin: 0 clamp(10px, 2vw, 20px);
    transition: transform 0.3s ease; /* 过渡动画，放大更平滑 */
    transform-origin: center; /* 从中心放大，避免偏移 */
}

/* 鼠标悬停时放大 */
.ripro_v5-widget-rank .thumb:hover {
    transform: scale(1.1); /* 放大1.1倍（可调整数值，如1.05=轻微放大） */
    z-index: 10; /* 放大后置于其他元素上方，避免被遮挡 */
}


/* 1.7 列表子元素样式（弹性分配，保留原比例） */
.ripro_v5-widget-rank .item-title {
    flex: 3.5; /* 保留原比例，随父容器缩放 */
    overflow: hidden;
    text-align: center;
    line-height: 1.5;
    max-height: 3em; /* 保留原多行省略 */
    padding: 0 5px; /* 加小内边距，避免文字贴边 */
}

.ripro_v5-widget-rank .item-cat {
    flex: 2.5; /* 保留原比例 */
    text-align: center;
    color: #999;
    font-size: clamp(10px, 1vw, 12px); /* 字体大小自适应 */
}

.ripro_v5-widget-rank .item-author {
    flex: 1; /* 保留原比例 */
    text-align: center;
    color: #999;
    font-size: clamp(10px, 1vw, 12px);
    white-space: nowrap;
}

.ripro_v5-widget-rank .item-views {
    flex: 1; /* 保留原比例 */
    text-align: center;
    color: #ff3304; 
    font-size: clamp(8px, 1vw, 12px);
}


/* 1.8 底部按钮样式（弹性尺寸，保留原设计） */
.ripro_v5-widget-rank .section-more {
    height: clamp(80px, 15vw, 160px); /* 按钮区高度自适应 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px; /* 加内边距，避免按钮贴边 */
}

.ripro_v5-widget-rank .section-more .btn {
    text-align: center;
    background: #ff5502; 
    border-radius: 50px; 
    color: #fff; 
    height: clamp(36px, 6vw, 50px); /* 按钮高度自适应 */
    line-height: clamp(36px, 6vw, 50px); /* 行高与高度一致，文字居中 */
    white-space: nowrap;
    text-decoration: none;
    background-image: linear-gradient(90deg, #ffa700, #ff1313); 
    box-shadow: 0 clamp(3px, 0.8vw, 5px) clamp(6px, 1.5vw, 10px) 0 rgba(253, 49, 16, 0.51); /* 阴影自适应 */
    font-size: clamp(12px, 1.4vw, 16px); /* 字体大小自适应 */
    padding: 0 clamp(30px, 6vw, 50px); /* 左右内边距自适应 */
    transition: background-image 0.3s;
}

.ripro_v5-widget-rank .section-more .btn:hover {
    background-image: linear-gradient(270deg, #f7910e, #eb0909); 
    color: #fff; 
}



/* ==============================================
   手机端最终版：分类全在顶部+背景图右置+排行榜在下
   ============================================== */
@media (max-width: 767px) {
    /* 1. 外层容器：控制整体边距，防止超屏 */
    .ripro_v5-widget-rank {
        width: 100%;
        overflow-x: hidden;
        padding: 0;
        margin: 0 auto;
    }
.ripro_v5-widget-rank .syymw-rnk-section-title {
    height: 60px;
}
    /* 2. 核心容器：垂直排列（分类在上，列表在下），透明背景不遮挡 */
    .ripro_v5-widget-rank .ranks-content {
        display: flex;
        flex-direction: column; /* 垂直排列，杜绝左右分栏 */
        background: transparent;
        border-radius: 10px;
        overflow: hidden; /* 裁剪圆角，确保背景衔接 */
    }

    /* 3. 分类栏：顶部横向，橙色背景全覆盖 */
    .ripro_v5-widget-rank .ranks-bar {
        position: relative; /* 取消PC端绝对定位 */
        width: 100%; /* 横向占满，无固定宽度限制 */
        height: auto;
        min-width: auto;
        max-width: auto;
        padding: 15px 20px;
        /*! margin: 0; */
        background-color: #ff6c00;
        background-image: url(../images/css/rank_vip.png);
        background-position: right bottom; /* 背景图右上角 */
        background-size: 35% auto;
        /*! background-repeat: no-repeat; */
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        box-shadow: inset 0 0 0 1px #ff6c00; /* 边缘补色，无漏白 */
    }

    /* 分类总数标题：居中显示，在背景图上方 */
    .ripro_v5-widget-rank .ranks-bar .total {
        font-size: 16px;
        height: 40px;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        color: #fff;
        margin: 0 0 10px 0; /* 与下方分类选项留间距 */
        position: relative;
        z-index: 1; /* 确保文字不被背景图遮挡 */
    }

/* 分类选项：横向滚动，全在顶部（完善版） */
.ripro_v5-widget-rank .ranks-bar ul {
    display: -webkit-box;
    display: flex;
    overflow-x: auto; /* 横向滚动，所有分类可见 */
    overflow-y: hidden; /* 禁止纵向滚动 */
    gap: 4px; /* 选项间距，易点击 */
    padding: 0 5px 8px 5px; /* 底部留白，避免内容贴边（原注释补充为实际代码） */
    margin: 0;
    -webkit-overflow-scrolling: touch; /* iOS顺滑滚动 */
    position: relative;
    z-index: 1;
    /* 隐藏滚动条核心样式 */
    -webkit-scrollbar: none; /* Chrome/Safari */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* 额外补充：针对webkit内核浏览器的滚动条伪元素隐藏 */
.ripro_v5-widget-rank .ranks-bar ul::-webkit-scrollbar {
    display: none; /* 彻底隐藏Chrome/Safari的滚动条 */
}


    /* 分类选项样式：紧凑不换行 */
    .ripro_v5-widget-rank .ranks-bar ul a {
        font-size: 13px;
        padding: 8px 10px;
        border-radius: 20px; /* 圆润圆角 */
        white-space: nowrap; /* 文字不换行，分类名完整 */
        color: #fff;
        background: rgba(255,255,255,0.2); /* 半透明背景，突出选中态 */
    }
      
    /* 分类选中态：明显区分 */
    .ripro_v5-widget-rank .ranks-bar ul .current a {
        background: #fff;
        color: #000;
    }

    /* 分类图标间距 */
    .ripro_v5-widget-rank .ranks-bar ul a i {
        margin-right: 5px;
    }

    /* 4. 排行榜列表：在分类栏正下方，白色背景 */
    .ripro_v5-widget-rank .ranks-main {
        order: 2; /* 确保在分类栏下方 */
        width: 100%;
        padding: 10px 0;
        background: #fff;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        margin: 0;
    }

    /* 列表内容区：不超屏，无负margin */
    .ripro_v5-widget-rank .rank-results {
        padding: 10px 15px;
        margin: 0;
        width: 100%;
    }

    /* 列表容器：无额外边距，内容在内部 */
    .ripro_v5-widget-rank .items {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    /* 列表项：紧凑布局，小屏适配 */
    .ripro_v5-widget-rank .items .item {
        height: 100px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    }

    /* 5. 排名区：小尺寸，不占空间 */
    .ripro_v5-widget-rank .item-num {
        width: 10px;
        height: 100%;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
    }

    /* 普通排名样式 */
    .ripro_v5-widget-rank .item-num .num {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        border-radius: 50%;
        background: #ededed;
        color: #b3b3b3;
        text-align: center;
    }

    /* 前三名图标：适配小尺寸 */
    .ripro_v5-widget-rank .item-num.num-1 .num,
    .ripro_v5-widget-rank .item-num.num-2 .num,
    .ripro_v5-widget-rank .item-num.num-3 .num {
        width: 26px;
        height: 30px;
        padding-top: 3px;
        background-color: transparent;
        border-radius: 0;
        color: #fff;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
    }

    /* 前三名背景图 */
    .ripro_v5-widget-rank .item-num.num-1 .num { background-image: url(../images/css/rank_one.png); }
    .ripro_v5-widget-rank .item-num.num-2 .num { background-image: url(../images/css/rank_two.png); }
    .ripro_v5-widget-rank .item-num.num-3 .num { background-image: url(../images/css/rank_three.png); }

    /* 6. 缩略图：小尺寸，适配小屏 */
    .ripro_v5-widget-rank .thumb {
        width: 100px;
        height: 60px;
        margin: 0 10px;
        flex-shrink: 0; /* 防止被挤压变形 */
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 8px;
    }

    /* 7. 标题：占满剩余空间，不溢出 */
    .ripro_v5-widget-rank .item-title {
        width: calc(100% - 130px); /* 30(排名)+90(缩略图)+10(间距)=130 */
        font-size: 12px;
        text-align: left;
        padding: 0 5px;
        line-height: 1.5;
        max-height: 3em;
        overflow: hidden;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    /* 8. 底部按钮：适配小屏，全宽显示 */
    .ripro_v5-widget-rank .section-more {
        height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .ripro_v5-widget-rank .section-more .btn {
        width: 100%;
        height: 42px;
        line-height: 42px;
        font-size: 14px;
        padding: 0 20px;
        text-align: center;
        background: #ff5502;
        background-image: linear-gradient(90deg, #ffa700, #ff1313);
        color: #fff;
        border-radius: 50px;
        text-decoration: none;
        box-shadow: 0 3px 8px 0 rgba(253, 49, 16, 0.4);
        transition: background-image 0.3s;
    }

    .ripro_v5-widget-rank .section-more .btn:hover {
        background-image: linear-gradient(270deg, #f7910e, #eb0909);
        color: #fff;
    }

    /* 9. 分隔线：不贯穿，浅灰色更和谐 */
    .ripro_v5-widget-rank .items .item::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0;
        height: 1px;
        border-bottom: 1px dashed #000;
        transition: border-color 0.3s ease;
    }

    /* 取消最后一名分隔线 */
    .ripro_v5-widget-rank .items .item:last-child::after {
        display: none;
    }
    
    .ripro_v5-widget-rank .ranks-bar ul li {
    display: block; 
    margin-bottom: 0.1vw; /* 间距用vw，随屏幕缩放 */
}

    /* 10. 隐藏无关元素，优化小屏视野 */
    .ripro_v5-widget-rank .item-cat,
    .ripro_v5-widget-rank .item-author
     /*.ripro_v5-widget-rank .item-views*/ {
        display: none;
    }
}



/* ==============================================
   4. 暗夜模式适配（区分两端，保持一致性）
   ============================================== */
/* 暗夜模式：基础背景 */
[data-bs-theme="dark"] .ripro_v5-widget-rank .rank-results {
    background: #272727;
}
[data-bs-theme="dark"] .ripro_v5-widget-rank .syymw-rnk-container {
    background: #27272700;
}
[data-bs-theme="dark"] .ripro_v5-widget-rank .ranks-content {
    background: #000;
}

/* 暗夜模式：分类栏 */
[data-bs-theme="dark"] .ripro_v5-widget-rank .ranks-bar {
    background-color: #ec10ab;
    box-shadow: inset 0 0 0 1px #ec10ab;
}
[data-bs-theme="dark"] .ripro_v5-widget-rank .ranks-bar ul .current a {
    background: #fff;
    color: #000;
}

/* 暗夜模式：列表项 */
[data-bs-theme="dark"] .ripro_v5-widget-rank .rank-results .items .item:hover {
    background: #0e0e0e;
}
[data-bs-theme="dark"] .ripro_v5-widget-rank .rank-results .items .item::after {
    border-bottom: 1px dashed #fff;
}

/* 暗夜模式：分隔线悬浮 */
[data-bs-theme="dark"] .ripro_v5-widget-rank .rank-results .items .item:hover::after {
    border-bottom-color: #ff8800;
}

/* 暗夜模式：按钮 */
[data-bs-theme="dark"] .ripro_v5-widget-rank .section-more .btn {
    background: #0e0e0e;
    box-shadow: 0 5px 10px 0 rgba(209, 209, 209, 0.51);
}

[data-bs-theme="dark"] .ripro_v5-widget-rank .ranks-main {
    background: #272727;
  }