/* Делает контейнер видимым и кликабельным */
.friend-btn-holder{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 1000;
}

/* БАЗА кнопки */
button.action-btn.friend-btn{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem .55rem .7rem;
  border: 0;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font: 500 14px/1.1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(2,6,23,.15);
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease, opacity .18s ease;

  /* важно для кликабельности поверх возможных оверлеев */
  position: relative;
  z-index: 1001;
  pointer-events: auto;

  /* на всякий случай убираем «залипшие» стили */
  opacity: 1;
  transform: translate(0, 0);

    visibility: visible;
}




button.action-btn.friend-btn {

    border: 0;
    font: 500 14px / 1.1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    cursor: pointer;
    position: relative;
    z-index: 1001;
    pointer-events: auto;
    opacity: 1;
    transform: translate(0, 0);
    visibility: visible;
    display: inline-flex
;
    align-items: center;
    gap: 10px;

    color: #fff;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
    transition: transform .15s ease, background .15s ease;
}


.user-card button.action-btn.friend-btn {
gap: 0px;
padding: 5px 4px;
}




button.action-btn.friend-btn:hover{ background:#0b1220; transform: translateY(-1px); }
button.action-btn.friend-btn:active{ transform: translateY(0); }
button.action-btn.friend-btn:disabled{ opacity:.6; cursor:not-allowed; }


span.friend-btn__text {

    color: #fff;
  
    padding: 10px 14px;

}

/* ИКОНКА */
.friend-btn__icon::before{
  content:"👤";
  font-size: 1.1em;
  display: inline-block;
  line-height: 1;
  transform: translateY(1px);
}

/* СОСТОЯНИЯ */
button.action-btn.friend-btn.is-active{ background:#10b981; }   /* друзья */
button.action-btn.friend-btn.is-accept{ background:#10b981; }   /* принять */
button.action-btn.friend-btn.is-reject{ background:#ef4444; }   /* отклонить/удалить */
button.action-btn.friend-btn.is-pending{ background:#f59e0b; }  /* заявка отправлена */
button.action-btn.friend-btn.is-pending:hover{ background:#d97706; }

/* Альтернативные иконки по состояниям (необязательно) */
button.action-btn.friend-btn.is-active  .friend-btn__icon::before{ content:"👥"; }
button.action-btn.friend-btn.is-accept  .friend-btn__icon::before{ content:"✔"; }
button.action-btn.friend-btn.is-reject  .friend-btn__icon::before{ content:"✖"; }
button.action-btn.friend-btn.is-pending .friend-btn__icon::before{ content:"⏳"; }

/* Ряд из двух кнопок (принять/отклонить) */
.friend-btn__row{ display:flex; gap:.5rem; }