/* =================================================
   THEME VARIABLES (DO NOT CHANGE COLORS)
   ================================================= */
:root {
    /* Base Colors */
    --neo-base: #0E2559;          /* normal background */
    --neo-accent: #cd2e3a;       /* hover & active background */
    --neo-text: #ffffff;         /* text color */

    /* Shadows */
    --neo-shadow-dark: rgba(33, 37, 41, 0.18);
    --neo-shadow-light: rgba(255, 255, 255, 0.12);

    /* Transition */
    --neo-transition: 0.2s ease;
}

/* =================================================
   PAGINATION WRAPPER
   ================================================= */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* =================================================
   PAGE INFO
   ================================================= */
.page-info {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 8px 12px;

    font-size: 0.92rem;
    font-weight: 600;
    color: var(--neo-text);

    background-color: var(--neo-base);
    border-radius: 8px;
    user-select: none;

    box-shadow:
        1px 1px 3px var(--neo-shadow-dark),
       -1px -1px 3px var(--neo-shadow-light);
}

/* =================================================
   PAGE ITEM
   ================================================= */
.page-item {
    display: flex;
}

/* =================================================
   PAGE LINK
   ================================================= */
.page-link {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 40px;
    min-height: 40px;
    padding: 8px 12px;

    font-size: 0.92rem;
    font-weight: 500;
    color: var(--neo-text);

    background-color: var(--neo-base);
    border: none;
    border-radius: 8px;

    box-shadow:
        1px 1px 3px var(--neo-shadow-dark),
       -1px -1px 3px var(--neo-shadow-light);

    transition:
        background-color var(--neo-transition),
        color var(--neo-transition),
        box-shadow var(--neo-transition);
}

/* =================================================
   HOVER
   ================================================= */
.page-link:hover {
    background-color: var(--neo-accent);
    color: var(--neo-text);

    box-shadow:
        1.5px 1.5px 4px var(--neo-shadow-dark),
       -1.5px -1.5px 4px var(--neo-shadow-light);
}

/* =================================================
   ACTIVE
   ================================================= */
.page-item.active .page-link {
    background-color: var(--neo-accent);
    color: var(--neo-text);

    box-shadow:
        inset 1px 1px 3px rgba(33, 37, 41, 0.28),
        inset -1px -1px 3px rgba(255, 255, 255, 0.1);
}

/* =================================================
   DISABLED
   ================================================= */
.page-item.disabled .page-link {
    opacity: 0.35;
    pointer-events: none;

    box-shadow:
        inset 1px 1px 2px var(--neo-shadow-dark),
        inset -1px -1px 2px var(--neo-shadow-light);
}

/* =================================================
   FOCUS
   ================================================= */
.page-link:focus {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(33, 37, 41, 0.18),
        1px 1px 3px var(--neo-shadow-dark),
       -1px -1px 3px var(--neo-shadow-light);
}

/* =================================================
   RESPONSIVE
   ================================================= */
@media (max-width: 480px) {
    .page-link,
    .page-info {
        min-width: 32px;
        min-height: 36px;
        padding: 6px 10px;
        font-size: 0.85rem;
    }

    .pagination {
        gap: 4px;
    }
}