/* SAM 公共分页 — PC 对齐 Figma 1920；1rem = 100px */

.sam-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.16rem;
    margin-top: 0.3rem;
    font-family: NunitoSans, 'Nunito Sans', sans-serif;
    box-sizing: border-box;
}

.sam-pagination[hidden] {
    display: none !important;
}

.sam-pagination *,
.sam-pagination *::before,
.sam-pagination *::after {
    box-sizing: border-box;
}

.sam-pagination__total {
    color: #565f6b;
    font-size: 0.16rem;
    font-weight: 400;
    line-height: 0.224rem;
    white-space: nowrap;
    text-align: center;
    order: 1;
}

.sam-pagination__nav {
    display: flex;
    align-items: center;
    gap: 0.02rem;
    order: 2;
}

.sam-pagination__page,
.sam-pagination__arrow,
.sam-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1d2633;
    font-family: inherit;
    font-size: 0.18rem;
    font-weight: 400;
    line-height: 0.27rem;
}

.sam-pagination__page {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 0.04rem;
    cursor: pointer;
}

.sam-pagination__page:hover:not(.is-active) {
    background: #e3effc;
}

.sam-pagination__page.is-active {
    background: #2f67b3;
    color: #fff;
    cursor: default;
}

.sam-pagination__arrow {
    width: 0.32rem;
    height: 0.32rem;
    padding: 0.08rem;
    border-radius: 0.04rem;
    color: #1d2633;
    cursor: pointer;
}

.sam-pagination__arrow:hover:not(:disabled) {
    background: #e3effc;
}

.sam-pagination__arrow:disabled {
    color: #c1cbd6;
    cursor: not-allowed;
}

.sam-pagination__icon {
    display: block;
    width: 0.16rem;
    height: 0.16rem;
}

.sam-pagination__arrow.is-flip .sam-pagination__icon {
    transform: rotate(180deg);
}

.sam-pagination__ellipsis {
    width: 0.32rem;
    height: 0.32rem;
    user-select: none;
    pointer-events: none;
}

.sam-pagination__jump {
    display: flex;
    align-items: center;
    gap: 0.04rem;
    order: 3;
}

.sam-pagination__jump-label {
    color: #565f6b;
    font-size: 0.16rem;
    font-weight: 400;
    line-height: 0.224rem;
    white-space: nowrap;
}

.sam-pagination__jump-input,
.sam-pagination__jump-btn {
    height: 0.32rem;
    border: 1px solid #c1cbd6;
    border-radius: 0.04rem;
    background: #fff;
    color: #1d2633;
    font-family: inherit;
    font-size: 0.18rem;
    font-weight: 400;
    line-height: 0.27rem;
}

.sam-pagination__jump-input {
    width: 0.6rem;
    padding: 0 0.06rem;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}

.sam-pagination__jump-input::-webkit-outer-spin-button,
.sam-pagination__jump-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sam-pagination__jump-btn {
    width: auto;
    min-width: 0.6rem;
    padding: 0 0.12rem;
    white-space: nowrap;
    cursor: pointer;
}

.sam-pagination__jump-btn:hover {
    background: #e3effc;
}

.sam-pagination__size {
    position: relative;
    height: 0.32rem;
    order: 4;
}

.sam-pagination__size-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    height: 100%;
    padding: 0 0.16rem;
    border: 1px solid #c1cbd6;
    border-radius: 0.04rem;
    background: #fff;
    color: #1d2633;
    font-family: inherit;
    font-size: 0.16rem;
    font-weight: 400;
    line-height: 0.224rem;
    cursor: pointer;
    white-space: nowrap;
}

.sam-pagination__size-trigger:hover {
    background: #e3effc;
}

.sam-pagination__caret {
    display: block;
    width: 0.1rem;
    height: 0.068rem;
    color: #1d2633;
    flex-shrink: 0;
}

.sam-pagination__size.is-open .sam-pagination__caret {
    transform: rotate(180deg);
}

.sam-pagination__size-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.04rem);
    min-width: 100%;
    padding: 0.04rem 0;
    border: 1px solid #c1cbd6;
    border-radius: 0.04rem;
    background: #fff;
    box-shadow: 0 0.04rem 0.12rem rgba(29, 38, 51, 0.12);
    z-index: 20;
}

.sam-pagination__size-menu[hidden] {
    display: none !important;
}

