/**
 * Reusable Pagination Component
 * High-specificity CSS that resists theme/plugin overrides
 * Colors and fonts can be customized via CSS custom properties
 */

/* CSS Custom Properties - Can be overridden by themes */
:root {
    --nrich-pagination-font-family: inherit;
    --nrich-pagination-font-size: 14px;
    --nrich-pagination-font-weight: 500;
    --nrich-pagination-color-primary: #241F26;
    --nrich-pagination-color-text: #241F26;
    --nrich-pagination-color-muted: #737784;
    --nrich-pagination-color-bg: #ffffff;
    --nrich-pagination-color-border: #E9EAF0;
    --nrich-pagination-color-active: #241F26;
    --nrich-pagination-color-active-bg: #f7f7f9;
    --nrich-pagination-color-hover: #241F26;
    --nrich-pagination-color-hover-bg: #f7f7f9;
    --nrich-pagination-border-radius: 8px;
    --nrich-pagination-gap: 8px;
    --nrich-pagination-transition: all 0.2s ease;
}

/* Main Pagination Container - Maximum Specificity */
.nrich-pagination,
.nrich-lms-wrapper .nrich-pagination,
body .nrich-pagination,
div .nrich-pagination {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 2rem 0 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: var(--nrich-pagination-font-family) !important;
    font-size: var(--nrich-pagination-font-size) !important;
    line-height: 1.5 !important;
}

/* Pagination Container */
.nrich-pagination__container,
.nrich-lms-wrapper .nrich-pagination__container,
body .nrich-pagination__container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--nrich-pagination-gap) !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Page Numbers Container */
.nrich-pagination__pages,
.nrich-lms-wrapper .nrich-pagination__pages,
body .nrich-pagination__pages {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Pagination Buttons (Previous/Next) */
.nrich-pagination__btn,
.nrich-lms-wrapper .nrich-pagination__btn,
body .nrich-pagination__btn,
button.nrich-pagination__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    border: 1px solid var(--nrich-pagination-color-border) !important;
    background: var(--nrich-pagination-color-bg) !important;
    color: var(--nrich-pagination-color-text) !important;
    border-radius: var(--nrich-pagination-border-radius) !important;
    cursor: pointer !important;
    font-family: var(--nrich-pagination-font-family) !important;
    font-size: var(--nrich-pagination-font-size) !important;
    font-weight: var(--nrich-pagination-font-weight) !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    transition: var(--nrich-pagination-transition) !important;
    min-width: auto !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.nrich-pagination__btn:hover:not(:disabled),
.nrich-pagination__btn:focus:not(:disabled),
.nrich-lms-wrapper .nrich-pagination__btn:hover:not(:disabled),
body .nrich-pagination__btn:hover:not(:disabled) {
    border-color: var(--nrich-pagination-color-hover) !important;
    background: var(--nrich-pagination-color-hover-bg) !important;
    color: var(--nrich-pagination-color-hover) !important;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.nrich-pagination__btn:disabled,
.nrich-pagination__btn[aria-disabled="true"],
.nrich-lms-wrapper .nrich-pagination__btn:disabled,
body .nrich-pagination__btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: var(--nrich-pagination-color-bg) !important;
    border-color: var(--nrich-pagination-color-border) !important;
}

/* Button Text */
.nrich-pagination__btn-text,
.nrich-lms-wrapper .nrich-pagination__btn-text {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Button Icons */
.nrich-pagination__icon,
.nrich-lms-wrapper .nrich-pagination__icon {
    display: inline-block !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* Page Number Buttons */
.nrich-pagination__page,
.nrich-lms-wrapper .nrich-pagination__page,
body .nrich-pagination__page,
button.nrich-pagination__page {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border: 1px solid var(--nrich-pagination-color-border) !important;
    background: var(--nrich-pagination-color-bg) !important;
    color: var(--nrich-pagination-color-text) !important;
    border-radius: var(--nrich-pagination-border-radius) !important;
    cursor: pointer !important;
    font-family: var(--nrich-pagination-font-family) !important;
    font-size: var(--nrich-pagination-font-size) !important;
    font-weight: var(--nrich-pagination-font-weight) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: var(--nrich-pagination-transition) !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.nrich-pagination__page:hover:not(.nrich-pagination__page--active),
.nrich-pagination__page:focus:not(.nrich-pagination__page--active),
.nrich-lms-wrapper .nrich-pagination__page:hover:not(.nrich-pagination__page--active),
body .nrich-pagination__page:hover:not(.nrich-pagination__page--active) {
    border-color: var(--nrich-pagination-color-hover) !important;
    background: var(--nrich-pagination-color-hover-bg) !important;
    color: var(--nrich-pagination-color-hover) !important;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Active Page */
.nrich-pagination__page--active,
.nrich-lms-wrapper .nrich-pagination__page--active,
body .nrich-pagination__page--active,
.nrich-pagination__page[aria-current="page"] {
    background: var(--nrich-pagination-color-active-bg) !important;
    border-color: var(--nrich-pagination-color-active) !important;
    color: var(--nrich-pagination-color-active) !important;
    font-weight: 600 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* Ellipsis */
.nrich-pagination__ellipsis,
.nrich-lms-wrapper .nrich-pagination__ellipsis {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    color: var(--nrich-pagination-color-muted) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    user-select: none !important;
    pointer-events: none !important;
}

/* Pagination Info */
.nrich-pagination__info,
.nrich-lms-wrapper .nrich-pagination__info,
body .nrich-pagination__info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-family: var(--nrich-pagination-font-family) !important;
}

.nrich-pagination__info-text,
.nrich-lms-wrapper .nrich-pagination__info-text {
    font-size: var(--nrich-pagination-font-size) !important;
    font-weight: 600 !important;
    color: var(--nrich-pagination-color-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

.nrich-pagination__info-count,
.nrich-lms-wrapper .nrich-pagination__info-count {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--nrich-pagination-color-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .nrich-pagination__container,
    .nrich-lms-wrapper .nrich-pagination__container {
        gap: 6px !important;
    }

    .nrich-pagination__btn,
    .nrich-lms-wrapper .nrich-pagination__btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 36px !important;
    }

    .nrich-pagination__btn-text,
    .nrich-lms-wrapper .nrich-pagination__btn-text {
        display: none !important;
    }

    .nrich-pagination__icon,
    .nrich-lms-wrapper .nrich-pagination__icon {
        font-size: 24px !important;
    }

    .nrich-pagination__page,
    .nrich-lms-wrapper .nrich-pagination__page {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
    }

    .nrich-pagination__ellipsis,
    .nrich-lms-wrapper .nrich-pagination__ellipsis {
        min-width: 36px !important;
        min-height: 36px !important;
    }
}

@media screen and (max-width: 480px) {
    .nrich-pagination__pages,
    .nrich-lms-wrapper .nrich-pagination__pages {
        gap: 2px !important;
    }

    .nrich-pagination__page,
    .nrich-lms-wrapper .nrich-pagination__page {
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
    }
}