.wd-nav-pagin-wrap {
    display: flex;
    min-height: var(--wd-pagin-size, 10px);
    margin-top: 20px;
    justify-content: var(--wd-align, var(--wd-center));
    font-size: 0
}

.wd-nav-pagin-wrap:has(.wd-lock) {
    display: none
}

.wd-nav-pagin {
    --list-mb: 0;
    --li-mb: 0;
    --li-pl: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wd-pagin-gap, 10px);
    transition: all .25s ease
}

.wd-nav-pagin li {
    position: relative;
    cursor: pointer;
    transition: all .25s ease;
}

.wd-nav-pagin:not([class*="wd-type-"]),.wd-nav-pagin.wd-lock {
    opacity: 0
}

.wd-dynamic>.wd-nav-pagin {
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 auto;
    overflow: hidden
}

.wd-dynamic>.wd-nav-pagin li {
    margin-inline:calc(var(--wd-pagin-gap, 10px) / 2)}

.wd-nav-pagin-wrap[class*="wd-style-shape"] span {
    display: inline-flex;
    width: 14px;
    height: 2px;
    background-color: var(--wd-pagin-bg, unset);
    border: var(--wd-pagin-brd, 2px solid) var(--wd-pagin-brd-color, var(--color-gray-300));
    border-radius: var(--wd-pagin-radius, var(--wd-pagin-size, 10px));
    transition: all .25s ease
}

.wd-nav-pagin-wrap[class*="wd-style-shape"] li:not(.wd-active):hover span {
    border-color: var(--wd-pagin-brd-color-hover, var(--color-gray-800));
    background-color: var(--wd-pagin-bg-hover, var(--wd-pagin-bg, unset))
}

.wd-nav-pagin-wrap[class*="wd-style-shape"] li.wd-active span {
    border-color: #0b1e6a;
    background-color: #046bd2;
    width: 30px;
}