/* container */
.pg-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* space between items */
  padding: 8px 0;
}

/* number buttons as perfect circles */
.pg-btn {
  --size: 35px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;    
  text-decoration: none;
  font-weight: 600;
  color: #344054;
  background: #eef2f6;     
  transition: background .15s, color .15s, transform .05s;
  border: 0;
}
.pg-btn:hover { background: #e1e7ef; }
.pg-btn:active { transform: translateY(1px); }

.pg-active {
    background: #013668; 
    color: #fff;
}

/* arrows */
.pg-arrow {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  text-decoration: none;
  color: #667085;
  background: transparent;
  border: 1px solid #e5e7eb;
  transition: background .15s, color .15s;
  font-size: 20px;
  line-height: 1;
}
.pg-arrow:hover { background: #f3f4f6; color: #344054; }
.pg-arrow.disabled { color: #98a2b3; pointer-events: none; opacity: .6; }


.pg-ellipsis { color: #98a2b3; padding: 0 2px; }