/* ==============================
   Professional Pagination
   ============================== */

.pro-pagination {
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin: 30px 0;
    padding: 10px 0;
    user-select: none;
}


    /* ==============================
   Page Button
   ============================== */

    .pro-pagination .page-btn {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #ffffff;
        color: #374151;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }


        /* Hover */

        .pro-pagination .page-btn:hover:not(:disabled) {
            background: #f8fafc;
            border-color: #d1d5db;
            color: #111827;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        }


        /* Active */

        .pro-pagination .page-btn.active {
            background: #111827;
            border-color: #111827;
            color: #ffffff;
            box-shadow: 0 5px 14px rgba(17, 24, 39, 0.18);
            cursor: default;
        }


            /* Active hover */

            .pro-pagination .page-btn.active:hover {
                background: #111827;
                border-color: #111827;
                color: #ffffff;
                transform: none;
            }


    /* ==============================
   Arrow Buttons
   ============================== */

    .pro-pagination .page-arrow {
        font-size: 25px;
        font-weight: 400;
        line-height: 1;
        padding-bottom: 3px;
    }


        .pro-pagination .page-arrow span {
            display: block;
            transition: transform 0.2s ease;
        }


        /* RTL:
   ‹ = next
   › = previous
*/

        .pro-pagination .page-arrow:hover:not(:disabled) span {
            transform: scale(1.15);
        }


    /* ==============================
   Disabled
   ============================== */

    .pro-pagination .page-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        background: #f9fafb;
        color: #9ca3af;
        border-color: #e5e7eb;
        box-shadow: none;
        transform: none;
    }


    /* ==============================
   Dots
   ============================== */

    .pro-pagination .page-dots {
        width: 28px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9ca3af;
        font-size: 15px;
        font-weight: 600;
        cursor: default;
    }


    /* ==============================
   Focus
   ============================== */

    .pro-pagination .page-btn:focus {
        outline: none;
    }


    .pro-pagination .page-btn:focus-visible {
        outline: 3px solid rgba(17, 24, 39, 0.12);
        outline-offset: 2px;
    }


/* ==============================
   Mobile
   ============================== */

@media (max-width: 600px) {

    .pro-pagination {
        gap: 5px;
        margin: 20px 0;
    }

        .pro-pagination .page-btn {
            width: 38px;
            height: 38px;
            border-radius: 8px;
            font-size: 13px;
        }

        .pro-pagination .page-arrow {
            font-size: 22px;
        }

        .pro-pagination .page-dots {
            width: 20px;
            height: 38px;
            font-size: 13px;
        }
}


/* ==============================
   Very Small Screens
   ============================== */

@media (max-width: 400px) {

    .pro-pagination {
        gap: 3px;
    }

        .pro-pagination .page-btn {
            width: 34px;
            height: 34px;
            border-radius: 7px;
        }

        .pro-pagination .page-dots {
            width: 16px;
            height: 34px;
        }
}