/*!
 * 分页样式 —— 紧凑分页（首页 + 当前页窗口 + 尾页 ... 上一页 / 下一页 / 跳转）
 * RiMini New 主题扩展，需在 main.min.css 之后加载
 *
 * 想改按钮底色：改下面 .page-link 的 background-color
 * 想改按钮大小：改 min-width / height
 */

.page-nav .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-nav .pagination .page-item {
    float: none;
    margin: 0;
}

/*
 * 注意：主题设置里「ajax加载更多按钮翻页」开启时，main.min.css 会隐藏整个分页
 * （ .page-nav.infinite-scroll .pagination{display:none} ），只显示「加载更多」按钮。
 * 如果想两者同时显示，取消下面这行的注释即可：
 */
/* .page-nav.infinite-scroll .pagination { display: flex; } */

/* ---------------- 单个按钮 ---------------- */
.page-nav .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 0;
    /* 主题 main.min.css 里 border-radius 带 !important，这里必须同样加 !important 才能生效 */
    border-radius: 6px !important;
    background-color: rgba(0, 0, 0, .05);
    color: var(--ri-gray-800, #30353a);
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color .15s ease, color .15s ease;
}

.page-nav .pagination a.page-link:hover {
    background-color: var(--ri-primary, #1166e6);
    color: #fff;
}

.page-nav .pagination .page-link:focus-visible {
    outline: 2px solid var(--ri-primary, #1166e6);
    outline-offset: 2px;
}

.page-nav .pagination .page-link i {
    font-size: 12px;
}

.page-nav .pagination .page-previous i {
    margin-right: 4px;
}

.page-nav .pagination .page-next i,
.page-nav .pagination .page-jump i {
    margin-left: 4px;
}

/* ---------------- 当前页 ---------------- */
.page-nav .pagination .page-item.active .page-link,
.page-nav .pagination .page-link.current {
    background-color: var(--ri-primary, #1166e6);
    color: #fff;
    font-weight: 600;
    cursor: default;
}

/* ---------------- 省略号 ---------------- */
.page-nav .pagination .page-link.dots {
    min-width: 40px;
    padding: 0;
    background-color: rgba(0, 0, 0, .05);
    color: var(--ri-gray-400, #96969a);
    letter-spacing: 2px;
    text-indent: 2px;
    cursor: default;
}

.page-nav .pagination .page-link.dots:hover {
    background-color: rgba(0, 0, 0, .05);
    color: var(--ri-gray-400, #96969a);
}

/* ---------------- 跳转 ---------------- */
.page-nav .pagination .page-jump-item {
    display: inline-flex;
    align-items: center;
}

.page-nav .pagination .page-jump {
    font-family: inherit;
    cursor: pointer;
}

.page-nav .pagination .page-jump-box {
    display: none;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.page-nav .pagination .page-jump-item.is-open .page-jump-box {
    display: inline-flex;
}

.page-nav .pagination .page-jump-input {
    width: 68px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid var(--ri-gray-200, #dfdfe3);
    border-radius: 6px;
    background-color: var(--ri-white, #fff);
    color: var(--ri-gray-800, #30353a);
    font-family: inherit;
    font-size: 15px;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.page-nav .pagination .page-jump-input:focus {
    border-color: var(--ri-primary, #1166e6);
}

.page-nav .pagination .page-jump-input::-webkit-outer-spin-button,
.page-nav .pagination .page-jump-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-nav .pagination .page-jump-go {
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background-color: var(--ri-primary, #1166e6);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.page-nav .pagination .page-jump-go:hover {
    opacity: .88;
}

/* ---------------- 移动端 ---------------- */
@media (max-width: 575.98px) {
    .page-nav .pagination {
        gap: 6px;
    }

    /* 超窄屏（iPhone SE / 小屏安卓）再收紧间距，保证一行 */
    @media (max-width: 350px) {
        .page-nav .pagination {
            gap: 4px;
        }
    }

    /* 触控目标放大到 38px，比原来的 34px 更好点中（iOS 建议 44px，这里兼顾一行的数量） */
    .page-nav .pagination .page-link {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        font-size: 15px;
    }

    /* 省略号跟随手机档尺寸，不保留桌面的 40px */
    .page-nav .pagination .page-link.dots {
        min-width: 38px;
    }

    /* 手机端「上一页 / 下一页」只留箭头，做成正方形 */
    .page-nav .pagination .page-previous,
    .page-nav .pagination .page-next {
        min-width: 38px;
        padding: 0;
    }

    .page-nav .pagination .page-previous .page-text,
    .page-nav .pagination .page-next .page-text {
        display: none;
    }

    .page-nav .pagination .page-previous i {
        margin-right: 0;
    }

    .page-nav .pagination .page-next i {
        margin-left: 0;
    }

    /*
     * 手机端「跳转」去掉尾部箭头：它和「下一页」的箭头挨在一起容易混淆，
     * 去掉后还能让第 1 页那种状态在 375px 屏上一行放下。
     */
    .page-nav .pagination .page-jump i {
        display: none;
    }

    /*
     * 手机端无限流（pagination.js 初始化成功后给 body 加 zb-infscroll）：
     * 隐藏分页导航。分页的 DOM 仍保留（无限流插件靠 .pagination a.page-next 取下一页地址），
     * 若 JS 失败不会加这个类，分页照常显示兜底。
     */
    body.zb-infscroll .page-nav {
        display: none;
    }

    /* 无限流加载状态 / 到底提示（元素由 JS 动态创建，只在手机端出现） */
    .page-scroll-status {
        padding: 14px 0;
        text-align: center;
        color: var(--ri-gray-400, #96969a);
        font-size: 13px;
    }

    .page-scroll-last {
        padding: 14px 0;
        text-align: center;
        color: var(--ri-gray-400, #96969a);
        font-size: 13px;
    }

    /*
     * 手机端省空间（核心）：
     * 隐藏窗口外的页码（首页/尾页/补位页 page-outer）和省略号（page-dots），
     * 只保留「‹ 窗口3个页码 › 跳转」，恒定 6 个元素以内，任何屏宽都是一行。
     * 首末页跳转交给「跳转」输入框完成。
     * 想恢复显示完整页码，注释掉这两条即可。
     */
    .page-nav .pagination .page-item.page-outer,
    .page-nav .pagination .page-item.page-dots {
        display: none;
    }

    /*
     * 跳转输入框字号必须 >= 16px：
     * iOS Safari 对 font-size < 16px 的输入框，聚焦时会强制放大整个页面，输入完不还原。
     */
    .page-nav .pagination .page-jump-input {
        height: 38px;
        font-size: 16px;
    }

    .page-nav .pagination .page-jump-go {
        height: 38px;
        font-size: 15px;
    }
}