/**
 * Activate / Deactivate sits under the listing photo, beside the badge that shows the same
 * state, instead of in the button row - an owner scanning a long list reaches it without
 * reading past Edit, View and Duplicate first.
 *
 * The button row styles it via '.account-listing__btns .btn:hover'; outside that row it needs
 * its own grey-to-yellow hover.
 */
/* The wrapper spans the photo, so centring inside it centres the button under the photo. */
.account-listing__status-action {
  display: flex;
  align-self: stretch;
  justify-content: center;
  margin-top: 1.6rem;
}

.account-listing__status-action .btn_status {
  display: flex;
  min-width: auto;
  align-items: center;
  justify-content: center;
  gap: 0.4444rem;
  padding: 0.5444rem 1rem;
}

.account-listing__status-action .btn_status:hover {
  transition: 0.5s ease;
  background: #FFBA06;
}

/*
 * The first card row holds only the photo, so stacking it puts the button underneath without
 * widening the column - a full-width wrapper would push the text column away from the photo.
 */
.account-listing__item:first-child {
  flex-direction: column;
  align-items: flex-start;
}

/* Keep short cards from collapsing around the photo and its button. */
.account-listing {
  min-height: 300px;
}

@media only screen and (max-width: 1022px) {
  .account-listing__status-action {
    margin-top: 1.2rem;
  }

  .account-listing__status-action .btn_status {
    padding: 0.2525rem 1rem;
  }
}