/**
 * ä¿®å¤åˆ†é¡µæ ·å¼ - æ¨ªå‘å•è¡Œæ˜¾ç¤º
 * Fix Pagination - Display in single horizontal line
 */

/* åˆ†é¡µå®¹å™¨ */
#pagelist,
.page {
    /* text-align: center; */
    padding: 20px 0;
}

/* åˆ†é¡µåˆ—è¡¨ - æ¨ªå‘æŽ’åˆ— */
#pagelist ul.page-numbers,
.page ul.page-numbers {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* åˆ†é¡µåˆ—è¡¨é¡¹ - æ¨ªå‘æŽ’åˆ— */
#pagelist ul.page-numbers li,
.page ul.page-numbers li {
    display: inline-block;
    margin: 0 3px;
    vertical-align: middle;
}

/* åˆ†é¡µé“¾æŽ¥å’ŒæŒ‰é’® - ç®€æ´æ ·å¼ */
#pagelist .page-numbers,
.page .page-numbers {
    display: inline-block;
    padding: 6px 12px;
    min-width: 32px;
    line-height: 20px;
    text-align: center;
    background: #f8f8f8;
    border: none;  /* åŽ»æŽ‰è¾¹æ¡† */
    color: #666;
    text-decoration: none;
    border-radius: 4px;
    margin: 0 4px;
    font-size: 14px;
    transition: all 0.2s ease;
}

/* å½“å‰é¡µ - è“è‰²é«˜äº® */
#pagelist .page-numbers.current,
.page .page-numbers.current {
    background: #0066cc;
    color: #fff;
    font-weight: normal;
    box-shadow: 0 2px 4px rgba(0, 102, 204, 0.2);  /* è½»å¾®é˜´å½± */
}

/* Hoveræ•ˆæžœ - è“è‰²æ¸å˜ */
#pagelist a.page-numbers:hover,
.page a.page-numbers:hover {
    background: #0056b3;
    color: #fff;
    transform: translateY(-1px);  /* è½»å¾®ä¸Šæµ® */
    box-shadow: 0 2px 6px rgba(0, 86, 179, 0.3);
}

/* çœç•¥å· - é€æ˜ŽèƒŒæ™¯ */
#pagelist .page-numbers.dots,
.page .page-numbers.dots {
    background: transparent;
    border: none;
    padding: 6px 4px;
    color: #999;
}

/* ä¸Šä¸€é¡µ/ä¸‹ä¸€é¡µæŒ‰é’® */
#pagelist .prev.page-numbers,
#pagelist .next.page-numbers,
.page .prev.page-numbers,
.page .next.page-numbers {
    padding: 8px 15px;
    min-width: auto;
}

/* ç¡®ä¿åœ¨å°å±å¹•ä¸Šä¹Ÿä¸æ¢è¡Œ */
@media (max-width: 768px) {
    #pagelist .page-numbers,
    .page .page-numbers {
        padding: 6px 10px;
        font-size: 14px;
        min-width: 30px;
        height: 30px;
        line-height: 17px;
    }
    
    #pagelist ul.page-numbers li,
    .page ul.page-numbers li {
        margin: 0 2px;
    }
}

