:root {
    --dulux-dark-blue: #0B1B34;
    --dulux-primary-blue: #002C65;
}
.pagination {
    display: flex;
    gap: 10px;
    border-radius: 8px; 
    margin-top: 32px;
    justify-content: center;
}
.pagination i {
    font-size: 12px;
}
.page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--dulux-dark-blue);
    background-color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 4px;
    border: 1px solid var(--Casper-White-QTR, #EDECE6);
    background: var(--White, #FFF);
}
.current-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: white;
    background-color: #0f172a;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 4px;
    border: 1px solid #0f172a;
    /* background: var(--White, #FFF); */
}
.dot-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  font-weight: 500;
  color: #0f172a; /* same navy blue as numbers */
  border-radius: 8px;
  pointer-events: none;
  user-select: none;
}
/* Hover state */
.page-btn:hover {
    background-color: #f3f3f3;
    color: var(--dulux-dark-blue);
    /* light gray */
}

/* Selected/Active page */
.page-btn.selected {
    background-color: #0f172a;
    /* dark navy */
    color: #fff;
}

/* Dots shouldn't have hover or pointer */
.page-btn.dots {
    cursor: default;
    pointer-events: none;
    background-color: transparent;
}
.page-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .pagination {
        margin-top: 24px;
    }
}