:root {
    --premium-table-night: #071328;
    --premium-table-blue: #0d3154;
    --premium-table-electric: #5ccaff;
    --premium-table-gold: #f2d284;
    --premium-table-transition: cubic-bezier(.2, .8, .2, 1);
}

body.premium-shell :is(.premium-table-actions, .premium-admin-actions, .premium-inbox-actions) {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
    margin-inline-start: auto;
}

body.premium-shell :is(.premium-table-actions, .premium-admin-actions, .premium-inbox-actions) > * {
    flex: 0 0 auto;
}

body.premium-shell :is(.premium-pagination, .dataTables_paginate, .dt-paging, .coupon-create__pagination) {
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: .45rem;
    margin-inline-start: auto;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(92, 202, 255, .6) transparent;
}

body.premium-shell :is(.premium-pagination__list, .pagination) {
    width: fit-content;
    max-width: 100%;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: .45rem;
    margin: 1rem 0 0 auto;
}

body.premium-shell :is(
    .premium-pagination__list,
    .dataTables_paginate,
    .dt-paging > nav,
    .coupon-create__pagination
) {
    width: fit-content;
    max-width: 100%;
    padding: .3rem;
    border: 1px solid rgba(242, 210, 132, .48);
    border-radius: 999px;
    background: rgba(7, 19, 40, .9);
    box-shadow: 0 .45rem 1.15rem rgba(7, 19, 40, .16), 0 0 .7rem rgba(92, 202, 255, .08);
    backdrop-filter: blur(9px);
}

body.premium-shell :is(.premium-pagination__list, .pagination) .page-item {
    flex: 0 0 auto;
    margin: 0;
}

body.premium-shell div.dt-container div.dt-paging ul.pagination {
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-inline-start: auto;
}

body.premium-shell .pagination .page-link,
body.premium-shell .dataTables_paginate .paginate_button,
body.premium-shell .dt-paging .dt-paging-button,
body.premium-shell .coupon-create__pagination .coupon-create__page-button {
    display: inline-flex;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(92, 202, 255, .24);
    border-radius: 999px;
    color: #c7edff;
    background-color: var(--premium-table-night);
    background-image: linear-gradient(145deg, rgba(255, 255, 255, .025), transparent);
    box-shadow: inset 0 -1px 0 rgba(242, 210, 132, .14), 0 .15rem .38rem rgba(7, 19, 40, .1);
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        color .28s var(--premium-table-transition),
        border-color .28s var(--premium-table-transition),
        background-color .28s var(--premium-table-transition),
        box-shadow .3s var(--premium-table-transition),
        transform .28s var(--premium-table-transition);
}

body.premium-shell .pagination .page-item:first-child .page-link,
body.premium-shell .pagination .page-item:last-child .page-link,
body.premium-shell .pagination .page-link[rel="prev"],
body.premium-shell .pagination .page-link[rel="next"],
body.premium-shell .dataTables_paginate .paginate_button.previous,
body.premium-shell .dataTables_paginate .paginate_button.next,
body.premium-shell .dt-paging .dt-paging-button.previous,
body.premium-shell .dt-paging .dt-paging-button.next,
body.premium-shell .coupon-create__pagination .coupon-create__page-button {
    border-color: rgba(242, 210, 132, .56);
    color: var(--premium-table-gold);
    background-color: var(--premium-table-night);
    background-image: linear-gradient(145deg, rgba(242, 210, 132, .04), transparent);
    box-shadow: inset 0 -1px 0 rgba(242, 210, 132, .22), 0 .18rem .42rem rgba(7, 19, 40, .13);
}

body.premium-shell .pagination .page-link:hover,
body.premium-shell .dataTables_paginate .paginate_button:hover,
body.premium-shell .dt-paging .dt-paging-button:hover,
body.premium-shell .coupon-create__pagination .coupon-create__page-button:hover {
    border-color: rgba(92, 202, 255, .72);
    color: #e4f7ff;
    background-color: var(--premium-table-blue);
    background-image: linear-gradient(145deg, rgba(92, 202, 255, .08), transparent);
    box-shadow: inset 0 -1px 0 rgba(242, 210, 132, .28), 0 .35rem .7rem rgba(7, 19, 40, .17), 0 0 .7rem rgba(92, 202, 255, .24);
    transform: translateY(-2px);
}

