/* make sure we’re targeting the div.quantity wrapper */
div.quantity {
  display: inline-flex !important;
  align-items: center !important;
}

/* target the buttons inside it */
div.quantity .qty-btn {
  position: relative;      /* so z-index works */
  z-index: 2;              /* float it above the input */
  width: 2em !important;
  height: 2em !important;
  border: 1px solid #ccc !important;
  cursor: pointer !important;
  text-align: center !important;
  line-height: 2 !important;
  font-size: 1.2em !important;
  padding: 0 !important;
  margin: 0 !important;
  top: 0 !important;
  border-radius: 5px !important;
}

/* input sits beneath the buttons if they overlap */
div.quantity input.qty {
  z-index: 1;
  position: relative;
  width: 3em !important;
  text-align: center !important;
  margin: 0 .5em !important;
}

/* 1) Center the container */
.mb-addusers-form {
  display: flex;
  justify-content: left;
  margin: 2em 0;           /* optional vertical spacing */
}

/* 2) Stack and center the form’s contents */
.mb-addusers-form .cart {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 3) Ensure quantity controls sit in one row */
.mb-addusers-form .quantity {
  display: flex;
  align-items: center;
  margin-bottom: 1em;      /* space before the button */
}

/* 4) Make the Add Users button full-width of the quantity row (or adjust as you like) */
.mb-addusers-form .single_add_to_cart_button {
  display: block;
  width: 100%;
  max-width: 200px;        /* optional cap */
  margin-top: 0;           /* already handled by quantity’s bottom margin */
  padding: .75em 1em;
  text-align: center;
}