.sam-pagination__size-option {
    display: block;
    width: 100%;
    padding: 0.06rem 0.16rem;
    border: 0;
    background: transparent;
    color: #1d2633;
    font-family: inherit;
    font-size: 0.16rem;
    line-height: 0.224rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.sam-pagination__size-option:hover,
.sam-pagination__size-option.is-selected {
    background: #e3effc;
}

/* 中间档：>1024 且 ≤1400；整页 rem × (1920/1400) */
@media screen and (max-width: 1400px) {
    .sam-pagination {
        gap: 0.22rem;
        margin-top: 0.41rem;
    }

    .sam-pagination__total {
        font-size: 0.22rem;
        line-height: 0.31rem;
    }

    .sam-pagination__nav {
        gap: 0.027rem;
    }

    .sam-pagination__page,
    .sam-pagination__ellipsis,
    .sam-pagination__arrow {
        width: 0.44rem;
        height: 0.44rem;
    }

    .sam-pagination__page,
    .sam-pagination__ellipsis {
        font-size: 0.25rem;
        line-height: 0.37rem;
    }

    .sam-pagination__page,
    .sam-pagination__arrow {
        border-radius: 0.055rem;
    }

    .sam-pagination__arrow {
        padding: 0.11rem;
    }

    .sam-pagination__icon {
        width: 0.22rem;
        height: 0.22rem;
    }

    .sam-pagination__jump-label {
        font-size: 0.22rem;
        line-height: 0.31rem;
    }

    .sam-pagination__jump-input,
    .sam-pagination__jump-btn {
        height: 0.44rem;
        border-radius: 0.055rem;
        font-size: 0.25rem;
        line-height: 0.37rem;
    }

    .sam-pagination__jump-input {
        width: 0.82rem;
    }

    .sam-pagination__jump-btn {
        min-width: 0.82rem;
        padding: 0 0.16rem;
    }

    .sam-pagination__size {
        height: 0.44rem;
    }

    .sam-pagination__size-trigger {
        gap: 0.11rem;
        padding: 0 0.22rem;
        border-radius: 0.055rem;
        font-size: 0.22rem;
        line-height: 0.31rem;
    }

    .sam-pagination__caret {
        width: 0.14rem;
        height: 0.093rem;
    }

    .sam-pagination__size-option {
        padding: 0.08rem 0.22rem;
        font-size: 0.22rem;
        line-height: 0.31rem;
    }
}

/* 移动端 ≤1025：对齐 Figma 375，尺寸 max(rem, px) */
@media screen and (max-width: 1025px) {
    .sam-pagination {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: max(0.2rem, 20px);
        margin-top: max(0.16rem, 16px);
        padding: max(0.16rem, 16px) 0;
    }

    /* 移动端顺序：结果数 → 每页条数 → 页码 → Go to */
    .sam-pagination__total { order: 1; }
    .sam-pagination__size { order: 2; }
    .sam-pagination__nav { order: 3; }
    .sam-pagination__jump { order: 4; }

    .sam-pagination__total {
        font-size: max(0.14rem, 14px);
        line-height: max(0.182rem, 18.2px);
    }

    .sam-pagination__nav {
        gap: max(0.02rem, 2px);
    }

    .sam-pagination__page,
    .sam-pagination__ellipsis,
    .sam-pagination__arrow {
        width: max(0.34rem, 34px);
        height: max(0.34rem, 34px);
    }

    .sam-pagination__page,
    .sam-pagination__ellipsis {
        font-size: max(0.2025rem, 20.25px);
        line-height: max(0.30375rem, 30.375px);
    }

    .sam-pagination__page,
    .sam-pagination__arrow {
        border-radius: max(0.04rem, 4px);
    }

    .sam-pagination__arrow {
        padding: max(0.08rem, 8px);
    }

    .sam-pagination__icon {
        width: max(0.18rem, 18px);
        height: max(0.18rem, 18px);
    }

    .sam-pagination__jump {
        gap: max(0.04rem, 4px);
    }

    .sam-pagination__jump-label {
        font-size: max(0.16rem, 16px);
        line-height: max(0.224rem, 22.4px);
    }

    .sam-pagination__jump-input,
    .sam-pagination__jump-btn {
        height: max(0.32rem, 32px);
        border-radius: max(0.04rem, 4px);
        font-size: max(0.18rem, 18px);
        line-height: max(0.27rem, 27px);
    }

    .sam-pagination__jump-input {
        width: max(0.6rem, 60px);
    }

    .sam-pagination__jump-btn {
        min-width: max(0.6rem, 60px);
        padding: 0 max(0.12rem, 12px);
    }

    .sam-pagination__size {
        height: max(0.44rem, 44px);
    }

    .sam-pagination__size-trigger {
        min-width: max(1.37rem, 137px);
        height: 100%;
        gap: max(0.08rem, 8px);
        padding: 0 max(0.16rem, 16px);
        border-radius: max(0.04rem, 4px);
        font-size: max(0.18rem, 18px);
        line-height: max(0.224rem, 22.4px);
    }

    .sam-pagination__caret {
        width: max(0.16rem, 16px);
        height: max(0.16rem, 16px);
    }

    .sam-pagination__size-menu {
        top: calc(100% + max(0.04rem, 4px));
        bottom: auto;
    }

    .sam-pagination__size-option {
        padding: max(0.08rem, 8px) max(0.16rem, 16px);
        font-size: max(0.16rem, 16px);
        line-height: max(0.224rem, 22.4px);
    }
}