/* Pagination wrapper */
.wrapper {
    width: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin-top: 2rem; 
}

/* Alap pagination */
.my-custom-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* engedi a törést kisebb képernyőn */
    list-style: none;
    padding: 0;
    gap: 5px; /* modernebb mint margin */
}

.my-custom-pagination li {
    /* nincs szükség marginra, mert a gap kezeli */
}

/* Gombok stílusa */
.my-custom-pagination li a,
.my-custom-pagination li span {
    padding: 6px 10px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: red;
    color: white;
    font-size: 14px;
    white-space: nowrap;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 38px;
    min-width: 38px;
}


/* Aktív oldal */
.my-custom-pagination li.active span,
.my-custom-pagination li.active a {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* ... pontok */
.my-custom-pagination li.dots span {
    cursor: default;
}

/* Hover effektus */
.my-custom-pagination li a:hover:not(.disabled),
.my-custom-pagination li:not(.disabled) span:hover {
    background-color: #eee;
    color: black;
}

/* Letiltott link */
.my-custom-pagination li.disabled a,
.my-custom-pagination li.disabled span {
    color: #999;
    pointer-events: none;
}

/* Pagination nav extra */
.pagination-nav nav {
    margin-top: 30px; 
    position: relative; 
    z-index: 1; 
    background: none;
    width: auto;
    max-width: none;
    height: auto;
    position: static; 
    top: auto;
    box-shadow: none;
}

/* Mobil optimalizálás */
@media (max-width: 480px) {
    .my-custom-pagination li a,
    .my-custom-pagination li span {
        padding: 5px 8px;
        font-size: 13px;
    }

    .my-custom-pagination {
        gap: 4px;
    }
}