/* Pagination Component Styles */
.products-pagination {margin:2rem 0; background:#0f1115; border:1px solid #1e2530; border-radius:12px; padding:1rem 1.25rem; font-family:Inter, system-ui, sans-serif; box-shadow:0 4px 12px rgba(0,0,0,.35);}
.products-pagination .pagination-main-row{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;}
.products-pagination .pagination-summary{font-size:.85rem; color:#c5d2e0; white-space:nowrap;}
.products-pagination .pagination-list, .products-pagination .pagination-arrows{display:flex; list-style:none; padding:0; margin:0; gap:.4rem;}
.products-pagination .page-item{position:relative;}
.products-pagination .page-item.disabled .page-link{cursor:not-allowed; opacity:.4;}
.products-pagination .page-link{display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 .65rem; border:1px solid #253041; background:#161b23; color:#d4dee8; font-size:.85rem; font-weight:500; border-radius:8px; text-decoration:none; transition:.18s background,.18s border-color,.18s color; backdrop-filter:blur(4px);} 
.products-pagination .page-item.active .page-link{background:var(--z-info); border-color:var(--z-info); color:#fff; box-shadow:0 0 0 3px var(--z-accent-glow);} 
.products-pagination .page-link:hover{background:#1d2632; border-color:#2d3a4d; color:#fff;}
.products-pagination .ellipsis .page-link{background:transparent; border:none; color:#66768a; cursor:default;}
.products-pagination .pagination-nav-buttons{margin-left:auto;}
.products-pagination .page-size-wrapper select{background:#161b23; border:1px solid #253041; color:#d4dee8; border-radius:8px; padding:.4rem .65rem; font-size:.75rem; font-weight:500; min-width:70px;}
.products-pagination .page-size-wrapper select:focus{outline:2px solid var(--z-info); outline-offset:2px;}
.products-pagination .quick-jump-form{display:flex; align-items:center; gap:.4rem;}
.products-pagination .quick-jump-input{width:70px; background:#161b23; border:1px solid #253041; color:#d4dee8; border-radius:8px; padding:.4rem .55rem; font-size:.75rem;}
.products-pagination .quick-jump-btn{background:var(--z-info); color:#fff; border:none; border-radius:8px; padding:.45rem .85rem; font-size:.7rem; letter-spacing:.5px; font-weight:600; cursor:pointer; box-shadow:0 2px 4px rgba(0,0,0,.4); transition:.18s background,.18s box-shadow;}
.products-pagination .quick-jump-btn:hover{background:var(--z-info); box-shadow:0 4px 10px rgba(0,0,0,.5);} 
.products-pagination .quick-jump-btn:active{transform:translateY(1px);} 
@media (max-width:1100px){
  .products-pagination .pagination-main-row{flex-direction:column; align-items:stretch;}
  .products-pagination .pagination-summary{order:1;}
  .products-pagination .pagination-list{order:2; flex-wrap:wrap;}
  .products-pagination .pagination-nav-buttons{order:3; margin-left:0;}
  .products-pagination .page-size-wrapper{order:4;}
  .products-pagination .quick-jump{order:5;}
}
@media (max-width:600px){
  .products-pagination{padding:.85rem .9rem; border-radius:10px;}
  .products-pagination .page-link{min-width:34px; height:34px; font-size:.75rem;}
  .products-pagination .pagination-summary{font-size:.7rem;}
  .products-pagination .page-size-wrapper select{font-size:.7rem; padding:.35rem .5rem;}
  .products-pagination .quick-jump-input{width:58px; font-size:.7rem;}
  .products-pagination .quick-jump-btn{font-size:.65rem; padding:.4rem .7rem;}
}/* =======================================================================
   Pagination Component (Dark Glass + Accent Theme)
   Matches marketplace look (dark layers, orange accent var(--z-accent))
   ======================================================================= */

/* Colors now managed by central theme.css */
:root {
    --pg-radius: 14px;
    --pg-transition: .35s cubic-bezier(.4,0,.2,1);
}

.products-pagination {
    background: linear-gradient(135deg,var(--pg-bg),var(--pg-bg-alt));
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    padding: 26px 34px 30px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--pg-shadow);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    animation: pgFadeIn .55s ease;
    isolation: isolate;
}

.products-pagination::before,
.products-pagination::after {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    mix-blend-mode:overlay;
}

.products-pagination::before {
    background:
        radial-gradient(circle at 14% 22%, rgba(255,107,53,.18), transparent 60%),
        radial-gradient(circle at 84% 78%, rgba(255,107,53,.12), transparent 65%);
    opacity:.85;
}

.products-pagination::after {
    background:
        linear-gradient(140deg, rgba(255,255,255,.05), transparent 55%),
        linear-gradient(-150deg, rgba(255,255,255,.04), transparent 65%);
    opacity:.35;
}

@keyframes pgFadeIn {
    from { opacity:0; transform:translateY(14px); }
    to { opacity:1; transform:translateY(0); }
}

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

/* Info */
.pagination-info .page-info-text {
    font-size: .85rem;
    letter-spacing: .4px;
    color: var(--pg-text-dim);
    font-weight: 500;
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pagination-info strong,
.pagination-info .highlight {
    color: var(--pg-accent);
    font-weight: 600;
}

/* List */
.pagination {
    --btn-size: 44px;
    display: flex;
    gap: 10px;
    padding: 10px 16px;
    margin: 0;
    list-style: none;
    background: rgba(15,20,28,.55);
    border: 1px solid var(--pg-border);
    border-radius: calc(var(--pg-radius) - 4px);
    position: relative;
    backdrop-filter: blur(14px);
}

.pagination::before {
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(135deg, rgba(255,107,53,.14), transparent 60%),
        linear-gradient(-145deg, rgba(255,107,53,.08), transparent 55%);
    opacity:.4;
    pointer-events:none;
    border-radius: inherit;
}

.page-item { display: flex; }

.page-link,
.page-link:visited {
    min-width: var(--btn-size);
    height: var(--btn-size);
    padding: 0 14px;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--pg-text-dim);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid var(--pg-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    cursor: pointer;
    transition: var(--pg-transition);
    box-shadow: 0 2px 4px rgba(0,0,0,.35) inset, 0 4px 10px -3px rgba(0,0,0,.55);
}

.page-link i {
    font-size: .9rem;
    line-height: 1;
    pointer-events: none;
}

.page-link:hover {
    color: #fff;
    border-color: var(--pg-accent);
    background: linear-gradient(135deg, rgba(255,107,53,.20), rgba(255,107,53,.08));
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -8px rgba(255,107,53,.55), 0 4px 12px -3px rgba(0,0,0,.6);
}

.page-link:active {
    transform: translateY(-1px) scale(.97);
}

.page-item.active .page-link,
.page-item.active .current-page {
    background: linear-gradient(135deg, var(--pg-accent), var(--pg-accent-hover));
    color: #fff;
    border-color: var(--pg-accent);
    box-shadow: 0 8px 24px -6px rgba(255,107,53,.6), 0 2px 6px rgba(0,0,0,.55);
    cursor: default;
}

.page-item.disabled .page-link,
.page-item.disabled .page-link:hover {
    opacity: .4;
    background: rgba(255,255,255,.04);
    color: var(--pg-text-dim);
    cursor: not-allowed;
    transform: none;
    border-color: var(--pg-border);
}

.page-ellipsis {
    cursor: default;
    background: rgba(255,255,255,.05);
    border-style: dashed;
}

.page-link:focus-visible {
    outline: none;
    box-shadow: var(--pg-focus-ring);
}

/* Page size selector */
.page-size-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(15,20,28,.55);
    border: 1px solid var(--pg-border);
    padding: 10px 16px;
    border-radius: 12px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
}

.page-size-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--pg-text-dim);
}

#pageSizeSelect {
    background: rgba(255,255,255,.05);
    border: 1px solid var(--pg-border);
    color: var(--pg-text);
    font-size: .75rem;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    min-width: 80px;
    transition: var(--pg-transition);
}

#pageSizeSelect:hover {
    border-color: var(--pg-border-strong);
}

#pageSizeSelect:focus {
    outline: none;
    border-color: var(--pg-accent);
    box-shadow: var(--pg-focus-ring);
}

.page-size-suffix {
    font-size: .7rem;
    color: var(--pg-text-dim);
    font-weight: 500;
}

/* Quick jump */
.pagination-quick-jump {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(15,20,28,.55);
    border: 1px solid var(--pg-border);
    padding: 14px 18px;
    border-radius: 12px;
    width: fit-content;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
    z-index: 2;
}

.quick-jump-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--pg-text-dim);
}

.quick-jump-input {
    width: 90px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--pg-border);
    color: var(--pg-text);
    padding: 9px 12px;
    font-size: .8rem;
    border-radius: 8px;
    transition: var(--pg-transition);
    -moz-appearance: textfield;
}

