/* =====================================================================
   Shared pagination — used by attraction.php, car-rentals-hub.php,
   store.php (client-side, js/pagination.js) and newspaper.php
   (server-side, includes/pagination.php).

   Load AFTER css/bootstrap.min.css. Every colour/size is a custom
   property with a fallback, so a page themes it by setting variables
   (on :root or on the container), never by copying these rules:

     --pg-color          link text + border colour   (default --dark-blue)
     --pg-border         border colour               (default --pg-color)
     --pg-bg             link background             (default #fff, as Bootstrap)
     --pg-hover-bg       hover background            (default --pg-color)
     --pg-hover-color    hover text                  (default #fff)
     --pg-hover-border   hover border                (default #dee2e6, as Bootstrap)
     --pg-active-bg      active page background      (default orange gradient)
     --pg-active-color   active page text            (default #fff)
     --pg-active-border  active page border          (default transparent)
     --pg-font           font-family                 (default Poppins)
     --pg-font-size / --pg-font-weight / --pg-line-height
     --pg-padding        link padding                (default .5rem 1rem)
     --pg-radius         link radius                 (default 6px)
     --pg-min-width      link min-width              (default 2.5rem)
     --pg-gap            gap between items           (default .5rem)
     --pg-item-margin    margin around each item     (default .25rem)
     --pg-margin         .pagination-controls margin (default 1.5rem 0 0)
     --pg-disabled-opacity                           (default .5)
   ===================================================================== */

.pagination-controls { margin: var(--pg-margin, 1.5rem 0 0); }
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--pg-gap, 0.5rem);
    flex-wrap: wrap;
    padding-left: 0;
}
.page-item { list-style: none; margin: var(--pg-item-margin, 0.25rem); }
.page-link {
    padding: var(--pg-padding, 0.5rem 1rem);
    border: 1px solid var(--pg-border, var(--pg-color, var(--dark-blue, #0c1f52)));
    color: var(--pg-color, var(--dark-blue, #0c1f52));
    background-color: var(--pg-bg, #fff);
    text-decoration: none;
    border-radius: var(--pg-radius, 6px);
    transition: all 0.2s ease;
    min-width: var(--pg-min-width, 2.5rem);
    text-align: center;
    font-weight: var(--pg-font-weight, 600);
    font-size: var(--pg-font-size, inherit);
    line-height: var(--pg-line-height, 1.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pg-font, 'Poppins', sans-serif);
}
.page-item.active .page-link {
    background: var(--pg-active-bg, linear-gradient(135deg, var(--primary-orange, #f97316), var(--secondary-orange, #fb923c)));
    border-color: var(--pg-active-border, transparent);
    color: var(--pg-active-color, white);
}
.page-link:hover {
    background: var(--pg-hover-bg, var(--pg-color, var(--dark-blue, #0c1f52)));
    color: var(--pg-hover-color, white);
    border-color: var(--pg-hover-border, #dee2e6);
}
.page-item.disabled .page-link {
    opacity: var(--pg-disabled-opacity, 0.5);
    pointer-events: none;
    cursor: not-allowed;
    background-color: var(--pg-disabled-bg, #f9f9f9);
    color: var(--pg-disabled-color, #aaa);
    border-color: var(--pg-disabled-border, #ddd);
}