/* 分頁的「輸入頁碼跳轉」。元件由 asset/js/page-jump.js 動態插入。 */

/* 釘住手機版的顯示。

   .page_tips 帶著 hidden_mb，而 .hidden_mb 在 public-head-early.css /
   user-head-early.css 的 @media (max-width:820px) 底下是 display:none。

   但實測（375px 寬）站上目前另有規則壓過它 —— .page_tips 本來就是
   display:block、量得到 375x18，手機版看得見。所以這一行不是去
   「打開」什麼，而是把現狀釘死：用兩個 class（權重 0,2,0）明確贏過
   單一個 .hidden_mb（0,1,0），將來誰動到那些 CSS 也不會把輸入框弄不見。
   不用 !important，也不影響頁面上其他 .hidden_mb 元素。

   手機版特別需要這個輸入框：頁碼按鈕掛的是 hidden_xs，
   在 375px 下全部隱藏，只剩首頁／上一頁／下一頁／末頁，
   要翻到第 300 頁只能一頁一頁按。 */
.page_tips.hidden_mb{ display:block; }

.page_jump{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-left:4px;
    vertical-align:middle;
}

/* 配色全部走站上既有的變數，深色模式（body.bstem）不用另外寫一份 */
.page_jump__input{
    width:64px;
    height:28px;
    padding:0 6px;
    box-sizing:border-box;
    text-align:center;
    border:1px solid var(--tpl-border-soft, #d9d9d9);
    border-radius:var(--tpl-radius, 4px);
    background:var(--tpl-bg-base, #fff);
    color:var(--tpl-text, #333);
    font-size:14px;
    line-height:26px;
}
.page_jump__input:focus{
    outline:none;
    border-color:var(--tpl-accent, #ff4d8d);
}

/* 數字框兩側的上下箭頭佔空間又容易誤觸，拿掉 */
.page_jump__input::-webkit-outer-spin-button,
.page_jump__input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
.page_jump__input{
    -moz-appearance:textfield;
    appearance:textfield;
}

.page_jump__total{ color:inherit; }

.page_jump__go{
    height:28px;
    padding:0 12px;
    border:1px solid var(--tpl-border-soft, #d9d9d9);
    border-radius:var(--tpl-radius, 4px);
    background:var(--tpl-bg-base, #fff);
    color:var(--tpl-text, #333);
    font-size:14px;
    line-height:26px;
    cursor:pointer;
    transition:background .15s, border-color .15s, color .15s;
}
.page_jump__go:hover{
    border-color:var(--tpl-accent, #ff4d8d);
    color:var(--tpl-accent, #ff4d8d);
}
.page_jump__go:active{ transform:translateY(1px); }

/* 手機：螢幕窄，輸入框與按鈕縮一點，必要時整組換行不要撐破版面 */
@media (max-width:820px){
    .page_tips.hidden_mb{
        /* 分頁按鈕那一列下方，置中跟原本的 .page text_center 對齊 */
        text-align:center;
        margin-top:8px;
    }
    .page_jump{ gap:5px; }
    .page_jump__input{ width:56px; height:26px; font-size:13px; line-height:24px; }
    .page_jump__go{ height:26px; padding:0 10px; font-size:13px; line-height:24px; }
}