.quick-jump-input::-webkit-outer-spin-button,
.quick-jump-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quick-jump-input:focus {
    outline: none;
    border-color: var(--pg-accent);
    box-shadow: var(--pg-focus-ring);
    background: rgba(255,255,255,.08);
}

.quick-jump-btn {
    background: linear-gradient(135deg,var(--pg-accent),var(--pg-accent-hover));
    border: 1px solid var(--pg-accent);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .9rem;
    transition: var(--pg-transition);
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 18px -4px rgba(255,107,53,.55), 0 2px 6px rgba(0,0,0,.5);
}

.quick-jump-btn::before {
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(110deg, rgba(255,255,255,.25), transparent 60%);
    opacity:0;
    transition: var(--pg-transition);
}

.quick-jump-btn:hover::before {
    opacity:.9;
}

.quick-jump-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -8px rgba(255,107,53,.65), 0 4px 12px rgba(0,0,0,.55);
}

.quick-jump-btn:active {
    transform: translateY(-1px) scale(.96);
}

.quick-jump-btn:focus-visible {
    outline: none;
    box-shadow: var(--pg-focus-ring);
}

/* Compact / responsive */
@media (max-width: 1100px) {
    .pagination-container {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }
    .pagination {
        align-self: center;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 680px) {
    .products-pagination {
        padding: 22px 20px 26px;
        gap: 18px;
    }
    .pagination {
        --btn-size: 40px;
        padding: 8px 12px;
        gap: 8px;
    }
    .page-link {
        font-size: .75rem;
        padding: 0 10px;
        border-radius: 10px;
    }
    .page-size-selector,
    .pagination-quick-jump {
        width: 100%;
        justify-content: space-between;
        padding: 12px 14px;
    }
    .pagination-quick-jump {
        flex-wrap: wrap;
        gap: 10px;
    }
    .quick-jump-input {
        flex: 1;
    }
    .quick-jump-btn {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .products-pagination,
    .page-link,
    .quick-jump-btn,
    .quick-jump-input,
    .pagination,
    .page-size-selector { animation: none !important; transition: none !important; }
}

@media (prefers-contrast: high) {
    .products-pagination,
    .pagination,
    .page-link {
        border-width: 2px;
    }
}

/* Focus visible polyfill friendly */
.page-link:focus:not(:focus-visible),
.quick-jump-btn:focus:not(:focus-visible),
#pageSizeSelect:focus:not(:focus-visible),
.quick-jump-input:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}