body.premium-shell .pagination .page-item:first-child:not(.disabled) .page-link:hover,
body.premium-shell .pagination .page-item:last-child:not(.disabled) .page-link:hover,
body.premium-shell .pagination .page-link[rel="prev"]:hover,
body.premium-shell .pagination .page-link[rel="next"]:hover,
body.premium-shell .dataTables_paginate .paginate_button.previous:not(.disabled):hover,
body.premium-shell .dataTables_paginate .paginate_button.next:not(.disabled):hover,
body.premium-shell .dt-paging .dt-paging-button.previous:not(.disabled):hover,
body.premium-shell .dt-paging .dt-paging-button.next:not(.disabled):hover,
body.premium-shell .coupon-create__pagination .coupon-create__page-button:not(:disabled):hover {
    border-color: var(--premium-table-gold);
    color: #fff0bd;
    background-color: var(--premium-table-blue);
    background-image: linear-gradient(145deg, rgba(92, 202, 255, .12), transparent);
    box-shadow: inset 0 -1px 0 rgba(242, 210, 132, .42), 0 .28rem .58rem rgba(7, 19, 40, .17), 0 0 .5rem rgba(92, 202, 255, .18);
}

body.premium-shell .pagination .page-item:first-child:not(.disabled) .page-link:hover i,
body.premium-shell .pagination .page-link[rel="prev"]:hover i {
    transform: translateX(-2px);
}

body.premium-shell .pagination .page-item:last-child:not(.disabled) .page-link:hover i,
body.premium-shell .pagination .page-link[rel="next"]:hover i {
    transform: translateX(2px);
}

body.premium-shell .pagination .page-item:first-child .page-link i,
body.premium-shell .pagination .page-item:last-child .page-link i,
body.premium-shell .pagination .page-link[rel="prev"] i,
body.premium-shell .pagination .page-link[rel="next"] i {
    transition: transform .3s var(--premium-table-transition);
}

body.premium-shell :is(
    .dataTables_paginate .paginate_button.previous,
    .dt-paging .dt-paging-button.previous,
    .dataTables_paginate .paginate_button.next,
    .dt-paging .dt-paging-button.next
) {
    position: relative;
    font-size: 0;
}

body.premium-shell :is(
    .dataTables_paginate .paginate_button.previous,
    .dt-paging .dt-paging-button.previous,
    .dataTables_paginate .paginate_button.next,
    .dt-paging .dt-paging-button.next
)::before {
    content: "";
    display: block;
    width: .48rem;
    height: .48rem;
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transition: transform .3s var(--premium-table-transition);
}

body.premium-shell :is(
    .dataTables_paginate .paginate_button.previous,
    .dt-paging .dt-paging-button.previous
)::before {
    transform: rotate(-135deg);
}

body.premium-shell :is(
    .dataTables_paginate .paginate_button.next,
    .dt-paging .dt-paging-button.next
)::before {
    transform: rotate(45deg);
}

body.premium-shell :is(
    .dataTables_paginate .paginate_button.previous,
    .dt-paging .dt-paging-button.previous
):not(.disabled):hover::before {
    transform: translateX(-2px) rotate(-135deg);
}

body.premium-shell :is(
    .dataTables_paginate .paginate_button.next,
    .dt-paging .dt-paging-button.next
):not(.disabled):hover::before {
    transform: translateX(2px) rotate(45deg);
}

body.premium-shell .pagination .page-link:focus-visible,
body.premium-shell .dataTables_paginate .paginate_button:focus-visible,
body.premium-shell .dt-paging .dt-paging-button:focus-visible,
body.premium-shell .coupon-create__pagination .coupon-create__page-button:focus-visible {
    outline: 2px solid var(--premium-table-electric);
    outline-offset: 2px;
    border-color: var(--premium-table-gold);
    box-shadow: 0 0 0 .2rem rgba(242, 210, 132, .28), 0 0 .75rem rgba(92, 202, 255, .38);
}

body.premium-shell .pagination .page-item.active .page-link,
body.premium-shell .pagination .page-link[aria-current="page"],
body.premium-shell .dataTables_paginate .paginate_button.current,
body.premium-shell .dt-paging .dt-paging-button.current {
    border-color: rgba(242, 210, 132, .78);
    color: #fff;
    background-color: #147fae;
    background-image: linear-gradient(145deg, #5ccaff, #147fae 72%);
    box-shadow: inset 0 -1px 0 rgba(242, 210, 132, .72), 0 .28rem .55rem rgba(7, 19, 40, .18), 0 0 .85rem rgba(92, 202, 255, .42);
    transform: translateY(-1px);
}

body.premium-shell :is(
    .pagination .page-link,
    .dataTables_paginate .paginate_button,
    .dt-paging .dt-paging-button,
    .coupon-create__pagination .coupon-create__page-button
):not(.disabled):not(:disabled):active {
    transform: scale(.96);
    transition-duration: .12s;
}

body.premium-shell .pagination .page-item.disabled .page-link,
body.premium-shell .dataTables_paginate .paginate_button.disabled,
body.premium-shell .dt-paging .dt-paging-button.disabled,
body.premium-shell .coupon-create__pagination .coupon-create__page-button:disabled {
    border-color: rgba(13, 49, 84, .62);
    color: rgba(255, 255, 255, .42);
    background-color: #0a192e;
    background-image: none;
    box-shadow: inset 0 -1px 0 rgba(242, 210, 132, .12);
    opacity: .62;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

body.premium-shell .pagination .page-item.disabled:first-child .page-link,
body.premium-shell .pagination .page-item.disabled:last-child .page-link,
body.premium-shell .dataTables_paginate .paginate_button.previous.disabled,
body.premium-shell .dataTables_paginate .paginate_button.next.disabled,
body.premium-shell .dt-paging .dt-paging-button.previous.disabled,
body.premium-shell .dt-paging .dt-paging-button.next.disabled,
body.premium-shell .coupon-create__pagination .coupon-create__page-button:disabled {
    border-color: rgba(242, 210, 132, .3);
    color: rgba(242, 210, 132, .46);
    background-color: #0a192e;
    background-image: none;
    box-shadow: inset 0 -1px 0 rgba(242, 210, 132, .12);
}

@media (max-width: 575.98px) {
    body.premium-shell :is(.premium-table-actions, .premium-admin-actions, .premium-inbox-actions) {
        gap: .4rem;
    }

    body.premium-shell :is(.premium-pagination__list, .pagination) {
        gap: .4rem;
    }

    body.premium-shell .pagination .page-link,
    body.premium-shell .dataTables_paginate .paginate_button,
    body.premium-shell .dt-paging .dt-paging-button,
    body.premium-shell .coupon-create__pagination .coupon-create__page-button {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 767.98px) {
    body.premium-shell div.dt-container div.dt-paging ul.pagination {
        justify-content: flex-end !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.premium-shell .pagination .page-link,
    body.premium-shell .dataTables_paginate .paginate_button,
    body.premium-shell .dt-paging .dt-paging-button,
    body.premium-shell .coupon-create__pagination .coupon-create__page-button {
        transition-duration: .01ms;
    }

    body.premium-shell .pagination .page-link:hover,
    body.premium-shell .dataTables_paginate .paginate_button:hover,
    body.premium-shell .dt-paging .dt-paging-button:hover,
    body.premium-shell .coupon-create__pagination .coupon-create__page-button:hover {
        transform: none;
    }

    body.premium-shell :is(
        .pagination .page-link,
        .dataTables_paginate .paginate_button,
        .dt-paging .dt-paging-button,
        .coupon-create__pagination .coupon-create__page-button
    ):active,
    body.premium-shell .pagination .page-link:hover i {
        transform: none;
        transition-duration: .01ms;
    }

    body.premium-shell :is(.dataTables_paginate, .dt-paging) .previous:hover::before {
        transform: rotate(-135deg);
        transition-duration: .01ms;
    }

    body.premium-shell :is(.dataTables_paginate, .dt-paging) .next:hover::before {
        transform: rotate(45deg);
        transition-duration: .01ms;
    }
}